/* Pase de lista — para el monitor del salón y para el teléfono.
   Sin hojas de terceros y con la pila del sistema como tipografía. La única
   excepción es la pantalla de inicio, que pide Source Serif 4 y Public Sans
   a Google Fonts con `display=swap` (DC-49): sin red hacia Google se ve con
   la pila del sistema y no se rompe nada.
   Objetivos táctiles de 44 px como mínimo, porque esto se usa de pie.

   La paleta es la del diseño del pase en monitor
   (`docs/plans/2026-10-18-pase-lista-monitor-design.md`, §3): berenjena
   institucional para el escudo, los títulos, PRESENTE y la barra de avance;
   dorado para el escudo y la opción activa del menú. FALTA y RETARDO llevan
   sus propios colores y se distinguen también por luminosidad, no solo por
   el tono.

   Un solo tema, a propósito, y por eso `color-scheme: light`: el sitio
   institucional es claro y esta interfaz lo imita. */

:root {
  color-scheme: light;

  /* Institucionales */
  --berenjena: #3A1A3C;
  --dorado: #C9A227;
  --dorado-tenue: #f6efd9;

  /* Neutros */
  --fondo: #F4F1F4;
  --superficie: #FFFFFF;
  --hundido: #ebe6eb;
  --linea: #E4DDE4;
  --texto: #24132A;
  --texto-2: #5E4A62;

  /* Estatus. #E2A93B no da 4.5:1 como texto sobre blanco: es un fondo, y
     el texto encima va en `--retardo-texto`. */
  --falta: #9B1C1C;
  --retardo: #E2A93B;
  --retardo-texto: #2A1C00;

  /* El menú lateral (diseño, §5): los títulos de sección, más claros que
     las opciones, y el fondo de la opción activa o con el cursor encima. */
  --menu-titulo: #6E5E71;
  --menu-activo: #F4EEF4;

  /* El alumno que viene de otro grupo (DC-54) */
  --visitante-fondo: #F6EDCF;
  --visitante-texto: #5A4300;

  /* Semánticos */
  --acento: var(--berenjena);
  --acento-tinta: #ffffff;
  --ok: var(--berenjena);

  --radio: 10px;
  --ancho-menu: 260px;
  --alto-cabecera: 76px;
}

* {
  box-sizing: border-box;
}

/* `hidden` tiene que ganar siempre.
   El navegador lo aplica con `[hidden] { display: none }`, que vive en su
   hoja de estilos y por tanto pierde contra CUALQUIER regla nuestra: un
   `display: flex` sobre una sección oculta la pinta igual. Sin esto, las
   cuatro pantallas se ven a la vez. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------- el menú lateral

   Claro y solo texto, agrupado en cuatro secciones (diseño, §5). Un solo
   estado, `body.menu-oculto`, para las dos formas de esconderlo: en
   pantalla ancha el menú se corre por completo y el contenido se estira; en
   el teléfono es un cajón que se superpone, con un velo detrás. */

.menu {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 20;
  width: var(--ancho-menu);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-inline-end: 1px solid var(--linea);
  color: var(--texto);
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.2s ease, visibility 0s;
}

/* Oculto también para Tab y para los lectores de pantalla, no solo fuera
   de la vista. `visibility` cambia al final del deslizamiento, para que la
   transición se siga viendo al ocultarlo. */
body.menu-oculto .menu {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s 0.2s;
}

.menu-lista {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 0 12px;
  overflow-y: auto;
}

.menu-seccion {
  display: flex;
  flex-direction: column;
}

/* Los títulos de sección no deben parecer opciones: mayúsculas pequeñas y
   grises, más claras que las opciones. No son enlaces ni reaccionan al
   cursor. Empiezan a 12 px; el texto de las opciones, a 24. */
.menu-encabezado,
.rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menu-titulo);
}

.menu-encabezado {
  padding: 0 12px 6px;
}

/* Cada opción va sangrada respecto a su título: 12 de margen, 3 de borde y
   9 de relleno dejan el texto a 24 px, tenga barra o no. El margen derecho
   deja ver el redondeo de la activa. 44 px de alto como mínimo táctil: con
   el relleno del diseño quedarían en unos 41. */
.menu-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-inline: 12px;
  padding: 9px 12px 9px 9px;
  border: 0;
  border-inline-start: 3px solid transparent;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

/* Con el cursor encima, el fondo de la activa sin su barra. Solo el fondo:
   la activa con el cursor encima conserva su barra y su color. */
