/*
 * La misma cara que la app Android: un expediente criminal.
 *
 * Los colores son literalmente los de `Theme.kt`, y no por pereza — si el
 * mismo juego se ve de dos maneras distintas según por dónde entres, deja de
 * parecer el mismo juego. Tres reglas sostienen todo esto y conviene no
 * deshacerlas por separado:
 *
 *  - Esquinas rectas. Los documentos no tienen bordes redondeados. Es lo que
 *    más distancia pone entre esto y una página web cualquiera.
 *  - Bordes en vez de sombras. Una ficha de papel no flota; se recorta.
 *  - Etiquetas mecanografiadas en mayúsculas, que cuentan de qué va cada
 *    bloque sin gastar una frase entera.
 *
 * Tema oscuro fijo, sin `prefers-color-scheme`: el juego va de escenas
 * nocturnas y en blanco pierde la mitad de lo que lo hace atractivo.
 */

:root {
  --tinta: #0a0a0b;
  --carpeta: #121214;
  --ficha: #18181c;
  --papel: #e9e6df;
  --lapiz: #8b8b93;
  --rojo: #b4342c;
  --verde: #6e9e77;
  --ambar: #c9a227;
  --linea: #2a2a31;

  /* El monoespaciado es el que hace el trabajo: convierte cualquier texto en
     algo mecanografiado. La prosa larga de la interfaz va en la fuente del
     sistema, que se lee mejor en párrafo. */
  --maquina: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sistema: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--maquina);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

#raiz {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* --- Piezas del vocabulario visual ------------------------------------- */

.etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lapiz);
  font-weight: 500;
}

.regla {
  height: 1px;
  background: var(--linea);
  border: 0;
  margin: 0;
}

.ficha {
  background: var(--carpeta);
  border: 1px solid var(--linea);
}

.ficha > .cabecera-ficha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--linea);
}

.ficha > .cabecera-ficha .etiqueta { flex: 1; }

.ficha > .cuerpo { padding: 1.1rem 1.2rem; }

/* Sello de goma, ligeramente torcido a propósito: uno puesto a mano nunca
   sale recto, y ese par de grados es lo que separa "recuadro con texto" de
   "esto lo ha estampado alguien". */
