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

  /* Arranque/paso intermedio de la animación de firma. Punto ciego
     declarado, no escondido: ámbar/ceniza sobre CUERO da ~2:1 (bajo el
     3:1 de WCAG para bordes) — un tono de brasa/ceniza creíble no puede
     separarse más de un cuero cálido sin dejar de leerse como brasa.
     Se acepta porque (a) es transitorio, 900ms, no un estado en reposo,
     (b) contra el verde final SÍ pasa (4.40/4.37:1) y hacia ahí va, y
     (c) lleva glow sincronizado (box-shadow) como refuerzo perceptual
     que no depende del matiz. El estado en reposo real (verde de firma)
     tiene 10.69:1 — ahí está la garantía, no en el fotograma de tránsito. */
  --ambar-brasa: #d18949;
  --ceniza: #a39787;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--crema);
  font-family: "Lora", "Iowan Old Style", Georgia, serif;
  line-height: 1.4;
  /* Veta de madera: dos gradientes muy sutiles, sin imagen — un
     barrido de luz arriba y vetas diagonales finas. Nada de textura
     que compita con el contenido. */
  background:
    radial-gradient(ellipse 120% 40% at 50% 0%, rgba(255, 255, 255, 0.035), transparent 60%),
    repeating-linear-gradient(
      98deg,
      rgba(0, 0, 0, 0.055) 0px,
      rgba(0, 0, 0, 0.055) 1px,
      transparent 1px,
      transparent 38px
    ),
    var(--madera);
}

.cabecera {
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(207, 171, 54, 0.28);
  max-width: 720px;
  margin: 0 auto;
}

.cabecera h1 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 0.03em;
  color: var(--crema);
}

.selector-coleccion {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.9rem;
}

.tab-coleccion {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(247, 236, 214, 0.62); /* crema tenue — dim inactivo, no necesita 4.5:1 (decorativo, la lectura real es el tab activo) */
  font-family: "Lora", Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 0 0.4rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tab-coleccion:hover {
  color: var(--crema);
}

.tab-coleccion.activa {
  color: var(--laton-vivo); /* sobre madera — 4.56:1, verificado */
  border-bottom-color: var(--laton-vivo);
}

.subtitulo {
  margin: 0.9rem 0 1rem;
  color: rgba(247, 236, 214, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

/* El tab activo del selector ya muestra el nombre de la colección —
   este texto queda solo para lectores de pantalla (aria-live). */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.progreso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.barra-progreso {
  flex: 1;
  height: 6px;
  background: rgba(247, 236, 214, 0.14);
  border-radius: 3px;
  overflow: hidden;
}

.barra-progreso-relleno {
  height: 100%;
  width: 0%;
  background: var(--laton-vivo); /* sobre madera — 4.56:1 */
  transition: width 0.3s ease;
}

#contador-progreso {
  font-size: 0.85rem;
  /* A diferencia del tab inactivo (decorativo), esto SÍ es la única
     forma de leer el progreso — 65% en vez del 62% "estándar" porque
     62% daba 4.39:1 (raspaba, no pasaba) contra la nueva madera. */
  color: rgba(247, 236, 214, 0.65);
  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: 1rem;
  /* 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 */
  border-radius: 3px;
  padding: 0.85rem;
  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);
  /* El reorder usa Pointer Events, no HTML5 Drag&Drop: el navegador
     necesita ceder el gesto táctil a JS en vez de hacer scroll con
     él. Los controles interactivos de adentro recuperan el touch
     normal más abajo. */
  touch-action: none;
  transition: border-color 0.2s ease, background 0.6s ease, box-shadow 0.2s ease;
}

.tarjeta .boton-visto,
.tarjeta .caja-nota textarea {
  touch-action: auto;
}

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

/* Elemento firma: al marcar visto, el borde "enfría" de brasa a ceniza
 * a verde final — referencia al fuego del 451 apagándose en
 * preservación. Se dispara UNA vez, solo en el ítem recién marcado
 * (ver idRecienMarcado en app.js) — no se repite al recargar la app
 * con ítems ya vistos de antes. El glow (box-shadow) viaja con el
 * borde: es el refuerzo perceptual para el tramo brasa/ceniza, que
 * contra el cuero da ~2:1 (bajo 3:1 — ver punto ciego declarado en
 * :root). El fondo también migra en este mismo lapso (transition de
 * `background` a 0.6s en .tarjeta) — el libro entero cambia de cuero a
 * piel verde, no solo el canto. */
@keyframes enfriar-brasa {
  0% {
    border-color: var(--ambar-brasa);
    box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), 0 0 18px rgba(209, 137, 73, 0.45);
  }
  55% {
    border-color: var(--ceniza);
    box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), 0 0 14px rgba(163, 151, 135, 0.3);
  }
  100% {
    border-color: var(--verde-visto-claro);
    box-shadow: 0 3px 10px rgba(10, 5, 2, 0.45), 0 0 0 rgba(0, 0, 0, 0);
  }
}

.tarjeta.marcando-visto {
  animation: enfriar-brasa 900ms ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta.marcando-visto {
    animation: none;
    border-color: var(--verde-visto-claro);
  }
}

.tarjeta.arrastrando {
  opacity: 0.55;
}

.portada {
  flex: none;
  width: 56px;
  height: 84px;
  border-radius: 2px;
  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: 0.85rem;
}

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

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

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

.acciones {
  margin-top: 0.6rem;
}

.boton-visto {
  background: transparent;
  border: 1px solid var(--laton-cuero); /* canto dorado, no-texto — 3.12:1 */
  color: var(--crema); /* el texto SÍ necesita 4.5:1, el latón no llega — mismo motivo que .numero-ranking */
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  font-family: "Lora", Georgia, serif;
  font-size: 0.8rem;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tarjeta.visto .boton-visto {
  border-color: var(--verde-visto-claro);
  color: var(--crema); /* 6.99:1 contra el fondo verde de la tarjeta */
}

.boton-visto:hover {
  /* Antes oscurecía (tarjeta clara); ahora aclara (tarjeta oscura) —
     misma idea de "hover sutil", dirección invertida a propósito. */
  background: rgba(247, 236, 214, 0.08);
}

.caja-nota {
  margin-top: 0.6rem;
  border-top: 1px solid rgba(247, 236, 214, 0.18);
  padding-top: 0.6rem;
}

.caja-nota textarea {
  width: 100%;
  min-height: 3rem;
  /* La caja de nota SOLO existe en tarjetas ya "visto" (ver app.js) —
     su fondo real es dentro de la tarjeta VERDE, no del cuero. Verde
     bien oscuro para que --crema tenga de sobra (12.24:1). */
  background: #1c2e23;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  color: var(--crema);
  font-family: "Lora", Georgia, serif;
  font-size: 0.85rem;
  padding: 0.5rem;
  resize: vertical;
}

.caja-nota textarea::placeholder {
  color: var(--crema-tenue);
  opacity: 0.75;
}

.fecha-visto {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--crema-tenue);
  font-style: italic;
}