/* Tono: biblioteca clásica — caoba, cuero coñac, verde bosque, latón.
 * Segunda pasada de paleta (20-ago-2026), anclada a 2 fotos de referencia
 * reales que pasó Jovany (no descritas de memoria — leídas con Read y
 * muestreadas con k-means para no adivinar el matiz).
 *
 * ⚠️ Este cambio INVIERTE la luminosidad de la tarjeta: antes era
 * pergamino CLARO con texto oscuro; ahora es cuero OSCURO con texto
 * claro. Eso rompía todo el sistema de texto/latón viejo (medido, no
 * supuesto — ver commit): el latón dorado saturado NO alcanza 4.5:1
 * como texto chico sobre cuero en ningún tono que siga leyéndose
 * "dorado" (tope real ~4:1 antes de volverse casi blanco). Por eso:
 *   - el texto de contenido (título/meta/nota) usa --crema, no latón.
 *   - el latón vivo/saturado queda SOLO donde hay superficie madera
 *     (tabs, barra de progreso) — ahí sí tiene margen (4.56:1+).
 *   - sobre cuero, el latón se raciona a bordes/acentos NO-texto
 *     (necesitan 3:1, no 4.5:1) — nunca texto chico.
 *
 * El verde "visto" TAMBIÉN cambió de rol: como borde fino sobre cuero
 * (ambos oscuros) da 2.16:1 — invisible. En vez de forzarlo, se volvió
 * el FONDO COMPLETO de la tarjeta marcada (no un acento sutil) — con
 * crema encima da 10.69:1, de sobra, y es imposible de confundir con
 * una tarjeta pendiente. Coincide con lo que pidió Jovany ("se sigue
 * distinguiendo claramente") mejor que un borde tenue lo habría hecho.
 */

:root {
  --madera: #5c3a26; /* caoba/nogal cálido — antes casi-negro #3e2a1e */

  --cuero: #8b5a3c; /* base de tarjeta pendiente — el texto SIEMPRE vive aquí o más oscuro */
  --cuero-realce: #915f3d; /* tope SEGURO del degradado (t=0.2 hacia el cuero claro pedido) — 4.59:1 con crema, no más claro que esto detrás de texto */
  --cuero-sombra: #6b4530; /* sombra del degradado, más oscuro = más contraste, sin riesgo */
  --cuero-inset: #6f4831; /* fondo hundido del textarea de nota */
  --cuero-decorativo: #a9713f; /* el cuero-claro pedido (~#A9713F): SOLO glow/hover, nunca detrás de texto — decorativo puro, como la veta de madera del fondo */

  --crema: #f7ecd6; /* texto principal — reemplaza a --pergamino/--ink como color de TEXTO (el rol se invirtió) */
  --crema-tenue: #eee2cc; /* meta/año/nota — el límite real contra --cuero es 4.52:1, no bajar más */

  --laton-vivo: #cfab36; /* dorado saturado — SOLO sobre --madera (tabs, barra progreso): 4.56:1 */
  --laton-cuero: #d9bc5e; /* dorado atenuado — SOLO borde/acento no-texto sobre --cuero: 3.12:1, nunca texto */

  --verde-visto: #24382c; /* verde bosque profundo — FONDO completo de la tarjeta marcada, no un acento */
  --verde-visto-claro: #345645; /* realce del degradado de la tarjeta marcada — 6.99:1 con crema, de sobra */

  --ink-boton: #2e1c0c; /* texto oscuro para el botón relleno de latón — 8.78:1 */

  /* ── P1 · ESCALA TIPOGRÁFICA ────────────────────────────────────────
     La auditoría contó OCHO tamaños en una sola ficha, tres de ellos
     separados por menos de un píxel (12,8 / 13,12 / 13,6): eso no es
     jerarquía, es ruido. Quedan cinco niveles, uno por función real.
     La identidad no se toca: siguen siendo Cormorant y Lora. */
  --t-titulo:  1.2rem;   /* 19,2 — el nombre de la obra              */
  --t-accion:  0.9rem;   /* 14,4 — el botón de estado: mismo cuerpo  */
  --t-lectura: 0.9rem;   /*        que la prosa, distinto PESO       */
  --t-meta:    0.82rem;  /* 13,1 — año, director, controles        */
  --t-micro:   0.72rem;  /* 11,5 — versalitas y numeración         */

  /* ── P1 · GRAMÁTICA DE FOCO ─────────────────────────────────────────
     Un solo foco para toda la ficha. Antes había dos declarados y dos
     controles sin ninguno, así que el teclado veía tres cosas distintas
     en la misma tarjeta. */
  --foco-color: rgba(217, 188, 94, 0.9);
  --foco-grosor: 2px;

  /* ── P1 · FAMILIA DE CONTORNOS ──────────────────────────────────────
     El latón vuelve a ser lo que el proyecto dijo que sería: BORDE, no
     texto chico. Tres pesos para tres jerarquías. */
  --contorno-fuerte: rgba(217, 188, 94, 0.55); /* botón de estado pendiente */
  --contorno-medio:  rgba(217, 188, 94, 0.45); /* Curiosidades             */
  --contorno-tenue:  rgba(217, 188, 94, 0.30); /* bandera cerrada          */

  /* ── V1 · COMPOSICIÓN DE LA FICHA ───────────────────────────────────
     Medido en la versión autoridad: el póster ocupaba 84px de los 154
     del cuerpo (55 %) y dejaba 70px muertos debajo. La referencia que
     trajo Jovany mantiene su miniatura cerca del 70 % del alto de la
     fila, y por eso sus listas se leen como filas y no como piezas
     sueltas. Se adopta la PROPORCIÓN, no su miniatura. */
  --poster-an: 72px;
  --poster-al: 108px;   /* 2:3, la proporción de cartel de siempre */
  --ficha-gap: 1rem;    /* separación póster ↔ cuerpo, ahora nombrada
                           para que el expediente pueda descontarla */

  /* ── V1 · UNA SOLA FAMILIA DE MOVIMIENTO ────────────────────────────
     Había tres duraciones sueltas (0,15 / 0,18 / 0,2) y sólo `ease`.
     Nada decorativo entra aquí: son las mismas propiedades de antes
     —fondo, borde, opacidad, rotación— con un tempo único. */
  --mov-rapido: 0.15s;
  --mov-suave: 0.2s;
  --mov-curva: cubic-bezier(0.2, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--crema);
  font-family: "Lora", "Iowan Old Style", Georgia, serif;
  line-height: 1.4;
  /* Textura real (foto, no procedural) — "Bark Brown 01" de Poly
     Haven, CC0, 2K JPG, ver assets/LEEME.md.
     Capa de gradación de color (20-ago, 3ª pasada): #963e22 (sienna/
     cobre, centro del rango 8B4226–A0522D pedido) con
     background-blend-mode: multiply al 50% — mismo mecanismo que la
     2ª pasada (#5a3a24), solo cambia el matiz hacia más rojizo/cobrizo.
     Multiply sigue conservando el relieve/grano (oscurece cada canal
     proporcional a lo que ya había, no aplana).
     Medido antes de aplicar: la zona MÁS CLARA real de la corteza
     (~#ab9569) con este grado al 50% da 4.92:1 para --crema — pasa
     con margen, aunque más ajustado que el grado anterior (5.37:1)
     porque el cobre tiene más luminosidad que el marrón madera viejo.
     .cabecera sigue con su propio tinte más fuerte (ver abajo). */
  background:
    linear-gradient(rgba(150, 62, 34, 0.5), rgba(150, 62, 34, 0.5)),
    url("../assets/fondo-corteza.jpg");
  background-blend-mode: multiply, normal;
  background-repeat: repeat;
  background-size: 480px 480px;
}

/* ============================================================
   B1 · NAVEGACIÓN DEL ARCHIVO
   Reemplaza al panel superior y a la tira horizontal de 13 píldoras.
   Medido en la versión anterior: el panel ocupaba 170.8px (27% del
   alto de pantalla) y la tira 672px visibles de 1654px de contenido
   — 982px de desborde, 5 de 13 colecciones alcanzables sin arrastrar.

   La cabecera deja de tener caja: se apoya directo sobre la madera y
   se cierra con el mismo filete de latón que ya usa el resto del
   sistema. Lo que no se toca más de una vez por sesión no lleva panel.
   ============================================================ */

.cabecera {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.6rem 1.5rem 0.9rem;
  border-bottom: 1px solid rgba(207, 171, 54, 0.28);
  /* I18N-1 · ancla para el selector de idioma, que va posicionado arriba a
     la derecha. Se eligió posicionarlo en vez de reordenar la cabecera en un
     flex: así el membrete, el título y el progreso conservan exactamente el
     flujo que ya estaba aprobado, y el control se limita a ocupar el hueco
     que sobra a la derecha del membrete. */
  position: relative;
  /* sin background: el texto se apoya en la madera. La legibilidad la
     da el propio color de la crema (--crema sobre --madera), no un velo. */
}

/* "Memoria 451" baja de titular a membrete: sigue presente, deja de
   competir con el contenido. Antes el nombre del archivo y el título de
   una película compartían familia, color y casi el mismo cuerpo. */
.membrete {
  display: block;
  font-family: "Lora", Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  margin-bottom: 0.45rem;
}
.membrete-cifra {
  font-variant-numeric: normal; /* cifras humanas: es un nombre, no un folio */
}

/* El nombre de la colección ES el control que abre el índice. Sin caja,
   sin píldora, sin relleno: un título que se puede tocar. */
.abrir-estante {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  max-width: 100%;
}

.nombre-coleccion {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--crema);
  border-bottom: 1px solid transparent;
}

.abrir-estante:hover .nombre-coleccion,
.abrir-estante:focus-visible .nombre-coleccion {
  border-bottom-color: rgba(207, 171, 54, 0.55);
}

/* La señal de que esto se abre. En la revisión en iPhone el filete solo
   resultó demasiado sutil, así que ahora es un chevron — pequeño, de
   latón, girado cuando el índice está abierto. Nada de "MENÚ", nada de
   píldora: sigue leyéndose como título de archivo. */
.chevron {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--laton-vivo);
  border-bottom: 1.5px solid var(--laton-vivo);
  transform: translateY(-0.18rem) rotate(45deg);
  transition: transform var(--mov-suave) var(--mov-curva);
}
body.estante-abierto .chevron {
  transform: translateY(0.05rem) rotate(-135deg);
}

/* Progreso: una línea de texto. La barra codificaba exactamente el mismo
   número que este contador — dos representaciones del mismo dato — y era
   el único elemento sin carácter de archivo de toda la pantalla.
   El CÁLCULO no cambió: sigue siendo vistos sobre ítems cargados. */
.progreso {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--crema-tenue);
  font-variant-numeric: normal;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- EL ESTANTE ---------- */

.velo-estante {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 11, 6, 0.72);
  opacity: 0;
  transition: opacity var(--mov-suave) var(--mov-curva);
}
body.estante-abierto .velo-estante { opacity: 1; }

/* Escritorio: panel contenido bajo la cabecera. No pantalla completa —
   el catálogo se sigue viendo detrás como contexto. */
.estante {
  position: fixed;
  z-index: 41;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(560px, calc(100vw - 2rem));
  max-height: min(78vh, 720px);
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(155deg, var(--cuero-realce) 0%, var(--cuero) 45%, var(--cuero-sombra) 100%);
  border: 1px solid var(--laton-cuero);
  border-radius: 14px; /* mismo radio que la tarjeta */
  box-shadow: 0 18px 44px rgba(8, 3, 1, 0.55);
  padding: 0.9rem 0 0.5rem;
  opacity: 0;
  transition: opacity var(--mov-suave) var(--mov-curva), transform var(--mov-suave) var(--mov-curva);
}
body.estante-abierto .estante {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.estante-rotulo {
  display: block;
  padding: 0 1.3rem 0.7rem;
  font-family: "Lora", Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  border-bottom: 1px solid rgba(247, 236, 214, 0.18);
  margin-bottom: 0.35rem;
}

/* Renglones, no píldoras: número de orden, nombre y recuento. Es un
   tejuelo de catálogo. */
.entrada-estante,
.entrada-archivo {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  padding: 0.75rem 1.3rem;
  font-family: "Lora", Georgia, serif;
  min-height: 48px; /* área táctil */
}
.entrada-estante + .entrada-estante,
.entrada-estante + .entrada-archivo {
  border-top: 1px solid rgba(247, 236, 214, 0.14);
}
.entrada-estante:hover,
.entrada-archivo:hover { background: rgba(247, 236, 214, 0.05); }
.entrada-estante:focus-visible,
.entrada-archivo:focus-visible {
  outline: 2px solid var(--laton-vivo);
  outline-offset: -2px;
}

.entrada-cifra {
  flex: none;
  width: 2.2em;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
  color: rgba(247, 236, 214, 0.55);
}

.entrada-nombre {
  flex: 1;
  min-width: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--crema-tenue);
}