.menu-item:hover {
  background: var(--menu-activo);
}

/* La opción activa: fondo, texto berenjena en negrita y la barra dorada
   como un borde recto de 3 px, pegado a su propio fondo. Es un borde y no
   un `box-shadow` porque, con las esquinas redondeadas, la sombra se curva;
   por eso también el redondeo va solo del otro lado. */
.menu-item[aria-current="true"] {
  border-inline-start-color: var(--dorado);
  border-radius: 0 8px 8px 0;
  background: var(--menu-activo);
  color: var(--berenjena);
  font-weight: 700;
}

/* aria-current marca dónde estás; el foco de teclado se ve aparte, con un
   anillo berenjena en lugar del recuadro del navegador. */
.menu-item:focus-visible,
.escotilla:focus-visible {
  outline: 2px solid var(--berenjena);
  outline-offset: 2px;
}

/* «Salir» toca el borde izquierdo y el inferior de la ventana: su anillo
   va por dentro, o se recortaría en esos dos lados. */
.menu-salir:focus-visible {
  outline: 2px solid var(--berenjena);
  outline-offset: -4px;
}

/* Los iconos son de trazo, no de relleno: sin esto los caminos se pintan
   con el relleno negro por omisión y salen manchas. */
.menu svg,
.escotilla svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Oculto a la vista pero no a los lectores de pantalla. El selector del
   campo de archivo va aparte: `input[type="file"]` le pone `width: 100%` y
   es más específico que la clase sola. */
.solo-lectores,
input[type="file"].solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.menu-salir {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-top: 1px solid var(--linea);
  background: none;
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.menu-salir:hover {
  background: var(--fondo);
  color: var(--texto);
}

.menu-salir svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* El velo oscuro detrás del cajón. Solo existe en el teléfono: en pantalla
   ancha app.js nunca lo muestra. */
.velo {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(36, 19, 42, 0.45);
}

/* --------------------------- el botón del menú

   Va en la cabecera y está siempre a la vista: es lo único que abre y
   cierra el menú. Antes había dos —este y otro al pie del propio menú— y
   el de aquí solo aparecía cuando el menú estaba escondido. */

.escotilla {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
}

.escotilla svg {
  width: 24px;
  height: 24px;
}

/* ---------------------------------- el contenido */

.contenido {
  margin-inline-start: var(--ancho-menu);
  padding-inline: 16px;
  padding-block: 0 40px;
  transition: margin-inline-start 0.2s ease;
}

body.menu-oculto .contenido {
  margin-inline-start: 0;
}

/* ------------------------------- sin sesión

   La pantalla de inicio va sola: sin menú, sin el botón que lo abre y sin
   avatar. La barra superior se queda, vacía. Es un estado aparte de
   `menu-oculto` para no pisar la preferencia guardada del menú. */

body.sin-sesion .menu,
body.sin-sesion .escotilla,
body.sin-sesion .cabecera-marca,
body.sin-sesion .cabecera-separador,
body.sin-sesion .cabecera-sesion,
body.sin-sesion .avatar {
  display: none;
}

body.sin-sesion .contenido {
  margin-inline-start: 0;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-height: var(--alto-cabecera);
  padding-block: 12px;
  margin-inline: -16px;
  padding-inline: 16px;
  background: var(--superficie);
  /* Sin la franja dorada: la línea de acento vive en el menú, no aquí. */
  border-bottom: 1px solid var(--linea);
}

/* La marca: el escudo dorado sobre un cuadro berenjena y el nombre de la
   app en mayúsculas espaciadas (diseño, §4). */
.cabecera-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.escudo-caja {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--berenjena);
  color: var(--dorado);
}

.escudo-caja .escudo {
  width: 24px;
  height: 24px;
}

.marca-texto {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--berenjena);
  white-space: nowrap;
}

.cabecera-separador {
  width: 1px;
  height: 32px;
  flex: none;
  background: var(--linea);
}

/* La materia toma el espacio libre: es lo que empuja la fecha y el avatar
   a la derecha. Guarda 10rem: con menos, baja a otra fila en lugar de
   quedar en una letra por renglón (entre el teléfono y el monitor, con el
   menú abierto, la cabecera no cabe en una fila). */
.materia {
  flex: 1 1 10rem;
  min-width: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--berenjena);
  overflow-wrap: anywhere;
}

