/* ==========================================================================
   AULA — Sistema de diseño para el campus de Hebb
   Dirección de arte: editorial, cálida, humana.
   Mockup 1 de 3. Todo el color, espacio, radio y tipografía sale de tokens.

   Índice del fichero
   01. Fuentes locales (@font-face)
   02. Tokens: color claro
   03. Tokens: color oscuro (papel oscuro, no consola)
   04. Tokens: tipografía, espacio, radio, línea, sombra, movimiento
   05. Reinicio y bases
   06. Tipografía editorial
   07. Barra del mockup (fuera del producto)
   08. Estructura: cabecera, navegación, contenedores
   09. Rejillas y utilidades de composición
   10. Superficies: fichas, listas regladas, paneles
   11. Botones
   12. Formularios y errores en línea
   13. Distintivos, píldoras y estados
   14. Progreso
   15. Tablas densas y su respuesta móvil
   16. Avisos y bandas de estado
   17. Estados vacíos, carga (esqueleto) y error
   18. Pestañas, acordeones, menús y diálogos
   19. Avatares e iconografía
   20. Aula: portal del curso, temario y visor de lección
   21. Evaluación
   22. Comunicación: foros, hilos y mensajes
   23. Administración: ficha de persona, cronología, seguimiento
   24. Movimiento y preferencias de reducción
   25. Respuesta adaptable (móvil, tablet, escritorio)
   ========================================================================== */


/* 01. Fuentes locales ----------------------------------------------------- */
/* Se sirven desde fonts/ para que el mockup funcione con file:// y sin red.
   Siempre hay stack de respaldo del sistema por si el .woff2 no carga. */

@font-face {
  font-family: "IBM Plex Sans var";
  src: url("../fonts/ibm-plex-sans-var.woff2") format("woff2-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("../fonts/ibm-plex-serif-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Alternativa de alta legibilidad que el alumnado puede activar en Perfil.
   No es decorativa: resuelve confusiones l/I/1 y O/0 en pantallas pequeñas. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* 02. Tokens: color claro -------------------------------------------------
   Paleta terrosa de baja saturación en las superficies. La saturación alta
   queda reservada al acento y a los estados. Ningún fondo es blanco puro:
   el papel (#F5F1E9) baja el deslumbramiento en sesiones largas de lectura.
   Todos los pares texto/fondo de esta hoja están calculados: ver README. */

:root {
  /* Superficies */
  --papel:            #F5F1E9;  /* fondo de la aplicación */
  --papel-alto:       #FCFAF5;  /* fichas y superficies elevadas */
  --papel-hundido:    #EDE7DA;  /* zonas recesivas: barras, celdas, código */
  --papel-velo:       rgba(35, 32, 28, 0.42); /* velo de diálogo */

  /* Tinta (texto) */
  --tinta:            #23201C;  /* 14,40:1 sobre papel */
  --tinta-media:      #5A5147;  /*  6,90:1 sobre papel */
  --tinta-suave:      #6E6459;  /*  5,14:1 sobre papel — metadatos */
  --tinta-inversa:    #FCFAF5;  /* texto sobre superficie de acento */

  /* Acento: terracota. Solo uno, y se gasta poco. */
  --acento:           #9A3B14;  /* 6,19:1 sobre papel — enlaces y acciones */
  --acento-fuerte:    #7E2F0F;  /* estado :hover / :active */
  --acento-velo:      #F3E4DA;  /* fondo tenue de distintivo */
  --acento-linea:     #DCC3B2;  /* borde de superficie acentuada */

  /* Estados semánticos */
  --exito:            #2F5D3A;
  --exito-velo:       #E4EDE2;
  --exito-linea:      #BFD4BC;
  --aviso:            #7A4B06;
  --aviso-velo:       #F4E8D0;
  --aviso-linea:      #DFC48A;
  --error:            #A32A1C;
  --error-velo:       #F7E3DF;
  --error-linea:      #E4B7AF;
  --info:             #1F5473;
  --info-velo:        #DFEAF1;
  --info-linea:       #B3CBDB;
  --neutro:           #4A4239;
  --neutro-velo:      #E8E2D5;
  --neutro-linea:     #D2C9B8;

  /* Líneas: 1px es la unidad de separación de este sistema, no la sombra. */
  --linea:            #E2DBCC;  /* separador decorativo */
  --linea-fuerte:     #D0C6B4;  /* separador estructural */
  --borde-control:    #8C8175;  /* 3,38:1 — bordes de campos y controles */

  /* Realces de lectura */
  --marca-texto:      #F0DFA8;  /* subrayado de cita destacada */
  --raya-modulo:      #C9BCA7;  /* filete de numeración de módulo */
}


/* 03. Tokens: color oscuro ------------------------------------------------
   Papel oscuro, no consola: los grises llevan carga cálida (rojo > azul) para
   que la lectura larga no resulte metálica. El acento sube de luminosidad
   (terracota clara) porque el terracota oscuro no llega a 4,5:1 sobre negro. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:          #191512;
    --papel-alto:     #221D19;
    --papel-hundido:  #141110;
    --papel-velo:     rgba(10, 8, 7, 0.62);

    --tinta:          #F0E9DD;  /* 15,04:1 */
    --tinta-media:    #BCB0A2;  /*  8,53:1 */
    --tinta-suave:    #A2968A;  /*  6,28:1 */
    --tinta-inversa:  #191512;

    --acento:         #EE9668;  /* 7,95:1 */
    --acento-fuerte:  #F7B18B;
    --acento-velo:    #2C1D14;
    --acento-linea:   #5B3A26;

    --exito:          #8FC48D;
    --exito-velo:     #1E2A1E;
    --exito-linea:    #3B5439;
    --aviso:          #E8B45C;
    --aviso-velo:     #2C2113;
    --aviso-linea:    #5C4620;
    --error:          #F09184;
    --error-velo:     #2E1A17;
    --error-linea:    #5F332C;
    --info:           #84BADD;
    --info-velo:      #16232C;
    --info-linea:     #2F4C5E;
    --neutro:         #CFC4B6;
    --neutro-velo:    #262019;
    --neutro-linea:   #453D33;

    --linea:          #332C25;
    --linea-fuerte:   #453C32;
    --borde-control:  #7C7165;  /* 3,81:1 */

    --marca-texto:    #4A3C15;
    --raya-modulo:    #4E4437;
  }
}

/* Elección explícita del usuario: gana sobre el sistema en ambos sentidos. */
:root[data-theme="dark"] {
  --papel:            #191512;
  --papel-alto:       #221D19;
  --papel-hundido:    #141110;
  --papel-velo:       rgba(10, 8, 7, 0.62);

  --tinta:            #F0E9DD;
  --tinta-media:      #BCB0A2;
  --tinta-suave:      #A2968A;
  --tinta-inversa:    #191512;

  --acento:           #EE9668;
  --acento-fuerte:    #F7B18B;
  --acento-velo:      #2C1D14;
  --acento-linea:     #5B3A26;

  --exito:            #8FC48D;
  --exito-velo:       #1E2A1E;
  --exito-linea:      #3B5439;
  --aviso:            #E8B45C;
  --aviso-velo:       #2C2113;
  --aviso-linea:      #5C4620;
  --error:            #F09184;
  --error-velo:       #2E1A17;
  --error-linea:      #5F332C;
  --info:             #84BADD;
  --info-velo:        #16232C;
  --info-linea:       #2F4C5E;
  --neutro:           #CFC4B6;
  --neutro-velo:      #262019;
  --neutro-linea:     #453D33;

  --linea:            #332C25;
  --linea-fuerte:     #453C32;
  --borde-control:    #7C7165;

  --marca-texto:      #4A3C15;
  --raya-modulo:      #4E4437;
}


/* 04. Tokens: tipografía, espacio, radio, sombra, movimiento --------------- */

:root {
  /* Pareja tipográfica: serif para lo que se lee, sans para lo que se opera. */
  --fuente-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --fuente-sans:  "IBM Plex Sans var", "IBM Plex Sans", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fuente-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala tipográfica. Los títulos usan clamp() para respirar en escritorio
     sin desbordar en móvil; los tamaños de interfaz son fijos, porque una
     interfaz que cambia de tamaño con la ventana desorienta. */
  --t-display: clamp(2.125rem, 1.55rem + 2.4vw, 3.25rem);
  --t1:        clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t2:        clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  --t3:        clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
  --t4:        1.0625rem;
  --t-cuerpo:  1rem;        /* 16px: cuerpo de interfaz */
  --t-lectura: 1.1875rem;   /* 19px: cuerpo del visor de lección */
  --t-s:       0.875rem;    /* 14px: apoyo */
  --t-xs:      0.8125rem;   /* 13px: metadatos, nunca por debajo */
  --t-micro:   0.75rem;     /* 12px: solo versalitas de rótulo, con tracking */

  /* Alturas de línea */
  --interlinea-titulo: 1.16;
  --interlinea-ui:     1.5;
  --interlinea-lectura: 1.72;

  /* Pesos */
  --peso-normal: 400;
  --peso-medio:  500;
  --peso-fuerte: 600;

  /* Medida de línea: 66 caracteres en lección, 74 en textos secundarios. */
  --medida-lectura: 66ch;
  --medida-ancha:   74ch;

  /* Espacio: escala de 4px con ritmo vertical de 8px. */
  --e0:  0;
  --e1:  0.25rem;   /*  4px */
  --e2:  0.5rem;    /*  8px */
  --e3:  0.75rem;   /* 12px */
  --e4:  1rem;      /* 16px */
  --e5:  1.5rem;    /* 24px */
  --e6:  2rem;      /* 32px */
  --e7:  2.5rem;    /* 40px */
  --e8:  3rem;      /* 48px */
  --e9:  4rem;      /* 64px */
  --e10: 5.5rem;    /* 88px */

  /* Radios pequeños o nulos: la calidez la da el color, no la esquina. */
  --radio-0: 0;
  --radio-1: 2px;
  --radio-2: 4px;
  --radio-3: 6px;
  --radio-pastilla: 999px;

  /* Sombras casi inexistentes. Solo capas que flotan de verdad. */
  --sombra-0: none;
  --sombra-menu:   0 2px 10px rgba(35, 32, 28, 0.10), 0 0 0 1px var(--linea-fuerte);
  --sombra-dialogo: 0 8px 32px rgba(35, 32, 28, 0.18);

  /* Anchos de contenedor */
  --ancho-max:  1180px;
  --ancho-medio: 900px;
  --ancho-estrecho: 640px;

  /* Movimiento: corto y sin rebote. */
  --transicion: 140ms ease-out;

  /* Foco: siempre visible, siempre del mismo grosor. */
  --anillo-foco: 2px;
}

/* Preferencia de tipografía de alta legibilidad (conmutador en Perfil). */
:root[data-tipografia="legible"] {
  --fuente-sans:  "Atkinson Hyperlegible", -apple-system, "Segoe UI", Arial, sans-serif;
  --fuente-serif: "Atkinson Hyperlegible", Georgia, serif;
}

/* Preferencia de texto más grande (conmutador en Perfil). */
:root[data-escala="grande"] {
  --t-cuerpo:  1.0625rem;
  --t-lectura: 1.3125rem;
  --t-s:       0.9375rem;
  --t-xs:      0.875rem;
  --medida-lectura: 62ch;
}


/* 05. Reinicio y bases ---------------------------------------------------- */

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

/* El atributo hidden debe ganar siempre: cualquier componente con un display
   explícito (flex, grid) lo pisaría por especificidad y se quedaría visible. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-sans);
  font-size: var(--t-cuerpo);
  line-height: var(--interlinea-ui);
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

/* Foco visible y homogéneo en todo el mockup. Nunca se anula sin sustituto. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--anillo-foco) solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-1);
}

/* Enlace de salto al contenido: visible solo al tabular. */
.salto {
  position: absolute;
  left: var(--e4);
  top: -3rem;
  z-index: 200;
  background: var(--acento);
  color: var(--tinta-inversa);
  padding: var(--e2) var(--e4);
  border-radius: var(--radio-2);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: top var(--transicion);
}
.salto:focus { top: var(--e2); }

/* Texto solo para lectores de pantalla. */
.solo-lector {
  position: absolute;
  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;
}


/* 06. Tipografía editorial ------------------------------------------------ */

h1, h2, h3, h4, h5 {
  font-family: var(--fuente-serif);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titulo);
  letter-spacing: -0.011em;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t1); }
