/* ═══════════════════════════════════════════════════════════════
   Aula · Ateneo Fuente — estilos.css
   Implementación del sistema de diseño "Sarape" (docs/direccion-visual.html)

   Reglas duras del sistema:
   · Ningún blanco puro ni negro puro. Ningún gris: la profundidad
     se hace con cantera / lana cruda / cal.
   · Pericón (#E9A72C) y Cochinilla (#D9412C) son SOLO relleno;
     como letra hablan sus gemelos oscuros (quemado / grana).
   · Radio 0 en todo. Ninguna sombra de elevación.
   · Archivo Black solo en caja alta y frases cortas: nunca en párrafos,
     nunca en botones, nunca en el enunciado de un reactivo. Trae un solo
     estilo, así que la jerarquía del titular se hace con tamaño.
   · El cuerpo va en serif (Newsreader), mínimo 15 px y nunca bajo peso 400.
   · Chivo Mono solo para cifras, códigos y etiquetas de una palabra.
   · Relleno para entregar, contorno para revisar, apagado sale.
   ═══════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light only;

  /* Superficies — del más hondo al más elevado */
  --fondo-hondo: #E4DAC6;   /* Cantera  */
  --fondo:       #F4EEE0;   /* Lana cruda */
  --superficie:  #FBF7EC;   /* Cal */

  /* Tintas */
  --tinta:    #1D2C4C;   /* Añil */
  --titular:  #101C36;   /* Añil hondo */
  --mute:     #6B5742;   /* Nogal */
  --filete:   #D8CBB2;   /* Hairlines decorativas, nunca borde de control */
  --control:  #6B5742;   /* Borde de controles (5.92:1) */

  /* Marca y estados */
  --acento-fill:  #E9A72C;  /* Pericón — SOLO relleno */
  --acento:       #8C641A;  /* Pericón quemado — el que sí habla */
  --acento-suave: #F7E3B4;
  --ok:       #2F6B45;   /* Nopal */
  --mal:      #A32A1B;   /* Grana */
  --mal-fill: #D9412C;   /* Cochinilla — SOLO relleno */

  /* Voces */
  --rotulo: "Archivo Black", Impact, sans-serif;
  --texto:  "Newsreader", Georgia, serif;
  --cifra:  "Chivo Mono", ui-monospace, monospace;

  /* Alias que el JS del prototipo referencia inline */
  --mono:        var(--cifra);
  --bien:        var(--ok);
  --tinta-suave: var(--mute);

  --radio: 0px;   /* el rombo del sarape es en pico */
}

*{ box-sizing:border-box; }

::selection{ background:var(--acento-suave); color:var(--titular); }

body{
  margin:0;
  background:var(--fondo-hondo);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:16px;
  /* Newsreader es serif: pide más aire entre renglones que un palo seco
     al mismo tamaño, y media plataforma son lecturas de dos cuartillas. */
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* ── La hoja ─────────────────────────────────────────────────── */

.envoltura{
  max-width:880px;
  margin:0 auto;
  min-height:100vh;
  background:var(--fondo);
  padding:clamp(1.25rem,3.5vw,3rem) clamp(1rem,4vw,3.5rem) 4rem;
}

/* ── Cabecera ────────────────────────────────────────────────── */

.cabecera{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  padding-bottom:1.1rem;
  margin-bottom:2rem;
  border-bottom:1px solid var(--filete);
}
.marca{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--rotulo);
  font-weight:400;
  font-size:15px;
  letter-spacing:0.01em;
  text-transform:uppercase;
  color:var(--titular);
  text-decoration:none;
  line-height:1;
}
.marca svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:butt; stroke-linejoin:miter;
}
.marca span{ color:var(--acento); }
.materia{
  font-family:var(--texto);
  font-weight:700;
  font-size:11px;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--mute);
}
.materia a{ color:var(--acento); }

/* ── Titulares — voz de rótulo, nunca bajo 30 px ─────────────── */

h1{
  font-family:var(--rotulo);
  font-weight:400;                 /* Archivo Black trae un solo estilo */
  text-transform:uppercase;
  font-size:clamp(28px,5.2vw,47px);
  line-height:1.02;
  letter-spacing:-0.035em;         /* cierra los huecos de un peso tan macizo */
  color:var(--titular);
  margin:0 0 1rem;
}
h2{
  font-family:var(--rotulo);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(21px,3.4vw,28px);
  line-height:1.06;
  letter-spacing:-0.03em;
  color:var(--titular);
  margin:0 0 .75rem;
}
h3{
  font-family:var(--texto);
  font-weight:700;
  font-size:18px;
  line-height:1.35;
  color:var(--titular);
  margin:0 0 .5rem;
}

p{ margin:0 0 .75rem; }
a{ color:var(--acento); }

/* ── Texto de apoyo ──────────────────────────────────────────── */

.apunte{
  font-size:13px;
  line-height:1.6;
  color:var(--mute);
}
.etiqueta{
  font-family:var(--texto);
  font-weight:700;
  font-size:11px;
  line-height:1.2;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--mute);
}
.numero{
  font-family:var(--cifra);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mute);
}
.num{
  font-family:var(--cifra);
  font-weight:700;
  font-size:15px;
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

.vacio{
  text-align:center;
  padding:3rem 1rem;
  color:var(--mute);
}
.vacio h1{ margin-bottom:.5rem; }

.regreso{
  display:inline-block;
  font-weight:600;
  font-size:13px;
  color:var(--acento);
  text-decoration:none;
  margin-bottom:1rem;
}
.regreso:hover{ text-decoration:underline; }

.fila{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

/* ── La tarjeta: cal sobre lana, sin sombra ──────────────────── */

.hoja{
  display:block;
  background:var(--superficie);
  border:1px solid var(--filete);
  border-radius:var(--radio);
  padding:20px 22px 22px;
  margin-bottom:16px;
}
a.hoja{
  color:inherit;
  text-decoration:none;
  transition:border-color 140ms ease;
}
a.hoja:hover{ border-color:var(--control); }
a.hoja:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* ── Botones: relleno entrega, contorno revisa ───────────────── */

.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:var(--texto);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.02em;
  line-height:1;
  padding:14px 18px;
  background:var(--acento-fill);
  color:var(--titular);
  border:1px solid var(--acento-fill);
  border-radius:var(--radio);
  cursor:pointer;
  text-decoration:none;
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.boton:hover{ background:var(--acento); border-color:var(--acento); color:var(--fondo); }

/* contorno de añil: acciones de revisar (Abrir, Editar, Guardar) */
.boton.chico{
  padding:9px 13px;
  font-size:11px;
  background:transparent;
  border-color:var(--tinta);
  color:var(--tinta);
}
.boton.chico:hover{ background:var(--acento-suave); border-color:var(--acento); color:var(--titular); }

/* contorno callado: acciones laterales (Despublicar, CSV) */
.boton.fantasma{
  background:transparent;
  border-color:var(--control);
  color:var(--mute);
}
.boton.fantasma:hover{ background:transparent; color:var(--tinta); border-color:var(--tinta); }

.boton.peligro{
  background:transparent;
  border-color:var(--mal);
  color:var(--mal);
  padding:9px 13px;
  font-size:11px;
}
.boton.peligro:hover{ background:var(--mal); color:var(--fondo); border-color:var(--mal); }

.boton:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.boton[disabled]{ opacity:0.38; cursor:not-allowed; }
.boton[disabled]:hover{ background:var(--acento-fill); border-color:var(--acento-fill); color:var(--titular); }

/* ── Pestañas del panel ──────────────────────────────────────── */

.pestanas{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--filete);
  margin-bottom:24px;
}
.pestana{
  appearance:none;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  padding:11px 0;
  font-family:var(--texto);
  font-weight:600;
  font-size:13.5px;
  color:var(--mute);
  cursor:pointer;
  transition:color 140ms ease, border-color 140ms ease;
}
.pestana:hover{ color:var(--tinta); }
.pestana.activa{ color:var(--acento); border-bottom-color:var(--acento-fill); }
.pestana:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }

/* ── Insignias de estado: punto, palabra y dato ──────────────── */

.insignia{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--texto);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:6px 10px;
  border:1px solid currentColor;
  white-space:nowrap;
}
.insignia::before{ content:''; width:6px; height:6px; flex:none; background:currentColor; }
.insignia.abierto{ color:var(--ok); }
.insignia.cerrado{ color:var(--mute); }

/* ── Avisos ──────────────────────────────────────────────────── */

.aviso{
  background:var(--superficie);
  border:1px solid var(--control);
  padding:12px 14px;
  font-size:14px;
  line-height:1.55;
  color:var(--tinta);
  margin:12px 0;
}
.aviso.error{
  border-color:var(--mal);
  color:var(--mal);
}

/* ── ¿Lo ven los alumnos? ────────────────────────────────────────
   Una clase se ve si esta publicada Y asignada a un grupo. Eran dos
   controles en dos pantallas distintas, asi que el maestro guardaba la
   asignacion, leia "la ven 1 grupo" y se iba tranquilo con la clase en
   borrador. Esto da UN veredicto, arriba de todo, con su boton al lado. */

.visibilidad{
  border:2px solid currentColor;
  padding:16px 18px;
  margin:0 0 22px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
}
.visibilidad.si{ color:var(--ok); }
.visibilidad.no{ color:var(--mute); }

.visibilidad .veredicto{
  font-family:var(--rotulo);
  font-size:15px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:9px;
}
.visibilidad .veredicto::before{
  content:'';
  width:10px; height:10px;
  flex:none;
  background:currentColor;
  border-radius:50%;
}
.visibilidad .porque{
  flex:1 1 220px;
  min-width:0;
  font-family:var(--texto);
  font-size:14px;
  line-height:1.5;
  color:var(--tinta);
  text-transform:none;
  letter-spacing:0;
}
.visibilidad .boton{ margin-left:auto; }

@media (max-width: 640px){
  .visibilidad{ flex-direction:column; align-items:stretch; gap:10px; }
  /* En columna el eje principal es el vertical, asi que ese flex-basis de
     220px dejaba de ser ancho y se volvia ALTO: un hueco vacio enorme entre
     el texto y el boton. */
  .visibilidad .porque{ flex:0 1 auto; }
  .visibilidad .boton{ margin-left:0; width:100%; }
}

/* ── Formularios: borde nogal, foco pericón quemado ──────────── */

label{ display:block; margin-bottom:14px; }
label .etiqueta{ display:block; margin-bottom:7px; }

input, select, textarea{
  width:100%;
  background:var(--fondo);
  border:1px solid var(--control);
  border-radius:var(--radio);
  color:var(--tinta);
  font-family:var(--texto);
  /* 16px NO es capricho: por debajo de eso, Safari en iPhone hace zoom al
     enfocar el campo y deja la página descuadrada. El alumno teclea su
     código en un teléfono; esto tiene que ser cómodo ahí primero. */
  font-size:16px;
  font-variant-numeric:tabular-nums;
  padding:13px 12px;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--acento);
  outline-offset:1px;
  border-color:var(--acento);
}
/* 96px son tres renglones. La descripcion de una clase es el encuadre del
   semestre —reglas, temario, evaluacion— y escribirlo por una rendija invita
   a no escribirlo. Se puede estirar a mano si hace falta mas. */
textarea{ min-height:160px; resize:vertical; }
input[type="radio"], input[type="checkbox"]{
  width:auto;
  accent-color:var(--tinta);
  margin:0;
}
input[type="file"]{ padding:9px 10px; font-size:13px; color:var(--mute); }

/* ── Opciones de reactivo ────────────────────────────────────── */

.opcion{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--superficie);
  border:1px solid var(--control);
  padding:12px 14px;
  margin-bottom:8px;
  cursor:pointer;
  font-size:15px;
  line-height:1.45;
  transition:background-color 140ms ease, border-color 140ms ease;
}
.opcion input{ flex:none; margin-top:3px; }
.opcion:has(input):hover{ background:var(--acento-suave); }
.opcion:not(:has(input)){ cursor:default; }
.opcion.marcada{
  background:var(--acento-suave);
  border-color:var(--acento);
}

/* revisión: el símbolo dice lo mismo que el color */
.opcion.acierto{ border-color:var(--ok); color:var(--ok); }
.opcion.acierto::before{ content:'✓'; font-weight:700; flex:none; }
.opcion.fallo{ border-color:var(--mal); color:var(--mal); }
.opcion.fallo::before{ content:'✗'; font-weight:700; flex:none; }

/* ── Barra de avance: pericón sobre cantera ──────────────────── */

.barra{
  height:12px;
  background:var(--fondo-hondo);
  border:1px solid var(--filete);
  margin:10px 0 6px;
  overflow:hidden;
}
.barra i{
  display:block;
  height:100%;
  background:var(--acento-fill);
  transition:width 200ms ease;
}

/* ── Elemento firma: el rombo de calificación ────────────────── */

.sello{
  width:118px;
  height:118px;
  margin:44px auto 40px;
  transform:rotate(45deg);
  display:grid;
  place-items:center;
  background:var(--fondo);
  border:2px solid var(--titular);
  box-shadow:0 0 0 5px var(--fondo), 0 0 0 6px var(--titular);  /* doble aro, no elevación */
}
.sello .interior{
  transform:rotate(-45deg);
  text-align:center;
  line-height:1;
}
.sello .cifra{
  display:block;
  font-family:var(--cifra);
  font-weight:700;
  font-size:38px;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  color:var(--titular);
}
.sello .pie{
  display:block;
  font-family:var(--cifra);
  font-size:8.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin-top:5px;
}
.sello.aprobado{
  border-color:var(--ok);
  box-shadow:0 0 0 5px var(--fondo), 0 0 0 6px var(--ok);
}
.sello.aprobado .cifra{ color:var(--ok); }
.sello.reprobado{
  border-color:var(--mal);
  box-shadow:0 0 0 5px var(--fondo), 0 0 0 6px var(--mal);
}
.sello.reprobado .cifra{ color:var(--mal); }

/* ── Tablas: filete entre renglones, cifras tabulares ────────── */

table{
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
}
th{
  text-align:left;
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:10px;
  color:var(--acento);
  padding:0 14px 10px 0;
  border-bottom:1px solid var(--filete);
}
td{
  padding:9px 14px 9px 0;
  border-bottom:1px solid var(--filete);
  vertical-align:baseline;
  font-size:14px;
}
tr:last-child td{ border-bottom:0; }

/* ── Materiales ──────────────────────────────────────────────── */

.recurso iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--filete);
  background:var(--titular);
}
/* El video de clase se graba con el teléfono, parado. El 16/9 fijo lo
   aplastaba a una franja con barras a los lados: aquí manda la proporción
   real del archivo (el 16/9 es solo mientras cargan los metadatos) y el
   alto se topa para que uno vertical no se coma tres pantallas. */
.recurso video{
  display:block;
  width:100%;
  aspect-ratio:auto 16/9;
  height:auto;
  max-height:78vh;
  border:1px solid var(--filete);
  background:var(--titular);
}
.recurso .pantalla-completa{ margin-top:10px; }
.recurso embed{
  display:block;
  width:100%;
  height:70vh;
  border:1px solid var(--filete);
}
/* En escritorio el boton de abrir PDF sobra: el visor incrustado sirve. Va
   AQUI, antes del media query de telefono, no despues: estaba al final del
   archivo y con la misma especificidad ganaba por orden, asi que el boton
   quedaba oculto tambien en el telefono — donde el <embed> tampoco se ve. El
   alumno abria un PDF y encontraba una pagina vacia con un "Descargar". */
.recurso .abrir-pdf{ display:none; }

/* ── El reproductor de podcast ───────────────────────────────────
   Controles propios sobre un <audio> sin controls: la tira gris del
   navegador era lo único de la plataforma que no hablaba sarape. */