.sello {
  display: inline-block;
  border: 2px solid var(--rojo);
  color: var(--rojo);
  padding: 0.25rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.sello.verde { border-color: var(--verde); color: var(--verde); }
.sello.ambar { border-color: var(--ambar); color: var(--ambar); }

/* Dificultad como nivel de clasificación: barras, no estrellas. */
.dificultad { display: flex; gap: 3px; align-items: center; }
.dificultad i {
  display: block;
  width: 10px;
  height: 2px;
  background: var(--linea);
}
.dificultad i.on { height: 4px; background: var(--rojo); }

button, .boton {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: transparent;
  color: var(--papel);
  border: 1px solid var(--papel);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

button:hover:not(:disabled) { background: rgba(233, 230, 223, 0.07); }
button.destacado { color: var(--rojo); border-color: var(--rojo); }
button.destacado:hover:not(:disabled) { background: rgba(180, 52, 44, 0.12); }
button:disabled { color: var(--linea); border-color: var(--linea); cursor: not-allowed; }
button.ancho { width: 100%; }

button.enlace {
  border: 0;
  color: var(--lapiz);
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
button.enlace:hover { background: transparent; color: var(--papel); }

input[type="text"], input[type="password"], textarea {
  font: inherit;
  width: 100%;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--linea);
  padding: 0.6rem 0.7rem;
  resize: vertical;
}

input[type="text"]:focus, textarea:focus {
  outline: none;
  border-color: var(--lapiz);
}

/* --- Estructura de pantalla -------------------------------------------- */

.portada { text-align: center; }
.portada h1 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  margin: 0.7rem 0 0.5rem;
  /* El letter-spacing añade hueco DETRÁS de la última letra y descentra el
     rótulo. Medio espacio de margen a la izquierda lo compensa. */
  text-indent: 0.3em;
}

.cabecera-pantalla {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 1.5rem;
}
.cabecera-pantalla h2 {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}
.cabecera-pantalla .atras {
  border: 0;
  font-size: 1.2rem;
  padding: 0.2rem 0.5rem;
  color: var(--papel);
}

.cifra { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.centrado { text-align: center; }
.fila { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.fila.reparte { justify-content: space-evenly; }
.pila { display: flex; flex-direction: column; gap: 0.8rem; }
.esp { height: 1.6rem; }
.esp.grande { height: 2.4rem; }

/* El enunciado y la solución: el informe mecanografiado. Interlineado
   generoso porque el monoespaciado apelmaza y esto se lee de una sentada. */
.informe { white-space: pre-wrap; line-height: 1.85; margin: 0; }
/* El texto EXPLICATIVO (reglas, bienvenida, intro de los modos) comparte el
   aspecto del informe pero no puede conservar los saltos: se escribe indentado
   dentro de plantillas de JavaScript, y con `pre-wrap` esa sangría del fuente
   se veía tal cual en pantalla. El `pre-wrap` se queda donde sí hace falta —el
   enunciado de un caso trae sus saltos a propósito desde el YAML. */
.informe.fluido { white-space: normal; }

.prosa { font-family: var(--sistema); font-size: 0.9rem; color: var(--lapiz); line-height: 1.6; }

a.enlace-texto { color: var(--rojo); text-decoration: none; }
a.enlace-texto:hover { text-decoration: underline; }

/* --- Interrogatorio ----------------------------------------------------- */

.interrogatorio { display: flex; flex-direction: column; }
.interrogatorio .turno {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linea);
}
.interrogatorio .turno:last-child { border-bottom: 0; }
.turno .pregunta { flex: 1; font-size: 0.9rem; }
.turno .entendida {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--lapiz);
  border-left: 2px solid var(--linea);
  padding-left: 0.5rem;
}
.turno .veredicto {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  min-width: 3.4rem;
  text-align: right;
}
.veredicto.YES { color: var(--verde); }
.veredicto.NO { color: var(--rojo); }
.veredicto.IRRELEVANT { color: var(--lapiz); }

.pista {
  background: var(--ficha);
  border-left: 3px solid var(--ambar);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
}
.pista .etiqueta { color: var(--ambar); }

.solucion {
  background: var(--ficha);
  border-left: 3px solid var(--rojo);
  padding: 0.9rem 1rem;
}

.aviso {
  border: 1px solid var(--ambar);
  color: var(--ambar);
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.error {
  border: 1px solid var(--rojo);
  color: var(--rojo);
  padding: 0.6rem 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Las cinco notas: cuadradas, iguales y grandes, para poder pulsarlas con el
   pulgar sin apuntar. Es lo último que se hace en la partida y compite con el
   impulso de cerrar la pestaña; cuanto menos cueste, más notas llegan. */
#notas button {
  flex: 1;
  padding: 0.7rem 0;
  font-size: 1rem;
}

/* --- Estadísticas ------------------------------------------------------- */

/* Dos columnas en un móvil y cuatro en pantalla ancha. El `minmax` de 9rem
   está puesto para que en un teléfono salga un 2×2 limpio: con celdas más
   estrechas caben tres, la cuarta se queda sola en su fila y "racha máxima"
   parte en dos líneas. */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
}
.rejilla .dato { border: 1px solid var(--linea); padding: 0.8rem 0.9rem; }
.rejilla .dato .cifra { font-size: 1.5rem; }

/* La distribución: barras horizontales proporcionales, con el tramo de la
   última partida resaltado. Sin librería de gráficos — son cuatro divs. */
.tramo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.tramo .rango { width: 3.2rem; font-size: 0.78rem; color: var(--lapiz); text-align: right; }
.tramo .barra {
  background: var(--linea);
  color: var(--papel);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  min-width: 1.6rem;
  text-align: right;
}
.tramo .barra.destacado { background: var(--rojo); }

/* --- Listas del archivo ------------------------------------------------- */

.lista { display: flex; flex-direction: column; }
.lista .caso {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--linea);
  padding: 0.85rem 0.3rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--papel);
}
.lista .caso:hover { background: rgba(233, 230, 223, 0.05); }
.lista .caso .titulo { flex: 1; }
.lista .caso .marca {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lapiz);
  white-space: nowrap;
}
.lista .caso .marca.curso { color: var(--ambar); }
.lista .caso .marca.resuelto { color: var(--verde); }

/* --- Selector de paquetes ------------------------------------------------ */

.lista-paquetes { display: flex; flex-direction: column; gap: 0.8rem; }

.paquete {
  display: block;
  width: 100%;
  background: var(--carpeta);
  border: 1px solid var(--linea);
  padding: 1rem 1.1rem;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--papel);
}
.paquete:hover { background: rgba(233, 230, 223, 0.05); }