/* Parte en dos renglones cuando no cabe, en lugar de desbordar a lo ancho. */
.cabecera-sesion {
  flex: 0 1 auto;
  min-width: 9rem;
  font-size: 17px;
  line-height: 1.3;
  text-align: end;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

/* El avatar del usuario: la foto de Google si la hay (DC-47), y si no las
   iniciales en dorado sobre berenjena. El hueco es el mismo círculo en los
   dos casos. */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  flex: none;
  /* Con la materia a la vista no hace nada; sin ella (Elegir grupo,
     Importar PDF) es lo que lleva el avatar a la derecha. */
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--berenjena);
  color: var(--dorado);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pantalla {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 24px;
  max-width: 640px;
  margin-inline: auto;
}

.pantalla.centrada {
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}

/* ------------------------- la pantalla de inicio */

#entrar h1 {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

#entrar .nota {
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.0625rem;
}

/* El botón de Google: blanco, en forma de píldora y con la «G» oficial a la
   izquierda. El logotipo es un recorte del paquete de marca de Google
   Sign-In, a 4x, para que se vea nítido en el teléfono. */
.boton-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  margin-inline: auto;
  padding: 10px 24px;
  border: 1px solid #c9c4cc;
  border-radius: 999px;
  background: #ffffff;
  color: var(--texto);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.boton-google:hover {
  border-color: var(--texto);
}

.boton-google:focus-visible {
  outline: 2px solid var(--berenjena);
  outline-offset: 2px;
}

.boton-google img {
  width: 20px;
  height: 20px;
  flex: none;
}

/* El motivo por el que Google no dejó entrar: se queda a la vista, no se
   apaga solo como el aviso emergente. */
.aviso-entrada {
  max-width: 320px;
  margin: 16px auto 0;
  padding: 10px 14px;
  border: 1px solid var(--dorado);
  border-radius: var(--radio);
  background: var(--dorado-tenue);
  color: var(--texto);
  font-size: 0.9375rem;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

h1 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}

h2 {
  font-size: 1.05rem;
  margin: 8px 0 0;
}

.nota {
  font-size: 0.88rem;
  color: var(--texto-2);
  margin: 0;
}

.boton {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}

.boton.principal {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}

.boton:disabled {
  opacity: 0.5;
  cursor: default;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo > span,
.campo > label > span {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-2);
}

input[type="file"],
input[type="date"],
input[type="text"],
select {
  font: inherit;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  width: 100%;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 14px;
  font-size: 0.92rem;
}

.lista,
.grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opcion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.opcion[aria-pressed="true"] {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-tinta);
}

.opcion .detalle {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* ---------- Elegir grupo ----------

   Las medidas son las del diseño del pase en monitor (§11.2): una columna
   de 880 px, el periodo una sola vez y las tarjetas de grupo, que se eligen
   como un grupo de radio. */

#elegir.pantalla {
  max-width: 880px;
}

#periodo {
  font-size: 17px;
}

#elegir h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--berenjena);
}

.grupos {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.grupos legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

#asignaciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tarjeta-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 20px 22px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* La elegida: borde berenjena con un halo y la palomita llena. */
.tarjeta-grupo[aria-checked="true"] {
  border-color: var(--berenjena);
  box-shadow: 0 0 0 4px #EADFEA;
}

.tarjeta-grupo:focus-visible {
  outline: 3px solid var(--dorado);
  outline-offset: 3px;
}

.tarjeta-grupo-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tarjeta-grupo-nombre {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--berenjena);
  overflow-wrap: anywhere;
}

.palomita {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border: 2px solid var(--linea);
  border-radius: 50%;
  background: var(--superficie);
}

.palomita svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}

.tarjeta-grupo[aria-checked="true"] .palomita {
  border-color: var(--berenjena);
  background: var(--berenjena);
}

.tarjeta-grupo[aria-checked="true"] .palomita svg {
  visibility: visible;
}

.tarjeta-grupo-materia {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tarjeta-grupo-detalle,
.tarjeta-grupo-alumnos {
  font-size: 15px;
  color: var(--texto-2);
}

.tarjeta-grupo-alumnos {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--linea);
}

/* La fecha con sus dos atajos al lado: el campo se estira y, si no caben,
   los atajos bajan debajo en lugar de ensanchar la pantalla. */
.fecha-y-atajos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#elegir #fecha {
  flex: 1 1 12rem;
  width: auto;
  min-height: 56px;
  font-size: 18px;
}

