/*
 * marcai · portal.css — PASADA DE FUNDAMENTOS (Bloque 1, 2026-05-28)
 * ---------------------------------------------------------------------------
 * Aplica la propuesta de UI/UX validada (Design/Output/portal-refinado.css)
 * con UNA modificación obligatoria respecto a esa propuesta: el manejo del
 * verde. Decisión cerrada con el usuario:
 *
 *   --color-acento  (#22C55E) → identidad del LOGO, decoración, fondos, bordes.
 *   --color-acento-boton (#16A34A) → SOLO donde hay texto blanco sobre acento
 *                                    (botón primario, tab activa del nav, focus
 *                                    rings, foco de inputs, accent-color de
 *                                    checkboxes). Cumple WCAG AA con blanco.
 *
 * Regla: ¿hay texto blanco encima de ese verde? → -boton. ¿Decoración? → -acento.
 *
 * Reglas que NO se rompen:
 *   §4 sin framework ni CDN · tokens en :root, nunca hex literal en componentes.
 *   Art. 28: los REPORTES incrustados traen su estilo embebido (Arial Nº8). Este
 *   CSS solo ENMARCA .reporte-incrustado; ninguna regla toca sus descendientes.
 */

/* ==========================================================================
   TOKENS
   ========================================================================== */
:root {
  /* — Marca: azul marino (sin cambio de identidad) — */
  --color-primario:        #1B2A41;   /* navy: header, texto fuerte, énfasis */
  --color-primario-700:    #24364F;   /* hover de superficies navy */
  --color-primario-50:     #EFF3F8;   /* navy lavado: hover sutil, header de tabla */

  /* — Acento verde — REGLA DE DOS TOKENS (ver cabecera del archivo) —
     `--color-acento` mantiene el #22C55E del LOGO (identidad de marca).
     `--color-acento-boton` (#16A34A) cumple WCAG AA con texto blanco; se usa
     SOLO donde hay texto blanco sobre acento (botón primario, tab activa,
     focus ring, foco de input, accent de checkbox). El verde original queda
     para fondos, bordes y decoración. */
  --color-acento:          #22C55E;   /* verde de marca (logo, decoración, fondos) */
  --color-acento-boton:    #16A34A;   /* verde de acción cuando hay texto blanco encima */
  --color-acento-hover:    #15803D;   /* hover/activo del botón primario */
  --color-acento-suave:    #ECFDF3;   /* fondo de éxito / chip ok */
  --color-acento-borde:    #A7E3C0;

  /* — Neutros: escala slate fría (estilo Stripe) — */
  --color-fondo:           #F6F8FA;   /* fondo de PÁGINA (gris muy sutil) */
  --color-superficie:      #FFFFFF;   /* tarjetas, barras, controles */
  --color-fondo-suave:     #F6F8FA;   /* zebra de tabla, header de tabla, hover */
  --color-fondo-reverse:   #1A1A1A;
  --color-borde:           #E3E8EE;   /* borde estándar (fino, claro) */
  --color-borde-fuerte:    #CDD5DF;   /* borde de control / divisor marcado */
  --color-texto:           #1A2330;   /* texto base (casi-navy, alto contraste) */
  --color-texto-suave:     #5B6573;   /* secundario, metadatos */
  --color-texto-tenue:     #8A94A6;   /* placeholders, labels de tabla */

  /* — Semánticos — */
  --color-peligro:         #B42318;
  --color-peligro-hover:   #912018;
  --color-peligro-suave:   #FEF3F2;
  --color-pendiente:       #B54708;   /* ámbar: acción esperable */
  --color-pendiente-suave: #FFFAEB;
  --color-info:            #1B2A41;
  --color-info-suave:      #EFF4FB;

  /* — Espaciado (base 4px) — */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* — Radios — */
  --radio-sm: 5px; --radio: 8px; --radio-lg: 12px; --radio-full: 999px;

  /* — Sombras (sutiles, en capas) — */
  --sombra-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra:    0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --sombra-md: 0 4px 14px rgba(16, 24, 40, 0.08);

  /* — Tipografía — */
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --texto-xs:  0.75rem;    /* 12 — chips, labels de tabla */
  --texto-sm:  0.8125rem;  /* 13 — metadatos, celdas densas */
  --texto-base:0.875rem;   /* 14 — cuerpo (UI de datos) */
  --texto-md:  1rem;       /* 16 — texto cómodo */
  --texto-lg:  1.125rem;   /* 18 — título de tarjeta */
  --texto-xl:  1.375rem;   /* 22 — título de página */
  --texto-2xl: 1.625rem;   /* 26 */
  --paso-tabular: "tnum" 1, "lnum" 1;  /* cifras tabulares para columnas numéricas */
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--fuente);
  font-size: var(--texto-base);
  color: var(--color-texto);
  background: var(--color-fondo);
  margin: 0;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Enlaces de texto sobre fondo claro: el verde de marca da contraste suficiente
   con cuerpo blanco/gris (no es "texto blanco sobre acento"), así que se mantiene
   el patrón de la propuesta — hover-oscuro en estado normal, marca en hover. */