h2 { font-size: var(--t2); }
h3 { font-size: var(--t3); }
h4 { font-size: var(--t4); }

p { margin: 0 0 var(--e4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--acento);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--acento-linea);
  transition: text-decoration-color var(--transicion), color var(--transicion);
}
a:hover { color: var(--acento-fuerte); text-decoration-color: currentColor; }

strong, b { font-weight: var(--peso-fuerte); }

small { font-size: var(--t-s); }

/* Rótulo en versalitas: sustituye a muchas cajas de título. Estructura por
   tipografía, no por contenedor. */
.rotulo {
  font-family: var(--fuente-sans);
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e3);
}

/* Rótulo con regla tipográfica: el filete sustituye al borde de una caja. */
.rotulo-regla {
  display: flex;
  align-items: center;
  gap: var(--e3);
  margin: 0 0 var(--e4);
}
.rotulo-regla::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

/* Entradilla: párrafo de apertura, más grande y en serif. */
.entradilla {
  font-family: var(--fuente-serif);
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: var(--medida-ancha);
}

.apoyo   { color: var(--tinta-media); font-size: var(--t-s); }
.meta    { color: var(--tinta-suave); font-size: var(--t-xs); }
.numero  { font-variant-numeric: tabular-nums lining-nums; }

/* Cifra destacada de panel: serif, grande, sin caja. */
.cifra {
  font-family: var(--fuente-serif);
  font-size: var(--t1);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cifra small {
  font-size: var(--t-s);
  font-weight: var(--peso-normal);
  color: var(--tinta-suave);
  letter-spacing: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: var(--e6) 0;
}


/* 07. Barra del mockup ----------------------------------------------------
   Tira de navegación entre pantallas del mockup. Va fuera del lienzo del
   producto y se distingue de él: fondo invertido, tipografía mono y una
   etiqueta explícita. Se puede ocultar con el botón o con la tecla M. */

.mk-barra {
  position: sticky;
  top: 0;
  z-index: 120;
  background: #23201C;
  color: #E8E2D5;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  border-bottom: 1px solid #3A342C;
}
:root[data-theme="dark"] .mk-barra { background: #0E0C0A; border-bottom-color: #2A241E; }

.mk-barra__fila {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--e2) var(--e4);
  display: flex;
  align-items: center;
  gap: var(--e4);
  flex-wrap: wrap;
}

.mk-barra__marca {
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8B45C;
  white-space: nowrap;
}

.mk-barra__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e3);
  align-items: center;
  flex: 1;
  min-width: 0;
}

.mk-barra a {
  color: #D6CEC1;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: var(--radio-1);
  white-space: nowrap;
}
.mk-barra a:hover { color: #FFF; background: #3A342C; text-decoration: none; }
.mk-barra a[aria-current="page"] {
  color: #23201C;
  background: #E8B45C;
  font-weight: var(--peso-fuerte);
}
.mk-barra a:focus-visible { outline-color: #E8B45C; }

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

.mk-btn {
  font: inherit;
  background: transparent;
  color: #D6CEC1;
  border: 1px solid #4E463C;
  border-radius: var(--radio-2);
  padding: 3px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.mk-btn:hover { background: #3A342C; color: #FFF; }
.mk-btn:focus-visible { outline-color: #E8B45C; }
.mk-btn svg { width: 14px; height: 14px; }

/* Estado oculto: solo queda una pestaña mínima para recuperarla. */
.mk-barra[hidden] { display: none; }
.mk-mostrar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: #23201C;
  color: #E8B45C;
  border: 0;
  border-radius: 0 0 var(--radio-3) var(--radio-3);
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  padding: 3px 12px;
  cursor: pointer;
}
.mk-mostrar[hidden] { display: none; }


/* 08. Estructura del producto: cabecera y navegación -----------------------
   Sustituye a la barra lateral de 21 elementos planos. Navegación superior
   con 4 o 5 destinos agrupados por tarea; lo demás vive dentro de cada
   sección o en el menú de la persona. */

.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--linea-fuerte);
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Cuando la barra del mockup está visible, la cabecera se pega debajo. */
.mk-barra:not([hidden]) ~ .producto .cabecera { top: 0; }

.cabecera__fila {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: var(--e3) var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e5);
}

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e2);
  text-decoration: none;
  color: var(--tinta);
  flex-shrink: 0;
}
.marca__nombre {
  font-family: var(--fuente-serif);
  font-size: var(--t3);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.02em;
}
.marca__centro {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-left: 1px solid var(--linea-fuerte);
  padding-left: var(--e2);
}
.marca:hover .marca__nombre { color: var(--acento); }

