@charset "UTF-8";
/* ==========================================================================
   HEBB · MOCKUP 02 — «CONSOLA»
   Sistema de diseño: tokens, chasis y componentes.

   Idea rectora: una herramienta de trabajo para quien pasa horas dentro.
   Densidad alta pero respirada, rejilla estricta, líneas de 1 px como
   estructura principal y elevación por VALOR de superficie, nunca por sombra
   difusa. El modo oscuro se diseñó primero; el claro se deriva de él.

   Orden de la hoja
   ----------------
   1. Tipografías autoalojadas
   2. Tokens: color (oscuro base), color (claro derivado), forma, tipografía,
      espacio, movimiento, densidad
   3. Reset y base
   4. Barra del mockup (andamio, fuera del producto)
   5. Chasis del producto: rail, barra superior, lienzo
   6. Componentes
   7. Modo campus (densidad rebajada para el alumnado)
   8. Responsive
   9. Movimiento reducido e impresión
   ========================================================================== */

/* ==========================================================================
   1. TIPOGRAFÍAS
   Dos familias con papeles distintos y no intercambiables:
   · Inter para la interfaz (altura de x alta, compacta, legible a 12-13 px).
   · JetBrains Mono para el DATO: expedientes, códigos de convocatoria,
     fechas, horas, porcentajes, importes, IP, hashes. Alinea columnas por
     construcción, que es justo lo que una tabla de gestión necesita.
   Ambas están en fonts/ y se sirven en local: ninguna petición sale a la red.
   Siempre con respaldo del sistema por si el @font-face no llega a cargar.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 Color — MODO OSCURO (base del sistema)

   Escala neutra fría de matiz ~222°: no es gris puro, lleva tinte azul. Sobre
   una pantalla que se mira ocho horas, el gris neutro se ve sucio y el tinte
   frío se lee como «instrumento». Cinco superficies escalonadas por valor
   sustituyen a las sombras: cada nivel de elevación es un paso más claro.

   Todos los pares de esta hoja están calculados con herramientas/contraste.py
   (128 pares, 0 fallos AA). Los ratios se anotan al lado de cada token.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Superficies, de menos a más elevada */
  --c-lienzo:   #0C0E13;   /* fondo de la aplicación */
  --c-panel:    #12151C;   /* paneles, tablas, tarjetas */
  --c-elev-1:   #171B24;   /* cabecera de tabla, barras, reposo de fila */
  --c-elev-2:   #1E2430;   /* fila seleccionada, pestaña activa */
  --c-elev-3:   #262E3C;   /* paleta de comandos, menús flotantes */

  /* Líneas. Son la estructura: nunca se sustituyen por sombras. */
  --c-linea:        #232A37;  /* rejilla y separadores (decorativos) */
  --c-linea-fuerte: #2E3746;  /* contorno de panel y de sección */
  --c-borde-control:#6E7889;  /* borde de campo y botón — 3,06:1 mínimo */

  /* Texto */
  --c-txt:   #E9EDF5;  /* 15,57:1 sobre panel */
  --c-txt-2: #AAB4C6;  /*  8,74:1 sobre panel */
  --c-txt-3: #8D99AD;  /*  6,34:1 sobre panel — el mínimo del sistema */

  /* Primario: azul cobalto luminoso. Un solo primario, de alta precisión:
     marca el foco, el elemento activo y la acción principal. Nada más. */
  --c-acento:     #6AA0FF;  /* 7,03:1 sobre panel */
  --c-acento-sup: #16223A;  /* superficie teñida para chips y selección */
  --c-sobre-acento: #0A0F1A; /* texto sobre relleno primario — 7,38:1 */

  /* Semánticos: cuatro, disciplinados, cada uno con su superficie teñida. */
  --c-exito:      #3FC08D;  /* al día, completado, verificado */
  --c-exito-sup:  #0D2018;
  --c-sobre-exito:#04140D;
  --c-aviso:      #E5A93F;  /* atención, plazo próximo, pendiente */
  --c-aviso-sup:  #241A08;
  --c-sobre-aviso:#160E00;
  --c-riesgo:     #FF7A80;  /* error, riesgo de abandono, vencido */
  --c-riesgo-sup: #2A1215;
  --c-sobre-riesgo:#1A0405;
  --c-malva:      #B18CF0;  /* administración / inspección: rol, no estado */
  --c-malva-sup:  #1D1630;

  /* Las dos únicas sombras del sistema, y solo para lo que flota de verdad.
     No hay sombra en tarjetas, tablas ni paneles: ahí manda el borde. */
  --sombra-pop:   0 4px 16px rgba(0, 0, 0, .5), 0 0 0 1px var(--c-linea-fuerte);
  --sombra-modal: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px var(--c-linea-fuerte);

  /* Trama de puntos del fondo del lienzo, muy tenue. Da textura de
     herramienta sin ruido. Se apaga en campus. */
  --trama: radial-gradient(var(--c-linea) 1px, transparent 0);
}

/* --------------------------------------------------------------------------
   2.2 Color — MODO CLARO (derivado)

   No es «el oscuro invertido»: los neutros se recalculan para que el papel
   siga siendo frío y los colores semánticos se oscurecen hasta cumplir 4,5:1
   sobre blanco, que es donde casi todos los sistemas fallan.

   Se aplica en dos sitios para que el conmutador gane en ambos sentidos:
   · preferencia del sistema, si el usuario no ha elegido nada;
   · [data-theme="light"], si ha elegido explícitamente.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;
    --c-lienzo:   #EDF1F7;
    --c-panel:    #FFFFFF;
    --c-elev-1:   #F6F8FC;
    --c-elev-2:   #E7EDF8;
    --c-elev-3:   #FFFFFF;
    --c-linea:        #E1E6EF;
    --c-linea-fuerte: #CFD7E3;
    --c-borde-control:#7A8496;   /* 3,21:1 mínimo */
    --c-txt:   #111620;          /* 18,11:1 sobre panel */
    --c-txt-2: #4B5567;          /*  7,51:1 sobre panel */
    --c-txt-3: #5D6779;          /*  5,72:1 sobre panel */
    --c-acento:     #1B57C4;     /*  6,55:1 sobre panel */
    --c-acento-sup: #E5EDFB;
    --c-sobre-acento: #FFFFFF;
    --c-exito:      #0B6E4F;
    --c-exito-sup:  #DFF2E8;
    --c-sobre-exito:#FFFFFF;
    --c-aviso:      #835603;
    --c-aviso-sup:  #F9EED6;
    --c-sobre-aviso:#FFFFFF;
    --c-riesgo:     #BE1F33;
    --c-riesgo-sup: #FBE4E7;
    --c-sobre-riesgo:#FFFFFF;
    --c-malva:      #663CB0;
    --c-malva-sup:  #EDE6F9;
    --sombra-pop:   0 4px 16px rgba(17, 22, 32, .12), 0 0 0 1px var(--c-linea-fuerte);
    --sombra-modal: 0 16px 48px rgba(17, 22, 32, .18), 0 0 0 1px var(--c-linea-fuerte);
    --trama: radial-gradient(var(--c-linea) 1px, transparent 0);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --c-lienzo:   #EDF1F7;
  --c-panel:    #FFFFFF;
  --c-elev-1:   #F6F8FC;
  --c-elev-2:   #E7EDF8;
  --c-elev-3:   #FFFFFF;
  --c-linea:        #E1E6EF;
  --c-linea-fuerte: #CFD7E3;
  --c-borde-control:#7A8496;
  --c-txt:   #111620;
  --c-txt-2: #4B5567;
  --c-txt-3: #5D6779;
  --c-acento:     #1B57C4;
  --c-acento-sup: #E5EDFB;
  --c-sobre-acento: #FFFFFF;
  --c-exito:      #0B6E4F;
  --c-exito-sup:  #DFF2E8;
  --c-sobre-exito:#FFFFFF;
  --c-aviso:      #835603;
  --c-aviso-sup:  #F9EED6;
  --c-sobre-aviso:#FFFFFF;
  --c-riesgo:     #BE1F33;
  --c-riesgo-sup: #FBE4E7;
  --c-sobre-riesgo:#FFFFFF;
  --c-malva:      #663CB0;
  --c-malva-sup:  #EDE6F9;
  --sombra-pop:   0 4px 16px rgba(17, 22, 32, .12), 0 0 0 1px var(--c-linea-fuerte);
  --sombra-modal: 0 16px 48px rgba(17, 22, 32, .18), 0 0 0 1px var(--c-linea-fuerte);
  --trama: radial-gradient(var(--c-linea) 1px, transparent 0);
}