.atajo {
  min-width: 88px;
  min-height: 56px;
  padding: 0 18px;
  border: 2px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

.atajo[aria-pressed="true"] {
  border-color: var(--berenjena);
  color: var(--berenjena);
}

#empezar {
  width: 100%;
  min-height: 72px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 800;
}

.otro-pdf {
  margin: 0;
  text-align: center;
  color: var(--texto-2);
}

/* Un botón con aspecto de enlace: cambia de pantalla dentro de la app, no
   va a otra dirección. */
.enlace {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--berenjena);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Importar PDF ----------

   Diseño del pase en monitor, §12: la misma columna de 880 px que Elegir
   grupo, una zona para soltar el archivo en lugar del control nativo, la
   ficha del archivo elegido y la explicación de qué pasa al importar. */

#importar.pantalla {
  max-width: 880px;
}

#importar h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--berenjena);
}

.importar-intro {
  margin: 0;
  font-size: 18px;
  color: var(--texto-2);
}

.importar-preparar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.zona-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  padding: 24px;
  border: 2px dashed #CBBDCB;
  border-radius: 20px;
  background: var(--superficie);
  text-align: center;
  cursor: pointer;
}

/* Al arrastrar un archivo encima. */
.zona-pdf.encima {
  border-color: var(--berenjena);
  background: var(--menu-activo);
}

/* El campo oculto recibe el foco del teclado: se ve en la zona entera. */
.zona-pdf:focus-within {
  outline: 2px solid var(--berenjena);
  outline-offset: 2px;
}

.zona-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #F1EAF1;
  color: var(--berenjena);
}

.zona-icono svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zona-texto {
  font-size: 21px;
  font-weight: 700;
  color: var(--berenjena);
}

.zona-elegir {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.zona-nota {
  font-size: 15px;
  color: var(--texto-2);
}

.ficha-pdf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 2px solid var(--linea);
  border-radius: 16px;
  background: var(--superficie);
}

.ficha-insignia {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
  background: var(--berenjena);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ficha-datos {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.ficha-nombre {
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ficha-tamano {
  font-size: 14px;
  color: var(--texto-2);
}

#cambiar-pdf {
  min-height: 44px;
  flex: none;
}

.aviso-pdf {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--falta);
}

#subir {
  width: 100%;
  min-height: 72px;
  border-radius: 14px;
  font-size: 22px;
  font-weight: 800;
}

/* Deshabilitado sin archivo: gris claro y sin la opacidad genérica, que lo
   dejaría ilegible. */
#subir:disabled {
  border-color: #E4DDE4;
  background: #E4DDE4;
  color: var(--menu-titulo);
  opacity: 1;
}

.que-pasa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

.que-pasa ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.que-pasa li {
  position: relative;
  padding-inline-start: 20px;
}

/* La viñeta dorada. */
.que-pasa li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  inset-inline-start: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dorado);
}

/* ---- las tarjetas de cierre: lista importada y error (§12.5, §12.6) */

.tarjeta-importada,
.tarjeta-error-pdf {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 30px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
}

.importada-cabeza,
.error-pdf-cabeza {
  display: flex;
  align-items: center;
  gap: 16px;
}

.importada-palomita {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--berenjena);
}

.importada-palomita svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--dorado);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.importada-titulo,
.error-pdf-titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}

.importada-titulo {
  color: var(--berenjena);
}

.importada-grupo {
  margin: 2px 0 0;
  font-size: 16px;
  color: var(--texto-2);
  overflow-wrap: anywhere;
}

.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.cifras > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fondo);
}

.cifras dt {
  font-size: 15px;
  color: var(--texto-2);
}

.cifra-numero {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--berenjena);
  font-variant-numeric: tabular-nums;
}

.importada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.importada-acciones .boton {
  flex: 1 1 14rem;
  min-height: 56px;
  font-size: 18px;
}

.tarjeta-error-pdf {
  border: 2px solid var(--falta);
}

.error-pdf-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--falta);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.error-pdf-titulo {
  color: var(--falta);
}

.error-pdf-motivo,
.error-pdf-sin-cambios {
  margin: 0;
  font-size: 17px;
}

.error-pdf-detalles {
  margin: 0;
  padding-inline-start: 22px;
  font-size: 15px;
  color: var(--texto-2);
}

.error-pdf-sin-cambios {
  font-weight: 700;
}

#otro-archivo {
  align-self: flex-start;
  min-height: 52px;
}

