/* =============================================================================
   HEBB · Mockup 03 «ITINERARIO»
   Hoja 1 de 4 — Tokens, reajuste de base, tipografía, utilidades,
   barra del mockup y armazón de navegación.

   Idea rectora: la formación es un recorrido con salida, hitos y llegada.
   Toda la interfaz responde a tres preguntas: dónde estoy, qué me queda,
   qué hago ahora.

   Todos los valores de color se han verificado con un script propio de
   contraste WCAG 2.1 (ver README, sección «Sistema de diseño»). Ningún par
   texto/fondo de esta hoja baja de 4,5:1; ningún borde de control ni objeto
   gráfico portador de significado baja de 3:1.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TIPOGRAFÍA AUTOALOJADA
   Lexend para titulares: geométrica, con carácter y diseñada expresamente para
   reducir la fatiga lectora (relevante en un alumnado que estudia de noche).
   Inter para cuerpo e interfaz: neutra y de altura de x generosa.
   Ambas son variables: una sola petición cubre todos los pesos.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/lexend-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* -----------------------------------------------------------------------------
   2. TOKENS — MODO CLARO (valor por defecto)
   Nada de literales sueltos fuera de este bloque y su gemelo oscuro.
   -------------------------------------------------------------------------- */
:root {
  /* --- Superficies -------------------------------------------------------- */
  --lienzo: #F6F3FF;          /* fondo de la página, lavanda muy tenue */
  --panel: #FFFFFF;           /* tarjetas y superficies de contenido */
  --hundido: #EFEBFC;         /* zonas rehundidas: cabeceras de tabla, campos */
  --canal: #E4DCF7;           /* canal de las barras de avance */
  --activo: #E7E0FC;          /* fila seleccionada, elemento de menú activo */
  --velo: rgba(23, 16, 58, .48); /* fondo de modal */

  /* --- Líneas ------------------------------------------------------------- */
  --borde: #E3DDF6;           /* separadores decorativos */
  --borde-fuerte: #8B82B4;    /* bordes de campo y control — 3,53:1 sobre panel */

  /* --- Tinta -------------------------------------------------------------- */
  --tinta: #17103A;           /* texto principal — 17,92:1 sobre panel */
  --tinta-2: #4F4776;         /* texto secundario — 8,42:1 sobre panel */
  --tinta-3: #665D90;         /* texto de apoyo — 5,94:1 sobre panel */
  --tinta-inv: #FFFFFF;       /* texto sobre rellenos oscuros */

  /* --- Primario: índigo eléctrico ---------------------------------------- */
  --primario: #5B2BEA;        /* 7,05:1 sobre panel. Vale como texto Y como relleno */
  --primario-fuerte: #4718C9; /* estado activo/pulsado y cabezal de posición */
  --primario-sup: #EDE8FF;    /* superficie teñida */
  --primario-borde: #9D80F3;  /* 3,08:1 sobre panel */
  --primario-txt: #5B2BEA;    /* alias semántico para texto sobre superficie teñida */

  /* --- Secundario: mandarina --------------------------------------------- */
  --secundario: #FF6B2C;      /* relleno vivo; SOLO con tinta oscura encima (6,31:1) */
  --secundario-txt: #B03A05;  /* variante para texto — 6,08:1 sobre panel */
  --secundario-sup: #FFEDE2;
  --secundario-borde: #CC7952; /* 3,27:1 sobre panel */

  /* --- Semánticos --------------------------------------------------------- */
  --exito: #0B7A57;           /* completado — 5,34:1 */
  --exito-sup: #E0F6EE;
  --exito-borde: #4B9F84;   /* 3,19:1 sobre panel */
  --aviso: #8A5205;           /* rezagado — 6,38:1 */
  --aviso-sup: #FDF0DC;
  --aviso-borde: #B28950;   /* 3,19:1 sobre panel */
  --riesgo: #C2103A;          /* parado / error — 6,12:1 */
  --riesgo-sup: #FFE8ED;
  --riesgo-borde: #DD718B;  /* 3,08:1 sobre panel */

  /* --- Rampa de avance ----------------------------------------------------
     Escala continua única de todo el producto: la misma en el anillo del
     alumnado y en la celda de progreso del administrador. Va de mandarina
     profunda (acabas de salir) a índigo (estás llegando). Cada parada se ha
     verificado a >= 3:1 contra el canal, para que el límite entre lo recorrido
     y lo que falta sea perceptible sin depender del tono.
     La posición exacta la marca además un cabezal sólido, de modo que la
     información nunca viaja solo en el color. ------------------------------ */
  --avance-0: #D9480F;
  --avance-25: #C33C55;
  --avance-50: #A6329B;
  --avance-75: #7A2ECC;
  --avance-100: #5B2BEA;
  --avance-cabezal: #4718C9;
  --avance-rampa: linear-gradient(90deg,
      var(--avance-0) 0%, var(--avance-25) 25%, var(--avance-50) 50%,
      var(--avance-75) 75%, var(--avance-100) 100%);
  --avance-completo: #0B7A57; /* al 100 % la cinta pasa a verde: se ha llegado */

  /* --- Distintivos de rol (todos >= 4,5:1 sobre su superficie) ------------ */
  --rol-alumno: #0B7A57;      --rol-alumno-sup: #E0F6EE;
  --rol-tutor: #5B2BEA;       --rol-tutor-sup: #EDE8FF;
  --rol-gestor: #8A5205;      --rol-gestor-sup: #FDF0DC;
  --rol-admin: #9A1B8C;       --rol-admin-sup: #FCE7F8;
  --rol-inspector: #1B4F9C;   --rol-inspector-sup: #E3EDFC;

  /* --- Tipografía --------------------------------------------------------- */
  --fuente-titular: 'Lexend', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, monospace;

  /* Escala fluida: evita el hallazgo H-33 (escala fija sin clamp).
     El cuerpo nunca baja de 16 px en móvil para no disparar el zoom de iOS. */
  --txt-3xl: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  --txt-2xl: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --txt-xl: clamp(1.25rem, 1.12rem + .55vw, 1.5rem);
  --txt-lg: 1.125rem;
  --txt-base: 1rem;
  --txt-sm: .875rem;
  --txt-xs: .8125rem;   /* 13 px: suelo absoluto de texto legible */
  --txt-eti: .75rem;    /* solo etiquetas en versalitas con tracking amplio */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-fuerte: 600;
  --peso-negro: 700;

  --interlinea-apretada: 1.15;
  --interlinea-normal: 1.5;
  --interlinea-suelta: 1.7;

  /* --- Espacio (paso de 4 px) --------------------------------------------- */
  --e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem;  --e-8: 2rem;    --e-10: 2.5rem;
  --e-12: 3rem;   --e-16: 4rem;   --e-20: 5rem;

  /* --- Radios amplios ----------------------------------------------------- */
  --r-xs: 6px;   --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;
  --r-xl: 28px;  --r-2xl: 36px; --r-full: 999px;

  /* --- Elevación: sombras teñidas de violeta, nunca grises ---------------- */
  --sombra-1: 0 1px 2px rgba(23, 16, 58, .05), 0 1px 3px rgba(23, 16, 58, .06);
  --sombra-2: 0 2px 4px rgba(23, 16, 58, .04), 0 8px 20px -6px rgba(23, 16, 58, .12);
  --sombra-3: 0 4px 8px rgba(23, 16, 58, .05), 0 18px 40px -10px rgba(23, 16, 58, .20);
  --sombra-foco: 0 0 0 3px rgba(91, 43, 234, .32);

  /* --- Movimiento --------------------------------------------------------- */
  --mov-rapido: 140ms;
  --mov-base: 240ms;
  --mov-lento: 420ms;
  --curva: cubic-bezier(.2, .8, .2, 1);

  /* --- Colores absolutos ---------------------------------------------------
     No cambian con el tema porque acompañan a rellenos que tampoco cambian
     (el texto sobre un botón mandarina sigue siendo tinta en los dos modos).
     Están aquí, y no sueltos por las hojas, para que sigan siendo tokens. -- */
  --blanco: #FFFFFF;
  --tinta-fija: #17103A;
  --perilla: #FFFFFF;          /* perilla del interruptor sobre pista primaria */

  /* --- Superficies de marca -------------------------------------------------
     Los dos lienzos oscuros del producto —el panel del acceso y la portada—
     son constantes en ambos temas: son «la marca», no «la interfaz». --------- */
  --marca-a: #4718C9;
  --marca-b: #17103A;
  --marca-brillo: rgba(255, 107, 44, .58);
  --sobre-marca: #FFFFFF;
  --sobre-marca-2: #DCD3FF;
  --sobre-marca-3: #EDE8FF;
  --marca-icono: #FFB088;
  --marca-arco: rgba(255, 255, 255, .08);

  /* --- Muestras del selector de tema ----------------------------------------
     Tienen que enseñar el color literal de cada tema, así que no se invierten. */
  --muestra-claro-1: #F6F3FF;   --muestra-claro-2: #FFFFFF;
  --muestra-oscuro-1: #0E0A1C;  --muestra-oscuro-2: #171130;

  /* --- Barra del mockup (ajena al producto, constante en ambos temas) ------ */
  --mk-fondo: #100B22;
  --mk-txt: #E6E0FF;
  --mk-borde: #3E2C7A;
  --mk-campo: #1D1440;
  --mk-campo-borde: #4A3A8C;
  --mk-hover: #2A1D5C;
  --mk-enlace: #C9BCFF;
  --mk-marca: #FFA873;

  /* --- Medidas de armazón ------------------------------------------------- */
  --barra-mockup-alto: 44px;
  --lateral-ancho: 264px;
  --cabecera-alto: 64px;
  --inferior-alto: 64px;   /* navegación inferior del alumnado en móvil */
  --ancho-max: 1320px;
  --ancho-lectura: 68ch;   /* medida de línea cómoda en el visor de lección */
  --toque-min: 44px;       /* área táctil mínima */

  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   3. TOKENS — MODO OSCURO
   No es un gris apagado: mantiene el croma alto de la marca sobre un violeta
   casi negro. La rampa de avance se recalcula para conservar los 3:1 contra
   su canal oscuro.
   -------------------------------------------------------------------------- */
:root[data-tema="oscuro"] {
  --lienzo: #0E0A1C;
  --panel: #171130;
  --hundido: #120D26;
  --canal: #221A44;
  --activo: #241C4B;
  --velo: rgba(6, 4, 14, .7);

  --borde: #2C2456;
  --borde-fuerte: #6B5FA8;    /* 3,30:1 sobre panel */

  --tinta: #F1EDFF;           /* 15,78:1 sobre panel */
  --tinta-2: #BAB1E0;         /* 9,02:1 */
  --tinta-3: #9E94CC;         /* 6,52:1 */
  --tinta-inv: #0E0A1C;

  --primario: #A48CFF;        /* 6,71:1 sobre panel */
  --primario-fuerte: #8B6DFF;
  --primario-sup: #241C4B;
  --primario-borde: #6A5AAE;
  --primario-txt: #A48CFF;

  --secundario: #FF9A5C;
  --secundario-txt: #FFA873;
  --secundario-sup: #33200F;
  --secundario-borde: #8F5D3C;

  --exito: #3DD9A0;
  --exito-sup: #0C2E24;
  --exito-borde: #207256;
  --aviso: #F0B44A;
  --aviso-sup: #33260C;
  --aviso-borde: #7F5F25;
  --riesgo: #FF8098;
  --riesgo-sup: #360F1C;
  --riesgo-borde: #A54D60;

  --avance-0: #FF9A5C;
  --avance-25: #FF6E9B;
  --avance-50: #E070E8;
  --avance-75: #B48CFF;
  --avance-100: #A48CFF;
  --avance-cabezal: #F1EDFF;
  --avance-completo: #3DD9A0;

  --rol-alumno: #3DD9A0;      --rol-alumno-sup: #0C2E24;
  --rol-tutor: #A48CFF;       --rol-tutor-sup: #241C4B;
  --rol-gestor: #F0B44A;      --rol-gestor-sup: #33260C;
  --rol-admin: #F49BE8;       --rol-admin-sup: #3A0F35;
  --rol-inspector: #86B4FF;   --rol-inspector-sup: #10233F;

  /* En oscuro la sombra sola no separa: se apoya en un borde luminoso. */
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 10px 24px -8px rgba(0, 0, 0, .6);
  --sombra-3: 0 6px 14px rgba(0, 0, 0, .55), 0 22px 48px -12px rgba(0, 0, 0, .7);
  --sombra-foco: 0 0 0 3px rgba(164, 140, 255, .42);

  color-scheme: dark;
}

/* Respeto a la preferencia del sistema cuando la persona no ha elegido nada.
   El conmutador escribe data-tema y gana siempre sobre esta regla. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --lienzo: #0E0A1C;   --panel: #171130;    --hundido: #120D26;
    --canal: #221A44;    --activo: #241C4B;   --velo: rgba(6, 4, 14, .7);
    --borde: #2C2456;    --borde-fuerte: #6B5FA8;
    --tinta: #F1EDFF;    --tinta-2: #BAB1E0;  --tinta-3: #9E94CC;
    --tinta-inv: #0E0A1C;
    --primario: #A48CFF; --primario-fuerte: #8B6DFF; --primario-sup: #241C4B;
    --primario-borde: #6A5AAE; --primario-txt: #A48CFF;
    --secundario: #FF9A5C; --secundario-txt: #FFA873;
    --secundario-sup: #33200F; --secundario-borde: #8F5D3C;
    --exito: #3DD9A0;    --exito-sup: #0C2E24;  --exito-borde: #207256;
    --aviso: #F0B44A;    --aviso-sup: #33260C;  --aviso-borde: #7F5F25;
    --riesgo: #FF8098;   --riesgo-sup: #360F1C; --riesgo-borde: #A54D60;
    --avance-0: #FF9A5C; --avance-25: #FF6E9B;  --avance-50: #E070E8;
    --avance-75: #B48CFF; --avance-100: #A48CFF;
    --avance-cabezal: #F1EDFF; --avance-completo: #3DD9A0;
    --rol-alumno: #3DD9A0; --rol-alumno-sup: #0C2E24;
    --rol-tutor: #A48CFF;  --rol-tutor-sup: #241C4B;
    --rol-gestor: #F0B44A; --rol-gestor-sup: #33260C;
    --rol-admin: #F49BE8;  --rol-admin-sup: #3A0F35;
    --rol-inspector: #86B4FF; --rol-inspector-sup: #10233F;
    --sombra-1: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-2: 0 2px 6px rgba(0, 0, 0, .5), 0 10px 24px -8px rgba(0, 0, 0, .6);
    --sombra-3: 0 6px 14px rgba(0, 0, 0, .55), 0 22px 48px -12px rgba(0, 0, 0, .7);
    --sombra-foco: 0 0 0 3px rgba(164, 140, 255, .42);
    color-scheme: dark;
  }
}

/* -----------------------------------------------------------------------------
   4. REAJUSTE DE BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* «clip» y no «hidden»: recorta el desbordamiento lateral sin crear un
     contenedor de desplazamiento, así que position: sticky sigue funcionando.
     Hace falta porque los textos .oculto-visual son absolutos y escapan del
     recorte de cualquier ancestro que no sea position: relative, arrastrando
     el scroll horizontal de la página en pantallas estrechas. */
  overflow-x: clip;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: var(--txt-base);
  line-height: var(--interlinea-normal);
  font-feature-settings: 'cv05' 1, 'cv08' 1; /* íes y jotas más distinguibles */
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titular);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-apretada);
  letter-spacing: -.018em;   /* Lexend es ancha: se aprieta un poco en titular */
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--txt-2xl); }
h2 { font-size: var(--txt-xl); }
h3 { font-size: var(--txt-lg); }
h4 { font-size: var(--txt-base); }

