/*
  Identidad de Preguntero.

  Todo lo visual vive acá, separado del Python: para cambiar un color,
  una tipografía o un espaciado, se edita este archivo — nunca hace falta
  tocar backend/ para eso. Es un primer sistema de diseño (paleta +
  tipografía + componentes básicos), pensado para poder afinarlo después
  pantalla por pantalla sin rehacer nada.

  Paleta: inspirada en el tero (el ave) — cuerpo oscuro, patas y detalle
  de ala en un terracota cálido — sobre un fondo tipo papel, para que se
  sienta académico y no una app "de colores".
*/

:root {
  --paper: #f6f1e6;
  --paper-card: #fffdf8;
  --ink: #23201b;
  --muted: #776d5c;  /* 4.5:1 sobre el fondo y las tarjetas (antes #8a7f6c y #7e7462 no llegaban) */
  --line: #e2d8c3;

  --brand: #2f6f4f;       /* verde: acciones principales, links, "gratis" */
  --brand-soft: #e5efe6;
  --brand-hover: #275c41; /* principal al pasar el mouse (las paletas lo redefinen) */
  --on-brand: #ffffff;    /* texto sobre el principal (botones); de noche va oscuro */
  --rust: #b2522d;        /* acento: detalles, "pago" (con paleta elegida, sale del énfasis) */
  --marca: #b2522d;       /* el "tero" del logo: SIEMPRE terracota (11 oct 2026, decisión del usuario) */
  --rust-soft: #f3e1d3;
  --error: #a3352f;       /* rojo ladrillo: solo para avisos de error real -- distinto del terracota decorativo */
  --error-soft: #f5e2df;
  /* Correcta e incorrecta en la corrección de Arcade (11 oct 2026, pedido
     del usuario: "el verde clásico de correcta y el rojo clásico de
     incorrecta"). Fijos, no dependen de la paleta: antes eran el énfasis y
     el acento, y como el acento sale del énfasis quedaban del mismo tono.
     4.5:1 sobre las tarjetas y sobre su fondo suave, con todos los fondos. */
  --correcta: #2a7530;
  --correcta-soft: #e2f1e3;
  --incorrecta: #c62828;
  --incorrecta-soft: #fbe3e3;

  /* Fuentes: la opción 9 de docs/bocetos/fuentes.html (29 sept 2026,
     elegida por el usuario; antes Fraunces + Source Sans 3 — Fraunces se
     parecía demasiado a la de Claude). Young Serif tiene un solo peso:
     ver font-synthesis en body. */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(35, 32, 27, 0.04), 0 8px 24px rgba(35, 32, 27, 0.05);

  /* Panel lateral: cielo (degradé) y tierra del pie. */
  --cielo: linear-gradient(#f5f1e7, #efe9da 70%, #ebe3cf);
  --tierra: #5e431f;
  --tierra-motas: #805622, #403125, #4a3a2a;
  --tierra-texto: #e9dcc4;
  --tierra-link: #ccab78;
}

/* Modo oscuro (el sol/luna del panel lateral, ver static/js/tero.js): se
   redefinen los mismos tokens, así casi toda la hoja sirve sin tocarla.
   Los pocos colores sueltos que quedan tienen su ajuste abajo de todo
   ("Modo oscuro: ajustes sueltos"). Paleta nocturna sacada de Sunset. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --paper: #1f2731;
  --paper-card: #28313c;
  --ink: #e4e0d4;
  --muted: #9aa3a6;
  --line: #37454f;

  /* 29 sept 2026: principal más claro y texto de botones oscuro. Antes, el
     blanco sobre #4f9a72 quedaba en 3.4:1 y lo elegido (principal sobre
     --brand-soft) en 3.6:1: se leía peor que lo no elegido. */
  --brand: #6fac8b;
  --brand-soft: #243a30;
  --brand-hover: #85b89c;  /* de noche, el hover aclara (oscurecer se perdía contra el fondo) */
  --on-brand: #1f2731;
  --rust: #d98b6a;
  --marca: #d98b6a;
  --rust-soft: #3d2a24;
  --error: #e27b74;  /* 30 sept 2026: 4.5:1 sobre las tarjetas (antes #e0736b, 4.3) */
  --error-soft: #3d2426;
  --correcta: #6cc070;
  --correcta-soft: #1e3321;
  --incorrecta: #f07373;
  --incorrecta-soft: #3b2121;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.22);

  --cielo: linear-gradient(#1c2330, #243040 70%, #28364a);
  --tierra: #33242b;  /* ciruela (elegida por el usuario) */
  --tierra-texto: #e4d8cf;
  --tierra-link: #d9a98c;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

/* Links sueltos en texto: el color principal de la paleta, no el azul del
   navegador (los links con su propia clase ya definen el suyo). */
a {
  color: var(--brand);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--brand-hover);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  /* Young Serif viene en un solo peso (normal): sin esto, los títulos
     con font-weight 600 salían con una negrita "falsa" que el navegador
     inventa engrosando la letra, y se ve borrosa. */
  font-synthesis-weight: none;
  font-size: 16px;
  line-height: 1.5;
}

/* --- Armazón: panel lateral + contenido --- */

.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* Fijo a la altura de la ventana (sticky): el paisaje del pie queda
   siempre a la vista, aunque la página sea larga. */
.sidebar {
  flex: none;
  width: 280px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-x: hidden;  /* el pastizal se dibuja hasta el borde y se recorta */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--cielo);
  border-right: 1px solid var(--line);
}

.sidebar-arriba {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px 16px 12px;
}

/* --- Paisaje del panel lateral (lo dibuja static/js/tero.js) ---
   Capas, de atrás hacia adelante: pastizal, tero, matas bajitas, globo.
   Todo en píxeles de 3 px; el tero pisa la última fila de pasto. */
.sidebar-escena {
  position: relative;
  flex: none;
  margin-top: auto;
  height: 138px;  /* 46 filas × 3 px */
}

.sidebar-escena svg {
  display: block;
}

.escena-atras,
.escena-adelante {
  position: absolute;
  left: 0;
  bottom: 0;
  pointer-events: none;
}

.escena-adelante {
  z-index: 2;
}

.astro {
  position: absolute;
  top: -30px;
  right: 54px;
  z-index: 3;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.astro:hover {
  background: none;
}

.astro svg {
  filter: drop-shadow(0 0 5px rgba(230, 180, 90, 0.75)) drop-shadow(0 0 12px rgba(230, 170, 80, 0.35));
}

:root[data-tema="oscuro"] .astro svg {
  filter: drop-shadow(0 0 5px rgba(219, 219, 208, 0.55)) drop-shadow(0 0 12px rgba(180, 200, 220, 0.25));
}

.tero-btn {
  position: absolute;
  left: 21px;   /* columna 7 del pastizal (TERO_X en tero.js) */
  bottom: 3px;  /* parado sobre la fila del suelo */
  z-index: 1;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.tero-btn:hover {
  background: none;
}

/* El dibujo se rehace a cada rato (respira, parpadea, aletea): si recibiera
   el puntero, un clic que empieza en un cuadro y termina en otro se
   perdería. Así el clic cae siempre en el botón (ver tero.js). */
.tero-sprite {
  pointer-events: none;
}

.astro:focus-visible,
.tero-btn:focus-visible {
  outline: 2px dashed var(--rust);
  outline-offset: 2px;
}

/* Globo de diálogo en pixel art: esquinas redondeadas "en escalón"
   (clip-path, no border-radius). Borde de 3 px: el oscuro tiene esquinas
   de dos escalones y el relleno, de uno. La colita va en el contenedor,
   que no se recorta. */
/* Movimiento del globo (30 sept 2026, pedido del usuario: "que se mueva
   más"). Todo en saltos de 1 a 3 px (steps), como el dibujo, no deslizado:
   - aparece desde la cabeza del tero con un rebote (globo-aparece);
   - cada toque con el globo ya a la vista, un respingo (globo-toque);
   - el "?" nuevo entra con un salto (tero-q-nuevo); después se quedan quietos;
   - al irse sube un poco mientras se desvanece. */
.tero-globo {
  position: absolute;
  left: 81px;
  bottom: 89px;  /* justo arriba de la cabeza del tero (28 filas × 3 px) */
  z-index: 4;
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: 6px 100%;  /* la colita, sobre la cabeza del tero */
  transition: opacity 0.3s, transform 0.3s steps(2, end);
  pointer-events: none;
}

.tero-globo.visible {
  opacity: 1;
  transform: none;
  transition: none;
  animation: globo-aparece 0.3s steps(1, end);
}

@keyframes globo-aparece {
  0% { transform: translateY(9px) scale(0.4); }
  20% { transform: translateY(3px) scale(0.8); }
  40% { transform: translateY(-3px) scale(1.1); }
  60% { transform: translateY(-1px); }
  80% { transform: translateY(1px); }
  100% { transform: none; }
}

/* Globo que viene de la página anterior: ya estaba abierto, sin rebote. */
.tero-globo.visible.tero-globo-quieto {
  animation: none;
}

.tero-globo.visible.tero-globo-toque {
  animation: globo-toque 0.2s steps(1, end);
}

@keyframes globo-toque {
  0% { transform: translateY(-3px); }
  50% { transform: translateY(-1px); }
  100% { transform: none; }
}

/* Cada "?" salta solo cuando entra (1 oct 2026, pedido del usuario: antes
   seguían saltando en ola mientras el globo estaba a la vista). */
.tero-q {
  display: inline-block;
}

.tero-q-nuevo {
  animation: tero-q-salta 0.3s steps(1, end);
}

@keyframes tero-q-salta {
  0% { transform: translateY(4px) scale(0.5); }
  25% { transform: translateY(-4px) scale(1.2); }
  50% { transform: translateY(-2px); }
  75% { transform: translateY(1px); }
  100% { transform: none; }
}


@media (prefers-reduced-motion: reduce) {
  .tero-globo,
  .tero-globo.visible,
  .tero-globo.visible.tero-globo-toque,
  .tero-q,
  .tero-q-nuevo {
    animation: none;
    transition: opacity 0.2s;
    transform: none;
  }
}

/* Cuando el globo ya llegó al borde del panel y se lo sigue tocando: un
   empujón corto contra el borde y vuelta, como si quisiera seguir
   creciendo y no pudiera (ver tero.js). De a 1 px, como el dibujo. */
.tero-globo.tero-globo-choca {
  animation: globo-choca 0.24s steps(1, end);
}

@keyframes globo-choca {
  0% { transform: translateX(1px); }
  25% { transform: translateX(3px); }
  50% { transform: translateX(2px); }
  75% { transform: translateX(-1px); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tero-globo.tero-globo-choca {
    animation: none;
  }
}

.tero-globo-borde {
  display: block;
  padding: 3px;
  background: #3e3c42;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px),
    0 6px, 3px 6px, 3px 3px, 6px 3px);
}

.tero-globo-texto {
  display: block;
  min-width: 18px;
  padding: 3px 7px 1px;
  background: #fffdf8;
  color: #3e3c42;
  font-family: "Pixelify Sans", monospace;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px);
}

.tero-globo::before,
.tero-globo::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: #3e3c42;
}