.podcast{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--superficie);
  border:1px solid var(--filete);
  padding:18px;
}
.podcast-play{
  flex:none;
  width:58px; height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--acento-fill);
  color:var(--titular);
  border:1px solid var(--acento-fill);
  border-radius:var(--radio);
  cursor:pointer;
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.podcast-play:hover{ background:var(--acento); border-color:var(--acento); color:var(--fondo); }
.podcast-play:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.podcast-play svg{ width:26px; height:26px; }
.podcast-cuerpo{ flex:1; min-width:0; }

.podcast-linea{
  -webkit-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  height:22px;   /* el dedo necesita más que los 6px de la línea */
  margin:0;
  background:transparent;
  cursor:pointer;
  --avance:0%;
}
.podcast-linea::-webkit-slider-runnable-track{
  height:6px;
  background:linear-gradient(to right, var(--acento-fill) var(--avance), var(--fondo-hondo) var(--avance));
}
.podcast-linea::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  margin-top:-4px;
  background:var(--titular);
  border:none;
  border-radius:0;
  transform:rotate(45deg);   /* el rombo del sarape, en pico */
}
.podcast-linea::-moz-range-track{ height:6px; background:var(--fondo-hondo); }
.podcast-linea::-moz-range-progress{ height:6px; background:var(--acento-fill); }
.podcast-linea::-moz-range-thumb{
  width:14px; height:14px;
  background:var(--titular);
  border:none;
  border-radius:0;
  transform:rotate(45deg);
}
.podcast-linea:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

.podcast-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}
.podcast-tiempo,
.podcast-dura{
  font-family:var(--cifra);
  font-size:12px;
  color:var(--mute);
  font-variant-numeric:tabular-nums;
}
.podcast-mandos{ display:inline-flex; gap:6px; }
.podcast-brinco,
.podcast-vel{
  font-family:var(--cifra);
  font-size:11px;
  line-height:1;
  padding:7px 9px;
  background:transparent;
  color:var(--mute);
  border:1px solid var(--control);
  border-radius:var(--radio);
  cursor:pointer;
  transition:background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.podcast-brinco:hover,
.podcast-vel:hover{ background:var(--acento-suave); border-color:var(--acento); color:var(--titular); }
.podcast-brinco:focus-visible,
.podcast-vel:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
/* La velocidad cambia de "1×" a "1.25×": ancho fijo para que la fila
   no brinque con cada marcha. */
.podcast-vel{ min-width:52px; text-align:center; }
.lectura{
  white-space:pre-wrap;
  font-size:16px;
  line-height:1.7;
  max-width:62ch;
}

/* ── Lo que el maestro escribe, ya como markdown ─────────────────
   El pre-wrap de .lectura duplicaria los saltos: el markdown ya los
   convirtio en <br> y <p>, asi que aqui se apaga. */

.prosa{ white-space:normal; max-width:62ch; }
.prosa > *:first-child{ margin-top:0; }
.prosa > *:last-child{ margin-bottom:0; }

.prosa p{ margin:0 0 .85em; line-height:1.7; }
.prosa h3, .prosa h4, .prosa h5, .prosa h6{
  font-family:var(--texto);
  font-weight:700;
  line-height:1.3;
  color:var(--titular);
  margin:1.4em 0 .45em;
}
.prosa h3{ font-size:19px; }
.prosa h4{ font-size:17px; }
.prosa h5, .prosa h6{ font-size:15px; }

.prosa ul, .prosa ol{ margin:0 0 .85em; padding-left:1.35em; }
.prosa li{ margin-bottom:.3em; line-height:1.65; }
.prosa li::marker{ color:var(--acento); }

.prosa blockquote{
  margin:0 0 .85em;
  padding:2px 0 2px 16px;
  border-left:3px solid var(--acento-fill);
  color:var(--mute);
}
.prosa hr{
  border:0;
  border-top:1px solid var(--filete);
  margin:1.5em 0;
}
.prosa code{
  font-family:var(--cifra);
  font-size:0.88em;
  background:var(--fondo-hondo);
  padding:1px 5px;
}
.prosa strong{ font-weight:700; color:var(--titular); }
.prosa a{ color:var(--acento); }

/* Dentro de un aviso (instrucciones de tarea o quiz) el texto ya viene
   apretado: no hace falta que el ultimo parrafo empuje el borde. */
.aviso.prosa{ max-width:none; }

/* ── La ayuda de formato, en el panel ────────────────────────── */

.md-ayuda{ margin:-6px 0 18px; }
.md-ayuda summary{
  cursor:pointer;
  font-size:12.5px;
  color:var(--mute);
  padding:5px 0;
  list-style:none;
}
.md-ayuda summary::-webkit-details-marker{ display:none; }
.md-ayuda summary::before{
  content:'+ ';
  font-family:var(--cifra);
  color:var(--acento);
}
.md-ayuda[open] summary::before{ content:'– '; }
.md-ayuda summary:hover{ color:var(--tinta); }

.md-cuerpo{
  border:1px solid var(--filete);
  padding:14px 16px;
  margin-top:8px;
  background:var(--fondo);
}
.md-chuleta{ margin:0; padding-left:1.1em; }
.md-chuleta li{ font-size:13px; color:var(--mute); margin-bottom:4px; }
.md-chuleta code{
  font-family:var(--cifra);
  font-size:12px;
  color:var(--tinta);
  background:var(--superficie);
  padding:1px 4px;
}
.md-vista{
  background:var(--superficie);
  border:1px solid var(--filete);
  padding:14px 16px;
  font-size:15px;
}

@media (max-width:520px){
  .md-cuerpo, .md-vista{ padding:12px; }
}

/* ── El material, como indice ────────────────────────────────────
   Cada cosa es una tarjeta que abre en su pantalla. Antes se pintaba
   entera aqui: dos lecturas de 500 palabras dejaban la clase sin fondo,
   y tres videos montaban tres iframes antes de que nadie los pidiera. */

   La punta y el filo dorado los pone a.hoja, que ya es el lenguaje de todo
   lo accionable en la app: la tarjeta no inventa flecha propia. */

.recurso-liga h3{ margin:4px 0 6px; font-size:19px; line-height:1.25; }
.recurso-liga .apunte{ display:block; }

/* ── Adaptable y accesible ───────────────────────────────────── */

@media (max-width:520px){
  .hoja{ padding:16px; }
  .sello{ width:96px; height:96px; }
  .sello .cifra{ font-size:31px; }
  td, th{ padding-right:9px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   Tablero del alumno
   La clase de hoy manda: ocupa el ancho completo y es lo único con
   Bodoni grande. Lo anterior se lee como archivo, en una lista sobria.
   Sin sombras y sin radio: la jerarquía la hace la superficie, el
   filete y el peso del rótulo.
   ═══════════════════════════════════════════════════════════════ */

.cinta{
  display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; column-gap:1.5rem; row-gap:.25rem;
  padding-bottom:.9rem; margin-bottom:1.75rem;
  border-bottom:1px solid var(--filete);
}
.cinta .curso{
  font-family:var(--texto); font-weight:700; font-size:12px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--acento); margin:0;
}
.cinta .hoy{
  font-family:var(--cifra); font-size:12.5px; color:var(--mute);
  text-transform:lowercase;
}

.portada{
  display:block; text-decoration:none; color:inherit;
  background:var(--superficie);
  border:1px solid var(--control);
  border-top:5px solid var(--acento-fill);
  padding:clamp(1.4rem,4vw,2.5rem);
  margin-bottom:2.5rem;
  transition:background .12s linear;
}
.portada:hover{ background:var(--fondo); }
.portada:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.portada .rotulo{
  /* "CLASE DE HOY" son tres palabras: Chivo Mono es para cifras, códigos
     y etiquetas de UNA palabra. Esto es un rótulo, va en la voz de texto. */
  font-family:var(--texto); font-weight:700; font-size:11.5px;
  letter-spacing:.17em; text-transform:uppercase; color:var(--acento);
}
.portada h2{
  font-family:var(--rotulo); font-weight:400; text-transform:uppercase;
  font-size:clamp(27px,6vw,45px); line-height:1.02; letter-spacing:-.035em;
  color:var(--titular); margin:.55rem 0 0;
}
.portada .cuando{
  font-family:var(--cifra); font-size:13px; color:var(--mute); margin:.5rem 0 0;
}
.portada .resumen{
  font-size:16.5px; line-height:1.65; color:var(--mute);
  max-width:58ch; margin:.9rem 0 0;
}
.portada .fila{ margin-top:1.25rem; }
.portada .entrar{
  display:inline-block; margin-top:1.35rem;
  font-family:var(--texto); font-weight:700; font-size:14px;
  letter-spacing:.02em; color:var(--acento);
}
.portada:hover .entrar{ text-decoration:underline; }

/* ── Las anteriores: una lista, no un muro de tarjetas ── */

.pasada{
  display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
  text-decoration:none; color:inherit;
  padding:1rem .35rem; border-bottom:1px solid var(--filete);
}
.pasada:hover{ background:var(--superficie); }
.pasada:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.pasada .dia{
  font-family:var(--cifra); font-size:12.5px; color:var(--mute);
  flex:0 0 5.5rem; text-transform:lowercase;
}
.pasada h3{
  font-family:var(--texto); font-weight:600; font-size:17px;
  color:var(--tinta); margin:0; flex:1 1 12rem;
}
.pasada .pendiente{ flex:0 0 auto; }

@media (max-width:520px){
  .pasada{ gap:.3rem; }
  .pasada .dia{ flex:0 0 100%; }
}

/* ── Encabezado de la clase por dentro ── */
.encabezado-clase{ margin-bottom:1.75rem; }
.encabezado-clase .via{
  font-family:var(--texto); font-weight:700; font-size:11.5px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--acento); margin:0;
}
.encabezado-clase h1{ margin:.5rem 0 .35rem; }
.encabezado-clase .cuando{
  font-family:var(--cifra); font-size:13px; color:var(--mute); margin:0;
}
.encabezado-clase .descripcion{
  font-size:17px; line-height:1.7; color:var(--mute);
  max-width:62ch; margin:1.1rem 0 0;
}

/* Separador de secciones dentro de la clase */
.seccion{
  font-family:var(--texto); font-weight:700; font-size:12px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--mute);
  margin:2.5rem 0 .9rem; padding-bottom:.7rem;
  border-bottom:1px solid var(--filete);
}