.paquete-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.paquete-cabecera .titulo { font-size: 1rem; font-weight: 700; }
.paquete-cabecera .sello { font-size: 0.68rem; padding: 0.2rem 0.55rem; }

.paquete p.prosa { margin: 0.6rem 0 0; }

.paquete-pie {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.7rem;
}

/* --- Enlaces legales del pie de Ajustes --------------------------------- */
/* Eran dos `<a>` sueltos separados por un punto medio dentro de un párrafo:
   con el color rojo de enlace y nada más, se leían como texto suelto caído al
   final de la pantalla y no como las dos salidas que son. Se les da la misma
   caja que a un botón secundario —borde, mayúsculas, espaciado— para que
   pertenezcan visualmente al resto de la pantalla, sin llegar a competir con
   los botones de acción, que son los que llevan color. */

.enlaces-legales {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.enlaces-legales a, .enlaces-legales button.enlace {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--linea);
  color: var(--lapiz);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.enlaces-legales a:hover, .enlaces-legales button.enlace:hover {
  color: var(--papel);
  background: rgba(233, 230, 223, 0.07);
}

/* --- Ofertas (packs de paquetes) ---------------------------------------- */
/* Arriba de Colecciones, y deliberadamente más contenidas que las tarjetas de
   paquete: el borde ámbar las separa del catálogo sin llegar a llenarlas de
   fondo como a un `.paquete`, porque una oferta acompaña a la lista y no la
   encabeza.

   Son `button`, no `div`. Lo fueron durante un tiempo con el argumento de que
   sin pasarela un clic no llevaba a ningún sitio, y eso resultó ser falso: el
   clic lleva al detalle de la oferta —qué paquetes entran, cuántos casos son,
   cuánto se ahorra— y lo único que falta es el cobro. Un `div` con pinta de
   tarjeta al lado de tarjetas que sí se abren no se lee como contenido, se lee
   como algo roto. De ahí el reset de tipografía: hereda de `button, .boton`,
   que viene en mayúsculas y con espaciado de botón de acción. */

.pack {
  display: block;
  width: 100%;
  border: 1px solid var(--ambar);
  padding: 0.9rem 1.1rem;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--papel);
}
.pack-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.pack-cabecera .titulo { font-size: 1rem; font-weight: 700; }
.pack-cabecera .sello { font-size: 0.68rem; padding: 0.2rem 0.55rem; }
.pack p.prosa { margin: 0.6rem 0 0; }
.pack-incluye {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--lapiz);
}
.pack-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  margin-top: 0.7rem;
}
.pack-pie .ahorro { color: var(--verde); }

/* --- Vitrina de compra de un paquete de pago ---------------------------- */
/* Sin pasarela detrás todavía: ver `bloqueDeCompra` en app/web/js/app.js. El
   ámbar es el mismo que usa `.aviso`, porque comunica lo mismo —esto no se
   puede jugar aún— y no conviene que parezca un botón de acción resuelta. */

.compra {
  border: 1px solid var(--ambar);
  padding: 1rem 1.1rem;
}
.compra-precio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}
.compra-precio .precio {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ambar);
}
.compra button { margin: 0; }
.compra p.prosa {
  margin: 0.8rem 0 0;
  font-size: 0.85rem;
  color: var(--lapiz);
}
.compra p.prosa[hidden] { display: none; }

/* --- Clásicos agrupados por dificultad, con desbloqueo progresivo ------- */

.grupo-nivel { margin-bottom: 0.2rem; }
.cabecera-grupo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0.8rem;
  padding: 0 0.3rem 0.5rem;
}
.marca.bloqueado {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lapiz);
  white-space: nowrap;
}
/* Mismo tamaño que "bloqueado", pero en ámbar: es el mismo color que el
   sello "Próximamente" del paquete, para que se lea como la misma razón
   (el paquete no está a la venta) y no como progreso pendiente. */
.marca.proximamente {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
  white-space: nowrap;
}

.lista .caso.bloqueado {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  border-bottom: 1px solid var(--linea);
  padding: 0.85rem 0.3rem;
  color: var(--lapiz);
  opacity: 0.6;
}
.lista .caso.bloqueado .titulo { flex: 1; }

/* Un caso del archivo que necesita suscripción. Comparte el atenuado de
   arriba —es la misma idea: esto no lo puedes abrir— pero SÍ se pulsa, y
   lleva a la tienda, así que conserva el cursor de algo pulsable. Atenuarlo
   sin más lo dejaría pareciendo inerte. */