/* Navegación principal: subrayado grueso en el activo, no una píldora de color. */
.nav-principal { flex: 1; min-width: 0; }
.nav-principal ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--e1);
  align-items: center;
}
.nav-principal a,
.nav-principal .nav-grupo__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  color: var(--tinta-media);
  text-decoration: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicion), border-color var(--transicion);
}
.nav-principal a:hover,
.nav-principal .nav-grupo__disparador:hover {
  color: var(--tinta);
  border-bottom-color: var(--linea-fuerte);
}
.nav-principal a[aria-current="page"] {
  color: var(--tinta);
  font-weight: var(--peso-fuerte);
  border-bottom-color: var(--acento);
}
.nav-principal .nav-grupo__disparador[aria-expanded="true"] {
  color: var(--tinta);
  border-bottom-color: var(--acento);
}
.nav-principal .nav-grupo__disparador svg { width: 12px; height: 12px; }

/* Grupo desplegable de navegación (admin y gestión). */
.nav-grupo { position: relative; }
.nav-grupo__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-menu);
  padding: var(--e2);
  z-index: 70;
}
.nav-grupo__panel[hidden] { display: none; }
.nav-grupo__panel ul { display: block; }
.nav-grupo__panel li + li { margin-top: 1px; }
.nav-grupo__panel a {
  display: block;
  width: 100%;
  padding: var(--e2) var(--e3);
  border-bottom: 0;
  border-radius: var(--radio-2);
  color: var(--tinta);
  font-weight: var(--peso-normal);
}
.nav-grupo__panel a:hover { background: var(--papel-hundido); border-bottom-color: transparent; }
.nav-grupo__panel a[aria-current="page"] { background: var(--acento-velo); color: var(--acento); }
.nav-grupo__panel .apoyo { display: block; font-size: var(--t-xs); color: var(--tinta-suave); }
.nav-grupo__separador {
  border-top: 1px solid var(--linea);
  margin: var(--e2) var(--e2);
  padding-top: var(--e2);
}

/* Zona derecha: buscar, avisos y persona. */
.cabecera__derecha {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-shrink: 0;
}

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radio-2);
  background: transparent;
  color: var(--tinta-media);
  cursor: pointer;
  position: relative;
}
.boton-icono:hover { background: var(--papel-hundido); color: var(--tinta); }
.boton-icono svg { width: 18px; height: 18px; }

/* Contador de no leídos: el número también va en el nombre accesible. */
.contador {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  background: var(--error);
  /* El texto usa la tinta inversa, que se invierte sola con el tema: claro
     sobre el rojo oscuro del modo claro, oscuro sobre el salmón del oscuro.
     Un #FFF fijo daría 2,4:1 en modo oscuro. */
  color: var(--tinta-inversa);
  border-radius: var(--radio-pastilla);
  font-size: 10px;
  font-weight: var(--peso-fuerte);
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.persona-menu { position: relative; }
.persona-menu__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radio-2);
  padding: var(--e1) var(--e2);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--t-s);
  color: var(--tinta);
}
.persona-menu__disparador:hover { background: var(--papel-hundido); }
.persona-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 240px;
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-menu);
  padding: var(--e2);
  z-index: 70;
}
.persona-menu__panel[hidden] { display: none; }
.persona-menu__cabeza {
  padding: var(--e2) var(--e3) var(--e3);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e2);
}
.persona-menu__panel a,
.persona-menu__panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--e2) var(--e3);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--t-s);
  color: var(--tinta);
  text-decoration: none;
  border-radius: var(--radio-2);
  cursor: pointer;
}
.persona-menu__panel a:hover,
.persona-menu__panel button:hover { background: var(--papel-hundido); }

/* Botón de navegación en móvil */
.nav-movil-boton { display: none; }

/* Contenedores */
.producto { min-height: 60vh; }

.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--e5);
}
.contenedor--medio   { max-width: var(--ancho-medio); }
.contenedor--estrecho { max-width: var(--ancho-estrecho); }

.pagina { padding: var(--e7) 0 var(--e9); }
.pagina--compacta { padding: var(--e5) 0 var(--e8); }

/* Cabecera de página: título, entradilla y acciones. Sin caja. */
.pagina-cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e5);
  flex-wrap: wrap;
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea-fuerte);
  margin-bottom: var(--e6);
}
.pagina-cabeza__texto { max-width: var(--medida-ancha); }
.pagina-cabeza h1 { margin-bottom: var(--e2); }
.pagina-cabeza__acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* Migas de pan */
.migas {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-bottom: var(--e3);
}
.migas ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}
.migas li { display: flex; align-items: center; gap: var(--e2); }
.migas li + li::before {
  content: "/";
  color: var(--linea-fuerte);
}
.migas a { color: var(--tinta-media); text-decoration: none; }
.migas a:hover { color: var(--acento); text-decoration: underline; }

/* Pie del producto */
.pie {
  border-top: 1px solid var(--linea);
  margin-top: var(--e9);
  padding: var(--e5) 0 var(--e7);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}
.pie__fila {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--e5);
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}


/* 09. Rejillas y utilidades de composición -------------------------------- */

.rejilla { display: grid; gap: var(--e5); }
.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--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Composición editorial: cuerpo principal + margen (como una revista). */
.con-margen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--e8);
  align-items: start;
}
.con-margen--izquierda {
  grid-template-columns: 300px minmax(0, 1fr);
}

.pila     { display: flex; flex-direction: column; gap: var(--e5); }
.pila--s  { gap: var(--e3); }
.pila--xs { gap: var(--e2); }
.pila--l  { gap: var(--e7); }

.fila {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.fila--separada { justify-content: space-between; }
.fila--arriba { align-items: flex-start; }
.fila--fin { justify-content: flex-end; }

.medida { max-width: var(--medida-lectura); }
.medida-ancha { max-width: var(--medida-ancha); }

.pegajoso { position: sticky; top: var(--e9); }


/* 10. Superficies --------------------------------------------------------- */

/* Ficha: borde de 1px, sin sombra. La jerarquía la marca el fondo, no la elevación. */
.ficha {
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  padding: var(--e5);
}
.ficha--plana { background: transparent; border-color: var(--linea); }
.ficha--hundida { background: var(--papel-hundido); border-color: transparent; }
.ficha--acento { border-color: var(--acento-linea); background: var(--acento-velo); }
.ficha--compacta { padding: var(--e4); }
.ficha--suelta { padding: var(--e6); }

.ficha__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
  flex-wrap: wrap;
}
.ficha__cabeza h2, .ficha__cabeza h3 { margin: 0; }
.ficha__pie {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  font-size: var(--t-s);
}

/* Lista reglada: el patrón de lista por defecto de AULA. Un filete de 1px
   entre elementos en lugar de una tarjeta por fila. */
.lista-reglada {
  list-style: none;
  margin: 0; padding: 0;
}
.lista-reglada > li {
  padding: var(--e4) 0;
  border-top: 1px solid var(--linea);
}
.lista-reglada > li:first-child { border-top: 0; padding-top: 0; }
.lista-reglada > li:last-child { padding-bottom: 0; }
.lista-reglada--densa > li { padding: var(--e3) 0; }
.lista-reglada--cajas > li {
  padding: var(--e4);
  margin: 0 calc(var(--e4) * -1);
  border-radius: var(--radio-2);
}
.lista-reglada--cajas > li:hover { background: var(--papel-hundido); }

/* Lista de pares dato/valor: la usan las fichas de persona y de convocatoria. */
.datos {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--e2) var(--e5);
  font-size: var(--t-s);
}
.datos dt {
  color: var(--tinta-suave);
  font-size: var(--t-xs);
}
.datos dd { margin: 0; color: var(--tinta); }
.datos--apilada { grid-template-columns: 1fr; gap: var(--e1); }
.datos--apilada dd + dt { margin-top: var(--e3); }

/* Cita / nota del tutor: filete lateral y serif. */
.cita {
  border-left: 2px solid var(--acento);
  padding: var(--e1) 0 var(--e1) var(--e4);
  font-family: var(--fuente-serif);
  font-size: var(--t4);
  line-height: 1.6;
  color: var(--tinta-media);
  margin: 0;
}