/* ═══════════════════════════════════════════════════════════════
   Teléfono primero
   La mayoría de los alumnos entra desde un celular prestado o con
   datos contados. Lo que sigue corrige lo que en escritorio no se
   nota: dedos en vez de cursor, pantallas de 360 px, y PDFs que en
   un visor incrustado móvil son inservibles.
   ═══════════════════════════════════════════════════════════════ */

/* Una URL larga o una palabra sin espacios no debe empujar la página
   a lo ancho: el scroll horizontal es el defecto móvil más molesto. */
body{ overflow-wrap:break-word; }
.lectura, .apunte, h1, h2, h3, .pasada h3{ overflow-wrap:break-word; }

/* Las tablas (resultados) se desbordan sí o sí en 360 px:
   que rueden dentro de su caja y no arrastren la página. */
.hoja:has(table){ overflow-x:auto; }
table{ min-width:22rem; }

/* Quitar el destello gris del toque en iOS: se ve a desgana. */
a, button, label.opcion{ -webkit-tap-highlight-color:transparent; }

@media (max-width:640px){
  /* 48 px es el mínimo cómodo para un pulgar. Los botones de 41 px
     de alto se fallaban al primer intento. */
  .boton{
    min-height:48px;
    font-size:15px;
    padding:14px 20px;
  }
  .boton.chico{ min-height:44px; font-size:14px; }

  /* El botón principal de una tarjeta toma el ancho: en un teléfono
     el pulgar no busca, empuja. */
  .hoja > .boton:not(.chico):not(.fantasma):not(.peligro),
  form > .boton[type="submit"]{
    display:flex;
    width:100%;
  }

  /* Las opciones del quiz son lo que más se toca en toda la app. */
  .opcion{
    padding:16px 14px;
    font-size:16px;
    gap:14px;
  }
  .opcion input[type="radio"],
  .opcion input[type="checkbox"]{
    width:22px; height:22px; flex:0 0 22px; margin-top:1px;
  }

  /* La "×" de quitar alumno era un blanco de 20 px. */
  .boton.peligro{
    min-height:40px; min-width:40px; padding:10px 14px;
  }

  /* Un PDF incrustado en un teléfono no se puede leer ni navegar:
     mejor mandarlo al visor del sistema con un botón claro. */
  .recurso embed{ display:none; }
  .recurso .abrir-pdf{ display:inline-flex; }

  /* El podcast se oye en el teléfono: los saltos y la velocidad son
     blancos de pulgar, no de cursor. */
  .podcast{ padding:14px; gap:12px; }
  .podcast-play{ width:52px; height:52px; }
  .podcast-brinco,
  .podcast-vel{ min-height:40px; padding:10px; font-size:12px; }
  .podcast-pie{ flex-wrap:wrap; }

  /* Que quepa más contenido y menos margen. */
  .envoltura{ padding-left:14px; padding-right:14px; }
  .hoja{ padding:16px 14px; }
  .portada{ padding:1.2rem 1.1rem 1.4rem; }

  /* La cabecera con grupo + nombre + "cambiar" se apretaba en dos
     líneas rotas; que se apile ordenada. */
  .cabecera{ gap:.35rem 1rem; }
  .materia{ font-size:11px; line-height:1.5; }

  /* Los campos de una fila dejan de pelearse por el ancho. */
  .fila > input, .fila > select{ flex:1 1 100%; }
}

/* Un h2 DENTRO de una tarjeta no es un display: es el rótulo de la caja.
   Archivo Black en caja alta a 28 px encima de un formulario de tres
   campos compite con el contenido en vez de ordenarlo. */
.hoja > h2{
  font-family:var(--texto);
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 14px;
}

/* ═══════════════════════════════════════════════════════════════
   Cabecera del alumno
   Antes era una línea de texto en versalitas que en un teléfono se
   partía en tres renglones rotos y no ofrecía ninguna acción. Ahora
   el rombo lleva al inicio y el nombre abre un menú con lo único
   que el alumno necesita: cambiarse y salir.
   ═══════════════════════════════════════════════════════════════ */

.identidad{ position:relative; }

.yo-boton{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--filete);
  border-radius:var(--radio); cursor:pointer;
  padding:8px 12px; min-height:40px;
  font-family:var(--texto); font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tinta);
}
.yo-boton:hover{ border-color:var(--control); }
.yo-boton:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.yo-boton svg{ width:11px; height:11px; flex:none; stroke:currentColor;
  stroke-width:2; fill:none; stroke-linecap:butt; stroke-linejoin:miter;
  transition:transform .12s linear; }
.yo-boton[aria-expanded="true"] svg{ transform:rotate(180deg); }

.yo-menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20;
  min-width:15rem; background:var(--superficie);
  border:1px solid var(--control); border-top:3px solid var(--acento-fill);
  padding:14px 16px 10px;
}
.yo-menu[hidden]{ display:none; }
.yo-menu .quien{
  font-family:var(--texto); font-weight:700; font-size:16px;
  color:var(--titular); margin:0;
}
.yo-menu .donde{
  font-family:var(--cifra); font-size:11.5px; color:var(--mute);
  margin:3px 0 12px; padding-bottom:12px; border-bottom:1px solid var(--filete);
}
.yo-menu a, .yo-menu button{
  display:block; width:100%; text-align:left;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--texto); font-weight:600; font-size:15px;
  color:var(--tinta); text-decoration:none;
  padding:11px 0; min-height:44px;
}
.yo-menu a:hover, .yo-menu button:hover{ color:var(--acento); }
.yo-menu a:focus-visible, .yo-menu button:focus-visible{
  outline:2px solid var(--acento); outline-offset:2px;
}
.yo-menu .salir{ color:var(--mal); border-top:1px solid var(--filete); }