button.caso.bloqueado { cursor: pointer; }
button.caso.bloqueado:hover { opacity: 0.85; }
.caso .candado { font-size: 0.9rem; line-height: 1; }

/* --- El escaparate de la portada ----------------------------------------- */
/* Una sola tarjeta, debajo del caso del día y de la racha. Se parece a una
   ficha del expediente y no a un banner: lo que se vende aquí es más de lo
   mismo que ya se está jugando, y un anuncio con otro aspecto se leería como
   algo pegado desde fuera. El borde ámbar es lo único que la separa. */
.oferta {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--carpeta);
  border: 1px solid var(--ambar);
  padding: 0.9rem 1rem;
  cursor: pointer;
}

.oferta:hover { border-color: var(--rojo); }

.oferta .etiqueta { display: block; color: var(--ambar); }

/* Se deshace la mayúscula y el espaciado que `button` pone a todo: aquí no
   es un rótulo de un par de palabras, es una frase que hay que leer, y en
   versales una frase de dos líneas cuesta el doble. La etiqueta pequeña de
   arriba sí las conserva, que es donde funcionan. */
.oferta-titulo {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  margin: 0.35rem 0 0.3rem;
}

.oferta-detalle {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--lapiz);
}

/* La ficha de la suscripción en la tienda: es la que interesa que se mire
   primero, y el borde ámbar la separa de los paquetes sin cambiarle la
   forma. */
.ficha.destacada { border-color: var(--ambar); }

.caso-fila { display: flex; align-items: stretch; border-bottom: 1px solid var(--linea); }
.caso-fila .caso { flex: 1; border-bottom: 0; }
.caso-fila button.enlace { align-self: center; white-space: nowrap; }

/* --- Historial de un clásico --------------------------------------------- */

.fila-historial {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.75rem 0.3rem;
  border-bottom: 1px solid var(--linea);
}

/* --- Diálogo ------------------------------------------------------------ */

dialog {
  background: var(--carpeta);
  color: var(--papel);
  border: 1px solid var(--linea);
  padding: 0;
  max-width: 27rem;
  width: calc(100% - 2.5rem);
  font-family: var(--maquina);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
dialog .cuerpo { padding: 1.2rem; }
dialog h3 { margin: 0 0 0.8rem; font-size: 0.95rem; letter-spacing: 0.05em; }

.compartido {
  white-space: pre-wrap;
  background: var(--ficha);
  border: 1px solid var(--linea);
  padding: 0.8rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* Un latido discreto mientras se espera al LLM. Se anula para quien haya
   pedido menos movimiento: esto es decoración, no información. */
.pensando { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .pensando { animation: none; }
  .sello { transform: none; }
}

/* --- Pestañas del archivo ----------------------------------------------- */
/* Propias y no las del navegador: lo que se quiere es la pestaña de una
   carpeta de archivador, con su borde de un solo lado y su rótulo en
   mayúsculas, igual que el resto del vocabulario visual. */

.pestañas {
  display: flex;
  border-bottom: 1px solid var(--linea);
}

.pestaña {
  flex: 1;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--lapiz);
  padding: 0.6rem 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.pestaña:hover:not(.activa) { background: rgba(233, 230, 223, 0.05); color: var(--papel); }
.pestaña.activa { color: var(--papel); border-bottom-color: var(--rojo); }

/* --- Marcador (Cadena y duelos) ------------------------------------------ */

.marcador {
  display: flex;
  border: 1px solid var(--linea);
}

.marcador .dato {
  flex: 1;
  text-align: center;
  padding: 0.7rem 0.4rem;
  border-right: 1px solid var(--linea);
}

.marcador .dato:last-child { border-right: 0; }
.marcador .dato .cifra { font-size: 1.3rem; }

.fila-marcador {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--linea);
}

.fila-marcador:last-child { border-bottom: 0; }
.fila-marcador .titulo { flex: 1; font-size: 0.9rem; }
/* La fila de uno mismo, marcada: en una lista de cuatro apodos parecidos hay
   que poder localizarse de un vistazo sin leerlos todos. */
.fila-marcador.tuya { background: rgba(233, 230, 223, 0.05); }
.fila-marcador.tuya .titulo { color: var(--papel); font-weight: 700; }

select {
  font: inherit;
  width: 100%;
  background: var(--tinta);
  color: var(--papel);
  border: 1px solid var(--linea);
  padding: 0.6rem 0.7rem;
}

select:focus { outline: none; border-color: var(--lapiz); }

/* --- Deslizadores (Ajustes, volumen) -------------------------------------- */
/* Sin librería: el navegador ya trae un control de rango, solo hace falta
   quitarle la piel por defecto para que no desentone con el resto —esquinas
   rectas, acento rojo, nada que flote. */

.deslizador label {
  font-family: var(--sistema);
  font-size: 0.85rem;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 1px;
  background: var(--linea);
  margin: 0.9rem 0 0.4rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--papel);
  border: 1px solid var(--papel);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--papel);
  border: 1px solid var(--papel);
  border-radius: 0;
  cursor: pointer;
}