p, ul, ol, dl, figure, table { margin: 0; }

a { color: var(--primario); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }

img, svg, video { max-width: 100%; }
svg { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e-6) 0; }

/* Todas las cifras del producto van en cifras tabulares: las columnas de
   porcentajes, horas y notas se alinean verticalmente aunque cambien. */
.cifra, td.num, th.num, time, .dato__valor, .kpi__valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* -----------------------------------------------------------------------------
   5. FOCO — visible siempre, nunca suprimido (auditoría: foco perdido)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
/* Sobre rellenos del propio primario el anillo se invierte para no fundirse. */
.btn--primario:focus-visible,
.senda__nodo:focus-visible {
  outline-color: var(--tinta);
  box-shadow: 0 0 0 6px rgba(91, 43, 234, .28);
}
:root[data-tema="oscuro"] .btn--primario:focus-visible { outline-color: var(--panel); }

/* Enlace de salto al contenido — resuelve el hallazgo H-05 */
.saltar {
  position: absolute;
  left: var(--e-4);
  top: calc(var(--barra-mockup-alto) + var(--e-2));
  z-index: 90;
  transform: translateY(-200%);
  background: var(--primario);
  color: var(--tinta-inv);
  padding: var(--e-3) var(--e-5);
  border-radius: var(--r-full);
  font-weight: var(--peso-fuerte);
  text-decoration: none;
  transition: transform var(--mov-base) var(--curva);
}
.saltar:focus { transform: translateY(0); }