/* Reafirmación del oscuro cuando se elige a mano estando el sistema en claro. */
:root[data-theme='dark'] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   2.3 Tipografía, forma, espacio y movimiento
   -------------------------------------------------------------------------- */
:root {
  --f-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* La monoespaciada del dato. El respaldo cubre macOS, Windows y Linux. */
  --f-dato: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
            Consolas, 'DejaVu Sans Mono', monospace;

  /* Escala pequeña y precisa. La interfaz de gestión vive entre 12 y 14. */
  --t-10: .625rem;   /* 10px — etiqueta de columna en versalitas */
  --t-11: .6875rem;  /* 11px — metadato, tecla */
  --t-12: .75rem;    /* 12px — tabla compacta */
  --t-13: .8125rem;  /* 13px — BASE de la interfaz de gestión */
  --t-14: .875rem;   /* 14px — cuerpo de formulario */
  --t-15: .9375rem;  /* 15px */
  --t-16: 1rem;      /* 16px — BASE del campus del alumnado */
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-30: 1.875rem;
  --t-40: 2.5rem;

  --p-400: 400;
  --p-500: 500;
  --p-600: 600;
  --p-700: 700;

  /* Interletrado: se aprieta en titulares y se abre en versalitas. */
  --ls-titular: -.018em;
  --ls-titular-xl: -.028em;
  --ls-versalita: .07em;
  --ls-dato: -.01em;

  --lh-apretado: 1.2;
  --lh-ui: 1.4;
  --lh-texto: 1.65;

  /* Espacio en rejilla de 4, con dos medios pasos para el ajuste óptico. */
  --e-1: 2px;  --e-2: 4px;  --e-3: 6px;  --e-4: 8px;  --e-5: 10px;
  --e-6: 12px; --e-8: 16px; --e-10: 20px; --e-12: 24px; --e-14: 28px;
  --e-16: 32px; --e-20: 40px; --e-24: 48px; --e-32: 64px;

  /* Radios pequeños: 4 y 6. El 2 es para micropiezas (chips de dato) y el
     redondo solo para avatares y puntos de estado. */
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;      /* solo campus: la cara de alumno admite algo más de curva */
  --r-full: 999px;

  /* Foco: doble anillo. El interior toma el color de la superficie de debajo
     para que el exterior se lea siempre, esté sobre lo que esté. */
  --anillo: 0 0 0 2px var(--c-lienzo), 0 0 0 4px var(--c-acento);

  /* Movimiento: corto y sin rebote. Esto es una herramienta. */
  --mov-rapido: 90ms;
  --mov: 150ms;
  --curva: cubic-bezier(.2, 0, .2, 1);

  /* Impresión: el papel es blanco y la tinta negra, pase lo que pase con el
     tema de pantalla. Van como tokens para que en la hoja no quede ni un
     literal de color suelto. */
  --print-fondo: #ffffff;
  --print-txt: #000000;
  --print-linea: #999999;

  /* Chasis */
  --rail-w: 232px;
  --rail-w-min: 52px;
  --top-h: 46px;
  --mkbar-h: 38px;

  /* Densidad conmutable — la controla [data-densidad] en <html>. */
  --fila-h: 34px;
  --fila-px: var(--e-6);
  --t-tabla: var(--t-13);
}

:root[data-densidad='compacta'] { --fila-h: 28px; --fila-px: var(--e-5); --t-tabla: var(--t-12); }
:root[data-densidad='comoda']   { --fila-h: 44px; --fila-px: var(--e-8); --t-tabla: var(--t-14); }

/* ==========================================================================
   3. RESET Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` tiene que ganar siempre. Sin esto, cualquier regla que
   fije `display` (el velo es grid, la barra de lote es flex) lo anula y el
   elemento se ve al cargar la página aunque esté marcado como oculto. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Red de seguridad contra la barra horizontal. Se usa `clip` y no `hidden`
     a propósito: `clip` no crea contexto de desplazamiento, así que las barras
     `position: sticky` (la superior, la cabecera de tabla, el pie del visor)
     siguen funcionando. El desbordamiento real está corregido pieza a pieza
     con `min-width: 0`; esto solo evita que un contenido nuevo lo reintroduzca. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-lienzo);
  color: var(--c-txt);
  font-family: var(--f-ui);
  font-size: var(--t-13);
  line-height: var(--lh-ui);
  font-weight: var(--p-400);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Cifras tabulares en toda la interfaz: las columnas de números no bailan
     al cambiar de fila aunque estén en Inter y no en la monoespaciada. */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--p-600); line-height: var(--lh-apretado); letter-spacing: var(--ls-titular); }
p, ul, ol, dl, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
a { color: var(--c-acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

/* Foco visible SIEMPRE. La auditoría (H-05, H-07) señala que hoy se pierde:
   aquí es un anillo de dos capas que funciona sobre cualquier superficie. */
:focus-visible {
  outline: none;
  box-shadow: var(--anillo);
  border-radius: var(--r-4);
  position: relative;
  z-index: 3;
}

/* Enlace de salto al contenido (H-05). Existe en las 13 páginas. */
.salto {
  position: absolute;
  left: var(--e-4);
  top: calc(var(--mkbar-h) + var(--e-4));
  z-index: 90;
  transform: translateY(-200%);
  background: var(--c-acento);
  color: var(--c-sobre-acento);
  padding: var(--e-4) var(--e-8);
  border-radius: var(--r-4);
  font-size: var(--t-13);
  font-weight: var(--p-600);
  text-decoration: none;
  transition: transform var(--mov) var(--curva);
}
.salto:focus { transform: translateY(0); }

/* Texto solo para lectores de pantalla: lo usamos para meter el contexto que
   falta en los nombres accesibles (contadores, unidades, aclaraciones). */
.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   4. BARRA DEL MOCKUP
   Andamio de la maqueta, NO producto. Se distingue a propósito: fondo
   invertido, tipografía monoespaciada y una franja de acento a la izquierda.
   Se puede ocultar con el botón o con la tecla B.
   ========================================================================== */

.mk-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--mkbar-h);
  display: flex;
  align-items: center;
  gap: var(--e-6);
  padding: 0 var(--e-6) 0 0;
  background: var(--c-elev-3);
  border-bottom: 1px solid var(--c-linea-fuerte);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  color: var(--c-txt-2);
}

.mk-bar__marca {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  align-self: stretch;
  padding: 0 var(--e-8);
  border-right: 1px solid var(--c-linea-fuerte);
  border-left: 3px solid var(--c-acento);
  color: var(--c-txt);
  font-weight: var(--p-700);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  white-space: nowrap;
}

.mk-bar__grupo { display: flex; align-items: center; gap: var(--e-4); }
.mk-bar__grupo--fin { margin-left: auto; }
.mk-bar label { color: var(--c-txt-3); white-space: nowrap; }

.mk-bar select,
.mk-bar button {
  background: var(--c-panel);
  color: var(--c-txt);
  border: 1px solid var(--c-borde-control);
  border-radius: var(--r-4);
  padding: 3px var(--e-4);
  font-family: var(--f-dato);
  font-size: var(--t-11);
  cursor: pointer;
}
.mk-bar select { max-width: 15rem; }
.mk-bar button:hover { background: var(--c-elev-2); }
.mk-bar button[aria-pressed='true'] {
  background: var(--c-acento-sup);
  border-color: var(--c-acento);
  color: var(--c-acento);
}