/* 11. Botones -------------------------------------------------------------
   Un solo botón de acento por vista. Los demás son de contorno o de texto.
   Altura mínima 40px (44px en táctil) para diana cómoda. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 40px;
  padding: var(--e2) var(--e4);
  font-family: var(--fuente-sans);
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.btn:hover { background: var(--papel-hundido); border-color: var(--tinta-suave); color: var(--tinta); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--tinta-inversa);
}
.btn--acento:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); color: var(--tinta-inversa); }

.btn--texto {
  background: transparent;
  border-color: transparent;
  color: var(--acento);
  padding-inline: var(--e2);
}
.btn--texto:hover { background: var(--acento-velo); border-color: transparent; color: var(--acento-fuerte); }

.btn--peligro {
  color: var(--error);
  border-color: var(--error-linea);
  background: transparent;
}
.btn--peligro:hover { background: var(--error-velo); border-color: var(--error); color: var(--error); }

.btn--grande { min-height: 48px; padding: var(--e3) var(--e5); font-size: var(--t-cuerpo); }
.btn--bloque { width: 100%; }
.btn--pequeno { min-height: 32px; padding: var(--e1) var(--e3); font-size: var(--t-xs); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--papel-hundido);
  border-color: var(--linea-fuerte);
  color: var(--tinta-media);
}

/* Grupo de botones unidos (paginación, segmentos). */
.grupo-btn { display: inline-flex; }
.grupo-btn .btn { border-radius: 0; margin-left: -1px; }
.grupo-btn .btn:first-child { border-radius: var(--radio-2) 0 0 var(--radio-2); margin-left: 0; }
.grupo-btn .btn:last-child { border-radius: 0 var(--radio-2) var(--radio-2) 0; }
.grupo-btn .btn[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel-alto);
  border-color: var(--tinta);
  z-index: 1;
}


/* 12. Formularios --------------------------------------------------------- */

.campo { display: block; margin-bottom: var(--e5); }
.campo:last-child { margin-bottom: 0; }

.campo > label,
.etiqueta {
  display: block;
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  color: var(--tinta);
  margin-bottom: var(--e2);
}
.campo__obligatorio { color: var(--error); font-weight: var(--peso-fuerte); }
.campo__opcional { color: var(--tinta-suave); font-weight: var(--peso-normal); }

/* Texto de ayuda: va antes del control, para que se lea antes de escribir. */
.campo__ayuda {
  font-size: var(--t-xs);
  color: var(--tinta-media);
  margin: calc(var(--e2) * -1 + -2px) 0 var(--e2);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="date"],
input[type="time"], input[type="number"], input[type="url"],
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: var(--e2) var(--e3);
  font-family: var(--fuente-sans);
  font-size: var(--t-cuerpo);
  color: var(--tinta);
  background: var(--papel-alto);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-2);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
select {
  appearance: none;
  padding-right: var(--e7);
  /* Flecha dibujada con gradiente cónico para no depender de imagen externa. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-velo);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--anillo-foco) solid var(--acento);
  outline-offset: 1px;
}
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: 1; }

input[readonly], input[disabled], select[disabled], textarea[disabled] {
  background: var(--papel-hundido);
  color: var(--tinta-media);
  cursor: not-allowed;
}

/* Campo con error: borde, icono y mensaje persistente en línea. Nunca un
   toast que desaparece: el mensaje se queda hasta que se corrige. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--error);
  border-width: 2px;
  background: var(--error-velo);
}
.campo__error {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  margin-top: var(--e2);
  font-size: var(--t-s);
  color: var(--error);
  font-weight: var(--peso-medio);
}
.campo__error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

/* Casillas y radios: diana grande y etiqueta clicable completa. */
.opcion {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--linea);
  border-radius: var(--radio-2);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--borde-control); background: var(--papel-alto); }
.opcion input { margin: 0; flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--acento); }
.opcion__texto { flex: 1; }
.opcion__titulo { font-weight: var(--peso-medio); display: block; }
.opcion__apoyo { font-size: var(--t-s); color: var(--tinta-media); display: block; margin-top: 2px; }
.opcion:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-velo);
}
.opcion:has(input:focus-visible) { outline: var(--anillo-foco) solid var(--acento); outline-offset: 2px; }

/* Opción en línea, sin caja: para filtros y listas cortas. */
.opcion--desnuda {
  border: 0;
  padding: var(--e1) 0;
  background: transparent;
}
.opcion--desnuda:hover { background: transparent; border: 0; }
.opcion--desnuda:has(input:checked) { background: transparent; }

/* Conmutador (switch) accesible: es un checkbox con apariencia propia. */
.conmutador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e3) 0;
  cursor: pointer;
}
.conmutador input {
  appearance: none;
  width: 44px; height: 24px;
  border-radius: var(--radio-pastilla);
  background: var(--papel-hundido);
  border: 1px solid var(--borde-control);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  transition: background var(--transicion), border-color var(--transicion);
}
.conmutador input::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--tinta-media);
  transition: transform var(--transicion), background var(--transicion);
}
.conmutador input:checked { background: var(--acento); border-color: var(--acento); }
.conmutador input:checked::after { transform: translateX(20px); background: var(--tinta-inversa); }
.conmutador input:focus-visible { outline: var(--anillo-foco) solid var(--acento); outline-offset: 2px; }
.conmutador__texto { flex: 1; }

/* Barra de filtros: chips, no una fila de selects grises. */
.filtros {
  display: flex;
  gap: var(--e3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e4);
}
.buscador { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.buscador input { padding-left: var(--e7); }
.buscador svg {
  position: absolute;
  left: var(--e3); top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--tinta-suave);
  pointer-events: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  padding: var(--e1) var(--e3);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  color: var(--tinta-media);
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pastilla);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.chip:hover { border-color: var(--borde-control); color: var(--tinta); }
.chip[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel-alto);
}
.chip__quitar { display: inline-flex; }
.chip__quitar svg { width: 12px; height: 12px; }


/* 13. Distintivos y estados ----------------------------------------------
   Regla del sistema: el estado nunca lo lleva solo el color. Todo distintivo
   tiene texto, y los críticos añaden además una forma (punto, aspa, reloj). */

.distintivo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: 2px var(--e2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  border-radius: var(--radio-1);
  border: 1px solid transparent;
  white-space: nowrap;
}
.distintivo svg { width: 12px; height: 12px; }

.distintivo--neutro { color: var(--neutro); background: var(--neutro-velo); border-color: var(--neutro-linea); }
.distintivo--exito  { color: var(--exito);  background: var(--exito-velo);  border-color: var(--exito-linea); }
.distintivo--aviso  { color: var(--aviso);  background: var(--aviso-velo);  border-color: var(--aviso-linea); }
.distintivo--error  { color: var(--error);  background: var(--error-velo);  border-color: var(--error-linea); }
.distintivo--info   { color: var(--info);   background: var(--info-velo);   border-color: var(--info-linea); }
.distintivo--acento { color: var(--acento); background: var(--acento-velo); border-color: var(--acento-linea); }

/* Distintivo de solo texto, sin fondo: para tablas muy densas. */
.distintivo--filete {
  background: transparent;
  border: 0;
  border-left: 3px solid currentColor;
  border-radius: 0;
  padding-left: var(--e2);
}

/* Punto de estado: acompaña siempre a un texto, nunca va solo. */
.punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Formas distintas por estado para no depender del color (daltonismo). */
.punto--cuadrado { border-radius: 1px; }
.punto--rombo { border-radius: 1px; transform: rotate(45deg); }
.punto--hueco { background: transparent; border: 2px solid currentColor; }

/* Distintivo de rol: contraste comprobado, a diferencia del sistema actual. */
.rol {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px var(--e2);
  border-radius: var(--radio-1);
  border: 1px solid;
  white-space: nowrap;
}
.rol--alumno    { color: var(--info);   background: var(--info-velo);   border-color: var(--info-linea); }
.rol--tutor     { color: var(--exito);  background: var(--exito-velo);  border-color: var(--exito-linea); }
.rol--gestor    { color: var(--acento); background: var(--acento-velo); border-color: var(--acento-linea); }
.rol--admin     { color: var(--error);  background: var(--error-velo);  border-color: var(--error-linea); }
.rol--inspector { color: var(--neutro); background: var(--neutro-velo); border-color: var(--neutro-linea); }


/* 14. Progreso ------------------------------------------------------------
   Barra fina, sin porcentaje gigante ni gamificación. Va siempre acompañada
   de una frase que dice qué queda, no cuánto falta para "ganar". */

.progreso {
  height: 4px;
  background: var(--papel-hundido);
  border-radius: var(--radio-pastilla);
  overflow: hidden;
}
.progreso__valor {
  height: 100%;
  background: var(--acento);
  border-radius: var(--radio-pastilla);
  transition: width 400ms ease-out;
}
.progreso--gruesa { height: 8px; }
.progreso--exito .progreso__valor { background: var(--exito); }
.progreso--aviso .progreso__valor { background: var(--aviso); }

.progreso-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--t-xs);
  color: var(--tinta-media);
  margin-bottom: var(--e2);
}
.progreso-linea strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* Progreso segmentado: un segmento por módulo. Se lee la estructura del curso
   de un vistazo sin abrir el temario. */