/* -----------------------------------------------------------------------------
   6. UTILIDADES
   -------------------------------------------------------------------------- */
.oculto-visual {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.no-visible { display: none !important; }

.eti {
  font-size: var(--txt-eti);
  font-weight: var(--peso-fuerte);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.apilar { display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; }
.fila--sep { justify-content: space-between; }
.fila--envuelve { flex-wrap: wrap; }
.g-1 { gap: var(--e-1); } .g-2 { gap: var(--e-2); } .g-3 { gap: var(--e-3); }
.g-4 { gap: var(--e-4); } .g-5 { gap: var(--e-5); } .g-6 { gap: var(--e-6); }
.g-8 { gap: var(--e-8); }
.crece { flex: 1 1 auto; min-width: 0; }
.centrado { text-align: center; }
.txt-2 { color: var(--tinta-2); }
.txt-3 { color: var(--tinta-3); }
.txt-sm { font-size: var(--txt-sm); }
.txt-xs { font-size: var(--txt-xs); }
.negrita { font-weight: var(--peso-fuerte); }
.titular { font-family: var(--fuente-titular); letter-spacing: -.018em; }
.sin-punto { list-style: none; padding: 0; margin: 0; }

/* -----------------------------------------------------------------------------
   7. BARRA DEL MOCKUP
   Tira ajena al producto: fondo tinta constante en ambos temas, tipografía
   monoespaciada y borde inferior marcado. Se pliega con el botón «Ocultar».
   -------------------------------------------------------------------------- */
.mk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  height: var(--barra-mockup-alto);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-3);
  /* La barra se desplaza dentro de sí misma en pantallas estrechas: así nunca
     arrastra el scroll horizontal de la página, que debe quedar limpio. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  background: var(--mk-fondo);
  color: var(--mk-txt);
  border-bottom: 2px solid var(--mk-borde);
  font-family: var(--fuente-mono);
  font-size: var(--txt-xs);
}
.mk a { color: var(--mk-enlace); }
.mk__marca {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mk-marca);
  white-space: nowrap;
}
.mk__sel {
  background: var(--mk-campo);
  color: var(--mk-txt);
  border: 1px solid var(--mk-campo-borde);
  border-radius: var(--r-xs);
  padding: 5px var(--e-2);
  max-width: 46vw;
  font-family: inherit;
  font-size: inherit;
}
.mk__btn {
  background: var(--mk-campo);
  color: var(--mk-txt);
  border: 1px solid var(--mk-campo-borde);
  border-radius: var(--r-xs);
  padding: 5px var(--e-3);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  min-height: 30px;
}
.mk__btn:hover { background: var(--mk-hover); }
.mk__btn[aria-pressed="true"] { background: var(--mk-campo-borde); border-color: var(--primario-borde); }
.mk :focus-visible { outline-color: var(--mk-marca); }
.mk__oculto-aviso {
  position: fixed;
  top: 0; left: 0;
  z-index: 80;
  background: var(--mk-fondo);
  color: var(--mk-txt);
  border: 0;
  border-bottom-right-radius: var(--r-sm);
  padding: var(--e-1) var(--e-3);
  font-family: var(--fuente-mono);
  font-size: var(--txt-xs);
  cursor: pointer;
}
body.mk-oculta .mk { display: none; }
body:not(.mk-oculta) .mk__oculto-aviso { display: none; }
body { padding-top: var(--barra-mockup-alto); }
body.mk-oculta { padding-top: 0; }

.mk::-webkit-scrollbar { display: none; }
.mk > * { flex: none; }
.mk .crece { flex: 1 1 auto; }

@media (max-width: 700px) {
  .mk__ocultar-movil { display: none; }
  .mk__marca { font-size: 0; }              /* se conserva para lectores */
  .mk__marca::before { content: 'MK 03'; font-size: var(--txt-xs); }
  .mk__sel { max-width: 38vw; }
}