.entrada-cuenta {
  flex: none;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--crema-tenue);
  opacity: 0.85;
  font-variant-numeric: normal;
}

/* La activa se marca con canto de latón y crema plena, NO con relleno
   dorado: en este sistema el latón relleno significa "acción primaria"
   (el botón de visto), y un color con dos significados pierde los dos. */
.entrada-estante.activa,
.entrada-archivo.activa {
  border-left-color: var(--laton-vivo);
  background: rgba(247, 236, 214, 0.06);
}
.entrada-estante.activa .entrada-nombre,
.entrada-archivo.activa .entrada-nombre { color: var(--crema); }
.entrada-estante.activa .entrada-cifra { color: var(--laton-vivo); }

/* Móvil: el mismo índice, anclado abajo como hoja.
   El padding inferior suma env(safe-area-inset-bottom) para que la barra
   de Safari no tape la colección 13 ni el final del scroll. */
@media (max-width: 560px) {
  .estante {
    top: auto;
    bottom: 0;
    left: 0;
    transform: translateY(14px);
    width: 100%;
    max-width: none;
    max-height: 82vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    padding-bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  }
  body.estante-abierto .estante { transform: translateY(0); }
  .entrada-estante,
  .entrada-archivo { padding: 0.85rem 1.1rem; }
  .estante-rotulo { padding: 0 1.1rem 0.7rem; }
}


#contador-progreso {
  font-size: 0.85rem;
  /* A diferencia del tab inactivo (decorativo), esto SÍ es la única
     forma de leer el progreso. Subido de nuevo (65% -> 70%) al pasar
     de madera lisa a la cabecera con textura: contra la zona más
     clara real de la foto, 65% daba 4.24:1 (raspaba) — 70% da 4.54:1. */
  color: rgba(247, 236, 214, 0.7);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem;
}

.lista-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tarjeta {
  display: flex;
  gap: var(--ficha-gap);
  /* El realce (--cuero-realce) es el TOPE seguro para texto — no usar
     --cuero-decorativo (el cuero-claro que pidió Jovany) acá: detrás
     de texto cae a 3.5:1, ver comentario en :root. */
  background: linear-gradient(155deg, var(--cuero-realce) 0%, var(--cuero) 45%, var(--cuero-sombra) 100%);
  border: 1px solid var(--laton-cuero); /* canto dorado — 3.12:1, no-texto, decorativo */
  /* Radio de la casa (SISTEMA_DE_DISENO.md): contenedor ≥ botón ≥ campo.
     Memoria 451 elige su propio punto de la rampa (10·14·16·18 en el
     resto de la casa) — 14px, mismo rango que Rose Red. */
  border-radius: 14px;
  /* V1 · aire. 0,85rem = 13,6px era el punto más apretado de la ficha:
     el contenido llegaba a 15px del canto. La referencia respira
     visiblemente más dentro de cada fila. 1,05rem = 16,8px. */
  padding: 1.05rem;
  cursor: grab;
  color: var(--crema);
  /* Sombra más marcada que antes: cuero y madera son familias de color
     cercanas (1.74:1 entre sí, contra 10.7:1 que había con pergamino
     claro) — la separación entre tarjeta y página ahora depende más de
     la sombra que del contraste de matiz. */
  box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), inset 0 1px 0 rgba(255, 224, 176, 0.12);
  /* La tarjeta es SUPERFICIE DE LECTURA, no un control: el gesto táctil
     pertenece a la página, no a JS.
     Aquí había `touch-action: none` para que el reorder por Pointer
     Events recibiera el arrastre. Medido en iPhone (y reproducido con
     emulación táctil): mataba el scroll en las 5 zonas del cuerpo —
     fondo, título, texto, portada y folio, 0px de desplazamiento.
     `none` se aplica a TODO el subárbol: los hijos reportan
     `touch-action: auto` en el estilo calculado y aun así quedan
     bloqueados, porque el navegador intersecta con los ancestros. Por
     eso leer el CSS del hijo no basta; hay que medir el gesto.
     Sin declaración, la tarjeta hereda el comportamiento normal de
     contenido: scroll y pinch-zoom. El reorder sobrevive con ratón
     (ver onPointerDown en app.js). */
  /* Marcar visto ya NO anima (Tarea C, 20-ago): antes 900ms
     brasa→ceniza→verde: ahora un cambio simple e inmediato — 0.15s
     alcanza para que no sea un corte duro, sin ser una transición
     "dramática". */
  transition: border-color var(--mov-rapido) var(--mov-curva), background var(--mov-rapido) var(--mov-curva), box-shadow var(--mov-suave) var(--mov-curva);
}

/* Ya no hay excepción que declarar: la regla que devolvía el touch a
   `.boton-visto` y al textarea existía SOLO para escapar del
   `touch-action: none` de arriba. Además su segundo selector estaba
   muerto desde D2 — apuntaba a `.caja-nota textarea`, y esa clase pasó
   a llamarse `.guarda .nota-editor`, así que el textarea de La Guarda
   llevaba tiempo sin poder desplazarse con el dedo. */

/* Glow ámbar sutil al pasar el mouse — luz de lámpara, no efecto de
   videojuego: blur grande, opacidad baja. Puramente atmosférico (no es
   el único portador de ningún estado, por eso no necesita 3:1). */
.tarjeta:hover {
  box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), 0 0 22px rgba(209, 137, 73, 0.18),
    inset 0 1px 0 rgba(255, 224, 176, 0.12);
}

.tarjeta.visto {
  border-color: var(--verde-visto-claro);
  /* Ya no es un acento sutil: la tarjeta marcada cambia de "libro
     encuadernado en cuero" a "encuadernado en piel verde" — el
     contraste real (10.69:1 con --crema) vive en este cambio de fondo
     completo, no en el borde. Es lo que hace que "se distinga
     claramente", como pidió Jovany. */
  background: linear-gradient(155deg, var(--verde-visto-claro) 0%, var(--verde-visto) 55%, #1c2e23 100%);
}

.tarjeta.arrastrando {
  opacity: 0.55;
}

.portada {
  flex: none;
  width: var(--poster-an);
  height: var(--poster-al);
  border-radius: 8px; /* radio "campo" — ≤ tarjeta(14px) y ≤ botón(10px), regla relacional de la casa */
  overflow: hidden;
  background: var(--madera);
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.portada-vacia {
  color: var(--laton-vivo); /* sigue sobre --madera (portada nunca cambia de fondo) — 4.56:1 */
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border: 1px dashed rgba(207, 171, 54, 0.4);
}

.cuerpo {
  flex: 1;
  min-width: 0;
}

.encabezado {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.numero-ranking {
  /* Antes latón — sobre --cuero ningún dorado reconocible llega a
     4.5:1 (tope real ~4:1 antes de volverse casi blanco, ver :root).
     crema-tenue es la solución honesta, no un latón que raspa. */
  color: var(--crema-tenue);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-meta);
  /* Patrón de CC (SISTEMA_DE_DISENO.md §2.2): chips/badges SIEMPRE en
     píldora (999px), sin excepción — se adapta la forma, no el color. */
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
}

.titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: var(--t-titulo);
  color: var(--crema);
}

.anio {
  color: var(--crema-tenue);
  font-size: var(--t-meta);
  font-style: italic;
}

.meta {
  color: var(--crema-tenue);
  font-size: var(--t-meta);
  margin-top: 0.15rem;
  font-style: italic;
}

/* Tarea F (20-ago): título en las 3 variantes con bandera — solo se
   renderiza si app.js encontró al menos un campo regional verificado
   (ver titulosConBandera). Mismo crema-tenue que .meta — verificado
   sobre --cuero, la superficie más exigente de las dos posibles. */
.titulos-banderas {
  color: var(--crema-tenue);
  font-size: 0.78rem;
  margin-top: 0.3rem;
}

/* T1-B · TÍTULOS TERRITORIALES.
   Una línea por territorio, en columna, en vez de todo en una sola
   fila separada por "·" — a tres variantes esa fila ya no se leía.
   La bandera vive en una columna con 2.6em de PISO (no de techo):
   con una bandera todos los títulos quedan alineados en vertical;
   con dos o tres agrupadas la columna crece antes que partir el
   título en dos renglones (medido en el prototipo T1: la línea
   combinada pasaba de 142px a 179px por el corte). */
.territorios {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.territorio {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--crema-tenue);
  font-size: 0.78rem;
  line-height: 1.35;
}
.territorio .marca {
  flex: none;
  min-width: 2.6em;
  text-align: left;
  font-size: 0.85rem;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.territorio .cadena {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* El territorio de ORIGEN es el ancla factual, no una traducción: se
   marca con un punto de latón. No se cambia el color del texto — el
   contraste de --crema-tenue sobre --cuero está medido al límite. */
.territorio.origen .marca::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--laton-cuero);
  vertical-align: middle;
  margin-left: 0.18rem;
}

/* ═══════════════════════════════════════════════════════════════════
   BX · EL COMBATE (boxeo, Modo A compacto)
   Portado tal cual del prototipo BX-0B, que es el diseño aprobado.
   Cada peleador es un bloque INDIVISIBLE: `nowrap` garantiza que la
   bandera nunca se separe de su persona — si el nombre no cabe, rompe
   la línea, no el par. Medido a 390px: cada peleador ocupa su propia
   línea y los nombres completos entran sin recortes.
   ═══════════════════════════════════════════════════════════════════ */
.combate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.45rem;
  margin-top: 0.1rem;
}
.peleador {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  white-space: nowrap;
}
/* Las banderas de UNA persona forman un grupo indivisible: no se parten
   entre sí ni se separan del nombre. Dos banderas aquí significan dos
   nacionalidades de un mismo peleador, nunca dos peleadores. */
.peleador .banderas-peleador {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  flex: none;
  white-space: nowrap;
}
.peleador .bandera-peleador {
  font-size: 0.95rem;
  line-height: 1;
  flex: none;
}
.peleador .nombre-peleador {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--crema);
  white-space: normal;
}
.combate .vs {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--crema-tenue);
  opacity: 0.85;
  padding: 0 0.05rem;
}
/* El numeral de la saga en su PROPIA píldora: se lee como "el
   enfrentamiento número N", no como parte de un apellido. El legacy lo
   pegaba al segundo peleador ("Taylor I"), que era el defecto. */
.combate .saga {
  flex: none;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink-boton);
  background: var(--laton-cuero);
  border-radius: 999px;
  padding: 0.02rem 0.45rem;
  align-self: center;
}
/* BX-1B · se retiró `.sin-bandera`. Con 3 nacionalidades realmente
   pendientes entre las 50, el rótulo "sin verificar" habría aparecido en
   la tarjeta: la política es que la ausencia de bandera ES el dato, sin
   marca de relleno. La incertidumbre vive en nacionalidad.estado. */
/* El nombre histórico del combate: SIN bandera —no pertenece a ningún
   territorio— y subordinado al combate. */
.nombre-pelea {
  margin-top: 0.32rem;
  font-size: 0.86rem;
  font-style: italic;
  color: var(--crema-tenue);
  overflow-wrap: anywhere;
}

/* P1 · RITMO. Medido antes: encabezado→meta 2px, meta→acciones 10px,
   acciones→Curiosidades 10px. Todo equidistante, así que la ficha no
   decía dónde acaba la obra y dónde empiezas tú. Ahora el salto grande
   marca el cambio de asunto —de la película a lo que tú hiciste con
   ella— y Curiosidades queda más cerca, apoyada en su propio contorno
   para separarse. */