/* Pestaña para recuperar la barra cuando está oculta. */
.mk-mostrar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: none;
  background: var(--c-elev-3);
  color: var(--c-txt-2);
  border: 1px solid var(--c-linea-fuerte);
  border-top: 0;
  border-radius: 0 0 var(--r-4) var(--r-4);
  padding: 2px var(--e-6);
  font-family: var(--f-dato);
  font-size: var(--t-10);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  cursor: pointer;
}
body[data-mkbar='oculta'] .mk-bar { display: none; }
body[data-mkbar='oculta'] .mk-mostrar { display: block; }
body[data-mkbar='oculta'] { --mkbar-h: 0px; }

/* ==========================================================================
   5. CHASIS DEL PRODUCTO
   Tres piezas: rail izquierdo, barra superior de contexto y lienzo.
   La rejilla es estricta: 1 px de línea separa cada zona, sin sombras.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--mkbar-h));
  margin-top: var(--mkbar-h);
}
.app[data-rail='min'] { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }

/* ---------------------------------------------------------------- 5.1 Rail */

.rail {
  position: sticky;
  top: var(--mkbar-h);
  align-self: start;
  height: calc(100vh - var(--mkbar-h));
  display: flex;
  flex-direction: column;
  background: var(--c-panel);
  border-right: 1px solid var(--c-linea-fuerte);
  overflow: hidden;
}

.rail__marca {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  height: var(--top-h);
  padding: 0 var(--e-6);
  border-bottom: 1px solid var(--c-linea);
  flex: 0 0 auto;
}
.rail__logo { flex: 0 0 auto; }
.rail__nombre { font-size: var(--t-13); font-weight: var(--p-600); letter-spacing: var(--ls-titular); white-space: nowrap; }
.rail__tenant { display: block; font-family: var(--f-dato); font-size: var(--t-10); color: var(--c-txt-3); letter-spacing: var(--ls-versalita); text-transform: uppercase; }

.rail__cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--e-4) 0 var(--e-8); }

.rail__seccion { padding: var(--e-6) var(--e-6) var(--e-2); }
.rail__seccion h2,
.rail__rotulo {
  font-size: var(--t-10);
  font-weight: var(--p-600);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  color: var(--c-txt-3);
}

.rail__lista { padding: 0 var(--e-4); display: grid; gap: 1px; }

.rail__enlace {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-4);
  color: var(--c-txt-2);
  text-decoration: none;
  font-size: var(--t-13);
  line-height: 1.3;
  white-space: nowrap;
}
.rail__enlace:hover { background: var(--c-elev-1); color: var(--c-txt); }
.rail__enlace svg { flex: 0 0 auto; color: var(--c-txt-3); }
.rail__enlace:hover svg { color: var(--c-txt-2); }

/* Activo: además del color, una barra de 2 px a la izquierda. El estado no
   lo lleva solo el color (requisito del brief y hallazgo H-17). */
.rail__enlace[aria-current='page'] {
  background: var(--c-elev-2);
  color: var(--c-txt);
  font-weight: var(--p-500);
  box-shadow: inset 2px 0 0 var(--c-acento);
}
.rail__enlace[aria-current='page'] svg { color: var(--c-acento); }

.rail__atajo {
  margin-left: auto;
  font-family: var(--f-dato);
  font-size: var(--t-10);
  color: var(--c-txt-3);
}

/* Contador de no leídos. El número va DENTRO del enlace y su significado se
   explica en un .solo-lector adyacente (hallazgo H-16). */
.rail__contador {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--c-riesgo-sup);
  color: var(--c-riesgo);
  border: 1px solid var(--c-riesgo);
  font-family: var(--f-dato);
  font-size: var(--t-10);
  font-weight: var(--p-500);
  text-align: center;
}

.rail__pie {
  flex: 0 0 auto;
  border-top: 1px solid var(--c-linea);
  padding: var(--e-4);
}

.rail__usuario {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  width: 100%;
  padding: var(--e-4);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-4);
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.rail__usuario:hover { background: var(--c-elev-1); border-color: var(--c-linea); }
.rail__usuario-datos { min-width: 0; }
.rail__usuario-nombre { display: block; font-size: var(--t-12); font-weight: var(--p-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__usuario-rol { display: block; font-family: var(--f-dato); font-size: var(--t-10); color: var(--c-txt-3); text-transform: uppercase; letter-spacing: var(--ls-versalita); }

/* Rail minimizado: se conservan iconos y se ocultan textos. */
.app[data-rail='min'] .rail__nombre,
.app[data-rail='min'] .rail__tenant,
.app[data-rail='min'] .rail__enlace span,
.app[data-rail='min'] .rail__atajo,
.app[data-rail='min'] .rail__seccion h2,
.app[data-rail='min'] .rail__usuario-datos { display: none; }
.app[data-rail='min'] .rail__enlace { justify-content: center; padding: var(--e-4) 0; }

/* ------------------------------------------------------- 5.2 Barra superior */

.top {
  position: sticky;
  top: var(--mkbar-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--e-6);
  height: var(--top-h);
  padding: 0 var(--e-8);
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-linea-fuerte);
}

.top__migas { display: flex; align-items: center; gap: var(--e-3); min-width: 0; font-size: var(--t-12); }
.top__migas ol { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.top__migas li { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.top__migas a { color: var(--c-txt-2); text-decoration: none; white-space: nowrap; }
.top__migas a:hover { color: var(--c-txt); text-decoration: underline; }
.top__migas [aria-current='page'] { color: var(--c-txt); font-weight: var(--p-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top__sep { color: var(--c-txt-3); }

.top__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); }

/* Disparador de la paleta de comandos. Es un botón real (no un div): el menú
   de usuario de hoy es inalcanzable por teclado, hallazgo H-01. */
.top__cmd {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-width: 15rem;
  padding: var(--e-3) var(--e-4);
  background: var(--c-elev-1);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-4);
  color: var(--c-txt-3);
  font-size: var(--t-12);
  cursor: pointer;
  text-align: left;
}
.top__cmd:hover { border-color: var(--c-borde-control); color: var(--c-txt-2); }
.top__cmd .kbd { margin-left: auto; }

/* -------------------------------------------------------------- 5.3 Lienzo */

.lienzo {
  min-width: 0;
  padding: var(--e-8);
  background:
    var(--trama) 0 0 / 24px 24px,
    var(--c-lienzo);
}
.lienzo--pleno { padding: 0; }

.pagina__cab {
  display: flex;
  align-items: flex-start;
  gap: var(--e-8);
  flex-wrap: wrap;
  margin-bottom: var(--e-8);
}
.pagina__titulo { font-size: var(--t-20); letter-spacing: var(--ls-titular-xl); }
.pagina__sub { margin-top: var(--e-2); font-size: var(--t-12); color: var(--c-txt-2); overflow-wrap: anywhere; }
.pagina__titulo { overflow-wrap: anywhere; }
.pagina__cab-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }

/* Rejillas de trabajo. Alineadas al principio: un panel corto no debe
   estirarse hasta la altura del más largo de su fila. */
.rejilla { display: grid; gap: var(--e-8); align-items: start; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.rejilla--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.rejilla--densa { gap: var(--e-6); }

/* ==========================================================================
   6. COMPONENTES
   ========================================================================== */

/* -------------------------------------------------------------- 6.1 Panel */

.panel {
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  min-width: 0;
}
.panel--plano { background: transparent; border-color: var(--c-linea); }

.panel__cab {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  flex-wrap: wrap;
  padding: var(--e-5) var(--e-6);
  border-bottom: 1px solid var(--c-linea);
  min-height: 38px;
}
.panel__titulo {
  font-size: var(--t-12);
  font-weight: var(--p-600);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  color: var(--c-txt-2);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}
.panel__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }
.panel__cuerpo { padding: var(--e-6); }
.panel__cuerpo--ceñido { padding: 0; }
.panel__pie {
  padding: var(--e-4) var(--e-6);
  border-top: 1px solid var(--c-linea);
  font-size: var(--t-12);
  color: var(--c-txt-3);
  display: flex;
  align-items: center;
  gap: var(--e-6);
}

/* ------------------------------------------------------------- 6.2 Botones */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  height: 30px;
  padding: 0 var(--e-6);
  background: var(--c-elev-1);
  color: var(--c-txt);
  border: 1px solid var(--c-borde-control);
  border-radius: var(--r-4);
  font-size: var(--t-12);
  font-weight: var(--p-500);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--mov-rapido) var(--curva),
              border-color var(--mov-rapido) var(--curva);
}
.btn:hover { background: var(--c-elev-2); }
.btn:active { background: var(--c-elev-3); }