.tero-globo::before {
  left: 6px;
  bottom: -3px;
  width: 6px;
}

.tero-globo::after {
  left: 3px;
  bottom: -6px;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
}

.sidebar-nav a:hover {
  background: var(--brand-soft);
}

.sidebar-nav a.active {
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.sidebar-nav-disabled {
  display: block;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: var(--muted);
  opacity: 0.6;
}

/* La cuenta, abajo de todo, es la tierra del paisaje: cara de pasto de
   unos píxeles arriba (con gotas verdes) y terrones pixelados. */
.sidebar-footer {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 18px 16px;
  font-size: 0.82rem;
  color: var(--tierra-texto);
  overflow-wrap: anywhere;
  background-color: var(--tierra);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='3' y='0' width='3' height='3' fill='%2345480c'/%3E%3Crect x='6' y='0' width='3' height='3' fill='%2345480c'/%3E%3Crect x='9' y='0' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='12' y='0' width='3' height='3' fill='%2345480c'/%3E%3Crect x='15' y='0' width='3' height='3' fill='%2345480c'/%3E%3Crect x='18' y='0' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='21' y='0' width='3' height='3' fill='%2345480c'/%3E%3Crect x='0' y='3' width='3' height='3' fill='%2345480c'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='6' y='3' width='3' height='3' fill='%2345480c'/%3E%3Crect x='12' y='3' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='15' y='3' width='3' height='3' fill='%2345480c'/%3E%3Crect x='18' y='3' width='3' height='3' fill='%234f4a14'/%3E%3Crect x='21' y='3' width='3' height='3' fill='%2345480c'/%3E%3Crect x='3' y='6' width='3' height='3' fill='%233a3c0c'/%3E%3Crect x='15' y='6' width='3' height='3' fill='%233a3c0c'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='2' y='3' width='3' height='3' fill='%23805622'/%3E%3Crect x='14' y='6' width='3' height='3' fill='%23403125'/%3E%3Crect x='8' y='14' width='3' height='3' fill='%23805622'/%3E%3Crect x='19' y='17' width='3' height='3' fill='%23403125'/%3E%3Crect x='4' y='20' width='3' height='3' fill='%234a3a2a'/%3E%3Crect x='17' y='0' width='3' height='3' fill='%234a3a2a'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat;
  background-size: 24px 9px, 24px 24px;
}

:root[data-tema="oscuro"] .sidebar-footer {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='9' shape-rendering='crispEdges'%3E%3Crect x='0' y='0' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='3' y='0' width='3' height='3' fill='%2329323b'/%3E%3Crect x='6' y='0' width='3' height='3' fill='%2329323b'/%3E%3Crect x='9' y='0' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='12' y='0' width='3' height='3' fill='%2329323b'/%3E%3Crect x='15' y='0' width='3' height='3' fill='%2329323b'/%3E%3Crect x='18' y='0' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='21' y='0' width='3' height='3' fill='%2329323b'/%3E%3Crect x='0' y='3' width='3' height='3' fill='%2329323b'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='6' y='3' width='3' height='3' fill='%2329323b'/%3E%3Crect x='12' y='3' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='15' y='3' width='3' height='3' fill='%2329323b'/%3E%3Crect x='18' y='3' width='3' height='3' fill='%23344a4d'/%3E%3Crect x='21' y='3' width='3' height='3' fill='%2329323b'/%3E%3Crect x='3' y='6' width='3' height='3' fill='%231c2330'/%3E%3Crect x='15' y='6' width='3' height='3' fill='%231c2330'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Crect x='2' y='3' width='3' height='3' fill='%2345303a'/%3E%3Crect x='14' y='6' width='3' height='3' fill='%23261a20'/%3E%3Crect x='8' y='14' width='3' height='3' fill='%2345303a'/%3E%3Crect x='19' y='17' width='3' height='3' fill='%23261a20'/%3E%3Crect x='4' y='20' width='3' height='3' fill='%233c2a33'/%3E%3Crect x='17' y='0' width='3' height='3' fill='%233c2a33'/%3E%3C/svg%3E");
}

.sidebar-footer a {
  color: var(--tierra-link);
  font-weight: 600;
  text-decoration: none;
}

.sidebar-footer .boton-link {
  color: var(--tierra-link);
}

.sidebar-footer a:hover {
  text-decoration: underline;
}

/* "cerrar sesión" es un formulario (POST, ver auth.logout) con un botón
   que se ve igual que los links del pie del panel lateral. */
.form-cerrar-sesion {
  margin: 0;
}

.boton-link {
  margin: 0;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.boton-link:hover {
  background: none;
  text-decoration: underline;
}

.boton-link-discreto {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.boton-link-discreto:hover {
  color: var(--rust);
}

.materia-quitar {
  margin: 24px 0 8px;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 32px 28px 56px;
}

main {
  max-width: 640px;
  margin: 0 auto;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 4px;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.3rem; }

.sub {
  color: var(--muted);
  margin: 0 0 28px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px;
  background: var(--paper-card);
  box-shadow: var(--shadow);
}

.card + .card {
  margin-top: 16px;
}

/* --- Marca (panel lateral) --- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;  /* aprovecha el ancho del panel (pedido del usuario, 1 oct 2026) */
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* "Pregun*tero*": el tero, siempre terracota (--marca; antes el acento de
   cada paleta). */
.brand-name .enfasis {
  font-style: normal;
  color: var(--marca);
}

/* --- Mensajes --- */

/* Avisos flotantes (29 sept 2026): arriba a la derecha, encima de la
   página (no la empujan); se van solos a los 5 s o con la cruz (ver
   static/js/avisos.js). */
.avisos {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--brand-soft);
  color: var(--brand);
  padding: 11px 10px 11px 16px;
  border-radius: 10px;
  font-size: 0.92rem;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  pointer-events: auto;
  animation: flash-entra 0.25s ease-out;
}

.flash-texto {
  flex: 1;
  padding-top: 1px;
}

.flash-cerrar {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.flash-cerrar:hover,
.flash-cerrar:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}

.flash-saliendo {
  animation: flash-sale 0.25s ease-in forwards;
}

@keyframes flash-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes flash-sale {
  to { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .flash,
  .flash-saliendo {
    animation-duration: 0.01s;
  }
}

/* Séptima ronda: antes todo aviso (error real o simple confirmación) se
   veía igual -- un error de verdad podía pasar desapercibido. Este es el
   único estilo de error del sitio: fondo/texto en --error (rojo ladrillo,
   distinto del terracota decorativo) más un borde grueso a la izquierda,
   para que se note incluso sin distinguir el color. */
.flash-error {
  background: var(--error-soft);
  color: var(--error);
  font-weight: 600;
  border-left: 4px solid var(--error);
}

/* --- Formularios --- */

label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 16px 0 6px;
}

input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.97rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
}

input:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* Círculos y casillas sin ese contorno (7 oct 2026, pedido del usuario: al
   elegir una opción de opción múltiple aparecía un cuadrado grande encima
   del círculo). Quien usa teclado igual ve dónde está: el marco va en toda
   la opción (.opcion-elegible) o en el chip que la envuelve. */
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.opcion-elegible input:focus-visible {
  outline: none;
}

button {
  margin-top: 22px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.97rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

button:hover {
  background: var(--brand-hover);
}

/* Login con Google (27 sept 2026): botón blanco con el logo, como lo
   pide la guía de marca de Google, arriba del formulario de email. */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: white;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.btn-google:hover {
  border-color: var(--brand);
}

.separador-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.separador-o::before,
.separador-o::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

.foot-link {
  text-align: center;
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--muted);
}

.foot-link a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.foot-link a:hover {
  text-decoration: underline;
}

footer {
  max-width: 640px;
  margin: 32px auto 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Listado de materias/unidades --- */

.unidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.unidad:first-of-type {
  border-top: none;
}

.unidad-nombre {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.unidad-count {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.badge.free {
  background: var(--brand-soft);
  color: var(--brand);
}

.badge.paid {
  background: var(--rust-soft);
  color: var(--rust);
}

/* --- La zona: tarjetas de materia --- */

.materia-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.materia-card:hover {
  border-color: var(--brand);
}

.materia-facultad {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.materia-card h2,
.materia-result h2 {
  margin: 0;
}

.materia-arrow {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.empty-state {
  text-align: center;
}

/* --- Panel de "tus materias" (sexta ronda) --- */

.panel-stats {
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-tile {
  flex: 1 1 140px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-numero {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stat-etiqueta {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.panel-materia-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.panel-materia-card:hover {
  border-color: var(--brand);
}

.panel-materia-card h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* El pie de la tarjeta (cuántas preguntas, flecha) va siempre abajo:
   tarjetas de la misma fila, con nombres de largo distinto, quedan parejas. */
.panel-materia-pie {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.panel-materia-ir {
  margin-left: auto;
  color: var(--brand);
  font-weight: 600;
  transition: transform 0.15s ease;
}

.panel-materia-card:hover .panel-materia-ir {
  transform: translateX(3px);
}

.panel-materia-card {
  min-height: 140px;
}

/* Sesión bloqueada (SESION_ACTIVA en zona.py): un aviso discreto abajo. */
.panel-proximamente {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-proximamente strong {
  color: var(--ink);
}

.panel-nueva-materia {
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border-style: dashed;
  color: var(--muted);
  font-weight: 600;
  box-shadow: none;
}

.panel-nueva-materia:hover {
  color: var(--brand);
}

.badge-para-hoy {
  background: var(--rust-soft);
  color: var(--rust);
}

/* Tarjeta "Para hoy" del Panel: pseudo-materia, primera de la grilla —
   distinta de una tarjeta de materia normal (borde y fondo con el color
   de "para hoy", en vez de esperar a que se note por el badge nomás). */
.panel-para-hoy-card {
  border-color: var(--rust);
  background: var(--rust-soft);
}

.panel-para-hoy-card:hover {
  border-color: var(--rust);
}

.panel-para-hoy-card .badge-para-hoy {
  background: var(--paper-card);
}

.button-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.button-link:hover {
  background: var(--brand-hover);
  color: var(--on-brand);  /* si no, a:hover le pone el color del fondo (1 oct 2026) */
}

/* --- La lupa --- */

.search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.search-form input {
  flex: 1;
}

.search-form button {
  margin-top: 0;
  width: auto;
  padding: 0 20px;
}

/* Resultado de búsqueda (27 sept 2026): la tarjeta entera es el link a
   la materia, con "Entrar →" visible y un hover claro; "+ Guardar" flota
   arriba a la derecha, por fuera del link (ver lupa.html). */
.lupa-resultado {
  position: relative;
  margin-bottom: 14px;
}

.lupa-resultado-link {
  display: block;
  padding-right: 140px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.lupa-resultado-link:hover {
  border-color: var(--brand);
}

.lupa-resultado-link h2 {
  margin: 0 0 10px;
}

.lupa-entrar {
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
}

.lupa-resultado-link:hover .lupa-entrar {
  text-decoration: underline;
}

.lupa-resultado-accion {
  position: absolute;
  top: 20px;
  right: 22px;
}

.lupa-resultado-accion form {
  margin: 0;
}

.materia-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.materia-result form {
  margin: 0;
}

.materia-result button {
  margin-top: 0;
  width: auto;
  padding: 8px 18px;
}

.articulo-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.articulo-card h2 {
  margin-bottom: 4px;
}

.articulo-card:hover {
  border-color: var(--brand);
}

.volver-link {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.volver-link:hover {
  color: var(--brand);
  text-decoration: underline;
}

.articulo-cuerpo h2 {
  margin-top: 28px;
}

.articulo-cuerpo p {
  margin: 0 0 14px;
  max-width: 68ch;
}

.ghost-btn {
  display: inline-block;
  text-decoration: none;
  margin-top: 0;
  width: auto;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.ghost-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand);
}

.ghost-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.ghost-btn-danger:hover:not(:disabled) {
  border-color: var(--rust);
  color: var(--rust);
}

/* --- Cabecera de la pantalla de materia (título + banco de preguntas) --- */

.materia-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Encabezado de la pantalla de materia (29 sept 2026): nombre, y en una
   línea la facultad con "En tus materias" / "+ Guardar" al lado; una
   línea abajo lo separa de los modos. */
.materia-encabezado {
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.materia-encabezado h1 {
  line-height: 1.15;
  margin-bottom: 10px;
}

.materia-encabezado-linea {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}

.materia-encabezado-facultad {
  color: var(--muted);
}

.materia-resumen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  margin: 12px 0 26px;
}

.materia-resumen .punto {
  color: var(--line);
}

/* --- Configuración de sesión: fecha de examen, minutos, unidades --- */

.config-fields {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.config-fields .field,
.sesion-form-row .field {
  flex: 1 1 200px;
  margin: 0;
}

.field label {
  margin: 0 0 6px;
}

.btn-compact {
  margin-top: 0;
  width: auto;
  padding: 10px 20px;
  border: none;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.btn-compact:hover {
  background: var(--brand-hover);
}

.seccion-titulo {
  margin: 30px 0 12px;
  font-size: 1.05rem;
}

/* --- Configuración de sesión: preguntas, tiempo, formato, unidades --- */

.sesion-config {
  margin-bottom: 30px;
}

.sesion-config-grid {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.sesion-config-grid .field {
  flex: 1 1 180px;
  margin: 0;
}

.field-unidades {
  margin: 20px 0 0;
}

.field-modo {
  margin: 0 0 20px;
}

.campo-ayuda {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 8px 0 0;
}

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

.field-unidades .chip-group {
  gap: 8px 18px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  padding: 4px;
}

.stepper-btn {
  margin: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: var(--paper-card);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.stepper-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--paper-card);
}

.stepper-valor {
  flex: 1;
  text-align: center;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --- Unidades de una materia: cards grandes, con puntaje --- */

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

.card-fecha-examen {
  margin-bottom: 30px;
}

.unidades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 30px;
}

/* Pagos (26 sept 2026): la invitación a comprar la materia, debajo de las
   unidades. Solo aparece con PAGOS_ACTIVOS y alguna unidad bloqueada. */
.compra-materia {
  margin-bottom: 30px;
}

.compra-materia h3 {
  margin-top: 0;
}

.unidad-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

/* Unidad todavía no disponible: sin sombra, fondo del papel y título en
   gris. Antes iba con opacity 0.55, que dejaba "próximamente" en 2.2:1,
   ilegible (30 sept 2026). */
.unidad-card-bloqueada {
  background: var(--paper);
  box-shadow: none;
  border-style: dashed;
}

.unidad-card-bloqueada h3 {
  color: var(--muted);
}

.unidad-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.unidad-card-top h3 {
  font-size: 1.05rem;
  margin: 0;
}

.unidad-puntaje {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.unidad-puntaje-vacio {
  color: var(--muted);
  font-size: 1.1rem;
}

.unidad-puntaje-escala {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}

.unidad-card-meta {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.unidad-vista-form,
.unidad-incluir-form {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.unidad-incluir-form {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.check-row-chico {
  margin: 0;
  font-size: 0.84rem;
  gap: 8px;
}

.check-row-chico input[type="checkbox"] {
  width: 15px;
  height: 15px;
}

.login-hint-chico {
  margin: 8px 0 0;
  font-size: 0.8rem;
}

.chip-note {
  font-size: 0.72rem;
  color: var(--muted);
}

.login-hint {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 4px 0 24px;
}

.login-hint a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.login-hint a:hover {
  text-decoration: underline;
}

.materia-info-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.sesion-form {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-top: 4px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}

.check-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
}

.sesion-form-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.sesion-form-row .field {
  flex: 0 0 190px;
}

.btn-empezar {
  margin-top: 0;
  width: auto;
  padding: 12px 22px;
  border: none;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.btn-empezar:hover:not(:disabled) {
  background: var(--brand-hover);
}

.btn-empezar:disabled {
  opacity: 0.4;
  cursor: default;
}

/* --- Preguntas (banco fundido en la pantalla de materia) --- */

.banco-unidad {
  margin-bottom: 16px;
}

.banco-unidad-titulo {
  font-size: 1.1rem;
  margin: 0 0 16px;
}

.banco-texto {
  margin-bottom: 16px;
}

.banco-texto:last-child {
  margin-bottom: 0;
}

.banco-texto h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 14px;
}

/* 28 sept 2026: cada texto es un desplegable, cerrado de entrada. */
.banco-texto {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 10px;
}

.banco-texto-titulo {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.banco-texto-titulo::-webkit-details-marker {
  display: none;
}

.banco-texto-titulo::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--brand);
}

.banco-texto[open] > .banco-texto-titulo::before {
  content: "▾";
}

.banco-texto[open] > .banco-texto-titulo {
  margin-bottom: 4px;
}

/* Recuadro de Sesión (28 sept 2026): "Empezar" como acción principal y
   la opción secundaria ("Elegir materias" / "Sumar mis otras materias")
   al lado, como link — en el Panel y en la pantalla de materia. */
.sesion-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
}

.sesion-secundaria {
  margin: 0;
  width: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--brand);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sesion-secundaria:hover {
  background: none;
  color: var(--brand-hover);
}

.panel-para-hoy-card .sesion-secundaria {
  color: var(--rust);
}

.panel-sesion-al-dia {
  border-color: var(--line);
  background: var(--paper-card);
}

.sesion-seguir {
  margin-bottom: 16px;
}

.sesion-seguir p {
  margin: 0 0 12px;
}

.pregunta-puntaje {
  float: right;
  color: var(--brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pregunta-meta {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.banco-pregunta {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

.banco-pregunta summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.92rem;
  list-style: none;
}

.banco-pregunta summary::-webkit-details-marker {
  display: none;
}

.banco-pregunta summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--brand);
}

.banco-pregunta[open] summary::before {
  content: "▾";
}

/* Séptima ronda: resalte momentáneo al volver a una unidad o pregunta
   puntual después de una acción (tildar "incluir en el repaso", guardar,
   borrar) -- confirma visualmente dónde aterrizaste, sin depender de
   leer el mensaje de arriba. */
.resaltado-momentaneo {
  animation: resalte 2s ease-out;
}

@keyframes resalte {
  0% { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); border-radius: 10px; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

.banco-nueva summary {
  color: var(--brand);
}

.banco-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
}

.banco-form label {
  margin: 12px 0 4px;
}

.banco-form label:first-child {
  margin-top: 4px;
}

.banco-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.banco-form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.banco-form-actions {
  margin-top: 10px;
}

.banco-borrar {
  margin-top: 10px;
}

.badge-dificultad {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
}

.badge-dificultad-facil {
  background: var(--brand-soft);
  color: var(--brand);
}

.badge-dificultad-medio {
  background: #f4ecd6;
  color: #93732b;
}

.badge-dificultad-dificil {
  background: var(--rust-soft);
  color: var(--rust);
}

.badge-tipo {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
}

.campo-label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 16px 0 8px;
}

.badge-ignorada {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: var(--rust-soft);
  color: var(--rust);
  vertical-align: middle;
}

.banco-tipo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.banco-tipo-row .campo-label {
  margin: 0;
  flex: 0 0 100%;
}

.radio-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  background: var(--paper);
}

.radio-chip input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--brand);
  cursor: pointer;
}

.radio-chip:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.radio-chip-disabled {
  cursor: not-allowed;
  color: var(--muted);
  opacity: 0.6;
}

/* Séptima ronda: antes esto vivía solo en un title="" (invisible al
   tacto, en celular) -- ahora el porqué de "Sesión" deshabilitada se ve
   siempre, sin pasar el mouse. */
.chip-nota-inline {
  font-size: 0.78rem;
  font-style: italic;
}

.radio-chip-disabled input[type="radio"] {
  cursor: not-allowed;
}

.dificultad-chip.dificultad-dificil:has(input:checked) {
  border-color: var(--rust);
  background: var(--rust-soft);
  color: var(--rust);
}

.banco-campo-tipo {
  margin-top: 6px;
}

.banco-campo-tipo-oculto {
  display: none;
}

.banco-opcion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.banco-opcion-row input[type="radio"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}

.banco-opcion-row input[type="text"] {
  flex: 1;
}

/* --- Sesión de estudio --- */

.sesion-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.reloj-grande {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--ink);
  margin: 4px 0 18px;
}

.reloj-grande.vencido {
  color: var(--rust);
}

.sesion-topbar-revision {
  justify-content: flex-start;
}

.pregunta-card {
  position: relative;
  margin-bottom: 20px;
}

.pregunta-enunciado {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0;
  padding-right: 34px; /* deja lugar al botón de ajustes, arriba a la derecha */
}

/* "Ajustes de la pregunta" — un ⚙ chico arriba a la derecha de la
   tarjeta, que despliega acciones sobre ESTA pregunta puntual ("Quitar
   pregunta", por ahora la única). Antes esto era un botón de texto
   suelto ("No me interesa esta pregunta") que en sesion_para_hoy.html
   vivía pegado a "Terminar sesión acá" con el mismo peso visual — fácil
   confundir una acción de bajo compromiso (sacar esta pregunta del
   repaso) con una que corta toda la sesión. Guardado atrás de un ícono
   de ajustes, en vez de un botón de texto siempre visible, para que no
   compita con "Responder" ni sea la primera cosa que se lee. Mismo
   patrón <details>/<summary> que .banco-pregunta (sin JS). */
.pregunta-ajustes {
  position: absolute;
  top: 0;
  right: 0;
}

.pregunta-ajustes-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.pregunta-ajustes-boton::-webkit-details-marker {
  display: none;
}

.pregunta-ajustes-boton:hover,
.pregunta-ajustes[open] .pregunta-ajustes-boton {
  border-color: var(--brand);
  color: var(--brand);
}

.pregunta-ajustes-menu {
  position: absolute;
  top: 34px;
  right: 0;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-card);
  box-shadow: var(--shadow);
  z-index: 5;
}

.pregunta-ajustes-menu form {
  margin: 0;
}

.pregunta-ajustes-menu .btn-textual {
  display: block;
  width: 100%;
  padding: 7px 8px;
  border-radius: 6px;
  border: none;
  background: none;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.pregunta-ajustes-menu .btn-textual:hover {
  background: var(--brand-soft);
  color: var(--brand);
}

.respuesta-form label {
  margin-top: 0;
}

.respuesta-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.97rem;
  font-family: inherit;
  background: var(--paper-card);
  color: var(--ink);
  resize: vertical;
  box-shadow: var(--shadow);
}

.respuesta-form textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.respuesta-acciones {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* "Saltear pregunta" es el segundo botón submit de .respuesta-form (con
   `formaction` propio, apuntando a saltear_pregunta / saltear_pregunta_
   para_hoy, y `formnovalidate` para poder mandarse sin elegir opción ni
   completar el textarea) — no un <form> aparte. Vive al lado del botón
   de responder, como alternativa a responder, no al lado de "Terminar
   sesión acá" (ver .pregunta-ajustes más abajo para la otra acción
   sobre la pregunta, "Quitar pregunta" — esa sí es un compromiso más
   grande, por eso está guardada atrás del ⚙). */

.terminar-form {
  margin-top: 14px;
}

.sesion-acciones-chicas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.sesion-acciones-chicas .terminar-form {
  margin-top: 0;
}

.aviso-correccion {
  background: var(--brand-soft);
  border-color: var(--brand-soft);
}

.aviso-correccion p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- Opción múltiple (responder y revisar) --- */

.opciones-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opcion-elegible {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Es un <label>: sin esto hereda el gris chico de las etiquetas de
     formulario (ver `label` arriba) y las opciones se leían peor que el
     enunciado (encontrado el 28 sept 2026). */
  margin: 0;
  color: var(--ink);
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow);
}

.opcion-elegible:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.opcion-elegible:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.opcion-elegible input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--brand);
  cursor: pointer;
}

.opcion-revision {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 8px;
  font-size: 0.92rem;
}

.opcion-correcta {
  border-color: var(--correcta);
  background: var(--correcta-soft);
}

/* La etiqueta "Correcta" en el color de la opción: en gris no llegaba a
   4.5:1 sobre el fondo verdoso (30 sept 2026). Lo mismo "tu respuesta". */
.opcion-correcta .opcion-marca {
  color: var(--correcta);
}

.opcion-elegida-mal {
  border-color: var(--incorrecta);
  background: var(--incorrecta-soft);
}

.opcion-elegida-mal .opcion-marca {
  color: var(--incorrecta);
}

/* Si la pregunta salió mal o quedó sin responder, la correcta va solo con
   un marco, sin relleno (11 oct 2026, pedido del usuario: el verde lleno
   daba la sensación de haber respondido bien). Ese marco y su etiqueta van
   en el color de énfasis, no en verde (mismo día: "demasiado llamativo; más
   sobrio si no es un acierto"): el verde queda solo para los aciertos y el
   rojo para lo que elegiste mal. El marco va de 2 px para que se note sin
   el fondo. */
.revision-incorrecta .opcion-correcta {
  border-color: var(--brand);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--brand);
}

.revision-incorrecta .opcion-correcta .opcion-marca {
  color: var(--brand);
}

.opcion-marca {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}

/* --- Revisión: mapa de corrección / autocorrección --- */

.revision-card {
  margin-bottom: 16px;
}

/* Resultado de Arcade: una tarjeta por pregunta (28 sept 2026). */
.resultado-acciones {
  margin: 0 0 22px;
}

.resultado-acciones .button-link {
  margin-top: 0;
}

.resultado-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.resultado-numero {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.resultado-cabecera .revision-resultado {
  margin: 0;
  font-size: 1rem;
}

.resultado-pregunta .pregunta-enunciado {
  margin-bottom: 12px;
  padding-right: 0;
}

/* Barra de progreso de la sesión (28 sept 2026). */
.sesion-barra {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: -8px 0 18px;
  overflow: hidden;
}

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

.revision-resultado {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
}

.revision-correcta .revision-resultado {
  color: var(--correcta);
}

.revision-incorrecta .revision-resultado {
  color: var(--incorrecta);
}

.revision-etiqueta {
  margin: 14px 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.revision-etiqueta:first-child {
  margin-top: 0;
}

.revision-texto {
  margin: 0;
  white-space: pre-wrap;
}

.revision-mapa {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6;
}

.revision-mapa-vacio {
  color: var(--muted);
  list-style: none;
  margin-left: -20px;
}

.autoeval-botones {
  display: flex;
  gap: 12px;
}

.btn-autoeval {
  margin-top: 0;
  flex: 1;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-autoeval-si {
  background: var(--brand);
  color: var(--on-brand);
}

.btn-autoeval-si:hover {
  background: var(--brand-hover);
}

.btn-autoeval-no {
  background: var(--paper-card);
  border-color: var(--line);
  color: var(--ink);
}

.btn-autoeval-no:hover {
  border-color: var(--rust);
  color: var(--rust);
}

/* --- Calendario --- */

.agenda-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agenda-dia {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}

.agenda-dia-hoy {
  border-color: var(--brand);
}

.agenda-dia-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.agenda-dia-etiqueta {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: capitalize;
}

.agenda-dia-hoy .agenda-dia-etiqueta {
  color: var(--brand);
}

.agenda-dia-total {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.agenda-dia-detalle {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--ink);
}

.agenda-dia-detalle li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.agenda-dia-cantidad {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Planificar estudio: calendario compartido entre materias --- */

.plan-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  margin-bottom: 18px;
}

.plan-leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink);
}

.plan-leyenda-punto {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.plan-leyenda-fecha {
  color: var(--muted);
}

.plan-leyenda-config {
  color: var(--brand);
  font-size: 0.78rem;
  text-decoration: none;
}

.plan-leyenda-config:hover {
  text-decoration: underline;
}

.plan-leyenda-hoy {
  color: var(--muted);
}

.plan-leyenda-hoy-swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 2px solid var(--ink);
  display: inline-block;
}

.plan-calendario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.plan-mes h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 10px;
  text-transform: capitalize;
}

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

.plan-grid-cabecera span {
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
}

.plan-dia {
  aspect-ratio: 1;
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--paper-card);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.plan-dia-vacio {
  border: none;
  background: transparent;
}

.plan-dia-fuera-rango {
  border: none;
  background: transparent;
  color: #c9bc9c;
  font-size: 0.62rem;
  padding: 3px;
}

.plan-dia-hoy {
  box-shadow: 0 0 0 2px var(--ink) inset;
}

.plan-dia-num {
  font-size: 0.62rem;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
}

.plan-chip {
  height: 11px;
  line-height: 11px;
  border-radius: 3px;
  font-size: 0.5rem;
  font-weight: 600;
  text-align: center;
}

.plan-caption {
  margin-top: 16px;
}

/* --- Cronograma (Planificar estudio, modo cursando) --- */

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

.cronograma-fila {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr 28px;
  gap: 8px;
  align-items: center;
}

.cronograma-borrar-fila {
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-card);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.cronograma-borrar-fila:hover {
  border-color: var(--error);
  color: var(--error);
}

#cronograma-agregar-fila {
  align-self: flex-start;
  margin-top: 4px;
}

.cronograma-fila-cabecera {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cronograma-fila input,
.cronograma-fila select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-card);
  color: var(--ink);
}

/* --- Modos del preguntero en la pantalla de materia (27 sept 2026) ---
   Arcade y Sesión lado a lado, mismo tamaño: son las dos alternativas.
   Arcade es un link entero; Sesión, "próximamente", en gris y sin hover. */

.modos-grid {
  display: grid;
  /* minmax(0, …): con 1fr a secas, el título "Sesión próximamente" no se
     achicaba y la grilla se salía de la pantalla entre 720 y ~800 px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

.modos-grid .card + .card {
  margin-top: 0;
}

.modo-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease;
}

.modo-card h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.modo-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.9rem;
  flex: 1;
}

.modo-card-boton {
  display: inline-block;
  text-align: center;
}

a.modo-card:hover {
  border-color: var(--brand);
}

a.modo-card:hover .modo-card-boton {
  background: var(--brand-hover);
}

/* Arcade sin entregar (30 sept 2026): "Seguir el examen" + "Empezar otro". */
a.btn-empezar {
  text-decoration: none;
}

a.btn-empezar:hover {
  background: var(--brand-hover);
  /* La regla general de los links (a:hover) le ponía al texto el mismo
     color que el fondo: "Seguir el examen" desaparecía con el mouse
     encima (1 oct 2026, reporte del usuario). */
  color: var(--on-brand);
}

.modo-card-secundario {
  color: var(--muted);
  font-size: 0.9rem;
}

.arcade-en-curso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  border-color: var(--brand);
}

.arcade-en-curso p {
  margin: 0;
  flex: 1 1 260px;
}

.modo-card-proximamente {
  background: var(--paper);
  box-shadow: none;
  color: var(--muted);
}

.modo-card-proximamente h2 {
  color: var(--muted);
}

.modo-card-proximamente .modo-card-boton {
  background: var(--line);
  color: var(--muted);
  cursor: default;
}

.modo-badge {
  background: var(--line);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Arcade: ajustes (rediseño 27 sept 2026) ---
   Cada ajuste es un bloque (título chico + chips). Los chips esconden el
   radio/checkbox nativo (sigue ahí, accesible y con teclado) y muestran
   el estado con el borde y el fondo — así no aparecen las casillas azules
   del navegador mezcladas con el verde de la app. */

.arcade-ajustes {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 16px;
}

.ajuste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ajuste-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.opcion-chip {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.opcion-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.opcion-chip > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 0.9rem;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.opcion-chip > span small {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.opcion-chip:hover > span {
  border-color: var(--brand);
}

.opcion-chip:has(input:checked) > span {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 600;
}

.opcion-chip:has(input:checked) > span small {
  color: var(--brand);
}

.opcion-chip:has(input:focus-visible) > span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.opcion-chip-vacia {
  cursor: not-allowed;
  opacity: 0.45;
}

.opcion-chip-vacia:hover > span {
  border-color: var(--line);
}

.ajuste-minutos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.ajuste-minutos[hidden] {
  display: none;
}

.ajuste-minutos input {
  width: 76px;
  padding: 7px 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.arcade-ajustes-empezar {
  align-self: flex-start;
  margin-top: 4px;
}

/* Empezar y, al lado, "Descargar en PDF" (3 oct 2026), más discreto. */
.arcade-ajustes-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.arcade-ajustes-acciones .arcade-ajustes-empezar {
  align-self: auto;
}

.arcade-descargar {
  margin-top: 4px;
}

/* --- Arcade: examen estilo Moodle (27 sept 2026) ---
   Panel de navegación fijo a la izquierda (sticky) y las preguntas a la
   derecha, cada una con su columna de info (número, estado, marcar).
   Necesita más ancho que el resto de las pantallas: main-ancho. */

main.main-ancho {
  max-width: 1000px;
}

/* Preguntas centradas (3 oct 2026, pedido del usuario: "quedan
   ligeramente incómodas"). Antes el panel (230 px) y la columna de info
   de cada pregunta (120 px) empujaban las tarjetas hacia la derecha. Ahora
   tres columnas: el panel en la de la izquierda, pegado a las preguntas;
   las preguntas en la del medio (hasta 700 px); y a la derecha un espacio
   igual al de la izquierda, así las preguntas quedan en el centro de la
   pantalla cuando hay lugar. Si no lo hay, lo primero que se achica es el
   espacio de la derecha (las preguntas se corren un poco, sin tapar nada). */
main.main-examen {
  max-width: none;
}

/* Las preguntas van centradas como el contenido del resto de las páginas
   (en el espacio a la derecha del panel del tero) y con su mismo ancho,
   así al pasar de los ajustes al examen no saltan; el panel del examen
   es un "satélite" a su izquierda que no las corre (pedido del usuario, 3
   oct 2026: probamos centrarlas en la pantalla entera y quedaban
   "demasiado a la izquierda"). Si no hay lugar para el panel a la
   izquierda, la columna de la derecha se achica y las preguntas se corren
   un poco a la derecha, sin tapar nada. */
.examen {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(0, 584px) minmax(0, 1fr);  /* 584 = el ancho del contenido de las otras páginas (640 − 2 × 28 de relleno) */
  gap: 24px;
  align-items: start;
}

.examen-panel {
  position: sticky;
  top: 20px;
  width: 230px;
  justify-self: end;
}

.examen-panel-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.examen-panel-materia {
  /* Es el h1 de la pantalla (30 sept 2026: el examen no tenía título para
     los lectores de pantalla), pero se ve como una línea chica. */
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
  text-wrap: wrap;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.examen-reloj {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}

.examen-reloj.poco-tiempo {
  color: var(--rust);
}

.examen-progreso {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.examen-progreso strong {
  color: var(--ink);
}

.examen-grilla {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.examen-grilla-item {
  position: relative;
  margin: 0;
  width: auto;
  height: 34px;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.examen-grilla-item:hover {
  background: var(--paper);
  border-color: var(--brand);
  color: var(--ink);
}

.examen-grilla-item.respondida {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

/* "Para revisar": una esquinita terracota, como la banderita de Moodle,
   sin tapar si está respondida o no. */
.examen-grilla-item.marcada::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--rust);
}

/* Las preguntas de la página que se está viendo: subrayado fino abajo,
   en vez de un contorno grueso (con 8 por página, pesaba mucho). */
.examen-grilla-item.es-actual {
  border-bottom: 3px solid var(--ink);
}

.examen-leyenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.75rem;
  color: var(--muted);
}

.examen-leyenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.examen-leyenda .muestra {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.examen-leyenda .muestra.respondida {
  background: var(--brand-soft);
  border: 1px solid var(--brand);
}

.examen-leyenda .muestra.marcada {
  background: var(--rust);
}

.examen-entregar-corto {
  display: none;
}

.examen-entregar {
  width: 100%;
  /* Si la fuente no carga (sin Google Fonts, la de reemplazo es más
     ancha), "Terminar y entregar" no entraba en los 230 px del panel y se
     salía del botón: que pase a dos renglones antes que cortarse (1 oct 2026). */
  white-space: normal;
  padding-inline: 14px;
}

.examen-preguntas {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.examen-pregunta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  scroll-margin-top: 20px;
}

/* Número, estado y "Revisar" en una fila arriba de la tarjeta (antes, una
   columna a la izquierda; ver "Preguntas centradas"). */
.examen-pregunta-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.examen-pregunta-numero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.examen-pregunta-estado {
  font-size: 0.78rem;
  color: var(--muted);
}

.examen-pregunta-estado.respondida {
  color: var(--brand);
  font-weight: 600;
}

.examen-marcar {
  position: relative;
  margin: 0 0 0 auto;
  cursor: pointer;
  font-size: 0.78rem;
}

.examen-marcar input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.examen-marcar span {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  line-height: 1.3;
}

.examen-marcar:hover span {
  border-color: var(--rust);
  color: var(--rust);
}

.examen-marcar:has(input:checked) span {
  border-color: var(--rust);
  background: var(--rust-soft);
  color: var(--rust);
  font-weight: 600;
}

.examen-marcar:has(input:focus-visible) span {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

.examen-pregunta-card .pregunta-enunciado {
  margin-bottom: 14px;
  padding-right: 0;
}

.examen-paginado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.examen-paginado-texto {
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- Arcade --- */

.arcade-entrada {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.arcade-entrada-texto h2 {
  margin: 0 0 4px;
  font-family: var(--font-display);
}

.arcade-entrada-texto .sub {
  margin: 0;
}

.arcade-entrada-boton {
  display: inline-block;
  flex-shrink: 0;
  text-align: center;
  text-decoration: none;
}

.arcade-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.arcade-nav-item {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}

.arcade-nav-item:hover {
  border-color: var(--brand);
  color: var(--ink);
}

.arcade-nav-item.respondida {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

.arcade-nav-item.marcada {
  border-color: var(--rust);
  color: var(--rust);
  box-shadow: inset 0 0 0 1px var(--rust);
}

.arcade-nav-item.marcada.respondida {
  background: var(--rust-soft);
}

.arcade-nav-item.es-actual {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
}

.arcade-pregunta {
  margin-bottom: 14px;
}

.arcade-marcar {
  margin-top: 10px;
}

.arcade-acciones {
  margin-top: 20px;
}

/* --- Mobile: el panel lateral pasa a ser una barra arriba --- */

@media (max-width: 720px) {
  .app-shell {
    flex-direction: column;
    min-height: 0;
  }

  .sidebar {
    width: auto;
    position: static;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .sidebar-arriba {
    display: contents;
  }

  /* En el celular no hay paisaje: de la escena queda solo el sol/luna,
     chiquito, al final de la barra (para el modo oscuro). */
  .sidebar-escena {
    order: 10;
    height: auto;
    margin: 0;
  }

  .sidebar-escena .escena-atras,
  .sidebar-escena .escena-adelante,
  .sidebar-escena .tero-btn,
  .sidebar-escena .tero-globo {
    display: none;
  }

  .astro {
    position: static;
    display: flex;
  }

  .sidebar-escena .astro svg {
    width: 22px;
    height: 20px;
  }

  .brand-name {
    font-size: 1.2rem;
  }

  .sidebar-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* Con Panel y Planificar visibles también sin cuenta (27 sept 2026)
     son 4 links: sin esto, "Buscar materia" y "Planificar estudio" se
     partían en dos renglones. */
  .sidebar-nav a {
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 0.88rem;
  }

  .sidebar-footer {
    margin-left: auto;
    padding: 0;
    background: none;
    color: var(--muted);
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  :root[data-tema="oscuro"] .sidebar-footer {
    background: none;
  }

  .sidebar-footer a,
  .sidebar-footer .boton-link {
    color: var(--brand);
  }

  /* width: 100% (30 sept 2026): en columna, el `margin: 0 auto` de main
     le saca el estirado y el ancho pasaba a depender del contenido; a 320
     px, Buscar materia quedaba 9 px más ancha que la pantalla. */
  .main-content {
    width: 100%;
    padding: 24px 16px 48px;
  }

  h1 {
    font-size: 1.6rem;
  }

  .materia-header {
    flex-direction: column;
    align-items: stretch;
  }

  .modos-grid {
    grid-template-columns: 1fr;
  }

  .lupa-resultado-link {
    padding-right: 26px;
    padding-bottom: 64px;
  }

  .lupa-resultado-accion {
    top: auto;
    bottom: 16px;
    right: 20px;
  }

  .config-fields {
    flex-direction: column;
    align-items: stretch;
  }

  .config-fields .field {
    flex: none;
  }

  .sesion-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sesion-form-row .field {
    flex: none;
  }

  .sesion-config-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .sesion-config-grid .field {
    flex: none;
  }

  .btn-empezar {
    width: 100%;
  }

  .sesion-topbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .reloj-grande {
    font-size: 2.4rem;
  }

  .autoeval-botones {
    flex-direction: column;
  }

  .materia-header-acciones {
    width: 100%;
  }

  .materia-header-acciones .ghost-btn {
    flex: 1;
    text-align: center;
  }

  .unidades-grid,
  .panel-grid {
    grid-template-columns: 1fr;
  }

  /* 30 sept 2026: en columna, los dos recuadros del resultado de Arcade
     quedaban altísimos y casi vacíos; en fila entran bien en 360 px. */
  .panel-stats .stat-tile {
    flex-basis: 0;
    padding: 12px 16px;
  }

  .cronograma-fila {
    grid-template-columns: 1fr;
    gap: 4px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  .cronograma-fila-cabecera {
    display: none;
  }

  .plan-dia {
    border-radius: 5px;
  }

  .plan-chip {
    font-size: 0.42rem;
    height: 9px;
    line-height: 9px;
  }
}

/* --- Modo oscuro: ajustes sueltos ---
   Lo que no sale de los tokens: colores fijos que en la noche quedaban
   fuera de lugar. */
:root[data-tema="oscuro"] .btn-google {
  background: var(--paper-card);
}

:root[data-tema="oscuro"] .badge-dificultad-medio {
  background: #3a3322;
  color: #d4b56a;
}

:root[data-tema="oscuro"] .plan-dia-fuera-rango {
  color: #5a6570;
}

/* --- Mi cuenta (1 oct 2026) --- */

/* Borrar la cuenta (30 sept 2026): plegado al final; el botón en el rojo
   de los errores, para que no se confunda con una acción común. */
.cuenta-borrar summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--error);
}

.cuenta-borrar summary:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 3px;
  border-radius: 4px;
}

.cuenta-borrar p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.cuenta-borrar label strong {
  color: var(--ink);
}

.btn-peligro {
  width: auto;
  margin-top: 14px;
  padding: 10px 18px;
  background: var(--error);
  color: var(--paper-card);
}

.btn-peligro:hover {
  background: var(--error);
  filter: brightness(0.92);
}

.cuenta-ayuda {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

.cuenta-rotulo {
  margin: 16px 0 8px;
  font-weight: 600;
  font-size: 0.92rem;
}

.cuenta-modos {
  display: inline-flex;
  gap: 6px;
}

.cuenta-modo,
.cuenta-paleta,
.btn-secundario {
  width: auto;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink);
  font-weight: 600;
}

.cuenta-modo {
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.cuenta-modo:hover,
.cuenta-paleta:hover,
.btn-secundario:hover {
  background: var(--brand-soft);
}

.cuenta-modo[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

.cuenta-paletas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

/* Fondo: la muestra partida en diagonal, de día y de noche (11 oct 2026). */
.cuenta-muestra-fondo {
  height: 36px;
}

.cuenta-paleta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  text-align: left;
  font-size: 0.84rem;
}

.cuenta-paleta[aria-checked="true"] {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

/* la muestra: el papel de fondo con tres pastillas (principal, acento, tinta) */
.cuenta-paleta-muestra {
  display: flex;
  gap: 4px;
  padding: 8px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.cuenta-paleta-muestra i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.btn-secundario {
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 0.92rem;
}

/* --- Pasada del Panel y la materia (1 oct 2026) --- */

/* Sesión bloqueada: la tarjeta queda apagada, sin botón. */
/* "Próximamente": se distingue por el borde punteado, el fondo sin
   tarjeta y el gris del texto. Antes también iba con opacity 0.75, que
   dejaba el texto en 2.7:1, ilegible (30 sept 2026). */
.modo-card-proximamente {
  box-shadow: none;
  border-style: dashed;
}

.modo-card-proximamente h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Todas las preguntas de la materia, plegadas en un solo bloque. */
.banco-todas {
  margin-top: 30px;
}

.banco-todas-titulo {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-card);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

.banco-todas-titulo::-webkit-details-marker {
  display: none;
}

.banco-todas-titulo::before {
  content: "▸";
  color: var(--brand);
}

.banco-todas[open] > .banco-todas-titulo {
  margin-bottom: 14px;
}

.banco-todas[open] > .banco-todas-titulo::before {
  content: "▾";
}

.banco-todas-titulo:hover {
  border-color: var(--brand);
}

.modo-card-proximamente h2 .chip-note {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* --- Pasar de una pantalla a otra sin parpadeo (1 oct 2026) ---
   Transición entre páginas del navegador (Chrome/Edge; los que no la
   soportan la ignoran): la pantalla nueva aparece con un fundido corto en
   vez de un corte, y el panel lateral, que es igual en todas, queda quieto. */
@view-transition {
  navigation: auto;
}

.sidebar {
  view-transition-name: panel-lateral;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* --- Elegir carrera(s) (Buscar materia y Mi cuenta, 1 oct 2026) --- */

.elegir-carreras-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.carrera-opcion {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-card);
  cursor: pointer;
}

.carrera-opcion input {
  grid-row: span 2;
  width: auto;
  margin: 0;
  accent-color: var(--brand);
}

.carrera-opcion:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.carrera-opcion-nombre {
  font-weight: 600;
}

.carrera-opcion-uni {
  color: var(--muted);
  font-size: 0.84rem;
}

.carrera-opcion-apagada {
  opacity: 0.5;
  cursor: not-allowed;
}

.elegir-carreras .campo-ayuda {
  margin: 10px 0 0;
}

.elegir-carreras-boton {
  width: auto;
  margin-top: 12px;
  padding: 9px 22px;
}

.lupa-cambiar-carrera {
  margin-top: 26px;
}

.lupa-cambiar-carrera > summary {
  cursor: pointer;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 10px;
}

/* --- Buscar materia por año (1 oct 2026) --- */

.lupa-anio {
  margin-top: 22px;
}

.lupa-anio-titulo {
  margin: 0 0 8px;
  font-size: 1rem;
}

.lupa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  overflow: hidden;
}

.lupa-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.lupa-fila:first-child {
  border-top: none;
}

/* el filtro en vivo (static/js/lupa.js) usa el atributo hidden, que el
   display: flex de arriba pisaría */
.lupa-fila[hidden] {
  display: none;
}

.lupa-fila-nombre {
  flex: 1;
  /* min-width: 0 (30 sept 2026): sin esto, a 320 px una materia de
     palabras largas ("Psicofisiología") más las fichas de cátedra no
     entraban y la página se salía de la pantalla. */
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

a.lupa-fila-nombre:hover {
  color: var(--brand);
}

.lupa-fila-proxima .lupa-fila-nombre {
  color: var(--muted);
  font-weight: 400;
}

.lupa-fila-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

.lupa-catedra {
  min-width: 22px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
}

/* "+" para agregar la materia a las tuyas (✓ si la cátedra marcada ya está) */
.lupa-agregar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 0 0 4px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}

.lupa-agregar {
  border: 1px solid var(--brand);
  background: var(--paper-card);
  color: var(--brand);
}

.lupa-agregar:hover {
  background: var(--brand);
  color: var(--on-brand);
}

.lupa-nota {
  margin-top: 18px;
}

.lupa-carrera {
  margin: 30px 0 0;
}

.lupa-carrera span {
  color: var(--muted);
  font-weight: 400;
}

/* --- Cuadro de confirmación propio (1 oct 2026; static/js/confirmar.js) ---
   Reemplaza al confirm() del navegador, que no se podía estilizar. */
.confirmar {
  width: min(420px, calc(100vw - 32px));
  padding: 22px 24px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
}

.confirmar::backdrop {
  background: rgba(20, 18, 15, 0.45);
}

.confirmar[open] {
  animation: confirmar-entra 0.14s ease-out;
}

@keyframes confirmar-entra {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.confirmar-titulo {
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.confirmar-texto {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.5;
}

.confirmar-botones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.confirmar-botones button {
  width: auto;
  margin: 0;
  padding: 9px 18px;
  font-size: 0.93rem;
}

.confirmar-no {
  border: 1px solid var(--line);
  background: var(--paper-card);
  color: var(--ink);
}

.confirmar-no:hover {
  background: var(--brand-soft);
}

@media (prefers-reduced-motion: reduce) {
  .confirmar[open] {
    animation: none;
  }
}

/* --- Fila de Buscar materia: elegir cátedra y guardar (1 oct 2026) --- */

/* el formulario no agrega caja: la fila sigue siendo el flex de siempre */
.lupa-fila-form {
  display: contents;
}

/* la flecha: entra a la materia de la cátedra marcada (3 oct 2026) */
.lupa-entrar {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-card);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.lupa-entrar:hover {
  border-color: var(--brand);
  background: var(--paper-card);
  color: var(--brand);
}

/* el botón de guardar cuando la cátedra marcada ya está guardada */
.lupa-agregar.es-guardada,
.lupa-agregar.es-guardada:hover {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.9rem;
}

/* ficha de cátedra elegible: un radio escondido; marcada = color principal */
.lupa-catedra-elegible {
  cursor: pointer;
  position: relative;
}

.lupa-catedra-elegible input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.lupa-catedra-elegible:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.lupa-catedra-elegible:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lupa-catedra-elegible:hover {
  border-color: var(--brand);
}

/* ya guardada: marcada suave (la elegible guardada también, si no está marcada) */
.lupa-catedra-elegible.es-guardada:not(:has(input:checked)),
.lupa-catedra-guardada {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
}

/* próximamente: no se puede elegir */
.lupa-catedra-no {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --- Celular cómodo (30 sept 2026, pedido del usuario) ---
   Medido a 360 px de ancho: lo que se toca mide al menos 44 px (el mínimo
   cómodo para un dedo; había links de 20 px y el sol/luna de 22 × 20), los
   campos de texto van en 16 px (con menos, el iPhone hace zoom solo al
   tocarlos), la barra de arriba ocupa dos renglones en vez de tres y, en el
   examen de Arcade, el reloj, el progreso y "Entregar" quedan fijos arriba
   al bajar. */

.examen-grilla-plegable > summary {
  display: none;  /* en la compu la grilla está siempre a la vista */
}

@media (max-width: 720px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Barra de arriba: renglón 1 = marca · cuenta · sol/luna; renglón 2 =
     la navegación, a lo ancho. El mail y "Crear cuenta" no entran en 360
     px: el mail está en Mi cuenta y "Crear cuenta", en la pantalla de
     ingresar. */
  .sidebar {
    gap: 4px 12px;
    padding: 10px 16px 6px;
  }

  .sidebar-footer {
    order: 1;
    margin-left: auto;
  }

  .sidebar-footer span,
  .sidebar-footer a:nth-of-type(2) {
    display: none;
  }

  .sidebar-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 6px;
  }

  .sidebar-escena {
    order: 2;
  }

  .sidebar-escena .astro {
    padding: 11px;
    margin: 0 -11px 0 -5px;
  }

  .sidebar-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 -8px;
  }

  .sidebar-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 0.95rem;
  }

  /* Botones chicos, a 44 px de alto */
  .ghost-btn,
  .btn-secundario,
  .cuenta-modo,
  .button-link,
  .btn-compact {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .examen-grilla-item {
    min-height: 44px;
  }

  .btn-peligro {
    min-height: 44px;
  }

  /* Links de texto sueltos (volver, pie del login, la marca): más área
     para tocar sin cambiar cómo se ven. */
  .volver-link,
  .foot-link a,
  .brand {
    display: inline-block;
    padding: 10px 0;
  }

  .volver-link {
    margin: -10px 0 0;
  }

  .cuenta-borrar summary {
    padding: 10px 0;
  }

  /* El "+" de Buscar materia se ve igual, pero se puede tocar un área de
     44 px alrededor. */
  .lupa-agregar,
  .lupa-entrar {
    position: relative;
  }

  .lupa-agregar::after,
  .lupa-entrar::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
}

/* --- Examen de Arcade en pantallas angostas (30 sept 2026) ---
   Antes esto era solo para el celular (≤ 720 px). Entre 721 y ~960 px (una
   tablet, o una ventana a media pantalla) el panel lateral de la app sigue
   ocupando 280 px y quedaban ~420 para el panel del examen (230), la
   columna de info (120) y la pregunta: la página se salía 184 px de la
   pantalla a 760 px. Ahora hasta 960 px el panel del examen es la barra
   fija de arriba, igual que en el celular. (La info de cada pregunta va
   siempre en una fila encima de su tarjeta desde el 3 oct 2026.) */

@media (max-width: 960px) {
  .examen {
    grid-template-columns: 1fr;
  }

  .examen-panel {
    width: auto;
    justify-self: stretch;
  }


  .examen-grilla {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  }

  /* Examen de Arcade: barra fija arriba con el reloj, el progreso y
     "Entregar"; la grilla de preguntas se despliega desde ahí. */
  .examen-panel {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: -32px -28px 0;  /* a lo ancho: tapa el padding de .main-content */
  }

  .examen-panel-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 16px;
    border-radius: 0;
    border-width: 0 0 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  }

  /* Oculto a la vista pero no para los lectores de pantalla (es el h1). */
  .examen-panel-materia {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .examen-reloj {
    font-size: 1.35rem;
    margin: 0;
  }

  .examen-progreso {
    flex: 1;
    margin: 0;
  }

  .examen-entregar-largo {
    display: none;
  }

  .examen-entregar-corto {
    display: inline;
  }

  .examen-entregar {
    order: 1;  /* en el HTML va después de la grilla: acá, en el primer renglón */
    width: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .examen-grilla-plegable {
    order: 2;
    flex-basis: 100%;
  }

  .examen-grilla-plegable > summary {
    display: flex;
    align-items: center;
    min-height: 40px;
    cursor: pointer;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.9rem;
  }

  .examen-grilla-plegable > summary::after {
    content: "▾";
    margin-left: 6px;
    transition: transform 0.15s;
  }

  .examen-grilla-plegable[open] > summary::after {
    transform: rotate(180deg);
  }

  .examen-grilla-plegable[open] > summary {
    margin-bottom: 8px;
  }

  .examen-grilla-plegable .examen-leyenda {
    margin: 10px 0 4px;
  }

  /* Que un ancla (#pregunta-N, desde la grilla) no quede tapada por la
     barra fija. */
  .examen-pregunta {
    scroll-margin-top: 90px;
  }
}

/* En el celular, .main-content tiene menos padding: la barra lo sigue. */
@media (max-width: 720px) {
  .examen-panel {
    margin: -24px -16px 0;
  }
}

/* Reportar un error en una pregunta (2 oct 2026), en la corrección de Arcade. */
.reportar {
  margin-top: 12px;
  font-size: 0.9rem;
}

.reportar summary {
  color: var(--muted);
  cursor: pointer;
  width: fit-content;
}

.reportar summary:hover {
  color: var(--ink);
}

.reportar-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.reportar-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
}

.reportar-form legend {
  margin-bottom: 4px;
  font-weight: 600;
}

.reportar-motivo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
}

.reportar-motivo input {
  flex: none;
  width: auto;
  margin: 0;
  accent-color: var(--brand);
}

.reportar-comentario {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reportar-form .ghost-btn {
  align-self: flex-start;
}

.reportar-hecho {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Términos y privacidad (2 oct 2026): los links de Mi cuenta y los textos.
   Hasta el 3 oct 2026 había además un pie en cada página (.pie-legal). */
.cuenta-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
}

.legal-aviso {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.legal ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.legal li {
  margin-bottom: 0.4em;
  line-height: 1.6;
}

/* Datos que faltan completar en los borradores (se ven a propósito). */
.legal-falta {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--rust-soft);
  color: var(--ink);
}

/* --- Sin distracciones (Mi cuenta, 3 oct 2026, pedido del usuario) ---
   <html data-sobrio="1">: sin paisaje (ni tero, ni pasto, ni sol; el modo
   día/noche se cambia en Mi cuenta) y el pie del panel liso, con los
   colores de la página. Va al final para ganarle a las reglas de arriba,
   modo oscuro incluido. */
:root[data-sobrio="1"] .sidebar-escena {
  display: none;
}

:root[data-sobrio="1"] .sidebar-footer {
  background: none;
  color: var(--muted);
}

:root[data-sobrio="1"] .sidebar-footer a,
:root[data-sobrio="1"] .sidebar-footer .boton-link {
  color: var(--brand);
}

@media (min-width: 721px) {
  :root[data-sobrio="1"] .sidebar-footer {
    margin-top: auto;  /* abajo de todo, donde estaba la tierra */
    border-top: 1px solid var(--line);
  }
}

/* ===== Texto que se copia y texto que no (11 oct 2026, pedido del usuario:
   "con doble clic se puede seleccionar texto de varios lugares y queda
   feo": el banderín de Revisar, "Respondida", botones...).
   No se seleccionan los controles y las etiquetas de la interfaz: botones,
   links con forma de botón o de tarjeta, chips y estados, la navegación y
   el panel lateral, la etiqueta de cada opción del examen (su texto sí,
   ver abajo), el panel y la cabecera de cada pregunta, los
   números de los resultados. Sí se selecciona el contenido: títulos,
   enunciados, la corrección, los artículos, las preguntas de la materia,
   los campos de texto. ===== */
button,
label,
select,
.btn-empezar,
.button-link,
.ghost-btn,
.modo-card-boton,
.modo-card-secundario,
.sesion-secundaria,
a.card,
a.panel-materia-card,
.sidebar,
.sidebar-nav,
.badge,
.chip-note,
.chips,
.opcion-chip,
.materia-facultad,
.panel-materia-pie,
.examen-panel,
.examen-pregunta-info,
.examen-leyenda,
.examen-grilla,
.examen-reloj,
.examen-progreso,
.examen-paginado-texto,
.stat-tile,
.resultado-numero,
.revision-resultado,
.ajuste-titulo,
.flash-cerrar,
.cuenta-paleta,
.cuenta-modo,
.unidad-card-top .chip-note {
  -webkit-user-select: none;
  user-select: none;
}

/* Lo que se escribe, siempre seleccionable (aunque esté dentro de una
   etiqueta de las de arriba). Y el texto de las opciones del examen
   (pedido del usuario, mismo día: "dejá que se copie el texto de las
   opciones"); el círculo y el resto de la etiqueta siguen sin seleccionarse. */
input,
textarea,
.opcion-elegible > span {
  -webkit-user-select: text;
  user-select: text;
}