.acciones {
  /* V1 · el salto que separa LA OBRA de LO TUYO se ensancha; el que va
     de lo tuyo al archivo se estrecha. Es la única herramienta que usa
     la referencia para agrupar: espacio, no filetes. Añadir una línea
     aquí serían cien líneas nuevas al bajar por la lista. */
  margin-top: 1.25rem;
  /* D2 · C1 — la fila de acciones pasa a flex para alojar la acción
     secundaria "Escribir una nota" junto al botón de estado. Con wrap: a
     partir de cierto ancho el enlace baja de línea, y eso está bien
     (queda más claro que apretarlo). No se toca el botón de estado. */
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.boton-visto {
  /* P1 · EL CAMBIO DE MAYOR IMPACTO DE ESTA FASE.
   *
   * Antes: relleno de latón, 1rem bold, 181×48. Medido en la auditoría,
   * era el objeto más ruidoso de la ficha —siete veces el área del
   * control de Curiosidades— y en móvil ocupaba el 75 % del ancho útil.
   * Repetido cien veces convertía el archivo en una columna amarilla.
   *
   * Ahora el RELLENO SIGNIFICA ESTADO, no invitación:
   *   pendiente → contorno. Sigue siendo el control principal (es el
   *               más grande y el único con caja completa), pero deja
   *               de gritar.
   *   visto     → relleno verde. El color llega cuando algo pasó.
   *
   * No se esconde: 44px táctiles, crema plena (4,94:1) y borde de latón
   * al 55 %, el más fuerte de la familia de contornos. */
  background: transparent;
  border: 1px solid var(--contorno-fuerte);
  color: var(--crema);
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border-radius: 8px; /* ≤ tarjeta (14px), y ahora hermano de Curiosidades (6px) */
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-accion);
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background var(--mov-rapido) var(--mov-curva), border-color var(--mov-rapido) var(--mov-curva), filter var(--mov-rapido) var(--mov-curva);
}

/* Vista: aquí SÍ hay relleno, porque ya no invita a nada — informa. */
.tarjeta.visto .boton-visto {
  background: var(--verde-visto-claro);
  border-color: var(--verde-visto-claro);
  color: var(--crema); /* 6.99:1 sobre el relleno verde */
  font-weight: 700;
}

.boton-visto:hover {
  background: rgba(217, 188, 94, 0.12);
  border-color: var(--laton-cuero);
}

.tarjeta.visto .boton-visto:hover {
  background: var(--verde-visto-claro);
  filter: brightness(1.08);
}

/* ============================================================
   D2 · LA GUARDA
   Reemplaza a .caja-nota, que era un <textarea> permanente colgado de
   `estado === "visto"`. Aquellas reglas se van con el elemento: ya no
   hay nada en el DOM que las use.
   ============================================================ */

/* --- C1 · acción secundaria, sin bloque de Guarda -------------
   Enlace de texto, no una segunda píldora: el botón de estado sigue
   siendo la acción principal y este no compite con él. Un enlace de
   ~104px cabe junto al botón donde una píldora de ~138px no cabría. */
/* P1 · La Guarda NO recibe contorno, y es deliberado: es la única acción
   personal de la ficha, y su forma de enlace es lo que la separa de la
   bandera (contexto cultural) y de Curiosidades (contenido editorial).
   Antes eran gemelas —mismo cuerpo, mismo color, misma altura, sólo
   cambiaba el color de una línea de 1px—. Ahora la diferencia está en la
   FORMA, que es la única que se lee de un vistazo. Sólo se afina el
   contraste. */
.accion-nota,
.enlace-nota {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--crema);          /* 4,94:1 — antes crema-tenue, justo en el suelo */
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-meta);
  border-bottom: 1px solid rgba(247, 236, 214, 0.42);
  line-height: 1.4;
}

.accion-nota:hover,
.enlace-nota:hover {
  color: var(--crema);
  border-bottom-color: var(--crema);
}

/* Área táctil de 48px sin ocupar 48px de layout — el glifo mide ~18px y
   el ::after lo extiende. Mismo umbral que .boton-visto. */
.accion-nota::after,
.enlace-nota::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* ============================================================
   P1 · GRAMÁTICA DE FOCO
   Un solo foco para toda la ficha. Antes .origen y .curiosidades-control
   declaraban el suyo —distinto entre sí— y .boton-visto y .accion-nota
   no tenían ninguno: el teclado veía tres cosas diferentes en la misma
   tarjeta. Ahora los cinco controles comparten grosor, color y offset.
   ============================================================ */
.boton-visto:focus-visible,
.accion-nota:focus-visible,
.enlace-nota:focus-visible,
.boton-guardar-nota:focus-visible,
.curiosidades-control:focus-visible,
.expediente-control:focus-visible,
.exp-mas:focus-visible,
.curiosidades-cerrar:focus-visible,
.origen:not(.origen-inerte):focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 3px;
  border-radius: 6px;
}

/* fecha_visto acompaña al ESTADO, no a la memoria. Vive en la fila de
   acciones y ocupa su propia línea (flex-basis 100%). */
.fecha-visto {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--crema-tenue);
  font-style: italic;
}

/* ============================================================
   C1 · CURIOSIDADES
   Un expediente que se abre dentro de la propia ficha. No es una
   tarjeta dentro de una tarjeta: sin fondo propio, sin sombra, sin
   radio — sólo un filete y aire, como una sección de un legajo.
   ============================================================ */

.curiosidades {
  margin-top: 0.5rem;
}

/* P1 · CONTROL EDITORIAL CON CONTORNO.
 *
 * Antes era un enlace subrayado: mismo cuerpo, mismo color y misma
 * altura que «Escribir una nota». Medido, eran gemelos —sólo cambiaba
 * el color de una línea de 1px— y por eso el contenido editorial y la
 * acción personal se leían igual.
 *
 * Ahora tiene caja propia: contorno de latón medio, fondo apenas
 * hundido, ancho POR CONTENIDO. No es una píldora de 999px —ese radio
 * ya lo usa el #NN y repetirlo lo abarataría— sino un rectángulo de
 * esquina suave, del tamaño de lo que dice. */
.curiosidades-control,
.expediente-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 0, 0, 0.10);
  border: 1px solid var(--contorno-medio);
  border-radius: 6px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  color: var(--crema);          /* 4,94:1 — antes crema-tenue, en el suelo de 4,52 */
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-meta);
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-align: left;
  transition: background var(--mov-rapido) var(--mov-curva), border-color var(--mov-rapido) var(--mov-curva);
}

.curiosidades-control:hover,
.expediente-control:hover {
  background: rgba(0, 0, 0, 0.16);
  border-color: var(--laton-cuero);
}

/* Abierto se ve abierto SIN tener que leer un galón de 6,5px: el fondo
   baja un grado y el contorno sube. Con paneles de hasta 2986px, la
   rotación del galón sola no era señal suficiente. */
.curiosidades-control[aria-expanded="true"],
.expediente-control[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(217, 188, 94, 0.8);
}

/* El galón gira al abrir: el estado se ve, no sólo se anuncia por ARIA. */
.curiosidades-control::before,
.expediente-control::before {
  content: "›";
  display: inline-block;
  /* Antes latón: 3,12:1 a 13px. Es un glifo de TEXTO, no un borde, así
     que le toca el umbral de 4,5. El latón se queda donde le
     corresponde según la propia doctrina del proyecto: en el contorno. */
  color: var(--crema);
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--mov-rapido) var(--mov-curva);
}

.curiosidades-control[aria-expanded="true"]::before,
.expediente-control[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

/* Área táctil de 48px sin ocupar 48px de layout — mismo recurso que
   .accion-nota, para que los dos controles secundarios se toquen igual. */
.curiosidades-control::after,
.expediente-control::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* Abierto. Sin max-height y sin overflow: la página crece, el expediente
   no se lee por una rendija. */
/* P1 · HERMANO DEL TERRITORIAL, NO GEMELO.
 *
 * Antes era sólo un filete: sin fondo, se leía como «más tarjeta» en
 * vez de como sección insertada. El territorial ya resolvía esto con un
 * fondo hundido, y de paso su fondo más oscuro subía el contraste de la
 * crema de 4,94 a 6,05.
 *
 * Se adopta la MISMA lógica y se cambia la FORMA: el territorial es una
 * lista corta y lleva filete a la izquierda; éste es una lectura larga y
 * lleva filete arriba, con la caja completa. Misma familia, distinta
 * silueta. */
.curiosidades-panel,
.expediente-panel {
  margin-top: 0.7rem;
  /* V1 · el expediente sale de la columna de texto y ocupa la ficha
     entera. Dos medidas lo pedían: la línea de lectura estaba en 58
     caracteres —por debajo de la horquilla editorial de 60-75— y
     debajo del póster quedaban 70px muertos. Un solo movimiento
     arregla las dos. El CONTROL se queda en la columna, alineado con
     las demás acciones; lo que se ensancha es el contenido, que es
     como la referencia usa sus áreas grandes. */
  margin-left: calc(-1 * (var(--poster-an) + var(--ficha-gap)));
  background: rgba(0, 0, 0, 0.16);
  border-top: 1px solid rgba(217, 188, 94, 0.35);
  border-radius: 6px;
  /* El fondo deja sitio al área táctil del cierre: su ::after mide 44px
     sobre una caja de ~26, así que sobresale ~9px por abajo. Con 0.15rem
     el panel desbordaba 5px y abría scroll interno — que es justo lo que
     este componente tiene prohibido.
     V1: el padding sube con el resto de la ficha; el extra de abajo se
     conserva por la misma razón de siempre. */
  padding: 0.9rem 1rem 1rem;
}

.curiosidades-rotulo {
  margin: 0 0 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Antes latón a 10,88px: 3,12:1. La excusa era «rótulo, no texto de
     lectura», pero un rótulo se lee igual. Crema-tenue sobre el fondo
     hundido nuevo pasa holgado. */
  color: var(--crema-tenue);
  font-weight: 700;
}

.curiosidades-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* La numeración va en su propia columna, no sangrada dentro del párrafo:
   así el texto forma un bloque de lectura recto, como una columna de
   catálogo. `minmax(0, 1fr)` para que un texto largo pueda encoger en vez
   de desbordar la tarjeta a 390px. */
.curiosidades-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.7rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(247, 236, 214, 0.1);
}

/* El primer filete sobraría: ya lo pone .curiosidades-panel. */
.curiosidades-lista li:first-child {
  border-top: none;
  padding-top: 0;
}

.curiosidades-numero {
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  /* Antes latón a 11,5px: 3,12:1. La numeración de un expediente hay
     que poder leerla. */
  color: var(--crema-tenue);
  line-height: 1.7; /* alinea con la primera línea del texto */
  letter-spacing: 0.06em;
}

/* P1 · el cierre al pie. Misma familia que el control de arriba —Lora,
   contorno de latón, radio 6— pero más callado: aquí no hay nada que
   descubrir, sólo una salida. Se alinea a la derecha para que no se
   confunda con una curiosidad más de la lista. */
.curiosidades-cerrar {
  display: block;
  margin: 0.2rem 0 0 auto;
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid var(--contorno-tenue);
  border-radius: 6px;
  color: var(--crema-tenue);
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
  transition: border-color var(--mov-rapido) var(--mov-curva), color var(--mov-rapido) var(--mov-curva);
}

.curiosidades-cerrar::before {
  content: "↑";
  margin-right: 0.35rem;
  color: var(--crema-tenue);
}

.curiosidades-cerrar:hover {
  color: var(--crema);
  border-color: var(--contorno-medio);
}

/* Área táctil de 44px sin engordar la caja: el mismo recurso del resto. */
.curiosidades-cerrar::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

.curiosidades-texto {
  margin: 0;
  font-size: var(--t-lectura);
  line-height: 1.65; /* prosa: lo mismo que .guarda .memoria */
  color: var(--crema);
  /* Palabras muy largas (títulos originales, nombres) no deben abrir
     scroll horizontal en un móvil de 390px. */
  overflow-wrap: anywhere;
}

/* --- el bloque de La Guarda ---------------------------------- */
.guarda {
  margin-top: 0.6rem;
  border-top: 1px solid rgba(247, 236, 214, 0.18);
  padding-top: 0.6rem;
}

/* --- modo edición: aquí SÍ es un campo, y debe parecerlo ------ */
.guarda .nota-editor {
  display: block;
  width: 100%;
  min-height: 5rem;
  /* Verde oscuro: la tarjeta puede estar en cuero o en verde según el
     estado, y este fondo da --crema de sobra en los dos casos. */
  background: #1c2e23;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 8px; /* radio "campo" — misma jerarquía que .portada */
  color: var(--crema);
  font-family: "Lora", Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 0.6rem;
  resize: vertical;
}

.guarda .nota-editor::placeholder {
  color: var(--crema-tenue);
  opacity: 0.7;
}

.guarda .nota-editor:focus {
  outline: 2px solid var(--laton-cuero);
  outline-offset: 1px;
}

.barra-guarda {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
}

