/* ═══════════════════════════════════════════════════════════════
   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);
}

/* ── 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);
}
textarea{ min-height:96px; 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 video,
.recurso iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid var(--filete);
  background:var(--titular);
}
.recurso embed{
  display:block;
  width:100%;
  height:70vh;
  border:1px solid var(--filete);
}
.lectura{
  white-space:pre-wrap;
  font-size:16px;
  line-height:1.7;
  max-width:62ch;
}

/* ── 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; }

  /* 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%; }
}

/* En escritorio el botón de abrir PDF sobra: el visor incrustado sirve. */
.recurso .abrir-pdf{ display:none; }

/* 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; }

/* El material no es accionable: no lleva filo ni punta. */
.hoja.recurso{ border-left:1px solid var(--filete); padding-right:22px; }
.hoja.recurso::after{ content:none; }

/* La etiqueta del material y su título respiran como una unidad. */
.recurso > .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; }
}