/* -----------------------------------------------------------------------------
   8. ARMAZÓN DE LA APLICACIÓN
   Dos armazones distintos, porque el uso es distinto:
   · «app--alumno»: sin barra lateral. Cabecera fina + contenido de una sola
     columna + navegación inferior en móvil. Mobile-first de verdad.
   · «app--gestion»: barra lateral persistente en escritorio, porque quien
     administra salta entre secciones a menudo y necesita el mapa a la vista.
   -------------------------------------------------------------------------- */
.app {
  min-height: calc(100vh - var(--barra-mockup-alto));
  display: flex;
  flex-direction: column;
}

/* --- Cabecera común -------------------------------------------------------- */
.cab {
  position: sticky;
  top: var(--barra-mockup-alto);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cabecera-alto);
  padding: var(--e-2) var(--e-4);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
body.mk-oculta .cab { top: 0; }

.cab__marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;                 /* deja que el nombre se recorte antes de desbordar */
  font-family: var(--fuente-titular);
  font-weight: var(--peso-negro);
  font-size: var(--txt-base);
  letter-spacing: -.02em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cab__marca:hover { text-decoration: none; }
.cab__marca > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cab__logo { width: 30px; height: 30px; flex: none; }
.cab__sub {
  display: block;
  font-family: var(--fuente-cuerpo);
  font-weight: var(--peso-normal);
  font-size: var(--txt-xs);
  color: var(--tinta-3);
  letter-spacing: 0;
}
/* En pantallas estrechas la coletilla del centro estorba: la marca basta. */
@media (max-width: 560px) {
  .cab__sub { display: none; }
}

