/**
 * Sistema de diseño.
 *
 * No hay un solo color escrito acá. Todo sale de las variables que el módulo de Identidad
 * inyecta en cada carga, de modo que la paleta de una universidad reordena la plataforma
 * entera sin tocar este archivo.
 *
 * Lo que sí se decide acá —y no se le pregunta al cliente— es la densidad: escala
 * tipográfica, ritmo vertical y radios. El prototipo dejaba configurable el padding de los
 * ítems del menú, que es una decisión de diseño del producto y mal puesta rompe la interfaz.
 */

/* ── Escala y ritmo ─────────────────────────────────────────────────────── */
:root {
  /* Tipografía. El cuerpo va a 15 px: las plataformas de formación son densas —Coursera
     usa 14— y a 16 la lista de un curso de sesenta actividades no cabe en pantalla. */
  --t-xs:   11.5px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-md:   17px;
  --t-lg:   22px;
  --t-xl:   30px;

  --lh-apretado: 1.2;
  --lh-normal:   1.45;
  --lh-lectura:  1.65;

  /* Ritmo vertical. Ocho múltiplos, ni uno más: cuando hay doce, cada quien elige otro. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  --ancho-lectura: 65ch;
  /* 1200 dejaba 360 px de margen a cada lado en una pantalla de 1920 —media pantalla
     vacía en el catálogo y en la analítica, que son las que más ancho piden—. El texto no
     se estira con esto: la lectura sigue acotada a 65 caracteres allí donde importa. */
  --ancho-pagina: 1440px;
}

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

/* `hidden` gana siempre. Sin esto, cualquier regla que declare un `display` —como
   `form { display: flex }`— lo anula, y los plegables aparecen abiertos. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fuente, system-ui, sans-serif);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--texto, #0F1525);
  background: var(--fondo, #F4F6FA);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos, var(--fuente));
  line-height: var(--lh-apretado);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-xl); font-weight: 700; }
h2 { font-size: var(--t-lg); font-weight: 700; }
h3 { font-size: var(--t-md); font-weight: 600; }

p { margin: 0; max-width: var(--ancho-lectura); }

a { color: var(--color-primario); text-decoration: none; }
a:hover { color: var(--color-primario-fuerte); text-decoration: underline; }

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

/* Foco visible en todo lo que se puede alcanzar con el teclado. */
:focus-visible {
  outline: 2px solid var(--color-primario);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Estructura ─────────────────────────────────────────────────────────── */
/* La barra tiene sus propios tokens y no hereda superficie y texto: es justo lo que
   distingue un estilo visual del otro. Vector la quiere oscura permanente —la navegación
   deja de competir con el contenido— y Claustro blanca, porque sobre columnas de papel
   una barra negra parte la pantalla en dos. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  height: var(--barra-alto, 60px);
  padding: 0 var(--e-5);
  background: var(--barra-fondo, var(--superficie));
  color: var(--barra-texto, var(--texto));
  border-bottom: 1px solid var(--barra-borde, var(--borde));
  position: sticky;
  top: 0;
  z-index: 10;
}

/* El buscador de la barra. Vive sobre los tokens de la barra —oscura en Vector, papel en
   Claustro— y por eso no puede usar los de superficie: sobre negro, un campo blanco es un
   agujero. */
.barra-buscador {
  display: flex; flex-direction: row; align-items: center; gap: var(--e-3);
  height: 38px; padding: 0 var(--e-4); margin-left: auto;
  width: min(300px, 32vw);
  border-radius: var(--r-md);
  background: var(--barra-borde, var(--superficie-2));
  border: 1px solid var(--barra-borde, var(--borde));
}
.barra-buscador svg { flex-shrink: 0; color: var(--barra-texto-2, var(--texto-3)); }
/* La cadena de :not() repetida de la regla base de los campos: sin ella esa regla gana
   por especificidad y el campo se pinta como un input blanco de 48 px dentro de la barra
   oscura —un agujero en medio de la navegación—. */
.barra-buscador input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.hueco) {
  min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--barra-texto, var(--texto)); font-size: var(--t-sm);
}
.barra-buscador input::placeholder { color: var(--barra-texto-2, var(--texto-3)); }
.barra-buscador input:focus { outline: none; }
.barra-buscador:focus-within { border-color: var(--color-primario); }
@media (max-width: 900px) { .barra-buscador { display: none; } }

/* ── La marca en la barra ───────────────────────────────────────────────
   Un logotipo y, al lado, de quién es el campus. Son dos cosas y tienen que leerse como
   dos: sin separación se juntan en una sola frase —«SmartCampus Formación Continua
   UCSC»— que no significa nada. */

.brand { display: flex; align-items: center; gap: var(--e-3); color: inherit; }
.brand:hover { text-decoration: none; }

/* Proporcional a la barra y no fijo: la altura es un ajuste de cada universidad —64 px en
   Vector, 70 en Claustro— y un logotipo clavado en píxeles se descuadra en cuanto alguien
   la cambia. El 44 % dentro de sus topes deja aire arriba y abajo en cualquiera de las dos.
   Antes eran 40 px de letra pura sobre 64 de barra: el logotipo se comía la franja. */
.brand-logo {
  height: clamp(22px, calc(var(--barra-alto, 60px) * 0.44), 32px);
  width: auto;
}

.brand-nombre { font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700; letter-spacing: -0.01em; }

.container {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: var(--e-6) var(--e-5) var(--e-8);
}

.footer {
  max-width: var(--ancho-pagina);
  margin: 0 auto;
  padding: var(--e-6) var(--e-5);
  border-top: 1px solid var(--borde);
  font-size: var(--t-sm);
  color: var(--texto-3);
}
.footer p { margin: 0 0 var(--e-1); max-width: none; }

.migas { font-size: var(--t-sm); color: var(--texto-2); margin-bottom: var(--e-3); }
.meta  { font-size: var(--t-sm); color: var(--texto-2); display: flex; gap: var(--e-3); flex-wrap: wrap; }
.sub   { font-size: var(--t-base); color: var(--texto-2); margin-bottom: var(--e-5); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  /* 44 px de alto mínimo: es el objetivo táctil por debajo del cual se falla el toque. */
  min-height: 44px;
  padding: var(--e-3) var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--superficie-2); text-decoration: none; border-color: var(--borde-fuerte); }

.btn-principal {
  background: var(--color-primario);
  border-color: var(--color-primario);
  color: var(--sobre-primario);
}
.btn-principal:hover { background: var(--color-primario-fuerte); border-color: var(--color-primario-fuerte); }

.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Tarjetas ───────────────────────────────────────────────────────────── */
.grid-cursos {
  display: grid;
  /* auto-fit y no auto-fill: con auto-fill la rejilla reserva una pista vacía para la
     tarjeta que no existe, y tres cursos en una banda ancha dejaban un hueco a la derecha
     como si faltara algo por cargar. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e-4);
  margin-top: var(--e-5);
}

.tarjeta-curso, .tarjeta-certificado {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--elevacion-1, var(--sombra-1));
}
.tarjeta-curso h2, .tarjeta-curso h3, .tarjeta-certificado h2 { font-size: var(--t-md); font-weight: 700; }
.tarjeta-curso p { font-size: var(--t-sm); color: var(--texto-2); flex-grow: 1; }
.tarjeta-curso .btn, .tarjeta-certificado .btn { align-self: flex-start; }

/* ── Barra de avance ────────────────────────────────────────────────────── */
/* display:block explícito: la barra se usa también como <span> dentro de filas en
   rejilla, y en línea ignora la altura —la barra desaparece sin que nada falle—. */
.barra {
  display: block;
  height: 6px;
  background: var(--borde);
  border-radius: var(--r-full);
  overflow: hidden;
}
.barra-relleno {
  display: block;
  height: 100%;
  background: var(--color-exito);
  border-radius: var(--r-full);
  transition: width .3s ease;
}

/* ── Aula ───────────────────────────────────────────────────────────────── */
/* El índice del curso es una sola columna de lectura: la cabecera manda arriba y las
   unidades caen debajo. Un grid de dos columnas acá dejaba media pantalla vacía. */
.aula { display: flex; flex-direction: column; gap: var(--e-6); }

/* La cabecera responde tres cosas de un vistazo: dónde estoy, cuánto llevo y qué sigue.
   La acción va arriba y no al final del temario, porque quien entra al aula vuelve a
   retomar y no a leer el índice completo. */
.aula-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--e-5);
  padding: var(--e-5) clamp(var(--e-4), 3vw, var(--e-6));
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--elevacion-1, var(--sombra-1));
}
.aula-cabecera-texto { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.aula-cabecera h1 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.025em; }

.aula-avance { display: flex; flex-direction: column; gap: var(--e-2); }
/* La barra no cruza la pantalla entera: a 1200 px una franja de borde a borde se lee como
   un separador y no como un dato. */
.aula-avance .barra { width: 100%; max-width: 420px; height: 8px; background: var(--superficie-2); border: 1px solid var(--borde); }
.aula-avance-texto { font-size: var(--t-sm); color: var(--texto-2); }
.aula-avance-nota { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
.aula-avance-texto strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.aula-cabecera-accion { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-2); min-width: 200px; }
.aula-siguiente { font-size: var(--t-xs); color: var(--texto-3); text-align: center; }
.aula-terminado {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--color-exito);
}

/* ── Unidades ──────────────────────────────────────────────────────────── */

.unidades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.unidad {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.unidad-cabecera {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.unidad-texto { min-width: 0; }
.unidad-cabecera h2 { font-size: var(--t-base); font-weight: 700; letter-spacing: -.01em; }
.unidad-cabecera p { font-size: var(--t-sm); color: var(--texto-2); margin-top: 2px; }
.unidad-numero {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primario); color: var(--sobre-primario);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
/* La cuenta de la unidad se pinta solo cuando está completa: el color aparece cuando
   significa algo, no en cada fila. */
.unidad-cuenta {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.unidad-cuenta.unidad-lista { color: var(--color-exito); }

/* ── Actividades ───────────────────────────────────────────────────────── */

.actividades { list-style: none; margin: 0; padding: var(--e-2) 0; display: flex; flex-direction: column; }

.actividad a {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 46px; padding: var(--e-2) var(--e-5);
  color: var(--texto-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.actividad a:hover { background: var(--superficie-2); color: var(--texto); }
.actividad-estado { color: var(--borde-fuerte); display: inline-flex; flex-shrink: 0; }
.actividad-tipo { display: inline-flex; align-items: center; color: var(--texto-3); flex-shrink: 0; }
.actividad-titulo { flex-grow: 1; font-size: var(--t-sm); min-width: 0; }
.actividad-cola { display: flex; align-items: center; gap: var(--e-3); flex-shrink: 0; }
.actividad-pct {
  font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}
/* La nota sí es un dato de peso, y se colorea por lo que dice. */
.actividad-nota {
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 2px var(--e-2); border-radius: var(--r-full);
  background: var(--superficie-2); color: var(--texto-2);
}
.actividad.completa .actividad-nota { background: var(--color-exito-suave); color: var(--color-exito); }
.actividad-etiqueta { font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }

/* Completada: el color aparece solo cuando significa algo. */
.actividad.completa .actividad-estado { color: var(--color-exito); }
.actividad.completa .actividad-titulo { color: var(--texto-3); }
/* Empezada y a medias: el filete marca dónde quedó sin gritar. */
.actividad.empezada a { border-left-color: var(--color-primario); }

@media (max-width: 640px) {
  .actividad-etiqueta { display: none; }
  .aula-cabecera-accion { min-width: 100%; }
}

/* ── Detalle de actividad ───────────────────────────────────────────────── */
.actividad-detalle { display: flex; flex-direction: column; gap: var(--e-4); }
.actividad-detalle .descripcion { color: var(--texto-2); line-height: var(--lh-lectura); }

.reproductor, .objeto-interactivo {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}
.objeto-interactivo {
  aspect-ratio: auto;
  /* Altura explícita, no min-height: un iframe con height:100% dentro de un contenedor sin
     altura declarada colapsa a su contenido y deja el marco medio vacío. */
  height: 620px;
  display: flex;
  border: 1px solid var(--borde);
  /* Los 53 objetos heredados tienen fondo blanco. En el skin oscuro saltaban como un
     recuadro encendido; el marco los enmarca como una hoja y baja el salto de luminancia.
     La alternativa —pedirle a cada objeto que respete el tema— exige tocar los 53. */
  background: var(--superficie-2);
  padding: var(--e-3);
}
.objeto-interactivo iframe { border-radius: var(--r-sm); background: #FFFFFF; }
.reproductor iframe { width: 100%; height: 100%; border: 0; display: block; }
.objeto-interactivo iframe { flex: 1 1 auto; width: 100%; border: 0; display: block; }

.lectura { line-height: var(--lh-lectura); max-width: var(--ancho-lectura); color: var(--texto-2); }

.progreso-actividad {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-2);
  border-radius: var(--r-md);
}
.progreso-actividad .barra { flex-grow: 1; }

.navegacion { display: flex; gap: var(--e-3); justify-content: space-between; margin-top: var(--e-4); }

/* ── Formularios ────────────────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: var(--e-3); align-items: stretch; }
/* Un botón no se estira al ancho del formulario salvo que se le pida. La excepción vale
   para cualquier botón, no solo para los de clase .btn: «Eliminar pregunta» va con
   .enlace y se estiraba a los mil cien píxeles del formulario, con lo que su texto
   quedaba centrado en medio de la página como si flotara suelto. */
form > .btn, form > button { align-self: flex-start; }
/* Pero en un formulario EN FILA el eje transversal es el vertical, y ahí «flex-start»
   deja de significar «no te estires» y pasa a significar «pégate al techo»: el botón
   quedaba a la altura de la etiqueta del campo y no del campo. Los formularios que se
   declaran en fila lo devuelven al pie, que es donde está el campo que acompaña. */
.nueva-unidad > .btn,
.nueva-unidad > button,
.fila-objeto > .btn,
.fila-objeto > button,
.gestion-cabecera form > .btn,
.gestion-cabecera form > button { align-self: flex-end; }

label { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); }

/* Los campos de formulario. Se excluye «.hueco» porque un hueco dentro de una frase no es
   un campo de formulario: va en línea, del ancho de la palabra que se espera, y las reglas
   de acá —44 px de alto, ancho completo— lo convertían en un bloque que parte el
   enunciado en tres líneas. Excluirlo es más honesto que pelear la especificidad de estos
   seis :not(), que ningún selector razonable supera. */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not(.hueco),
textarea, select {
  min-height: 44px;
  padding: var(--e-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-base);
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--color-primario); }
textarea { min-height: 90px; resize: vertical; }

.alerta {
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  background: var(--color-acento-suave);
  color: var(--color-acento-fuerte);
  font-size: var(--t-sm);
  font-weight: 500;
}
.alerta-ok { background: var(--color-exito-suave); color: var(--color-exito); }

/* ── Evaluación ─────────────────────────────────────────────────────────── */
/* Ancho acotado: a 1200 px las opciones quedaban a la izquierda con media pantalla
   vacía a la derecha, y el ojo tenía que saltar del enunciado a la primera opción. */
.evaluacion, .evaluacion-portada, .resultado {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  max-width: 760px;
}
.evaluacion-cabecera { display: flex; flex-direction: column; gap: var(--e-1); }

.condiciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  margin: 0;
}
.condiciones dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-weight: 700; }
.condiciones dd { margin: var(--e-1) 0 0; font-size: var(--t-base); font-weight: 600; }

.item {
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  padding: var(--e-5);
  margin: 0;
  background: var(--superficie);
}
/* El legend flotado deja de partir el borde superior del fieldset — con `display: flex`
   en el padre el float se ignora y el recuadro sale cortado alrededor del enunciado. */
/* Lo que sigue al enunciado baja debajo, no a su lado.
   El legend va flotado —es el truco para que un <legend> se comporte como bloque— y sin
   limpiar el float, lo siguiente fluye en el espacio libre a su derecha: cero píxeles. Se
   notaba solo en los tipos cuyo primer elemento es un contenedor sin ancho propio, como el
   campo numérico, que aparecía aplastado contra el borde de la tarjeta. */
.item legend ~ * { clear: both; }

.item legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--e-3);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: var(--lh-normal);
}
.item::after { content: ''; display: block; clear: both; }
.item .numero { color: var(--texto-3); font-variant-numeric: tabular-nums; margin-right: var(--e-2); }
.item .pista { font-size: var(--t-xs); color: var(--texto-3); }

/* Cada opción es una fila con caja y no un radio suelto sobre el fondo: el área que se
   pulsa tiene que verse, y en una lista de cuatro sin marco no se sabe dónde acaba una
   opción y empieza la siguiente. */
.opcion {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 46px;
  padding: var(--e-2) var(--e-4);
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--superficie);
  font-weight: 400;
  color: var(--texto);
  cursor: pointer;
}
.opcion + .opcion { margin-top: var(--e-2); }
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion:has(input:checked) { border-color: var(--color-primario); background: var(--color-primario-suave); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
.opcion input { width: 18px; height: 18px; accent-color: var(--color-primario); }

.cronometro { font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--texto-2); }
.cronometro.urgente { color: var(--color-acento); font-weight: 600; }

.nota { display: flex; align-items: baseline; gap: var(--e-3); margin: 0; }
.nota strong { font-family: var(--fuente-titulos); font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.nota.aprobado strong { color: var(--color-exito); }
.nota.reprobado strong { color: var(--color-acento); }
.nota span { font-size: var(--t-sm); color: var(--texto-2); }

.revision { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.revision li { padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.revision .enunciado { font-weight: 600; }
/* El veredicto de cada pregunta va en pastilla y no en versalitas sueltas: es una
   etiqueta —«Correcta», «Parcialmente correcta · 1 de 2»— y en mayúsculas de color
   competía con el enunciado que va justo debajo. */
.revision .rev-fallo {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 700;
  margin-bottom: var(--e-3);
}
.revision .retro { font-size: var(--t-sm); color: var(--texto-2); margin-top: var(--e-2); line-height: var(--lh-lectura); }
.revision .correcta   .rev-fallo { background: var(--color-exito-suave); color: var(--color-exito); }
.revision .incorrecta .rev-fallo { background: var(--color-acento-suave); color: var(--color-acento-fuerte); }
.revision .parcial    .rev-fallo { background: var(--color-primario-suave); color: var(--color-primario); }
.revision .anulada    .rev-fallo { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
/* Una franja al borde: en una lista larga el estado se lee sin leer la etiqueta. */
.revision li { border-left-width: 3px; }
.revision .correcta   { border-left-color: var(--color-exito); }
.revision .incorrecta { border-left-color: var(--color-acento); }
.revision .parcial, .revision .anulada { border-left-color: var(--borde-fuerte); }

/* ── Certificados ───────────────────────────────────────────────────────── */
.folio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-sm); color: var(--texto-3); }

.requisitos { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-sm); }
.requisitos li { display: flex; align-items: center; gap: var(--e-2); color: var(--texto-2); }
.requisitos .listo { color: var(--color-exito); }

.verificacion-publica { max-width: 560px; margin: var(--e-7) auto; display: flex; flex-direction: column; gap: var(--e-5); }
/* El dictamen de la verificación. Se llamaba «.veredicto», igual que el de cada pregunta
   de una evaluación: este padding caía sobre aquellos párrafos. */
.verif-fallo { padding: var(--e-5); border-radius: var(--r-lg); }
.verif-fallo h1 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.verif-fallo p { font-size: var(--t-sm); }
.verif-fallo.autentico { background: var(--color-exito-suave); color: var(--color-exito); }
.verif-fallo.anulado, .verif-fallo.invalido { background: var(--color-acento-suave); color: var(--color-acento-fuerte); }

.datos-certificado {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--e-3) var(--e-5);
  margin: 0;
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
}
.datos-certificado dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--texto-3); font-weight: 700; }
.datos-certificado dd { margin: 0; font-size: var(--t-base); }

/* ── Personalización ────────────────────────────────────────────────────── */
.ajustes { display: flex; flex-direction: column; gap: var(--e-6); }
.grupo {
  padding: var(--e-5);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.grupo h2 { font-family: var(--fuente-titulos); font-size: var(--t-lg); letter-spacing: -.022em; }
.grupo-desc { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-normal); max-width: 84ch; }
.grupo .acciones { margin-top: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.campo { display: flex; flex-direction: column; gap: var(--e-1); }
.color-muestra { display: flex; align-items: center; gap: var(--e-3); }
.color-muestra input[type="color"] { width: 56px; height: 44px; padding: 2px; cursor: pointer; }

/* ── El selector de estilo ───────────────────────────────────────────────
   El estilo se elige viéndolo: dos nombres en un desplegable no dicen qué cambia, y lo
   que cambia —tipografía, radios, profundidad, barra— es justo lo que una palabra no
   describe. Los colores y las formas de cada miniatura viven en skins.css. */
.skins { display: flex; gap: var(--e-4); flex-wrap: wrap; }
.skin-tarjeta {
  flex: 1 1 260px; min-width: 0;
  display: flex; flex-direction: column; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.skin-tarjeta:hover { border-color: var(--borde-fuerte); }
.skin-tarjeta:has(input:checked) { border-width: 2px; border-color: var(--color-primario); }
.skin-tarjeta:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* El radio no se pinta: la tarjeta entera es el control y el punto de al lado del nombre
   ya dice cuál está elegida. Sigue en el DOM y sigue recibiendo el foco. */
.skin-tarjeta input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* La miniatura: barra, índice y panel. Toma sus formas de --mini-*, que son las del
   estilo que representa, no las del que está activo. */
.skin-vista {
  display: flex; flex-direction: column; gap: 7px;
  height: 92px; padding: 12px; background: var(--mini-fondo);
}
.skin-vista-barra { display: block; height: 14px; border-radius: var(--mini-radio-sm); background: var(--mini-barra); }
.skin-claustro .skin-vista-barra { border: 1px solid var(--mini-borde); }
.skin-vista-cuerpo { display: flex; gap: 7px; flex-grow: 1; min-height: 0; }
.skin-vista-lado {
  width: 34%; border-radius: var(--mini-radio-sm);
  background: var(--mini-superficie); border: 1px solid var(--mini-borde);
  box-shadow: var(--mini-sombra);
}
.skin-vista-panel {
  flex-grow: 1; display: flex; align-items: flex-end; padding: 6px;
  border-radius: var(--mini-radio-sm);
  background: var(--mini-superficie); border: 1px solid var(--mini-borde);
  box-shadow: var(--mini-sombra);
}
.skin-vista-boton { display: block; width: 46px; height: 9px; border-radius: var(--mini-radio-sm); background: var(--mini-primario); }

.skin-datos { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); border-top: 1px solid var(--borde); }
.skin-nombre {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--mini-titulos); font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em;
}
.skin-punto {
  width: 17px; height: 17px; flex-shrink: 0; border-radius: var(--r-full);
  border: 1.5px solid var(--borde-fuerte); background: var(--superficie);
}
.skin-tarjeta:has(input:checked) .skin-punto { border: 5px solid var(--color-primario); }
.skin-texto { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-normal); }
.skin-pie {
  display: flex; align-items: center; gap: var(--e-3);
  margin-top: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--borde);
}
.skin-muestras { display: flex; gap: 4px; }
.skin-muestra { width: 18px; height: 18px; border-radius: var(--mini-radio-sm); }
.skin-muestra-primario { background: var(--mini-primario); }
.skin-muestra-acento { background: var(--mini-acento); }
.skin-muestra-exito { background: var(--mini-exito); }
.skin-letras { font-size: var(--t-xs); color: var(--texto-3); }