/* ---------- El pase de lista ----------

   Se lee en un monitor volteado hacia el grupo: el alumno ve su nombre y
   confirma que es a él a quien llaman. Las medidas son las del diseño del
   pase en monitor (§6); las del teléfono, en la media query de 640 px. */

/* El pase usa todo el ancho, como el reporte: la tarjeta y el panel van en
   dos columnas. */
#pase.pantalla {
  max-width: none;
  padding-block: 36px;
}

.pase-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 24px;
  align-items: start;
}

/* En una pantalla que no es monitor, el panel baja debajo de la tarjeta.
   El diseño dice «en pantallas angostas» sin dar la medida. */
@media (max-width: 960px) {
  .pase-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- el panel de resumen (diseño, §6.4) */

.resumen {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.resumen-bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
}

.resumen-bloque h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-2);
}

.avance-numero {
  margin: 0;
  font-size: 20px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.avance-numero strong {
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
  color: var(--berenjena);
}

.barra {
  height: 12px;
  border-radius: 999px;
  background: var(--hundido);
  overflow: hidden;
}

.barra-relleno {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--berenjena);
  transition: width 0.3s ease;
}

.cuadricula {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}

.cuadricula > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--fondo);
}

.cuadricula dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--texto-2);
}

.cuadricula dd {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.muestra {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 3px;
}

.muestra.presente {
  background: var(--berenjena);
}

.muestra.falta {
  background: var(--superficie);
  border: 3px solid var(--falta);
}

.muestra.retardo {
  background: var(--retardo);
}

.muestra.pendiente {
  background: var(--superficie);
  border: 1px solid var(--texto-2);
}

.siguientes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.siguientes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--linea);
}

.siguientes li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.siguiente-nombre {
  font-size: 18px;
  font-weight: 700;
  color: var(--texto);
  overflow-wrap: anywhere;
}

.siguiente-detalle {
  font-size: 15px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.tarjeta-pase {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 44px 52px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
}

.tarjeta-pase > div {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pase-linea {
  margin: 0;
  font-size: 20px;
  color: var(--texto-2);
}

.pase-titulo {
  display: flex;
  align-items: center;
  gap: 24px;
}

.tarjeta-pase h1 {
  font-size: 68px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--berenjena);
}

/* El botón redondo de la bocina: solo ícono, con la frase en aria-label. */
.voz-redonda {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: none;
  border: 2px solid var(--berenjena);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--berenjena);
  cursor: pointer;
}

.voz-redonda .icono-voz {
  width: 34px;
  height: 34px;
}

.voz-redonda.chica {
  width: 52px;
  height: 52px;
}

.voz-redonda.chica .icono-voz {
  width: 24px;
  height: 24px;
}

.boton-iniciar {
  width: 100%;
  max-width: 560px;
  min-height: 84px;
  border-radius: 14px;
  font-size: 26px;
  font-weight: 800;
}

.boton-iniciar .icono-voz {
  width: 30px;
  height: 30px;
}

.pase-fila-superior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pase-fila-superior .etiqueta {
  font-size: 15px;
  font-weight: 700;
}

.pildora {
  margin-inline-start: auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--fondo);
  color: var(--berenjena);
  font-size: 16px;
  font-weight: 700;
}

.tarjeta-pase .nombre {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--berenjena);
  overflow-wrap: anywhere;
}

.tarjeta-pase .matricula {
  font-size: 21px;
  color: var(--texto-2);
  font-variant-numeric: tabular-nums;
}

.estatus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Los tres se distinguen también por luminosidad: oscuro, blanco y claro. */
.estatus button {
  font: inherit;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0.05em;
  min-height: 92px;
  border-radius: 14px;
  border: 3px solid transparent;
  cursor: pointer;
}

.estatus button[data-s="PRESENTE"] {
  background: var(--berenjena);
  color: #fff;
}

.estatus button[data-s="FALTA"] {
  background: var(--superficie);
  border-color: var(--falta);
  color: var(--falta);
}

.estatus button[data-s="RETARDO"] {
  background: var(--retardo);
  color: var(--retardo-texto);
}

/* La marca que el alumno ya tiene: un contorno grueso hacia afuera, sin
   cambiar los colores, que son los que se reconocen de lejos. */
.estatus button[aria-pressed="true"] {
  outline: 4px solid var(--texto);
  outline-offset: 3px;
}

/* El foco del teclado, punteado: no tapa la marca vigente, que es un
   contorno continuo, y se distingue de ella también en escala de grises.
   Va después para ganar en el botón marcado y con foco. */