.boton-guardar-nota {
  background: var(--laton-cuero);
  border: none;
  color: var(--ink-boton);
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border-radius: 10px;
  font-family: "Lora", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.boton-guardar-nota:hover {
  filter: brightness(1.08);
}

/* --- modo lectura: contenido, no formulario -------------------
   Sin borde, sin fondo, sin radio. El texto se apoya directo en la
   tarjeta igual que el título, y sube de los 0.85rem del textarea
   viejo a tamaño de lectura con interlineado de prosa. */
.guarda .memoria {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--crema);
  white-space: pre-wrap;
}

.colofon {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.colofon .relleno {
  flex: 1;
}

/* fecha_nota: acompaña, no compite. Y si la nota es histórica y no tiene
   fecha propia, este elemento sencillamente no se crea (ver app.js). */
.fecha-nota {
  font-size: 0.72rem;
  color: var(--crema-tenue);
  font-style: italic;
}


/* ============================================================
   I18N-1 · SELECTOR DE IDIOMA (arriba a la derecha)

   Dos letras y una barra. Sin banderas: en esta app una bandera significa
   territorio de un título, y reutilizarla para el idioma de la interfaz
   mezclaría dos cosas que costó trabajo separar.

   Se alinea con el membrete —la línea de arriba— y no con el título de la
   colección, que puede tener dos renglones. Así no baila.
   ============================================================ */
.selector-idioma {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Lora", Georgia, serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1;
}

.opcion-idioma {
  background: transparent;
  border: none;
  padding: 0.25rem 0.1rem;
  margin: 0;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: var(--crema-tenue);
  border-bottom: 1px solid transparent;
  /* área táctil cómoda sin agrandar la caja visible */
  min-height: 32px;
  min-width: 28px;
}

/* El idioma activo se marca con el latón de la casa, no con negrita: la
   negrita movería el ancho y haría bailar la barra separadora. */
.opcion-idioma.activa {
  /* --laton-vivo es el dorado aprobado para TEXTO sobre la madera (4.56:1).
     --laton-cuero no vale aquí: está declarado como borde, nunca texto. */
  color: var(--laton-vivo);
  border-bottom-color: rgba(207, 171, 54, 0.55);
}

.opcion-idioma:hover {
  color: var(--crema);
}

.opcion-idioma:focus-visible {
  outline: 2px solid rgba(207, 171, 54, 0.8);
  outline-offset: 2px;
  border-radius: 2px;
}

.separador-idioma {
  color: var(--crema-tenue);
  opacity: 0.45;
}

/* A 390 px el membrete y el selector comparten renglón sin tocarse; se
   arrima un poco al borde para dejarle aire al membrete. */
@media (max-width: 430px) {
  .selector-idioma {
    top: 1.35rem;
    right: 1.1rem;
  }
}

/* ============================================================
   T1-D · BANDERA DE ORIGEN + HISTORIAL TERRITORIAL

   La tarjeta cerrada vuelve a una línea: bandera de origen, título de
   lectura, año. La tira de 4-5 territorios que antes vivía debajo del
   título ahora sólo aparece cuando se pide, dentro de la propia tarjeta.
   ============================================================ */
/* P1 · La bandera cerrada no comunicaba que se podía tocar: sin fondo,
   sin borde, y con hover como única pista —que en móvil no existe—. El
   recuadro sólo aparecía DESPUÉS de abrirla, o sea cuando ya la habías
   descubierto. Ahora lleva contorno desde el principio: el más tenue de
   la familia, porque es el control más discreto de los tres. */
.origen {
  background: transparent;
  border: 1px solid var(--contorno-tenue);
  border-radius: 6px;
  padding: 0;
  margin: 0 0.15rem 0 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  /* La bandera es pequeña; el área táctil no. El comentario original decía
     44px pero el código ponía 34: la intención y la implementación no
     coincidían, y a 390px se notaba. Se deja la caja visible en 34 —
     agrandarla desalinearía el título— y se extiende el área con ::after,
     el mismo recurso que ya usan .accion-nota y .curiosidades-control. */
  position: relative;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
}

.origen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* El inerte no se toca: extenderle el área invitaría a pulsar algo que no
   responde. */
.origen-inerte::after {
  content: none;
}

/* La inerte no se puede abrir: darle contorno sería prometer algo que
   no cumple. */
.origen-inerte {
  cursor: default;
  border-color: transparent;
}

.origen:not(.origen-inerte):hover {
  background: rgba(207, 171, 54, 0.14);
}

/* El chevron del estante ya enseña "esto se abre"; aquí basta con que la
   bandera activa quede marcada, sin añadir otro icono a la línea del título. */
.origen[aria-expanded="true"] {
  background: rgba(207, 171, 54, 0.2);
}

.historial {
  margin: 0.5rem 0 0.15rem;
  padding: 0.55rem 0.7rem;
  border-left: 2px solid rgba(207, 171, 54, 0.35);
  background: rgba(0, 0, 0, 0.13);
  border-radius: 0 6px 6px 0;
  display: grid;
  gap: 0.4rem;
}

.historial-fila {
  display: grid;
  /* T1-E · la primera columna deja de ser fija: un renglón puede llevar hasta
     TRES banderas cuando varios territorios comparten título, y con 1.4rem se
     partían en dos líneas (medido: 22px de caja para 2 banderas, alto 41px en
     vez de 28). `auto` la deja crecer sólo lo que necesite; el título sigue
     quedándose con todo lo que sobra y haciendo wrap dentro de su columna. */
  /* minmax(0,·) en las dos últimas: sin ese 0 la columna se niega a bajar de
     su contenido mínimo y la fila se sale de la tarjeta. Medido a 390px con
     tres territorios juntos: la fila llegaba a 420px con la tarjeta en 366. */
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr);
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  font-size: 0.85rem;
  line-height: 1.35;
}

.historial-bandera {
  font-size: 0.95rem;
  white-space: nowrap;   /* un grupo de banderas es una unidad, no se parte */
}

.historial-lugar {
  color: var(--crema-tenue);
  font-family: "Lora", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.historial-titulo {
  color: var(--crema);
  overflow-wrap: anywhere;   /* títulos largos parten dentro de su columna */
}

/* TERR-CB-2 · una fila que declara ESTADO en vez de título. Se distingue del
   título de verdad a simple vista —cursiva y atenuada— porque si se leyera
   igual, «No localizado tras investigación» parecería el nombre con el que se
   estrenó la película. Es una aclaración de la interfaz, no un dato histórico:
   el mismo tratamiento que ya tiene el contexto de una entrada territorial. */
.historial-titulo.historial-sin-titulo {
  color: var(--crema-tenue);
  font-style: italic;
}

/* HIST-1 · el contexto de una entrada territorial. Ocupa la TERCERA columna
   entera en su propio renglón —no se cuelga al lado del título— porque a
   390px un título largo más una coletilla en la misma línea sacaba la fila
   de la tarjeta. Va en cursiva y atenuado: es una aclaración, no un título. */
/* La celda del título ocupa la tercera columna y guarda dentro el título y,
   si lo hay, su contexto. `min-width: 0` es obligatorio: sin él la columna se
   niega a bajar de su contenido mínimo y la fila se sale de la tarjeta. */
.historial-celda {
  /* `display: block` no es adorno: como span en línea, la celda no se dejaba
     estrechar por su columna y la fila se salía 24px de la tarjeta a 390px.
     Medido, no supuesto. */
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.historial-contexto {
  /* Hermano del título dentro de la celda, en su propio renglón. */
  display: block;
  margin-top: 0.1rem;
  color: var(--crema-tenue);
  font-family: "Lora", Georgia, serif;
  font-size: 0.74rem;
  font-style: italic;
  overflow-wrap: anywhere;
}

/* Las entradas adicionales de un mismo territorio se sangran un pelo: dicen
   «esto sigue siendo España», sin repetir la bandera a otro tamaño ni
   inventar un segundo acordeón. */
.historial-fila[data-entrada="adicional"] .historial-bandera,
.historial-fila[data-entrada="adicional"] .historial-lugar {
  opacity: 0.72;
}

/* P1 · El territorio de origen se seguía distinguiendo SÓLO por color, y
   ese color —latón vivo a 11,5px— daba 3,22:1. Ahora la distinción no
   depende del color: la lleva un filete de latón a la izquierda de la
   fila (es borde, le basta 3:1) más el peso de la versalita. El texto
   vuelve a crema y se lee. */
.historial-fila.es-origen .historial-lugar {
  color: var(--crema);
  font-weight: 600;
}

.historial-fila.es-origen {
  border-left: 2px solid var(--contorno-medio);
  padding-left: 0.4rem;
  margin-left: -0.4rem;
}

/* ============================================================
   P1 · ENCABEZADO A 390 PX
   Medido antes: con flex y wrap, en #20 el año caía solo a la segunda
   línea y en #22 la bandera se quedaba huérfana arriba con el #NN
   mientras el título bajaba entero. El encabezado parecía accidental.

   Con `display: block` y los hijos en línea, la cabecera fluye como una
   frase: #NN 🇮🇹 Título 1963. Si no cabe, parte donde partiría un texto
   —nunca dejando un elemento solo— y el año se queda pegado al título.
   No se oculta nada, no se trunca nada, no se reduce el título.
   ============================================================ */
@media (max-width: 430px) {
  /* V1 · el móvil no hereda la proporción de escritorio a ciegas. A
     390px la tarjeta mide 342 y la columna de texto ya estaba en 241px
     justos: el botón de estado y «Escribir una nota» caben en un
     renglón por 4px. Un póster de 72 se los comía.
     MEDIDO, no supuesto: con 64px la fila de acciones pasó de 44px a
     71px —se partió en dos renglones en las siete películas del
     muestreo—. Así que en móvil el póster se queda como estaba y el
     aire se saca de donde no cuesta ancho útil: el padding sube un
     poco y la separación póster↔texto baja un poco. La proporción de
     la referencia se adopta en escritorio, donde hay sitio; a 390px
     no cabe, y eso se declara en vez de forzarlo. */
  .tarjeta {
    --poster-an: 56px;
    --poster-al: 84px;
    /* Q1 · 0,8 → 0,7rem. Son 1,6px que no se ven y que le dan al renglón
       de acciones el mismo margen que ya tenía el estado pendiente. Con
       sólo 1px de holgura el arreglo dependía del redondeo de la fuente;
       con 3 aguanta. */
    --ficha-gap: 0.7rem;
    padding: 0.95rem;
  }

  .encabezado {
    display: block;
    /* 1.9 dejaba el encabezado de dos líneas demasiado aireado: la caja
       de la bandera (34px) inflaba el renglón. Se baja el interlineado y
       se encoge la caja VISIBLE de la bandera a 28 —su ::after mantiene
       los 44 táctiles— para que el título de dos líneas respire sin
       separarse de sí mismo. */
    line-height: 1.6;
  }

  .encabezado .origen {
    min-width: 28px;
    min-height: 28px;
  }

  .encabezado > * {
    vertical-align: middle;
  }

  .numero-ranking,
  .titulo,
  .anio {
    display: inline;
  }

  .encabezado .origen {
    display: inline-flex;
    margin: 0 0.3rem 0 0.15rem;
  }

  .encabezado .anio {
    margin-left: 0.35rem;
    white-space: nowrap;   /* el año no se parte de su título */
  }

  /* El botón de estado dejaba a «Escribir una nota» sin sitio: 181px de
     241 útiles. Con el contorno ya es más estrecho; aquí se ajusta el
     resto para que los dos quepan en un renglón sin bajar de 44px. */
  /* Sin esto el botón y «Escribir una nota» no caben en un renglón: 144
     + 9,6 + 105 no entran en los 241px útiles. Se recorta el aire
     lateral, NUNCA la altura: los 44px táctiles se mantienen. */
  /* Q1 · el estado VISTO rompía el renglón por UN píxel. Medido a 390px:
     pendiente 126 + 7,2 + 105 = 238 de 241 útiles (sobran 3); visto
     130 + 7,2 + 105 = 242 (falta 1), porque «✓ Visto — deshacer» es 4px
     más ancho que «Marcar como visto». Se recupera el píxel donde no
     cuesta nada —aire lateral y separación—, NUNCA en la altura: los 44
     táctiles y el cuerpo de letra se quedan como están. */
  .boton-visto {
    padding: 0.5rem 0.25rem;
    font-size: var(--t-meta);
    letter-spacing: 0;
  }

  .acciones {
    gap: 0.4rem;
  }

  .historial-fila {
    /* a 390px la columna del país y la del título no caben en un renglón
       cómodo: el título baja debajo y conserva la sangría de las banderas. */
    grid-template-columns: auto minmax(0, 1fr);
  }
  /* La sangría la lleva la CELDA, que es el hijo de la rejilla. Cuando el
     título era hijo directo, esta regla le apuntaba a él; al envolverlo,
     el selector se quedó apuntando a un elemento que ya no está en la
     rejilla y la fila se salía 25px de la tarjeta a 390px. Se vio midiendo
     el render: el CSS estaba bien escrito, sólo señalaba al sitio de antes. */
  .historial-celda {
    grid-column: 2;
  }
  .historial-lugar {
    /* aquí SÍ puede envolver: «Estados Unidos y México y España» en una sola
       línea empujaba la fila fuera de la tarjeta. Las banderas siguen sin
       partirse, que es lo que tiene que leerse de un golpe. */
    white-space: normal;
  }
}

/* ============================================================
   BX4 · LA PORTADA POR CAPAS
   El acceso editorial vive sobre la propia portada y no en la
   fila de acciones, que a 390px ya iba con 3–7px de holgura.
   El panel se abre INLINE dentro de la tarjeta, como el
   historial: nunca un modal, que en un móvil taparía la lista.
   ============================================================ */
.portada-editable {
  cursor: pointer;
  position: relative;
}
.portada-editable:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 3px;
}
/* Marca discreta de que la portada se puede abrir: una esquina apenas
   insinuada, del mismo latón que el resto de la tarjeta. No es un
   botón — un «SUBIR PÓSTER» en las 50 tarjetas convertiría una
   herramienta de archivo en la llamada principal. */
.portada-editable::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(217, 188, 94, 0.75);
  border-bottom: 2px solid rgba(217, 188, 94, 0.75);
  border-bottom-right-radius: 2px;
  pointer-events: none;
}