a { color: var(--color-acento-hover); text-underline-offset: 2px; }
a:hover { color: var(--color-acento); }

h1, h2, h3 { color: var(--color-primario); line-height: 1.25; }

/* ==========================================================================
   HEADER + BARRA DE NAVEGACIÓN (layout único — los 3 portales)
   ========================================================================== */
.portal-header {
  background: var(--color-primario);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--sombra-sm);
}

.portal-nav {
  display: flex;
  align-items: stretch;
  gap: var(--e4);
  padding: 0 var(--e5);
  min-height: 56px;
  max-width: 1180px;
  margin: 0 auto;
}

/* Marca: el logo reverse va TRANSPARENTE (sin caja negra horneada) a 26px.
   (Bloque 3: reemplazo del PNG por uno transparente — pendiente.) */
.portal-nav__brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--e2);
  text-decoration: none;
}
/* Focus ring sobre fondo navy: usar -boton (verde oscuro WCAG AA). */
.portal-nav__brand:focus-visible { outline: 2px solid var(--color-acento-boton); outline-offset: 3px; border-radius: 4px; }
.portal-nav__logo { display: block; height: 26px; width: auto; }

/* Tabs del nav principal: van pegadas al borde inferior de la barra, con
   subrayado de acento en el activo (affordance de "barra de navegación de app"). */
.portal-nav__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--e1);
  flex: 1 1 auto;
}
.portal-nav__items li { display: flex; }
.portal-nav__items a {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--e3);
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  font-size: var(--texto-base);
  font-weight: 500;
  border-bottom: 2.5px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.portal-nav__items a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
/* Tab activa: el texto blanco "Asistencia" está SOBRE la barra navy + sobre el
   subrayado verde. El subrayado lleva -boton (texto blanco está cerca, queremos
   WCAG sobre el conjunto barra/subrayado). */
.portal-nav__items a.activo {
  color: #fff;
  font-weight: 600;
  border-bottom-color: var(--color-acento-boton);
}
.portal-nav__items a:focus-visible { outline: 2px solid var(--color-acento-boton); outline-offset: -3px; }

/* Cluster derecho: usuario + logout. */
.portal-nav__right {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin-left: auto;
  align-self: center;
  font-size: var(--texto-sm);
}
.portal-nav__usuario {
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22rem;
  padding-left: var(--e3);
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.portal-nav__logout { margin: 0; }

/* Banda de identificación del prestador (Art. 17c) — SOLO fiscalización. */
.identificacion-prestador {
  background: var(--color-primario-700);
  color: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--e2) var(--e5);
  font-size: var(--texto-sm);
}
.identificacion-prestador-inner { max-width: 1180px; margin: 0 auto; }
.identificacion-prestador strong { color: #fff; font-weight: 700; }

/* ==========================================================================
   CONTENIDO + CABECERA DE PÁGINA
   ========================================================================== */
.portal-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e6) var(--e5) var(--e8);
}

/* Cabecera de página: título + contexto (reemplaza al H1 suelto). */
.page-head { margin-bottom: var(--e5); }
.page-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}
h1.portal-titulo {
  font-size: var(--texto-xl);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.page-head__sub {
  margin: var(--e1) 0 0;
  color: var(--color-texto-suave);
  font-size: var(--texto-base);
}

/* ==========================================================================
   SUBNAV (tabs accesibles — refinadas a subrayado, "se ven navegables")
   ========================================================================== */
.subnav {
  display: flex;
  gap: var(--e5);
  border-bottom: 1px solid var(--color-borde);
  margin: 0 0 var(--e5);
  padding: 0;
  list-style: none;
}
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e3) 0;
  text-decoration: none;
  color: var(--color-texto-suave);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
  font-size: var(--texto-base);
  transition: color .12s, border-color .12s;
}
.subnav a:hover { color: var(--color-primario); border-bottom-color: var(--color-borde-fuerte); }
/* Tab activa del subnav: el texto del tab queda navy sobre fondo claro, pero el
   subrayado coloreado es el indicador. Lleva -boton para consistencia visual con
   el subrayado del nav principal (ambos son indicadores de "estado activo"). */