/* El modo, con su razón al lado: por qué los colores de marca se aclaran solos hay que
   leerlo al elegirlo, no en una ayuda tres campos más abajo. */
.modo-caja {
  display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  background: var(--color-primario-suave); color: var(--color-primario);
}
.modo-eleccion { display: flex; flex-direction: column; gap: var(--e-2); flex-grow: 1; }
.modo-rotulo { margin: 0; font-size: var(--t-xs); font-weight: 600; }
.modo-nota { margin: 0; font-size: var(--t-xs); line-height: var(--lh-normal); max-width: 46ch; }

.tarjetas-opcion-linea { gap: var(--e-2); }
.opcion-linea {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto-2);
  font-size: var(--t-sm); font-weight: 600;
}
.opcion-linea input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-linea:has(input:checked) { background: var(--color-primario); color: var(--sobre-primario); border-color: transparent; }
.opcion-linea:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* Vetada, no escondida: el cliente tiene que ver que el modo oscuro existe y por qué no
   puede elegirlo con este estilo. */
.opcion-vetada { opacity: .5; cursor: not-allowed; }

/* Los colores como muestras con su hexadecimal: un input[type=color] desnudo no dice qué
   color tiene guardado hasta que se abre. */
.muestras-color { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e-4); }
.muestra-color { display: flex; align-items: center; gap: var(--e-3); cursor: pointer; }
.muestra-color input[type="color"] {
  width: 38px; height: 38px; flex-shrink: 0; padding: 0; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--borde-fuerte);
}
.muestra-color-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.muestra-color-nombre { font-size: var(--t-sm); font-weight: 600; }
.muestra-color code { font-size: var(--t-xs); color: var(--texto-2); text-transform: uppercase; }

/* La casilla delante de su etiqueta, y la ayuda debajo ocupando el ancho: en una sola
   fila los tres se repartían en columnas estrechas y la etiqueta se partía. */
.campo-booleano { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.campo-booleano label { order: 2; font-weight: 500; }
.campo-booleano input[type="checkbox"] { order: 1; width: 20px; height: 20px; accent-color: var(--color-primario); flex-shrink: 0; }
.campo-booleano .ayuda { order: 3; flex-basis: 100%; }
.ayuda { font-size: var(--t-xs); color: var(--texto-3); margin: 0; }
/* La descripción del objeto elegido: es una cita de su contenido, no una instrucción. */
.objeto-descripcion {
  padding: var(--e-2) var(--e-3); border-left: 2px solid var(--borde-fuerte);
  color: var(--texto-2); line-height: var(--lh-lectura);
}
.vista-previa { max-height: 60px; width: auto; margin-top: var(--e-2); }

/* ── Catálogo ───────────────────────────────────────────────────────────── */
.ficha { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); max-width: 780px; }
.ficha .resumen { font-size: var(--t-md); color: var(--texto-2); line-height: var(--lh-lectura); }
.ficha .descripcion { line-height: var(--lh-lectura); color: var(--texto-2); }

.temario ul li { display: flex; gap: var(--e-2); font-size: var(--t-sm); color: var(--texto-2); }
.temario .tipo { color: var(--texto-3); font-size: var(--t-xs); }

.terminado { color: var(--color-exito); font-weight: 600; font-size: var(--t-sm); }
.advertencia { font-size: var(--t-sm); color: var(--texto-2); }
.sin-contenido { color: var(--texto-3); font-style: italic; }

/* ── Navegación ─────────────────────────────────────────────────────────── */
.nav-principal { display: flex; align-items: center; gap: var(--e-4); font-size: var(--t-sm); font-weight: 500; }
/* «Ingresar» separado del resto: no es una sección más del sitio, es la puerta —y va
   pegado a «Crear cuenta», que es su par. */
.nav-secundario { margin-left: var(--e-3); font-weight: 600; }
/* `:not(.btn)` no es cosmético: sin él, un botón dentro del menú recibe el color de los
   enlaces —dos clases contra una— y «Crear cuenta» salía en gris azulado sobre el azul del
   botón, ilegible. Es la colisión de especificidad clásica al meter un componente dentro
   de un contenedor que estiliza sus hijos por tipo. */
.nav-principal a:not(.btn) { color: var(--barra-texto-2, var(--texto-2)); }
.nav-principal a:not(.btn):hover { color: var(--barra-texto, var(--texto)); text-decoration: none; }
.form-salir { display: inline-flex; margin: 0; }
.enlace-salir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--barra-texto-2, var(--texto-3)); cursor: pointer;
}
.enlace-salir:hover { color: var(--barra-texto, var(--texto)); }
@media (max-width: 640px) {
  .topbar { height: auto; flex-direction: column; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); }
  .nav-principal { gap: var(--e-4); flex-wrap: wrap; }
  .container { padding: var(--e-5) var(--e-4) var(--e-7); }
}

/* ── Gestión ────────────────────────────────────────────────────────────── */
.gestion { display: flex; flex-direction: column; gap: var(--e-5); }
.gestion-estrecha { max-width: 620px; }

.gestion-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}
.gestion-cabecera form { flex-direction: row; }

.gestion-columnas { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: var(--e-6); align-items: start; }
@media (max-width: 960px) { .gestion-columnas { grid-template-columns: minmax(0, 1fr); } }
.gestion-columnas section { display: flex; flex-direction: column; gap: var(--e-4); }

.pastilla {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-full);
  font-size: var(--t-xs); font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde);
}
.pastilla-publicado, .pastilla-borrador, .pastilla-archivado { text-transform: capitalize; }
.pastilla-publicado { background: var(--color-exito-suave); color: var(--color-exito); border-color: transparent; }
.pastilla-borrador  { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; }
.pastilla-archivado { background: var(--superficie-2); color: var(--texto-3); }

/* Lo que falta para publicar, antes de que lo intente */
.revisar {
  padding: var(--e-4) var(--e-5); border-radius: var(--r-md);
  background: var(--color-acento-suave); color: var(--color-acento-fuerte);
}
.revisar h2 { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--e-2); }
.revisar ul { margin: 0; padding-left: var(--e-5); font-size: var(--t-sm); display: flex; flex-direction: column; gap: var(--e-1); }

/* Tabla */
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie); }
.celda-meta { font-size: var(--t-xs); color: var(--texto-3); margin-top: 2px; }
/* El flex va en el contenido, NO en el `<td>`: una celda con display:flex deja de ser
   celda —no participa en la altura de la fila y su borde inferior se dibuja según el
   contenido—, y de ahí las líneas de la tabla que se cortaban antes del borde y las filas
   de alturas desiguales. */
.acciones-fila > * { display: inline-flex; }
.acciones-fila { white-space: nowrap; }
.acciones-fila a + a { margin-left: var(--e-3); }

/* Estructura del curso */
.bloque-unidad {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.bloque-unidad > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-4) var(--e-4);
  border-bottom: 1px solid var(--borde); background: var(--superficie-2);
}
.bloque-unidad h3 { font-size: var(--t-sm); font-weight: 700; }

.lista-actividades { list-style: none; margin: 0; padding: 0; }
.lista-actividades > li { border-bottom: 1px solid var(--borde); }
.lista-actividades > li:last-child { border-bottom: none; }

.fila-actividad {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: 44px; padding: var(--e-2) var(--e-4);
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  color: var(--texto);
}
.fila-actividad:hover { background: var(--superficie-2); }
.fila-actividad .icono { color: var(--texto-3); display: inline-flex; }
.fila-actividad .nombre { flex-grow: 1; font-size: var(--t-sm); }
.fila-actividad .detalle { font-size: var(--t-xs); color: var(--texto-3); }
.fila-nueva { color: var(--color-primario); font-weight: 600; font-size: var(--t-sm); }

.plegable { padding: var(--e-4); background: var(--superficie-2); border-top: 1px solid var(--borde); }
.form-actividad, .nueva-unidad { gap: var(--e-3); }
.nueva-unidad { flex-direction: row; align-items: flex-end; gap: var(--e-3); }
.nueva-unidad .campo { flex-grow: 1; }

.campo-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); }
.acciones { display: flex; gap: var(--e-3); align-items: center; }

.enlace {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm);
  color: var(--color-primario); cursor: pointer; text-decoration: underline;
}
.enlace-peligro { color: var(--color-acento); }
.form-borrar { margin-top: var(--e-3); }
.vacio { color: var(--texto-2); }

/* ── Tipos de ítem ──────────────────────────────────────────────────────── */
.campo-numerico { display: flex; align-items: center; gap: var(--e-2); }
/* «flex: 0 1 220px» y no solo max-width: dentro de un contenedor flex el campo se
   encogía a su contenido —veintiséis píxeles, sin sitio ni para el número que se escribe—
   porque su base es «auto» y nada le decía de qué ancho partir. */
.respuesta-numerica { flex: 0 1 220px; min-width: 8ch; font-variant-numeric: tabular-nums; }
.campo-numerico .unidad { font-size: var(--t-sm); color: var(--texto-2); }

.emparejar { display: flex; flex-direction: column; gap: var(--e-2); }
.par {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e-3); align-items: center;
}
@media (max-width: 560px) { .par { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); } }
.par-izquierda { font-size: var(--t-sm); }

.ordenar { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: flex; flex-direction: column; gap: var(--e-2); }
.ordenar li {
  counter-increment: paso;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 44px; padding: var(--e-2) var(--e-3);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-sm);
}
.ordenar li::before {
  content: counter(paso);
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 50%;
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
.ordenar .paso { flex-grow: 1; font-size: var(--t-sm); }
.ordenar .mover { display: flex; gap: 2px; }
.btn-mover {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-sm);
  color: var(--texto-2); cursor: pointer;
}
.btn-mover:hover { background: var(--color-primario-suave); color: var(--color-primario); }

/* ── Banco de preguntas ─────────────────────────────────────────────────── */
.lista-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.lista-items > li { border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); overflow: hidden; }
.lista-items > li.con-problema { border-color: var(--color-acento); }
.lista-items > li.inactiva { opacity: .6; }

.fila-item {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: 44px; padding: var(--e-3) var(--e-4);
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: var(--texto);
}
.fila-item:hover { background: var(--superficie-2); }
.fila-item .nombre { flex-grow: 1; font-size: var(--t-sm); }
.fila-item .detalle { font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.pastilla-tipo {
  font-size: 10px; white-space: nowrap; flex-shrink: 0;
  /* Ancho mínimo y no fijo: alinea los enunciados en una columna sin recortar el nombre
     del tipo más largo, que es lo que hay que poder leer de un vistazo. */
  min-width: 124px; text-align: center;
}

.problemas-item {
  margin: 0; padding: var(--e-2) var(--e-4) var(--e-3) calc(var(--e-4) + var(--e-5));
  font-size: var(--t-xs); color: var(--color-acento);
  display: flex; flex-direction: column; gap: 2px;
}

/* ── Certificados: lista, explicación y formulario ───────────────────────── */

/* El formulario de alta es una tarjeta y no una columna suelta: convive con la lista y
   sin marco las dos columnas se leen como una sola pila de texto. */
.tarjeta-formulario {
  padding: var(--e-5);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
.tarjeta-formulario .acciones {
  margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--borde);
}

/* La explicación de al lado de la lista: es la primera pregunta de quien llega, y en
   tono de dato, no de aviso —no hay nada que arreglar—. */
.explica {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4); border-radius: var(--r-md);
  background: var(--color-primario-suave); color: var(--color-primario);
}
.explica > svg { flex-shrink: 0; margin-top: 2px; }
.explica h3 { font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700; margin: 0; color: inherit; }
.explica ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); font-size: var(--t-sm); }
.explica li { line-height: var(--lh-normal); }
.explica strong { color: inherit; }

/* Dos tarjetas en vez de un desplegable: la diferencia entre las opciones se lee sin
   abrir nada, que es justo lo que un <select> no deja hacer. */
.campo-tipo { border: 0; padding: 0; margin: 0; }
.campo-tipo legend { padding: 0; }
.tarjetas-opcion { display: flex; gap: var(--e-3); flex-wrap: wrap; }
.tarjeta-opcion {
  flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 13px 14px; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: var(--r-sm); background: var(--superficie);
}
.tarjeta-opcion:hover { border-color: var(--borde-fuerte); }
.tarjeta-opcion:has(input:checked) {
  border-color: var(--color-primario); background: var(--color-primario-suave);
}
.tarjeta-opcion:has(input:focus-visible) { outline: 2px solid var(--color-primario); outline-offset: 2px; }
/* El radio no se pinta: la tarjeta entera es el control, y el punto duplicaría la marca.
   Sigue en el DOM y sigue recibiendo el foco. */
.tarjeta-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tarjeta-opcion-titulo { font-size: var(--t-sm); font-weight: 600; color: var(--texto); }
.tarjeta-opcion-linea { font-size: var(--t-xs); color: var(--texto-2); line-height: var(--lh-normal); }

/* Pestañas de gestión: control segmentado sobre carril, no subrayado. Es la diferencia
   entre «qué estoy mirando» —una vista de un mismo conjunto— y «a dónde voy», que es lo
   que dicen las pestañas del catálogo del alumno. */
.pestanas-gestion {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px; background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md);
}
.pestanas-gestion a {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 13px; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); text-decoration: none;
}
.pestanas-gestion a:hover { color: var(--texto); }
.pestanas-gestion a.activa {
  background: var(--superficie); color: var(--texto); font-weight: 700;
  box-shadow: var(--sombra-1);
}
.pestanas-gestion a span { font-weight: 500; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.pestanas-gestion a.activa span { color: var(--texto-2); }

/* La fila de pestañas y buscador: una vista y una aguja, en la misma línea. */
.filtros-gestion {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}
.filtros-gestion .campo-busqueda { width: 300px; max-width: 100%; }
.filtros-cuenta { font-size: var(--t-sm); color: var(--texto-2); margin: 0; }

/* El banco como una sola caja con rótulos de columna. Con treinta y ocho preguntas, las
   tarjetas sueltas dejan de leerse como una tabla y no se puede recorrer una columna. */
.lista-items-caja {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.lista-items-cabecera {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--superficie-2); border-bottom: 1px solid var(--borde);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2);
}
.lista-items-cabecera .col-tipo { width: 124px; flex-shrink: 0; }
.lista-items-cabecera .col-enunciado { flex-grow: 1; }
.lista-items-cabecera .col-emitidos { width: 84px; text-align: right; }
.lista-items-cabecera .col-puntaje { width: 68px; text-align: right; }
.lista-items-cabecera .col-abrir { width: 15px; }

/* Dentro de la caja las preguntas son filas, no tarjetas: sin borde propio, separadas
   por una regla y sin radio, para que la columna del tipo se lea de arriba abajo. */
.lista-items-caja .lista-items { gap: 0; }
.lista-items-caja .lista-items > li {
  border: 0; border-radius: 0; border-top: 1px solid var(--borde);
  background: transparent;
}
.lista-items-caja .lista-items > li:first-child { border-top: 0; }

/* La fila entera teñida, no solo el borde: es lo que hace que dos preguntas rotas se
   encuentren entre treinta y ocho sin leer el enunciado de todas. */
.lista-items-caja .lista-items > li.con-problema {
  background: var(--color-acento-suave);
}
.lista-items-caja .lista-items > li.con-problema .fila-item:hover { background: transparent; }
/* Atenuada, pero sigue ocupando su lugar en el banco: se desactiva, no se esconde. */
.lista-items-caja .lista-items > li.inactiva { opacity: 1; }
.lista-items-caja .lista-items > li.inactiva .nombre { color: var(--texto-3); }

/* La pastilla del tipo se ciñe a su texto, pero su columna es fija: así los enunciados
   arrancan todos en la misma vertical y la columna del tipo se lee de arriba abajo. */
.fila-item .col-tipo { width: 124px; flex-shrink: 0; display: block; }
.fila-item .col-tipo .pastilla-tipo { min-width: 0; }
.fila-item .detalle-emitidos { width: 84px; text-align: right; font-variant-numeric: tabular-nums; }
.fila-item .detalle-puntaje { width: 68px; text-align: right; font-variant-numeric: tabular-nums; }
.fila-item-abrir { display: inline-flex; flex-shrink: 0; color: var(--texto-3); transition: transform .15s; }
.fila-item[aria-expanded="true"] .fila-item-abrir { transform: rotate(180deg); }

.lista-items-caja .problemas-item {
  list-style: none;
  padding: 0 var(--e-4) var(--e-3) calc(var(--e-4) + 124px + var(--e-3));
  font-size: var(--t-sm); color: var(--color-acento-fuerte);
}
.lista-items-caja .problemas-item li { position: relative; padding-left: var(--e-4); }
.lista-items-caja .problemas-item li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--color-acento);
}

@media (max-width: 720px) {
  .lista-items-cabecera { display: none; }
  .lista-items-caja .problemas-item { padding-left: var(--e-4); }
}

.form-item { gap: var(--e-4); }
.filas { display: flex; flex-direction: column; gap: var(--e-2); }
/* El botón de agregar fila se alinea con las filas, no con el ancho del bloque. */
.form-item [data-agrega] { align-self: flex-start; }
.fila { display: flex; align-items: center; gap: var(--e-3); }
.fila input[type=text] { flex-grow: 1; }
.fila input[type=radio], .fila input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-primario); }
.fila-par { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.fila-par .union { color: var(--texto-3); }
@media (max-width: 560px) { .fila-par { grid-template-columns: minmax(0,1fr); } .fila-par .union { display: none; } }
.numero-fila {
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border-radius: 50%;
  font-size: var(--t-xs); color: var(--texto-2); font-variant-numeric: tabular-nums;
}

/* ── Un curso que tributa a una certificación ──────────────────────────────── */

/* En la ficha: el bloque que dice que el curso no termina en sí mismo. */
.tributa { margin: var(--e-6) 0; }
.lista-tributa { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.lista-tributa li {
  display: flex; align-items: baseline; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-sm);
  background: var(--color-primario-suave);
}
.lista-tributa a { font-weight: 600; }
.lista-tributa .detalle { font-size: var(--t-xs); color: var(--texto-2); margin-left: auto; white-space: nowrap; }

/* En el catálogo: una línea discreta, que la tarjeta ya tiene bastante. */
.tributa-nota { font-size: var(--t-xs); color: var(--texto-2); }
/* El icono va inline y no como ítem flex: con flex, el nombre de la certificación se
   convierte en una segunda columna y «Cuenta para» se parte en dos líneas al lado. */
.tributa-nota svg { vertical-align: -2px; margin-right: 6px; color: var(--color-primario); }

/* Nombre de una canasta, cuando la certificación se arma eligiendo. */
/* El nombre de una canasta. Se llamaba `.grupo` y chocaba con la tarjeta de ajustes que
   lleva ese nombre desde antes: el encabezado heredaba padding, fondo y borde de tarjeta,
   y las tarjetas de Personalización heredaban de vuelta un texto más pequeño y gris. */
.canasta-nombre { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); margin-top: var(--e-5); }

/* El listado de requisitos respira mejor cuando el título del grupo lo precede. */
.requisitos .detalle { margin-left: auto; font-size: var(--t-xs); color: var(--texto-3); }

/* El avance hacia una certificación, fuera de una tarjeta: necesita su propio aire y una
   barra que se distinga del fondo de la página, no solo del blanco de una tarjeta. */
.avance-cert { margin: var(--e-5) 0; display: flex; flex-direction: column; gap: var(--e-2); max-width: 460px; }
.avance-cert .barra { background: var(--superficie-2); border: 1px solid var(--borde); height: 8px; }
.avance-texto { font-size: var(--t-sm); color: var(--texto-2); }
.avance-texto strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* Cada sección de certificaciones necesita separarse de la anterior: sin esto el título
   de la siguiente queda pegado al borde inferior de la última tarjeta. */
/* Sin margen propio: su contenedor ya separa con gap, y en flex los dos no colapsan
   —se suman— dejando ochenta píxeles de aire bajo la cabecera. */
.seccion-certs { display: flex; flex-direction: column; }
.seccion-certs > .sub { font-size: var(--t-sm); color: var(--texto-2); margin-top: var(--e-1); }
.seccion-certs .grid-cursos { margin-top: var(--e-4); }
.tarjeta-curso h3 a { color: inherit; }