.btn--primario {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-sobre-acento);
  font-weight: var(--p-600);
}
.btn--primario:hover { background: var(--c-acento); border-color: var(--c-txt); }

/* Destructivo: no se pinta como primario y NUNCA recibe el foco por defecto
   en una confirmación (hallazgo H-12). */
.btn--riesgo { color: var(--c-riesgo); border-color: var(--c-riesgo); background: transparent; }
.btn--riesgo:hover { background: var(--c-riesgo-sup); }

.btn--fantasma { background: transparent; border-color: transparent; color: var(--c-txt-2); }
.btn--fantasma:hover { background: var(--c-elev-1); color: var(--c-txt); }

.btn--icono { width: 30px; padding: 0; }
.btn--alto { height: 36px; padding: 0 var(--e-8); font-size: var(--t-13); }
.btn--bajo { height: 24px; padding: 0 var(--e-5); font-size: var(--t-11); }
.btn--ancho { width: 100%; }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Grupo de botones unidos por una sola línea de 1 px. */
.btn-grupo { display: inline-flex; }
.btn-grupo .btn { border-radius: 0; margin-left: -1px; }
.btn-grupo .btn:first-child { border-radius: var(--r-4) 0 0 var(--r-4); margin-left: 0; }
.btn-grupo .btn:last-child { border-radius: 0 var(--r-4) var(--r-4) 0; }
.btn-grupo .btn[aria-pressed='true'] {
  background: var(--c-elev-3);
  color: var(--c-txt);
  border-color: var(--c-acento);
  z-index: 2;
}

/* ---------------------------------------------------------------- 6.3 Tecla
   Los atajos se muestran en la interfaz, no se esconden en una ayuda. */

.kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--c-elev-2);
  border: 1px solid var(--c-linea-fuerte);
  border-bottom-width: 2px;
  border-radius: var(--r-4);
  font-family: var(--f-dato);
  font-size: var(--t-10);
  font-weight: var(--p-500);
  color: var(--c-txt-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------- 6.4 Campos */

.campo { display: grid; gap: var(--e-3); }
.campo__et {
  font-size: var(--t-12);
  font-weight: var(--p-500);
  color: var(--c-txt-2);
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
}
.campo__obligatorio {
  font-family: var(--f-dato);
  font-size: var(--t-10);
  color: var(--c-txt-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-versalita);
}
.campo__pista { font-size: var(--t-11); color: var(--c-txt-3); }

.entrada,
.selector,
.area {
  width: 100%;
  min-height: 30px;
  padding: var(--e-3) var(--e-5);
  background: var(--c-lienzo);
  color: var(--c-txt);
  border: 1px solid var(--c-borde-control);
  border-radius: var(--r-4);
  font-size: var(--t-13);
}
.area { min-height: 76px; line-height: var(--lh-texto); resize: vertical; padding: var(--e-4) var(--e-5); }
.entrada::placeholder, .area::placeholder { color: var(--c-txt-3); }
.entrada:hover, .selector:hover, .area:hover { border-color: var(--c-txt-3); }
.entrada--dato { font-family: var(--f-dato); letter-spacing: var(--ls-dato); }

.selector {
  appearance: none;
  padding-right: var(--e-16);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Error de formulario: EN LÍNEA y persistente, nunca un aviso que se va
   (hallazgos H-04 y H-39). El campo lleva aria-invalid y aria-describedby. */
.entrada[aria-invalid='true'],
.selector[aria-invalid='true'],
.area[aria-invalid='true'] {
  border-color: var(--c-riesgo);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--c-riesgo);
}
.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  font-size: var(--t-12);
  color: var(--c-riesgo);
  font-weight: var(--p-500);
}
.campo__error svg { flex: 0 0 auto; margin-top: 1px; }

/* Casilla y radio: 16 px, borde que cumple 3:1, marca dibujada en SVG. */
.marca {
  appearance: none;
  width: 16px; height: 16px;
  flex: 0 0 auto;
  margin: 0;
  background: var(--c-lienzo);
  border: 1px solid var(--c-borde-control);
  border-radius: var(--r-2);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.marca--radio { border-radius: var(--r-full); }
.marca:checked { background: var(--c-acento); border-color: var(--c-acento); }
.marca:checked::after {
  content: '';
  width: 9px; height: 9px;
  background: var(--c-sobre-acento);
  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 16%, 84% 0, 39% 68%);
}
.marca--radio:checked::after { clip-path: none; border-radius: var(--r-full); width: 6px; height: 6px; }
.marca:indeterminate { background: var(--c-acento); border-color: var(--c-acento); }
.marca:indeterminate::after { content: ''; width: 8px; height: 2px; background: var(--c-sobre-acento); clip-path: none; }

.opcion { display: flex; align-items: center; gap: var(--e-5); font-size: var(--t-13); cursor: pointer; }

/* Interruptor */
.interruptor { appearance: none; width: 30px; height: 17px; flex: 0 0 auto; margin: 0; background: var(--c-elev-2); border: 1px solid var(--c-borde-control); border-radius: var(--r-full); position: relative; cursor: pointer; transition: background var(--mov) var(--curva); }
.interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: var(--r-full); background: var(--c-txt-2); transition: transform var(--mov) var(--curva), background var(--mov) var(--curva); }
.interruptor:checked { background: var(--c-acento); border-color: var(--c-acento); }
.interruptor:checked::after { transform: translateX(13px); background: var(--c-sobre-acento); }

/* Conjunto de campos */
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-6); }
.fieldset > legend { padding: 0; font-size: var(--t-12); font-weight: var(--p-600); color: var(--c-txt); letter-spacing: var(--ls-titular); }

.form-rejilla { display: grid; gap: var(--e-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-rejilla > .campo--ancho { grid-column: 1 / -1; }

/* --------------------------------------------------------------- 6.5 Chips
   El estado nunca depende solo del color: lleva un punto de forma distinta
   y siempre texto (hallazgo H-20). */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  height: 20px;
  padding: 0 var(--e-4);
  border: 1px solid;
  border-radius: var(--r-4);
  font-size: var(--t-11);
  font-weight: var(--p-500);
  line-height: 1;
  white-space: nowrap;
}
.chip__punto { width: 6px; height: 6px; flex: 0 0 auto; background: currentColor; border-radius: var(--r-full); }
.chip--neutro { background: var(--c-elev-2); border-color: var(--c-linea-fuerte); color: var(--c-txt-2); }
.chip--acento { background: var(--c-acento-sup); border-color: var(--c-acento); color: var(--c-acento); }
.chip--exito  { background: var(--c-exito-sup);  border-color: var(--c-exito);  color: var(--c-exito); }
.chip--aviso  { background: var(--c-aviso-sup);  border-color: var(--c-aviso);  color: var(--c-aviso); }
.chip--riesgo { background: var(--c-riesgo-sup); border-color: var(--c-riesgo); color: var(--c-riesgo); }
.chip--malva  { background: var(--c-malva-sup);  border-color: var(--c-malva);  color: var(--c-malva); }
/* Formas distintas del punto por familia semántica, para no depender del tono */
.chip--exito .chip__punto  { border-radius: var(--r-full); }
.chip--aviso .chip__punto  { border-radius: 0; transform: rotate(45deg); }
.chip--riesgo .chip__punto { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 8px; height: 7px; }
.chip--neutro .chip__punto { border-radius: 0; }
.chip--dato { font-family: var(--f-dato); letter-spacing: var(--ls-dato); }

/* Distintivo de rol: mismo componente, tinte propio, siempre con texto. */
.rol { font-family: var(--f-dato); font-size: var(--t-10); text-transform: uppercase; letter-spacing: var(--ls-versalita); }

/* ------------------------------------------------------------- 6.6 El dato
   Cualquier identificador, código, fecha, hora, porcentaje o importe va en
   monoespaciada. Es la regla más visible de esta propuesta. */

.dato {
  font-family: var(--f-dato);
  font-size: .95em;
  letter-spacing: var(--ls-dato);
  font-variant-numeric: tabular-nums;
}
.dato--fuerte { font-weight: var(--p-500); color: var(--c-txt); }
.dato--suave { color: var(--c-txt-3); }
.dato--exp {
  padding: 1px var(--e-3);
  background: var(--c-elev-2);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-2);
  font-size: var(--t-11);
  color: var(--c-txt-2);
  white-space: nowrap;
}