.subnav a.activo { color: var(--color-primario); border-bottom-color: var(--color-acento-boton); font-weight: 600; }
.subnav a:focus-visible { outline: 2px solid var(--color-acento-boton); outline-offset: 3px; border-radius: 3px; }

/* Contador de pendientes en un tab ("Modificaciones (2)"). */
.subnav .contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radio-full);
  background: var(--color-pendiente-suave);
  color: var(--color-pendiente);
  font-size: var(--texto-xs);
  font-weight: 700;
}

/* ==========================================================================
   NAVEGACIÓN DE PERÍODO (HTMX)
   ========================================================================== */
.nav-mes {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e4);
  flex-wrap: wrap;
}
.nav-mes .mes-actual {
  font-weight: 600;
  color: var(--color-primario);
  min-width: 9rem;
  text-align: center;
}
.nav-mes .mes-actual::first-letter { text-transform: uppercase; }

/* ==========================================================================
   TARJETAS  (superficie base del layout — estilo Stripe)
   ========================================================================== */
.tarjeta {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-sm);
  margin: 0 0 var(--e5);
  overflow: hidden;
}
.tarjeta__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--color-borde);
}
.tarjeta__header h2 {
  margin: 0;
  font-size: var(--texto-lg);
  font-weight: 600;
}
.tarjeta__sub { margin: 2px 0 0; font-size: var(--texto-sm); color: var(--color-texto-suave); }
.tarjeta__body { padding: var(--e5); }
.tarjeta__body--flush { padding: 0; }          /* para tablas a sangre */

/* ==========================================================================
   TABLAS PROPIAS DEL PORTAL  (NO los reportes incrustados)
   ========================================================================== */
.tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.portal-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-base);
}
table.portal-tabla th {
  background: var(--color-fondo-suave);
  color: var(--color-texto-tenue);
  font-weight: 600;
  font-size: var(--texto-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}
table.portal-tabla td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--color-borde);
  vertical-align: middle;
}
table.portal-tabla tbody tr:last-child td { border-bottom: none; }
table.portal-tabla tbody tr:hover { background: var(--color-fondo-suave); }
table.portal-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   REPORTE INCRUSTADO — solo enmarcar, NO re-estilar (Art. 28)
   El generator trae Arial Nº8 + table-layout:fixed. Aquí solo damos el marco
   de tarjeta; ninguna regla selecciona descendientes de .reporte-incrustado.
   ========================================================================== */
.reporte-incrustado {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-sm);
  padding: var(--e5);
  margin: 0 0 var(--e5);
  overflow-x: auto;
}

/* ==========================================================================
   FICHA  (objeto único — <dl class="ficha">)
   ========================================================================== */
.ficha {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  column-gap: var(--e6);
  margin: 0;
  font-size: var(--texto-base);
}
/* Variante 2 columnas de parejas (tarjetas con 4+ campos cortos). El <dl>
   sigue siendo plano: grid auto-flow ubica dt,dd,dt,dd a lo ancho. */
.ficha--2col {
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr) minmax(8rem, max-content) minmax(0, 1fr);
  column-gap: var(--e5);
}
.ficha dt {
  font-weight: 500;
  color: var(--color-texto-suave);
  padding: var(--e3) var(--e4) var(--e3) 0;
  border-top: 1px solid var(--color-borde);
}
.ficha dd {
  margin: 0;
  color: var(--color-texto);
  font-weight: 500;
  padding: var(--e3) 0;
  border-top: 1px solid var(--color-borde);
}
.ficha dt:first-of-type, .ficha dd:first-of-type { border-top: none; }
/* En 2-col, las dos primeras parejas (dt,dd,dt,dd) van sin borde superior. */
.ficha--2col dt:nth-of-type(2), .ficha--2col dd:nth-of-type(2) { border-top: none; }
.ficha dd em { font-style: italic; font-weight: 400; color: var(--color-texto-tenue); }