.progreso-modulos {
  display: flex;
  gap: 3px;
  height: 6px;
}
.progreso-modulos span {
  flex: 1;
  background: var(--papel-hundido);
  border-radius: 1px;
}
.progreso-modulos .completo { background: var(--exito); }
.progreso-modulos .curso    { background: var(--acento); }
.progreso-modulos .bloqueado {
  background: repeating-linear-gradient(
    45deg, var(--papel-hundido), var(--papel-hundido) 2px,
    var(--linea-fuerte) 2px, var(--linea-fuerte) 4px);
}

/* Anillo de progreso en SVG (portal del curso). */
.anillo { transform: rotate(-90deg); }
.anillo__pista { stroke: var(--papel-hundido); }
.anillo__valor { stroke: var(--acento); stroke-linecap: round; transition: stroke-dashoffset 500ms ease-out; }


/* 15. Tablas densas -------------------------------------------------------
   En escritorio: tabla real, con filete de 1px y cabecera pegajosa.
   En móvil (≤700px): cada fila se convierte en una ficha con etiquetas,
   generadas desde data-etiqueta. No es un scroll horizontal. */

.tabla-envoltorio { overflow-x: auto; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}
.tabla caption {
  text-align: left;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  padding-bottom: var(--e2);
}
.tabla th {
  text-align: left;
  font-size: var(--t-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding: var(--e2) var(--e3);
  border-bottom: 1px solid var(--linea-fuerte);
  background: var(--papel);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.tabla td {
  padding: var(--e3);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
  color: var(--tinta);
}
.tabla tbody tr:hover { background: var(--papel-alto); }
.tabla tbody tr[aria-selected="true"] { background: var(--acento-velo); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .compacta { width: 1%; white-space: nowrap; }

/* Fila en riesgo: filete lateral + distintivo, nunca fondo rojo a secas. */
.tabla tr.en-riesgo td:first-child { box-shadow: inset 3px 0 0 var(--error); }

/* Ordenación por columna */
.tabla th button {
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
}
.tabla th[aria-sort] button { color: var(--tinta); }
.tabla th button svg { width: 11px; height: 11px; }

/* Barra de selección múltiple. No invierte a negro: usa la superficie hundida
   con un filete de acento a la izquierda. Así se comporta igual en los dos
   temas sin necesitar reglas especiales de modo oscuro, que no se aplicarían
   cuando el tema viene de prefers-color-scheme y no de una elección explícita. */
.barra-seleccion {
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--papel-hundido);
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
  margin-bottom: var(--e3);
  font-size: var(--t-s);
  flex-wrap: wrap;
}
.barra-seleccion .btn {
  background: var(--papel-alto);
  min-height: 32px;
  font-size: var(--t-xs);
}

/* Paginación */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: var(--e4);
  font-size: var(--t-s);
  color: var(--tinta-media);
  flex-wrap: wrap;
}


/* 16. Avisos y bandas ----------------------------------------------------- */

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-left-width: 3px;
  border-radius: var(--radio-2);
  background: var(--papel-alto);
  font-size: var(--t-s);
}
.aviso__icono { flex-shrink: 0; margin-top: 2px; }
.aviso__icono svg { width: 18px; height: 18px; }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__titulo {
  font-weight: var(--peso-fuerte);
  font-family: var(--fuente-sans);
  font-size: var(--t-s);
  margin: 0 0 var(--e1);
  letter-spacing: 0;
}
.aviso p { margin-bottom: var(--e2); }
.aviso p:last-child { margin-bottom: 0; }

.aviso--info   { border-color: var(--info-linea);   border-left-color: var(--info);   background: var(--info-velo); }
.aviso--info .aviso__icono { color: var(--info); }
.aviso--exito  { border-color: var(--exito-linea);  border-left-color: var(--exito);  background: var(--exito-velo); }
.aviso--exito .aviso__icono { color: var(--exito); }
.aviso--aviso  { border-color: var(--aviso-linea);  border-left-color: var(--aviso);  background: var(--aviso-velo); }
.aviso--aviso .aviso__icono { color: var(--aviso); }
.aviso--error  { border-color: var(--error-linea);  border-left-color: var(--error);  background: var(--error-velo); }
.aviso--error .aviso__icono { color: var(--error); }

/* Banda superior de contexto (modo inspección, suplantación, aviso global). */
.banda {
  padding: var(--e2) var(--e5);
  font-size: var(--t-s);
  border-bottom: 1px solid;
  display: flex;
  align-items: center;
  gap: var(--e3);
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
.banda--info { background: var(--info-velo); border-bottom-color: var(--info-linea); color: var(--info); }
.banda--aviso { background: var(--aviso-velo); border-bottom-color: var(--aviso-linea); color: var(--aviso); }
.banda strong { font-weight: var(--peso-fuerte); }


/* 17. Estados vacíos, carga y error --------------------------------------- */

/* Estado vacío: dice qué es esto, por qué está vacío y qué hacer ahora. */
.vacio {
  text-align: center;
  padding: var(--e8) var(--e5);
  max-width: 460px;
  margin: 0 auto;
}
.vacio__dibujo { margin: 0 auto var(--e4); color: var(--linea-fuerte); }
.vacio h3 { margin-bottom: var(--e2); font-size: var(--t3); }
.vacio p { color: var(--tinta-media); font-size: var(--t-s); margin-bottom: var(--e4); }

/* Esqueleto de carga. Se anuncia con aria-busy en el contenedor. */
.esqueleto {
  background: linear-gradient(90deg,
    var(--papel-hundido) 0%, var(--linea) 50%, var(--papel-hundido) 100%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--radio-1);
  color: transparent;
  user-select: none;
}
@keyframes brillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.esqueleto--linea { height: 12px; margin-bottom: var(--e2); }
.esqueleto--titulo { height: 22px; width: 46%; margin-bottom: var(--e3); }
.esqueleto--bloque { height: 96px; }
.esqueleto--circulo { border-radius: 50%; }

/* Permiso denegado: tono neutro, salida clara. Nunca culpabiliza. */
.denegado {
  text-align: center;
  padding: var(--e8) var(--e5);
  max-width: 520px;
  margin: 0 auto;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel-alto);
}
.denegado__icono { color: var(--tinta-suave); margin: 0 auto var(--e4); }


/* 18. Pestañas, acordeones, menús y diálogos ------------------------------ */

/* Pestañas: subrayado, no cápsulas. role="tablist" + flechas del teclado. */
.pestanas {
  display: flex;
  gap: var(--e5);
  border-bottom: 1px solid var(--linea-fuerte);
  margin-bottom: var(--e5);
  /* Desplazable cuando no caben, pero sin barra de desplazamiento visible:
     en escritorio siempre caben y la barra ensuciaba el filete inferior.
     El teclado sigue llegando a todas con las flechas del tablist. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--e3) 0;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--t-s);
  font-weight: var(--peso-medio);
  color: var(--tinta-media);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
}
.pestanas [role="tab"]:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); }
.pestanas [role="tab"][aria-selected="true"] {
  color: var(--tinta);
  font-weight: var(--peso-fuerte);
  border-bottom-color: var(--acento);
}
.pestanas [role="tab"] .cuenta {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
[role="tabpanel"]:focus-visible { outline: var(--anillo-foco) solid var(--acento); outline-offset: 4px; }

/* Acordeón sobre <details>: teclado y semántica gratis. */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon > summary {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) 0;
  cursor: pointer;
  list-style: none;
  font-weight: var(--peso-medio);
}
.acordeon > summary::-webkit-details-marker { display: none; }
.acordeon > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--tinta-suave);
  border-bottom: 1.5px solid var(--tinta-suave);
  transform: rotate(45deg);
  transition: transform var(--transicion);
  flex-shrink: 0;
}
.acordeon[open] > summary::after { transform: rotate(-135deg); }
.acordeon__cuerpo { padding: 0 0 var(--e5); }

/* Diálogo modal (se muestra estático en el mockup con .abierto). */
.velo {
  position: fixed;
  inset: 0;
  background: var(--papel-velo);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e5);
  z-index: 150;
}
.velo[hidden] { display: none; }
.dialogo {
  background: var(--papel-alto);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-dialogo);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
}
.dialogo--ancho { max-width: 760px; }
.dialogo__cabeza {
  padding: var(--e5) var(--e5) var(--e4);
  border-bottom: 1px solid var(--linea);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e4);
}
.dialogo__cuerpo { padding: var(--e5); }
.dialogo__pie {
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--linea);
  display: flex;
  justify-content: flex-end;
  gap: var(--e3);
  flex-wrap: wrap;
  background: var(--papel-hundido);
  border-radius: 0 0 var(--radio-3) var(--radio-3);
}
/* En una confirmación destructiva el botón por defecto es «Cancelar». */
.dialogo__pie--destructivo { justify-content: space-between; }