.estatus button:focus-visible {
  outline: 4px dashed var(--berenjena);
  outline-offset: 3px;
}

.estatus button:disabled {
  opacity: 0.4;
  cursor: default;
}

.pase-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pase-pie .boton {
  min-height: 52px;
}

.ultima-marca {
  margin-inline-start: auto;
  font-size: 16px;
  color: var(--texto-2);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.acciones .boton {
  flex: 1 1 auto;
}

/* Los botones que hablan llevan una bocina de trazo fino, del mismo estilo
   que los iconos del menú: avisa que tocarlos se va a oír en el salón. */
.con-voz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.icono-voz {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fila {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.fila.actual {
  border-color: var(--acento);
  border-width: 2px;
}

.fila.exento {
  background: var(--hundido);
}

.fila-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.fila-nombre {
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.fila-matricula {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--texto-2);
  white-space: nowrap;
}

.etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--linea);
  color: var(--texto-2);
  white-space: nowrap;
}

.etiqueta.presente {
  border-color: var(--ok);
  color: var(--ok);
}

.etiqueta.falta {
  border-color: var(--falta);
  color: var(--falta);
}

.etiqueta.retardo {
  border-color: var(--retardo);
  background: var(--retardo);
  color: var(--retardo-texto);
}

.etiqueta.exento {
  background: var(--hundido);
  color: var(--texto-2);
}

.exencion {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.exencion input {
  flex: 1 1 160px;
  min-width: 0;
}

.exencion .boton {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.error {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 30;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--falta);
  color: #fff;
  font-size: 0.9rem;
}

.aviso {
  font-size: 0.85rem;
  color: var(--texto-2);
  margin: 0;
}

/* --------------------------------------------- reporte y retardos (DC-52) */

/* El reporte es más ancho que las otras pantallas porque lleva una tabla,
   y todo su contenido, la tabla incluida, respeta ese ancho (diseño, §13). */
#reporte.pantalla {
  max-width: 1180px;
}

#reporte h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--berenjena);
}

.reporte-intro {
  margin: 0;
  font-size: 18px;
  color: var(--texto-2);
}

/* Los filtros en una franja blanca, alineados por la base (§13.1). */
.reporte-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--superficie);
}

.filtro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 11rem;
  min-width: 0;
}

.filtro-grupo {
  flex: 1 1 18rem;
}

.reporte-filtros select,
.reporte-filtros input[type="date"] {
  min-height: 52px;
}

#reporte-consultar {
  min-height: 52px;
  padding-inline: 28px;
  font-weight: 800;
}

.reporte-nota {
  margin: -4px 0 0;
  font-size: 14px;
  color: var(--texto-2);
}

/* ---- el resumen (§13.2) */

.reporte-resumen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
}

.resumen-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reporte-titulo {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--berenjena);
  overflow-wrap: anywhere;
}

.reporte-detalle {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--texto-2);
}

/* La regla de retardos, una etiqueta dorada con su reloj. */
.etiqueta-regla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--visitante-fondo);
  color: var(--visitante-texto);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.etiqueta-regla svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Marcas sin registro: a revisar antes de recapturar. */
.cifra-numero.pendiente {
  color: #8A5A00;
}

.rango {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.aviso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-color: var(--dorado);
  background: var(--dorado-tenue);
}

.aviso p {
  margin: 0;
}

/* En el teléfono la tabla se desplaza a lo ancho dentro de su caja, sin
   ensanchar la pantalla. */
.tabla-caja {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tabla {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}

.tabla th,
.tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  white-space: nowrap;
}

.tabla th {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-2);
}

/* Los números a la derecha y con cifras del mismo ancho (§13.4). */
.tabla th.numero,
.tabla td.numero {
  text-align: right;
}

.tabla td.numero {
  font-variant-numeric: tabular-nums;
}

/* Los ceros en gris claro: resaltan los valores que importan. */
.tabla .cero {
  color: #A99BAC;
}

/* El Total de faltas es la columna principal. */
.tabla th.total {
  background: #F4EEF4;
}

.tabla th.total button {
  color: var(--berenjena);
}

.tabla td.total {
  background: #FAF6FA;
  color: var(--berenjena);
  font-size: 17px;
  font-weight: 800;
}

.tabla td.total.cero {
  color: #A99BAC;
}

/* Sin registro mayor que cero: sesiones sin marca, a revisar antes de
   recapturar. */