/* ==========================================================================
   ESTADOS — vacío (gris) ≠ pendiente (ámbar) ≠ error (rojo)
   ========================================================================== */
.estado-vacio {
  padding: var(--e6) var(--e4);
  background: var(--color-fondo-suave);
  border: 1px dashed var(--color-borde-fuerte);
  border-radius: var(--radio);
  color: var(--color-texto-suave);
  font-size: var(--texto-base);
  text-align: center;
}
.estado-pendiente { color: var(--color-pendiente); font-style: italic; font-size: var(--texto-sm); }

/* Pill de estado de un recurso. Variantes por color semántico. */
.estado-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radio-full);
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1.6;
  background: var(--color-primario-50);
  color: var(--color-primario);
  border: 1px solid transparent;
  white-space: nowrap;
}
.estado-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.estado-chip--ok       { background: var(--color-acento-suave);   color: var(--color-acento-hover); }
.estado-chip--pendiente{ background: var(--color-pendiente-suave);color: var(--color-pendiente); }
.estado-chip--peligro  { background: var(--color-peligro-suave);  color: var(--color-peligro); }

/* ==========================================================================
   AVISOS (banner contextual)
   ========================================================================== */
.aviso {
  display: flex;
  gap: var(--e3);
  background: var(--color-pendiente-suave);
  border: 1px solid color-mix(in srgb, var(--color-pendiente) 25%, transparent);
  padding: var(--e3) var(--e4);
  margin: 0 0 var(--e4);
  font-size: var(--texto-sm);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
}
.aviso-info  { background: var(--color-info-suave);    border-color: color-mix(in srgb, var(--color-primario) 18%, transparent); }
.aviso-ok    { background: var(--color-acento-suave);  border-color: var(--color-acento-borde); }
.aviso-error { background: var(--color-peligro-suave); border-color: color-mix(in srgb, var(--color-peligro) 30%, transparent); }

/* Leyenda de abreviaturas (Art. 28 g). */
.leyenda-abreviaturas {
  font-size: var(--texto-sm);
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--color-borde);
  color: var(--color-texto-suave);
}
.leyenda-abreviaturas h2 { font-size: var(--texto-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-texto-tenue); margin: 0 0 var(--e3); }
.leyenda-abreviaturas dl { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin: 0; }
.leyenda-abreviaturas dt { font-weight: 700; color: var(--color-primario); }
.leyenda-abreviaturas dd { margin: 0 var(--e2) 0 var(--e1); }

/* ==========================================================================
   BOTONES — paleta consolidada
   ========================================================================== */
.boton-primario, .boton-secundario, .boton-peligro, .boton-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: var(--texto-base);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s, box-shadow .12s, color .12s;
}
/* Focus rings: todos llevan -boton porque el outline rodea el borde del botón
   (texto blanco/oscuro adyacente al verde — queremos contraste WCAG). */
.boton-primario:focus-visible, .boton-secundario:focus-visible,
.boton-peligro:focus-visible, .boton-nav:focus-visible {
  outline: 2px solid var(--color-acento-boton); outline-offset: 2px;
}

/* PRIMARIO: texto blanco sobre verde — usa -boton (WCAG AA con #fff). */
.boton-primario { background: var(--color-acento-boton); color: #fff; box-shadow: var(--sombra-sm); }
.boton-primario:hover { background: var(--color-acento-hover); color: #fff; }

.boton-secundario { background: var(--color-superficie); color: var(--color-primario); border-color: var(--color-borde-fuerte); box-shadow: var(--sombra-sm); }
.boton-secundario:hover { background: var(--color-fondo-suave); border-color: var(--color-texto-tenue); }

.boton-peligro { background: var(--color-superficie); color: var(--color-peligro); border-color: color-mix(in srgb, var(--color-peligro) 45%, var(--color-borde)); }
.boton-peligro:hover { background: var(--color-peligro-suave); border-color: var(--color-peligro); }

.boton-nav { background: transparent; color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.32); font-weight: 500; font-size: var(--texto-sm); padding: 6px var(--e3); }
.boton-nav:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* Tamaño compacto para acciones de fila. */
.boton-sm { padding: 4px var(--e3); font-size: var(--texto-sm); }

.acciones { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
.campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--texto-sm); }
.campo > label { font-weight: 600; color: var(--color-primario); }
.campo > input, .campo > select, .campo > textarea {
  padding: var(--e2) var(--e3);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: var(--texto-base);
  background: var(--color-superficie);
  color: var(--color-texto);
}
.campo > input::placeholder, .campo > textarea::placeholder { color: var(--color-texto-tenue); }
/* Foco de input: borde + halo en -boton. Aunque el texto del input NO es blanco
   sobre verde, el halo "señala foco" — usar -boton mantiene consistencia con
   los demás focus rings del sistema (todos -boton para que el ojo los reconozca). */