/* Cifra destacada de panel */
.cifra { font-family: var(--f-dato); font-size: var(--t-24); font-weight: var(--p-500); letter-spacing: -.03em; line-height: 1; color: var(--c-txt); }
.cifra--xl { font-size: var(--t-30); }
.cifra__unidad { font-size: var(--t-14); color: var(--c-txt-3); font-weight: var(--p-400); margin-left: 1px; }

.metrica { display: grid; gap: var(--e-4); padding: var(--e-6); }
.metrica__et { font-size: var(--t-11); color: var(--c-txt-2); letter-spacing: var(--ls-versalita); text-transform: uppercase; }
.metrica__pie { font-size: var(--t-11); color: var(--c-txt-3); display: flex; align-items: center; gap: var(--e-3); }
.metrica__delta { font-family: var(--f-dato); font-weight: var(--p-500); }
.metrica__delta--sube { color: var(--c-exito); }
.metrica__delta--baja { color: var(--c-riesgo); }

/* Fila de métricas separadas solo por 1 px */
.metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--c-linea);
  gap: 1px;
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  overflow: hidden;
}
.metricas > * { background: var(--c-panel); }

/* -------------------------------------------------------------- 6.7 Tablas
   Cabecera fija, rejilla de 1 px, filas de altura conmutable, columnas de
   dato en monoespaciada y alineadas a la derecha. */

/* Igual que en la tira de pestañas: `position: relative` para que nada
   posicionado dentro se escape del desplazamiento de la tabla. */
.tabla-envoltura { overflow-x: auto; position: relative; }

.tabla { font-size: var(--t-tabla); }
.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--c-elev-1);
  padding: var(--e-3) var(--fila-px);
  border-bottom: 1px solid var(--c-linea-fuerte);
  font-size: var(--t-10);
  font-weight: var(--p-600);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  color: var(--c-txt-2);
  text-align: left;
  white-space: nowrap;
}
.tabla tbody td {
  padding: 0 var(--fila-px);
  height: var(--fila-h);
  border-bottom: 1px solid var(--c-linea);
  color: var(--c-txt-2);
  vertical-align: middle;
}
.tabla tbody tr:hover td { background: var(--c-elev-1); }
.tabla tbody tr[aria-selected='true'] td { background: var(--c-acento-sup); }
.tabla tbody tr[data-riesgo='alto'] td:first-child { box-shadow: inset 2px 0 0 var(--c-riesgo); }
.tabla tbody tr[data-riesgo='medio'] td:first-child { box-shadow: inset 2px 0 0 var(--c-aviso); }

.tabla .col-marca { width: 34px; padding-right: 0; }
.tabla .col-num { text-align: right; font-family: var(--f-dato); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-dato); }
.tabla .col-acc { width: 1%; white-space: nowrap; text-align: right; }
.tabla__principal { color: var(--c-txt); font-weight: var(--p-500); }
.tabla__secundaria { display: block; font-size: var(--t-11); color: var(--c-txt-3); }

/* Botón de orden en la cabecera: es un <button>, con aria-sort en el <th>. */
.tabla__orden {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.tabla__orden:hover { color: var(--c-txt); }
.tabla__orden svg { opacity: .35; }
[aria-sort='ascending'] .tabla__orden svg,
[aria-sort='descending'] .tabla__orden svg { opacity: 1; color: var(--c-acento); }
[aria-sort='descending'] .tabla__orden svg { transform: rotate(180deg); }

/* Fila de agrupación */
.tabla__grupo td {
  background: var(--c-elev-1);
  height: 26px;
  font-family: var(--f-dato);
  font-size: var(--t-11);
  letter-spacing: var(--ls-versalita);
  text-transform: uppercase;
  color: var(--c-txt-3);
  border-bottom: 1px solid var(--c-linea-fuerte);
}

/* ------------------------------------------------ 6.8 Filtros persistentes */

.barra-h {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-6);
  border-bottom: 1px solid var(--c-linea);
  min-height: 42px;
}
.barra-h--pie { border-bottom: 0; border-top: 1px solid var(--c-linea); }
.barra-h__fin { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); }

.buscador { position: relative; display: flex; align-items: center; }
.buscador svg { position: absolute; left: var(--e-5); color: var(--c-txt-3); pointer-events: none; }
.buscador .entrada { padding-left: 30px; height: 28px; min-height: 28px; width: 15rem; }

/* Filtro aplicado: se queda puesto y se quita con su propia × */
.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  height: 24px;
  padding: 0 var(--e-2) 0 var(--e-5);
  background: var(--c-elev-2);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-4);
  font-size: var(--t-11);
  color: var(--c-txt-2);
  white-space: nowrap;
}
.filtro b { color: var(--c-txt); font-weight: var(--p-500); font-family: var(--f-dato); }
.filtro__quitar {
  display: grid;
  place-content: center;
  width: 16px; height: 16px;
  background: none;
  border: 0;
  border-radius: var(--r-2);
  color: var(--c-txt-3);
  cursor: pointer;
}
.filtro__quitar:hover { background: var(--c-elev-3); color: var(--c-txt); }
.filtro--nuevo { border-style: dashed; background: transparent; cursor: pointer; padding-right: var(--e-5); }
.filtro--nuevo:hover { border-color: var(--c-borde-control); color: var(--c-txt); }

/* Vista guardada */
.vista {
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  height: 26px;
  padding: 0 var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--r-4);
  background: none;
  color: var(--c-txt-2);
  font-size: var(--t-12);
  cursor: pointer;
}
.vista:hover { background: var(--c-elev-1); color: var(--c-txt); }
.vista[aria-pressed='true'] { background: var(--c-elev-2); border-color: var(--c-linea-fuerte); color: var(--c-txt); font-weight: var(--p-500); }
.vista .dato { color: var(--c-txt-3); }

/* --------------------------------------------- 6.9 Acciones en lote */

.lote {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding: var(--e-4) var(--e-6);
  background: var(--c-acento-sup);
  border-bottom: 1px solid var(--c-acento);
  box-shadow: inset 2px 0 0 var(--c-acento);
}
.lote__cuenta { font-family: var(--f-dato); font-size: var(--t-12); font-weight: var(--p-500); color: var(--c-txt); }
.lote__sep { width: 1px; height: 18px; background: var(--c-linea-fuerte); }

/* --------------------------------------------------- 6.10 Pestañas (ARIA) */

.tablist {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  border-bottom: 1px solid var(--c-linea-fuerte);
  padding: 0 var(--e-6);
  overflow-x: auto;
  min-width: 0;
  /* Ancla los `.solo-lector` que van dentro: al ser `position: absolute` sin
     contenedor posicionado se referirían al bloque inicial, escaparían del
     desplazamiento de la tira y arrastrarían barra horizontal a la página. */
  position: relative;
}
/* Las pestañas no se comprimen: si no caben, la tira se desplaza. */
.tablist > .tab { flex: 0 0 auto; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--e-4);
  height: 34px;
  padding: 0 var(--e-5);
  background: none;
  border: 0;
  color: var(--c-txt-2);
  font-size: var(--t-12);
  font-weight: var(--p-500);
  white-space: nowrap;
  cursor: pointer;
}
.tab:hover { color: var(--c-txt); }
.tab[aria-selected='true'] { color: var(--c-txt); }
.tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: var(--e-4); right: var(--e-4); bottom: -1px;
  height: 2px;
  background: var(--c-acento);
}
.tab__cuenta { font-family: var(--f-dato); font-size: var(--t-10); color: var(--c-txt-3); }
.tabpanel { padding: var(--e-6); }
.tabpanel[hidden] { display: none; }