.pastilla-sin-registro {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F6EDCF;
  color: #8A5A00;
  font-weight: 800;
  text-align: center;
}

/* Las filas en BAJA, con el texto atenuado. */
.tabla tbody tr.baja td {
  color: var(--texto-2);
}

.tabla tbody tr.baja td.total {
  color: var(--texto-2);
}

/* Junto al nombre, solo cuando aplica: BAJA en gris, EXENTO en dorado y el
   cambio de grupo en los colores de visitante. */
.etiqueta-estado {
  margin-inline-start: 6px;
  font-size: 11px;
  font-weight: 700;
}

.etiqueta-estado.baja {
  border-color: var(--linea);
  background: var(--hundido);
  color: var(--texto-2);
}

.etiqueta-estado.exento {
  border-color: var(--dorado);
  background: var(--dorado-tenue);
  color: var(--visitante-texto);
}

.etiqueta-estado.cambio {
  border-color: var(--visitante-fondo);
  background: var(--visitante-fondo);
  color: var(--visitante-texto);
}

/* ---- la barra de la tabla (§13.3) */

.reporte-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.chip {
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--linea);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  border-color: var(--berenjena);
  background: var(--menu-activo);
  color: var(--berenjena);
}

.reporte-mostrando {
  font-size: 15px;
  color: var(--texto-2);
}

/* Las acciones, a la derecha de la barra: copiar y CSV primero; Excel y
   PDF, que arma el servidor, después y más discretas. */
.reporte-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

.reporte-acciones .boton {
  min-height: 44px;
  font-size: 15px;
}

.reporte-acciones .boton.secundario {
  border-color: transparent;
  background: none;
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tabla th button {
  font: inherit;
  font-weight: 600;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
}

.tabla th[aria-sort="ascending"] button::after {
  content: " ▲";
}

.tabla th[aria-sort="descending"] button::after {
  content: " ▼";
}

.tabla tbody tr {
  cursor: pointer;
}

/* Matrícula y Nombre fijas a la izquierda al recorrer la tabla de lado. La
   matrícula tiene ancho fijo para que el nombre sepa dónde empezar, y el
   nombre parte en renglones para no comerse la pantalla del teléfono. */
.tabla .fija-1,
.tabla .fija-2 {
  position: sticky;
  z-index: 1;
  background: var(--superficie);
}

.tabla .fija-1 {
  left: 0;
  width: 6.5rem;
  min-width: 6.5rem;
  max-width: 6.5rem;
}

.tabla .fija-2 {
  left: 6.5rem;
  box-shadow: inset -1px 0 0 var(--linea);
}

/* Solo en pantallas angostas el nombre parte en renglones; en una ancha
   cabe completo. */
@media (max-width: 820px) {
  .tabla .fija-2 {
    min-width: 9rem;
    max-width: 14rem;
    white-space: normal;
  }
}

/* El renglón seleccionado, la guía para recapturar (diseño, §13.5): toda
   la fila con fondo, el total más oscuro y una barra dorada a la izquierda.
   La barra es una sombra interior de la primera celda: la fila no tiene
   esquinas redondeadas que la curven. */
.tabla tbody tr[aria-selected="true"] td {
  background: #EFE5EF;
}

.tabla tbody tr[aria-selected="true"] td.total {
  background: #E3D3E3;
}

.tabla tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 4px 0 0 var(--dorado);
}

/* ---- la lista del teléfono (§13.6): oculta en pantalla ancha */

#reporte-lista {
  display: none;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

#reporte-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linea);
  cursor: pointer;
}

#reporte-lista li:last-child {
  border-bottom: 0;
}

/* La misma selección que en la tabla: fondo y barra dorada. */
#reporte-lista li[aria-selected="true"] {
  background: #EFE5EF;
  box-shadow: inset 4px 0 0 var(--dorado);
}

#reporte-lista li.baja {
  color: var(--texto-2);
}

.lista-datos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.lista-nombre {
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.lista-detalle,
.lista-desglose {
  font-size: 13px;
  color: var(--texto-2);
}

.total-movil {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  min-width: 64px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #F4EEF4;
}

.total-movil span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--texto-2);
}

.total-movil strong {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--berenjena);
  font-variant-numeric: tabular-nums;
}

/* Con el foco en la tabla, el contenedor lo dice: las flechas mueven la
   selección. */
#reporte-caja:focus-visible {
  outline: 2px solid var(--berenjena);
  outline-offset: 2px;
}