/* 19. Avatares e iconografía ---------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--papel-hundido);
  border: 1px solid var(--linea-fuerte);
  color: var(--tinta-media);
  font-family: var(--fuente-serif);
  font-size: var(--t-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
}
.avatar--s { width: 28px; height: 28px; font-size: var(--t-xs); }
.avatar--l { width: 56px; height: 56px; font-size: var(--t3); }
.avatar--xl { width: 88px; height: 88px; font-size: var(--t2); }
.avatar--acento { background: var(--acento-velo); border-color: var(--acento-linea); color: var(--acento); }
.avatar--tutor { background: var(--exito-velo); border-color: var(--exito-linea); color: var(--exito); }

.persona {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}
.persona__nombre { font-weight: var(--peso-medio); display: block; }
.persona__apoyo { font-size: var(--t-xs); color: var(--tinta-suave); display: block; }

.icono { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; }
.icono--l { width: 20px; height: 20px; }


/* 20. Aula: portal del curso, temario y visor de lección -------------------
   Aquí es donde esta dirección de arte tiene que brillar. El contenido manda:
   medida de línea controlada, serif de lectura, cero cromo alrededor. */

/* Disposición del aula: temario contextual a la izquierda, contenido a la
   derecha. La barra lateral SOLO existe dentro de un curso. */
.aula {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
}
.aula__lateral {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--linea-fuerte);
  padding: var(--e5) var(--e4) var(--e7) var(--e5);
  background: var(--papel);
  scrollbar-width: thin;
}
.aula__contenido { padding: var(--e5) var(--e7) var(--e9); min-width: 0; }

/* Cabecera del curso dentro del aula. */
.curso-cabeza {
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e4);
}
.curso-cabeza__titulo {
  font-size: var(--t4);
  line-height: 1.3;
  margin-bottom: var(--e2);
}
.curso-cabeza__conv {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
}

/* Temario: árbol de módulos y lecciones. Los estados se leen por icono +
   texto, y las bloqueadas dicen desde cuándo estarán disponibles. */
.temario { list-style: none; margin: 0; padding: 0; }
.temario__modulo { margin-bottom: var(--e4); }
.temario__modulo-cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  width: 100%;
  background: none;
  border: 0;
  padding: var(--e2) 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--tinta);
}
.temario__num {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  padding-top: 2px;
  flex-shrink: 0;
  min-width: 1.6em;
}
.temario__modulo-titulo {
  font-family: var(--fuente-serif);
  font-size: var(--t-s);
  font-weight: var(--peso-fuerte);
  line-height: 1.35;
  flex: 1;
}
.temario__lecciones { list-style: none; margin: var(--e1) 0 0; padding: 0 0 0 var(--e5); }
.temario__lecciones li { position: relative; }

.temario__enlace {
  display: flex;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e2) var(--e2) var(--e2) var(--e2);
  margin-left: calc(var(--e2) * -1);
  font-size: var(--t-s);
  color: var(--tinta-media);
  text-decoration: none;
  border-radius: var(--radio-2);
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.temario__enlace:hover { background: var(--papel-hundido); color: var(--tinta); }
.temario__enlace[aria-current="page"] {
  background: var(--acento-velo);
  color: var(--tinta);
  font-weight: var(--peso-medio);
  border-left-color: var(--acento);
}
.temario__marca {
  flex-shrink: 0;
  width: 16px; height: 16px;
  margin-top: 1px;
}
.temario__marca--completa { color: var(--exito); }
.temario__marca--curso    { color: var(--acento); }
.temario__marca--pendiente { color: var(--tinta-suave); }
.temario__marca--bloqueada { color: var(--tinta-suave); }
.temario__enlace--bloqueada { color: var(--tinta-suave); cursor: not-allowed; }
.temario__enlace--bloqueada:hover { background: transparent; color: var(--tinta-suave); }
.temario__nota {
  display: block;
  font-size: var(--t-micro);
  color: var(--tinta-suave);
  margin-top: 1px;
}

/* Visor de lección: la columna de lectura. */
.leccion { max-width: var(--medida-lectura); }
.leccion__kicker {
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e3);
}
.leccion__titulo {
  font-size: var(--t1);
  margin-bottom: var(--e3);
}
.leccion__ficha {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  padding-bottom: var(--e5);
  margin-bottom: var(--e6);
  border-bottom: 1px solid var(--linea);
}
.leccion__ficha span { display: inline-flex; align-items: center; gap: var(--e1); }

/* Cuerpo del contenido: serif, interlínea generosa, ritmo vertical constante. */
.contenido {
  font-family: var(--fuente-serif);
  font-size: var(--t-lectura);
  line-height: var(--interlinea-lectura);
  color: var(--tinta);
}
.contenido > * + * { margin-top: var(--e5); }
.contenido p { margin: 0; }
.contenido h2 {
  font-size: var(--t2);
  margin-top: var(--e8);
  padding-top: var(--e2);
}
.contenido h3 { font-size: var(--t3); margin-top: var(--e7); }
.contenido h2 + p, .contenido h3 + p { margin-top: var(--e3); }
.contenido ul, .contenido ol { margin: 0; padding-left: var(--e5); }
.contenido li + li { margin-top: var(--e2); }
.contenido strong { font-weight: var(--peso-fuerte); }
.contenido a { text-decoration-color: var(--acento); }

/* Figura: imagen con pie. La imagen puede desbordar la medida de lectura. */
.contenido figure { margin: 0; }
.contenido figure img,
.contenido figure svg {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio-2);
  display: block;
}
.contenido figcaption {
  font-family: var(--fuente-sans);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  line-height: 1.5;
  margin-top: var(--e2);
  padding-left: var(--e3);
  border-left: 2px solid var(--linea-fuerte);
}
/* Sangrado: la figura se sale un poco de la medida para dar aire editorial. */
.desbordada { margin-inline: calc(var(--e6) * -1); }

/* Bloque destacado dentro de la lección (definición, recuerda, normativa). */
.destacado {
  font-family: var(--fuente-sans);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  padding: var(--e4) var(--e5);
  background: var(--papel-alto);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-2);
}
.destacado__rotulo {
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: var(--peso-fuerte);
  color: var(--acento);
  margin-bottom: var(--e2);
  display: block;
}
.destacado--normativa { border-left-color: var(--info); }
.destacado--normativa .destacado__rotulo { color: var(--info); }
.destacado--atencion { border-left-color: var(--aviso); }
.destacado--atencion .destacado__rotulo { color: var(--aviso); }

/* Reproductor de vídeo (marcador estático, sin recursos externos). */
.video {
  position: relative;
  background: var(--papel-hundido);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.video__play {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--tinta-inversa);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.video__play svg { width: 24px; height: 24px; margin-left: 3px; }
.video__barra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e2) var(--e3);
  background: var(--papel-alto);
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  gap: var(--e3);
  font-size: var(--t-xs);
  color: var(--tinta-media);
}

/* Bloque interactivo: autocomprobación dentro de la lección, sin puntuar. */
.interactivo {
  font-family: var(--fuente-sans);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  padding: var(--e5);
  background: var(--papel-alto);
}
.interactivo__enunciado {
  font-family: var(--fuente-serif);
  font-size: var(--t4);
  margin-bottom: var(--e4);
  line-height: 1.5;
}

/* Pie del visor: anterior / siguiente y marcar como completada. */
.leccion__pie {
  margin-top: var(--e8);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea-fuerte);
  max-width: var(--medida-lectura);
}
.paso {
  display: flex;
  gap: var(--e4);
  justify-content: space-between;
  margin-top: var(--e5);
}
.paso a {
  flex: 1;
  display: block;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  text-decoration: none;
  color: var(--tinta);
  transition: border-color var(--transicion);
}
.paso a:hover { border-color: var(--acento); }
.paso__dir {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: 2px;
}
.paso__titulo { font-family: var(--fuente-serif); font-weight: var(--peso-fuerte); font-size: var(--t-s); line-height: 1.35; }
.paso a.paso--fin { text-align: right; }

/* Barra de progreso de lectura fija arriba del contenido. */
.lectura-progreso {
  position: sticky;
  top: 0;
  height: 3px;
  background: var(--papel-hundido);
  z-index: 40;
}
.lectura-progreso span { display: block; height: 100%; background: var(--acento); }


/* 21. Evaluación ---------------------------------------------------------- */