/* --- Barra lateral de gestión --------------------------------------------- */
.lateral {
  display: none;
  position: relative;
  flex-direction: column;
  gap: var(--e-1);
  width: var(--lateral-ancho);
  flex: none;
  padding: var(--e-4) var(--e-3) var(--e-8);
  border-right: 1px solid var(--borde);
  background: var(--panel);
  position: sticky;
  top: calc(var(--barra-mockup-alto) + var(--cabecera-alto));
  height: calc(100vh - var(--barra-mockup-alto) - var(--cabecera-alto));
  overflow-y: auto;
}
body.mk-oculta .lateral { top: var(--cabecera-alto); height: calc(100vh - var(--cabecera-alto)); }

.lateral__grupo { margin-top: var(--e-5); }
.lateral__grupo:first-child { margin-top: 0; }
.lateral__titulo { padding: 0 var(--e-3) var(--e-2); }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  min-height: var(--toque-min);
  border-radius: var(--r-md);
  color: var(--tinta-2);
  text-decoration: none;
  font-size: var(--txt-sm);
  font-weight: var(--peso-medio);
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva);
}
.nav-item:hover { background: var(--hundido); color: var(--tinta); text-decoration: none; }
.nav-item svg { width: 20px; height: 20px; flex: none; }
/* El elemento activo no se marca solo con color: lleva además una barra
   sólida a la izquierda y peso tipográfico distinto. */