/* Sin nombre elegido todavía: el botón invita en vez de quedarse mudo. */
.yo-boton.pendiente{ border-color:var(--acento); color:var(--acento); }

@media (max-width:640px){
  .cabecera{ align-items:center; }
  /* 44px también aquí: es el botón que abre lo único que el alumno
     puede hacer desde la cabecera. */
  .yo-boton{ min-height:44px; font-size:11px; padding:10px; max-width:48vw; }
  .yo-boton .nombre{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .yo-menu{ min-width:min(17rem, calc(100vw - 28px)); }
}

/* ═══════════════════════════════════════════════════════════════
   Lo que se toca se ve que se toca
   El problema no era el color: era que una lectura y un quiz por
   contestar tenían exactamente la misma caja. Lo accionable ahora
   lleva filo de pericón y una punta que avanza; el material se
   queda quieto porque solo se lee.
   ═══════════════════════════════════════════════════════════════ */

a.hoja{
  position:relative;
  padding-right:44px;
  border-left:3px solid var(--acento-fill);
  transition:background-color .12s linear, border-color .12s linear;
}
a.hoja::after{
  content:"→";
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--texto); font-size:19px; color:var(--acento);
  transition:transform .12s ease-out;
}
a.hoja:hover{ background:var(--fondo); }
a.hoja:hover::after{ transform:translateY(-50%) translateX(3px); }
a.hoja:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }

/* La etiqueta del material y su título respiran como una unidad. */
.recurso > .etiqueta,
.recurso-liga > .etiqueta{ display:block; margin-bottom:2px; }

/* Estado vacío: que no parezca una página rota. */
.vacio{ text-align:center; padding:3.5rem 1rem; }
.vacio h1{ margin-bottom:.75rem; }
.vacio p{ color:var(--mute); max-width:34ch; margin:0 auto; }

@media (max-width:640px){
  a.hoja{ padding-right:38px; }
  a.hoja::after{ right:14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Concentrado del semestre
   Una fila por alumno y una columna por quiz: con 10 quizzes ya no
   cabe en un teléfono, y el teléfono es donde el maestro la abre,
   en el salón. Por eso la tabla scrollea en horizontal DENTRO de su
   hoja —nunca la página entera— y las dos primeras columnas se
   quedan clavadas: sin el nombre a la vista, la tercera columna de
   calificaciones ya no se sabe de quién es.
   Radio 0 y sin sombras, como todo lo demás: la separación la hacen
   el filete y el fondo.
   ═══════════════════════════════════════════════════════════════ */

.concentrado{
  overflow-x:auto;
  /* El borde derecho avisa que hay más tabla hacia allá. */
  border-right:1px solid var(--filete);
  -webkit-overflow-scrolling:touch;
}
.concentrado table{
  min-width:max-content;
  /* separate y no collapse: con border-collapse los bordes de una
     celda sticky se quedan atrás al hacer scroll y las columnas
     congeladas aparecen sin línea. */
  border-collapse:separate;
  border-spacing:0;
}
.concentrado th,
.concentrado td{
  border-bottom:1px solid var(--filete);
  white-space:nowrap;
  padding:9px 12px;
}
.concentrado thead th{
  position:sticky;
  top:0;
  background:var(--superficie);
  z-index:2;
}
/* Las congeladas. El `left` va a mano porque sticky necesita el
   desplazamiento exacto y no sabe sumar el ancho de la anterior. */
.concentrado .fijo{
  position:sticky;
  background:var(--superficie);
  z-index:1;
}
.concentrado thead .fijo{ z-index:3; }   /* la esquina, encima de las dos */
.concentrado .f1{ left:0; width:150px; max-width:150px; }
.concentrado .f2{
  left:150px; width:92px; max-width:92px;
  /* El filete vertical marca dónde acaba lo congelado y empieza lo
     que se mueve; sin él las cifras parecen flotar sobre el nombre. */
  border-right:1px solid var(--filete);
}
/* El recorte va en la CELDA, no en un inline-block adentro: metido en un
   <b> cambiaba la altura de la línea y las filas quedaban de distinto alto
   según si el nombre se recortaba o no. */
.concentrado .fijo{ overflow:hidden; text-overflow:ellipsis; }
/* El resto de la app quita el filete de la última fila; aquí igual, o la
   esquina congelada dibuja una L suelta debajo del último alumno. */
.concentrado tbody tr:last-child td{ border-bottom:0; }
.concentrado .cc{ text-align:right; font-size:13px; }
.concentrado .num{
  font-family:var(--cifra);
  font-variant-numeric:tabular-nums;
  font-weight:700;
}
.concentrado .falta{ color:var(--mute); }      /* no presentó: no es cero */
.concentrado .pend{ color:var(--acento); }     /* entregado, sin revisar */
.concentrado .ajuste{ color:var(--acento); }
/* El rótulo de cada quiz, en caja alta y Archivo Black como todos los
   titulares. Se limita el ancho para que un título largo no estire la
   columna a media pantalla. */
.concentrado .gira{
  font-family:var(--rotulo);
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:0.1em;
  color:var(--acento);
  max-width:104px;
  white-space:normal;
  vertical-align:bottom;
}

/* Los pendientes accionables, arriba de la tabla. */
.pendientes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:18px;
}
.pendiente{ border-left:2px solid var(--acento-fill); padding-left:12px; }
.pendiente .cuenta{
  font-family:var(--cifra);
  font-weight:700;
  font-size:30px;
  letter-spacing:-.03em;
  color:var(--titular);
  margin:2px 0 6px;
}
.pendiente .liga{
  display:block;
  font-size:13px;
  color:var(--tinta);
  padding:2px 0;
}
.pendiente .liga:hover{ color:var(--acento); }

.cifrota{
  font-family:var(--cifra);
  font-weight:700;
  font-size:34px;
  letter-spacing:-.03em;
  color:var(--titular);
  margin:2px 0 4px;
}

@media (max-width:520px){
  /* En el teléfono las dos congeladas se aprietan para dejar ver al
     menos dos columnas de calificaciones; el nombre completo sigue
     disponible en el `title`. */
  .concentrado .f1{ width:118px; max-width:118px; }
  .concentrado .f2{ left:118px; width:62px; max-width:62px; }
  .concentrado th, .concentrado td{ padding:8px; }
  .concentrado .gira{ max-width:76px; }

  /* Con cinco pestañas la barra ya no cabe en 360px y se partía en dos
     renglones: la activa quedaba sola abajo, subrayada de lado a lado, y
     parecía un encabezado de sección en vez de una pestaña. Rueda en
     horizontal, que es lo que el pulgar espera de una barra de pestañas. */
  .pestanas{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:18px;
    scrollbar-width:none;
  }
  .pestanas::-webkit-scrollbar{ display:none; }
  .pestana{ flex:0 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   Cajones y tablero
   Radio 0 y sin sombra, como todo lo demás: el sistema manda sobre
   la costumbre de redondearle las esquinas a una gráfica.
   ═══════════════════════════════════════════════════════════════ */

/* El cajón: <details> nativo. Se abre con teclado y con lector de
   pantalla sin que haya que escribir nada de eso a mano, que es más
   de lo que se puede decir de un acordeón hecho con divs. */
.cajon{
  border-top:1px solid var(--filete);
  border-bottom:1px solid var(--filete);
  margin:12px 0;
}
.cajon + .cajon{ border-top:0; margin-top:-12px; }
.cajon > summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 2px;
  cursor:pointer;
  list-style:none;
  min-height:48px;           /* el dedo, no el cursor */
  box-sizing:border-box;
}
.cajon > summary::-webkit-details-marker{ display:none; }
.cajon > summary:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
.cajonTitulo{
  font-family:var(--texto);
  font-weight:700;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
/* La flecha se dibuja aquí y no con un carácter suelto, para que gire
   sin depender de qué emoji traiga el teléfono. */
.cajonTitulo::before{
  content:"";
  display:inline-block;
  width:0; height:0;
  margin-right:10px;
  border-left:5px solid var(--mute);
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  transform:translateY(-1px);
  transition:transform .12s ease;
}
.cajon[open] > summary .cajonTitulo::before{ transform:translateY(-1px) rotate(90deg); }
.cajonResumen{
  font-family:var(--cifra);
  font-size:13px;
  color:var(--tinta);
}
.cajonCuerpo{ padding-bottom:14px; }

/* Las tarjetas de cifra. Se acomodan solas: cuatro en escritorio, dos
   en un teléfono, sin un punto de quiebre escrito a mano. */
.tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1px;
  background:var(--filete);      /* el hilo entre tarjetas es el fondo */
  border:1px solid var(--filete);
  margin-bottom:16px;
}
.tarjeta{
  background:var(--superficie);
  padding:16px 18px 18px;
}
.tarjeta.alerta .cifrota{ color:var(--mal); }

/* La gráfica escala con su hoja, pero no crece sin fin: pasada cierta
   anchura las barras se vuelven bloques y el sistema pide marcas
   delgadas. */
.grafica{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  overflow:visible;
}
/* Sin `text-anchor` aquí a propósito: en SVG el CSS le gana al atributo de
   presentación, así que ponerlo en la clase pisaba el text-anchor="start" de
   cada etiqueta y los nombres salían centrados en x=0 — o sea, la mitad del
   nombre fuera del lienzo. La alineación la decide cada texto. */
.grafica .ejeTexto{
  font-family:var(--texto);
  font-size:13px;
  fill:var(--mute);
}
.grafica .ejePie{
  font-family:var(--texto);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  fill:var(--mal);
}
.grafica .ejeCifra{
  font-family:var(--cifra);
  font-size:11px;
  fill:var(--mute);
}
/* El número del dato va en tinta, no en el color de la barra: la barra ya
   carga la identidad, y un número de color se lee como decoración. */
.grafica .valorDato{
  font-family:var(--cifra);
  font-size:13px;
  fill:var(--tinta);
}
/* Se llama `dato` y no `marca` porque `.marca` ya es el logotipo del panel:
   Archivo Black en caja alta. `text-transform` se hereda, así que cada grupo
   del SVG estaba subiendo a MAYÚSCULAS el nombre de los alumnos. */
.grafica .dato rect[fill="transparent"],
.grafica .dato circle[fill="transparent"]{ cursor:default; }
.grafica .dato:hover rect:not([fill="transparent"]),
.grafica .dato:hover circle:not([fill="transparent"]){ opacity:.72; }

.filtros{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin:16px 0 8px;
}
.filtros label{ margin:0; }
.filtros select{ min-width:12rem; }

@media (max-width:640px){
  /* En el teléfono los nombres de la barra horizontal se comen el ancho:
     la gráfica se deja crecer a lo alto y el SVG reparte. */
  .grafica{ max-width:none; }
  .tarjeta{ padding:14px; }
}

/* El renglón del reporte: una cifra a la izquierda y el texto a la derecha.
   No es una tabla porque no se compara en columnas — se lee de corrido. */
.reporte{ margin:4px 0 0; }
.renglon{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:12px 2px;
  border-bottom:1px solid var(--filete);
  min-height:48px;
  box-sizing:border-box;
}
.renglon:last-child{ border-bottom:0; }
a.renglon{
  text-decoration:none;
  color:inherit;
  background-image:none;   /* .liga subraya con degradado; aquí estorba */
}
a.renglon:hover{ background:var(--fondo); }
a.renglon:focus-visible{ outline:2px solid var(--tinta); outline-offset:-2px; }
.renglonDato{ flex:0 0 3.2rem; }
.renglonCuerpo{ flex:1 1 auto; min-width:0; }
.renglonCuerpo b{ overflow-wrap:anywhere; }

/* La insignia del renglón carga la cifra, así que va en Chivo Mono y con
   ancho fijo: si cada una mide distinto, la columna deja de ser columna. */
.renglon .insignia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:3.2rem;
  padding:4px 6px;
  font-family:var(--cifra);
  font-size:14px;
}

/* ═══════════════════════════════════════════════════════════════
   iA-teneo · shell y biblioteca del alumno

   El panel del maestro comparte esta hoja, así que todo el rediseño vive
   bajo .alumno-app. La navegación permanece; el contenido cambia. La
   interfaz se comporta como una biblioteca, no como una pila de tarjetas.
   ═══════════════════════════════════════════════════════════════ */

.alumno-app .envoltura{
  max-width:1120px;
  padding:0 0 5rem;
  overflow:clip;
}
.alumno-app #app{
  min-height:calc(100vh - 76px);
  padding:clamp(1.5rem,4vw,3.25rem) clamp(1rem,5vw,4.5rem) 0;
}
.alumno-app #app > h1:focus,
.alumno-app #app h1[tabindex="-1"]:focus{ outline:none; }