/* ══ Pantalla de acceso ══════════════════════════════════════════════════════

   Dos mitades con trabajos distintos: la izquierda dice de qué plataforma se trata y
   la derecha deja entrar. La izquierda es prescindible —en una pantalla estrecha se
   pliega a una banda— porque quien viene a entrar ya sabe dónde está; el formulario
   nunca lo es.

   Los colores salen todos de los tokens de identidad, así que un skin nuevo se lleva
   esta pantalla consigo sin tocar una línea de aquí.                                */

.body-acceso { margin: 0; background: var(--fondo); }

.acceso {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ── La mitad de marca ──────────────────────────────────────────────────── */

.acceso-marca {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--e-7);
  padding: var(--e-7) clamp(var(--e-6), 5vw, var(--e-8));
  background: var(--texto);
  color: #fff;
  overflow: hidden;
}

/* Profundidad con el color de la marca, no con un degradado de moda: una veladura del
   primario en la esquina y una malla de puntos que solo se nota si se busca. */
.acceso-marca-fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--color-primario) 55%, transparent), transparent 62%),
    radial-gradient(60% 60% at 92% 100%, color-mix(in srgb, var(--color-primario) 28%, transparent), transparent 70%);
}
.acceso-marca-fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .07;
}

.acceso-marca-cuerpo {
  position: relative;
  display: flex; flex-direction: column; gap: var(--e-7);
}

.acceso-logo { display: inline-flex; align-items: center; color: #fff; font-weight: 800; font-size: var(--t-md); letter-spacing: -.01em; }
.acceso-logo img { max-height: 34px; width: auto; }

.acceso-discurso { display: flex; flex-direction: column; gap: var(--e-4); max-width: 34ch; }

.acceso-eyebrow {
  display: inline-flex; align-items: center; gap: var(--e-2);
  align-self: flex-start;
  padding: 5px 12px 5px 10px; border-radius: var(--r-full);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
}
.acceso-eyebrow .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-acento); }

/* Dos tonos de blanco en vez de un segundo color: el contraste se mantiene en cualquier
   paleta que un cliente configure, y un acento oscuro sobre fondo oscuro no se leería. */
.acceso-titular {
  font-family: var(--fuente-titulos);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.74);
  text-wrap: balance;
}
.acceso-titular em { font-style: normal; color: #fff; }

.acceso-bajada { font-size: var(--t-md); line-height: var(--lh-lectura); color: rgba(255,255,255,.68); }

/* Los cursos como filas con regla, no como tarjetas: son la prueba de que hay catálogo,
   no tres botones. En tarjeta compiten con el titular y con las cifras; con una regla
   fina se leen como una lista y el panel queda con una sola jerarquía. */
.acceso-cursos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acceso-cursos li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-3) 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.acceso-curso-titulo { font-size: var(--t-sm); color: #fff; }
.acceso-curso-meta { font-size: var(--t-xs); color: rgba(255,255,255,.55); white-space: nowrap; }

/* Las cifras, separadas por su propia regla y en cuerpo de titular: son el dato duro del
   panel y hasta ahora se leían igual que la lista de arriba. */
.acceso-cifras {
  display: flex; flex-wrap: wrap; gap: var(--e-7); margin: 0;
  padding-top: var(--e-5); border-top: 1px solid rgba(255,255,255,.14);
}
.acceso-cifras dt {
  font-family: var(--fuente-titulos);
  font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.acceso-cifras dd {
  margin: 3px 0 0; font-size: var(--t-xs);
  color: rgba(255,255,255,.58);
}

.acceso-pie { position: relative; font-size: var(--t-xs); color: rgba(255,255,255,.42); }

/* ── La mitad del formulario ────────────────────────────────────────────── */

.acceso-panel { display: flex; align-items: center; justify-content: center; padding: var(--e-7) var(--e-5); background: var(--superficie); }
.acceso-formulario { width: 100%; max-width: 372px; display: flex; flex-direction: column; gap: var(--e-6); }

/* «¿La olvidaste?» en la línea de la etiqueta: es donde se busca, y debajo del campo
   compite con el botón de entrar. */
.campo-con-ayuda { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.campo-con-ayuda label { margin: 0; }
.campo-con-ayuda a { font-size: var(--t-xs); font-weight: 600; }

.acceso-encabezado h2 { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.025em; }
.acceso-encabezado p { margin-top: var(--e-2); color: var(--texto-2); font-size: var(--t-sm); }

.form-acceso { display: flex; flex-direction: column; gap: var(--e-4); }
.form-acceso .campo { display: flex; flex-direction: column; gap: var(--e-2); }
.form-acceso label { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); }

/* Acceso por un proveedor externo: mismo peso visual que el botón propio pero sin color
   de marca, porque la marca que manda en ese botón es la del proveedor. */
.btn-externo {
  display: flex; align-items: center; justify-content: center; gap: var(--e-3);
  width: 100%; min-height: 46px; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--superficie); color: var(--texto);
  font-size: var(--t-base); font-weight: 600; text-decoration: none;
}
.btn-externo:hover { background: var(--superficie-2); }

/* Separador con rótulo: una regla a cada lado del texto, sin imágenes ni pseudo-hacks
   frágiles —un grid de tres columnas hace el trabajo y se centra solo. */
.separador {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-3);
  font-size: var(--t-xs); color: var(--texto-3);
}
.separador::before, .separador::after { content: ''; height: 1px; background: var(--borde); }

/* Las salidas, separadas del formulario por una regla: son lo que se lee cuando entrar
   no salió bien, y pegadas al botón parecen parte del envío. */
.acceso-ayuda {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding-top: var(--e-5); border-top: 1px solid var(--borde);
  font-size: var(--t-sm); color: var(--texto-2);
}

/* En pantalla estrecha la marca se pliega a una banda: se conserva quién es, se deja ir
   el discurso. Nadie llega al login de un móvil a convencerse de nada. */
@media (max-width: 900px) {
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .acceso-marca { gap: var(--e-5); padding: var(--e-5) var(--e-5) var(--e-6); }
  .acceso-marca-cuerpo { gap: var(--e-5); }
  .acceso-titular { font-size: 26px; }
  .acceso-cursos, .acceso-cifras, .acceso-pie, .acceso-bajada { display: none; }
  .acceso-panel { padding: var(--e-6) var(--e-5) var(--e-7); }
}

/* ══ Cabecera de página y tarjeta de curso ═══════════════════════════════════ */

.pagina { display: flex; flex-direction: column; gap: var(--e-6); }

.pagina-cabecera { display: flex; flex-direction: column; gap: var(--e-2); max-width: 62ch; }
.pagina-cabecera h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; }
.pagina-bajada { color: var(--texto-2); font-size: var(--t-md); line-height: var(--lh-lectura); }

.eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-primario);
}

/* La tarjeta: portada arriba, y la acción anclada abajo para que en una fila de tres
   los botones queden alineados aunque los resúmenes tengan largos distintos. */
.curso-card {
  display: flex; flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--elevacion-1, var(--sombra-1));
  transition: box-shadow .18s ease, transform .18s ease;
}
.curso-card:hover { box-shadow: var(--elevacion-2, var(--sombra-2)); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .curso-card { transition: none; } .curso-card:hover { transform: none; } }

.curso-card-portada { display: block; }
.curso-card-cuerpo { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-5); flex-grow: 1; }
.curso-card h2 { font-size: var(--t-md); line-height: 1.3; letter-spacing: -.01em; }
.curso-card h2 a { color: inherit; text-decoration: none; }
.curso-card h2 a:hover { color: var(--color-primario); }
.curso-card-resumen { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }

.curso-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3); font-size: var(--t-xs); color: var(--texto-3); }
.curso-card-meta > span:not(.pastilla) { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.pastilla-cursando { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; }

/* La acción se empuja al fondo de la tarjeta, no se pega al resumen. */
.curso-card-accion { margin-top: auto; padding-top: var(--e-2); }

/* ── Portada generada ──────────────────────────────────────────────────────
   Cinco tonos derivados del color de la marca: un catálogo con variedad, pero sin
   convertirse en un arcoíris. Al cambiar la paleta desde Personalización, cambian los
   cinco. */
.portada {
  position: relative; aspect-ratio: 16 / 7;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--portada-tono, var(--color-primario));
}
.portada img { width: 100%; height: 100%; object-fit: cover; }

/* Retícula fina: da textura de superficie impresa sin competir con el monograma. */
.portada::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 34px 34px;
}
.portada:has(img)::after { display: none; }

.portada-monograma {
  position: relative; z-index: 1;
  font-family: var(--fuente-titulos);
  font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  color: rgba(255,255,255,.92);
}

/* Los tonos se mezclan contra una tinta FIJA y no contra --texto: en modo oscuro ese
   token es casi blanco, y las portadas —que llevan el monograma en blanco— salían
   lavadas, con una casi blanca sobre blanco. La portada de un curso es una superficie
   con contenido claro encima; tiene que ser oscura en los dos modos. */
/* Cuando se sabe a qué certificación tributa el curso, el tono lo decide ella. Son tres
   y se reparten por orden de creación de la certificación, no por el título: renombrar una
   no puede cambiar el color de las tarjetas. */
.portada-cert1 { --portada-tono: var(--cert-1, var(--color-primario)); }
.portada-cert2 { --portada-tono: var(--cert-2, var(--color-acento)); }
.portada-cert3 { --portada-tono: var(--cert-3, var(--texto-2)); }

/* Los sellos: uno por certificación, hasta dos. Un curso que suma a dos rutas tiene que
   enseñar las dos —quedarse con la primera esconde la mitad de lo que vale. */
.portada-sellos { position: absolute; right: var(--e-3); bottom: var(--e-3); display: flex; gap: 4px; }
.portada-sello {
  width: 10px; height: 10px; border-radius: var(--r-full);
  border: 2px solid rgba(255,255,255,.85);
}
.portada-sello1 { background: var(--cert-1, var(--color-primario)); }
.portada-sello2 { background: var(--cert-2, var(--color-acento)); }
.portada-sello3 { background: var(--cert-3, var(--texto-2)); }

.portada-t0 { --portada-tono: var(--color-primario); }
.portada-t1 { --portada-tono: color-mix(in srgb, var(--color-primario) 72%, #0F1525); }
.portada-t2 { --portada-tono: color-mix(in srgb, var(--color-primario) 62%, var(--color-acento)); }
.portada-t3 { --portada-tono: color-mix(in srgb, var(--color-primario) 82%, #2C3E57); }
.portada-t4 { --portada-tono: color-mix(in srgb, #0F1525 84%, var(--color-primario)); }

/* La bajada de la barra es un apoyo del nombre, no un párrafo: se recorta y desaparece
   antes que el menú cuando el ancho aprieta.

   La raya que la precede es lo que separa el producto de la institución. Va en el ::before
   y no como elemento para que desaparezca con ella al estrecharse, sin dejar una raya
   suelta flotando al lado del logotipo. */
.brand-lema {
  display: flex; align-items: center; gap: var(--e-3);
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-sm); color: var(--barra-texto-2, var(--texto-3));
  /* El logotipo lleva descendente —la «p» de Campus— así que su centro óptico queda por
     encima del centro de su caja. Sin este empujón el lema se lee caído. */
  margin-top: -1px;
}
.brand-lema::before {
  content: ""; flex: 0 0 auto;
  width: 1px; height: 1.35em;
  background: currentColor; opacity: .35;
}
@media (max-width: 1080px) { .brand-lema { display: none; } }

/* ══ Portada ═════════════════════════════════════════════════════════════════ */

/* ── Ficha de curso: cabecera a sangre ──────────────────────────────────── */

.ficha-cabecera { padding-block: clamp(var(--e-6), 3.5vw, 48px); }
.ficha-portada {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(var(--e-5), 4vw, 56px); align-items: center;
  margin-top: var(--e-4);
}
@media (max-width: 900px) { .ficha-portada { grid-template-columns: minmax(0, 1fr); } }
/* La foto del curso a tamaño de verdad: en miniatura dentro del panel de inscripción no
   enseñaba nada y le quitaba sitio al botón. */
.ficha-foto { border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 900px) { .ficha-foto { display: none; } }

/* Los objetivos a dos columnas: son cuatro frases cortas y en una sola columna dejan
   media pantalla vacía al lado. */
.ficha-objetivos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3) var(--e-5);
}
@media (max-width: 700px) { .ficha-objetivos { grid-template-columns: minmax(0, 1fr); } }
.ficha-objetivos li { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-sm); line-height: var(--lh-normal); }
.ficha-objetivos svg { flex-shrink: 0; margin-top: 2px; color: var(--color-exito); }

/* Las competencias, a una columna y no a dos como los objetivos: llevan código, nombre y
   descripción, y partidas en dos columnas estrechas el código deja de leerse como lo que
   es —un identificador— y parece parte de la frase. */
.ficha-competencias { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); }
.ficha-competencias li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-1) var(--e-3);
  align-items: baseline;
}
.competencia-codigo {
  grid-row: 1; font-family: var(--fuente-mono, monospace); font-size: var(--t-xs);
  font-weight: 600; color: var(--color-primario);
  background: var(--superficie-2); border-radius: var(--radio-1);
  padding: 2px var(--e-2); white-space: nowrap;
}
.competencia-nombre { grid-row: 1; font-size: var(--t-sm); font-weight: 600; }
.competencia-detalle, .ficha-competencias .detalle {
  grid-column: 2; font-size: var(--t-xs); color: var(--texto-2); line-height: var(--lh-normal);
}

.ficha-bloque-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.ficha-bloque-cabecera .ficha-nota { margin: 0; }
/* La nota mínima no es un metadato más: es lo que decide si alguien se inscribe a un
   curso con examen. */
.temario-nota { color: var(--color-exito); font-weight: 600; }

/* La portada no vive dentro del contenedor de lectura: es una pila de bandas a sangre y
   cada una centra su propio contenido. Con el contenedor, el hero era una tarjeta más
   entre dos márgenes grises y la página entera se leía como una ficha. */
.portada-pagina { display: block; }

.franja { padding: clamp(var(--e-7), 5vw, 72px) var(--e-5); }
.franja-cuerpo { max-width: var(--ancho-pagina); margin: 0 auto; }
.franja-clara { background: var(--superficie); }
.franja-tenue { background: var(--fondo); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
/* Dos bandas claras seguidas necesitan la regla; con la tenue en medio, no. */
.franja-clara + .franja-clara { border-top: 1px solid var(--borde); }

/* La banda del hero sigue a la barra, no a un negro fijo: Vector la quiere oscura y
   Claustro la quiere de papel, con el peso en la serif en marino y no en el contraste.
   Por eso NINGÚN color de dentro puede ser un blanco escrito a mano. */
.franja-oscura {
  position: relative; overflow: hidden;
  background: var(--barra-fondo, var(--texto));
  color: var(--barra-texto, #fff);
}

.hero { padding-block: clamp(var(--e-7), 6vw, 76px); }
/* Dos columnas: el argumento y el documento. */
.hero-reja {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(var(--e-6), 5vw, 64px); align-items: center;
}
.hero-fondo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(110% 80% at 10% 0%, color-mix(in srgb, var(--color-primario) 58%, transparent), transparent 60%),
    radial-gradient(70% 70% at 95% 100%, color-mix(in srgb, var(--color-primario) 30%, transparent), transparent 72%);
}
.hero-fondo::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 28px 28px; opacity: .07;
}
@media (max-width: 980px) { .hero-reja { grid-template-columns: minmax(0, 1fr); } }
.hero-cuerpo { position: relative; display: flex; flex-direction: column; gap: var(--e-5); max-width: 56ch; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--e-2); align-self: flex-start;
  padding: 5px 12px 5px 10px; border-radius: var(--r-full);
  background: var(--barra-borde, rgba(255,255,255,.09));
  border: 1px solid var(--barra-borde, rgba(255,255,255,.14));
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--barra-texto-2, rgba(255,255,255,.86));
}
.hero-eyebrow .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--color-acento); }

/* El titular es el argumento entero y ocupa lo que tiene que ocupar: a 52 px competía
   con el h2 de la banda de abajo y el hero dejaba de ser el comienzo. */
.hero-titular {
  font-family: var(--fuente-titulos);
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.042em; color: var(--barra-texto, #fff); text-wrap: balance;
}
.hero-titular em { font-style: normal; color: inherit; }
.hero-bajada {
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6;
  color: var(--barra-texto-2, rgba(255,255,255,.68)); max-width: 52ch;
}

.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.btn-grande { min-height: 48px; padding: 0 var(--e-5); font-size: var(--t-base); }
/* El botón secundario de una banda de barra: toma sus colores de la barra, porque la
   banda puede ser negra (Vector) o papel (Claustro) y un blanco al 10 % sobre papel no
   se ve. */
.btn-sobre-oscuro {
  background: transparent;
  color: var(--barra-texto, #fff);
  border: 1px solid var(--barra-texto-2, rgba(255,255,255,.28));
}
.btn-sobre-oscuro:hover { background: var(--barra-borde, rgba(255,255,255,.12)); border-color: var(--barra-texto, #fff); }

/* Las cuatro en una línea, separadas por una regla. Con «gap» fijo, la cuarta cifra caía
   sola a una segunda fila y dejaba de leerse como una serie. */
.hero-cifras {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-4); margin: var(--e-5) 0 0;
  padding-top: var(--e-4); border-top: 1px solid var(--barra-borde, rgba(255,255,255,.14));
}
.hero-cifras dt {
  font-family: var(--fuente-titulos);
  font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
/* En redonda y no en versalitas: cuatro rótulos en mayúsculas al pie del hero pesan más
   que las cifras que rotulan. */
.hero-cifras dd { margin: 3px 0 0; font-size: 12.5px; color: var(--barra-texto-2, rgba(255,255,255,.58)); line-height: 1.35; }

@media (max-width: 720px) {
  .hero-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5) var(--e-4); }
}

/* ── Secciones ─────────────────────────────────────────────────────────── */

.seccion { display: flex; flex-direction: column; gap: var(--e-5); }
.seccion-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); flex-wrap: wrap; }
.seccion-cabecera h2 {
  font-family: var(--fuente-titulos);
  font-size: clamp(24px, 2.8vw, 34px); font-weight: 800; letter-spacing: -.035em;
  margin-top: var(--e-2);
}
.seccion-bajada { color: var(--texto-2); font-size: var(--t-sm); margin-top: var(--e-2); }

.enlace-flecha { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.enlace-flecha::after { content: ' →'; }

/* ── Tarjeta de certificación ──────────────────────────────────────────── */

.grid-certificaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e-5); }
/* Una sola tarjeta no se estira a toda la banda: a 1440 px de ancho deja de leerse como
   una tarjeta. */
.grid-cursos > :only-child, .grid-certificaciones > :only-child { max-width: 460px; }
.cert-card {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-5);
  border-radius: var(--r-lg);
  background: var(--superficie);
  border: 1px solid var(--borde);
  box-shadow: var(--elevacion-1, var(--sombra-1));
}
.cert-card h3 {
  font-family: var(--fuente-titulos);
  font-size: clamp(19px, 1.7vw, 24px); font-weight: 700; line-height: 1.2; letter-spacing: -.028em;
}
.cert-card h3 a { color: inherit; text-decoration: none; }
.cert-card h3 a:hover { color: var(--color-primario); }
/* La cifra de la ruta va en pastilla y el resto en redonda: en versalitas, «3 CURSOS ·
   24 H · INTERMEDIO» pesaba más que el nombre de la certificación. */
.cert-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); font-size: var(--t-xs); color: var(--texto-2); }
.cert-card-meta .pastilla { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; font-weight: 700; }
.cert-card-texto { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }
.cert-card .enlace-flecha { margin-top: auto; padding-top: var(--e-2); }

/* ── Cómo funciona ─────────────────────────────────────────────────────── */

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--e-5); }
.pasos li { display: flex; flex-direction: column; gap: var(--e-3); }
.pasos h3 { font-size: var(--t-md); letter-spacing: -.01em; }
.pasos p { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }
.paso-numero {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-primario-suave); color: var(--color-primario);
  font-weight: 800; font-size: var(--t-sm); font-variant-numeric: tabular-nums;
}

/* ── Cierre ────────────────────────────────────────────────────────────── */

.cierre {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-5);
  padding: var(--e-7) clamp(var(--e-5), 4vw, var(--e-7));
  border-radius: var(--r-lg);
  background: var(--color-primario-suave);
}
.cierre h2 { font-size: clamp(21px, 2.2vw, 26px); letter-spacing: -.02em; }
.cierre p { margin-top: var(--e-2); color: var(--texto-2); font-size: var(--t-sm); max-width: 52ch; }

/* ══ Ficha de curso ══════════════════════════════════════════════════════════

   Dos columnas: a la izquierda de qué trata el curso, a la derecha la decisión de
   entrar. La tarjeta de la derecha queda pegada al hacer scroll porque el temario es
   largo y la acción no puede quedarse arriba, fuera de vista.                       */

.ficha-curso { display: flex; flex-direction: column; gap: var(--e-5); }

.ficha-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: start;
}
@media (max-width: 940px) { .ficha-columnas { grid-template-columns: minmax(0, 1fr); } }

.ficha-principal { display: flex; flex-direction: column; gap: var(--e-7); min-width: 0; }
.ficha-encabezado { display: flex; flex-direction: column; gap: var(--e-3); }
.ficha-encabezado h1 { font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -.03em; }
.ficha-resumen { font-size: var(--t-md); line-height: var(--lh-lectura); color: var(--texto-2); max-width: 60ch; }

.ficha-meta {
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3);
}

.ficha-bloque { display: flex; flex-direction: column; gap: var(--e-4); }
.ficha-bloque h2 { font-size: var(--t-lg); letter-spacing: -.02em; }
.ficha-nota { font-size: var(--t-sm); color: var(--texto-3); margin-top: calc(var(--e-3) * -1); }
.prosa { color: var(--texto-2); line-height: var(--lh-lectura); max-width: var(--ancho-lectura); }

/* ── Temario ───────────────────────────────────────────────────────────── */