/* -------------------------------------------- 6.11 Vista dividida (lista/detalle) */

.split { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); min-height: 0; }
.split--ancha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.split__lista { border-right: 1px solid var(--c-linea-fuerte); min-width: 0; }
.split__detalle { min-width: 0; }

.lista-sel { display: grid; }
.lista-sel__item {
  display: grid;
  gap: var(--e-2);
  width: 100%;
  padding: var(--e-5) var(--e-6);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-linea);
  border-left: 2px solid transparent;
  text-align: left;
  color: var(--c-txt-2);
  cursor: pointer;
  font: inherit;
}
.lista-sel__item:hover { background: var(--c-elev-1); }
.lista-sel__item[aria-current='true'] { background: var(--c-elev-2); border-left-color: var(--c-acento); color: var(--c-txt); }
.lista-sel__fila { display: flex; align-items: center; gap: var(--e-4); }
.lista-sel__nombre { font-size: var(--t-13); font-weight: var(--p-500); color: var(--c-txt); }
.lista-sel__meta { font-size: var(--t-11); color: var(--c-txt-3); display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.lista-sel__item--nolectura .lista-sel__nombre::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: var(--e-4);
  border-radius: var(--r-full);
  background: var(--c-acento);
  vertical-align: middle;
}

/* --------------------------------------------------- 6.12 Barras y medidores */

.medidor { display: block; height: 4px; background: var(--c-elev-2); border-radius: var(--r-full); overflow: hidden; }
.medidor__valor { display: block; height: 100%; background: var(--c-acento); border-radius: var(--r-full); }
.medidor__valor--exito { background: var(--c-exito); }
.medidor__valor--aviso { background: var(--c-aviso); }
.medidor__valor--riesgo { background: var(--c-riesgo); }
.medidor--alto { height: 6px; }

/* Progreso con cifra a la derecha, alineado ópticamente en columna */
.progreso { display: flex; align-items: center; gap: var(--e-5); }
.progreso .medidor { flex: 1 1 auto; min-width: 48px; }
.progreso__cifra { font-family: var(--f-dato); font-size: var(--t-12); font-variant-numeric: tabular-nums; width: 3.2em; text-align: right; color: var(--c-txt); }

/* Barra apilada por estados */
.apilada { display: flex; height: 8px; border-radius: var(--r-2); overflow: hidden; background: var(--c-elev-2); }
.apilada > span { display: block; height: 100%; }

/* --------------------------------------------------------- 6.13 Avisos */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e-5);
  padding: var(--e-5) var(--e-6);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-4);
  font-size: var(--t-12);
  line-height: var(--lh-ui);
}
.aviso svg { flex: 0 0 auto; margin-top: 1px; }
.aviso__cuerpo { min-width: 0; display: grid; gap: var(--e-3); }
.aviso__titulo { font-weight: var(--p-600); color: var(--c-txt); font-size: var(--t-12); }
.aviso p { color: var(--c-txt-2); }
.aviso--info   { background: var(--c-acento-sup); border-color: var(--c-acento); color: var(--c-acento); }
.aviso--exito  { background: var(--c-exito-sup);  border-color: var(--c-exito);  color: var(--c-exito); }
.aviso--aviso  { background: var(--c-aviso-sup);  border-color: var(--c-aviso);  color: var(--c-aviso); }
.aviso--riesgo { background: var(--c-riesgo-sup); border-color: var(--c-riesgo); color: var(--c-riesgo); }
.aviso__acciones { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-top: var(--e-2); }

/* ------------------------------------------------- 6.14 Estados de la pantalla */

/* Vacío: dice qué pasa y qué hacer, con una acción concreta. */
.vacio {
  display: grid;
  justify-items: center;
  gap: var(--e-5);
  padding: var(--e-24) var(--e-8);
  text-align: center;
}
.vacio__icono { color: var(--c-txt-3); opacity: .7; }
.vacio__titulo { font-size: var(--t-14); font-weight: var(--p-600); color: var(--c-txt); }
.vacio p { max-width: 42ch; font-size: var(--t-12); color: var(--c-txt-2); line-height: var(--lh-texto); }

/* Esqueleto de carga: barras del tamaño del contenido real, no un spinner. */
.esq { background: var(--c-elev-2); border-radius: var(--r-2); height: 10px; display: block; }
.esq--txt { height: 9px; }
.esq--ancho-70 { width: 70%; }
.esq--ancho-40 { width: 40%; }
.esq--ancho-25 { width: 25%; }
.esq--linea { height: var(--fila-h); border-radius: 0; background: linear-gradient(90deg, var(--c-elev-1), var(--c-elev-2), var(--c-elev-1)); background-size: 200% 100%; animation: esq-brillo 1.4s linear infinite; }
@keyframes esq-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Permiso denegado */
.denegado {
  display: grid;
  gap: var(--e-6);
  justify-items: start;
  padding: var(--e-12);
  border: 1px dashed var(--c-borde-control);
  border-radius: var(--r-6);
  background: var(--c-panel);
}

/* -------------------------------------------------------- 6.15 Superposiciones */

.velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 8, 12, .62);
  display: grid;
  padding: var(--e-24) var(--e-8);
  justify-items: center;
  align-items: start;
}

/* Paleta de comandos: el centro de gravedad de esta propuesta. */
.cmdk {
  width: min(640px, 100%);
  background: var(--c-elev-3);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  box-shadow: var(--sombra-modal);
  overflow: hidden;
}
.cmdk__campo { display: flex; align-items: center; gap: var(--e-5); padding: var(--e-6) var(--e-8); border-bottom: 1px solid var(--c-linea-fuerte); }
.cmdk__campo svg { color: var(--c-txt-3); flex: 0 0 auto; }
.cmdk__entrada { flex: 1 1 auto; background: none; border: 0; outline: none; font-size: var(--t-15); color: var(--c-txt); }
.cmdk__entrada::placeholder { color: var(--c-txt-3); }
.cmdk__ambito { font-family: var(--f-dato); font-size: var(--t-10); text-transform: uppercase; letter-spacing: var(--ls-versalita); color: var(--c-acento); background: var(--c-acento-sup); border: 1px solid var(--c-acento); border-radius: var(--r-2); padding: 2px var(--e-4); }
.cmdk__lista { max-height: 46vh; overflow-y: auto; padding: var(--e-4) 0; }
.cmdk__grupo { padding: var(--e-5) var(--e-8) var(--e-3); font-size: var(--t-10); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-3); }
.cmdk__op { display: flex; align-items: center; gap: var(--e-5); padding: var(--e-4) var(--e-8); font-size: var(--t-13); color: var(--c-txt-2); cursor: pointer; }
.cmdk__op svg { color: var(--c-txt-3); flex: 0 0 auto; }
.cmdk__op[aria-selected='true'] { background: var(--c-acento-sup); color: var(--c-txt); box-shadow: inset 2px 0 0 var(--c-acento); }
.cmdk__op[aria-selected='true'] svg { color: var(--c-acento); }
.cmdk__op-meta { margin-left: auto; display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-11); color: var(--c-txt-3); }
.cmdk__pie { display: flex; align-items: center; gap: var(--e-6); padding: var(--e-4) var(--e-8); border-top: 1px solid var(--c-linea-fuerte); background: var(--c-elev-2); font-size: var(--t-11); color: var(--c-txt-3); flex-wrap: wrap; }
.cmdk__pie span { display: inline-flex; align-items: center; gap: var(--e-3); }