.campo > input:focus, .campo > select:focus, .campo > textarea:focus {
  outline: none;
  border-color: var(--color-acento-boton);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento-boton) 22%, transparent);
}

.form-columna { display: flex; flex-direction: column; gap: var(--e4); max-width: 32rem; }

.form-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  align-items: flex-end;
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
  box-shadow: var(--sombra-sm);
}
.form-filtros .campo { font-size: var(--texto-xs); }

/* Checkbox: el accent-color pinta el "check" en blanco sobre el verde → -boton. */
.campo-checkbox { display: flex; align-items: center; gap: var(--e2); font-size: var(--texto-base); }
.campo-checkbox input { accent-color: var(--color-acento-boton); width: 16px; height: 16px; }

/* ==========================================================================
   PANTALLAS DE AUTH (login, admin, no autorizado, acceso DT)
   ========================================================================== */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--e4); background: var(--color-fondo); }
.auth-card {
  width: 100%; max-width: 408px; padding: var(--e7) var(--e6);
  border: 1px solid var(--color-borde); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md); background: var(--color-superficie);
}
.auth-logo { display: block; height: 40px; margin: 0 auto var(--e6); }
.auth-titulo { font-size: var(--texto-xl); font-weight: 600; margin: 0 0 var(--e5); text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: var(--e4); margin: var(--e4) 0; }
.auth-form label { font-size: var(--texto-sm); font-weight: 600; color: var(--color-primario); }
.auth-form input { padding: var(--e3); border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-sm); font: inherit; }
/* Mismo criterio que .campo > input:focus — halo en -boton por consistencia. */
.auth-form input:focus { outline: none; border-color: var(--color-acento-boton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-acento-boton) 22%, transparent); }
.auth-form .boton-primario, .auth-form .boton-secundario { margin-top: var(--e2); padding: var(--e3); width: 100%; }
.auth-nota { font-size: var(--texto-sm); color: var(--color-texto-suave); text-align: center; margin-top: var(--e4); }
.auth-enlaces { font-size: var(--texto-base); padding-left: var(--e4); }
.auth-enlaces li { margin: var(--e2) 0; }

/* ==========================================================================
   RESPONSIVE (Art. 17 — Windows / Android / iOS, sin plugins)
   ========================================================================== */
@media (max-width: 860px) {
  .portal-nav { padding: 0 var(--e4); flex-wrap: wrap; min-height: 52px; }
  .portal-main { padding: var(--e5) var(--e4) var(--e7); }
}
@media (max-width: 720px) {
  .portal-nav { gap: var(--e2); }
  .portal-nav__items { gap: 0; order: 3; flex-basis: 100%; border-top: 1px solid rgba(255,255,255,0.12); overflow-x: auto; }
  .portal-nav__items a { padding: var(--e2) var(--e3); white-space: nowrap; }
  .portal-nav__right { margin-left: auto; }
  .portal-nav__usuario { max-width: 11rem; }

  .ficha { grid-template-columns: 1fr; }
  .ficha dt { padding-bottom: 0; border-top: 1px solid var(--color-borde); }
  .ficha dd { padding-top: 2px; border-top: none; }
  .ficha dt:first-of-type { border-top: none; }

  table.portal-tabla { font-size: var(--texto-sm); }
  table.portal-tabla th, table.portal-tabla td { padding: var(--e2) var(--e3); }

  .page-head__row { flex-direction: column; }

  /* Subnav deslizable horizontal en mobile (Art. 17 responsivo).
     Caso real: 6 tabs Art. 27 del portal DT no caben a 360px. Antes hacían
     wrap (cada tab a línea propia, legible pero feo); ahora deslizan como
     una barra horizontal — patrón estándar en apps modernas. Los <a> ya
     llevan nowrap implícito por el subnav base; el container scrollea. */
  .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .subnav a { white-space: nowrap; }
}