.temario { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.temario-unidad {
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie); overflow: hidden;
}
.temario-cabecera {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-4);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.temario-cabecera h3 { font-size: var(--t-base); letter-spacing: -.01em; }
.temario-cabecera p { font-size: var(--t-sm); color: var(--texto-2); margin-top: 2px; }
.temario-numero {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primario); color: var(--sobre-primario);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.temario-cuenta {
  margin-left: auto; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.temario-actividades { list-style: none; margin: 0; padding: var(--e-2) 0; display: flex; flex-direction: column; }
.temario-actividades li {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-sm);
}
.temario-actividades svg { flex-shrink: 0; color: var(--texto-3); }
.temario-titulo { color: var(--texto); }
.temario-tipo { margin-left: auto; font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }

/* ── Tarjeta lateral ───────────────────────────────────────────────────── */

.ficha-lateral { display: flex; flex-direction: column; gap: var(--e-4); position: sticky; top: var(--e-5); }
@media (max-width: 940px) { .ficha-lateral { position: static; } }

.ficha-tarjeta {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden; box-shadow: var(--elevacion-1, var(--sombra-1));
}
.ficha-tarjeta-cuerpo { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5); }
.ficha-tarjeta-nota { font-size: var(--t-xs); color: var(--texto-3); text-align: center; margin-top: calc(var(--e-3) * -1); }

.ficha-datos { display: flex; flex-direction: column; gap: var(--e-3); margin: 0; padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.ficha-datos > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.ficha-datos dt { font-size: var(--t-sm); color: var(--texto-3); }
.ficha-datos dd { margin: 0; font-size: var(--t-sm); font-weight: 600; text-align: right; }

.ficha-cert-titulo {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 700;
}
.ficha-cert-titulo svg { color: var(--color-primario); flex-shrink: 0; }
.ficha-tarjeta-cert .lista-tributa li { background: var(--superficie-2); }

/* ══ Pantalla de estudio ═════════════════════════════════════════════════════

   Esta pantalla NO usa el contenedor de 1200 px. Ese ancho está pensado para páginas
   que se leen —el catálogo, una ficha— y ahí decide bien; acá dejaba 520 px de margen
   tirados en una pantalla de 1680 y aplastaba el video contra el índice, en 835 px.

   Tres zonas de altura completa: índice · escenario · panel. El escenario es lo único
   elástico; las columnas tienen ancho fijo y se pliegan, porque una columna que encoge
   con la ventana termina ilegible antes de terminar de estorbar.                      */

.body-clase { margin: 0; background: var(--fondo); height: 100vh; overflow: hidden; }

/* El examen y sus resultados usan este armazón —sin barra global ni pie, que es lo que
   hace falta mientras se rinde— pero NO su rejilla: son páginas largas que se leen de
   arriba abajo. Sin esto heredaban el recorte y no había forma de llegar a la pregunta
   cuatro. El `overflow` del body es el que gobierna el desplazamiento de la ventana
   cuando el de <html> queda en `visible`, así que aquí hay que devolver los dos. */
.body-desplazable { height: auto; min-height: 100vh; overflow: visible; }

.clase { height: 100vh; display: flex; flex-direction: column; }

/* ── Barra de la clase ─────────────────────────────────────────────────────
   Sustituye a la navegación del sitio. Quien está estudiando no necesita «Catálogo ·
   Certificados» compitiendo con el contenido; necesita saber dónde está y cuánto lleva. */

/* La barra de la clase sigue al estilo visual como la del sitio: es la misma pieza en
   otra pantalla. Se queda más baja que la general —acá el escenario manda— pero el color
   es el del estilo. */
.clase-barra {
  flex-shrink: 0; height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  padding: 0 var(--e-5);
  background: var(--barra-fondo, var(--superficie));
  color: var(--barra-texto, var(--texto));
  border-bottom: 1px solid var(--barra-borde, var(--borde));
}
.clase-barra { height: 60px; }
.clase-barra-donde { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.clase-barra-derecha { display: flex; align-items: center; gap: var(--e-5); flex-shrink: 0; }

/* Volver es un icono en su caja y no un enlace con el nombre del curso: el nombre del
   curso ya está en la línea de al lado, y repetido ocupaba media barra. */
.clase-volver {
  display: inline-grid; place-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--barra-borde, var(--superficie-2));
  border: 1px solid var(--barra-borde, var(--borde));
  color: var(--barra-texto-2, var(--texto-2)); text-decoration: none;
}
.clase-volver:hover { color: var(--barra-texto, var(--color-primario)); }

.clase-barra-texto { min-width: 0; }
/* La ruta: curso y unidad. Dice dónde se está sin salir de la clase. */
.clase-barra-ruta {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: var(--t-xs); color: var(--barra-texto-2, var(--texto-3));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clase-barra-punto { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; background: var(--color-primario); }
/* El título de la actividad es el rótulo de la pantalla, y hasta ahora solo estaba en el
   pie, bajo el video, donde hay que bajar la vista para leerlo. */
.clase-barra-titulo {
  margin: 1px 0 0;
  font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700; letter-spacing: -.022em;
  color: var(--barra-texto, var(--texto));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.clase-barra-regla { width: 1px; height: 24px; background: var(--barra-borde, var(--borde)); }
.clase-barra-botones { display: flex; align-items: center; gap: 7px; }
.clase-barra-boton {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px;
  background: var(--barra-borde, var(--superficie-2));
  border: 1px solid var(--barra-borde, var(--borde)); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-xs); font-weight: 600;
  color: var(--barra-texto-2, var(--texto-2)); cursor: pointer;
}
.clase-barra-boton:hover { color: var(--barra-texto, var(--texto)); }
.clase-barra-boton[aria-pressed="true"] { color: var(--barra-texto, var(--texto)); }

.clase-barra-avance { display: flex; align-items: center; gap: var(--e-3); flex-shrink: 0; }
.clase-barra-avance .barra { width: 140px; height: 5px; background: var(--barra-borde, var(--superficie-2)); border: 1px solid var(--barra-borde, var(--borde)); }
.clase-barra-avance .barra-relleno { background: var(--color-exito); }
.clase-barra-cuenta {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--barra-texto-2, var(--texto-3)); font-variant-numeric: tabular-nums;
}
.clase-barra-pct { font-size: var(--t-xs); font-weight: 700; color: var(--barra-texto, var(--texto-2)); font-variant-numeric: tabular-nums; }

/* ── Las tres zonas ────────────────────────────────────────────────────── */

.clase-cuerpo {
  flex-grow: 1; min-height: 0; position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 340px;
}
/* Plegar no oculta: colapsa la columna a cero y deja una lengüeta. Así el escenario
   recupera el ancho completo sin que nada salte de sitio. */
.clase.plegado-indice  .clase-cuerpo { grid-template-columns: 0 minmax(0, 1fr) 340px; }
.clase.plegado-trabajo .clase-cuerpo { grid-template-columns: 300px minmax(0, 1fr) 0; }
.clase.plegado-indice.plegado-trabajo .clase-cuerpo { grid-template-columns: 0 minmax(0, 1fr) 0; }

.clase-indice, .clase-panel {
  background: var(--superficie);
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
}
.clase-indice { border-right: 1px solid var(--borde); }
.clase-panel  { border-left: 1px solid var(--borde); }
.clase.plegado-indice  .clase-indice { border-right: 0; }
.clase.plegado-trabajo .clase-panel  { border-left: 0; }

.clase-indice-cabecera, .clase-panel-cabecera {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}
.clase-plegar {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--texto-3); cursor: pointer;
}
.clase-plegar:hover { background: var(--borde); color: var(--texto); }

/* Lengüeta: lo único que queda de una columna plegada. */
.clase-lengueta {
  position: absolute; top: var(--e-4); z-index: 2;
  width: 34px; height: 34px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: var(--superficie); border: 1px solid var(--borde);
  color: var(--texto-2); cursor: pointer; box-shadow: var(--elevacion-1, var(--sombra-1));
}
.clase-lengueta:hover { color: var(--color-primario); }
.clase-lengueta-izq { left: 0; border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.clase-lengueta-der { right: 0; border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.clase.plegado-indice  .clase-lengueta-izq { display: flex; }
.clase.plegado-trabajo .clase-lengueta-der { display: flex; }

/* ── Índice ────────────────────────────────────────────────────────────── */

.clase-indice-lista { overflow-y: auto; padding: 0 0 var(--e-5); }
.clase-indice-lista ul { list-style: none; margin: 0; padding: 0; }

/* La unidad es una fila con su propio estado y su cuenta, no un rótulo en versalitas: en
   un curso de catorce actividades, saber que la unidad 1 está entera y la 2 va por 5 de 6
   es lo que ordena el índice. */
.clase-indice-unidad {
  display: flex; align-items: center; gap: var(--e-3);
  margin: 0; padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-sm);
}
.clase-indice-unidad-titulo {
  flex-grow: 1; min-width: 0;
  font-family: var(--fuente-titulos); font-weight: 700; color: var(--texto);
}
.clase-indice-cuenta { font-size: var(--t-xs); font-weight: 600; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.unidad-lista .clase-indice-cuenta { color: var(--color-exito); }
.clase-indice-unidad.unidad-actual {
  background: var(--color-primario-suave);
  border-bottom-color: var(--color-primario-suave);
}
.unidad-actual .clase-indice-cuenta { color: var(--color-primario); }

/* Tres marcas y no dos. «Completa o no» no distingue la actividad en la que se está —que
   es la que hay que encontrar al abrir el índice— de las que aún no se han tocado. */
.indice-marca { display: inline-grid; place-content: center; width: 15px; height: 15px; flex-shrink: 0; }
.indice-marca svg { color: var(--color-exito); }
.indice-circulo {
  width: 14px; height: 14px; border-radius: var(--r-full);
  border: 1.5px solid var(--borde-fuerte);
}
.indice-punto {
  display: inline-grid; place-content: center;
  width: 15px; height: 15px; border-radius: var(--r-full);
  border: 2px solid var(--color-primario);
}
.indice-punto > span { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--color-primario); }

.clase-indice-lista li a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-4) var(--e-2) var(--e-5);
  font-size: var(--t-sm); color: var(--texto-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.clase-indice-lista li a:hover { background: var(--superficie-2); color: var(--texto); }
.clase-indice-titulo { flex-grow: 1; min-width: 0; }
/* A la derecha, lo que decide si se entra ahora: cuánto dura, o con cuánto se aprueba. */
.clase-indice-dato { font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.clase-indice-lista li.completa a { color: var(--texto-2); }
.clase-indice-lista li.actual a {
  border-left-color: var(--color-primario);
  background: var(--color-primario-suave);
  color: var(--texto); font-weight: 600;
  padding-left: calc(var(--e-5) - 3px);
}
.clase-indice-lista li.actual .clase-indice-dato { color: var(--color-primario); }

/* Al pie del índice: en una pantalla donde solo se ve la actividad abierta, es lo único
   que recuerda a dónde lleva el curso. */
.indice-certificado {
  margin: var(--e-5) var(--e-4) 0; padding: var(--e-4);
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r-md);
}
.indice-certificado-titulo {
  display: flex; align-items: center; gap: var(--e-2); margin: 0;
  font-family: var(--fuente-titulos); font-size: var(--t-sm); font-weight: 700; color: var(--texto);
}
.indice-certificado-titulo svg { flex-shrink: 0; color: var(--color-primario); }
.indice-certificado p:last-child { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--texto-2); line-height: var(--lh-normal); }

/* ── Escenario ─────────────────────────────────────────────────────────── */

.clase-escenario { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.clase-escenario .actividad-detalle { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; gap: 0; }

/* El medio toma todo lo que queda y ahí dentro el iframe conserva 16:9.

   La zona es más panorámica que el video —a 1440 de ancho quedan unos 2,7:1—, y un iframe
   estirado a ese hueco hace que Vimeo centre el video sobre SU fondo, que es blanco: dos
   bandas claras a los lados de la clase. Dándole la forma del video, el iframe termina
   donde termina la imagen y lo que rodea es el negro de la sala. */
.escenario-medio {
  flex-grow: 1; min-height: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
}
.escenario-medio iframe {
  width: 100%; height: 100%; border: 0; display: block;
  aspect-ratio: 16 / 9;
  max-width: 100%; max-height: 100%;
  /* Con el aspect-ratio, «width/height: 100 %» son solo el punto de partida: el ratio y
     los máximos deciden cuál de los dos manda según la forma del hueco. */
  width: auto; height: 100%;
}
/* Cuando el hueco es MÁS ALTO que 16:9 —un móvil en vertical, el panel de notas abierto—
   quien tiene que ceder es la altura. */
@media (max-aspect-ratio: 16 / 9) {
  .escenario-medio iframe { width: 100%; height: auto; }
}
.escenario-objeto { background: var(--superficie); }

/* La lectura sí quiere ancho de lectura: 65 caracteres, centrados en el escenario. Es la
   distinción que faltaba —el contenedor de 1200 aplicaba la misma regla al video. */
.escenario-lectura {
  flex-grow: 1; min-height: 0; overflow-y: auto;
  padding: var(--e-7) var(--e-6);
  display: flex; flex-direction: column; gap: var(--e-5); align-items: center;
}
.escenario-lectura > * { width: 100%; max-width: var(--ancho-lectura); }
.escenario-lectura .actividad-encabezado { display: flex; flex-direction: column; gap: var(--e-2); }
.escenario-lectura h1 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.025em; }
.escenario-lectura .descripcion { color: var(--texto-2); font-size: var(--t-md); }

.actividad-tipo-nota {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}
.actividad-tipo-nota svg { color: var(--color-primario); }

/* ── Pie del escenario ─────────────────────────────────────────────────── */

.clase-pie {
  flex-shrink: 0;
  /* Envuelve cuando no cabe. Con el panel de trabajo abierto quedan unos 760 px para el
     título, la barra, «Marcar como completada» y las dos flechas: piden más, y sin wrap
     el déficit se lo comía el título, que se aplastaba y salía por encima de la barra. */
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  padding: var(--e-3) var(--e-5);
  background: var(--barra-fondo, var(--superficie));
  color: var(--barra-texto, var(--texto));
  border-top: 1px solid var(--barra-borde, var(--borde));
}
/* Se queda con el sobrante del pie. Sin flex-grow y con min-width en cero, este bloque
   se comprimía a veinticuatro píxeles y su contenido salía por encima de la barra. */
.clase-pie-atras { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Volver atrás es una corrección, no la acción de la pantalla: caja tenue y a la
   izquierda, con el nombre de a dónde vuelve —«Anterior» a secas no dice a qué—. */
.clase-pie-anterior {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%;
  height: 40px; padding: 0 15px; border-radius: var(--r-md);
  background: var(--barra-borde, var(--superficie-2));
  border: 1px solid var(--barra-borde, var(--borde));
  color: var(--barra-texto-2, var(--texto-2)); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
}
.clase-pie-anterior:hover { color: var(--barra-texto, var(--texto)); }
.clase-pie-anterior svg { flex-shrink: 0; }
.clase-pie-anterior span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.clase-pie-estado { display: flex; align-items: center; gap: var(--e-3); flex-shrink: 0; min-width: 0; }
.clase-pie-estado .barra { width: 150px; min-width: 60px; flex-shrink: 1; height: 6px; background: var(--barra-borde, var(--superficie-2)); border: 0; }
.estado-progreso { font-size: var(--t-xs); color: var(--barra-texto-2, var(--texto-3)); font-variant-numeric: tabular-nums; min-width: 36px; }

/* Un botón de contorno sobre la barra oscura: el `.btn` normal pinta borde y texto con
   los tokens del papel y ahí desaparece. */
.btn-sobre-oscuro {
  background: transparent;
  border-color: var(--barra-borde, var(--borde));
  color: var(--barra-texto-2, var(--texto-2));
}
.btn-sobre-oscuro:hover { border-color: var(--barra-texto-2, var(--borde-fuerte)); color: var(--barra-texto, var(--texto)); }
/* Cuando la actividad se marca a mano, el pie carga además un botón ancho y ya no caben
   las seis piezas: la barra es la que sobra, porque el porcentaje va justo al lado y dice
   lo mismo. Donde no hay botón —un video, un objeto— la barra se queda. */
.clase-pie-estado:has(#marcar-completa) .barra { display: none; }

.clase-pie-nav { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; }

/* ── Panel de trabajo ──────────────────────────────────────────────────── */

/* Pastillas y no pestañas de ancho completo: son dos herramientas que se alternan, y
   estiradas a media columna cada una parecen dos secciones del panel. */
.clase-panel-pestanas {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--borde); background: var(--superficie-2);
}
.clase-pestana {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0;
  height: 32px; padding: 0 12px;
  background: none; border: 0; border-radius: var(--r-sm);
  font: inherit; font-family: var(--fuente-titulos); font-size: var(--t-sm); font-weight: 700;
  color: var(--texto-2); cursor: pointer;
}
.clase-pestana svg { flex-shrink: 0; }
.clase-pestana:hover { color: var(--texto); }
.clase-pestana[aria-selected="true"] { background: var(--color-primario); color: var(--sobre-primario); }
.clase-pestana-cuenta { font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.clase-panel-pestanas .clase-plegar { margin-left: auto; flex-shrink: 0; }

.clase-panel-cuerpo { flex-grow: 1; min-height: 0; overflow-y: auto; }
/* El tutor dentro del panel pierde su marco: el panel ya es el marco. Y se reparte en
   tres bandas —alcance, hilo, formulario— para que preguntar no obligue a bajar hasta el
   final de la conversación. */
.clase-panel-cuerpo .tutor {
  margin: 0; border: 0; border-radius: 0; height: 100%;
  padding: 0; gap: 0; overflow: hidden;
}
.clase-panel-cuerpo .tutor-cabecera { flex-shrink: 0; }
.clase-panel-cuerpo .tutor-hilo {
  flex-grow: 1; min-height: 0; max-height: none; overflow-y: auto; padding: var(--e-4);
}
.clase-panel-cuerpo .tutor-form,
.clase-panel-cuerpo .tutor-pie { flex-shrink: 0; padding-left: var(--e-4); padding-right: var(--e-4); }
.clase-panel-cuerpo .tutor-form { padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.clase-panel-cuerpo .tutor-pie { padding-top: var(--e-3); padding-bottom: var(--e-4); }
/* El panel no rueda por su cuenta: lo hacen el hilo y la lista de apuntes por dentro. */
.clase-panel-cuerpo:has(.tutor) { overflow: hidden; }

/* ── Pantallas estrechas ───────────────────────────────────────────────────
   Bajo 1200 px no caben tres columnas sin que alguna quede ilegible: el índice y el
   panel se pliegan y quedan como lengüetas; el escenario se lleva la pantalla. */
@media (max-width: 1200px) {
  .clase-cuerpo,
  .clase.plegado-indice .clase-cuerpo,
  .clase.plegado-trabajo .clase-cuerpo { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .clase-indice, .clase-panel { border: 0; }
  .clase-lengueta-izq, .clase-lengueta-der { display: flex; }
}

/* La barra inferior y el velo solo existen bajo 720 px: en escritorio las tres zonas son
   columnas y abrirlas desde abajo no tendría sentido. */
.clase-movil, .clase-velo, .clase-asa { display: none; }

@media (max-width: 720px) {
  .body-clase { height: auto; overflow: auto; }
  /* Alto mínimo de pantalla y el cuerpo creciendo: si no, con una clase corta la barra
     inferior queda a media página en vez de al pie. */
  .clase { height: auto; min-height: 100dvh; }
  .clase-cuerpo { display: block; flex-grow: 1; }

  /* La barra deja el avance y los botones de plegar: el avance vuelve como una regla a
     ancho completo bajo el título, y los cajones se abren desde la barra de abajo. */
  .clase-barra { height: auto; padding: var(--e-3) var(--e-4); flex-wrap: wrap; row-gap: var(--e-3); }
  .clase-barra-donde { flex: 1 1 100%; }
  .clase-barra-derecha { flex: 1 1 100%; gap: var(--e-3); }
  .clase-barra-botones, .clase-barra-regla, .clase-barra-cuenta { display: none; }
  .clase-barra-avance { flex: 1 1 auto; }
  .clase-barra-avance .barra { width: auto; flex-grow: 1; height: 4px; }

  .clase-pie { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .clase-pie-nav { flex-direction: column-reverse; align-items: stretch; }
  .clase-pie-nav .btn { justify-content: center; }
  .clase-pie-anterior { justify-content: center; }

  /* En vertical el escenario deja de estirarse: sin esto el video hereda la altura de la
     pantalla y el reproductor lo centra entre dos bandas negras enormes. Un 16:9 llena el
     ancho, que es la dimensión que escasea en un teléfono. */
  .escenario-medio { flex-grow: 0; aspect-ratio: 16 / 9; }
  .escenario-objeto { aspect-ratio: auto; height: 70vh; }
  .escenario-lectura { padding: var(--e-5) var(--e-4); overflow: visible; }

  /* Los paneles dejan de ser columnas y pasan a ser cajones que suben desde abajo. Por el
     lado entraban tapando el video, que es lo que se vino a ver; desde abajo el video se
     queda arriba y el cajón ocupa lo que sobra. */
  .clase-indice, .clase-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20;
    width: auto; height: min(78vh, 620px);
    border: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 40px rgba(11, 13, 18, .22);
    transform: translateY(100%);
    transition: transform .2s ease;
    /* Sitio para la barra de abajo, que va por encima: sin esto el pie del cajón —el
       botón de guardar, cuántas preguntas quedan— desaparece detrás de ella. */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .clase:not(.plegado-indice)  .clase-indice { transform: none; }
  .clase:not(.plegado-trabajo) .clase-panel  { transform: none; }

  /* El asa: dice que esto es un cajón y no una pantalla nueva. */
  .clase-asa {
    display: block; flex-shrink: 0;
    width: 40px; height: 4px; margin: 10px auto 0;
    border-radius: var(--r-full); background: var(--borde-fuerte);
  }

  /* Las lengüetas laterales se van con las columnas: en móvil se abre desde abajo. Se
     repite la especificidad de la regla que las enciende; con el selector corto, la de
     `.clase.plegado-*` seguía ganando y quedaban dos botones flotando sobre el video. */
  .clase.plegado-indice  .clase-lengueta-izq,
  .clase.plegado-trabajo .clase-lengueta-der,
  .clase-lengueta-izq, .clase-lengueta-der { display: none; }

  /* El velo, solo con un cajón abierto. Cerrar tocando fuera es la salida esperada. */
  .clase-velo { position: fixed; inset: 0; z-index: 19; background: rgba(11, 13, 18, .45); }
  .clase:not(.plegado-indice)  .clase-velo,
  .clase:not(.plegado-trabajo) .clase-velo { display: block; }

  /* La barra de abajo: las tres zonas que en escritorio son columnas. */
  .clase-movil {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: sticky; bottom: 0; z-index: 21;
    padding: var(--e-2) var(--e-2) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
    background: var(--superficie); border-top: 1px solid var(--borde);
  }
  .clase-movil-boton {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 6px 0; background: none; border: 0; border-radius: var(--r-sm);
    font: inherit; font-size: 11px; color: var(--texto-2); cursor: pointer;
  }
  .clase-movil-boton.activo { color: var(--color-primario); }

  @media (prefers-reduced-motion: reduce) {
    .clase-indice, .clase-panel { transition: none; }
  }
}

/* ══ Tutor ═══════════════════════════════════════════════════════════════════

   Va debajo del contenido y no flotando encima: el tutor acompaña la actividad, no
   compite con ella. Un botón burbuja en la esquina —lo que hacía el prototipo— tapa
   contenido y reclama atención que el material necesita más.                          */

.tutor {
  margin-top: var(--e-7);
  padding: var(--e-5);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie);
  display: flex; flex-direction: column; gap: var(--e-4);
}

/* Lo primero es el alcance, no una invitación: quien pregunta necesita saber de qué sirve
   preguntar acá antes de escribir. En tono de dato, no de aviso. */
.tutor-cabecera {
  padding: var(--e-3) var(--e-4);
  background: var(--color-primario-suave); border-bottom: 1px solid var(--borde);
}
.tutor-cabecera p { margin: 0; font-size: var(--t-xs); line-height: var(--lh-normal); color: var(--texto-2); }
.tutor-cabecera strong { color: var(--texto); }

.tutor-hilo { display: flex; flex-direction: column; gap: var(--e-4); max-height: 420px; overflow-y: auto; }
.tutor-vacio { font-size: var(--t-sm); color: var(--texto-3); }

.tutor-mensaje { display: flex; flex-direction: column; gap: 5px; max-width: 86%; }
.tutor-quien { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin: 0; }
/* La esquina que apunta a quien habla: con el radio parejo, dos burbujas seguidas del
   mismo lado se leen como una sola. */
.tutor-texto {
  padding: var(--e-3); border-radius: var(--r-md) var(--r-md) var(--r-md) 3px;
  font-size: var(--t-sm); line-height: var(--lh-lectura);
}
.tutor-alumno .tutor-texto { border-radius: var(--r-md) var(--r-md) 3px var(--r-md); }

/* El alumno a la derecha y el tutor a la izquierda: la posición dice quién habla antes
   que el rótulo, que es lo que se lee al repasar una conversación larga. */
.tutor-alumno { align-self: flex-end; align-items: flex-end; }
.tutor-alumno .tutor-texto { background: var(--color-primario); color: var(--sobre-primario); }
.tutor-tutor .tutor-texto { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); }
.tutor-error .tutor-texto { background: var(--color-acento-suave); border-color: transparent; color: var(--color-acento-fuerte); }

/* Mientras se espera. Sin animación cuando el sistema pide movimiento reducido. */
.tutor-esperando .tutor-texto { color: var(--texto-3); animation: tutor-latido 1.1s ease-in-out infinite; }
@keyframes tutor-latido { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tutor-esperando .tutor-texto { animation: none; } }

/* En fila y no en columna: el `form` global apila sus hijos, y sin decirlo aquí el botón
   de enviar caía debajo del campo ocupando una línea entera del panel. */
.tutor-form { display: flex; flex-direction: row; gap: var(--e-3); align-items: flex-start; }
.tutor-form textarea { flex-grow: 1; min-width: 0; min-height: 46px; resize: vertical; }
.tutor-form .btn { flex-shrink: 0; }
/* Botón cuadrado con la flecha: al lado de un campo de dos líneas, «Preguntar» escrito
   ocupa el ancho de media caja de texto. */
.tutor-enviar { width: 46px; height: 46px; min-height: 0; padding: 0; }
.tutor-enviar.pensando { opacity: .6; }

.tutor-pie { font-size: var(--t-xs); color: var(--texto-3); line-height: var(--lh-normal); }
.tutor-pie strong { color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* Etiqueta que solo existe para quien usa lector de pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* En pantalla estrecha el hilo ocupa el ancho, pero el formulario se queda en fila: con
   el botón apilado debajo, el campo y el botón sumaban más alto del que tiene el cajón y
   el pie —cuántas preguntas quedan— caía fuera. El botón es un icono cuadrado; no
   necesita línea propia. */
@media (max-width: 560px) {
  .tutor-mensaje { max-width: 100%; }
}

/* La nota del curso, cuando el curso pondera. Discreta: acompaña al avance, no lo
   sustituye —terminar el curso sigue siendo lo que decide el certificado. */
.aula-nota { font-size: var(--t-sm); color: var(--texto-2); }
.aula-nota strong { font-size: var(--t-md); color: var(--texto); font-variant-numeric: tabular-nums; }
.aula-nota-detalle { color: var(--texto-3); font-size: var(--t-xs); }
.lista-avisos { margin: var(--e-2) 0 0; padding-left: var(--e-4); display: flex; flex-direction: column; gap: var(--e-1); }

/* ── Notas ─────────────────────────────────────────────────────────────────
   El cuaderno del alumno. Privado: nadie más lo ve, y la pantalla lo dice —quien sospecha
   que le leen el cuaderno escribe distinto, o no escribe. */

/* La lista rueda y el formulario se queda: escribir un apunte no debería obligar a bajar
   hasta el final de los que ya hay. */
.notas { display: flex; flex-direction: column; height: 100%; }
.notas-lista {
  flex-grow: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4);
}
.notas-vacio { font-size: var(--t-sm); color: var(--texto-3); line-height: var(--lh-lectura); }

/* Un apunte del alumno. Se llamaba `.nota` y chocaba con la calificación de un intento,
   que es otra cosa entera y estaba definida antes en esta misma hoja. */
.apunte {
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie-2);
  padding: var(--e-3);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.nota-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }

/* La marca es un botón porque lleva al minuto: si no fuera pulsable, la nota sería un
   recorte suelto y no una forma de volver. */
.nota-marca {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-sm);
  background: var(--color-primario-suave); border: 0;
  color: var(--color-primario); font: inherit;
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.nota-marca:hover { background: var(--color-primario); color: var(--sobre-primario); }
.nota-marca-sin { background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto-2); cursor: default; }
.nota-marca-sin:hover { background: var(--superficie-2); color: var(--texto-2); }
/* La fecha va con la marca y no bajo el texto: lo que se busca en una columna de apuntes
   es «el de hoy», y bajo el texto queda fuera del barrido. */
.nota-fecha { margin-left: auto; font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }

.nota-borrar {
  width: 24px; height: 24px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--texto-3); font-size: 16px; line-height: 1; cursor: pointer;
}
.nota-borrar:hover { background: var(--color-acento-suave); color: var(--color-acento); }