.portada-panel {
  margin-top: 0.7rem;
  padding: 0.7rem 0.8rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--contorno-suave, rgba(217, 188, 94, 0.35));
  border-radius: 8px; /* radio "campo", igual que .portada */
}
.portada-origen {
  margin: 0;
  font-size: var(--t-meta);
  color: var(--crema-tenue);
}
.portada-origen-etq {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  opacity: 0.85;
}
.portada-origen-valor {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--laton-vivo);
}
.portada-debajo {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--crema-tenue);
  opacity: 0.8;
}
.portada-acciones {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
/* El <label> ES el control: el <input type=file> nativo no se puede
   estilar y su texto lo pone el sistema operativo, en su idioma. */
.portada-poner,
.portada-quitar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-accion);
  color: var(--crema);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(217, 188, 94, 0.55);
  padding: 0 0 2px;
  cursor: pointer;
}
.portada-poner:focus-within,
.portada-quitar:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 3px;
}
.portada-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.portada-error {
  margin: 0.6rem 0 0;
  font-size: var(--t-meta);
  color: var(--crema);
  border-left: 2px solid var(--laton-vivo);
  padding-left: 0.55rem;
}

/* ═══ STORAGE-1 · ESTADO DE ARCHIVO ════════════════════════════════
   Sin color ni tipografía nuevos: verde el que ya significa «visto» y
   latón el que ya significa «atención». Los tres estados se distinguen
   además por la FORMA del punto —relleno, hueco, sin punto— para que no
   dependan de ver el color. */
.media-estado {
  margin: 0.55rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
.media-estado::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.media-archivada { color: var(--verde-visto-claro); }
.media-archivada::before { background: var(--verde-visto); }
.media-pendiente { color: var(--laton-vivo); }
.media-pendiente::before { border: 1px solid var(--laton-vivo); }   /* hueco: aún no ha llegado */
.media-solo_local::before { background: var(--contorno-medio); }

.media-sesion {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.media-clave {
  flex: 1 1 11rem;
  min-height: 44px;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-accion);
  color: var(--crema);
  background: var(--cuero-inset);
  border: 1px solid var(--contorno-medio);
  border-radius: 3px;
  padding: 0 0.6rem;
}
.media-clave:focus-visible,
.media-entrar:focus-visible,
.media-reintentar:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 3px;
}
.media-entrar,
.media-reintentar {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-accion);
  color: var(--crema);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(217, 188, 94, 0.55);
  padding: 0 0 2px;
  cursor: pointer;
}
.media-aviso {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--t-micro);
  color: var(--crema-tenue);
}


/* ═══════════════════════════════════════════════════════════════════
   MX1 · EXPEDIENTE DEL BOXEADOR
   ═══════════════════════════════════════════════════════════════════
   Sin colores, tipografías ni radios nuevos: todo sale de las variables
   que ya rigen la ficha. El control, el panel y el cierre COMPARTEN los
   selectores de Curiosidades (arriba) en lugar de duplicarlos, para que
   un cambio de identidad los mueva a la vez y no se separen con el
   tiempo. Lo único propio es la retícula interna del expediente, que
   Curiosidades no necesita porque su contenido es una lista y éste es
   un dossier con apartados.                                          */

/* La bandera es presentación, no control: no se toca ni recibe foco. */
.boxeador-bandera {
  font-size: var(--t-titulo);
  line-height: 1;
  margin-right: 0.15rem;
}

/* Ocupa el sitio del nombre de la pelea en BX: la línea que impide leer
   el «#1» como un hecho cerrado. */
.boxeador-confianza {
  font-size: var(--t-meta);
  color: var(--crema-tenue);
  font-style: italic;
  margin-top: 0.15rem;
}

.exp-bloque { margin: 0 0 1.1rem; }
.exp-bloque:last-of-type { margin-bottom: 0.6rem; }

.exp-titulo {
  margin: 0 0 0.45rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  font-weight: 700;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(217, 188, 94, 0.22);
}
.exp-bloque:first-of-type .exp-titulo { border-top: 0; padding-top: 0; }

.exp-subtitulo {
  margin: 0.7rem 0 0.35rem;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  font-weight: 700;
}

.exp-texto {
  margin: 0 0 0.5rem;
  font-size: var(--t-lectura);
  line-height: 1.62;
  color: var(--crema);
}
.exp-sintesis { font-style: italic; }

/* El aviso metodológico se lee menos alto que el dato, pero se lee: no
   baja de --crema-tenue, que es el suelo de contraste de esta ficha. */
.exp-aviso {
  font-size: var(--t-meta);
  color: var(--crema-tenue);
  font-style: italic;
  margin-top: 0.4rem;
}

.exp-lista { margin: 0.2rem 0 0; padding-left: 1.05rem; }
.exp-lista li {
  font-size: var(--t-lectura);
  line-height: 1.6;
  color: var(--crema);
  margin-bottom: 0.35rem;
}

/* Etiqueta y valor en dos columnas. `minmax(0, 1fr)` para que un valor
   largo encoja en vez de desbordar la tarjeta a 390 px. */
.exp-fila {
  display: grid;
  grid-template-columns: minmax(7.5rem, auto) minmax(0, 1fr);
  gap: 0.15rem 0.8rem;
  padding: 0.28rem 0;
  align-items: baseline;
}
.exp-etiqueta {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
.exp-valor {
  font-size: var(--t-lectura);
  line-height: 1.5;
  color: var(--crema);
  min-width: 0;
  overflow-wrap: anywhere;
}
.exp-puesto { font-variant-numeric: tabular-nums; }

/* Un ND se ve DISTINTO de un dato, y no se esconde: dice «se buscó y no
   se encontró», que es información. */
.exp-nd {
  color: var(--crema-tenue);
  font-style: italic;
  letter-spacing: 0.04em;
}

/* Perfil compacto: cinco indicadores que envuelven solos. Nada de tabla,
   que a 390 px no cabe. */
.exp-perfil {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.6rem;
}
.exp-indicador {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--contorno-tenue);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
}
.exp-indicador-nombre {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
.exp-indicador-puesto {
  font-size: var(--t-lectura);
  color: var(--crema);
  font-variant-numeric: tabular-nums;
}

.exp-once { margin-top: 0.3rem; }

.exp-victorias { margin: 0; padding-left: 1.15rem; }
.exp-victorias li { margin-bottom: 0.65rem; }
.exp-rival {
  font-size: var(--t-lectura);
  color: var(--crema);
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.exp-grado {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--contorno-tenue);
  border-radius: 4px;
  font-size: var(--t-micro);
  color: var(--crema-tenue);
  letter-spacing: 0.04em;
}
.exp-top10 { margin: 0.2rem 0 0; padding-left: 1.15rem; }
.exp-top10 li {
  font-size: var(--t-lectura);
  line-height: 1.55;
  color: var(--crema);
  margin-bottom: 0.3rem;
}

.exp-derrota { margin-bottom: 0.7rem; }
.exp-controversia {
  margin-bottom: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid rgba(217, 188, 94, 0.28);
}

/* El plegable de dentro: mismo lenguaje que el control de arriba pero un
   escalón más discreto — aquí no hay que descubrir nada, sólo profundizar. */
.exp-plegable { margin-top: 0.5rem; }
.exp-mas {
  background: none;
  border: 1px solid var(--contorno-tenue);
  border-radius: 6px;
  color: var(--crema-tenue);
  font-family: inherit;
  font-size: var(--t-meta);
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  position: relative;
}
.exp-mas::before {
  content: "＋";
  margin-right: 0.4rem;
  font-size: 0.8em;
}
.exp-mas[aria-expanded="true"]::before { content: "－"; }
.exp-mas:hover { border-color: var(--contorno-medio); color: var(--crema); }
/* Área táctil de 44 px sin engordar la caja visible, igual que hace el
   cierre de Curiosidades. */
.exp-mas::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  transform: translateY(-50%);
  height: 44px;
}
.exp-plegado { margin-top: 0.6rem; }