.nav-item[aria-current="page"] {
  background: var(--primario-sup);
  color: var(--primario);
  font-weight: var(--peso-fuerte);
  box-shadow: inset 3px 0 0 var(--primario);
}
.nav-item__contador {
  margin-left: auto;
  background: var(--riesgo);
  color: var(--blanco);
  font-size: var(--txt-eti);
  font-weight: var(--peso-negro);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
:root[data-tema="oscuro"] .nav-item__contador { color: var(--tinta-inv); }

/* --- Región principal ------------------------------------------------------ */
.cuerpo { display: flex; align-items: flex-start; flex: 1; }
.principal {
  flex: 1;
  min-width: 0;
  padding: var(--e-5) var(--e-4) calc(var(--inferior-alto) + var(--e-10));
}
.principal__ancho { max-width: var(--ancho-max); margin: 0 auto; }
.principal--estrecho .principal__ancho { max-width: 940px; }

/* --- Navegación inferior (alumnado en móvil) -------------------------------
   Cuatro destinos, sin más. Área táctil de 44 px, etiqueta siempre visible
   (no solo icono) y estado activo con relleno + peso, no solo color. ------- */
.inferior {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: flex;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding: var(--e-1) var(--e-1) max(var(--e-1), env(safe-area-inset-bottom));
}
.inferior__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--e-1);
  border-radius: var(--r-md);
  color: var(--tinta-2);
  text-decoration: none;
  font-size: var(--txt-eti);
  font-weight: var(--peso-medio);
  position: relative;
}
.inferior__item:hover { text-decoration: none; }
.inferior__item svg { width: 22px; height: 22px; }
.inferior__item[aria-current="page"] {
  color: var(--primario);
  font-weight: var(--peso-negro);
  background: var(--primario-sup);
}
.inferior__punto {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 4px;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--riesgo);
  border: 2px solid var(--panel);
}