.nota-texto { font-size: var(--t-sm); line-height: var(--lh-lectura); color: var(--texto); white-space: pre-wrap; }

.notas-form {
  flex-shrink: 0; display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-2);
  border-top: 1px solid var(--borde); background: var(--superficie);
}
.notas-form textarea { min-height: 74px; resize: vertical; font-size: var(--t-sm); }
.notas-acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
/* En qué minuto va a quedar el apunte, antes de guardarlo: sin eso hay que guardarlo para
   descubrir si tomó la marca. */
.notas-momento { font-size: var(--t-xs); color: var(--color-primario); font-weight: 600; font-variant-numeric: tabular-nums; }
.notas-pie { flex-shrink: 0; padding: 0 var(--e-4) var(--e-4); font-size: var(--t-xs); color: var(--texto-3); }
.notas-error {
  flex-shrink: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-sm);
  background: var(--color-acento-suave); color: var(--color-acento-fuerte); font-size: var(--t-xs);
}

/* ══ Campus del alumno ═══════════════════════════════════════════════════════

   La pantalla a la que se vuelve. El orden lo manda lo que necesita quien retoma:
   seguir donde quedó, ver sus cursos con qué toca ahora, y ver hacia qué certificación
   van. Antes era un título y una barra por curso, que no dice qué hacer.            */

.campus { gap: var(--e-7); }

/* ── Retomar ──
   Ocupa el ancho y va antes que nada: es la única acción que importa al entrar. */
.retomar {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
  box-shadow: var(--elevacion-1, var(--sombra-1));
}
@media (max-width: 760px) { .retomar { grid-template-columns: minmax(0, 1fr); } }

.retomar-portada { display: block; }
.retomar-portada .portada { height: 100%; aspect-ratio: auto; min-height: 178px; }

.retomar-cuerpo { display: flex; flex-direction: column; gap: var(--e-4); justify-content: center; padding: var(--e-5) var(--e-6); min-width: 0; }
.retomar-donde {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}
.retomar-donde svg { color: var(--color-primario); flex-shrink: 0; }
.retomar-cuerpo h1 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.025em; line-height: 1.2; }

.retomar-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-5); flex-wrap: wrap; }
.retomar-avance { display: flex; align-items: center; gap: var(--e-3); flex-grow: 1; max-width: 420px; min-width: 200px; }
.retomar-avance .barra { flex-grow: 1; height: 7px; background: var(--superficie-2); border: 1px solid var(--borde); }
.retomar-avance span { font-size: var(--t-sm); color: var(--texto-2); white-space: nowrap; }
.retomar-avance strong { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ── Tarjeta de curso en el campus ── */
.campus-avance { display: flex; align-items: center; gap: var(--e-3); }
.campus-avance .barra { flex-grow: 1; height: 6px; background: var(--superficie-2); border: 1px solid var(--borde); }
.campus-pct { font-size: var(--t-xs); font-weight: 700; color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* Qué toca ahora. Un porcentaje solo no le dice a nadie qué hacer al volver. */
.campus-siguiente { font-size: var(--t-xs); color: var(--texto-3); }
.campus-listo {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--color-exito);
}
.btn-ancho { width: 100%; justify-content: center; }

/* ── Certificación en curso ── */
.campus-cert {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(var(--e-5), 4vw, var(--e-8));
  align-items: center;
  padding: var(--e-5) var(--e-6);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); box-shadow: var(--elevacion-1, var(--sombra-1));
}
@media (max-width: 760px) { .campus-cert { grid-template-columns: minmax(0, 1fr); } }

.campus-cert-texto h3 { font-size: var(--t-md); letter-spacing: -.015em; }
.campus-cert-texto h3 a { color: inherit; text-decoration: none; }
.campus-cert-texto h3 a:hover { color: var(--color-primario); }
.campus-cert-texto .meta { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texto-2); }

.campus-cert-avance { display: flex; flex-direction: column; gap: var(--e-2); }
.campus-cert-cifra { font-size: var(--t-sm); color: var(--texto-2); }
.campus-cert-cifra strong { font-size: var(--t-lg); color: var(--texto); font-variant-numeric: tabular-nums; }
.campus-cert-avance .barra { height: 8px; background: var(--superficie-2); border: 1px solid var(--borde); }
.campus-cert-falta { font-size: var(--t-xs); color: var(--texto-3); }

/* ══ Catálogo con filtros ════════════════════════════════════════════════════

   El formulario entero es un GET: los filtros quedan en la URL, así que un catálogo
   filtrado se puede compartir o guardar en marcadores. Sin JavaScript sigue funcionando
   con el botón «Buscar».                                                             */

.catalogo-busqueda { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e-3); align-items: center; }
@media (max-width: 760px) { .catalogo-busqueda { grid-template-columns: minmax(0, 1fr); } }

.campo-busqueda {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 48px; padding: 0 var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--superficie);
}
.campo-busqueda svg { color: var(--texto-3); flex-shrink: 0; }
.campo-busqueda input { border: 0; min-height: 0; padding: 0; background: none; }
.campo-busqueda input:focus { outline: none; }

.campo-orden { display: flex; align-items: center; gap: var(--e-3); }
.campo-orden label { font-size: var(--t-sm); color: var(--texto-2); white-space: nowrap; }
.campo-orden select { width: auto; min-height: 48px; }

/* El grid de dos columnas vive DENTRO del formulario: los filtros y los resultados son
   partes del mismo GET, y sacarlos a hermanos obligaría a duplicar el estado en la URL. */
.catalogo-columnas {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(var(--e-5), 3vw, var(--e-7));
  align-items: start;
}
@media (max-width: 900px) { .catalogo-columnas { grid-template-columns: minmax(0, 1fr); } }

.catalogo-filtros {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); padding: var(--e-5);
  display: flex; flex-direction: column; gap: var(--e-5);
}
.catalogo-filtros fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.catalogo-filtros fieldset + fieldset { border-top: 1px solid var(--borde); padding-top: var(--e-5); }
.catalogo-filtros legend {
  padding: 0 0 var(--e-2);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}

.filtro { display: flex; align-items: center; gap: var(--e-3); cursor: pointer; font-size: var(--t-sm); line-height: 1.35; color: var(--texto-2); }
.filtro:hover { color: var(--texto); }
.filtro input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--color-primario); margin: 0; }
.filtro input:checked + span { color: var(--texto); font-weight: 600; }
.filtro-cuenta { margin-left: auto; font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.filtro-todos { color: var(--color-primario); }

.catalogo-resultados { display: flex; flex-direction: column; gap: var(--e-5); min-width: 0; }
.catalogo-cuenta { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); font-size: var(--t-sm); color: var(--texto-2); }
.catalogo-cuenta strong { color: var(--texto); font-variant-numeric: tabular-nums; }
.catalogo-cuenta .campo-orden select { min-height: 36px; }

/* ── Colgar recursos por lote ────────────────────────────────────────────
   Agrupado por tipo de recurso y no por unidad: quien cuelga los recursos tiene las diez
   direcciones de video en una lista y los PDF en una carpeta, y trabaja por lote. */
.form-pendientes { display: flex; flex-direction: column; gap: var(--e-6); }

.lote {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.lote-cabecera { padding: var(--e-5) var(--e-5) var(--e-4); }
.lote-cabecera h2 {
  display: flex; align-items: center; gap: var(--e-3);
  font-family: var(--fuente-titulos); font-size: var(--t-lg); letter-spacing: -.025em;
}
.lote-cabecera h2 svg { color: var(--color-primario); }
.lote-cabecera h2 span { font-weight: 500; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.lote-cabecera .ayuda { margin-top: var(--e-2); max-width: 90ch; }

/* Qué es a la izquierda y dónde se llena a la derecha: la fila se lee de un lado a otro
   sin tener que buscar a qué actividad pertenece cada campo. */
.lote-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--e-4); align-items: start;
  padding: var(--e-4) var(--e-5); border-top: 1px solid var(--borde);
}
.lote-que { min-width: 0; }
.lote-titulo { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.lote-donde { margin: 2px 0 0; font-size: var(--t-xs); color: var(--texto-2); }
.lote-campos { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; }
.lote-campos .campo { flex: 1 1 220px; min-width: 0; }
.lote-campos .campo-corto { flex: 0 0 130px; }
.btn-corto { flex-shrink: 0; white-space: nowrap; }

.acciones-pendientes { flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.acciones-pendientes .ayuda { flex: 1 1 320px; margin: 0; }

@media (max-width: 820px) {
  .lote-fila { grid-template-columns: minmax(0, 1fr); }
}

/* Los nombres de las interactivas, para copiarlos al archivo. Sin esta lista hay que ir a
   buscarlos a la base o adivinarlos, y el error solo aparece al importar. */
.tarjeta-formulario .seccion-titulo + * { margin-top: 0; }
.tarjeta-formulario h3.seccion-titulo { margin-top: var(--e-4); }
.lista-slugs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.lista-slugs li { display: flex; align-items: baseline; gap: var(--e-3); font-size: var(--t-xs); }
.lista-slugs code { flex-shrink: 0; color: var(--color-primario); }
.lista-slugs span { color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filtros-cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  font-size: var(--t-sm); font-weight: 700;
}
/* Con JavaScript los filtros se aplican solos y este botón sobra; sin él es la única
   forma de aplicarlos. Se esconde desde el propio guion, no desde la hoja. */
.filtros-aplicar { justify-content: center; }

/* ── Fila de curso ─────────────────────────────────────────────────────────
   Con tres cursos una tarjeta vertical basta; con cuarenta, el resumen recortado a cien
   caracteres deja de decir de qué va cada uno. La fila le da sitio entero. */

.catalogo-filas { display: flex; flex-direction: column; gap: var(--e-4); }

.curso-fila {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 180px;
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
  box-shadow: var(--elevacion-1, var(--sombra-1));
  transition: box-shadow .18s ease;
}
.curso-fila:hover { box-shadow: var(--elevacion-2, var(--sombra-2)); }
@media (prefers-reduced-motion: reduce) { .curso-fila { transition: none; } }
@media (max-width: 860px) { .curso-fila { grid-template-columns: minmax(0, 1fr); } }

.curso-fila-portada { display: block; }
.curso-fila-portada .portada { height: 100%; aspect-ratio: auto; min-height: 150px; }

.curso-fila-cuerpo { padding: var(--e-5) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); justify-content: center; min-width: 0; }
.curso-fila-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-3);
  font-size: var(--t-xs); color: var(--texto-3);
}
.curso-fila-meta > span:not(.pastilla) { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.curso-fila h2 { font-size: var(--t-md); letter-spacing: -.015em; line-height: 1.3; }
.curso-fila h2 a { color: inherit; text-decoration: none; }
.curso-fila h2 a:hover { color: var(--color-primario); }
.curso-fila-resumen { font-size: var(--t-sm); line-height: var(--lh-lectura); color: var(--texto-2); }

.curso-fila-accion {
  padding: var(--e-5); display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid var(--borde); background: var(--superficie-2);
}
.curso-fila-accion .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) { .curso-fila-accion { border-left: 0; border-top: 1px solid var(--borde); } }

/* ── El certificado, a la vista ────────────────────────────────────────────
   Se compra lo que se ve, y hasta ahora el documento no aparecía en ninguna parte hasta
   que alguien lo obtenía. Los datos son de muestra y la pantalla lo dice sin decirlo:
   «Nombre del egresado» y un folio con X no se confunden con uno real. */

.hero-muestra { position: relative; }
@media (max-width: 980px) { .hero-muestra { display: none; } }

.muestra-cert {
  background: var(--superficie);
  border-radius: var(--r-md);
  padding: var(--e-6) var(--e-5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
  /* La inclinación mínima lo lee como objeto y no como otro bloque de la página. */
  transform: rotate(-1.4deg);
  display: flex; flex-direction: column; gap: var(--e-4);
}
.muestra-cert header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3);
  padding-bottom: var(--e-3); border-bottom: 1px solid var(--borde);
}
.muestra-institucion {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-3); line-height: 1.45;
}
.muestra-sigla {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-acento); flex-shrink: 0;
}

.muestra-cuerpo { display: flex; flex-direction: column; gap: var(--e-1); }
.muestra-rotulo { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.muestra-nombre { font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em; color: var(--texto); }
.muestra-texto { font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--texto-2); margin-top: var(--e-1); }
.muestra-texto strong { color: var(--texto); }

.muestra-cert footer {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4);
  padding-top: var(--e-3); border-top: 1px solid var(--borde);
}
.muestra-firma { display: flex; flex-direction: column; gap: var(--e-1); font-size: 10px; color: var(--texto-3); }
.muestra-linea { width: 92px; height: 1px; background: var(--borde-fuerte); }
.muestra-folio { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 9.5px; color: var(--texto-3); }
.muestra-folio .folio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; color: var(--color-primario); }

/* ── Por qué el documento vale ─────────────────────────────────────────── */

.respaldo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(var(--e-6), 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .respaldo { grid-template-columns: minmax(0, 1fr); } }
.respaldo-titulo h2 { font-size: clamp(24px, 2.8vw, 30px); letter-spacing: -.025em; margin-top: var(--e-2); }

.respaldo-puntos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-5); }
.respaldo-puntos > div { display: flex; flex-direction: column; gap: var(--e-2); }
.respaldo-puntos svg { color: var(--color-primario); }
.respaldo-puntos h3 { font-size: var(--t-base); letter-spacing: -.01em; }
.respaldo-puntos p { font-size: var(--t-sm); line-height: var(--lh-lectura); color: var(--texto-2); }

/* ══ Administración ══════════════════════════════════════════════════════════

   El menú de secciones. No existía: se llegaba a «Cursos» desde la barra y de ahí no
   había forma de alcanzar el resto — la personalización de la plataforma, que es lo
   que un cliente toca el primer día, vivía en una URL que solo conocía quien la
   escribió.                                                                          */


/* Columna lateral y no tira horizontal: son seis secciones que se visitan alternando, y
   una tira que se lee de izquierda a derecha obliga a recordar dónde estaba cada una. En
   oscuro, además, separa la gestión del sitio público de un vistazo. */
.nav-admin {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--e-4) var(--e-3);
  background: var(--barra-fondo, var(--texto)); color: var(--barra-texto, #FFFFFF);
  border-radius: var(--r-lg);
  align-self: start; position: sticky; top: calc(var(--barra-alto, 60px) + var(--e-4));
}
.nav-admin::before {
  content: 'Administración';
  padding: var(--e-2) var(--e-3) var(--e-3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--barra-texto-2, var(--texto-3));
}
.nav-admin a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--barra-texto-2, var(--texto-2)); text-decoration: none;
}
.nav-admin a:hover { background: rgba(255,255,255,.08); color: var(--barra-texto, var(--texto)); }
.nav-admin a svg { color: currentColor; flex-shrink: 0; opacity: .8; }
/* La activa se marca con fondo y color, no solo con peso: un menú de seis entradas sin
   ninguna marcada obliga a leerlas todas para saber dónde estás. */