.pregunta {
  padding: var(--e6) 0;
  border-top: 1px solid var(--linea);
}
.pregunta:first-of-type { border-top: 0; padding-top: 0; }
.pregunta__num {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
  display: flex;
  gap: var(--e3);
  align-items: center;
}
.pregunta__enunciado {
  font-family: var(--fuente-serif);
  font-size: var(--t3);
  line-height: 1.45;
  margin-bottom: var(--e4);
  max-width: var(--medida-ancha);
}
.pregunta__opciones { display: grid; gap: var(--e2); max-width: var(--medida-ancha); }

/* Corrección: acierto y fallo llevan icono y texto, no solo color de fondo. */
.opcion--acierto { border-color: var(--exito); background: var(--exito-velo); }
.opcion--fallo   { border-color: var(--error); background: var(--error-velo); }
.opcion__veredicto {
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  margin-top: var(--e2);
}
.opcion--acierto .opcion__veredicto { color: var(--exito); }
.opcion--fallo .opcion__veredicto { color: var(--error); }

.retro {
  margin-top: var(--e3);
  padding: var(--e3) var(--e4);
  background: var(--papel-hundido);
  border-radius: var(--radio-2);
  font-size: var(--t-s);
  color: var(--tinta-media);
  border-left: 2px solid var(--linea-fuerte);
}
.retro strong { color: var(--tinta); }

/* Temporizador: discreto salvo cuando queda poco. */
.temporizador {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  font-family: var(--fuente-mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  padding: var(--e1) var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  color: var(--tinta-media);
}
.temporizador--urgente { color: var(--error); border-color: var(--error-linea); background: var(--error-velo); font-weight: var(--peso-fuerte); }

/* Rejilla de navegación entre preguntas. */
.mapa-preguntas { display: flex; flex-wrap: wrap; gap: var(--e1); }
.mapa-preguntas a {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-media);
  text-decoration: none;
}
.mapa-preguntas a:hover { border-color: var(--acento); color: var(--acento); }
.mapa-preguntas a.respondida { background: var(--papel-hundido); color: var(--tinta); border-color: var(--borde-control); }
.mapa-preguntas a.actual { background: var(--acento); border-color: var(--acento); color: var(--tinta-inversa); font-weight: var(--peso-fuerte); }
.mapa-preguntas a.marcada { border-color: var(--aviso); border-width: 2px; color: var(--aviso); }

/* Resultado corregido: la nota en serif, grande, sin celebración. */
.resultado {
  display: flex;
  align-items: center;
  gap: var(--e6);
  padding: var(--e6);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel-alto);
  flex-wrap: wrap;
}
.resultado__nota {
  font-family: var(--fuente-serif);
  font-size: var(--t-display);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.resultado--apto .resultado__nota { color: var(--exito); }
.resultado--no-apto .resultado__nota { color: var(--error); }
.resultado__detalle { flex: 1; min-width: 240px; }


/* 22. Comunicación: foros, hilos y mensajes ------------------------------- */

.hilo {
  display: flex;
  gap: var(--e4);
  padding: var(--e4) 0;
  border-top: 1px solid var(--linea);
  text-decoration: none;
  color: inherit;
}
.hilo:first-of-type { border-top: 0; }
.hilo__cuerpo { flex: 1; min-width: 0; }
.hilo__titulo {
  font-family: var(--fuente-serif);
  font-size: var(--t4);
  font-weight: var(--peso-fuerte);
  line-height: 1.35;
  margin-bottom: var(--e1);
  color: var(--tinta);
}
a.hilo:hover .hilo__titulo { color: var(--acento); }
.hilo__extracto {
  font-size: var(--t-s);
  color: var(--tinta-media);
  margin-bottom: var(--e2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hilo__meta {
  display: flex;
  gap: var(--e3);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  align-items: center;
}
.hilo--no-leido .hilo__titulo::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--acento);
  margin-right: var(--e2);
  vertical-align: 0.15em;
}

/* Mensaje de un hilo o de la mensajería privada. */
.mensaje {
  display: flex;
  gap: var(--e4);
  padding: var(--e5) 0;
  border-top: 1px solid var(--linea);
}
.mensaje:first-child { border-top: 0; padding-top: 0; }
.mensaje__cuerpo { flex: 1; min-width: 0; }
.mensaje__cabeza {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.mensaje__autor { font-weight: var(--peso-fuerte); }
.mensaje__texto { font-size: var(--t-cuerpo); line-height: 1.65; }
.mensaje__texto p + p { margin-top: var(--e3); }
.mensaje--respuesta { margin-left: var(--e7); }
.mensaje--tutor .mensaje__cuerpo {
  border-left: 2px solid var(--exito-linea);
  padding-left: var(--e4);
  margin-left: calc(var(--e4) * -1 + var(--e2));
}

/* Adjunto */
.adjunto {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  font-size: var(--t-xs);
  text-decoration: none;
  color: var(--tinta);
  background: var(--papel-alto);
}
.adjunto:hover { border-color: var(--acento); }
.adjunto svg { color: var(--tinta-suave); }
.adjunto__peso { color: var(--tinta-suave); }

/* Bandeja de conversaciones (mensajería privada) */
.bandeja {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  overflow: hidden;
  min-height: 520px;
  background: var(--papel-alto);
}
.bandeja__lista {
  border-right: 1px solid var(--linea-fuerte);
  overflow-y: auto;
  max-height: 640px;
  background: var(--papel);
}
.bandeja__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--e4);
  border: 0;
  border-bottom: 1px solid var(--linea);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--tinta);
  text-decoration: none;
}
.bandeja__item:hover { background: var(--papel-hundido); }
.bandeja__item[aria-current="true"] {
  background: var(--papel-alto);
  box-shadow: inset 3px 0 0 var(--acento);
}
.bandeja__conv { padding: var(--e5); overflow-y: auto; max-height: 640px; }
.bandeja__redactar {
  border-top: 1px solid var(--linea-fuerte);
  padding: var(--e4);
  background: var(--papel);
}

/* Burbujas del chat de convocatoria: solo aquí, porque es tiempo real. */
.chat-linea { display: flex; gap: var(--e3); margin-bottom: var(--e4); }
.chat-linea--propia { flex-direction: row-reverse; }
.chat-burbuja {
  max-width: 62ch;
  padding: var(--e3) var(--e4);
  border-radius: var(--radio-3);
  background: var(--papel-hundido);
  font-size: var(--t-s);
  line-height: 1.6;
}
.chat-linea--propia .chat-burbuja { background: var(--acento-velo); border: 1px solid var(--acento-linea); }
.chat-separador {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  margin: var(--e5) 0;
  position: relative;
}
.chat-separador::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--linea);
  z-index: 0;
}
.chat-separador span { background: var(--papel); padding: 0 var(--e3); position: relative; z-index: 1; }


/* 23. Administración: ficha de persona, cronología y seguimiento ----------
   La idea: leer la historia de una persona de un vistazo. La ficha se lee
   como una entrada de expediente, con cronología, no como un formulario. */

/* Encabezado de persona: retrato, nombre y hechos duros en una línea. */
.persona-cabeza {
  display: flex;
  gap: var(--e5);
  align-items: flex-start;
  padding-bottom: var(--e5);
  border-bottom: 1px solid var(--linea-fuerte);
  margin-bottom: var(--e6);
  flex-wrap: wrap;
}
.persona-cabeza__texto { flex: 1; min-width: 260px; }
.persona-cabeza h1 { margin-bottom: var(--e2); }
.persona-cabeza__hechos {
  display: flex;
  gap: var(--e2) var(--e4);
  flex-wrap: wrap;
  font-size: var(--t-s);
  color: var(--tinta-media);
  margin-top: var(--e3);
}
.persona-cabeza__hechos > span { display: inline-flex; align-items: center; gap: var(--e2); }
.persona-cabeza__hechos > span + span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--linea-fuerte);
  margin-right: var(--e2);
}

/* Tira de indicadores: cifras en serif separadas por filete, sin tarjetas. */
.indicadores {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel-alto);
  overflow: hidden;
}
.indicadores > div {
  flex: 1 1 160px;
  padding: var(--e4) var(--e5);
  border-left: 1px solid var(--linea);
  min-width: 0;
}
.indicadores > div:first-child { border-left: 0; }
.indicadores dt {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: var(--e2);
}
.indicadores dd { margin: 0; }
.indicadores .apunte { font-size: var(--t-xs); color: var(--tinta-suave); margin-top: var(--e1); display: block; }