input[type="range"]:focus { outline: none; }
input[type="range"]:focus::-webkit-slider-thumb { background: var(--rojo); border-color: var(--rojo); }
input[type="range"]:focus::-moz-range-thumb { background: var(--rojo); border-color: var(--rojo); }

/* --- Volver, siempre a la vista ------------------------------------------- */
/* Dos sitios lo necesitan y por el mismo motivo: una pantalla larga en la que
   la salida (o la única acción que hay) queda fuera de la primera pantalla y
   no se sabe que está ahí abajo.

   `.volver-fijo` es el de las páginas legales sueltas —arriba a la izquierda,
   flotando sobre el texto—; `.pie-pegajoso` es la barra de la bienvenida, que
   mantiene "Empezar a jugar" pegado abajo mientras se leen las reglas. */

.volver-fijo {
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 10;
  background: var(--carpeta);
  border: 1px solid var(--linea);
  color: var(--papel);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.8rem;
}

.volver-fijo:hover { border-color: var(--papel); }

/* En pantalla ancha #raiz está centrado y sobra sitio a los lados, así que el
   enlace flota en el margen sin tapar nada. En un móvil no hay margen: pasa a
   ser una barra de ancho completo —sigue fija, que es lo que se pedía— y el
   documento arranca por debajo de ella en vez de por detrás. */
@media (max-width: 780px) {
  .volver-fijo {
    top: 0;
    left: 0;
    right: 0;
    border-width: 0 0 1px;
    padding: 0.7rem 1.25rem;
  }

  body.legal #raiz { padding-top: 3.6rem; }
}

.pie-pegajoso {
  position: sticky;
  bottom: 0;
  /* El degradado evita el corte seco: el texto se desvanece al acercarse a la
     barra en vez de quedar cortado a media línea. Llega a opaco ANTES del
     borde del botón —de ahí el 55%— porque los botones de esta cara son
     transparentes con borde, y sin eso el texto se leía por dentro. */
  background: linear-gradient(to bottom, transparent, var(--tinta) 55%);
  padding: 2rem 0 0.9rem;
  margin-top: 1rem;
}

/* El botón de la barra sí es opaco, por lo mismo. */
.pie-pegajoso button { background: var(--tinta); }
.pie-pegajoso button:hover:not(:disabled) { background: rgba(180, 52, 44, 0.14); }

/* --- Viento --------------------------------------------------------------- */
/* Hojas cayendo por los márgenes, a juego con el viento de la música de
   fondo. Solo donde #raiz deja margen de verdad —si no, taparían el
   expediente— y solo si no se ha pedido menos movimiento: es ambientación,
   igual que `.pensando`, no información.

   Rojo y no verde: el verde de esta cara es el del sello de "resuelto" —
   significa algo—, y una hoja de ese color se leía como un punto de estado
   suelto en vez de como decoración. El rojo es el acento de toda la
   interfaz (el sello, "destacado", el favicon), así que una hoja roja se
   reconoce como parte de la misma familia visual.

   El sprite es imagenes/hoja.png —un arce en pixel art ya recortado a su
   silueta y con su propio rojo, no un `fill` de aquí—. `image-rendering:
   pixelated` evita que el navegador lo suavice al escalarlo pequeñito, que
   es lo que lo delataría como una foto borrosa en vez de pixel art. Gira
   sobre sí misma al caer, aparte del balanceo lateral: son tres ritmos
   independientes (caída, vaivén, giro), de ahí tres animaciones en vez de
   una con más puntos. */