.nav-admin a.activa { background: var(--color-primario); color: var(--sobre-primario); }
.nav-admin a.activa svg { color: currentColor; opacity: 1; }

@media (max-width: 640px) {
  .nav-admin { overflow-x: auto; flex-wrap: nowrap; }
  .nav-admin a span { white-space: nowrap; }
}

/* La personalización es un formulario de ajustes, no un documento: en una columna son
   cuatro mil píxeles de alto y hay que hacer scroll para comparar dos colores. En dos
   columnas los cinco grupos caben casi de una vez. */
/* Una columna y no dos: los grupos se leen en orden —apariencia, marca, colores,
   institución— y en dos columnas el orden deja de existir. El ancho se topa donde un
   formulario de dos campos por fila sigue siendo cómodo. */
.identidad-grupos { display: flex; flex-direction: column; gap: var(--e-5); max-width: 1000px; }
/* El botón de la barra es más bajo que uno de página: la barra mide 60 px y un botón de
   48 la llena entera. */
.btn-menu { min-height: 36px; padding: 0 var(--e-4); font-size: var(--t-sm); }

/* ── Casillas y radios ─────────────────────────────────────────────────────
   El estilo del navegador los pinta con el fondo de la página: en modo oscuro un radio
   sin marcar salía como un círculo blanco relleno, indistinguible de uno elegido. Se
   dibujan a mano para que digan lo mismo en los dos modos. */

input[type="radio"], input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; flex-shrink: 0; margin: 0;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--superficie);
  cursor: pointer;
  display: inline-grid; place-content: center;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 4px; }

input[type="radio"]::before, input[type="checkbox"]::before {
  content: ''; width: 9px; height: 9px; transform: scale(0);
  transition: transform .1s ease-in-out;
  background: var(--sobre-primario);
}
input[type="radio"]::before { border-radius: 50%; }
input[type="checkbox"]::before {
  /* La marca de verificación, dibujada con clip-path: un carácter «✓» cambia de forma con
     la tipografía que el cliente elija. */
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 6%, 38% 68%);
  width: 11px; height: 11px;
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
  background: var(--color-primario); border-color: var(--color-primario);
}
input[type="radio"]:checked::before, input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primario); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  input[type="radio"]::before, input[type="checkbox"]::before { transition: none; }
}

/* ══ Verificación pública y errores ══════════════════════════════════════════

   Las dos las abre alguien que no esperaba estar ahí: un empleador comprobando un
   documento, o cualquiera que siguió un enlace roto. Una caja de color y un enlace
   sueltos hacen dudar de si la plataforma funciona.                                 */

.verificar { max-width: 560px; margin: var(--e-7) auto; display: flex; flex-direction: column; gap: var(--e-6); }
.verificar-cabecera { display: flex; flex-direction: column; gap: var(--e-3); }
.verificar-cabecera svg { color: var(--color-primario); }
.verificar-cabecera h1 { font-size: clamp(24px, 3vw, 30px); letter-spacing: -.025em; }
.verificar-cabecera p { color: var(--texto-2); line-height: var(--lh-lectura); }

.verificar-form { display: flex; flex-direction: column; gap: var(--e-4); }
.verificar-form .campo { display: flex; flex-direction: column; gap: var(--e-2); }
.verificar-form label { font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); }
/* El código se lee y se teclea carácter a carácter: monoespaciada y con aire entre letras
   para que un 0 no se confunda con una O al comprobarlo. */
.verificar-form input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-md); letter-spacing: .06em;
}
.verificar-form .btn { align-self: flex-start; }
.verificar-nota { font-size: var(--t-xs); color: var(--texto-3); line-height: var(--lh-lectura); }

/* ── Errores ── */

/* Centrado de verdad: el bloque quedaba centrado y su contenido alineado a la
   izquierda, con lo que la página entera se leía torcida. */
/* El error es una tarjeta alineada a la izquierda, no un bloque centrado: se lee como
   una nota que explica qué pasó, y el texto centrado a tres líneas se lee peor. La copia
   no cambia; cambia el orden de peso —código, titular, explicación, salidas—. */
.error-pagina {
  max-width: 560px; margin: var(--e-8) auto;
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: var(--e-7) var(--e-6) var(--e-6);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
/* El código en monoespaciada y en acento: es un dato técnico, y lo que lo distingue del
   titular es que no está escrito en palabras. */
.error-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .1em;
  color: var(--color-acento-fuerte); font-variant-numeric: tabular-nums;
}
.error-pagina h1 { font-size: clamp(24px, 3vw, 28px); letter-spacing: -.03em; text-wrap: balance; }
.error-texto { color: var(--texto-2); line-height: var(--lh-lectura); }
.error-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-4); }

/* ══ Antes del examen ════════════════════════════════════════════════════════

   Que nadie empiece sin saber a qué se compromete: preguntas, tiempo, intentos que le
   quedan. Todo antes del botón y no en una nota al pie.                             */

.evaluacion-portada { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--e-5); }
.ev-cabecera { display: flex; flex-direction: column; gap: var(--e-2); }
.ev-cabecera h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }

/* El resultado previo va arriba y con color: quien vuelve a esta pantalla suele venir a
   ver cómo le fue, no a rendir otra vez. */
.ev-resultado {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5); border-radius: var(--r-md);
}
.ev-resultado svg { flex-shrink: 0; margin-top: 2px; }
.ev-resultado-titulo { font-size: var(--t-md); font-weight: 700; letter-spacing: -.01em; }
.ev-resultado-nota { font-size: var(--t-sm); margin-top: var(--e-1); }
.ev-resultado-nota strong { font-variant-numeric: tabular-nums; }
.ev-aprobado { background: var(--color-exito-suave); color: var(--color-exito); }
.ev-reprobado { background: var(--color-acento-suave); color: var(--color-acento-fuerte); }

.ev-condiciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  margin: 0; background: var(--borde);
  border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden;
}
.ev-condiciones > div { padding: var(--e-4) var(--e-5); background: var(--superficie); }
.ev-condiciones dt {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}
.ev-condiciones dd { margin: var(--e-2) 0 0; font-size: var(--t-lg); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ev-condiciones-nota { font-size: var(--t-sm); font-weight: 400; color: var(--texto-3); letter-spacing: 0; }

.ev-accion { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
/* El botón se dimensiona por su texto: uno de 680 px de ancho para «Continuar el curso»
   parece un banner, no una acción. */
.ev-accion .btn { flex-grow: 0; }
.ev-nota { width: 100%; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-3); }
.ev-aviso { color: var(--color-acento); }
.ev-aviso svg { flex-shrink: 0; }
.ev-sin-intentos {
  width: 100%; display: flex; align-items: flex-start; gap: var(--e-2);
  font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura);
}
.ev-sin-intentos svg { flex-shrink: 0; margin-top: 2px; color: var(--texto-3); }

/* NOTA: este bloque se perdió una vez al reemplazar la sección vecina buscando por
   los comentarios que la abren y la cierran. Lo que quedaba en medio se fue con
   ella y nadie lo notó hasta abrir la analítica. */
/* ══ Analítica ═══════════════════════════════════════════════════════════════

   Un panel se escanea, no se lee. Manda el titular —las cifras— y el detalle viene
   después; y donde hay un número que exige atención, la forma lo dice antes que la
   cifra: una barra corta, una pastilla, un filete.                                   */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); }
.cifras article {
  padding: var(--e-5);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie);
}
/* La cifra es el titular de su tarjeta: en cuerpo de título y no de párrafo, porque es
   lo único que se lee de un panel de cinco. */
.cifra {
  font-family: var(--fuente-titulos);
  font-size: 34px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.cifra-rotulo { margin-top: var(--e-2); font-size: var(--t-xs); color: var(--texto-2); line-height: 1.45; }
/* Cero activos en una semana no es un dato neutro: es la señal de que nadie entró. */
.cifra-apagada .cifra { color: var(--texto-3); }

/* ── Paneles de la analítica ───────────────────────────────────────────── */

/* Cada bloque en su tarjeta: la serie y la tabla son dos lecturas distintas, y sobre el
   fondo de la página se leían como una sola columna de cosas. */
.tarjeta-panel {
  padding: var(--e-5);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
/* La lista llega hasta el borde de la tarjeta: sus reglas son las de la tarjeta. */
.tarjeta-panel-lista { padding: var(--e-5) 0 0; overflow: hidden; }
.tarjeta-panel-lista > .panel-cabecera,
.tarjeta-panel-lista > .vacio { padding: 0 var(--e-5) var(--e-4); }

.panel-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}
.panel-cabecera h2 { font-size: var(--t-lg); letter-spacing: -.025em; margin: var(--e-1) 0 0; }
.panel-cabecera .sub { margin-top: var(--e-1); }

/* ── Serie diaria ──────────────────────────────────────────────────────── */

.serie-leyenda {
  display: flex; gap: var(--e-5); flex-wrap: wrap; margin: var(--e-4) 0 0;
  font-size: var(--t-xs); color: var(--texto-2);
}
.serie-leyenda > span { display: inline-flex; align-items: center; gap: 7px; }
.serie-muestra { width: 10px; height: 10px; border-radius: 3px; background: var(--color-primario); }
.serie-muestra-vacia { background: var(--borde-fuerte); }

.serie { display: flex; align-items: flex-end; gap: 6px; padding: var(--e-4) 0 0; }
.serie-columna { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); }
/* El hueco fija la altura del gráfico y la barra crece dentro. Antes la altura la ponía
   la columna entera, así que el rótulo del día se comía parte de la escala. */
.serie-hueco { width: 100%; height: 132px; display: flex; align-items: flex-end; }
.serie-barra { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--color-primario); }
/* El día sin actividad no desaparece: se queda en gris y a ras del eje. Una serie sin
   huecos se lee como continuidad. */
.serie-vacia { background: var(--borde-fuerte); }
.serie-dia { font-size: 11px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
/* El último día se marca en el eje: es el que dice si la caída es de ayer o de hace una
   semana, y en una fila de catorce números iguales no se distingue. */
.serie-ultimo .serie-dia { color: var(--texto); font-weight: 600; }

/* ── Por curso ─────────────────────────────────────────────────────────── */

/* La lista va pegada al borde de la tarjeta; el envoltorio solo la deja desbordar en
   pantalla estrecha sin romper el radio. */
.lista-cursos-analitica { overflow-x: auto; }
.fila-analitica {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px 220px 100px;
  gap: var(--e-4); align-items: center;
  padding: var(--e-3) var(--e-5); border-top: 1px solid var(--borde);
}
.fila-analitica-cabecera {
  background: var(--superficie-2);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2);
}
.fila-analitica .num { text-align: right; font-variant-numeric: tabular-nums; }
.fila-analitica-curso { font-size: var(--t-sm); font-weight: 600; min-width: 0; }
.fila-analitica-ir { text-align: right; }

@media (max-width: 900px) {
  .fila-analitica { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e-2); }
  .fila-analitica-cabecera { display: none; }
  .fila-analitica .num, .fila-analitica-ir { text-align: left; }
}

/* ── Tablas de datos ───────────────────────────────────────────────────── */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-md); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 620px; }
.tabla th {
  text-align: left; padding: var(--e-3) var(--e-4);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-3); background: var(--superficie-2);
  border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla td { padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .apagado { color: var(--texto-3); }
.tabla .acciones-celda { text-align: right; white-space: nowrap; }

.tasa { display: flex; align-items: center; gap: var(--e-3); min-width: 150px; }
.tasa .barra { flex-grow: 1; height: 7px; background: var(--borde); border: 0; }
.tasa-valor { font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

/* Color con criterio, no decorativo: sobre 60 el curso funciona, entre 35 y 60 es
   normal, y por debajo hay algo que mirar. Así el curso con problema salta antes de
   leer el número —que es lo que se pide de una columna de veinte filas—. */
.tasa-bien  .barra-relleno { background: var(--color-exito); }
.tasa-medio .barra-relleno { background: var(--color-primario); }
.tasa-flojo .barra-relleno { background: var(--color-acento); }

.pastilla-ok { background: var(--color-exito-suave); color: var(--color-exito); border-color: transparent; }
.pastilla-atencion { background: var(--color-acento-suave); color: var(--color-acento-fuerte); border-color: transparent; }

/* ── Embudo ────────────────────────────────────────────────────────────── */

.embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.embudo li { display: flex; flex-direction: column; gap: var(--e-2); }
.embudo-fila { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); }
.embudo-icono { display: inline-flex; color: var(--texto-3); flex-shrink: 0; }
.embudo-titulo { flex-grow: 1; min-width: 0; }
.embudo-cifras { color: var(--texto-3); font-size: var(--t-xs); white-space: nowrap; font-variant-numeric: tabular-nums; }
.embudo-cifras strong { color: var(--texto); }

/* Dos barras superpuestas: la clara es quién llegó, la sólida quién terminó. El hueco
   entre ambas ES la gente que se quedó ahí, y por eso se ve sin leer ningún número. */
.embudo-barra { position: relative; height: 10px; border-radius: var(--r-full); background: var(--superficie-2); overflow: hidden; }
.embudo-llegaron { position: absolute; inset: 0 auto 0 0; background: var(--color-primario-suave); }
.embudo-completaron { position: absolute; inset: 0 auto 0 0; background: var(--color-primario); }

.embudo-alerta .embudo-completaron { background: var(--color-acento); }
.embudo-nota { font-size: var(--t-xs); color: var(--color-acento); }

/* ── Evaluación que todavía no está preparada ───────────────────────────
   El aviso al alumno va en tono neutro; la caja de arreglo, en el color de aviso, porque
   solo la ve quien puede hacer algo con ella. */

.ev-sin-preparar { color: var(--texto-2); max-width: var(--ancho-lectura); }

.ev-arreglo {
  margin-top: var(--e-5); padding: var(--e-4);
  border: 1px solid var(--color-acento); border-left-width: 3px;
  border-radius: var(--r-md); background: var(--color-acento-suave);
  max-width: var(--ancho-lectura);
}
.ev-arreglo p { margin: 0 0 var(--e-3); font-size: var(--t-sm); }

.ev-volver { margin-top: var(--e-5); }

/* ── Configurar la prueba de una evaluación ─────────────────────────────
   Va debajo del formulario de la actividad, dentro del mismo plegable, separada por una
   regla: son dos guardados distintos y hay que verlo antes de pulsar el botón. */

.form-evaluacion {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
}
.form-evaluacion-titulo { margin: 0 0 var(--e-4); font-size: var(--t-base); }

.campo-booleano-ayuda { margin-top: calc(var(--e-2) * -1); margin-bottom: var(--e-3); }

.form-evaluacion-nota {
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px dashed var(--borde);
  max-width: 80ch;
}

/* ── Dentro de un laboratorio ───────────────────────────────────────────
   El embudo de arriba dice qué actividad se atasca; esto, en qué decisión. Se dibuja
   igual que el embudo a propósito: es la misma pregunta un nivel más adentro, y usar
   otro lenguaje visual haría creer que se mide otra cosa. */

.laboratorios { display: flex; flex-direction: column; gap: var(--e-5); }

.laboratorio {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); padding: var(--e-4);
}
.laboratorio-cabecera { margin-bottom: var(--e-4); }
.laboratorio-cabecera h3 { margin: 0; font-size: var(--t-md); }
.laboratorio-cabecera .meta { margin-top: var(--e-1); font-size: var(--t-xs); color: var(--texto-3); }

/* `lab-` por delante porque `.pasos` ya es de la portada —«Cómo funciona»— y allí sus
   hijos van en columna. Un nombre repetido no lo detecta el buscador de clases huérfanas:
   la clase tiene estilo, solo que el de otro componente. */
.lab-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-4); }
.lab-pasos > li { display: flex; flex-direction: column; gap: var(--e-2); }

.paso-cabecera { display: flex; align-items: baseline; gap: var(--e-3); font-size: var(--t-sm); }
.paso-nombre { flex-grow: 1; min-width: 0; font-weight: 600; }
.paso-cifras {
  color: var(--texto-3); font-size: var(--t-xs);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: var(--e-2);
}
.paso-cifras strong { color: var(--texto); }

/* Cuánta gente no llegó a este paso. Sin esto, un paso con 100 % de acierto y tres
   personas se lee igual de bien que uno con treinta. */
.paso-abandono { color: var(--color-acento); font-weight: 700; }

.paso-alerta .paso-cifras strong { color: var(--color-acento); }

.paso-opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.paso-opciones > li { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-xs); }

/* El punto de color dice si la opción era la buena. Va antes del nombre porque es lo
   primero que se busca al leer la fila. */
.opcion-marca { width: 8px; height: 8px; border-radius: var(--r-full); flex-shrink: 0; }
.opcion-bien   { background: var(--color-exito); }
.opcion-mal    { background: var(--color-acento); }
.opcion-neutra { background: var(--borde); }

.opcion-nombre { color: var(--texto-2); white-space: nowrap; }
.opcion-barra {
  flex-grow: 1; height: 8px; border-radius: var(--r-full);
  background: var(--superficie-2); overflow: hidden;
}
.opcion-relleno { display: block; height: 100%; background: var(--color-primario-suave); }
.opcion-bien ~ .opcion-barra .opcion-relleno { background: var(--color-primario); }
.opcion-cifra { color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Quién va por dónde ─────────────────────────────────────────────────── */

.tabla-alumnos .nombre  { display: block; }
.tabla-alumnos .detalle { display: block; font-size: var(--t-xs); color: var(--texto-3); }

.celda-avance { display: flex; align-items: center; gap: var(--e-3); min-width: 180px; }

/* El enlace de la última columna no se parte en dos líneas: partido, cada fila crece y la
   tabla de veinte personas deja de leerse de un vistazo, que es para lo que existe. */
.tabla-alumnos td:last-child { white-space: nowrap; }
.barra-fina { flex-grow: 1; height: 6px; }
.avance-cifra { font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── El recorrido de una persona ────────────────────────────────────────
   Una línea de tiempo vertical y no una tabla: lo que se lee es hasta dónde llegó
   alguien, y en una tabla ese salto —la fila donde todo pasa a «sin abrir»— se pierde
   entre las columnas. */

.traza { list-style: none; margin: 0; padding: 0; }

.traza-unidad { margin: var(--e-6) 0 var(--e-3); }
.traza-unidad:first-child { margin-top: 0; }
.traza-unidad h2 {
  margin: 0; font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3);
}

.traza-item {
  position: relative;
  display: flex; gap: var(--e-4);
  padding: var(--e-3) 0 var(--e-3) var(--e-2);
}

/* La línea que une los hitos. Va en el ::before del punto y no en un borde del <li>
   para que no se dibuje por debajo del último, que es donde termina el recorrido. */
.traza-marca {
  position: relative; flex-shrink: 0;
  width: 11px; height: 11px; margin-top: 4px;
  border-radius: var(--r-full);
  background: var(--superficie); border: 2px solid var(--borde);
}
.traza-item:not(:last-child) .traza-marca::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 2px; height: calc(100% + var(--e-5));
  transform: translateX(-50%); background: var(--borde);
}
.traza-completada .traza-marca  { background: var(--color-exito); border-color: var(--color-exito); }
.traza-en_progreso .traza-marca { background: var(--color-acento); border-color: var(--color-acento); }

.traza-cuerpo { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.traza-cabecera { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.traza-icono { display: inline-flex; color: var(--texto-3); flex-shrink: 0; }
.traza-titulo { font-size: var(--t-sm); font-weight: 600; }
.traza-estado { margin-left: auto; }

/* Lo que nunca se abrió se apaga entero: la lista pasa a ser «hasta acá llegó» sin que
   haya que leer los estados uno por uno. */
.traza-sin_abrir .traza-titulo,
.traza-sin_abrir .traza-icono { color: var(--texto-3); }

.traza-datos {
  margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4);
  font-size: var(--t-xs); color: var(--texto-3);
}
.traza-nota { color: var(--texto-2); font-weight: 700; }

.traza-decisiones {
  list-style: none; margin: var(--e-1) 0 0; padding: var(--e-2) 0 var(--e-2) var(--e-3);
  border-left: 2px solid var(--borde);
  display: flex; flex-direction: column; gap: var(--e-1);
  font-size: var(--t-xs);
}
.traza-decisiones > li { display: flex; gap: var(--e-2); }
.decision-paso { font-weight: 600; color: var(--texto-2); }
.decision-opcion { color: var(--texto-3); }
.decision-bien .decision-paso { color: var(--color-exito); }
.decision-mal  .decision-paso { color: var(--color-acento); }

.pastilla-tenue { background: var(--superficie-2); color: var(--texto-3); border-color: transparent; }

/* ── Piezas que se usaban sin estilo ────────────────────────────────────────
   Las encontró tools/clases-huerfanas.mjs. Ninguna rompía nada: la página cargaba y
   simplemente se veía peor de lo debido, que es el modo en que estos huecos sobreviven. */

/* El envoltorio del contenido en las pantallas de administración. */
.admin-cuerpo { display: flex; flex-direction: column; gap: var(--e-6); }

/* La línea institucional del pie: es la que sostiene el argumento del producto y estaba
   con el mismo tamaño y color que el correo de soporte. */
.footer-institucion { color: var(--texto-2); }

/* «Volver» de la verificación pública: quien llega ahí no tiene cuenta y necesita una
   salida clara, no un enlace del mismo peso que el texto. */
.volver { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); font-weight: 600; }

/* Una respuesta corta se teclea, no se elige: no necesita el ancho de un párrafo. */
.respuesta-corta { max-width: 320px; }

/* Bloques de la portada que solo necesitan su propio aire. */
.seccion-como { gap: var(--e-6); }
.cierre-cuerpo { min-width: 0; }