/* Modal */
.modal {
  width: min(520px, 100%);
  background: var(--c-panel);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  box-shadow: var(--sombra-modal);
}
.modal--ancho { width: min(760px, 100%); }
.modal__cab { display: flex; align-items: center; gap: var(--e-6); padding: var(--e-6) var(--e-8); border-bottom: 1px solid var(--c-linea); }
.modal__titulo { font-size: var(--t-14); }
.modal__cuerpo { padding: var(--e-8); display: grid; gap: var(--e-6); }
.modal__pie { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-6) var(--e-8); border-top: 1px solid var(--c-linea); }
.modal__pie .btn:first-child { margin-right: auto; }

/* Menú flotante */
.menu {
  min-width: 200px;
  background: var(--c-elev-3);
  border: 1px solid var(--c-linea-fuerte);
  border-radius: var(--r-6);
  box-shadow: var(--sombra-pop);
  padding: var(--e-3);
}
.menu__op { display: flex; align-items: center; gap: var(--e-5); width: 100%; padding: var(--e-3) var(--e-5); background: none; border: 0; border-radius: var(--r-4); color: var(--c-txt-2); font-size: var(--t-12); text-align: left; cursor: pointer; text-decoration: none; }
.menu__op:hover { background: var(--c-elev-2); color: var(--c-txt); }
.menu__op--riesgo { color: var(--c-riesgo); }
.menu__op .kbd { margin-left: auto; }
.menu__sep { height: 1px; background: var(--c-linea); margin: var(--e-3) 0; }
.menu__rotulo { padding: var(--e-4) var(--e-5) var(--e-2); font-size: var(--t-10); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-3); }

/* ------------------------------------------------------- 6.16 Línea de tiempo */

.cronologia { display: grid; gap: 0; }
.crono {
  display: grid;
  grid-template-columns: 6.5rem 13px minmax(0, 1fr);
  gap: var(--e-5);
  padding-bottom: var(--e-6);
  position: relative;
}
.crono__hora { font-family: var(--f-dato); font-size: var(--t-11); color: var(--c-txt-3); text-align: right; padding-top: 1px; }
.crono__eje { position: relative; }
.crono__eje::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: -12px; width: 1px; background: var(--c-linea-fuerte); }
.crono:last-child .crono__eje::before { display: none; }
.crono__punto { position: absolute; left: 2px; top: 4px; width: 9px; height: 9px; border-radius: var(--r-full); background: var(--c-elev-3); border: 1px solid var(--c-borde-control); }
.crono--hito .crono__punto { background: var(--c-acento); border-color: var(--c-acento); }
.crono--riesgo .crono__punto { background: var(--c-riesgo); border-color: var(--c-riesgo); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.crono--exito .crono__punto { background: var(--c-exito); border-color: var(--c-exito); }
.crono__cuerpo { min-width: 0; font-size: var(--t-12); color: var(--c-txt-2); display: grid; gap: var(--e-2); }
.crono__titulo { color: var(--c-txt); font-weight: var(--p-500); }

/* ---------------------------------------------------------- 6.17 Avatares */

.avatar {
  display: grid;
  place-content: center;
  width: 24px; height: 24px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--c-elev-2);
  border: 1px solid var(--c-linea-fuerte);
  font-family: var(--f-dato);
  font-size: var(--t-10);
  font-weight: var(--p-500);
  color: var(--c-txt-2);
  letter-spacing: 0;
  text-transform: uppercase;
}
.avatar--m { width: 32px; height: 32px; font-size: var(--t-12); }
.avatar--l { width: 48px; height: 48px; font-size: var(--t-15); border-radius: var(--r-6); }
.avatar--xl { width: 72px; height: 72px; font-size: var(--t-20); border-radius: var(--r-8); }

/* ------------------------------------------------ 6.18 Pares dato/etiqueta */

.pares { display: grid; gap: 0; }
.par {
  display: grid;
  grid-template-columns: minmax(9rem, 30%) minmax(0, 1fr);
  gap: var(--e-6);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--c-linea);
  font-size: var(--t-12);
}
.par:last-child { border-bottom: 0; }
.par dt { color: var(--c-txt-3); }
.par dd { margin: 0; color: var(--c-txt); min-width: 0; }

/* -------------------------------------------------------- 6.19 Paginación */

.paginacion { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-12); color: var(--c-txt-3); }
.paginacion__pos { font-family: var(--f-dato); color: var(--c-txt-2); }

/* ---------------------------------------------------------- 6.20 Iconos
   Un solo trazo de 1,6 sobre rejilla de 24, heredando currentColor. El SVG
   va siempre aria-hidden; el significado lo pone el texto o el aria-label
   del control que lo contiene. */

.i { width: 16px; height: 16px; flex: 0 0 auto; }
.i--14 { width: 14px; height: 14px; }
.i--18 { width: 18px; height: 18px; }
.i--20 { width: 20px; height: 20px; }
.i--24 { width: 24px; height: 24px; }
.i--32 { width: 32px; height: 32px; }
.i--40 { width: 40px; height: 40px; }

/* --------------------------------------------------------- 6.21 Utilidades */

.pila { display: grid; gap: var(--e-6); }
.pila--4 { gap: var(--e-4); }
.pila--8 { gap: var(--e-8); }
.pila--12 { gap: var(--e-12); }
.fila { display: flex; align-items: center; gap: var(--e-5); }
.fila--sup { align-items: flex-start; }

/* Regla de contención del ancho.

   Un elemento flex o grid tiene `min-width: auto`: no encoge por debajo del
   contenido más ancho que tenga dentro. Basta un correo, un código de
   convocatoria o un titular largo para que un contenedor se niegue a estrechar
   y arrastre barra horizontal a toda la página en móvil. Se declara `0` en
   todas las piezas de composición del sistema y en sus hijos directos: a
   partir de ahí manda el `overflow` del contenedor que toque (la tabla hace
   scroll dentro de su envoltura, el texto se parte). */
.fila, .barra-h, .panel__cab, .pagina__cab, .modal__pie, .lote, .aviso,
.top, .metrica, .crono__cuerpo, .lista-sel__item, .split__lista, .split__detalle,
.pila, .rejilla, .panel, .tabpanel, .modal__cuerpo, .panel__cuerpo {
  min-width: 0;
}
/* También los hijos: en grid y en flex, `min-width: auto` se hereda de nuevo
   en cada nivel, así que hay que declararlo en los dos lados de la relación. */
.fila > *, .barra-h > *, .panel__cab > *, .pagina__cab > *, .lote > *,
.top > *, .barra-h__fin > *, .panel__acciones > *, .aviso > *,
.pila > *, .rejilla > *, .panel__cuerpo > *, .modal__cuerpo > *, .tabpanel > * {
  min-width: 0;
}
.panel__acciones, .barra-h__fin, .pagina__cab-acciones { flex-wrap: wrap; }
.fila--fin { justify-content: flex-end; }
.fila--envuelve { flex-wrap: wrap; }
.crece { flex: 1 1 auto; min-width: 0; }
.suave { color: var(--c-txt-2); }
.tenue { color: var(--c-txt-3); }
.micro { font-size: var(--t-11); }
.versalita { font-size: var(--t-10); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-txt-3); }
.sep-v { width: 1px; align-self: stretch; background: var(--c-linea); }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   7. CAMPUS — la cara del alumnado

   Mismo sistema, otra respiración. Aquí no hay tabla que escanear ni lote que
   procesar: hay una persona que quiere seguir donde lo dejó. Sube la base
   tipográfica de 13 a 16, crece el espacio, se apaga la trama del fondo y se
   reducen los controles a la vista. La rejilla, el color y las líneas son
   exactamente los mismos: es el mismo producto, no otro.
   ========================================================================== */