.viento {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 960px) {
  .viento { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .viento { display: none; }
}

.hoja {
  display: block;
  position: absolute;
  top: -5vh;
  image-rendering: pixelated;
  opacity: 0;
  animation-name: caer, mecer, girar;
  animation-timing-function: linear, ease-in-out, linear;
  animation-iteration-count: infinite, infinite, infinite;
  animation-direction: normal, alternate, normal;
}

/* Entre 18 y 28px, y algunas ya más cerca del centro (hasta 12%) que del
   borde puro, para que se noten sin tapar el expediente. */
/* Izquierda original (1 a 4) */
.hoja:nth-child(1) { left: 3%;    width: 25px; height: 25px; animation-duration: 23s, 3.4s, 2.6s; animation-delay: 0s,  0s,   0s; }
.hoja:nth-child(2) { left: 9%;    width: 23px; height: 23px; animation-duration: 28s, 4.3s, 3.8s; animation-delay: 7s,  0.4s, 0.6s; }
.hoja:nth-child(3) { left: 17%;  width: 20px; height: 20px; animation-duration: 19s, 3.1s, 3.1s; animation-delay: 13s, 0.9s, 0.2s; }
.hoja:nth-child(4) { left: 20%;   width: 19px; height: 19px; animation-duration: 26s, 3.9s, 3.3s; animation-delay: 9s,  0.5s, 0.9s; }

/* Derecha original (5 a 8) */
.hoja:nth-child(5) { right: 3%;   width: 20px; height: 20px; animation-duration: 25s, 3.8s, 4.4s; animation-delay: 4s,  0.2s, 1.1s; }
.hoja:nth-child(6) { right: 9%;   width: 30px; height: 30px; animation-duration: 21s, 4.6s, 2.9s; animation-delay: 10s, 0.7s, 0.4s; }
.hoja:nth-child(7) { right: 17%; width: 25px; height: 25px; animation-duration: 31s, 3.2s, 3.5s; animation-delay: 16s, 1.1s, 0.8s; }
.hoja:nth-child(8) { right: 20%;  width: 19px; height: 19px; animation-duration: 27s, 4.1s, 3.6s; animation-delay: 2s,  0.3s, 1.3s; }

/* +4 Izquierda (9 a 12) */
.hoja:nth-child(9)  { left: 6%;  width: 22px; height: 22px; animation-duration: 22s, 3.6s, 2.8s; animation-delay: 3s,  0.2s, 0.5s; }
.hoja:nth-child(10) { left: 11%;   width: 25px; height: 25px; animation-duration: 25s, 4.0s, 3.5s; animation-delay: 15s, 0.7s, 1.1s; }
.hoja:nth-child(11) { left: 15%;   width: 25px; height: 25px; animation-duration: 20s, 3.3s, 3.0s; animation-delay: 5s,  0.3s, 0.8s; }
.hoja:nth-child(12) { left: 18%;    width: 21px; height: 21px; animation-duration: 29s, 4.5s, 4.1s; animation-delay: 18s, 1.0s, 0.3s; }

/* +4 Derecha (13 a 16) */
.hoja:nth-child(13) { right: 6%;   width: 24px; height: 24px; animation-duration: 24s, 3.7s, 3.2s; animation-delay: 11s, 0.6s, 0.2s; }
.hoja:nth-child(14) { right: 11%;  width: 25px; height: 25px; animation-duration: 22s, 3.5s, 2.7s; animation-delay: 6s,  0.1s, 0.9s; }
.hoja:nth-child(15) { right: 15%;  width: 22px; height: 22px; animation-duration: 30s, 4.2s, 3.9s; animation-delay: 14s, 0.8s, 0.5s; }
.hoja:nth-child(16) { right: 18%; width: 26px; height: 26px; animation-duration: 18s, 3.0s, 3.4s; animation-delay: 1s,  0.4s, 1.0s; }

/* Cae de arriba abajo y se desvanece en las dos puntas: entra y sale del
   viento en vez de aparecer/desaparecer en seco. */
@keyframes caer {
  0%   { top: -5vh; opacity: 0; }
  8%   { opacity: 0.45; }
  92%  { opacity: 0.45; }
  100% { top: 105vh; opacity: 0; }
}

/* El balanceo lateral, aparte de la caída. */
@keyframes mecer {
  from { margin-left: -16px; }
  to   { margin-left: 16px; }
}

/* El giro sobre sí misma, aparte de los otros dos: usa la propiedad `rotate`
   suelta —no `transform`— precisamente para no pisar el `margin-left` de
   `mecer` ni tener que fundir las tres animaciones en una sola. */
@keyframes girar {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}