/* El tema de ejemplo: navegación vertical fija y contenido al lado. Sin esto, el tema se
   veía como una columna azul y el contenido debajo. */
.lateral {
  position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 10;
  padding: var(--e-5);
  background: var(--color-primario); color: var(--sobre-primario);
  display: flex; flex-direction: column; gap: var(--e-5);
}
.lateral a { color: inherit; }
.contenido { margin-left: 240px; min-height: 100vh; }
@media (max-width: 860px) {
  .lateral { position: static; width: auto; flex-direction: row; align-items: center; }
  .contenido { margin-left: 0; }
}

/* ── Composición de un certificado ─────────────────────────────────────────
   Se perdieron con el mismo borrado que los estilos de la analítica. */

.fila-requisito { display: grid; grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr); gap: var(--e-3); }
@media (max-width: 720px) { .fila-requisito { grid-template-columns: minmax(0, 1fr); } }
.campo-grupo { text-align: center; font-variant-numeric: tabular-nums; }

/* Aviso de consecuencia: no es un error ni un logro, es algo que conviene saber antes de
   guardar. Por eso no usa ni el rojo del acento ni el verde del éxito. */
.aviso-cuidado {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura);
}
.aviso-cuidado svg { flex-shrink: 0; margin-top: 2px; color: var(--color-primario); }

/* ── Certificados obtenidos ────────────────────────────────────────────────
   El logro, no un elemento más de una parrilla. Una fila ancha en vez de una tarjeta de
   280 px suelta a la izquierda con tres cuartos de pantalla vacíos al lado. */

.obtenidos { display: flex; flex-direction: column; gap: var(--e-3); }

.obtenido {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--e-5);
  padding: var(--e-5) var(--e-6);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); box-shadow: var(--elevacion-1, var(--sombra-1));
}
@media (max-width: 760px) { .obtenido { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } }

.obtenido-sello {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-exito-suave); color: var(--color-exito);
}
.obtenido-cuerpo { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; }
.obtenido-cuerpo h3 { font-size: var(--t-md); letter-spacing: -.015em; line-height: 1.3; }
.obtenido-meta { font-size: var(--t-sm); color: var(--texto-2); }
.obtenido-folio {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs); color: var(--texto-3); letter-spacing: .04em;
}
.obtenido-acciones { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-2); }
.obtenido-acciones .enlace { font-size: var(--t-xs); text-align: center; }

/* ── Certificaciones en marcha ─────────────────────────────────────────── */

.cert-filas { display: flex; flex-direction: column; gap: var(--e-3); }
.cert-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(var(--e-5), 4vw, var(--e-7));
  padding: var(--e-5) var(--e-6);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); box-shadow: var(--elevacion-1, var(--sombra-1));
}
@media (max-width: 760px) { .cert-fila { grid-template-columns: minmax(0, 1fr); } }

.cert-fila-texto { display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cert-fila-texto h3 { font-size: var(--t-md); letter-spacing: -.015em; line-height: 1.3; }
.cert-fila-texto h3 a { color: inherit; text-decoration: none; }
.cert-fila-texto h3 a:hover { color: var(--color-primario); }
.cert-fila-desc { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }

.cert-fila-avance { display: flex; flex-direction: column; gap: var(--e-3); justify-content: center; }
.cert-fila-avance .barra { height: 8px; background: var(--superficie-2); border: 1px solid var(--borde); }

/* ══ Rindiendo ═══════════════════════════════════════════════════════════════

   Sin la navegación del sitio: durante un examen «Catálogo · Mis cursos» son
   distracciones y salidas accidentales de una pantalla con el reloj corriendo.      */

.evaluacion { max-width: 760px; margin: 0 auto; padding: 0 var(--e-5) var(--e-8); }

/* La cabecera queda fija: con cinco preguntas el reloj se pierde al hacer scroll, y es
   justo el dato que hay que tener delante. */
/* La barra sigue a la barra del sitio, no al papel: es la misma pieza —dónde estoy y
   cuánto llevo— y sobre blanco el cronómetro dejaba de ser lo que más contrasta. */
.ev-barra {
  position: sticky; top: 0; z-index: 5;
  margin-bottom: var(--e-6);
  background: var(--barra-fondo, var(--superficie));
  color: var(--barra-texto, var(--texto));
  border-bottom: 1px solid var(--barra-borde, var(--borde));
}
/* La barra cruza la pantalla; su contenido se alinea con la columna de preguntas. */
.ev-barra-caja {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-5);
  padding: var(--e-4) var(--e-5);
}
.ev-barra-texto h1 { font-size: var(--t-lg); letter-spacing: -.02em; }
.ev-barra-texto p { font-size: var(--t-xs); color: var(--barra-texto-2, var(--texto-3)); margin-top: 2px; }
.ev-barra-texto .completo { color: var(--color-exito); font-weight: 700; }

.cronometro {
  flex-shrink: 0;
  padding: var(--e-2) var(--e-4); border-radius: var(--r-full);
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: var(--t-sm); font-weight: 700; color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}
/* El último minuto cambia de color, no de tamaño: un elemento que crece mueve la página
   entera justo cuando la persona está leyendo una pregunta. */
.cronometro.urgente { background: var(--color-acento-suave); border-color: transparent; color: var(--color-acento-fuerte); }

.ev-salir {
  flex-shrink: 0;
  font-size: var(--t-sm); font-weight: 600; color: var(--barra-texto-2, var(--texto-3));
  text-decoration: none;
}
.ev-salir:hover { color: var(--barra-texto, var(--texto)); text-decoration: underline; }

.ev-entrega {
  margin-top: var(--e-6); padding-top: var(--e-5);
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: var(--e-4); align-items: flex-start;
}
.ev-entrega-nota { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }

@media (max-width: 560px) {
  .ev-barra-caja { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
  .ev-entrega .btn { width: 100%; justify-content: center; }
}

/* ══ Resultado de una evaluación ═════════════════════════════════════════════

   Lo que se mira al entregar es una sola cosa: si pasé o no.                        */

.resultado { max-width: 760px; margin: 0 auto; padding: var(--e-7) var(--e-5) var(--e-8); display: flex; flex-direction: column; gap: var(--e-6); }

/* Veredicto, cifras y salidas comparten tarjeta: son la misma respuesta —cómo me fue y
   qué hago ahora— y sueltos sobre el fondo se leían como tres cosas que se dieron la
   casualidad de estar juntas. */
.res-boletin {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}

.res-fallo {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-5);
}
.res-fallo.ok { background: var(--color-exito-suave); }
.res-fallo.no { background: var(--color-acento-suave); }

.res-icono { flex-shrink: 0; display: flex; }
.res-fallo.ok .res-icono { color: var(--color-exito); }
.res-fallo.no .res-icono { color: var(--color-acento-fuerte); }

.res-fallo-texto { flex: 1; min-width: 0; }
/* El eyebrow hereda el azul de marca y sobre el fondo del veredicto queda de otro sitio. */
.res-fallo .eyebrow { opacity: .8; }
.res-fallo.ok .eyebrow { color: var(--color-exito); }
.res-fallo.no .eyebrow { color: var(--color-acento-fuerte); }
.res-fallo-texto h1 { font-size: var(--t-xl); letter-spacing: -.02em; }
.res-fallo.ok .res-fallo-texto h1 { color: var(--color-exito); }
.res-fallo.no .res-fallo-texto h1 { color: var(--color-acento-fuerte); }

.res-cifra { flex-shrink: 0; text-align: right; }
.res-cifra strong { display: block; font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.res-cifra .res-pct { font-size: 22px; font-weight: 700; }
.res-cifra span { font-size: var(--t-xs); color: var(--texto-2); }
.res-fallo.ok .res-cifra strong { color: var(--color-exito); }
.res-fallo.no .res-cifra strong { color: var(--color-acento-fuerte); }

/* Tres cifras en fila con separadores: se comparan entre sí, que es para lo que están. */
.res-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}
.res-datos > div { padding: var(--e-4) var(--e-5); border-left: 1px solid var(--borde); }
.res-datos > div:first-child { border-left: 0; }
.res-datos strong { display: block; font-size: var(--t-md); color: var(--texto); letter-spacing: -.02em; }
.res-datos span { font-size: var(--t-xs); color: var(--texto-3); }
.res-sin-intentos { color: var(--color-acento-fuerte); }
.res-sin-intentos strong { color: inherit; }

.res-acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4);
  padding: var(--e-5); border-top: 1px solid var(--borde);
}
/* «Ver todos mis intentos» se va al margen: no es una tercera salida, es una consulta. */
.res-acciones .enlace { margin-left: auto; }

.res-revision { display: flex; flex-direction: column; gap: var(--e-4); padding-top: var(--e-5); border-top: 1px solid var(--borde); }
.res-revision h2 { font-size: var(--t-lg); letter-spacing: -.02em; }

@media (max-width: 560px) {
  .res-fallo { flex-wrap: wrap; }
  .res-cifra { text-align: left; }
  .res-acciones .btn { width: 100%; justify-content: center; }
}

/* ══ Ficha de una certificación ══════════════════════════════════════════════

   Reutiliza el chasis de la ficha de curso; lo propio es la lista de cursos con su
   estado y el sello de la tarjeta.                                                 */

.cert-cursos { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }

.cert-curso a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie); text-decoration: none; color: inherit;
}
.cert-curso a:hover { border-color: var(--color-primario); box-shadow: var(--elevacion-1, var(--sombra-1)); }

.cert-curso-estado { flex-shrink: 0; display: inline-flex; color: var(--borde-fuerte); }
.cert-curso.listo .cert-curso-estado { color: var(--color-exito); }

.cert-curso-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cert-curso-titulo { font-weight: 600; font-size: var(--t-sm); }
.cert-curso-resumen { font-size: var(--t-xs); color: var(--texto-3); }
.cert-curso-cola { flex-shrink: 0; font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums; }

.cert-respaldo { display: flex; flex-direction: column; gap: var(--e-3); font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura); }

/* La cabecera de la tarjeta, en el sitio que en un curso ocupa la portada. */
.cert-sello {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-5);
  background: var(--color-primario); color: var(--sobre-primario);
  text-align: center;
}
.cert-sello-firma { font-size: var(--t-xs); line-height: 1.5; opacity: .85; }
.cert-sello-firma strong { opacity: 1; font-weight: 700; }
.cert-sello-listo { background: var(--color-exito); color: #FFFFFF; }

.cert-estado-listo {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 700; color: var(--color-exito);
  margin-bottom: var(--e-3);
}

.cert-avance { margin-bottom: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2); }
.cert-avance-texto { font-size: var(--t-sm); color: var(--texto-2); }
.cert-avance-texto strong { color: var(--texto); }

/* ══ Retención de video ══════════════════════════════════════════════════════

   Una barra por tramo. La media de un video no dice qué arreglar; la forma de la curva
   sí, y para eso hay que verla entera de un vistazo.                               */

.retencion { display: flex; flex-direction: column; gap: var(--e-4); }

.retencion-video {
  padding: var(--e-5);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: var(--e-3);
}

.retencion-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
}
.retencion-cabecera h3 { font-size: var(--t-md); letter-spacing: -.015em; }

.retencion-datos { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.retencion-final, .retencion-caida {
  flex-shrink: 0; font-size: var(--t-xs); color: var(--texto-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-full);
  background: var(--superficie-2);
}
.retencion-final strong { color: var(--color-exito); font-variant-numeric: tabular-nums; }
.retencion-final.flojo strong { color: var(--color-acento-fuerte); }
.retencion-caida { background: var(--color-acento-suave); }
.retencion-caida strong { color: var(--color-acento-fuerte); font-variant-numeric: tabular-nums; }

/* Las barras arrancan abajo y comparten el hueco: con dos minutos de video son veinticuatro
   y con veinte son doscientas cuarenta, así que se reparten en vez de medir fijo. */
.retencion-curva {
  display: flex; align-items: flex-end; gap: 1px;
  height: 110px; padding-top: var(--e-2);
  /* La línea de la mitad, pintada con el fondo: una caída de diez puntos y otra de
     sesenta tienen que distinguirse de un vistazo, y con la escala completa —que es la
     honesta— hace falta una referencia. */
  background: linear-gradient(to bottom, transparent 50%, var(--borde) 50%, var(--borde) calc(50% + 1px), transparent calc(50% + 1px));
}
.retencion-tramo {
  flex: 1 1 0; min-width: 2px;
  background: var(--color-primario); border-radius: 1px 1px 0 0;
}
/* Por debajo de la mitad de la audiencia el tramo cambia de color: es donde hay que mirar. */
.retencion-tramo.flojo { background: var(--color-acento); }

.retencion-media { color: var(--borde-fuerte); }
.retencion-eje {
  display: flex; justify-content: space-between;
  font-size: var(--t-xs); color: var(--texto-3); font-variant-numeric: tabular-nums;
}

/* ══ Lectura con documento ═══════════════════════════════════════════════════

   El PDF ocupa el escenario como lo haría un video: se viene a leerlo.        */

.escenario-documento { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; background: var(--superficie-2); }
.documento-intro {
  flex-shrink: 0; padding: var(--e-5) var(--e-6);
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.documento-intro h1 { font-size: var(--t-lg); letter-spacing: -.02em; }
.documento-visor { flex-grow: 1; min-height: 0; width: 100%; border: 0; }

.documento-alternativa {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-4); padding: var(--e-6); text-align: center; color: var(--texto-2);
}

.lectura-enlace { margin-top: var(--e-5); }

/* El documento ya subido, en el formulario de gestión. */
.documento-actual {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-2) var(--e-3); border-radius: var(--r-md);
  background: var(--superficie-2); font-size: var(--t-sm);
}
.documento-quitar { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-xs); color: var(--texto-3); font-weight: 400; }
.documento-quitar input { width: 16px; height: 16px; }

/* ══ Rellenar huecos ═════════════════════════════════════════════════════════

   El enunciado se lee corrido con los campos dentro, así que los campos tienen que
   parecer parte de la frase y no un formulario aparte.                            */

.huecos { font-size: var(--t-md); line-height: 2.1; }

.hueco {
  display: inline-block; width: 10ch;
  margin: 0 3px; padding: 2px var(--e-2);
  border: 0; border-bottom: 2px solid var(--color-primario); border-radius: 0;
  background: var(--superficie-2); color: var(--texto);
  font: inherit; font-size: var(--t-sm); font-weight: 600; text-align: center;
}
.hueco:focus { outline: 2px solid var(--color-primario); outline-offset: 2px; background: var(--superficie); }

.ayuda-item { font-size: var(--t-xs); color: var(--texto-3); margin-top: var(--e-2); }

/* El ejemplo de sintaxis en el editor del banco: se copia, así que se lee como código. */
.ejemplo-item {
  padding: var(--e-3); border-radius: var(--r-md);
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-sm); color: var(--texto-2);
}

/* ══ Repositorio de actividades interactivas ═════════════════════════════════ */

.subir-objeto {
  padding: var(--e-5); margin-bottom: var(--e-6);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
}
.subir-fila { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; }
.subir-fila .campo { flex: 1 1 260px; min-width: 0; }
.campo-boton { flex: 0 0 auto; justify-content: flex-end; }

/* La zona punteada ES el label del input de archivo: sin JavaScript sigue abriendo el
   buscador, y con él además acepta que se suelte el archivo encima. El punteado es lo
   que dice que ahí se puede soltar; un input de archivo desnudo no lo dice. */
.zona-archivo {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 44px; padding: 0 6px 0 13px;
  border: 1.5px dashed var(--borde-fuerte); border-radius: var(--r-sm);
  background: var(--superficie-2); cursor: pointer;
  font-weight: 400;
}
.zona-archivo:hover,
.zona-archivo.encima { border-color: var(--color-primario); background: var(--color-primario-suave); }
.zona-archivo-texto {
  flex-grow: 1; min-width: 0; font-size: var(--t-sm); color: var(--texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zona-archivo.con-archivo .zona-archivo-texto { color: var(--texto); font-weight: 600; }
.zona-archivo-boton {
  flex-shrink: 0; display: inline-flex; align-items: center; height: 32px; padding: 0 13px;
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: var(--superficie); font-size: var(--t-sm); font-weight: 600; color: var(--texto);
}
input[type="file"]:focus-visible + .zona-archivo,
.zona-archivo:focus-within { outline: 2px solid var(--color-primario); outline-offset: 2px; }

/* La ayuda va bajo una regla dentro de la misma tarjeta: es la letra pequeña de la
   subida, no un párrafo suelto de la página. */
.subir-ayuda {
  margin: var(--e-4) 0 0; padding-top: var(--e-3);
  border-top: 1px solid var(--borde); max-width: 96ch;
}

/* ── Bases descargables para armar una interactiva ──────────────────────
   Cada una es una tarjeta con su texto y su botón, no una fila de tabla: lo que se lee
   antes de decidir son tres líneas de prosa, y una tabla las aplasta. */

.bases { margin-top: var(--e-5); }
.bases-cabecera h2 { margin: 0 0 var(--e-2); font-size: var(--t-md); }
.bases-cabecera .ayuda { margin: 0 0 var(--e-4); max-width: 80ch; }

.lista-bases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.lista-bases > li {
  display: flex; align-items: flex-start; gap: var(--e-4);
  padding: var(--e-4);
  border: 1px solid var(--borde); border-radius: var(--r-lg); background: var(--superficie);
}

.base-texto { flex-grow: 1; min-width: 0; }
.base-texto h3 { margin: 0 0 var(--e-1); font-size: var(--t-base); }
.base-texto p { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texto-2); }
.base-texto p:last-child { margin-bottom: 0; }

.base-sirve { color: var(--texto-3) !important; }
.base-archivo { font-size: var(--t-xs) !important; color: var(--texto-3) !important; }
.base-archivo code { color: var(--color-primario); }

/* El botón no se estira ni se parte: es la acción, y en una tarjeta ancha buscarlo al
   final de dos líneas cuesta más que verlo siempre en el mismo sitio. */
.lista-bases .btn { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 640px) {
  .lista-bases > li { flex-direction: column; align-items: stretch; }
}

/* La referencia del protocolo va plegada: la necesita quien programa el objeto —una vez—,
   y desplegada empujaría la lista de actividades fuera de la primera pantalla. */
.protocolo {
  margin-top: var(--e-5);
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie);
}
.protocolo > summary {
  padding: var(--e-3) var(--e-4);
  font-weight: 600; cursor: pointer;
}
.protocolo > summary:focus-visible { outline: 2px solid var(--color-primario); outline-offset: -2px; }
.protocolo[open] > summary { border-bottom: 1px solid var(--borde); }
.protocolo > .ayuda { margin: var(--e-3) var(--e-4) 0; max-width: 80ch; }

.protocolo-lista { margin: var(--e-3) var(--e-4) var(--e-4); max-width: 80ch; }
.protocolo-lista dt {
  margin-top: var(--e-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2);
}
.protocolo-lista dt:first-child { margin-top: 0; }
.protocolo-lista dt code { font-weight: 600; }
.protocolo-lista dt span { font-size: var(--t-sm); color: var(--texto-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.protocolo-lista dd { margin: var(--e-1) 0 0; color: var(--texto-2); font-size: var(--t-sm); }

.seccion-titulo { font-size: var(--t-md); margin-bottom: var(--e-3); }
.seccion-cabecera-lista { align-items: baseline; margin-bottom: var(--e-3); }
.seccion-cabecera-lista h2 { font-size: var(--t-lg); margin: 0; }
.seccion-cabecera-lista h2 span { font-weight: 500; color: var(--texto-2); }

/* La lista de objetos en rejilla y no en tabla: la celda de la actividad lleva tres
   líneas —título, descripción y archivo— y una tabla las alinea mal contra el resto. */
.lista-objetos {
  border: 1px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie); overflow: hidden;
}
.lista-objetos-cabecera,
.objeto-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 150px 80px 110px;
  gap: var(--e-4); padding: var(--e-3) var(--e-4);
}
.lista-objetos-cabecera {
  background: var(--superficie-2); border-bottom: 1px solid var(--borde);
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-2);
}
.objeto-fila { align-items: center; }
.objeto-item { border-top: 1px solid var(--borde); }
.lista-objetos-cabecera + .objeto-item { border-top: 0; }
.objeto-datos { min-width: 0; }
.objeto-usos { font-variant-numeric: tabular-nums; }
.lista-objetos .num { text-align: right; }
.objeto-accion { display: flex; justify-content: flex-end; align-items: center; gap: var(--e-3); }
.lista-objetos > .vacio { margin: 0; padding: var(--e-5); }

/* La corrección se edita aquí mismo, pero plegada: una lista con dos campos de texto por
   fila deja de leerse como una lista y pasa a leerse como un formulario largo. */
.fila-objeto {
  display: flex; flex-direction: row; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-4); background: var(--superficie-2); border-top: 1px solid var(--borde);
}
.fila-objeto .campo { flex: 1 1 240px; min-width: 0; }
.fila-objeto .campo-boton { flex: 0 0 auto; }
.objeto-titulo-fijo { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.objeto-descripcion-fija { margin: 3px 0 0; font-size: var(--t-sm); color: var(--texto-2); }
.objeto-sin-descripcion { color: var(--texto-3); font-style: italic; }
.objeto-archivo { margin: var(--e-1) 0 0; }
.objeto-archivo code { font-size: 11.5px; color: var(--texto-2); }
.objeto-reporta { display: flex; gap: 6px; flex-wrap: wrap; }
.pastilla-nota { background: var(--color-primario-suave); color: var(--color-primario); border-color: transparent; }
.pastilla-nada { background: var(--superficie-2); color: var(--texto-2); }

.objeto-fila-archivada .objeto-titulo-fijo { color: var(--texto-2); }

/* Lo archivado, plegado al pie: sigue estando, no estorba. */
.archivados { margin-top: var(--e-5); }
.archivados > summary {
  display: flex; align-items: center; gap: var(--e-3);
  cursor: pointer; padding: var(--e-3) var(--e-4);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg);
  font-size: var(--t-sm); color: var(--texto);
}
.archivados > summary::-webkit-details-marker { display: none; }
.archivados > summary::marker { content: ''; }
.archivados > summary svg { flex-shrink: 0; color: var(--texto-2); transition: transform .15s; }
.archivados[open] > summary svg { transform: rotate(180deg); }
.archivados > summary:hover { border-color: var(--borde-fuerte); }
.archivados-titulo { flex-grow: 1; }
/* La lista archivada no repite los rótulos de columna: no se recorre, se busca en ella
   lo que se quiere recuperar. */