/* ── Navbar persistente ─────────────────────────────────────── */

.alumno-app .cabecera{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns:auto auto minmax(8rem,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:72px;
  margin:0;
  padding:10px clamp(14px,3vw,28px);
  background:var(--titular);
  border:0;
  border-bottom:4px solid var(--acento-fill);
  color:var(--superficie);
}
.alumno-app .marca{
  gap:9px;
  color:var(--superficie);
  font-size:16px;
  letter-spacing:-.01em;
  text-transform:none;
  white-space:nowrap;
}
.alumno-app .marca svg{ width:22px; height:22px; }
.alumno-app .marca-texto{ color:var(--superficie); }
.alumno-app .marca-texto b{ color:var(--acento-fill); font-weight:400; }

.menu-boton,
.menu-cerrar{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  color:inherit;
  background:transparent;
  border:1px solid rgba(251,247,236,.28);
  cursor:pointer;
}
.menu-boton svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; }
.menu-boton:hover{ color:var(--acento-fill); border-color:var(--acento-fill); }
.menu-boton:focus-visible,
.menu-cerrar:focus-visible{ outline:2px solid var(--acento-fill); outline-offset:2px; }

.nav-buscador{
  position:relative;
  justify-self:end;
  display:flex;
  align-items:center;
  width:min(100%, 300px);
  height:44px;
  border:1px solid rgba(251,247,236,.3);
  background:rgba(251,247,236,.08);
}
.nav-buscador > svg{
  position:absolute;
  left:13px;
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--superficie);
  stroke-width:1.8;
  pointer-events:none;
}
.nav-buscador input{
  min-width:0;
  height:42px;
  padding:0 72px 0 40px;
  color:var(--superficie);
  background:transparent;
  border:0;
  outline:0;
  font-family:var(--texto);
  font-size:15px;
}
.nav-buscador input::placeholder{ color:rgba(251,247,236,.65); }
.nav-buscador:focus-within{ border-color:var(--acento-fill); outline:1px solid var(--acento-fill); }
.nav-buscador button{
  position:absolute;
  right:4px;
  height:34px;
  padding:0 10px;
  color:var(--titular);
  background:var(--acento-fill);
  border:0;
  font-family:var(--texto);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.alumno-app .identidad{ min-width:0; }
.alumno-app .yo-boton{
  max-width:240px;
  min-height:44px;
  padding:4px 8px 4px 4px;
  gap:9px;
  color:var(--superficie);
  border-color:rgba(251,247,236,.3);
  text-transform:none;
  letter-spacing:0;
}
.alumno-app .yo-boton:hover{ border-color:var(--acento-fill); }
.alumno-app .yo-boton .avatar{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:none;
  background:var(--acento-fill);
  color:var(--titular);
  font-family:var(--rotulo);
  font-size:13px;
}
.alumno-app .identidad-texto{ display:flex; flex-direction:column; min-width:0; text-align:left; line-height:1.15; }
.alumno-app .yo-boton .nombre{ font-size:13px; color:var(--superficie); }
.alumno-app .yo-boton .grupo-corto{
  max-width:150px;
  margin-top:3px;
  overflow:hidden;
  color:rgba(251,247,236,.65);
  font-family:var(--cifra);
  font-size:9.5px;
  font-weight:400;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.alumno-app .yo-menu{ top:calc(100% + 10px); color:var(--tinta); }

/* ── Drawer ─────────────────────────────────────────────────── */

.menu-velo{
  position:fixed;
  inset:0;
  z-index:79;
  visibility:hidden;
  opacity:0;
  background:rgba(16,28,54,.6);
  transition:opacity 180ms ease, visibility 180ms ease;
}
.menu-lateral{
  position:fixed;
  inset:0 auto 0 0;
  z-index:80;
  display:flex;
  flex-direction:column;
  width:min(380px, 92vw);
  padding:0 24px 24px;
  overflow-y:auto;
  visibility:hidden;
  transform:translateX(-100%);
  background:var(--superficie);
  border-right:4px solid var(--acento-fill);
  transition:transform 220ms ease, visibility 220ms ease;
}
.menu-abierto{ overflow:hidden; }
.menu-abierto .menu-velo{ visibility:visible; opacity:1; }
.menu-abierto .menu-lateral{ visibility:visible; transform:translateX(0); }
.menu-encabezado{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:76px;
  margin:0 -24px 18px;
  padding:10px 20px 10px 24px;
  background:var(--titular);
  color:var(--superficie);
  border-bottom:4px solid var(--acento-fill);
}
.menu-lateral .marca{ color:var(--superficie); }
.menu-cerrar{ border:0; font-family:var(--texto); font-size:30px; font-weight:400; line-height:1; }
.menu-nav{ display:grid; gap:4px; }
.menu-nav a{
  display:grid;
  grid-template-columns:32px 1fr;
  align-items:center;
  gap:12px;
  min-height:66px;
  padding:10px 8px;
  color:var(--tinta);
  border-bottom:1px solid var(--filete);
  text-decoration:none;
}
.menu-nav a:hover{ background:var(--fondo); }
.menu-nav a:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.menu-nav svg{ width:23px; height:23px; fill:none; stroke:var(--acento); stroke-width:1.7; }
.menu-nav b{ display:block; font-family:var(--texto); font-size:17px; color:var(--titular); }
.menu-nav small{ display:block; margin-top:2px; color:var(--mute); font-family:var(--texto); font-size:12px; line-height:1.35; }
.menu-sesion{
  margin-top:auto;
  padding:20px 4px 0;
  border-top:1px solid var(--filete);
}
.menu-sesion-nombre{ margin:6px 0 0; color:var(--titular); font-weight:700; }
.menu-sesion-grupo{ margin:1px 0 0; color:var(--mute); font-family:var(--cifra); font-size:11px; }
.menu-sesion-vacia{ color:var(--mute); font-size:14px; line-height:1.5; }

/* ── Inicio: continuidad + biblioteca ───────────────────────── */

.sobretitulo{
  margin:0 0 .45rem;
  color:var(--acento);
  font-family:var(--cifra);
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.bienvenida{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,320px);
  align-items:end;
  gap:clamp(1.5rem,4vw,3.5rem);
  margin-bottom:1.5rem;
}
.bienvenida h1{ max-width:680px; margin:0; font-size:clamp(34px,5.6vw,58px); }
.bienvenida h1 span{ color:var(--acento); }
.bienvenida-texto{ max-width:55ch; margin:.9rem 0 0; color:var(--mute); font-size:17px; line-height:1.55; }
.buscar-destacado{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:10px;
  min-height:78px;
  padding:14px 16px;
  color:var(--tinta);
  background:var(--superficie);
  border:1px solid var(--control);
  border-left:5px solid var(--acento-fill);
  text-decoration:none;
}
.buscar-destacado:hover{ background:var(--acento-suave); }
.buscar-destacado:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.buscar-destacado svg{ width:27px; height:27px; fill:none; stroke:var(--acento); stroke-width:1.7; }
.buscar-destacado b{ display:block; color:var(--titular); font-size:15px; }
.buscar-destacado small{ display:block; margin-top:2px; color:var(--mute); font-size:11px; line-height:1.35; }
.buscar-destacado > span:last-child{ color:var(--acento); font-size:20px; }

.resumen-inicio{
  display:flex;
  align-items:center;
  gap:0;
  margin:0 0 2rem;
  border:1px solid var(--filete);
  background:rgba(251,247,236,.5);
}
.resumen-inicio > span,
.resumen-inicio > time{
  padding:10px 15px;
  color:var(--mute);
  border-right:1px solid var(--filete);
  font-family:var(--cifra);
  font-size:10.5px;
  text-transform:uppercase;
}
.resumen-inicio b{ color:var(--titular); font-size:14px; }
.resumen-inicio .con-pendientes b{ color:var(--ok); }
.resumen-inicio time{ margin-left:auto; border-right:0; text-transform:lowercase; }

.alumno-app .portada{
  position:relative;
  overflow:hidden;
  padding:clamp(1.5rem,4vw,2.75rem);
  margin-bottom:clamp(2.5rem,6vw,4.25rem);
  color:var(--superficie);
  background:var(--titular);
  border:1px solid var(--titular);
  border-top:6px solid var(--acento-fill);
}
.alumno-app .portada::before{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-95px;
  width:235px;
  height:235px;
  border:1px solid rgba(233,167,44,.35);
  transform:rotate(45deg);
}
.alumno-app .portada:hover{ background:#172541; }
.portada-cabecera{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.alumno-app .portada .rotulo{ color:var(--acento-fill); }
.portada-curso{
  color:rgba(251,247,236,.68);
  font-family:var(--cifra);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.alumno-app .portada h2{ position:relative; max-width:820px; color:var(--superficie); font-size:clamp(28px,5vw,47px); }
.alumno-app .portada .cuando,
.alumno-app .portada .resumen,
.alumno-app .portada .etiqueta{ position:relative; color:rgba(251,247,236,.72); }
.alumno-app .portada .insignia.abierto{ position:relative; color:#A8D9B9; }
.alumno-app .portada .entrar{ position:relative; color:var(--acento-fill); }

.biblioteca-inicio{ margin-top:0; }
.titulo-seccion-flex{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1.5rem;
  margin-bottom:1rem;
}
.titulo-seccion-flex h2{ margin:0; font-family:var(--texto); font-size:clamp(25px,3vw,34px); text-transform:none; letter-spacing:-.02em; }
.titulo-seccion-flex > a{ flex:none; color:var(--acento); font-weight:700; font-size:13px; text-decoration:none; }
.titulo-seccion-flex > a:hover{ text-decoration:underline; }
.cursos-lista{ display:grid; gap:12px; }
.curso-bloque{ background:var(--superficie); border:1px solid var(--filete); }
.curso-bloque summary{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto 20px;
  align-items:center;
  gap:13px;
  min-height:76px;
  padding:12px 16px;
  cursor:pointer;
  list-style:none;
}
.curso-bloque summary::-webkit-details-marker{ display:none; }
.curso-bloque summary:hover{ background:var(--fondo); }
.curso-bloque summary:focus-visible{ outline:2px solid var(--acento); outline-offset:-2px; }
.curso-marca{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  color:var(--superficie);
  background:var(--tinta);
  font-family:var(--rotulo);
  font-size:13px;
}
.curso-identidad{ min-width:0; }
.curso-identidad b{ display:block; overflow:hidden; color:var(--titular); font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
.curso-identidad small{ display:block; margin-top:2px; color:var(--mute); font-family:var(--cifra); font-size:10px; text-transform:uppercase; }
.curso-pendientes,
.curso-al-dia{ color:var(--ok); font-family:var(--cifra); font-size:10px; font-weight:700; text-transform:uppercase; }
.curso-al-dia{ color:var(--mute); }
.curso-bloque summary > svg{ width:18px; height:18px; fill:none; stroke:var(--mute); stroke-width:2; transition:transform 150ms ease; }
.curso-bloque[open] summary > svg{ transform:rotate(180deg); }
.curso-clases{ padding:0 16px 10px; border-top:1px solid var(--filete); }
.alumno-app .clase-compacta{ display:grid; grid-template-columns:70px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px 4px; }
.clase-compacta .dia{ flex:auto; }
.clase-compacta-cuerpo{ min-width:0; }
.clase-compacta-cuerpo b{ display:block; color:var(--tinta); font-family:var(--texto); font-size:16px; line-height:1.3; }
.clase-compacta-cuerpo small{ display:block; margin-top:3px; color:var(--mute); font-family:var(--cifra); font-size:10px; text-transform:uppercase; }
.lista-flecha{ color:var(--acento); font-size:18px; }

/* ── Búsqueda ───────────────────────────────────────────────── */

.explorador{ max-width:960px; margin:0 auto; }
.explorador > h1{ margin-bottom:.6rem; }
.explorador-intro{ margin:0 0 1.5rem; color:var(--mute); font-size:17px; }
.busqueda-grande{
  position:relative;
  display:flex;
  align-items:center;
  margin:0;
  background:var(--superficie);
  border:2px solid var(--tinta);
}
.busqueda-grande:focus-within{ border-color:var(--acento); outline:2px solid var(--acento-suave); }
.busqueda-grande svg{ position:absolute; left:18px; width:25px; height:25px; fill:none; stroke:var(--acento); stroke-width:1.8; }
.busqueda-grande input{
  height:62px;
  padding:0 64px 0 56px;
  background:transparent;
  border:0;
  outline:0;
  font-size:19px;
}
.busqueda-grande kbd{
  position:absolute;
  right:16px;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  color:var(--mute);
  background:var(--fondo);
  border:1px solid var(--filete);
  font-family:var(--cifra);
  font-size:12px;
}
.filtros-curso{ display:flex; gap:8px; margin:14px 0 0; padding-bottom:4px; overflow-x:auto; scrollbar-width:thin; }
.filtros-curso button{
  flex:none;
  min-height:38px;
  padding:8px 13px;
  color:var(--mute);
  background:transparent;
  border:1px solid var(--control);
  font-family:var(--texto);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}
.filtros-curso button:hover{ color:var(--tinta); border-color:var(--tinta); }
.filtros-curso button.activo{ color:var(--superficie); background:var(--tinta); border-color:var(--tinta); }
.filtros-curso button:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.conteo-resultados{ margin:1.3rem 0 .8rem; color:var(--mute); font-family:var(--cifra); font-size:11px; text-transform:uppercase; }
.resultados-busqueda{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.resultado-clase{
  display:flex;
  flex-direction:column;
  min-height:245px;
  padding:20px;
  color:var(--tinta);
  background:var(--superficie);
  border:1px solid var(--filete);
  border-top:4px solid var(--acento-fill);
  text-decoration:none;
}
.resultado-clase:hover{ border-color:var(--control); background:var(--fondo); }
.resultado-clase:focus-visible{ outline:2px solid var(--acento); outline-offset:2px; }
.resultado-meta{ display:flex; justify-content:space-between; gap:12px; color:var(--mute); font-family:var(--cifra); font-size:10px; text-transform:uppercase; }
.resultado-clase h2{ margin:.85rem 0 .55rem; color:var(--titular); font-family:var(--texto); font-size:23px; line-height:1.15; letter-spacing:-.015em; text-transform:none; }
.resultado-clase > p{ display:-webkit-box; overflow:hidden; margin:0 0 1rem; color:var(--mute); font-size:14px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.resultado-pie{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--filete); }
.resultado-abrir{ margin-left:auto; color:var(--acento); font-weight:700; font-size:13px; }
.sin-resultados{ grid-column:1/-1; padding:3.5rem 1rem; text-align:center; border:1px dashed var(--control); }
.sin-resultados > span{ color:var(--acento); font-size:42px; }
.sin-resultados h2{ margin:.4rem 0; font-family:var(--texto); font-size:25px; text-transform:none; letter-spacing:0; }
.sin-resultados p{ color:var(--mute); }
.sin-resultados .boton{ margin-top:1rem; }
.vacio-ilustrado .vacio-rombo{ display:block; width:42px; height:42px; margin:0 auto 1.5rem; border:2px solid var(--acento); transform:rotate(45deg); }

@media (max-width:820px){
  .bienvenida{ grid-template-columns:1fr; align-items:start; }
  .buscar-destacado{ max-width:430px; }
  .alumno-app .yo-boton .grupo-corto{ display:none; }
}

@media (max-width:640px){
  .alumno-app .cabecera{
    grid-template-columns:44px minmax(0,1fr) 44px 44px;
    gap:7px;
    min-height:64px;
    padding:8px 10px;
  }
  .alumno-app .marca{ justify-self:start; font-size:14px; }
  .alumno-app .marca svg{ width:18px; height:18px; }
  .nav-buscador{ grid-column:3; width:44px; height:44px; border-color:rgba(251,247,236,.28); }
  .nav-buscador > svg{ left:12px; width:18px; height:18px; }
  .nav-buscador input{ display:none; }
  .nav-buscador button{ inset:-1px; width:44px; height:44px; padding:0; background:transparent; }
  .nav-buscar-texto{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .alumno-app .identidad{ grid-column:4; }
  .alumno-app .yo-boton{ width:44px; padding:4px; border-color:rgba(251,247,236,.28); }
  .alumno-app .yo-boton .identidad-texto,
  .alumno-app .yo-boton > svg{ display:none; }
  .alumno-app .yo-boton .avatar{ width:34px; height:34px; }
  .alumno-app .yo-menu{ right:0; min-width:min(18rem,calc(100vw - 20px)); }
  .alumno-app #app{ padding:1.5rem 14px 0; }
  .bienvenida h1{ font-size:clamp(31px,10vw,43px); }
  .bienvenida-texto{ font-size:16px; }
  .resumen-inicio{ display:grid; grid-template-columns:repeat(3,1fr); }
  .resumen-inicio > span{ padding:10px 6px; text-align:center; }
  .resumen-inicio > span:nth-child(3){ border-right:0; }
  .resumen-inicio > time{ grid-column:1/-1; margin:0; text-align:center; border-top:1px solid var(--filete); }
  .portada-cabecera{ align-items:flex-start; flex-direction:column; gap:4px; }
  .alumno-app .portada{ padding:1.35rem 1.15rem 1.5rem; }
  .alumno-app .portada h2{ font-size:clamp(28px,9vw,39px); }
  .titulo-seccion-flex{ align-items:flex-start; flex-direction:column; gap:.45rem; }
  .curso-bloque summary{ grid-template-columns:38px minmax(0,1fr) 18px; gap:10px; padding:12px; }
  .curso-marca{ width:34px; height:34px; }
  .curso-pendientes,.curso-al-dia{ display:none; }
  .curso-clases{ padding:0 12px 8px; }
  .alumno-app .clase-compacta{ grid-template-columns:1fr auto; gap:5px 10px; padding:14px 2px; }
  .clase-compacta .dia{ grid-column:1/-1; }
  .clase-compacta .pendiente{ max-width:125px; overflow:hidden; text-overflow:ellipsis; }
  .busqueda-grande input{ height:56px; padding-left:50px; padding-right:14px; font-size:17px; }
  .busqueda-grande svg{ left:14px; width:22px; height:22px; }
  .busqueda-grande kbd{ display:none; }
  .resultados-busqueda{ grid-template-columns:1fr; }
  .resultado-clase{ min-height:220px; padding:17px; }
}

@media (max-width:390px){
  .alumno-app .marca svg{ display:none; }
  .alumno-app .cabecera{ grid-template-columns:44px minmax(0,1fr) 44px 44px; }
  .alumno-app .marca{ font-size:13px; }
}