/* -----------------------------------------------------------------------------
   9. PUNTOS DE RUPTURA
   El diseño se escribe para 390 px y se ensancha. Cada salto añade, no quita.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .principal { padding: var(--e-6) var(--e-6) var(--e-12); }
}

@media (min-width: 1024px) {
  .lateral { display: flex; }
  .inferior { display: none; }
  .principal { padding: var(--e-8) var(--e-8) var(--e-16); }
  .cab { padding-inline: var(--e-6); }
}

/* -----------------------------------------------------------------------------
   10. MOVIMIENTO CON PROPÓSITO
   Entrada escalonada de tarjetas y transición de las barras de avance.
   Todo se apaga bajo prefers-reduced-motion (hallazgo H-08: ninguna de las 33
   hojas actuales lo respeta).
   -------------------------------------------------------------------------- */
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes crece-cinta {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.entra {
  animation: entra var(--mov-lento) var(--curva) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .entra { animation: none; opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   11. IMPRESIÓN — el seguimiento se imprime para inspección
   -------------------------------------------------------------------------- */
@media print {
  /* En papel se fuerza la paleta clara redefiniendo los tokens, en vez de
     poner colores literales: así el informe sale igual aunque quien lo
     imprima tenga el campus en modo oscuro. */
  :root, :root[data-tema="oscuro"] {
    --lienzo: var(--blanco);
    --panel: var(--blanco);
    --hundido: var(--blanco);
    --tinta: var(--tinta-fija);
    --borde: var(--borde-fuerte);
  }
  .mk, .lateral, .inferior, .cab, .no-imprimir { display: none !important; }
  body { padding-top: 0; }
  .panel { box-shadow: none; border: 1px solid var(--borde-fuerte); break-inside: avoid; }
}