/* Cronología: la historia de la persona en el centro, en orden. */
.cronologia { list-style: none; margin: 0; padding: 0; position: relative; }
.cronologia::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--linea-fuerte);
}
.cronologia > li {
  position: relative;
  padding: 0 0 var(--e5) var(--e6);
}
.cronologia > li:last-child { padding-bottom: 0; }
.cronologia__marca {
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--papel);
  border: 2px solid var(--borde-control);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta-media);
}
.cronologia__marca svg { width: 9px; height: 9px; }
.cronologia__marca--exito { border-color: var(--exito); color: var(--exito); }
.cronologia__marca--aviso { border-color: var(--aviso); color: var(--aviso); }
.cronologia__marca--error { border-color: var(--error); color: var(--error); }
.cronologia__marca--acento { border-color: var(--acento); color: var(--acento); }
.cronologia__fecha {
  font-size: var(--t-xs);
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.cronologia__texto { font-size: var(--t-s); line-height: 1.55; }
.cronologia__texto strong { font-weight: var(--peso-fuerte); }

/* Agrupador de días dentro de la cronología. */
.cronologia__dia {
  font-family: var(--fuente-sans);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: var(--e5) 0 var(--e3) var(--e6);
}
.cronologia__dia:first-child { margin-top: 0; }

/* Mini gráfico de barras de actividad (SVG en línea). */
.barras { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.barras span {
  flex: 1;
  background: var(--acento-linea);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}
.barras span.destacada { background: var(--acento); }
.barras span.nula { background: var(--linea); }

/* Ficha de riesgo: por qué esta persona está en riesgo, en texto. */
.motivo-riesgo {
  display: flex;
  gap: var(--e2);
  align-items: flex-start;
  font-size: var(--t-s);
  color: var(--tinta-media);
}
.motivo-riesgo svg { color: var(--aviso); flex-shrink: 0; margin-top: 2px; }

/* Vista previa de identidad visual (pantalla de configuración). */
.previsualizacion {
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  overflow: hidden;
}
.previsualizacion__barra {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linea);
  background: var(--papel-hundido);
  font-size: var(--t-xs);
  color: var(--tinta-media);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
}
.previsualizacion__lienzo { padding: var(--e5); background: var(--papel); }

/* Muestra de color del editor de marca. */
.muestra {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) 0;
}
.muestra__tinta {
  width: 40px; height: 40px;
  border-radius: var(--radio-2);
  border: 1px solid var(--linea-fuerte);
  flex-shrink: 0;
}
.muestra__valor {
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  color: var(--tinta-media);
}
.muestra__ratio {
  margin-left: auto;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* Rejilla de paleta del index (sistema de diseño vivo). */
.paleta { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--e3); }
.paleta__ficha {
  border: 1px solid var(--linea);
  border-radius: var(--radio-2);
  overflow: hidden;
}
.paleta__color { height: 64px; border-bottom: 1px solid var(--linea); }
.paleta__pie { padding: var(--e2) var(--e3); font-size: var(--t-xs); }
.paleta__nombre { font-weight: var(--peso-medio); display: block; }
.paleta__hex { font-family: var(--fuente-mono); color: var(--tinta-suave); }


/* 24. Movimiento ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* El esqueleto deja de brillar pero sigue siendo reconocible. */
  .esqueleto { background: var(--papel-hundido); animation: none; }
}


/* 25. Respuesta adaptable ------------------------------------------------- */

/* Escritorio grande: la columna de lectura se centra en el espacio sobrante en
   lugar de quedarse pegada al temario con un vacío a la derecha. */
@media (min-width: 1200px) {
  .leccion, .leccion__pie { margin-inline: auto; }
}
@media (min-width: 1440px) {
  .aula__contenido { padding-inline: var(--e8); }
}

/* Tablet y portátil pequeño */
@media (max-width: 1100px) {
  .con-margen,
  .con-margen--izquierda { grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pegajoso { position: static; }
}

@media (max-width: 900px) {
  .rejilla--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bandeja { grid-template-columns: minmax(0, 1fr); }
  .bandeja__lista { border-right: 0; border-bottom: 1px solid var(--linea-fuerte); max-height: 260px; }

  /* El temario del aula pasa a ser un desplegable sobre el contenido. */
  .aula { grid-template-columns: minmax(0, 1fr); }
  .aula__lateral {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--linea-fuerte);
    padding: var(--e4) var(--e5);
  }
  .aula__contenido { padding: var(--e5); }
  .desbordada { margin-inline: 0; }
}

/* Tabla densa → fichas. Cada celda muestra su etiqueta desde data-etiqueta. */
@media (max-width: 700px) {
  .tabla-fichas thead { display: none; }
  .tabla-fichas, .tabla-fichas tbody, .tabla-fichas tr, .tabla-fichas td { display: block; width: 100%; }
  .tabla-fichas tr {
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-3);
    padding: var(--e4);
    margin-bottom: var(--e3);
    background: var(--papel-alto);
  }
  .tabla-fichas tr.en-riesgo { border-left: 3px solid var(--error); }
  .tabla-fichas td {
    border: 0;
    padding: var(--e1) 0;
    display: flex;
    gap: var(--e4);
    justify-content: space-between;
    align-items: baseline;
    text-align: right;
  }
  .tabla-fichas td::before {
    content: attr(data-etiqueta);
    font-size: var(--t-micro);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-suave);
    text-align: left;
    flex-shrink: 0;
  }
  /* La primera celda hace de título de la ficha. */
  .tabla-fichas td.principal {
    display: block;
    text-align: left;
    padding-bottom: var(--e3);
    margin-bottom: var(--e2);
    border-bottom: 1px solid var(--linea);
  }
  .tabla-fichas td.principal::before { display: none; }
  .tabla-fichas td.acciones { justify-content: flex-start; padding-top: var(--e3); }
  .tabla-fichas td.acciones::before { display: none; }
  .tabla tbody tr:hover { background: var(--papel-alto); }
}

/* Móvil */
@media (max-width: 768px) {
  .cabecera__fila { padding: var(--e2) var(--e4); gap: var(--e3); }
  .contenedor { padding-inline: var(--e4); }
  .pie__fila { padding-inline: var(--e4); }
  .pagina { padding: var(--e5) 0 var(--e8); }

  /* Navegación principal: se despliega en vertical desde el botón. */
  .nav-movil-boton { display: inline-flex; }
  .nav-principal {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--papel-alto);
    border-bottom: 1px solid var(--linea-fuerte);
    box-shadow: var(--sombra-menu);
    padding: var(--e3) var(--e4) var(--e5);
    z-index: 65;
  }
  .nav-principal[data-abierta="true"] { display: block; }
  .nav-principal > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-principal a, .nav-principal .nav-grupo__disparador {
    padding: var(--e3) var(--e2);
    border-bottom: 1px solid var(--linea);
    width: 100%;
    justify-content: flex-start;
    font-size: var(--t-cuerpo);
  }
  .nav-principal a[aria-current="page"] {
    border-bottom-color: var(--linea);
    box-shadow: inset 3px 0 0 var(--acento);
    padding-left: var(--e3);
  }
  .nav-grupo__panel {
    position: static;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 var(--e2) var(--e4);
    min-width: 0;
  }

  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }
  .indicadores > div { flex-basis: 50%; border-left: 0; border-top: 1px solid var(--linea); }
  .indicadores > div:nth-child(-n+2) { border-top: 0; }
  .indicadores > div:nth-child(2n) { border-left: 1px solid var(--linea); }
  .pagina-cabeza { align-items: flex-start; flex-direction: column; gap: var(--e3); }
  .mensaje--respuesta { margin-left: var(--e4); }
  .paso { flex-direction: column; }
  .resultado { gap: var(--e4); }
  /* Diana táctil mayor en móvil. */
  .btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .contenedor { padding-inline: var(--e3); }
  .ficha { padding: var(--e4); }
  .ficha--suelta { padding: var(--e4); }
  .aula__contenido { padding: var(--e4); }
  .aula__lateral { padding: var(--e4); }
  .indicadores > div { flex-basis: 100%; border-left: 0; border-top: 1px solid var(--linea); }
  .indicadores > div:first-child { border-top: 0; }
  .indicadores > div:nth-child(2n) { border-left: 0; }
  .mk-barra__fila { padding: var(--e2) var(--e3); }
}

/* Impresión: el expediente de una persona y el visor de lección deben poder
   imprimirse para inspección sin cromo de interfaz. */
@media print {
  .mk-barra, .mk-mostrar, .cabecera, .pie, .aula__lateral,
  .pagina-cabeza__acciones, .filtros { display: none !important; }
  body { background: #FFF; color: #000; }
  .ficha, .indicadores { border-color: #999; }
  a { color: #000; text-decoration: underline; }
  .aula { grid-template-columns: 1fr; }
}