.archivados .lista-objetos-archivadas { margin-top: var(--e-3); }
.lista-objetos-archivadas .objeto-fila { grid-template-columns: minmax(0, 1fr) 80px 110px; }
.archivados .ayuda { margin-bottom: var(--e-3); }
.tabla .apagado td { color: var(--texto-3); }

@media (max-width: 860px) {
  .lista-objetos-cabecera { display: none; }
  .objeto-fila { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--e-2); }
  .lista-objetos .num { text-align: left; }
  .objeto-accion { justify-content: flex-start; }
}

/* ══ Explorar: cabecera, pestañas y tarjeta de curso ═════════════════════════

   La tarjeta es la pieza que más se repite —catálogo, mis cursos, portada— y la que hace
   que el color signifique algo: el sello nombra la certificación a la que tributa el
   curso, y el color solo la distingue. Un color sin nombre obliga a memorizar la leyenda.
                                                                                      */

.explorar-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-5); flex-wrap: wrap; margin-bottom: var(--e-5);
}
.explorar-titulo { max-width: 62ch; }
.explorar-titulo h1 {
  font-family: var(--fuente-titulos);
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
}

/* La cabecera es su propia banda y las pestañas se apoyan en el borde de abajo: la regla
   de las pestañas y la de la banda son la misma. */
.franja-cabecera { padding-bottom: 0; }
.franja-cabecera .explorar-pestanas { border-bottom: 0; margin-bottom: 0; }
.franja-cabecera .explorar-pestanas a { padding-bottom: 13px; }

.leyenda-certs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.leyenda-cert a, .leyenda-cert span {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-full);
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: var(--t-xs); font-weight: 600; color: var(--texto-2); text-decoration: none;
}
.leyenda-cert a:hover { border-color: var(--borde-fuerte); color: var(--texto); }
/* La leyenda además filtra, así que tiene que poder decir cuál está aplicada. */
.leyenda-cert.activa a { border-color: var(--color-primario); background: var(--color-primario-suave); color: var(--color-primario); }
/* El punto de color antes del nombre: es la traducción entre el color y la palabra. */
.leyenda-cert a::before, .leyenda-cert span::before {
  content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--texto-3);
}
.leyenda-cert1 a::before { background: var(--cert-1, var(--color-primario)); }
.leyenda-cert2 a::before { background: var(--cert-2, var(--color-acento)); }
.leyenda-cert3 a::before { background: var(--cert-3, var(--texto-2)); }
/* «Sueltos» no es una certificación: su punto es el gris de los metadatos, para que se
   lea como «ninguna» y no como una cuarta ruta. */
.leyenda-cert-suelto span::before { background: var(--texto-3); }

.explorar-pestanas {
  display: flex; gap: var(--e-5); flex-wrap: wrap;
  border-bottom: 1px solid var(--borde); margin-bottom: var(--e-5);
}
.explorar-pestanas a {
  padding: var(--e-3) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--t-sm); font-weight: 600; color: var(--texto-2); text-decoration: none;
}
.explorar-pestanas a span { color: var(--texto-3); font-weight: 500; margin-left: 2px; }
.explorar-pestanas a:hover { color: var(--texto); }
.explorar-pestanas a.activa { color: var(--texto); border-bottom-color: var(--color-primario); }

/* ── La tarjeta ─────────────────────────────────────────────────────────── */

.curso-tarjeta {
  display: flex; flex-direction: column;
  background: var(--superficie); border: var(--marco, 1px solid var(--borde));
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--elevacion-1, var(--sombra-1));
}
.curso-tarjeta:hover { box-shadow: var(--elevacion-2, var(--sombra-2)); }

.curso-tarjeta-foto { position: relative; display: block; }
/* El sello, sobre la foto y con el nombre dentro. */
.curso-sello {
  position: absolute; top: var(--e-3); left: var(--e-3);
  padding: 3px var(--e-3); border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 700; color: #FFFFFF;
  background: var(--texto-2);
}
.curso-sello1 { background: var(--cert-1, var(--color-primario)); }
.curso-sello2 { background: var(--cert-2, var(--color-acento)); }
.curso-sello3 { background: var(--cert-3, var(--texto-2)); }
.curso-sello-suelto { background: rgba(11,13,18,.72); }

.curso-tarjeta-cuerpo { flex: 1; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4); }
.curso-tarjeta-meta { display: flex; flex-wrap: wrap; gap: var(--e-3); font-size: var(--t-xs); color: var(--texto-3); }
.curso-tarjeta-cuerpo h3 { font-size: var(--t-md); letter-spacing: -.015em; }
.curso-tarjeta-cuerpo h3 a { color: inherit; text-decoration: none; }
.curso-tarjeta-resumen { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-normal); }

/* El pie se empuja abajo: con descripciones de largos distintos, los botones de una
   parrilla tienen que quedar a la misma altura. */
.curso-tarjeta-pie { margin-top: auto; padding-top: var(--e-3); display: flex; flex-direction: column; gap: var(--e-3); }
.curso-tarjeta-avance p { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--texto-2); margin-bottom: var(--e-2); }
.curso-tarjeta-avance strong { color: var(--color-exito); font-variant-numeric: tabular-nums; }
.curso-tarjeta-tributa { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); color: var(--texto-2); }
.curso-tarjeta-tributa svg { color: var(--color-acento); flex-shrink: 0; }

/* ── La banda de ruta ───────────────────────────────────────────────────── */

.banda-ruta {
  margin-top: var(--e-6); padding: var(--e-6);
  border-radius: var(--r-lg);
  background: var(--barra-fondo, var(--texto)); color: var(--barra-texto, #FFFFFF);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap;
}
.banda-ruta-texto { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--e-2); }
.banda-ruta-texto h2 { font-family: var(--fuente-titulos); font-size: var(--t-lg); letter-spacing: -.02em; }
.banda-ruta-texto p { font-size: var(--t-sm); opacity: .78; line-height: var(--lh-normal); }
.pastilla-ruta { align-self: flex-start; background: var(--color-primario); color: var(--sobre-primario); border-color: transparent; }

.banda-ruta-accion { flex: 0 1 280px; display: flex; flex-direction: column; gap: var(--e-3); }
.banda-ruta-avance { display: flex; justify-content: space-between; font-size: var(--t-sm); opacity: .78; }
.banda-ruta-avance strong { opacity: 1; font-variant-numeric: tabular-nums; }
.banda-ruta .barra { background: rgba(255,255,255,.18); border-color: transparent; }

/* ══ Ficha de curso ══════════════════════════════════════════════════════════ */

/* A dónde lleva el curso, encima del título. */
.ficha-tributa {
  display: inline-flex; align-items: center; gap: var(--e-2);
  align-self: flex-start; margin-bottom: var(--e-3);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-full);
  border: 1px solid var(--borde); background: var(--superficie);
  font-size: var(--t-xs); font-weight: 700; color: var(--texto-2);
}
.ficha-tributa1 { color: var(--cert-1, var(--color-primario)); }
.ficha-tributa2 { color: var(--cert-2, var(--color-acento)); }
.ficha-tributa3 { color: var(--cert-3, var(--texto-2)); }

.ficha-datos-linea {
  list-style: none; margin: var(--e-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5);
  font-size: var(--t-sm); color: var(--texto-2);
}
.ficha-datos-linea li { display: flex; align-items: center; gap: var(--e-2); }
.ficha-datos-linea svg { color: var(--texto-3); flex-shrink: 0; }

/* El estado de inscripción, antes del botón. */
.ficha-estado {
  display: flex; align-items: center; gap: var(--e-2);
  margin-bottom: var(--e-4); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm); background: var(--color-exito-suave);
  font-size: var(--t-sm); font-weight: 600; color: var(--color-exito);
}
.ficha-estado-punto { width: 8px; height: 8px; border-radius: var(--r-full); background: currentColor; }

/* Las rutas a las que suma: bloque oscuro, porque es lo que convierte una ficha suelta
   en el paso de un programa. */
.ficha-rutas {
  margin-top: var(--e-4); padding: var(--e-4);
  border-radius: var(--r-md);
  background: var(--barra-fondo, var(--texto)); color: var(--barra-texto, #FFFFFF);
}
.ficha-rutas h2 {
  display: flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--e-3);
}
.ficha-rutas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.ficha-rutas a {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-3); border-radius: var(--r-sm);
  background: rgba(255,255,255,.08); color: inherit; text-decoration: none;
  font-size: var(--t-sm);
}
.ficha-rutas a:hover { background: rgba(255,255,255,.14); }
.ficha-ruta-punto { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; background: var(--texto-3); }
.ficha-ruta-punto1 { background: var(--cert-1, var(--color-primario)); }
.ficha-ruta-punto2 { background: var(--cert-2, var(--color-acento)); }
.ficha-ruta-punto3 { background: var(--cert-3, var(--texto-2)); }
.ficha-ruta-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-ruta-avance { flex-shrink: 0; font-size: var(--t-xs); opacity: .75; font-variant-numeric: tabular-nums; }

/* Cómo se cursa: tres tarjetas que dicen que nadie corrige ni da clase. */
.como-se-cursa { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--e-4); }
.como-se-cursa article {
  padding: var(--e-4); border-radius: var(--r-md);
  border: var(--marco, 1px solid var(--borde)); background: var(--superficie);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.como-se-cursa svg { color: var(--color-primario); }
.como-se-cursa h3 { font-size: var(--t-sm); }
.como-se-cursa p { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-normal); }

/* ══ Mis cursos ══════════════════════════════════════════════════════════════ */

.campus-saludo { margin-bottom: var(--e-5); }
.campus-saludo h1 { font-family: var(--fuente-titulos); font-size: var(--t-xl); letter-spacing: -.03em; }
.campus-saludo p { margin-top: var(--e-2); color: var(--texto-2); }

/* Un curso terminado: el sello cambia de significado —ya no dice a dónde lleva sino que
   se llegó— y por eso va en el color del éxito. */
.curso-sello-listo { display: inline-flex; align-items: center; gap: 4px; background: var(--color-exito); }
.curso-tarjeta-nota { font-size: var(--t-sm); color: var(--texto-2); }
.curso-tarjeta-nota strong { color: var(--color-exito); font-variant-numeric: tabular-nums; }

/* La tarjeta que empuja al curso que cierra la ruta. Punteada porque no es un curso: es
   un hueco con una propuesta, y parecerse a los demás sería mentir sobre qué es. */
.curso-tarjeta-empuje {
  border: 2px dashed var(--borde-fuerte); box-shadow: none; background: transparent;
  justify-content: center;
}
.curso-tarjeta-empuje .curso-tarjeta-cuerpo { justify-content: center; gap: var(--e-3); }
.empuje-mas {
  width: 34px; height: 34px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: var(--t-lg); color: var(--texto-3); line-height: 1;
}
.curso-tarjeta-empuje h3 { font-size: var(--t-sm); }

/* Retomar y el sello más cercano, uno al lado del otro: son el par que ordena la
   pantalla —dónde sigo, y para qué—. */
.campus-arriba { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e-4); align-items: start; }

.campus-sello {
  padding: var(--e-5); border-radius: var(--r-lg);
  background: var(--barra-fondo, var(--texto)); color: var(--barra-texto, #FFFFFF);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.campus-sello h2 { font-family: var(--fuente-titulos); font-size: var(--t-md); letter-spacing: -.02em; }
.campus-sello h2 a { color: inherit; text-decoration: none; }
.campus-sello-avance { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-xs); }
.campus-sello-avance .barra { flex: 1; background: rgba(255,255,255,.18); border-color: transparent; }
.campus-sello-avance span { flex-shrink: 0; opacity: .8; font-variant-numeric: tabular-nums; }

/* Un curso terminado conserva la forma de tarjeta pero no ofrece continuar. */
.curso-tarjeta-listo .curso-tarjeta-cuerpo h3 a { color: var(--texto-2); }

@media (max-width: 900px) {
  .campus-arriba { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Portada: rutas y verificador ════════════════════════════════════════════ */

/* La regla de color arriba dice de qué ruta es la tarjeta, con el mismo código que el
   catálogo: son la misma información en dos pantallas. */
.cert-card { border-top: 5px solid var(--borde-fuerte); }
.cert-card1 { border-top-color: var(--cert-1, var(--color-primario)); }
.cert-card2 { border-top-color: var(--cert-2, var(--color-acento)); }
.cert-card3 { border-top-color: var(--cert-3, var(--texto-2)); }

.cert-card-cursos { list-style: none; margin: var(--e-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.cert-card-cursos li { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-sm); }
.cert-card-num {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border: 1px solid var(--borde);
  font-size: var(--t-xs); font-weight: 700; color: var(--texto-3);
}
.cert-card-cursos a { flex: 1; min-width: 0; color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cert-card-cursos a:hover { color: var(--color-primario); }
.cert-card-cursos .detalle { flex-shrink: 0; font-size: var(--t-xs); color: var(--texto-3); }

/* «Cómo funciona» y el verificador, en la misma banda: quien llega con un folio no viene
   a leer cómo funciona la plataforma, y tenerlos juntos no obliga a elegir. */
.como-y-verificar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-6); align-items: start; }

.verificar-portada {
  padding: var(--e-5); border-radius: var(--r-lg);
  background: var(--superficie); border: var(--marco, 1px solid var(--borde));
  box-shadow: var(--elevacion-1, var(--sombra-1));
  display: flex; flex-direction: column; gap: var(--e-3);
}
.verificar-portada h2 { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-md); }
.verificar-portada h2 svg { color: var(--color-exito); }
.verificar-portada > p { font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-normal); }
.verificar-portada form { gap: var(--e-2); }
.verificar-portada input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.verificar-portada-nota {
  display: flex; align-items: flex-start; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--texto-2); line-height: var(--lh-normal);
}
.verificar-portada-nota .ficha-estado-punto { margin-top: 5px; flex-shrink: 0; color: var(--color-exito); }

@media (max-width: 900px) {
  .como-y-verificar { grid-template-columns: minmax(0, 1fr); }
}

/* Gestión: menú lateral y cuerpo. */
.admin { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.admin-cuerpo { min-width: 0; }

@media (max-width: 900px) {
  /* Bajo el ancho de una columna lateral, el menú vuelve a ser tira: 236 px fijos en un
     teléfono dejan el contenido en la nada. */
  .admin { grid-template-columns: minmax(0, 1fr); }
  .nav-admin { flex-direction: row; flex-wrap: wrap; position: static; }
  .nav-admin::before { flex-basis: 100%; }
}

/* El aviso de que un curso no llega al catálogo. En tono de aviso y no de error: no hay
   nada roto, falta contenido, y la diferencia importa cuando el mensaje aparece cada vez
   que alguien empieza un curso nuevo. */
.aviso-catalogo {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  margin-top: var(--e-3); padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md); border-left: 3px solid var(--color-acento);
  background: var(--color-acento-suave);
  font-size: var(--t-sm); color: var(--texto-2);
}
.aviso-catalogo svg { color: var(--color-acento-fuerte); flex-shrink: 0; }
.aviso-catalogo span { flex: 1; min-width: 220px; }
.aviso-catalogo strong { color: var(--texto); }
.aviso-catalogo a { flex-shrink: 0; font-weight: 600; }

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

/* Lo que falta para publicar: aviso con regla al costado y salida al primer punto. */
.revisar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4);
  flex-wrap: wrap;
  padding: var(--e-4); border-radius: var(--r-md);
  border-left: 3px solid var(--color-acento);
  background: var(--color-acento-suave);
}
.revisar-texto { flex: 1; min-width: 260px; }
/* En versalitas el número de arriba deja de leerse como una frase, y es una frase:
   «2 preguntas con algo pendiente». Se anula el text-transform de la regla anterior. */
.revisar h2 {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700;
  text-transform: none; letter-spacing: -.01em;
  color: var(--color-acento-fuerte);
}
.revisar h2 svg { flex-shrink: 0; }
.revisar ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); font-size: var(--t-sm); color: var(--texto-2); }
.revisar li { line-height: var(--lh-normal); }
.revisar .enlace { flex-shrink: 0; color: var(--color-acento-fuerte); font-weight: 600; }

/* El reparto de la ponderación, en filas para poder leer dónde está el hueco. */
.reparto { list-style: none; margin: var(--e-3) 0 0; padding: 0; font-size: var(--t-sm); }
.reparto li {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) 0; border-top: 1px solid var(--borde);
}
.reparto strong { font-variant-numeric: tabular-nums; }
.reparto-falta { color: var(--color-acento-fuerte); }

/* La analítica de un curso, en dos columnas: la retención de video pide ancho —son
   doscientas barras— y las tablas de al lado se leen igual en una columna estrecha. */
.analitica-columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.analitica-lado { display: flex; flex-direction: column; gap: var(--e-6); min-width: 0; }

@media (max-width: 1100px) {
  .analitica-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ══ Rendir: la cabecera y las tarjetas de pregunta ══════════════════════════ */

/* El cronómetro es el elemento con más contraste de la barra: es el dato que cambia la
   forma de responder, y en una línea de texto se pierde entre el resto. */
.cronometro {
  display: inline-flex; align-items: center; gap: 9px;
  padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  background: var(--color-acento-suave); border: 1px solid transparent;
  color: var(--color-acento-fuerte);
  font-family: var(--fuente-titulos); font-size: var(--t-md); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cronometro svg { flex-shrink: 0; }
/* El rótulo se lee una vez y estorba en todas las demás: el reloj y la cifra ya dicen
   qué es. Se conserva para lectores de pantalla. */
.cronometro-rotulo {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.cronometro.urgente { background: var(--color-acento); color: var(--sobre-acento); }

.ev-guardado { display: inline-flex; align-items: center; gap: 4px; color: var(--color-exito); }
.ev-guardado-punto { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }
.ev-guardado-falla { color: var(--color-acento-fuerte); }

/* La barra de avance de preguntas, pegada bajo la cabecera. */
.ev-progreso { height: 3px; background: var(--barra-borde, var(--borde)); }
.ev-progreso-relleno { height: 100%; background: var(--color-primario); transition: width .2s ease; }

/* El número y el tipo, antes del enunciado: así se sabe si se puede marcar una o varias
   sin deducirlo del control. */
.item-cabecera { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-3); }
.item-enunciado { display: block; font-size: var(--t-base); }
/* En redonda y no en versalitas: el tipo es una etiqueta que se lee, no un rótulo de
   columna, y en mayúsculas competía con el enunciado que va justo debajo. */
.pastilla-tipo-item { font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.item-pista { font-size: var(--t-xs); color: var(--color-acento-fuerte); }

/* El número en cuadro y no en círculo: en una lista de veinte preguntas, el cuadro se
   alinea con el borde de la tarjeta y el círculo flota. */
.item .numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--r-sm);
  background: var(--texto); color: var(--superficie);
  font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* La entrega, en una caja: separados, se lee el botón y no la advertencia. */
.ev-entrega {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e-5);
  flex-wrap: wrap;
  padding: var(--e-4); border-radius: var(--r-md);
  border: var(--marco, 1px solid var(--borde)); background: var(--superficie);
  border-top: 1px solid var(--borde);
}
.ev-entrega-nota { flex: 1; min-width: 260px; }
.ev-entrega-nota strong { color: var(--color-acento-fuerte); }

/* La explicación del banco, citada. No la escribió nadie para esta respuesta: está
   cargada en la pregunta, y la regla al margen dice justamente eso. */
.revision .retro {
  margin: var(--e-3) 0 0; padding: var(--e-2) 0 var(--e-2) var(--e-4);
  border-left: 2px solid var(--borde-fuerte);
  font-size: var(--t-sm); color: var(--texto-2); line-height: var(--lh-lectura);
}

/* ══ Verificación pública ════════════════════════════════════════════════════

   Columna estrecha, sin navegación. Quien abre esta página viene de un folio impreso y no
   va a explorar: una barra llena de enlaces sugiere que hace falta una cuenta para
   comprobar algo que es público.                                                    */

.verif-barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  height: var(--barra-alto, 60px); padding: 0 var(--e-5);
  background: var(--barra-fondo, var(--superficie)); color: var(--barra-texto, var(--texto));
  border-bottom: 1px solid var(--barra-borde, var(--borde));
}
.verif-barra-nota { font-size: var(--t-sm); color: var(--barra-texto-2, var(--texto-3)); }

.verif-cuerpo { max-width: 720px; margin: 0 auto; padding: var(--e-7) var(--e-5) var(--e-8); }

/* El veredicto: icono y texto, y una regla de color arriba que distingue los tres
   estados antes de leerlos. */
.verif-fallo {
  display: flex; align-items: flex-start; gap: var(--e-4);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 4px solid transparent;
}
.verif-fallo h1 { font-family: var(--fuente-titulos); }
.verif-icono {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: #FFFFFF;
}
.verif-fallo.autentico { border-top-color: var(--color-exito); }
.verif-fallo.autentico .verif-icono { background: var(--color-exito); }
.verif-fallo.anulado, .verif-fallo.invalido { border-top-color: var(--color-acento); }
.verif-fallo.anulado .verif-icono { background: var(--color-acento); }
.verif-fallo.invalido .verif-icono { background: var(--texto-3); }

.verif-alcance {
  margin-top: var(--e-4); padding-top: var(--e-4);
  border-top: 1px solid var(--borde);
  font-size: var(--t-xs); color: var(--texto-3); line-height: var(--lh-lectura);
}