@media (max-width: 430px) {
  /* A 390 px la etiqueta y el valor no caben en dos columnas sin partir
     palabras: se apilan. MEDIDO, no supuesto. */
  .exp-fila { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
  .exp-perfil { gap: 0.35rem 0.4rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   UX-DROP · soltar una imagen encima de la portada
   ═══════════════════════════════════════════════════════════════════
   Señal clara y mínima: el mismo latón que ya marca el foco, sin
   colores nuevos y sin mover un píxel del layout. Se usa `outline`, no
   `border`, precisamente para que la caja NO cambie de tamaño mientras
   se arrastra: un borde que empuja la tarjeta bajo el cursor hace que
   el objetivo se mueva justo cuando hay que acertarle.              */
.portada.portada-soltar {
  outline: 2px dashed var(--foco-color);
  outline-offset: 2px;
  position: relative;
}

.portada-soltar-aviso {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.3rem;
  /* Tapa la imagen sólo mientras dura el arrastre, y lo justo para que
     el texto se lea sobre cualquier portada. */
  background: rgba(46, 28, 12, 0.82);
  color: var(--crema);
  font-size: var(--t-micro);
  line-height: 1.25;
  letter-spacing: 0.02em;
  border-radius: inherit;
  pointer-events: none;   /* no puede robarle el drop a su propio padre */
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSO-1 · SUBNAVEGACIÓN DE BOXEO Y ORDEN PERSONAL
   ═══════════════════════════════════════════════════════════════════
   Sin colores nuevos: latón para lo activo, crema-tenue para lo que
   espera, y los mismos radios y cuerpos tipográficos de la ficha.   */

#sub-boxeo { margin: 0 0 1rem; }

.sub-boxeo-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

.sub-boxeo-boton {
  background: none;
  border: 1px solid var(--contorno-tenue);
  border-radius: 999px;
  color: var(--crema-tenue);
  font-family: inherit;
  font-size: var(--t-meta);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.sub-boxeo-boton:hover { border-color: var(--contorno-medio); color: var(--crema); }
.sub-boxeo-boton.activo {
  border-color: var(--laton-cuero);
  color: var(--crema);
  background: rgba(0, 0, 0, 0.18);
  font-weight: 600;
}
/* Área táctil de 44 px sin engordar la píldora, igual que el resto. */
.sub-boxeo-boton::after {
  content: "";
  position: absolute;
  inset: 50% -2px auto;
  transform: translateY(-50%);
  height: 44px;
}
.sub-boxeo-boton:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}

/* La segunda fila es una decisión DENTRO de la primera: se sangra para
   que se lea como subordinada y no como otra navegación al mismo nivel. */
.sub-boxeo-modos { padding-left: 0.9rem; }
.sub-boxeo-modos .sub-boxeo-boton { font-size: var(--t-micro); padding: 0.42rem 0.75rem; }

.sub-boxeo-nota {
  margin: 0 0 0.5rem 0.9rem;
  font-size: var(--t-meta);
  color: var(--crema-tenue);
  font-style: italic;
  max-width: 46ch;
}

.sub-boxeo-restaurar {
  margin-left: 0.9rem;
  background: none;
  border: 1px solid var(--contorno-medio);
  border-radius: 6px;
  color: var(--crema-tenue);
  font-family: inherit;
  font-size: var(--t-meta);
  padding: 0.45rem 0.8rem;
  cursor: pointer;
  position: relative;
}
.sub-boxeo-restaurar:hover { color: var(--crema); border-color: var(--laton-cuero); }
.sub-boxeo-restaurar::after {
  content: ""; position: absolute; inset: 50% 0 auto;
  transform: translateY(-50%); height: 44px;
}
.sub-boxeo-restaurar:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}

/* ── el bloque de orden dentro de la tarjeta ── */
.ranking-orden {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(217, 188, 94, 0.18);
}

/* Los dos puestos conviven a la vista: es el punto de toda la función.
   Mover a alguien a tu #1 no borra que M451 lo pone #7 — al contrario,
   la comparación es lo interesante. */
.ranking-oficial {
  font-size: var(--t-micro);
  color: var(--crema-tenue);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.asa-ranking {
  background: none;
  border: 1px solid var(--contorno-tenue);
  border-radius: 6px;
  color: var(--crema-tenue);
  font-size: 1rem;
  line-height: 1;
  padding: 0.5rem 0.6rem;
  cursor: grab;
  /* Sin esto el dedo hace scroll en vez de arrastrar: el asa reclama el
     gesto para sí y sólo para sí. La tarjeta entera NO lleva esto, que
     es justo lo que mantiene vivo el scroll de la lista. */
  touch-action: none;
  position: relative;
}
.asa-ranking:hover { color: var(--crema); border-color: var(--contorno-medio); }
.asa-ranking:active { cursor: grabbing; }
.asa-ranking:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}
/* El asa se ve pequeña y refinada, pero se agarra grande. El ::after
   anterior daba 44 px de ALTO y sólo 40 de ancho —el icono más 4 px por
   lado—, así que el objetivo real nunca llegó a 44×44. Ahora el área
   invisible se centra y se fija en 44×44 pase lo que pase con el icono. */
.asa-ranking::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

@media (max-width: 430px) {
  /* A 390 px la nota a 46ch se sale: se deja fluir al ancho disponible. */
  .sub-boxeo-nota { max-width: 100%; margin-left: 0; }
  .sub-boxeo-modos { padding-left: 0; }
  .sub-boxeo-restaurar { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   MI TOP 5 · EL PANEL DE LA ELECCIÓN
   ═══════════════════════════════════════════════════════════════════
   El Top 20 es el protagonista y tiene que seguir siéndolo: es la
   investigación. Mi Top 5 es un instrumento al lado, y un instrumento que
   pesa igual que la obra deja de leerse como instrumento.

   De ahí las tres decisiones de esta hoja:
   · la reja da 70/30, no 50/50;
   · la tarjeta personal es una FILA, no una tarjeta;
   · no entra ningún color nuevo. El latón ya significa «esto está vivo»
     en el resto de la app, así que el destino del arrastre se dice en
     latón y pertenece a la familia, en vez de estrenar un acento que
     sólo existiría aquí.                                              */

.ranking-zonas {
  display: grid;
  /* MEDIDO, no elegido a ojo: el nombre más largo del Top 20 —«José
     "Mantequilla" Nápoles»— cabe en una línea de la columna oficial con
     esta proporción, y la fila personal aún admite número + miniatura +
     nombre + puesto M451 + dos controles sin partirse. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 1.6rem;
  align-items: start;
}

.zona { min-width: 0; }   /* sin esto, una tarjeta ancha desborda la reja */

/* ═══ FASE A · MI TOP 5 ACOMPAÑA EL RECORRIDO ═══
   El defecto que invalidó la fase anterior: la columna del Top 20 mide
   4956 px y el panel personal vivía en los primeros 355. MEDIDO: el 88%
   del recorrido de scroll no tenía un solo hueco a la vista, así que de
   los 20 boxeadores sólo 3 alcanzaban el panel arrastrando. El gesto
   principal existía en el código y era inalcanzable en la pantalla.

   `sticky` y no `fixed`: fixed saca al panel del flujo, se le queda
   encima al pie y hay que inventarle un hueco a mano. Sticky se queda
   dentro de su celda de la reja —que mide lo que mide la columna
   oficial— y se detiene solo cuando esa celda termina. No tapa nada
   porque nunca sale de su columna.

   `align-items: start` en la reja ya estaba puesto y es lo que hace que
   esto funcione: sin él la celda mediría lo mismo que el panel y no
   habría recorrido dentro del cual pegarse. */
@media (min-width: 901px) {
  .zona-mia {
    position: sticky;
    /* La cabecera NO es sticky —se va con el scroll—, así que basta el
       aire de la propia página. */
    top: 1rem;
    align-self: start;
    /* Si algún día el panel creciera más que la pantalla, se desplaza por
       dentro en vez de dejar puestos inalcanzables debajo del borde. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

.zona-cabecera {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(217, 188, 94, 0.28);
}

.zona-titulo {
  margin: 0;
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crema);
  font-weight: 700;
}

.zona-cuenta {
  font-size: var(--t-micro);
  color: var(--crema-tenue);
  font-variant-numeric: tabular-nums;
}

.lista-zona { list-style: none; margin: 0; padding: 0; }

/* El contenedor personal ya NO lleva borde punteado. Lo llevaba cuando la
   lista podía estar vacía y hacía falta señalar «aquí se suelta»; ahora
   los cinco huecos están siempre y son ellos los que lo dicen. Un marco
   alrededor de cinco marcos es un marco de más. */
.lista-mia {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: 0;
}

/* La mesa de comparación. `main` sigue siendo la columna de lectura de
   720px en todo lo demás; aquí se ensancha porque hay dos columnas que
   mirar a la vez. El tope sale de la cuenta: la fila personal necesita
   ~280px para que «José "Mantequilla" Nápoles» quepa en dos líneas junto
   a su número y sus dos controles; 280 / 0,30 = 933, y 1060 deja holgura
   sin llegar a línea de lectura larga en la columna oficial. */
body.vista-ranking main { max-width: 1060px; }

/* ═══ LAS IMÁGENES NO SE ARRASTRAN SOLAS ═══
   Una <img> es arrastrable de forma nativa. Al entrar las 20 fotos
   canónicas, agarrar una ficha por su portada dejó de funcionar: el
   navegador disparaba su propio `dragstart` sobre la imagen y mataba el
   gesto con `pointercancel`. MEDIDO: la traza era
   `pointerdown → pointermove → dragstart → pointercancel`, y no colocaba.

   Con la portada vacía el defecto no existía —no había imagen que
   arrastrar—, así que apareció justo al añadir las fotos. Se desactiva el
   arrastre nativo de la imagen; el de archivos SOBRE la portada no se
   toca, porque ése es un `drop`, no un `dragstart`. */
li.tarjeta img {
  -webkit-user-drag: none;
  user-select: none;
}

/* La ficha oficial ENTERA es el asidero. El cursor lo anuncia y la
   selección de texto se desactiva: arrastrar sobre un párrafo seleccionaba
   la frase en vez de mover al boxeador. */
@media (min-width: 901px) {
  body.vista-ranking li.tarjeta[data-zona="oficial"] { cursor: grab; user-select: none; }
  body.vista-ranking li.tarjeta[data-zona="oficial"]:active { cursor: grabbing; }
  body.vista-ranking li.tarjeta[data-zona="oficial"] textarea { user-select: text; }
}

/* ── EL HUECO VACÍO ────────────────────────────────────────────────
   Existe siempre. Es la mitad de la explicación del panel: cinco sitios
   numerados dicen qué se espera sin una sola frase de instrucciones. */
/* SHARINGAN, en el preview real: con `rgba(0,0,0,0.08)` de fondo el hueco
   no tenía superficie. El texto caía sobre la corteza y las vetas claras
   de la madera lo cruzaban por detrás; el punteado a 0,3 de opacidad
   tampoco se veía. Era lo único de la app sosteniendo contenido sin
   apoyarse en algo.

   El arreglo no es «oscurecerlo un poco», es decir bien qué es cada cosa:
   la ficha del Top 20 es un objeto ELEVADO —cuero, sombra hacia fuera— y
   el hueco es un REBAJE, un sitio vaciado en la madera donde algo cabe.
   De ahí la sombra hacia DENTRO. Y de paso resuelve la jerarquía sin
   pelearse con ella: un rebaje nunca compite con lo que sobresale. */
.top5-hueco {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px dashed rgba(217, 188, 94, 0.45);
  border-radius: 8px;
  background: rgba(26, 14, 6, 0.55);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  min-height: 3rem;
}

.top5-hueco-texto {
  font-size: var(--t-micro);
  color: var(--crema-tenue);
  font-style: italic;
  line-height: 1.35;
}

/* ── LA FILA OCUPADA ───────────────────────────────────────────────
   Fila, no tarjeta: sin portada grande, sin acciones, sin expediente
   propio. Toda ella es el disparador para abrir el expediente OFICIAL. */
/* La fila ocupada SÍ es un objeto —hay algo dentro— pero un objeto menor:
   el mismo cuero de la ficha oficial, plano y sin gradiente, con una
   sombra corta. Se reconoce de la misma familia y no compite. */
.tarjeta-top5 {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--laton-cuero);
  border-radius: 8px;
  background: var(--cuero);
  box-shadow: 0 2px 6px rgba(10, 5, 2, 0.4);
  cursor: pointer;
  min-height: 3rem;
}
.tarjeta-top5:hover { border-color: var(--laton-vivo); }

/* El número es la respuesta del panel a su propia pregunta —«¿quién va en
   tu #2?»— así que es lo más grande que hay aquí. Se probó a 13,6px
   (variante A) y el panel dejaba de leerse como cinco puestos para
   leerse como una lista cualquiera; a 27,2px (variante C) el número
   competía con los nombres del Top 20. 1,4rem es el punto donde los
   cinco se cuentan de un vistazo sin gritar. */
.top5-num {
  flex: none;
  min-width: 1.8rem;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--laton-cuero);
  font-variant-numeric: tabular-nums;
}
.top5-hueco .top5-num { color: rgba(217, 188, 94, 0.62); }

/* La miniatura de la fila. Pequeña a propósito: la fila sigue siendo un
   instrumento y no puede engordar hasta parecerse a la ficha del Top 20.
   28×38 mantiene la proporción del retrato sin subir el alto de la fila,
   que ya venía marcado por los controles de 44 px. */
.top5-mini {
  flex: none;
  width: 28px;
  height: 38px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  display: block;
}
.top5-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

.top5-cuerpo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.top5-nombre {
  font-size: var(--t-lectura);
  color: var(--crema);
  line-height: 1.25;
  /* Dos líneas como mucho: los nombres con apodo son largos y cortarlos
     con puntos suspensivos escondería justo la parte que identifica. */
  overflow-wrap: break-word;
}

.top5-m451 {
  font-size: var(--t-micro);
  color: var(--crema-tenue);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.top5-controles {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.top5-controles .ranking-quitar { padding: 0.45rem 0.6rem; }
.top5-controles .asa-ranking { padding: 0.45rem 0.5rem; }

/* ── EL DESTINO DEL ARRASTRE ───────────────────────────────────────
   Se marca el hueco CONCRETO bajo el cursor, no la lista: quien arrastra
   tiene que saber en qué puesto va a caer ANTES de soltar, porque soltar
   desplaza a los demás y eso no se puede adivinar después.

   Cómo se dice: el contorno pasa a latón sólido, el fondo sube un punto y
   el número se enciende. Nada más. Sin resplandor, sin animación, sin
   rebote: es un archivo, y la señal tiene que ser inequívoca sin ser
   ruidosa. */
.hueco-diana {
  border-style: solid;
  border-color: var(--laton-vivo);
  background: rgba(207, 171, 54, 0.1);
}
.hueco-diana .top5-num { color: var(--laton-vivo); }
.hueco-diana .top5-hueco-texto { color: var(--crema); font-style: normal; }

/* Mientras se arrastra, los cinco huecos se insinúan para que se vea
   dónde se PUEDE soltar, no sólo dónde se soltaría.

   El orden importa y por poco cuesta el efecto entero: esta regla tiene
   más peso que `.hueco-diana` —dos clases contra una— así que si se deja
   suelta pinta TODOS los huecos del mismo latón tenue, incluido el de
   destino, y la diferencia entre «se puede» y «va a caer aquí»
   desaparece. Por eso la diana se repite dentro del mismo contexto. */
.arrastre-top5 .top5-hueco,
.arrastre-top5 .tarjeta-top5 { border-color: rgba(217, 188, 94, 0.5); }
.arrastre-top5 .hueco-diana {
  border-style: solid;
  border-color: var(--laton-vivo);
  background: rgba(207, 171, 54, 0.1);
}
.arrastre-top5 { cursor: grabbing; }
.tarjeta.arrastrando { opacity: 0.55; }

.zona-pie { margin-top: 0.8rem; }
.zona-pie .sub-boxeo-restaurar { margin-left: 0; }
.zona-pie .sub-boxeo-restaurar:disabled { opacity: 0.4; cursor: default; }

/* PERSONAL-STATE-CROSSDEVICE · el control de sesión en el pie de la zona
   personal. Va DEBAJO y en voz baja: entrar es opcional —la zona funciona
   igual sin sesión— y un formulario que compitiera con las cinco casillas
   convertiría el panel en una pantalla de acceso, que es justo lo que Mi
   Top 5 no es. Separador arriba para que se lea como otro asunto. */
.top5-sesion-nota {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--contorno-tenue, rgba(217, 188, 94, 0.18));
  color: var(--crema-tenue);
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 34ch;
}
.zona-pie .media-sesion { margin-top: 0.5rem; }

/* Quitar. El signo es el control; el nombre accesible lleva de quién se
   trata, porque «−» a secas no dice nada a un lector.
   El «+» y el selector 1–5 se retiraron de la ficha oficial: la ficha del
   Top 20 es una FICHA, no un panel de mandos, y el gesto de colocar es
   arrastrarla. */
.ranking-quitar {
  background: none;
  border: 1px solid var(--contorno-medio);
  border-radius: 6px;
  color: var(--crema-tenue);
  font-family: inherit;
  font-size: var(--t-accion);
  line-height: 1;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  position: relative;
}
.ranking-quitar:hover { color: var(--crema); border-color: var(--laton-cuero); }
.ranking-quitar:focus-visible {
  outline: var(--foco-grosor) solid var(--foco-color);
  outline-offset: 2px;
}
/* Igual que el asa: el área invisible se centra y se fija en 44×44. El
   ::after anterior sólo daba ALTO —el ancho se quedaba en el del icono más
   2 px por lado, 38 px medidos—, así que el objetivo nunca era 44×44 de
   verdad. Se ve igual de discreto y se toca entero. */
.ranking-quitar::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* «Tu #3»: la marca que dice que ese boxeador ya está en el personal,
   sin sacarlo del oficial. */
.ranking-ya {
  font-size: var(--t-micro);
  color: var(--laton-cuero);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ═══ FASE H · POR QUÉ EL MÓVIL NO LLEVA STICKY ═══
   MEDIDO a 390 y 430, con 0, 3 y 5 puestos: el panel ocupa entre el 42% y
   el 45% de la pantalla. Pegarlo ahí dejaría menos de la mitad del
   teléfono para la investigación, que es justo el overlay que el encargo
   prohíbe.

   Y no hace falta: MEDIDO también, las 20 fichas del Top 20 llevan su
   control de colocar —«+» o su puesto ya asignado— y las 20 quedan a la
   vista al llegar a ellas. En vertical no existe un «al lado» a donde
   arrastrar, así que la vía real del teléfono es «+ → elegir puesto», y
   esa vía tiene alcance 20/20 sin robar un solo píxel permanente.

   ESCRITORIO: arrastre directo, con el panel pegado.
   MÓVIL: «+», con el panel arriba y el scroll intacto.            */
@media (max-width: 900px) {
  /* Una sola columna antes de que la ficha oficial se estrangule.
     Y Mi Top 5 va ARRIBA, al revés que en la fase anterior: en vertical
     no hay «al lado» a donde arrastrar, así que la vía real en el móvil
     es «+ → elegir puesto». Para que eso se entienda hay que haber visto
     los cinco huecos antes de pulsar el «+», no después de bajar veinte
     fichas. Son ~5 filas de 48 px: se pasa de largo con un pulgar. */
  .ranking-zonas { grid-template-columns: 1fr; gap: 1.4rem; }
  .zona-mia { order: 0; }
  .zona-oficial { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .top5-hueco, .tarjeta-top5 { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MI ARCHIVO · la capa personal
   ═══════════════════════════════════════════════════════════════════
   Se parece a Memoria 451 —misma madera, misma tipografía, mismos
   contornos— porque forma parte de ella, no es una app pegada. Lo que
   cambia es el LETRERO, no la piel: un color distinto se aprende con el
   tiempo y se olvida; una frase se lee la primera vez y no admite duda.

   Sin gamificación, sin muro, sin «me gusta», sin ranking. Es una
   libreta. */
.archivo-marco { max-width: 46rem; }

.archivo-capa {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border: 1px dashed var(--contorno-medio);
  border-radius: 8px;
  color: var(--crema-tenue);
  font-size: 0.9rem;
  line-height: 1.5;
}

.archivo-explica {
  margin: 0.9rem 0;
  color: var(--crema-tenue);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 46ch;
}

.archivo-aviso {
  margin: 0 0 0.9rem;
  color: var(--laton-vivo);
  font-size: 0.92rem;
}

.archivo-nueva {
  background: none;
  border: 1px solid var(--contorno-medio);
  border-radius: 8px;
  color: var(--crema);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
  margin-bottom: 1.1rem;
}
.archivo-nueva:hover { border-color: var(--laton-vivo); }

.archivo-lista { list-style: none; margin: 0; padding: 0; }

.archivo-cabecera {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
}
/* El tipo va ANTES del título y en pequeño: dice de qué se está hablando
   sin robarle la línea al nombre de la obra. */
.archivo-tipo {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  border: 1px solid var(--contorno-medio);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
}
.archivo-titulo { margin: 0; font-size: 1.15rem; font-weight: 600; text-wrap: balance; }
.archivo-original { margin: 0.25rem 0 0; color: var(--crema-tenue); font-style: italic; font-size: 0.92rem; }

.archivo-meta {
  margin: 0.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
}
/* La categoría se distingue de las etiquetas: es DÓNDE vive la entrada,
   no de qué trata. Misma familia visual, distinto peso. */
.archivo-categoria {
  font-size: 0.82rem;
  color: var(--laton-vivo);
  border: 1px solid var(--contorno-medio);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
.archivo-tag {
  font-size: 0.82rem;
  color: var(--crema-tenue);
  border: 1px solid rgba(217, 188, 94, 0.22);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.archivo-fecha { margin: 0.55rem 0 0; color: var(--crema-tenue); font-size: 0.86rem; }
.archivo-nota {
  margin: 0.7rem 0 0;
  line-height: 1.65;
  white-space: pre-wrap;   /* los saltos de línea que escribió su dueño */
}

.archivo-acciones {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.archivo-acciones button {
  background: none;
  border: 1px solid var(--contorno-medio);
  border-radius: 6px;
  color: var(--crema);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
}
.archivo-acciones button:hover { border-color: var(--laton-vivo); }
.archivo-confirma { color: var(--crema-tenue); font-size: 0.9rem; }
/* El «sí» de un borrado no se disfraza de botón cualquiera, pero tampoco
   se pinta de rojo alarma: la protección es el segundo toque, no el susto. */
.archivo-borrar-si { border-color: var(--laton-vivo) !important; }

.archivo-form { display: flex; flex-direction: column; gap: 0.8rem; }
.archivo-campo { display: flex; flex-direction: column; gap: 0.3rem; }
.archivo-etiqueta {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--crema-tenue);
}
.archivo-entrada {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--contorno-medio);
  border-radius: 6px;
  color: var(--crema);
  font-family: inherit;
  font-size: 1rem;      /* 16px: por debajo, iOS hace zoom al enfocar */
  padding: 0.6rem 0.7rem;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.archivo-entrada:focus { outline: 2px solid var(--laton-vivo); outline-offset: 1px; }
textarea.archivo-entrada { min-height: 6rem; resize: vertical; line-height: 1.6; }
.archivo-error:empty { display: none; }
.archivo-error { margin: 0; color: var(--laton-vivo); font-size: 0.9rem; }

/* La frontera del estante: las trece numeradas arriba, Mi Archivo abajo. */
.estante-frontera {
  border: 0;
  border-top: 1px solid var(--contorno-medio);
  margin: 0.9rem 0 0.6rem;
}
.entrada-archivo .entrada-nombre { font-style: italic; }

/* `.tarjeta` es `display:flex` EN FILA porque una ficha del canon tiene
   portada a la izquierda y cuerpo a la derecha. Una entrada de Mi Archivo
   no tiene portada —a propósito: esta fase no abre un segundo almacén de
   imágenes—, así que heredar esa fila ponía título, etiquetas, fecha, nota
   y botones uno al lado del otro, con «Spider-Man (2002)» partido en dos
   líneas dentro de una columna estrecha. Se apila. */
.archivo-tarjeta {
  display: block;
  margin-bottom: 1rem;
}
.archivo-tarjeta > * { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   PRESS-TO-MOVE · lo que el navegador NO debe hacer sobre una pieza
   movible, y el aspecto de tenerla agarrada
   ═══════════════════════════════════════════════════════════════════
   MEDIDO en WebKit a 390 px, antes de esto: la fila de Mi Top 5 daba
   `user-select: text`, y mantener el dedo seleccionaba «Salvador Sánchez
   / Ranking M451 #3» — el texto exacto que Safari ofrece copiar.

   La regla que ya existía lo evitaba SÓLO en escritorio, porque vive
   dentro de `@media (min-width: 901px)`. En el teléfono, que es donde el
   gesto es táctil y el menú aparece, no llegaba a aplicarse.

   ⛔ NO se aplica de forma global. `user-select: none` en toda la página
   dejaría sin copiar los dossiers, las notas, las curiosidades y Mi
   Archivo, que es contenido para leer y citar. Aquí se nombran ÚNICAMENTE
   las dos piezas que se mueven: la fila de Mi Top 5 y la ficha del Top 20
   dentro del ranking. Esas dos no son prosa: son controles. */
li.tarjeta-top5,
body.vista-ranking li.tarjeta[data-zona="oficial"] {
  user-select: none;
  -webkit-user-select: none;
  /* La pieza clave del defecto: sin esto, el toque largo de Safari abre
     Copiar / Consultar / Traducir aunque la selección esté desactivada.
     No aparecía en NINGUNA parte del proyecto antes de esta fase. */
  -webkit-touch-callout: none;
}
/* Y su texto editable sigue siendo suyo: si algún día hay un campo dentro,
   no puede heredar la prohibición. */
li.tarjeta-top5 textarea,
li.tarjeta-top5 input,
body.vista-ranking li.tarjeta[data-zona="oficial"] textarea,
body.vista-ranking li.tarjeta[data-zona="oficial"] input {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* ── ARMADA: «ya agarré esta pieza» ─────────────────────────────────
   La señal visual es OBLIGATORIA — la vibración no existe en iOS y no
   puede ser la única confirmación. Responde la FILA ENTERA, no un icono:
   lo que se va a mover es la fila.

   Sin cambiar la paleta: el mismo latón de la casa, más vivo; el mismo
   cuero, un punto más claro; una elevación corta. Es «encendida», no
   «neón» — se reconoce de la misma familia y no parece otro producto. */
.gesto-armada {
  border-color: var(--laton-vivo) !important;
  background: var(--cuero-realce) !important;
  box-shadow: 0 0 0 2px rgba(207, 171, 54, 0.35),
              0 6px 16px rgba(10, 5, 2, 0.5) !important;
  transform: scale(1.02);
  /* Ya armada, el gesto es nuestro: aquí sí se le retira al navegador,
     y sólo aquí. Antes de armar la fila no lo lleva, que es lo que
     mantiene vivo el scroll de la lista. */
  touch-action: none;
  transition: transform var(--mov-rapido) var(--mov-curva),
              box-shadow var(--mov-rapido) var(--mov-curva);
}
/* Quien haya pedido menos movimiento no recibe el salto de escala; el
   cambio de color y el realce siguen ahí, así que la señal no se pierde. */
@media (prefers-reduced-motion: reduce) {
  .gesto-armada { transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   KING-HERO-1 · LA PUERTA AL UNIVERSO STEPHEN KING
   ═══════════════════════════════════════════════════════════════════
   Sin colores, radios ni tipografías nuevas: la lámina es la MISMA
   materia que una ficha —degradado de cuero, canto de latón, radio 14px,
   la sombra de la casa— sólo que a tamaño de portada de sección. Si esto
   se pareciera a un banner, sería porque se rompió la gramática, no
   porque hiciera falta otra.

   La única regla propia de este bloque es el ENCUADRE, y existe por un
   hecho medido del archivo: `pennywise.jpg` (480×640) trae impreso
   «PENNYWISE: THE STORY OF IT» en su tercio inferior, y la cara vive
   entre el 8% y el 62% del alto. Con `object-position: 50% 18%` se
   enseña la cara entera y el texto quemado queda fuera del recorte, sin
   tocar el archivo: el título de la app va debajo, sobre madera, y no
   hay dos titulares peleándose.                                      */
.king-hero {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.king-lamina {
  position: relative;
  margin: 0;
  border: 1px solid var(--laton-cuero);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), inset 0 1px 0 rgba(255, 224, 176, 0.12);
  background: linear-gradient(155deg, var(--cuero-realce) 0%, var(--cuero) 45%, var(--cuero-sombra) 100%);
}

/* 3:2 apaisado en escritorio: la cara de Pennywise cabe entera y el
   bloque no empuja la subnav fuera de pantalla. */
.king-penny {
  display: block;
  width: 100%;
  /* HERO-VISUAL-REFINE-1 · de 3/2 a 4/3. Medido sobre el archivo (480×640,
     `cover`): 3/2 enseñaba el 50,0 % del alto —ventana 9,0 %→59,0 %— y 4/3
     enseña el 56,2 % —ventana 7,9 %→64,1 %—. Esos seis puntos de más son
     exactamente la columna de personajes del universo de IT que el usuario
     pidió preservar, y siguen a 8 puntos del texto quemado (72 %). */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 18%;
}

/* HERO-VISUAL-REFINE-1 · el autor, FUERA de la lámina.
   Antes iba en `position:absolute` sobre la esquina inferior derecha, y ahí
   tapaba la columna de personajes de IT. Ahora es una foto de expediente
   junto al nombre: mismo marco de latón y misma sombra —no se inventa
   material nuevo—, en su proporción real 3:4 (387×516) para que no se
   deforme, y sin robarle un solo píxel a Pennywise. */
.king-retrato {
  flex: none;
  /* 124 px: a 96 no se le reconocía la cara —la foto es un collage y él
     ocupa su centro—, y a más de 130 empezaba a pelear con el nombre.
     Sobre una lámina de 670 px es el 18 % del ancho: secundario sin
     discusión, legible sin lupa. */
  width: 124px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  border: 1px solid var(--laton-cuero);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(10, 5, 2, 0.6);
}

.king-cartela {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0 0.15rem;
}
.king-cartela-texto { min-width: 0; }

.king-rotulo {
  margin: 0 0 0.2rem;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--laton-vivo);
}

/* El nombre del autor es el texto mayor de la vista. Aquí manda el
   TÍTULO, no la imagen: es lo que impide que esto se lea como «una
   página de It». */
.king-nombre {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 9vw, 3.1rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--crema);
}

.king-subtitulo {
  margin: 0.35rem 0 0;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-lectura);
  color: var(--crema-tenue);
}

.king-secciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Hereda la píldora de la subnav y sólo añade lo que necesita: dos
   líneas, porque el estado va escrito y no insinuado. */
.king-seccion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  cursor: not-allowed;
}
.king-seccion[disabled] { opacity: 0.72; }
.king-seccion[disabled]:hover { border-color: var(--contorno-tenue); color: var(--crema-tenue); }
.king-seccion-nombre { color: var(--crema); }
.king-seccion-estado {
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  opacity: 0.85;
}

.king-aviso {
  margin: 0;
  font-family: "Lora", Georgia, serif;
  font-size: var(--t-meta);
  color: var(--crema-tenue);
}

.king-volver { align-self: flex-start; }

/* ── MÓVIL ─────────────────────────────────────────────────────────
   A 390 px el 3:2 deja la cara pequeña y el retrato del autor se comería
   media lámina. Se pasa a 4:5 —más alto, la cara crece— y el retrato baja
   al 32% con tope en 118px: medido a 390 px son ~106px de ancho, que
   sigue leyéndose como persona y deja la cara de Pennywise despejada. */
@media (max-width: 560px) {
  /* ⚠️ AQUÍ SE ROMPIÓ Y SE MIDIÓ POR QUÉ. El primer intento fue 4/5 —más
     alto, la cara más grande— y a 390 px apareció impreso «PENNYWISE ·
     THE STORY OF IT» con el retrato del autor partiéndolo por la mitad:
     dos titulares peleándose y la entrada leyéndose como un cartel de It.

     La causa es geométrica, no de gusto. Con `cover` y un origen 3:4, la
     fracción de imagen visible es (alto/ancho)·0,75:
         3/2  → 50,0 %      4/5  → 93,8 %      15/14 → 70,0 %
     A 4/5 apenas se recortaba un 6 %: el texto entraba entero.

     La cara vive entre el 8 % y el 62 % del alto; el texto empieza hacia
     el 72 %. Con 15/14 anclado ARRIBA la ventana es 0–70 %: la cara entra
     completa y el texto queda fuera. Ni se toca el archivo ni se tapa
     nada con una capa encima. */
  .king-penny { aspect-ratio: 15 / 14; object-position: 50% 0%; }
  /* El retrato ya no está sobre la lámina, así que en móvil sólo se ajusta
     de tamaño: 78 px sigue leyéndose como una persona y deja el nombre
     entero en su línea a 390 px. */
  .king-retrato { width: 92px; }
  .king-secciones { gap: 0.4rem; }
  .king-seccion { flex: 1 1 calc(50% - 0.4rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSE-CHAIN-1 · LAS VISTAS DEL UNIVERSO STEPHEN KING
   ═══════════════════════════════════════════════════════════════════
   Sin colores, radios ni tipografías nuevas. Cada fila es la MISMA
   materia que una ficha —degradado de cuero, canto de latón, radio 14—
   sólo que más baja, porque aquí se lee una lista de expedientes y no una
   colección de carteles. Las píldoras son las de la subnav, tal cual.  */
.king-vista { display: flex; flex-direction: column; gap: 1rem; }
.king-nav { margin-bottom: 0.2rem; }
.king-seccion.activo {
  border-color: var(--laton-cuero);
  color: var(--crema);
  background: rgba(0, 0, 0, 0.18);
  font-weight: 600;
}
.king-contenido { display: flex; flex-direction: column; gap: 0.9rem; }

.king-sub {
  margin: 0.6rem 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--crema);
}

.king-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }

.king-fila {
  background: linear-gradient(155deg, var(--cuero-realce) 0%, var(--cuero) 45%, var(--cuero-sombra) 100%);
  border: 1px solid var(--laton-cuero);
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), inset 0 1px 0 rgba(255, 224, 176, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.king-fila-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.king-anio {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.1rem;
  color: var(--laton-cuero);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.king-titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--t-titulo);
  color: var(--crema);
}
.king-fila-meta,
.king-fila-eras,
.king-fila-adap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: var(--t-meta);
  color: var(--crema-tenue);
}
.king-par-rot { color: var(--laton-cuero); }
.king-nota { margin: 0; font-size: var(--t-meta); color: var(--crema-tenue); }
.king-representativas { font-style: italic; }

/* Etiquetas. El latón se raciona a BORDE y nunca a texto chico sobre
   cuero: es la regla de contraste de la casa, no una preferencia. */
.king-etq {
  display: inline-block;
  border: 1px solid var(--contorno-tenue);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crema-tenue);
  white-space: nowrap;
}
.king-etq-era { border-color: var(--contorno-medio); }
.king-etq-bachman,
.king-etq-prov { border-color: var(--laton-cuero); color: var(--crema); }
.king-etq-adap { opacity: 0.85; }

/* El aviso de denominador. Va DISTINTO del resto del texto a propósito:
   es la frase que dice que falta una fuente, y tiene que verse. */
.king-denominador,
.king-no-canon,
.king-interpretacion {
  border-left: 3px solid var(--laton-cuero);
  padding-left: 0.7rem;
}

.king-versus { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.king-version {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  flex: 1 1 240px;
  border: 1px solid var(--contorno-tenue);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
}
.king-otro { display: flex; flex-direction: column; gap: 0.45rem; }
.king-filtro-eras { margin: 0; }

@media (max-width: 560px) {
  .king-fila { padding: 0.65rem 0.75rem; }
  .king-version { flex: 1 1 100%; }
  .king-fila-meta, .king-fila-eras { gap: 0.25rem 0.6rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   UNIVERSE-RESTRUCTURE-1 · LAS DOS PUERTAS Y LA FICHA DE KING
   ═══════════════════════════════════════════════════════════════════
   Nada de esto inventa lenguaje visual. La ficha es `.tarjeta` —el
   mismo degradado de cuero, el mismo canto de latón, el mismo radio de
   14px, la misma portada 2:3— y aquí sólo se añade lo que la ficha de
   King tiene y las demás no: el año delante del título y la fila de
   marcas. Las puertas son la excepción deliberada: son dos y tienen que
   pesar, así que ocupan el ancho y llevan el tamaño de un titular. */

.king-puertas {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.1rem;
}
.king-puerta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 1rem 1.1rem;
  text-align: left;
  cursor: pointer;
  background: linear-gradient(155deg, var(--cuero-realce) 0%, var(--cuero) 45%, var(--cuero-sombra) 100%);
  border: 1px solid var(--laton-cuero);
  border-radius: 14px;
  color: var(--crema);
}
.king-puerta:hover { border-color: var(--laton-vivo); }
.king-puerta-titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--laton-vivo);
}
.king-puerta-rango,
.king-puerta-cuenta {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--crema);
  opacity: 0.78;
}
.king-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
  justify-content: center;
}

.king-periodo-titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.45rem;
  color: var(--laton-vivo);
  margin: 0 0 0.6rem;
}
.king-filtros { margin-bottom: 0.9rem; }
.king-rejilla { margin-top: 0.2rem; }

.king-ficha-cab {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.king-ficha .king-anio {
  font-variant-numeric: tabular-nums;
  color: var(--laton-vivo);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}
.king-ficha-titulo {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.2;
  margin: 0;
  color: var(--crema);
}
.king-ficha-original,
.king-ficha-produccion,
.king-ficha-escritura,
.king-ficha-enlace,
.king-ficha-falta,
.king-ficha-variante,
.king-ficha-estado-titulo {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--crema);
  opacity: 0.82;
}
/* Lo que falta se dice una vez y en voz baja: es un archivo, no un
   tablero de pendientes. Cursiva y sin color de alarma. */
.king-ficha-falta { font-style: italic; opacity: 0.62; }
/* El estado editorial del título habla igual de bajo que «lo que falta»:
   en cursiva y sin caja. Que no parezca una alerta — es una nota al pie
   del archivero, y una de las dos —«sin equivalente único»— ni siquiera
   es una deuda: es la respuesta. */
.king-ficha-estado-titulo { font-style: italic; opacity: 0.62; }
/* La variante por canal habla igual de bajo. No es una advertencia ni una
   corrección: es el segundo título verdadero de la misma obra. */
.king-ficha-variante { font-style: italic; opacity: 0.62; }

.king-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.king-marca {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--laton-cuero);
  color: var(--crema);
  opacity: 0.9;
}
.king-marca[data-marca="PUBLICADO COMO RICHARD BACHMAN"] {
  border-color: var(--laton-vivo);
  color: var(--laton-vivo);
}
.king-marca[data-marca="libro"],
.king-marca[data-marca="cine"],
.king-marca[data-marca="tv"],
.king-marca[data-marca="archivo"] {
  background: rgba(0, 0, 0, 0.18);
}

/* La deuda D2 sigue dicha, pero al pie y en letra pequeña. */
.king-nota-editorial {
  margin: 1.4rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--crema);
  opacity: 0.55;
  border-top: 1px solid rgba(217, 188, 94, 0.25);
  padding-top: 0.7rem;
}

@media (max-width: 560px) {
  .king-puerta-titulo { font-size: 1.3rem; }
  .king-ficha-titulo { font-size: 1.08rem; }
}

/* La barra interna del periodo: una migaja de vuelta y el conmutador del
   eje. No es una parrilla de destinos y por eso no se ve como tal. */
.king-nav { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.king-migaja { opacity: 0.75; font-size: 0.85rem; }
.king-conmutador { display: flex; gap: 0.5rem; flex-wrap: wrap; width: 100%; }
.king-conmutador .king-seccion { flex: 1 1 45%; }