.app--campus {
  --t-tabla: var(--t-14);
  --fila-h: 40px;
  --rail-w: 216px;
}
.app--campus .lienzo {
  background: var(--c-lienzo);
  padding: var(--e-12) var(--e-12) var(--e-24);
  font-size: var(--t-15);
}
.app--campus .lienzo--pleno { padding: 0; }
.app--campus .rail__enlace { padding: var(--e-4) var(--e-5); font-size: var(--t-14); }
.app--campus .pagina__titulo { font-size: var(--t-30); letter-spacing: var(--ls-titular-xl); }
.app--campus .pagina__sub { font-size: var(--t-15); color: var(--c-txt-2); }
.app--campus .panel { border-radius: var(--r-8); }
.app--campus .panel__cuerpo { padding: var(--e-10); }
.app--campus .panel__titulo { font-size: var(--t-14); text-transform: none; letter-spacing: var(--ls-titular); color: var(--c-txt); }
.app--campus .btn { height: 36px; font-size: var(--t-14); padding: 0 var(--e-8); border-radius: var(--r-6); }
.app--campus .btn--alto { height: 44px; font-size: var(--t-15); padding: 0 var(--e-12); }
.app--campus .chip { height: 24px; font-size: var(--t-12); padding: 0 var(--e-5); }
.app--campus .campo__et { font-size: var(--t-14); }
.app--campus .entrada, .app--campus .selector, .app--campus .area { min-height: 40px; font-size: var(--t-15); border-radius: var(--r-6); }
.app--campus .rejilla { gap: var(--e-12); }
.app--campus .vacio p, .app--campus .aviso, .app--campus .par { font-size: var(--t-14); }

/* La franja «continuar»: el único camino destacado de la pantalla de inicio.
   Un solo botón grande, contexto suficiente para saber a dónde lleva. */
.continuar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-12);
  align-items: center;
  padding: var(--e-12);
  background: var(--c-panel);
  border: 1px solid var(--c-acento);
  border-left-width: 3px;
  border-radius: var(--r-8);
}
.continuar__rotulo { font-size: var(--t-11); font-weight: var(--p-600); letter-spacing: var(--ls-versalita); text-transform: uppercase; color: var(--c-acento); }
.continuar__titulo { margin-top: var(--e-4); font-size: var(--t-20); letter-spacing: var(--ls-titular); }
.continuar__meta { margin-top: var(--e-5); display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; font-size: var(--t-13); color: var(--c-txt-2); }

/* ==========================================================================
   8. RESPONSIVE
   Tres saltos reales. Las tablas densas no se resuelven con scroll a secas:
   por debajo de 900 px cada fila se convierte en una ficha apilada con sus
   etiquetas delante (se toman de data-et).
   ========================================================================== */

@media (max-width: 1280px) {
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla--2-1, .rejilla--1-2 { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  .app, .app[data-rail='min'] { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }
  .rail__nombre, .rail__tenant, .rail__enlace span, .rail__atajo,
  .rail__seccion h2, .rail__usuario-datos { display: none; }
  .rail__enlace { justify-content: center; padding: var(--e-4) 0; }
  .rail__contador { position: absolute; margin: 0; transform: translate(10px, -10px); }
  .rail__enlace { position: relative; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split__lista { border-right: 0; border-bottom: 1px solid var(--c-linea-fuerte); }
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Tabla apilada. Cada celda lleva su etiqueta delante mediante data-et. */
  .tabla--apilable thead { display: none; }
  .tabla--apilable tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-2);
    padding: var(--e-6);
    border-bottom: 1px solid var(--c-linea-fuerte);
  }
  .tabla--apilable tbody tr:hover td { background: transparent; }
  .tabla--apilable tbody td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    /* Sin esto, un chip o una barra de progreso se estiran a todo el ancho de
       la columna y la ficha pierde la forma que tenía en la tabla. */
    justify-items: start;
    align-items: center;
    gap: var(--e-5);
    height: auto;
    min-height: 0;
    padding: var(--e-2) 0;
    border-bottom: 0;
    text-align: left;
    box-shadow: none !important;
  }
  /* La fila de agrupación no se apila: es un rótulo de sección a todo lo ancho. */
  .tabla--apilable tbody tr.tabla__grupo { display: block; padding: 0; }
  .tabla--apilable tbody tr.tabla__grupo td {
    display: block;
    padding: var(--e-4) var(--e-6);
    height: auto;
  }
  .tabla--apilable tbody tr.tabla__grupo td::before { content: none; }
  /* La celda de progreso necesita ancho para que la barra se vea. */
  .tabla--apilable tbody td .progreso { width: 100%; justify-content: flex-start !important; }
  .tabla--apilable tbody td .progreso .medidor { width: auto !important; flex: 1 1 auto; }
  .tabla--apilable tbody td .progreso__cifra { text-align: left; }
  .tabla--apilable tbody td::before {
    content: attr(data-et);
    font-size: var(--t-10);
    font-weight: var(--p-600);
    letter-spacing: var(--ls-versalita);
    text-transform: uppercase;
    color: var(--c-txt-3);
    padding-top: 2px;
  }
  .tabla--apilable .col-num { text-align: left; }
  .tabla--apilable .col-acc { justify-items: start; }
  .tabla--apilable tbody tr[data-riesgo='alto'] { box-shadow: inset 2px 0 0 var(--c-riesgo); }
  .tabla--apilable tbody tr[data-riesgo='medio'] { box-shadow: inset 2px 0 0 var(--c-aviso); }
  .continuar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .form-rejilla { grid-template-columns: minmax(0, 1fr); }
  .lienzo { padding: var(--e-6); }
  .app--campus .lienzo { padding: var(--e-8) var(--e-6) var(--e-16); }
  /* La barra superior pasa a dos líneas: arriba dónde estás, abajo lo que
     puedes hacer. Antes intentaba caber en una y empujaba la página entera. */
  .top {
    height: auto;
    min-height: var(--top-h);
    flex-wrap: wrap;
    padding: var(--e-3) var(--e-6);
  }
  .top__acciones { width: 100%; margin-left: 0; }
  .top__acciones > .sep-v { display: none; }
  .top__cmd { min-width: 0; flex: 1 1 auto; }
  .top__cmd span { display: none; }
  .mk-bar { flex-wrap: wrap; height: auto; padding: 0 var(--e-4) var(--e-3); }
  .mk-bar__marca { width: 100%; padding: var(--e-3) var(--e-6); border-right: 0; border-bottom: 1px solid var(--c-linea-fuerte); }
  /* Sin envolver también aquí, el selector de pantalla y los tres botones de
     tema se salen del viewport y arrastran barra horizontal a toda la página. */
  .mk-bar__grupo { flex-wrap: wrap; max-width: 100%; }
  .mk-bar__grupo--fin { margin-left: 0; }
  .mk-bar select { max-width: 100%; flex: 1 1 10rem; }
  :root { --mkbar-h: 104px; }
}

@media (max-width: 480px) {
  /* Rail como barra inferior fija: el pulgar llega, el contenido no se come. */
  .app, .app[data-rail='min'] { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed;
    top: auto; bottom: 0; left: 0; right: 0;
    z-index: 50;
    height: auto;
    flex-direction: row;
    border-right: 0;
    border-top: 1px solid var(--c-linea-fuerte);
  }
  .rail__marca, .rail__pie, .rail__seccion { display: none; }
  /* Especificidad: `.rail__enlace span` (0,0,1,1) vuelve a mostrar el atajo,
     así que hay que igualarla o superarla para ocultarlo en la barra inferior. */
  .rail__enlace .rail__atajo { display: none; }
  .rail__cuerpo { display: flex; padding: 0; width: 100%; overflow-x: auto; }
  .rail__lista { display: flex; padding: var(--e-3); gap: var(--e-3); }
  .rail__lista > li { flex: 0 0 auto; }
  .rail__enlace { flex-direction: column; gap: 2px; padding: var(--e-4) var(--e-5); }
  .rail__enlace span { display: block; font-size: var(--t-10); }
  .lienzo { padding-bottom: 84px; }
  .buscador .entrada { width: 100%; }
  .modal__pie { flex-wrap: wrap; }
  .par { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .crono { grid-template-columns: 13px minmax(0, 1fr); }
  .crono__hora { grid-column: 1 / -1; text-align: left; }
}

/* ==========================================================================
   9. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .esq--linea { background: var(--c-elev-2); }
}

@media print {
  .mk-bar, .mk-mostrar, .rail, .top, .velo { display: none !important; }
  .app { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  body { background: var(--print-fondo); color: var(--print-txt); }
  .panel { border-color: var(--print-linea); }
}