.retardo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ------------------------------------- cambio temporal de grupo (DC-54) */

.etiqueta.visitante {
  border-color: var(--visitante-fondo);
  background: var(--visitante-fondo);
  color: var(--visitante-texto);
}

/* ------------------------------------ justificación de faltas (DC-55) */

.marca-justificable {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
}

.marca-justificable input {
  width: 20px;
  height: 20px;
}

.marca-justificable .detalle {
  font-size: 0.85rem;
  color: var(--texto-2);
}

.etiqueta.falta_justificada {
  background: var(--hundido);
  color: var(--texto);
}

/* ------------------------------------- el teléfono (diseño, §8)

   Un solo punto de corte para el monitor y el teléfono: el mismo HTML, con
   esta media query. */

@media (max-width: 640px) {

  /* El menú es un cajón superpuesto: el contenido no lleva margen. Arranca
     cerrado (lo decide app.js al cargar). */
  .contenido {
    margin-inline-start: 0;
  }

  .menu {
    width: min(280px, 85vw);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
  }

  /* La cabecera en una fila; la fecha y la sesión bajan a una franja
     debajo, a todo el ancho. */
  .cabecera {
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 8px;
  }

  .escotilla {
    width: 44px;
    height: 44px;
  }

  .marca-texto,
  .cabecera-separador {
    display: none;
  }

  /* Base 0 y no `auto`: con la cabecera en `flex-wrap`, `auto` es el ancho
     del texto en un renglón y la materia bajaba a otra fila. Sin recorte a
     dos renglones: el grupo va al final y es lo que distingue la asignatura,
     así que un tercer renglón es mejor que perderlo. */
  .materia {
    flex: 1 1 0;
    font-size: 16px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    font-size: 0.85rem;
  }

  .cabecera-sesion {
    order: 10;
    flex-basis: 100%;
    font-size: 14px;
    text-align: start;
  }

  /* Elegir grupo en el teléfono: una sola columna de tarjetas. */
  #elegir h1 {
    font-size: 32px;
  }

  #asignaciones {
    grid-template-columns: 1fr;
  }

  #empezar {
    min-height: 64px;
    font-size: 19px;
  }

  /* Importar PDF en el teléfono. */
  #importar h1 {
    font-size: 32px;
  }

  .importar-intro {
    font-size: 16px;
  }

  .zona-pdf {
    min-height: 220px;
  }

  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* El reporte en el teléfono: el grupo y Consultar a todo el ancho, y las
     dos fechas en una fila. */
  #reporte h1 {
    font-size: 30px;
  }

  .filtro {
    flex: 1 1 8rem;
  }

  .filtro-grupo,
  #reporte-consultar {
    flex-basis: 100%;
  }

  /* La tabla se convierte en una lista. */
  #reporte-tabla {
    display: none;
  }

  #reporte-lista {
    display: flex;
  }

  .tarjeta-importada,
  .tarjeta-error-pdf {
    padding: 22px 20px;
  }

  #subir {
    min-height: 64px;
    font-size: 19px;
  }

  /* La fecha y sus dos atajos en una sola fila hasta 360 px. */
  #elegir #fecha {
    flex-basis: 8rem;
    min-width: 0;
  }

  .atajo {
    min-width: 0;
    padding: 0 14px;
  }

  .tarjeta-grupo-nombre {
    font-size: 30px;
  }

  /* El pase en el teléfono: la misma tarjeta, más chica, con los botones
     apilados y a la vista sin desplazar. */
  #pase.pantalla {
    padding-block: 16px;
  }

  .tarjeta-pase {
    padding: 22px 20px;
    gap: 14px;
  }

  .tarjeta-pase > div {
    gap: 14px;
  }

  .tarjeta-pase h1 {
    font-size: 34px;
  }

  .voz-redonda {
    width: 56px;
    height: 56px;
  }

  .pase-linea {
    font-size: 16px;
  }

  .boton-iniciar {
    max-width: none;
    min-height: 64px;
    font-size: 20px;
  }

  .pildora {
    margin-inline-start: 0;
    flex-basis: 100%;
    width: fit-content;
    font-size: 14px;
  }

  .tarjeta-pase .nombre {
    font-size: 32px;
  }

  .tarjeta-pase .matricula {
    font-size: 16px;
  }

  .estatus {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .estatus button {
    min-height: 64px;
    font-size: 20px;
  }

  .ultima-marca {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}