/* ============================================================
   Mundo Bíblico Interactivo — Sistema "Manuscrito iluminado"
   Editorial + Minimal + Museo · v1
   Regla rectora: lo premium se logra QUITANDO, no añadiendo.
   ============================================================ */
:root {
  /* Tinta — casi-negros cálidos */
  --ink: #2a2622;
  --ink-soft: #5c4f42;
  --ink-faint: #8a7d6e;
  /* Pergamino */
  --parchment: #faf6ef;
  --parchment-2: #f4ecdd;
  --card: #ffffff;
  /* Oro — acento fino, nunca relleno grande */
  --gold: #c9a24b;
  --gold-soft: #dcc079;
  --gold-foil: #e3c77a;
  --gold-deep: #a9821f;
  /* Índigo ancla + museo de noche */
  --indigo: #2c3e6b;
  --indigo-deep: #1b2440;
  /* Tierra Berann (armonía con el arte) */
  --accent: #a6552e;
  --sage: #7c8a6b;
  --turq: #4a8c8c;
  --green: #5f7a4a;
  --red: #a6552e;
  --border: #e6dcc6;

  --shadow: 0 1px 2px rgba(43,33,24,.05), 0 4px 14px rgba(43,33,24,.07), 0 12px 30px rgba(43,33,24,.05);
  --shadow-lg: 0 4px 16px rgba(43,33,24,.10), 0 20px 50px rgba(43,33,24,.13);
  --radius: 16px;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-read: 'EB Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --maxw: 1140px;

  /* ⚠⚠ TINTA POR ROL (2026-08-29). Cuatro colores del sistema —indigo, siena,
     verde, rojo— se usaban a la vez como FONDO (botones, pestañas) y como
     TINTA (enlaces, títulos, avisos). El modo oscuro redefine los fondos y las
     tintas de gris, pero NUNCA redefinió estos cuatro, así que la tinta se
     quedó con su valor claro sobre un fondo oscuro: `--indigo` #2c3e6b sobre
     #1e2742 da **1,41:1** — invisible. WCAG AA pide 4,5.
     No se puede arreglar redefiniendo `--indigo`, porque entonces cambian los
     FONDOS que lo usan. Por eso el rol se separa del color: `--ink-*` es
     SIEMPRE tinta, y el tema le da el valor que se lee sobre su propio fondo.
     ⚠ Si añades un `color: var(--indigo|--accent|--green|--red)` nuevo, usa el
     `--ink-*` que le toque: `node tools/check_contrast.js` aborta si no. */
  --ink-action: var(--indigo);   /* enlaces y llamadas: «Continuar leyendo →» */
  --ink-accent: var(--accent);   /* énfasis en tierra: versículo del hero, negritas */
  /* ⚠ NO es var(--green): el verde de RELLENO (#5f7a4a) da 4,09 sobre el
     pergamino cálido —falla AA por poco, y por poco no lo mira nadie—. El
     relleno se queda como está y la TINTA baja lo justo para leerse (4,84). */
  --ink-good:   #556e42;         /* acierto (4,84 en claro) */
  --ink-bad:    var(--red);      /* error, peligro */
}

/* Dark mode — "Museo / Santuario" */
body.theme-dark {
  --parchment: #161d33;
  --parchment-2: #1e2742;
  --card: #222d4d;
  --ink: #ece4d4;
  --ink-soft: #c2c8da;
  --ink-faint: #8b94af;
  --border: #313d63;
  --gold-deep: #dcc079;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.30), 0 16px 40px rgba(0,0,0,.30);
  --shadow-lg: 0 6px 22px rgba(0,0,0,.40), 0 26px 60px rgba(0,0,0,.45);
  /* Tinta del modo oscuro. Medidos contra los CUATRO fondos oscuros reales
     (#161d33 · #272d41 · #222d4d · #1e2742); el peor caso va entre paréntesis.
     El oro no es un capricho: es lo que los ~30 parches sueltos de
     `body.theme-dark .algo { color: var(--gold-foil) }` ya venían haciendo a
     mano, uno por uno, desde hace meses. Esto es esa decisión, escrita una vez. */
  --ink-action: var(--gold-foil); /* #e3c77a  (8,20) */
  --ink-accent: #d99a70;          /* siena aclarada (5,68) */
  --ink-good:   #9dbd82;          /* salvia aclarada (6,47) */
  --ink-bad:    #d99a70;          /* (5,68) */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* ── EL SUELO DE LA TINTA DE LOS ENLACES ──────────────────────────────────
   2026-09-02. Hasta hoy no existía NINGUNA regla `a { color }` en todo el CSS.
   Un `<a>` sin regla propia ni antepasado que lo pintara no salía «sin estilo»:
   salía con el azul #0000EE del navegador y su morado de visitado — colores que
   no son de esta paleta y que `body.theme-dark` no puede redefinir, porque no
   están escritos en ninguna parte. Así estuvo `.footer-legal` en el sitio
   publicado: 1,78:1 sobre el fondo de noche.

   Este bloque es el SUELO, no un estilo: la especificidad más baja que existe
   (0,0,1), así que cualquier regla de clase o de antepasado le gana. Se midió:
   sobre 1.322 enlaces de 30 rutas × 2 temas, ponerlo no cambió NI UN color
   calculado. No pinta nada nuevo; solo impide que algo caiga al azul de fábrica.
   `:visited` va explícito porque el `:visited` del navegador es de su propia
   hoja y el morado reaparecía en cuanto el enlace se visitaba.

   ⚠ NO se le añaden aquí `:hover` ni decoración: eso es estilo y es cosa de
   cada componente. Esto solo garantiza que ningún enlace se quede sin tinta.
   Lo vigila `tools/check_contrast.js` §4.

   ⚠⚠⚠ VA DENTRO DE `:where()`, Y ES LO ÚNICO QUE HACE DE ESTO UN SUELO
   (2026-09-03, aviso del dueño: «no se ve lo que dice el botón»). La primera
   versión se escribió `a { … }` y `a:visited { … }` a secas, y **`a:visited`
   tiene especificidad (0,1,1)**: le gana a CUALQUIER regla de una sola clase.
   O sea que en cuanto un enlace se visitaba, el suelo dejaba de ser un suelo y
   se convertía en un TECHO que repintaba por encima del color que su componente
   había elegido. El daño, medido: `.book-cta` —el botón «Continuar leyendo» de
   la ficha del libro, con fondo de oro— declara `color: #3a2e12` con
   especificidad (0,1,0); al visitarlo, `a:visited` lo repintaba con
   `--ink-action`, que en modo oscuro vale `--gold-foil` **#e3c77a: oro pálido
   sobre oro**. El botón se quedaba sin texto legible, y solo después de haberlo
   pulsado una vez — por eso no salió en ninguna medida del día anterior.
   `:where()` aporta especificidad CERO, así que estas dos reglas quedan en
   (0,0,0) y pierden contra absolutamente cualquier regla de autor, que es
   justo lo que un suelo tiene que hacer. Contra la hoja del NAVEGADOR siguen
   ganando, porque el origen de autor manda sobre el del navegador antes de que
   la especificidad entre siquiera en la comparación.
   ⭐ REGLA GENERAL: un suelo escrito con una pseudoclase NO es un suelo. */
:where(a) { color: var(--ink-action); }
:where(a:visited) { color: var(--ink-action); }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--parchment);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}

/* Grano de papel — la palanca #1 "caro vs barato" */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.theme-dark::before { mix-blend-mode: screen; opacity: .035; }
#device { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1;
  container-type: inline-size; container-name: device; }

/* glow ambiental sutil */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 460px at 82% -8%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(900px 420px at -8% 8%, rgba(44,62,107,.06), transparent 55%);
}
body.theme-dark::after {
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 6%, rgba(120,140,210,.07), transparent 55%);
}

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 13px 26px;
  background: color-mix(in srgb, var(--parchment) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  box-shadow: 0 1px 3px rgba(27,36,64,.35), 0 0 0 1px rgba(201,162,75,.25);
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.22rem; letter-spacing: -.015em;
}
.topnav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.topnav a {
  text-decoration: none; color: var(--ink-soft);
  font-weight: 600; font-size: .84rem; letter-spacing: .01em;
  padding: 8px 15px; border-radius: 999px;
  transition: background .18s, color .18s;
}
.topnav a:hover { background: var(--parchment-2); color: var(--ink); }
.topnav a.active { background: var(--indigo); color: #fff; }
.topnav .nav-short { display: none; } /* etiqueta corta solo en pantallas angostas */
body.theme-dark .topnav a.active { background: var(--gold); color: var(--indigo-deep); }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.btn-icon {
  min-width: 38px; height: 38px;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 10px; padding: 0 10px;
  font-size: .86rem; font-weight: 700; cursor: pointer;
  color: var(--ink-soft); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.btn-icon:hover { border-color: var(--gold); color: var(--ink); transform: translateY(-1px); }
.btn-icon.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* Light/dark sliding switch */
.theme-switch {
  position: relative; width: 48px; height: 27px; flex: 0 0 auto;
  border-radius: 999px; border: 1px solid var(--border); background: var(--parchment-2);
  cursor: pointer; padding: 0; transition: background .3s, border-color .3s;
}
.theme-switch .ts-knob {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(27,36,64,.35);
  display: grid; place-items: center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.theme-switch.on .ts-knob { transform: translateX(21px); }
.theme-switch svg { position: absolute; width: 13px; height: 13px; transition: opacity .3s, transform .35s; }
.theme-switch .ts-sun { color: var(--gold-deep); opacity: 1; transform: rotate(0deg); }
.theme-switch .ts-moon { color: var(--gold-foil); opacity: 0; transform: rotate(-60deg); }
.theme-switch.on { background: var(--indigo-deep); border-color: var(--indigo); }
.theme-switch.on .ts-knob { background: #46588c; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.theme-switch.on .ts-moon { color: var(--gold-foil); }
.theme-switch.on .ts-sun { opacity: 0; transform: rotate(60deg); }
.theme-switch.on .ts-moon { opacity: 1; transform: rotate(0deg); }
.theme-switch:hover { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .theme-switch .ts-knob, .theme-switch svg { transition: none; } }

/* ES / EN sliding switch — mismo estilo que el de claro/oscuro */
.lang-switch {
  position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
  width: 58px; height: 27px; padding: 0;
  border-radius: 999px; border: 1px solid var(--border); background: var(--parchment-2);
  cursor: pointer; transition: background .3s, border-color .3s;
}
.lang-switch .ls-opt {
  position: relative; z-index: 2; flex: 1; text-align: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; line-height: 1;
  color: var(--ink-faint); transition: color .3s;
}
.lang-switch .ls-knob {
  position: absolute; z-index: 1; top: 2px; left: 2px; width: 27px; height: 21px;
  border-radius: 999px; background: var(--card); box-shadow: 0 1px 3px rgba(27,36,64,.35);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.lang-switch.en .ls-knob { transform: translateX(27px); }
.lang-switch:not(.en) .ls-opt[data-l="es"],
.lang-switch.en .ls-opt[data-l="en"] { color: var(--ink); } /* idioma activo resaltado */
.lang-switch:hover { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .lang-switch .ls-knob { transition: none; } }

/* Barra de búsqueda en la topbar — píldora alargada, misma familia que los toggles */
.topsearch {
  display: inline-flex; align-items: center; flex: 0 1 240px; min-width: 130px;
  height: 38px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  padding: 0 6px 0 2px; transition: border-color .18s, box-shadow .18s;
}
.topsearch:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent); }
.topsearch .ts-go {
  border: none; background: none; cursor: pointer; height: 100%;
  display: grid; place-items: center; padding: 0 8px; font-size: .95rem;
  color: var(--ink-soft); line-height: 1; border-radius: 999px;
}
.topsearch .ts-go:hover { color: var(--gold-deep); }
/* Iconografía del chrome en SVG (js/icons.js): tamaño y trazo uniformes en toda plataforma */
.ts-go svg { width: 16px; height: 16px; display: block; }
.btn-icon svg { width: 17px; height: 17px; display: block; }
.game-card .g-icon svg { width: 34px; height: 34px; display: block; }
.topsearch input {
  border: none; background: none; outline: none; flex: 1; min-width: 0;
  font: inherit; font-size: .86rem; color: var(--ink); padding: 0 4px 0 0;
}
.topsearch input::placeholder { color: var(--ink-faint); }
.topsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ---------- Reading progress (reader view only) ---------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.read-progress.on { opacity: 1; }
.read-progress > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold), var(--gold-deep));
  box-shadow: 0 0 6px rgba(201,162,75,.5); transition: width .12s linear;
}

/* ---------- Edit banner ---------- */
.edit-banner {
  position: sticky; top: 65px; z-index: 49;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 26px;
  background: color-mix(in srgb, var(--gold-foil) 22%, var(--card));
  border-bottom: 1px solid var(--gold-soft);
  font-size: .8rem; font-weight: 700; color: var(--gold-deep);
  letter-spacing: .03em; flex-wrap: wrap;
}
.edit-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Layout ---------- */
main { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 30px 26px 80px; }
.footer {
  text-align: center; padding: 26px 18px; font-size: .76rem; color: var(--ink-faint);
  border-top: 1px solid var(--border); letter-spacing: .02em;
}

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .4em; letter-spacing: -.015em; font-weight: 700; }
h1 { font-size: 2.7rem; }
h2 { font-size: 1.85rem; }
h3 { font-size: 1.28rem; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .68rem;
  font-weight: 700; color: var(--gold-deep); margin-bottom: 10px;
}
.lead { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.7; max-width: 64ch; }

/* hairline dorado reutilizable */
.rule-gold { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold) 50%, var(--gold-soft) 82%, transparent); margin: 0; opacity: .8; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding: 52px 16px 30px; position: relative; z-index: 0; }
/* Hero background video — gold-on-black book, screen-blended over parchment */
.hero-video {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none; opacity: var(--hv-op, .3); mix-blend-mode: screen;
}
body.theme-dark .hero-video { opacity: var(--hv-op-dark, .4); }
.hero > :not(.hero-video) { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-video, .hv-pause { display: none; } }
/* Pausa/play del video del hero (WCAG 2.2.2) — discreto, esquina inferior derecha */
.hv-pause {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  color: var(--gold-deep); font-size: .82rem; line-height: 1;
  display: grid; place-items: center; opacity: .55; transition: opacity .15s, border-color .15s;
}
.hv-pause:hover, .hv-pause:focus-visible { opacity: 1; border-color: var(--gold); }
.hv-pause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Edit-mode opacity control */
.hero-video-ctrl { margin: 26px auto 0; max-width: 340px; background: var(--card); border: 1px solid var(--gold-soft); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); text-align: left; }
.hero-video-ctrl .hvc-title { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); margin-bottom: 10px; }
.hvc-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: .8rem; color: var(--ink-soft); font-weight: 600; }
.hvc-row span { flex: 0 0 52px; }
.hvc-row input[type="range"] { flex: 1; accent-color: var(--gold); cursor: pointer; }
.hvc-row b { flex: 0 0 42px; text-align: right; color: var(--ink); }
.hero .hero-mark-wrap { position: relative; width: 78px; height: 78px; margin: 0 auto 22px; display: block; }
.hero .hero-mark { width: 78px; height: 78px; border-radius: 18px; display: block; position: relative; z-index: 2;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(201,162,75,.3); }
/* Gold shimmer: pulsing halo + slow light-sweep (illuminated-manuscript feel) */
.hero-mark-glow {
  position: absolute; inset: -16px; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(201,162,75,.55), rgba(201,162,75,.12) 55%, transparent 72%);
  filter: blur(7px); animation: heroGlow 3.8s ease-in-out infinite;
}
@keyframes heroGlow { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .85; transform: scale(1.08); } }
.hero-mark-sheen { position: absolute; inset: 0; z-index: 3; border-radius: 18px; overflow: hidden; pointer-events: none; }
.hero-mark-sheen::before {
  content: ''; position: absolute; top: -60%; left: 0; width: 36%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,246,214,.6), transparent);
  transform: rotate(18deg) translateX(-260%); animation: heroSheen 6s ease-in-out infinite;
}
@keyframes heroSheen { 0% { transform: rotate(18deg) translateX(-260%); } 22%, 100% { transform: rotate(18deg) translateX(520%); } }
body.theme-dark .hero-mark-glow {
  background: radial-gradient(circle, rgba(227,199,122,.6), rgba(227,199,122,.14) 55%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-glow { animation: none; opacity: .55; }
  .hero-mark-sheen::before { animation: none; opacity: 0; }
}
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin-bottom: .2em; }
.hero .lead { margin: 0 auto; }
.hero-verse {
  margin: 30px auto 0; max-width: 580px;
  font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; line-height: 1.45;
  color: var(--ink-accent); font-weight: 500;
}
.hero-verse cite { display: block; font-style: normal; font-size: .74rem; font-family: var(--font-body);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }
.hero-divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px auto 0; color: var(--gold); font-size: 1.05rem; }
.hero-divider::before, .hero-divider::after { content: ''; height: 1px; flex: 0 0 130px; width: 130px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-divider::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* ---------- Section header ---------- */
.section { margin: 44px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 20px; }
.grid-books { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }

.book-card {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px 24px 26px; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.book-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(var(--gold-soft), var(--gold));
}
.book-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-soft); }
.book-card .bc-meta { font-size: .68rem; color: var(--gold-deep); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.book-card .bc-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.015em; }
.book-card .bc-desc { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.book-card.locked { opacity: .5; filter: saturate(.5); pointer-events: none; }
.book-card.locked::after {
  content: attr(data-soon); position: absolute; top: 14px; right: 14px;
  background: var(--parchment-2); border: 1px solid var(--border);
  font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: var(--ink-faint);
}

/* ---------- Book page ---------- */
.book-hero {
  display: grid; gap: 18px;
  background: linear-gradient(135deg, var(--indigo-deep), var(--indigo) 72%, #3a4f86);
  color: #f4efe4; border-radius: 22px; padding: 42px 38px;
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.book-hero::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(201,162,75,.18), transparent 70%); pointer-events: none;
}
.book-hero h1 { color: #fff; margin-bottom: 8px; font-size: 2.9rem; }
.book-hero .eyebrow { color: var(--gold-foil); }
.book-hero p { color: #d6d2c6; max-width: 72ch; line-height: 1.75; margin: 0; font-size: 1.02rem; }
.stat-row { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 6px; }
.stat { display: flex; flex-direction: column; }
.stat b { font-size: 1.7rem; font-family: var(--font-display); color: var(--gold-foil); font-weight: 700; }
.stat span { font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; color: #aab2cc; margin-top: 2px; }

/* Primary reading CTA inside the indigo book hero */
.book-cta {
  display: inline-flex; align-items: center; gap: 14px; align-self: start;
  margin-top: 20px; text-decoration: none;
  background: linear-gradient(135deg, var(--gold-foil), var(--gold)); color: #3a2e12;
  font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  padding: 13px 22px; border-radius: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .18s, filter .18s, box-shadow .18s;
}
.book-cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 6px 18px rgba(0,0,0,.24); }
.book-cta-ch { font-weight: 700; opacity: .82; border-left: 1px solid rgba(58,46,18,.28); padding-left: 14px; }

/* «Continúa donde lo dejaste» — resume card on Home */
.resume-card {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--gold-soft); border-left: 4px solid var(--gold);
  border-radius: 14px; padding: 15px 20px; margin: 6px 0 8px;
  box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.resume-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.resume-ico { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.resume-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resume-eyebrow { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); }
.resume-book { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--indigo); letter-spacing: -.01em; }
body.theme-dark .resume-book { color: var(--gold-foil); }
.resume-go { margin-left: auto; flex: 0 0 auto; font-weight: 700; font-size: .82rem; color: var(--gold-deep); white-space: nowrap; }
/* Racha de lectura — chip discreto en la tarjeta de reanudar */
.streak-chip {
  flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold-foil) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}

.tabs { display: flex; gap: 4px; margin: 28px 0 22px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tab {
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: .9rem; color: var(--ink-soft);
  padding: 11px 17px; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--indigo); border-bottom-color: var(--gold); }
body.theme-dark .tab.active { color: var(--gold-foil); }

/* ---------- Chapters ---------- */
.chap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 11px; }
.chap-cell {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; transition: all .16s;
  box-shadow: 0 1px 2px rgba(43,33,24,.05);
}
.chap-cell:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--gold-deep); }
.chap-cell.done { background: color-mix(in srgb, var(--sage) 14%, var(--card)); border-color: color-mix(in srgb, var(--sage) 40%, var(--border)); }

.chap-list { display: flex; flex-direction: column; gap: 10px; }
.chap-item {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 15px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .18s, transform .18s;
}
.chap-item:hover { border-color: var(--gold-soft); transform: translateX(3px); }
.chap-num {
  flex: 0 0 46px; height: 46px; display: grid; place-items: center;
  background: var(--parchment-2); border-radius: 11px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--gold-deep);
}
.chap-item b { font-size: .96rem; font-weight: 700; }
.chap-item p { margin: 4px 0 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- Reader ---------- */
.reader-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 11px 15px; margin-bottom: 24px; box-shadow: var(--shadow);
  position: sticky; top: 67px; z-index: 10;
}
select {
  font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: .85rem;
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px;
  background: var(--card); cursor: pointer;
}
/* Version switcher — segmented pills (advertises parallel + interlinear) */
.ver-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px;
  background: var(--parchment-2); border: 1px solid var(--border); border-radius: 11px; }
.ver-pill {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem; color: var(--ink-soft);
  padding: 7px 13px; border-radius: 8px; transition: background .16s, color .16s, box-shadow .16s;
}
.ver-pill:hover:not(.active) { color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.ver-pill.active {
  background: var(--indigo); color: #fff; border-color: var(--indigo);
  box-shadow: 0 1px 3px rgba(27,36,64,.28);
}
body.theme-dark .ver-pill.active { background: var(--gold); color: #2a2210; border-color: var(--gold); }
.ver-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Tamaño de letra del lector (A− / A+) */
.fs-ctl { display: inline-flex; gap: 2px; padding: 3px; margin-left: auto;
  background: var(--parchment-2); border: 1px solid var(--border); border-radius: 11px; }
.fs-btn {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; color: var(--ink-soft);
  font-size: .78rem; padding: 6px 10px; border-radius: 8px; line-height: 1;
  transition: background .16s, color .16s;
}
.fs-btn.fs-big { font-size: .98rem; }
.fs-btn:hover:not(:disabled) { color: var(--ink); background: color-mix(in srgb, var(--gold) 14%, transparent); }
.fs-btn:disabled { opacity: .35; cursor: default; }
.fs-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.reader-title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; letter-spacing: -.02em; margin: 22px 0 4px; }
.reader-sub { color: var(--ink-faint); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; margin: 0 0 8px; }
/* La línea de edición va DEBAJO del resumen (dueño, 2026-08-27) → el aire lo dan estas dos,
   según haya nota de capítulo o no. La antigua «.reader-sub + .chapter-note» ya no casa. */
.chapter-note + .reader-sub { margin-top: 14px; }
.reader-title + .reader-sub { margin-top: 8px; }
/* ⚠ En PARALELO no hay .reader-sub (cada columna lleva su propia cabecera), así que la nota
   del capítulo queda pegada al título: .chapter-note nace con margin-top 0 y el aire se lo
   daba el subtítulo. Los 50 capítulos de Génesis llevan nota, o sea que se ve siempre. */
.reader-title + .chapter-note { margin-top: 18px; }

.verses { max-width: 66ch; margin: 8px auto 0; }
.verses.parallel { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
/* --fs-scale la pone el control A− / A+ del lector (js/app.js, persistido) */
.verse-block { font-family: var(--font-read); font-size: calc(1.27rem * var(--fs-scale, 1)); line-height: 1.9; color: var(--ink); }
.verse { margin: 0 0 3px; }
.verse sup {
  font-family: var(--font-body); font-size: .58rem; font-weight: 700; color: var(--gold-deep);
  margin-right: 8px; vertical-align: super; letter-spacing: .02em;
  font-feature-settings: "smcp";
}
.verse.hl { background: color-mix(in srgb, var(--gold-foil) 25%, transparent); border-radius: 4px; padding: 1px 4px; }
/* En vista simple el número abre copiar/compartir; en paralelo, la otra versión */
.verses .verse sup[data-v]:not(.v-first) { cursor: pointer; }
.verses .verse sup[data-v]:not(.v-first):hover { text-decoration: underline; }
.verse sup.v-first { display: none; } /* v.1: la letra capital marca el versículo; el «1» se omite (ancla invisible) */
/* Letra capital de manuscrito iluminado */
.dropcap {
  float: left; font-family: var(--font-display); font-weight: 700;
  font-size: 3.7rem; line-height: .82; padding: 6px 12px 0 0;
  color: var(--gold-deep);
  cursor: pointer; border-radius: 6px; transition: color .15s, background .15s;
}
/* El signo de apertura que precede a la primera letra («“», «“‘», «¿», «¡») va DENTRO de la capital, más pequeño y
   arriba (2026-09-13): fuera de ella, la capital flotaba a la izquierda y el signo quedaba detrás —«N“ow these are…»—.
   Lo mete js/app.js (versesHTML). */
.dropcap .dropcap-punct { font-size: .46em; vertical-align: .62em; line-height: 0; margin-right: .03em; }
/* La letra capital hace las veces del número del v.1 (que ocultamos): al tocarla se
   abre la hoja del versículo (copiar/nota/subrayar…). Fuera de Modo Edición. */
body:not(.editing) .dropcap:hover { color: var(--gold); background: color-mix(in srgb, var(--gold-foil) 22%, transparent); }
.parallel-head { font-family: var(--font-body); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-faint); border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: 14px; }
.loading { padding: 56px; text-align: center; color: var(--ink-faint); font-weight: 600; }
.loading::before { content: '✦'; display: block; font-size: 1.6rem; margin-bottom: 10px; color: var(--gold); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
/* Esqueleto de carga del lector (líneas fantasma en la medida de lectura) */
.loading-skel { max-width: 66ch; margin: 26px auto 0; }
.skel-line {
  display: block; height: 15px; border-radius: 7px; margin: 21px 0;
  background: linear-gradient(90deg, var(--parchment-2) 30%, color-mix(in srgb, var(--parchment-2) 45%, var(--card)) 45%, var(--parchment-2) 60%);
  background-size: 300% 100%; animation: skelShimmer 1.5s ease infinite;
}
@keyframes skelShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel-line { animation: none; } }
body.theme-dark .skel-line { background: linear-gradient(90deg, var(--parchment-2) 30%, color-mix(in srgb, var(--parchment-2) 60%, var(--card)) 45%, var(--parchment-2) 60%); background-size: 300% 100%; }
/* Cierre del capítulo: marcar leído + seguir, al terminar la lectura */
/* ⚠⚠ CIERRE DEL CAPÍTULO — LA FRANJA (2026-09-06 · opción B, decisión del dueño).
   Aquí había una TARJETA con borde dorado y, debajo, una `.reader-nav` de ancho
   completo cuyos dos botones se iban a los extremos: 587px de tarjeta contra
   1080 de fila, y dos botones índigo idénticos a 36px uno de otro. Ahora es una
   sola franja del ancho de la LECTURA (66ch, como el texto y como la cabecera
   del capítulo), sin caja: dos filetes y tres celdas. El dorado se retira —era
   el acento más fuerte del sistema gastado en un widget de administración,
   justo debajo de la tira «En este capítulo»— y vuelve solo cuando hay algo que
   celebrar: el capítulo marcado. */
.chapter-end {
  max-width: 66ch; margin: 44px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.chapter-end > * {
  display: flex; align-items: center; gap: 10px; padding: 16px 14px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 600;
  text-decoration: none; background: none; border: 0; cursor: pointer; color: var(--ink);
}
.chapter-end .ce-side { color: var(--ink-soft); }
.chapter-end .ce-prev { justify-content: flex-start; }
.chapter-end .ce-next { justify-content: flex-end; text-align: right; color: var(--ink-action); }
.chapter-end .ce-lbl { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
.chapter-end .ce-lbl small {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.chapter-end .ce-arrow { font-size: 1rem; line-height: 1; color: var(--ink-faint); }
.chapter-end .ce-next .ce-arrow { color: var(--ink-action); }
.chapter-end a:hover { color: var(--gold-deep); }
.chapter-end a:hover .ce-arrow { color: var(--gold-deep); }
/* La celda del medio: es un botón, pero no lleva caja — la franja ya la da. */
.chapter-end .ce-mid {
  justify-content: center; color: var(--ink-soft);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  transition: color .16s, background .16s;
}
.chapter-end .ce-mid:hover { color: var(--ink); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.chapter-end .ce-mid.is-read { color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 12%, transparent); }
body.theme-dark .chapter-end .ce-mid.is-read { color: var(--gold-foil); }
.chapter-end .ce-side:empty { padding: 0; }
/* El sitio en el libro, debajo de la franja: dato de `Progress.readCount`. */
/* ⚠ El `66ch` se mide con la fuente del ELEMENTO: a .62rem, 66ch da ~380px y la
   línea se partía en dos. Se declara a .88rem —la misma que la franja— para que
   las dos midan igual, y el tamaño pequeño va en los hijos. */
.ce-prog {
  max-width: 66ch; font-size: .88rem; margin: 12px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.ce-prog > span {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.ce-bar { flex: 0 1 190px; height: 3px; background: var(--border); border-radius: 3px; overflow: hidden; }
.ce-bar i { display: block; height: 100%; min-width: 6px; background: var(--gold-soft); border-radius: 3px; }
@container device (max-width: 760px) {
  /* En el teléfono la franja se apila: siguiente arriba (que es lo que casi
     siempre se quiere), marcar en medio, anterior al pie. */
  .chapter-end { grid-template-columns: 1fr; }
  .chapter-end .ce-next { order: 1; justify-content: center; text-align: center; }
  .chapter-end .ce-mid { order: 2; border-left: 0; border-right: 0;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .chapter-end .ce-prev { order: 3; justify-content: center; }
  .chapter-end .ce-side:empty { display: none; }
  .ce-prog { flex-wrap: wrap; gap: 8px; }
}
.chapter-note {
  background: color-mix(in srgb, var(--gold-foil) 12%, var(--card));
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: 11px; padding: 15px 19px; margin: 0 auto 24px; max-width: 66ch;
  font-family: var(--font-serif); font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6;
}
.chapter-note b { color: var(--ink-accent); font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: .88rem;
  padding: 10px 18px; border-radius: 11px; cursor: pointer; text-decoration: none;
  transition: all .18s;
}
.btn:hover { border-color: var(--gold); transform: translateY(-1px); }
.btn-primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); }
/* Oro = foil (texto tinta oscura, nunca blanco sobre oro) */
.btn-gold { background: linear-gradient(135deg, var(--gold-foil), var(--gold)); border-color: var(--gold); color: #3a2e12; }
.btn-gold:hover { filter: brightness(1.05); }
.btn-sm { padding: 6px 12px; font-size: .78rem; border-radius: 9px; }
.btn-danger { color: var(--ink-bad); border-color: color-mix(in srgb, var(--red) 30%, var(--border)); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Study sections ---------- */
.theme-card { border-top: 3px solid var(--gold-soft); }
.theme-card .refs, .person-card .refs, .custom-card .refs { font-size: .74rem; color: var(--gold-deep); font-weight: 700; margin-top: 10px; letter-spacing: .03em; }
/* En las fichas de Cultura, la referencia va tras los bloques origen/mandato: dale aire y un separador */
.custom-card .refs { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border); }
body.theme-dark .theme-card .refs, body.theme-dark .person-card .refs, body.theme-dark .custom-card .refs { color: var(--gold); }
.person-card { display: flex; flex-direction: column; gap: 5px; }
.person-card .who { font-size: .66rem; font-weight: 700; color: var(--indigo); text-transform: uppercase; letter-spacing: .12em; }
body.theme-dark .person-card .who { color: var(--gold-foil); }
.person-card h3 { font-size: 1.3rem; }
.person-card p { margin: 5px 0 0; font-size: .87rem; color: var(--ink-soft); line-height: 1.6; }
.orig-name {
  font-family: var(--font-serif); font-size: 1rem; color: var(--accent); line-height: 1.5;
  background: color-mix(in srgb, var(--gold-foil) 12%, var(--card));
  border: 1px solid var(--border); border-radius: 9px;
  padding: 6px 11px; margin: 3px 0;
}

.timeline { position: relative; margin: 10px 0 0; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-soft), var(--indigo)); }
.tl-item { position: relative; padding: 0 0 24px 16px; }
.tl-item::before {
  content: ''; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--card); border: 2px solid var(--gold);
}
.tl-item b { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.tl-item span.tl-ref { font-size: .68rem; color: var(--gold-deep); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tl-item p { margin: 5px 0 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.6; }

.outline-row { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.outline-row:last-child { border-bottom: none; }
.outline-row .o-ref { flex: 0 0 110px; font-weight: 700; font-size: .8rem; color: var(--gold-deep); letter-spacing: .04em; }
.outline-row .o-txt { font-size: .98rem; font-family: var(--font-serif); }

/* ---------- Games hub ---------- */
.game-card { position: relative; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 9px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--gold-soft); }
.game-card .g-icon { font-size: 1.7rem; color: var(--gold); }
.game-card h3 { font-size: 1.28rem; }
.game-card p { margin: 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.game-card .g-count { font-size: .66rem; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .12em; }
.best-score { position: absolute; top: 16px; right: 16px; background: color-mix(in srgb, var(--sage) 16%, var(--card)); color: var(--green); border: 1px solid color-mix(in srgb, var(--sage) 40%, var(--border)); border-radius: 999px; font-size: .66rem; font-weight: 700; padding: 4px 10px; }

.game-shell { max-width: 760px; margin: 0 auto; }
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; font-weight: 600; }
.progress-track { height: 6px; background: var(--parchment-2); border-radius: 99px; overflow: hidden; margin: 6px 0 24px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); border-radius: 99px; transition: width .4s ease; }

.q-text { font-size: 1.42rem; font-weight: 600; font-family: var(--font-display); margin-bottom: 6px; line-height: 1.25; letter-spacing: -.01em; }
.q-ref { font-size: .72rem; color: var(--gold-deep); font-weight: 700; margin-bottom: 18px; letter-spacing: .06em; text-transform: uppercase; }
.opts { display: grid; gap: 11px; }
.opt {
  text-align: left; border: 1.5px solid var(--border); background: var(--card);
  border-radius: 13px; padding: 14px 18px; cursor: pointer;
  font-family: var(--font-body); font-size: .96rem; font-weight: 500; color: var(--ink);
  transition: all .16s;
}
.opt:hover:not(:disabled) { border-color: var(--indigo); transform: translateX(3px); }
.opt.correct { border-color: var(--green); background: color-mix(in srgb, var(--sage) 14%, var(--card)); }
.opt.wrong { border-color: var(--red); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.opt:disabled { cursor: default; }
.feedback { margin: 16px 0; font-weight: 600; font-size: .95rem; min-height: 24px; line-height: 1.5; }
.feedback.good { color: var(--ink-good); }
.feedback.bad { color: var(--ink-bad); }

/* Versículo de referencia EN VIVO (modernizado) mostrado tras responder el quiz.
   Se surte de Bible.loadChapter + Modernize, igual que el lector. */
.q-verse { margin: 6px 0 18px; padding: 12px 16px; border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 8%, var(--card)); border-radius: 0 10px 10px 0; }
.q-verse-text { margin: 0; font-family: var(--font-read); font-size: 1.05rem;
  line-height: 1.75; color: var(--ink); }
.q-verse-n { font-size: .62em; font-weight: 700; color: var(--gold-deep); vertical-align: super; margin-right: 1px; }
.q-verse-src { margin-top: 8px; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint, var(--gold-deep)); font-weight: 700; }

.result-panel { text-align: center; padding: 36px 20px; }
.result-panel .big { font-size: 3.6rem; font-family: var(--font-display); font-weight: 700; color: var(--indigo); }
body.theme-dark .result-panel .big { color: var(--gold-foil); }
.result-panel .medal { font-size: 3rem; }

/* fill-blank */
.fb-verse { font-family: var(--font-serif); font-size: 1.5rem; line-height: 2.1; }
.fb-slot {
  display: inline-block; min-width: 92px; border-bottom: 2px solid var(--gold);
  text-align: center; font-weight: 600; color: var(--indigo); margin: 0 3px;
  border-radius: 4px; padding: 0 7px; font-family: var(--font-body); font-size: 1rem;
}
body.theme-dark .fb-slot { color: var(--gold-foil); }
.fb-slot.filled { background: color-mix(in srgb, var(--indigo) 8%, transparent); cursor: pointer; }
.fb-slot.filled:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); text-decoration: line-through; opacity: .85; } /* clic = quitar la palabra */
.fb-slot.good, .fb-slot.bad { cursor: default; } /* tras corregir ya no se quita */
.fb-slot.good { background: color-mix(in srgb, var(--sage) 16%, transparent); border-color: var(--green); color: var(--green); }
.fb-slot.bad { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: var(--red); color: var(--red); text-decoration: line-through; }
.word-bank { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.bank-word {
  border: 1px solid var(--border); background: var(--card); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: all .16s; font-family: var(--font-body);
}
.bank-word:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); }
.bank-word:disabled { opacity: .3; cursor: default; }

/* match */
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.match-item {
  border: 1.5px solid var(--border); background: var(--card); border-radius: 13px;
  padding: 13px 16px; cursor: pointer; font-weight: 500; font-size: .9rem; text-align: left;
  font-family: var(--font-body); color: var(--ink); transition: all .16s;
}
.match-item:hover:not(:disabled) { border-color: var(--indigo); }
.match-item.sel { border-color: var(--indigo); background: color-mix(in srgb, var(--indigo) 8%, var(--card)); }
.match-item.paired { border-color: var(--green); background: color-mix(in srgb, var(--sage) 14%, var(--card)); opacity: .6; cursor: default; }
.match-item.shake { animation: shake .35s; border-color: var(--red); }
@keyframes shake { 25% { transform: translateX(-5px);} 75% { transform: translateX(5px);} }

/* order */
.order-list { display: flex; flex-direction: column; gap: 11px; }
.order-item {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid var(--border); background: var(--card); border-radius: 13px;
  padding: 13px 16px; cursor: grab; font-weight: 500; font-size: .93rem;
  user-select: none; transition: border-color .16s, background .16s;
}
.order-item.dragging { opacity: .5; border-style: dashed; }
.order-item .oi-handle { color: var(--ink-faint); font-size: 1.1rem; cursor: grab; }
.order-item .oi-btns { margin-left: auto; display: flex; gap: 4px; }
.order-item.good { border-color: var(--green); background: color-mix(in srgb, var(--sage) 14%, var(--card)); }
.order-item.bad { border-color: var(--red); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }

/* ---------- Edit mode ---------- */
body.editing [data-edit] {
  outline: 1.5px dashed var(--indigo); outline-offset: 3px;
  cursor: pointer; border-radius: 4px;
  transition: outline-color .15s, background .15s; position: relative;
}
body.editing [data-edit]:hover { background: color-mix(in srgb, var(--indigo) 8%, transparent); outline-color: var(--gold); }
.edit-tools { display: none; }
body.editing .edit-tools { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; }
.edit-chip {
  border: 1px solid var(--indigo); color: var(--indigo); background: var(--card);
  font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; cursor: pointer;
}
.edit-chip:hover { background: var(--indigo); color: #fff; }
.edit-chip.danger { border-color: var(--red); color: var(--ink-bad); }
.edit-chip.danger:hover { background: var(--red); color: #fff; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(20,16,10,.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 18px;
}
.modal {
  width: 100%; max-width: 640px; max-height: 86vh; overflow: auto;
  background: var(--card); border-radius: 20px; padding: 28px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.modal h3 { margin-top: 0; }

/* ---------- El libro que todavía no está abierto ----------
   Usa `.modal-backdrop` y `.modal` tal cual; esto es solo lo de DENTRO.
   ⚠ Antes de esto, quien tocaba un libro cerrado era devuelto al inicio EN
   SILENCIO (una línea de `render()` que cambiaba el hash), sin una palabra que
   explicara por qué. Lo que se añade no es un adorno: es la explicación que
   faltaba. */
.shut-eyebrow {
  display: flex; align-items: center; gap: 10px; color: var(--gold-deep);
  font-size: .62rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
}
.shut-eyebrow svg { flex: none; }
.shut-title {
  font-family: var(--font-serif); font-size: 1.7rem; line-height: 1.15;
  color: var(--ink); margin: 14px 0 0; max-width: 22ch;
}
.shut-body { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); margin: 12px 0 0; }
.shut-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.shut-go {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--gold-deep); background: var(--gold); color: #1b2440;
  text-decoration: none;
}
.shut-go:hover { opacity: .92; }
/* El corazón, dibujado y en el rojo de la landing: es el mismo gesto y tiene
   que verse igual en los dos sitios. Decorativo — el botón lo dice con su texto. */
.shut-go .heart { flex: none; color: #d13c2e; }
.shut-stay {
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: 11px 18px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border); background: transparent; color: var(--ink-soft);
}
.shut-stay:hover { border-color: var(--gold); color: var(--ink); }
.shut-free { font-size: .8rem; color: var(--ink-faint); margin: 16px 0 0; line-height: 1.55; }

/* ── La misma cerradura, vista por quien YA aportó ──────────────────────────
   No se esconde nada: se invierte la jerarquía. Seguir leyendo pasa a ser el
   botón sólido (es lo que esa persona quiere hacer) y aportar otra vez baja a
   un enlace de texto en el pie. */
.shut-stay-primaria {
  border-color: var(--gold-deep); background: var(--gold); color: #1b2440;
  font-size: .88rem; font-weight: 700; padding: 11px 20px;
}
.shut-stay-primaria:hover { opacity: .92; border-color: var(--gold-deep); color: #1b2440; }
/* ⚠ El color se declara aquí y no se hereda del `<p>`: un enlace sin color
   propio lo pinta el navegador de azul (rule-2026-09-02-la-tinta-que-nadie-eligio). */
.shut-mas { color: var(--ink-faint); text-decoration: underline; text-underline-offset: 2px; }
.shut-mas:hover { color: var(--ink-soft); }
@media (max-width: 520px) {
  .shut-title { font-size: 1.45rem; }
  .shut-acts { gap: 10px; }
  .shut-go, .shut-stay { width: 100%; justify-content: center; }
}
.field { margin-bottom: 15px; }
.field label { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 6px; }
.field input[type="text"], .field textarea, .field select {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font-family: var(--font-body); font-size: .92rem; color: var(--ink);
  background: var(--card);
}
.field textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.opt-edit-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.opt-edit-row input[type="text"] { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: .9rem; }
.opt-edit-row input[type="radio"] { accent-color: var(--green); width: 18px; height: 18px; }
.hint { font-size: .76rem; color: var(--ink-faint); margin-top: 4px; line-height: 1.5; }

/* ---------- Costumbres / Manners & Customs ---------- */
.custom-card { padding: 0; overflow: hidden; }
.custom-imgbox { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--indigo-deep), #5a4a7a 55%, var(--gold)); }
.custom-ph { position: absolute; font-size: 2.4rem; opacity: .6; }
.custom-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.custom-body { padding: 14px 16px 16px; }
.culture-cat { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.custom-cmd { margin: 8px 0 0; padding: 8px 11px; font-size: .9rem; line-height: 1.45; color: var(--ink); background: color-mix(in srgb, var(--gold) 12%, transparent); border-left: 3px solid var(--gold); border-radius: 6px; }
.custom-cmd-tag { display: inline-block; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep, #8a6d1f); margin-right: 6px; }
body.theme-dark .custom-cmd-tag { color: var(--gold); }
.custom-origin { margin: 8px 0 0; padding: 8px 11px; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); background: var(--parchment-2); border-left: 3px solid var(--ink-faint); border-radius: 6px; }
.custom-origin-tag { display: inline-block; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin-right: 6px; }
body.theme-dark .custom-origin-tag { color: var(--ink-soft); }

/* Botón flotante "Volver al mapa" en el lector / floating back-to-map button */
.map-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: none; border-radius: 999px;
  background: var(--indigo); color: #fff;
  font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 20px rgba(20, 16, 10, .30); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
}
.map-fab:hover { transform: translateY(-2px); background: var(--indigo-deep); box-shadow: 0 12px 28px rgba(20, 16, 10, .38); }
.map-fab .fab-ico { font-size: 1.15rem; line-height: 1; }
body.theme-dark .map-fab { background: var(--gold); color: var(--indigo-deep); }
body.theme-dark .map-fab:hover { background: var(--gold-soft); }
@media (max-width: 760px) { .map-fab { right: 14px; bottom: 14px; padding: 11px 16px; font-size: .9rem; } }
/* En la vista 📱 (simulación en escritorio) el marco mide 393px y va centrado:
   anclamos el FAB a la esquina del marco, no a la ventana del navegador.
   En un teléfono real, position:fixed ya se ancla a la pantalla correctamente. */
body.phone-preview .map-fab { right: calc(50% - 178px); bottom: 42px; padding: 11px 16px; font-size: .9rem; }

/* Botón flotante "Cambiar versión / ir arriba" en el lector — abajo-IZQUIERDA (no choca con el de la derecha) */
.top-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 1px solid var(--line, rgba(120,120,120,.25)); border-radius: 999px;
  background: var(--card, #fff); color: var(--ink, #1a1a1a);
  font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 20px rgba(20, 16, 10, .22); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.top-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 16, 10, .30); }
.top-fab .fab-ico { font-size: 1.05rem; line-height: 1; color: var(--gold-foil, #b8860b); }
body.theme-dark .top-fab { background: var(--indigo, #1b1f3b); color: #fff; border-color: rgba(255,255,255,.14); }
@media (max-width: 760px) { .top-fab { left: 14px; bottom: 14px; padding: 10px 14px; font-size: .86rem; } }
@media (max-width: 760px) { .top-fab span:not(.fab-ico) { display: none; } } /* en móvil solo la flecha */
body.phone-preview .top-fab { left: calc(50% - 178px); bottom: 42px; padding: 10px 14px; font-size: .86rem; }

/* Botón flotante "Subir" en el mapa — abajo-IZQUIERDA. El mapa llena la pantalla y captura el
   arrastre/rueda, así que este FAB fijo da siempre una salida para volver arriba (sobre todo en móvil).
   Solo existe mientras se muestra el mapa (lo pinta map.js); no coincide con el .top-fab del lector. */
.map-up-fab {
  position: fixed; left: 22px; bottom: 22px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 1px solid var(--line, rgba(120,120,120,.25)); border-radius: 999px;
  background: var(--card, #fff); color: var(--ink, #1a1a1a);
  font-family: var(--sans, Inter, system-ui, sans-serif); font-weight: 700; font-size: .92rem;
  box-shadow: 0 6px 20px rgba(20, 16, 10, .22); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.map-up-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 16, 10, .30); }
.map-up-fab .fab-ico { font-size: 1.05rem; line-height: 1; color: var(--gold-foil, #b8860b); }
body.theme-dark .map-up-fab { background: var(--indigo, #1b1f3b); color: #fff; border-color: rgba(255,255,255,.14); }
@media (max-width: 760px) { .map-up-fab { left: 14px; bottom: 14px; padding: 10px 14px; font-size: .86rem; } }
@media (max-width: 760px) { .map-up-fab span:not(.fab-ico) { display: none; } } /* en móvil solo la flecha */
body.phone-preview .map-up-fab { left: calc(50% - 178px); bottom: 42px; padding: 10px 14px; font-size: .86rem; }

/* ---------- Map ---------- */
.map-wrap { position: relative; }
.map-searchbar {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 11px 20px; box-shadow: var(--shadow);
  max-width: 540px; margin: 0 auto 14px;
}
.map-searchbar .ms-icon { opacity: .55; }
.map-searchbar input { flex: 1; border: none; outline: none; font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: transparent; }
.map-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow-lg); overflow: hidden; max-height: 340px; overflow-y: auto;
}
.mdd-group { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); padding: 11px 17px 4px; }
.mdd-item { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; text-align: left; border: none; background: none; cursor: pointer; padding: 10px 17px; font-family: var(--font-body); font-size: .9rem; color: var(--ink); }
.mdd-item:hover { background: var(--parchment-2); }
.mdd-item span { font-size: .7rem; color: var(--gold-deep); font-weight: 700; white-space: nowrap; }
.map-viewtabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.map-viewtab { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: 7px 18px; font-family: var(--font-body); font-size: .8rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.map-viewtab.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.map-stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--parchment-2); height: min(72vh, 680px); }
.map-stage svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.map-stage svg:active { cursor: grabbing; }
.map-pin { cursor: pointer; }
.map-pin .pin-halo { fill: #fbf7ec; opacity: .92; filter: drop-shadow(0 1.5px 2px rgba(38,28,12,.45)); }
.map-pin .pin-dot { fill: var(--gold); stroke: #fffdf7; stroke-width: 1.5; transition: fill .15s ease; }
.map-pin .pin-core { fill: var(--indigo); transition: fill .15s ease; }
.map-pin .pin-label { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .2px; fill: #3a2f22; paint-order: stroke; stroke: #f7f0dd; stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.map-pin:hover .pin-dot, .map-pin.sel .pin-dot { fill: var(--indigo); }
.map-pin:hover .pin-core, .map-pin.sel .pin-core { fill: var(--gold); }
.map-pin.sel .pin-label { fill: var(--indigo); }
.map-pin .pin-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .85; animation: pinPulse 1.7s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pinPulse { 0% { transform: scale(.45); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* --- Los nombres de los lugares del mapa del Estudio (propuesta 3C, 2026-09-29) ---
   js/map_labels.js decide qué nombre va al lado de su punto y cuál a una columna con una
   curva; aquí solo el aspecto. Todo va en píxeles de pantalla: el grupo lleva scale(1/zoom).
   Tema claro: curvas índigo, capítulo en índigo. Tema oscuro: curvas y capítulo dorados, y la
   lámina se oscurece para que los nombres claros se lean. */
.mp-leaders .mleader { fill: none; stroke: #2c3e6b; stroke-opacity: .42; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; transition: stroke-opacity .15s ease; pointer-events: none; }
.mp-leaders.has-focus .mleader { stroke-opacity: .16; }
.mp-leaders.has-focus .mleader.on { stroke: #1b2440; stroke-opacity: 1; stroke-width: 2; }
.mp .mp-dot { fill: var(--gold); stroke: #fffdf7; stroke-width: 1.8; filter: drop-shadow(0 1px 1.5px rgba(38,28,12,.45)); transition: fill .15s ease; }
.mp.sel .mp-dot, .mp.on .mp-dot { fill: #2c3e6b; stroke: #e3c77a; stroke-width: 2.4; }
.mp .mp-pulse { fill: none; stroke: var(--gold); stroke-width: 1.5; opacity: .85; animation: pinPulse 1.7s infinite; transform-origin: center; transform-box: fill-box; }
.mp .mp-name { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600; fill: #2a2622; paint-order: stroke; stroke: #f7f0dd; stroke-width: 3.4px; stroke-linejoin: round; pointer-events: none; }
.mp .mp-ch rect { fill: rgba(255,253,247,.92); stroke: rgba(44,62,107,.45); stroke-width: 1; }
.mp .mp-ch text { font-family: 'Inter', system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; fill: #2c3e6b; pointer-events: none; }
.mp .mp-hit { fill: transparent; }
.map-labels text.mp-under { opacity: .22; }
.mp .mp-ch { display: none; }
.mp.mp-measure .mp-ch { display: inline; }
.mp.on .mp-ch, .mp-lab.sel .mp-ch { display: inline; }
.mp-layer.has-focus .mp { opacity: .5; transition: opacity .15s ease; }
.mp-layer.has-focus .mp.on, .mp-layer.has-focus .mp.sel { opacity: 1; }
.mp.on .mp-name { font-size: 13.5px; font-weight: 700; fill: #1b2440; }
.mp.on .mp-ch rect { fill: #2c3e6b; stroke: #2c3e6b; }
.mp.on .mp-ch text { fill: #fbf7ec; }
body.theme-dark .map-wrap .map-stage .map-base image { filter: brightness(.58) saturate(.82) contrast(1.06); }
/* los rótulos fijos de la lámina (regiones en Inter, aguas en cursiva), en tinta clara sobre la lámina oscurecida */
body.theme-dark .map-wrap .map-labels text { fill: #e6dcc6; stroke: #10162b; opacity: .78; }
body.theme-dark .map-wrap .map-labels text[font-style="italic"] { fill: #8fb8c9; }
body.theme-dark .map-wrap .map-labels text.mp-under { opacity: .2; }
/* el papel que asoma alrededor de la lámina (cuando el marco no tiene su misma proporción) */
body.theme-dark .map-wrap .map-stage .map-base > rect:first-child { fill: #1b2440; }
body.theme-dark .mp-leaders .mleader { stroke: #dcc079; stroke-opacity: .5; }
body.theme-dark .mp-leaders.has-focus .mleader { stroke-opacity: .2; }
body.theme-dark .mp-leaders.has-focus .mleader.on { stroke: #f3e3b5; stroke-opacity: 1; }
body.theme-dark .mp .mp-dot { fill: #e3c77a; stroke: #161d33; filter: drop-shadow(0 0 3px rgba(227,199,122,.55)); }
body.theme-dark .mp.sel .mp-dot, body.theme-dark .mp.on .mp-dot { fill: #f3e3b5; stroke: #161d33; }
body.theme-dark .mp .mp-name { fill: #ece4d4; stroke: #10162b; }
body.theme-dark .mp .mp-ch rect { fill: rgba(22,29,51,.85); stroke: rgba(227,199,122,.55); }
body.theme-dark .mp .mp-ch text { fill: #dcc079; }
body.theme-dark .mp.on .mp-name { fill: #f3e3b5; }
body.theme-dark .mp.on .mp-ch rect { fill: #e3c77a; stroke: #e3c77a; }
body.theme-dark .mp.on .mp-ch text { fill: #161d33; }
/* --- Recorrido de personaje / character journey trail --- */
.map-trail .jtrail-casing { fill: none; stroke: #fffaf0; stroke-width: 6; opacity: .65; stroke-linecap: round; stroke-linejoin: round; }
.map-trail .jtrail { fill: none; stroke: #a4161a; stroke-width: 3; opacity: .5; stroke-linecap: round; stroke-linejoin: round; }
.map-trail .jtrail-flow { fill: none; stroke: #e5383b; stroke-width: 4; opacity: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 11; animation: jtrailFlow 1s linear infinite; }
@keyframes jtrailFlow { to { stroke-dashoffset: -18; } }
.map-pin.jstop .jstop-disc { fill: var(--gold); stroke: #fffdf7; stroke-width: 1.5; transition: fill .15s ease; }
.map-pin.jstop .jstop-num { font-family: 'Inter', system-ui, sans-serif; font-size: 10px; font-weight: 700; fill: var(--indigo); pointer-events: none; }
.map-pin.jstop:hover .jstop-disc, .map-pin.jstop.sel .jstop-disc { fill: var(--indigo); }
.map-pin.jstop:hover .jstop-num, .map-pin.jstop.sel .jstop-num { fill: var(--gold); }
/* Etiquetas de parada: tenues y pequeñas en reposo; grandes y en negrita al activar/hover */
.map-pin.jstop .pin-label { font-size: 12px; font-weight: 600; opacity: .42; transition: opacity .15s ease, font-size .15s ease; }
.map-pin.jstop:hover .pin-label, .map-pin.jstop.sel .pin-label { font-size: 16px; font-weight: 800; opacity: 1; }
.map-pin.jstop:hover .jstop-disc, .map-pin.jstop.sel .jstop-disc { r: 11.5; }
.map-pin.jstop:hover .pin-halo, .map-pin.jstop.sel .pin-halo { r: 13.5; }
.map-journeytab { font-style: italic; }
.md-step { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.md-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.person-journey { display: inline-block; margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--indigo); text-decoration: none; }
.person-journey:hover { color: var(--gold); }
.person-prophecies { display: block; }

/* ---- Página de Profecías mesiánicas (#/prophecies) ---- */
.proph-view { max-width: 900px; }
.proph-title { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 4px; }
.proph-sub { color: var(--ink-faint); font-size: .98rem; margin: 0 0 14px; }
.proph-intro { background: color-mix(in srgb, var(--gold) 8%, var(--card)); border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; padding: 14px 18px; font-size: .95rem;
  line-height: 1.6; color: var(--ink); margin-bottom: 26px; }
.proph-section { margin-bottom: 30px; }
.proph-section > h2 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--gold-deep);
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 6px; margin-bottom: 16px; }
.proph-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 12px; }
.proph-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.proph-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  border-radius: 50%; background: var(--indigo); color: #fff; font-weight: 700; font-size: .82rem; padding: 0 6px; }
.proph-badge { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--gold-deep); background: color-mix(in srgb, var(--gold) 16%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 999px; padding: 3px 9px; }
.proph-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proph-pane { min-width: 0; }
.proph-at { border-right: 1px solid var(--border); padding-right: 14px; }
.proph-pane-h { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); font-weight: 700; margin-bottom: 4px; }
.proph-text { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin: 0 0 6px; }
.proph-ref { font-size: .78rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .02em; }
.proph-ref-link { background: none; border: 0; padding: 0; margin: 0; font-family: inherit; text-align: left;
  cursor: pointer; border-bottom: 1px dashed currentColor; }
.proph-ref-link:hover, .proph-ref-link:focus-visible { color: var(--gold); outline: none; }
.proph-note { margin-top: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--indigo) 7%, var(--card));
  border-radius: 8px; font-size: .84rem; line-height: 1.5; color: var(--ink-faint); }
.proph-notes ul { margin: 0; padding-left: 18px; }
.proph-notes li { font-size: .88rem; line-height: 1.6; color: var(--ink-faint); margin-bottom: 10px; }
.proph-note-p { font-size: .9rem; line-height: 1.6; color: var(--ink-faint); margin: 0 0 10px; }
@media (max-width: 620px) {
  .proph-cols { grid-template-columns: 1fr; gap: 10px; }
  .proph-at { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
}
body.phone-preview .proph-cols { grid-template-columns: 1fr; gap: 10px; }
body.phone-preview .proph-at { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
/* ---- Armonía (Tool 4): título del episodio sobre las dos columnas de refs ---- */
.harm-ev { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.45; color: var(--ink); font-weight: 600; }
.harm-only { color: var(--ink-faint); }
/* ---- Nombres de Dios (Tool 3): fichas de nombre ---- */
.name-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.name-orig { font-family: "Frank Ruhl Libre", "Cormorant Garamond", serif; font-weight: 500; font-size: .96rem; color: var(--gold-deep); margin-inline-start: 6px; }
.name-row { display: flex; gap: 10px; font-size: .9rem; line-height: 1.55; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 14%, transparent); padding: 8px 0 0; margin-top: 8px; }
.name-row .name-k { flex: none; width: 8em; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; font-weight: 700; padding-top: 3px; }
.name-saying { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.6; color: var(--ink); margin: 2px 0 10px; }
.name-refline { margin-top: 10px; }

/* ============================================================
   LOS NOMBRES DE DIOS (#/names) — «lámina de museo» + los siete «Yo soy» en griego
   ------------------------------------------------------------
   2026-09-07, elección del dueño: modelo 3 para los nombres y opción A para las
   declaraciones. La idea de la página es UNA: la palabra en su propia escritura manda.
   Hasta hoy la letra hebrea iba a .96rem pegada detrás del título español —lo más
   pequeño de la ficha siendo el punto de la página—; ahora es la cara de la lámina, a
   3,1 rem, sobre pergamino y tras un filete de oro.
   ⚠ Los siete «Yo soy» usan EL MISMO componente: en el sitio de la letra hebrea va el
   PREDICADO GRIEGO (ὁ ποιμὴν ὁ καλός), que es lo que cambia entre las siete —todas
   empiezan por la misma fórmula ἐγώ εἰμι, y ésa va arriba, tras su propio filete—.
   Las dos clases de ficha dejan de ser primas lejanas y pasan a ser la misma.
   ⚠ NO se toca el bloque `.name-*` de arriba: lo comparten «Los testigos» y «Donde los
   testigos difieren», que siguen usando `.card.name-card` y `.name-saying`.
   ⚠ Cortes en `@container device`, nunca en `@media` (UI_STYLEGUIDE §8).
   ============================================================ */
.nm-view { max-width: 1040px; }
.nm-title { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; letter-spacing: -.024em; margin: 4px 0 6px; }
.nm-sub { color: var(--ink-faint); font-size: .98rem; margin: 0 0 14px; }
.nm-lead { max-width: 70ch; font-size: 1rem; line-height: 1.72; color: var(--ink-soft); margin: 0 0 8px; }
.nm-sech { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 32px 0 16px; }
.nm-sech h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--gold-deep); margin: 0; }
.nm-sech .nm-r { flex: 1; min-width: 30px; height: 1px; background: var(--gold-soft); }
.nm-sech .nm-n { font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }

/* La lámina: la palabra a la izquierda, lo que hay que saber a la derecha. */
.nm-plate { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.nm-face { background: var(--parchment-2); border-right: 1px solid var(--gold-soft); padding: 30px 28px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.nm-heb { font-family: var(--font-heb); font-weight: 500; font-size: 3.1rem; line-height: 1.18;
  color: var(--gold-deep); direction: rtl; unicode-bidi: isolate; text-align: center; margin: 0; }
/* El predicado griego hace en la declaración lo que la letra hebrea hace en el nombre. */
.nm-grk { font-family: var(--font-read); font-size: 2.35rem; line-height: 1.22; color: var(--gold-deep); margin: 0; }
.nm-formula { font-family: var(--font-read); font-size: 1rem; color: var(--ink-soft); letter-spacing: .02em;
  width: 100%; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-soft); }
.nm-formula small { display: block; font-family: var(--font-body); font-size: .55rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }
.nm-tr { font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin: 12px 0 0; }
.nm-name { font-family: var(--font-display); font-size: 1.42rem; font-weight: 700; color: var(--ink);
  width: 100%; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--gold-soft); }
.nm-body { padding: 26px 28px; display: flex; flex-direction: column; }
/* La declaración trae menos que un nombre: su cuerpo se centra para que la banda no quede coja. */
.nm-body.nm-mid { justify-content: center; }
.nm-stats { display: flex; gap: 34px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); }
.nm-stat .nm-k { display: block; font-size: .55rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.nm-stat .nm-v { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700;
  color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.nm-stat .nm-v small { font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.nm-stat .nm-v .nm-gk { font-family: var(--font-read); font-weight: 400; color: var(--ink); }
.nm-mean { font-size: .96rem; line-height: 1.62; color: var(--ink); margin: 0 0 12px; max-width: 62ch; }
.nm-ctx { font-size: .9rem; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 66ch;
  padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); }
.nm-say { font-family: var(--font-read); font-size: 1.24rem; line-height: 1.62; color: var(--ink); margin: 0; max-width: 62ch; }
/* La referencia la pinta `refInline()`, que es de toda la app: aquí se le da forma de
   pastilla dorada SIN tocar la regla global que comparten las otras páginas. */
.nm-refline { margin-top: 16px; }
.nm-refline .proph-ref { display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1px solid var(--gold-soft);
  border-radius: 8px; padding: 3px 9px; }
.nm-refline .proph-ref-link:hover { border-color: var(--gold); color: var(--gold-deep); }

@container device (max-width: 760px) {
  .nm-title { font-size: 1.74rem; }
  .nm-sech h2 { font-size: 1.12rem; }
  .nm-plate { grid-template-columns: 1fr; }
  .nm-face { border-right: 0; border-bottom: 1px solid var(--gold-soft); padding: 24px 20px; }
  .nm-heb { font-size: 2.6rem; }
  .nm-grk { font-size: 1.95rem; }
  .nm-name { font-size: 1.24rem; }
  .nm-body { padding: 20px; }
  .nm-stats { gap: 20px; }
  .nm-say { font-size: 1.1rem; }
  .nm-refline .proph-ref { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 620px) { .name-row { flex-direction: column; gap: 2px; } .name-row .name-k { width: auto; } }

/* ============================================================
   DONDE LOS TESTIGOS DIFIEREN (#/variants) — «la lámina»
   ------------------------------------------------------------
   2026-09-09, elección del dueño sobre tres modelos dibujados el mismo día.

   ANTES: una tarjeta `.card.name-card` con una frase y un ancla, en rejilla de
   dos. La frase decía cosas como «ὁ μονογενὴς θεός, "el unigénito Dios", donde
   las dos lecturas dicen "Hijo"», y el lector no podía saber de quién era cada
   cosa: **«lectura» tiene dos sentidos que se pisan** —en crítica textual es una
   variante de manuscrito, en esta app es el texto corrido que se lee, y hay dos—
   así que leída en el primer sentido la frase se contradecía sola. Y la segunda
   línea, rotulada «En la lectura», salía del ANCLA de la etiqueta, que no
   siempre es la palabra de la variante: en Jn 4:1 la variante es «Jesús / el
   Señor» y el ancla dice «entendió».

   AHORA: una LÁMINA por sitio, el mismo componente que «Los nombres de Dios».
   La palabra griega es la cara; al lado, UNA FILA POR TESTIGO con su nombre
   delante. Nombrados los testigos, la palabra «lectura» no tiene que decidir
   nada. La cara solo se pinta cuando `content/variants_data.js` —derivado del
   TAGNT, no escrito a mano— confirma que esa palabra lleva de verdad la
   variante; si no, la lámina va en su modo PASAJE y enseña la referencia.

   ⚠ Cortes en `@container device`, nunca en `@media` (UI_STYLEGUIDE §8).
   ⚠ Toda la tinta va por `--ink-*`, nunca por el color de relleno
   (`rule-2026-08-29-la-tinta-va-por-ink-y-no-por-el-color-de-relleno`).
   ============================================================ */
.vr-plate { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.vr-face { background: var(--parchment-2); border-right: 1px solid var(--gold-soft);
  padding: 26px 24px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.vr-rule { width: 46px; height: 2px; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.vr-word { font-family: var(--font-read); font-size: 2.3rem; line-height: 1.2;
  color: var(--gold-deep); margin: 0; overflow-wrap: anywhere; }
/* Modo PASAJE: cuando lo que difiere no es una palabra sino un tramo, la cara la
   ocupa el tramo. Va en la tipografía de título, no en la de lectura: no es una
   palabra del original, es una referencia. */
.vr-passage { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.16; color: var(--gold-deep); margin: 0; }
.vr-tr { font-family: var(--font-read); font-style: italic; font-size: .98rem; color: var(--ink-faint); margin: 0; }
.vr-face-k { font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 2px 0 0; }
.vr-body { padding: 22px 24px; display: flex; flex-direction: column; }
.vr-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; padding-bottom: 4px; }
.vr-ref { font-family: var(--font-display); font-size: 1.28rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); }
.vr-row { display: flex; gap: 12px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.vr-k { flex: none; width: 9.6em; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); padding-top: 4px; line-height: 1.45; }
/* La fila del griego es la que manda en la lámina, y se distingue por la tinta. */
.vr-k-gr { color: var(--gold-deep); }
.vr-v { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.55; color: var(--ink); min-width: 0; }
.vr-v em { font-family: var(--font-read); font-style: italic; color: var(--ink-faint); font-size: .92em; }
.vr-eds { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vr-ed { font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-faint); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; }
.vr-what { font-size: .92rem; line-height: 1.64; color: var(--ink-soft); min-width: 0; }
.vr-refline { margin-top: 16px; }
.vr-refline .proph-ref { display: inline-flex; align-items: center; gap: 5px;
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); border: 1px solid var(--gold-soft);
  border-radius: 8px; padding: 3px 9px; }
.vr-refline .proph-ref-link:hover { border-color: var(--gold); color: var(--gold-deep); }
.vr-foot { font-size: .78rem; line-height: 1.6; color: var(--ink-faint); margin: 4px 0 0; }

@container device (max-width: 760px) {
  .vr-plate { grid-template-columns: 1fr; }
  .vr-face { border-right: 0; border-bottom: 1px solid var(--gold-soft); padding: 22px 20px; }
  .vr-word { font-size: 1.94rem; }
  .vr-passage { font-size: 1.6rem; }
  .vr-body { padding: 20px; }
  .vr-row { flex-direction: column; gap: 3px; }
  .vr-k { width: auto; padding-top: 0; }
  .vr-refline .proph-ref { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}
/* ---- Enlaces a herramientas de estudio (páginas #/names, #/harmony, #/prophecies) ---- */
.study-links { display: flex; flex-wrap: wrap; gap: 10px; }
.study-link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: var(--card);
  border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 15px;
  color: var(--ink); font-weight: 600; font-size: .95rem; box-shadow: var(--shadow); }
.study-link:hover { background: color-mix(in srgb, var(--gold) 8%, var(--card)); }
.study-link .sl-ico { font-size: 1.15rem; }
.study-link .sl-ico svg { width: 19px; height: 19px; display: block; color: var(--gold-deep); }

/* ============================================================
   LOS MANDATOS DE DIOS (#/commands) — «espina de capítulos»
   ------------------------------------------------------------
   2026-09-07. Hasta hoy esta página NO tenía una línea en esta hoja: su estilo
   iba INYECTADO como una cadena dentro de `cmdRender` (js/app.js) y estaba
   escrito entero con `currentColor` y opacidades —`border:1px solid currentColor`,
   `opacity:.62`—, así que el único catálogo del Estudio que crece a los 66 libros
   era también el único que no tocaba ni un token del sistema «Manuscrito
   iluminado». Al mudarlo aquí se reescribe con los roles de tinta que manda
   `CLAUDE.md` §2: `--ink-action` / `--ink-good` / `--ink-bad` / `--gold-deep`,
   nunca `color: var(--indigo|--accent|--green|--red)`.
   ⚠ Los cortes van en `@container device`, NUNCA en `@media` (UI_STYLEGUIDE §8).
   ⚠ Todo `<button>` de aquí declara su `padding`: Chromium le pone `1px 6px` de
   fábrica y ése fue el hueco de `rule-2026-09-02-el-relleno-que-pone-el-navegador`.
   ============================================================ */
.cmd-view { max-width: 1040px; }
.cmd-title { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -.022em; margin: 4px 0 6px; }
.cmd-sub { color: var(--ink-faint); font-size: .96rem; margin: 0 0 14px; }
.cmd-lead { font-size: 1rem; line-height: 1.72; color: var(--ink-soft); margin: 0 0 12px; max-width: 70ch; }
.cmd-boundary { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--gold-soft);
  background: color-mix(in srgb, var(--gold) 5%, var(--card)); max-width: 70ch; }
.cmd-boundary summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--ink-action); }
.cmd-boundary p { margin: 9px 0 0; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.cmd-warn { color: var(--ink-bad); font-size: .84rem; margin: 0 0 12px; }

/* Pestañas de libro — sustituyen al renglón de pastillas, que con 66 libros era un muro. */
.cmd-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 18px; overflow-x: auto; }
.cmd-tab { flex: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 16px; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-faint);
  cursor: pointer; white-space: nowrap; }
.cmd-tab .cmd-n { font-size: .74rem; margin-left: 7px; font-variant-numeric: tabular-nums; }
.cmd-tab:hover { color: var(--ink); }
.cmd-tab.on { color: var(--ink); border-bottom-color: var(--gold); font-weight: 700; }

/* La ESPINA: una barra por capítulo (o por libro), de altura igual a su recuento. */
.cmd-spine { background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 15px 20px 12px; margin: 0 0 16px; }
.cmd-spine-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  flex-wrap: wrap; margin-bottom: 12px; }
.cmd-spine-h .t { font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.cmd-spine-h .c { font-size: .82rem; color: var(--ink-soft); }
.cmd-spine-h .c b { color: var(--gold-deep); font-family: var(--font-display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.cmd-ticks { display: flex; align-items: flex-end; gap: 3px; height: 62px; border-bottom: 1px solid var(--border); }
.cmd-tick { flex: 1 1 0; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0;
  cursor: pointer; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cmd-tick .b { width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(var(--gold-foil), var(--gold)); }
.cmd-tick.empty { cursor: default; }
.cmd-tick.empty .b { height: 2px; background: color-mix(in srgb, var(--ink-faint) 24%, transparent); }
.cmd-tick.peak .b { background: linear-gradient(var(--gold), var(--gold-deep)); }
.cmd-tick .n { font-size: .58rem; height: 12px; margin-top: 5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cmd-tick.peak .n { color: var(--gold-deep); font-weight: 700; }
.cmd-tick:hover .b { filter: brightness(1.07); }
.cmd-tick:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 4px; }
.cmd-cap { margin: 10px 0 0; font-size: .78rem; line-height: 1.55; color: var(--ink-faint); }
.cmd-cap b { color: var(--gold-deep); }
.cmd-jump { display: none; }

/* Barra compacta: voz · alcance · buscador, en UNA línea. */
.cmd-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px;
  background: color-mix(in srgb, var(--parchment) 80%, var(--card)); border: 1px solid var(--border);
  border-radius: 11px; padding: 7px 10px; }
.cmd-seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; background: var(--parchment-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.cmd-seg button { background: transparent; border: 0; padding: 6px 11px; border-radius: 6px; font: inherit;
  font-size: .78rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.cmd-seg button .cmd-n { font-size: .72rem; margin-left: 6px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cmd-seg button:hover { color: var(--ink); }
.cmd-seg button.on { background: var(--indigo); color: #fff; }
.cmd-seg button.on .cmd-n { color: rgba(255,255,255,.74); }
.cmd-find { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; flex: 1; min-width: 150px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.cmd-find svg { width: 14px; height: 14px; display: block; flex: none; color: var(--ink-faint); }
.cmd-search { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: .82rem; color: var(--ink); }
.cmd-tally { font-size: .84rem; color: var(--ink-faint); margin: 0 0 4px; }
.cmd-tally b { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-deep); font-variant-numeric: tabular-nums; }

/* Cabecera de grupo: el capítulo (o el libro, cuando se ven todos). */
.cmd-grouph { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; scroll-margin-top: 84px; }
.cmd-groupn { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: var(--gold);
  line-height: 1; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.cmd-groupl { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cmd-groupd { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; white-space: nowrap; }
.cmd-groupr { flex: 1; height: 1px; background: var(--gold-soft); }

/* La ficha. */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
/* ⭐ LA FICHA ES LA DEL «MODELO 1» (elección del dueño, 2026-09-07, sobre la ficha densa del
   modelo 3): más aire, la cita más grande, los dos datos en filas con su columna de clave, y el
   FILETE VERTICAL de 5px de `.book-card` — el mismo gesto que ya usa la tarjeta de libro. */
.cmd-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 22px 26px; box-shadow: var(--shadow); }
/* ⚠ EL COLOR DEL FILETE DICE EL ALCANCE, y la ficha «para tu revisión» NO se pinta como
   permanente: su alcance está justamente en duda, así que lleva filete DISCONTINUO de siena.
   El alcance que se lee aquí es el AGRUPADO (`cmdScope`), de modo que las `always`/`rule`
   llevan el oro que les corresponde. */
.cmd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.cmd-card.standing::before { background: linear-gradient(var(--gold-soft), var(--gold)); }
.cmd-card.once::before { background: linear-gradient(#d3b39c, var(--accent)); }
.cmd-card.review::before { background: repeating-linear-gradient(180deg, var(--accent) 0 7px, transparent 7px 13px); }
.cmd-refrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
/* La referencia la pinta `refInline()`, que es de toda la app (`.proph-ref`): aquí se le da
   forma de pastilla dorada SIN tocar la regla global, que otras cuatro páginas comparten. */
.cmd-refrow .proph-ref { background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border: 1px solid var(--gold-soft); border-radius: 8px; padding: 3px 9px; }
.cmd-refrow .proph-ref-link:hover { border-color: var(--gold); color: var(--gold-deep); }
.cmd-pill { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid; border-radius: 999px; padding: 3px 9px; }
.cmd-voice-god { color: var(--ink-action); border-color: color-mix(in srgb, var(--indigo) 34%, transparent);
  background: color-mix(in srgb, var(--indigo) 8%, var(--card)); }
.cmd-voice-angel { color: var(--ink-good); border-color: color-mix(in srgb, var(--sage) 46%, transparent);
  background: color-mix(in srgb, var(--sage) 10%, var(--card)); }
.cmd-voice-lord { color: var(--gold-deep); border-color: var(--gold-soft);
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.cmd-review { color: var(--ink-bad); border-color: color-mix(in srgb, var(--red) 34%, transparent);
  background: color-mix(in srgb, var(--red) 8%, var(--card)); }
.cmd-q { font-family: var(--font-read); font-size: 1.14rem; line-height: 1.62; color: var(--ink); margin: 2px 0 14px; }
/* Los dos datos, en filas con columna de clave: se leen en vertical sin buscar el rótulo. */
.cmd-row { display: flex; gap: 10px; font-size: .88rem; line-height: 1.5; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--ink-faint) 14%, transparent); }
.cmd-row .cmd-k { flex: none; width: 6.6em; padding-top: 3px; font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.cmd-note { font-size: .9rem; line-height: 1.68; color: var(--ink-soft); margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--ink-faint) 14%, transparent); }
.cmd-empty { color: var(--ink-faint); padding: 18px 0; }

@container device (max-width: 760px) {
  .cmd-title { font-size: 1.7rem; }
  .cmd-grid { grid-template-columns: 1fr; gap: 16px; }
  .cmd-card { padding: 18px 18px 18px 22px; }
  .cmd-row { flex-direction: column; gap: 2px; }
  .cmd-row .cmd-k { width: auto; padding-top: 0; }
  .cmd-tab { padding: 13px 14px; }
  /* ⚠ En el teléfono las 40 barras miden ~5 px: NO son un objetivo táctil. La espina se queda
     de LECTURA y el salto va por el selector nativo de abajo, que sí llega a 44 px. */
  .cmd-ticks { height: 52px; gap: 2px; pointer-events: none; }
  .cmd-jump { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px;
    background: var(--parchment-2); border: 1px solid var(--border); border-radius: 9px; padding: 0 12px; }
  .cmd-jump select { flex: 1; min-width: 0; height: 42px; border: 0; background: none;
    font: inherit; font-size: .86rem; font-weight: 600; color: var(--ink); }
  .cmd-seg { width: 100%; }
  .cmd-seg button { flex: 1 1 auto; padding: 11px 10px; white-space: normal; }
  .cmd-find { height: 44px; width: 100%; }
  .cmd-groupn { font-size: 1.5rem; min-width: 38px; }
  .cmd-grouph { flex-wrap: wrap; row-gap: 4px; }
}
/* ---- La arquitectura del libro (Tool 5): toledot / señales / «Yo soy» en Panorama ---- */
.struct-intro { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 16px; max-width: 62ch; }
.struct-group { margin-bottom: 20px; }
.struct-h { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink-action); margin: 0 0 6px; }
.struct-note { font-size: .82rem; line-height: 1.5; color: var(--ink-faint); background: color-mix(in srgb, var(--indigo) 6%, var(--card)); border-radius: 8px; padding: 7px 11px; margin: 0 0 10px; }
.struct-list { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.struct-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 15px; border-top: 1px solid var(--border); }
.struct-item:first-child { border-top: 0; }
.struct-label { font-size: .95rem; color: var(--ink); line-height: 1.45; }
.struct-ref { flex: none; }
.struct-ref .proph-ref { white-space: nowrap; }

/* ==================== SECCIÓN B — herramientas personales ==================== */
/* --- Tool 7: subrayados / marcadores / notas en el lector --- */
.verse.hl { border-radius: 8px; padding: 2px 8px; margin-left: -8px; margin-right: -8px; }
.verse.hl-gold { background: color-mix(in srgb, #e7c66a 34%, transparent); }
.verse.hl-sage { background: color-mix(in srgb, #a9c48f 36%, transparent); }
.verse.hl-sky  { background: color-mix(in srgb, #9ec7e0 36%, transparent); }
.verse.hl-rose { background: color-mix(in srgb, #e6a6b6 34%, transparent); }
body.theme-dark .verse.hl-gold { background: color-mix(in srgb, #e7c66a 22%, transparent); }
body.theme-dark .verse.hl-sage { background: color-mix(in srgb, #a9c48f 22%, transparent); }
body.theme-dark .verse.hl-sky  { background: color-mix(in srgb, #9ec7e0 22%, transparent); }
body.theme-dark .verse.hl-rose { background: color-mix(in srgb, #e6a6b6 22%, transparent); }
.verse.bkmk { border-left: 3px solid var(--gold); padding-left: 10px; }
.v-star { color: var(--gold-deep); margin-left: 5px; font-size: .8em; vertical-align: super; }
.v-note { color: var(--ink-action); margin-left: 4px; font-size: .78em; vertical-align: super; opacity: .8; }
/* --- Tool 7/8: hoja de acciones de estudio dentro del popup del versículo --- */
.verse-pop-study { margin-top: 14px; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); padding-top: 12px; }
.vps-swatches { display: flex; gap: 8px; margin-bottom: 10px; }
.hl-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.hl-swatch.hl-gold { background: #e7c66a; } .hl-swatch.hl-sage { background: #a9c48f; }
.hl-swatch.hl-sky { background: #9ec7e0; } .hl-swatch.hl-rose { background: #e6a6b6; }
.hl-swatch.hl-none { background: var(--card); color: var(--ink-faint); font-size: .8rem; line-height: 1; }
.hl-swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold-deep); }
.vps-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vps-btn { font-size: .85rem; border: 1px solid var(--gold-soft); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.vps-btn.on { background: color-mix(in srgb, var(--gold-foil) 30%, var(--card)); border-color: var(--gold-deep); color: var(--gold-deep); font-weight: 600; }
.vps-note { margin-top: 10px; }
.vps-note-ta { width: 100%; min-height: 66px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .9rem; margin-bottom: 8px; background: var(--parchment); color: var(--ink); }
/* En táctil, TODO campo de texto debe medir ≥16px: bajo 16px los navegadores móviles
   (iOS sobre todo) hacen auto-zoom de la página entera al enfocarlo → el popup de la
   nota queda más grande que la pantalla y la Escritura se pellizca/desplaza detrás.
   Con 16px no hay zoom. Solo táctil: el escritorio conserva sus tamaños de diseño. */
@media (pointer: coarse) {
  .vps-note-ta, .topsearch input, .map-searchbar input { font-size: 16px; }
}
/* --- Guía de la app («?» contextual + #/help) --- */
.help-list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.help-item { display: flex; gap: 10px; align-items: flex-start; }
.help-ico { font-size: 1.05rem; line-height: 1.5; flex: 0 0 auto; color: var(--gold-deep); }
/* Icono SVG del tema (topbar de la hoja, índice y encabezados de la guía) */
.help-tico svg { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; color: var(--gold-deep); }
.proph-section h2 .help-tico svg { width: 21px; height: 21px; vertical-align: -3.5px; }
.resume-ico svg { width: 26px; height: 26px; display: block; color: var(--gold-deep); }
.help-item b { display: block; margin-bottom: 2px; color: var(--ink); }
.help-item p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.help-foot { margin-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); padding-top: 12px; }
/* Primer uso: el «?» pulsa suavemente hasta que se toca una vez (mbi_help_seen). */
@keyframes helpPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-deep) 45%, transparent); }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
#helpToggle.help-pulse { animation: helpPulse 2s ease-out infinite; border-color: var(--gold); color: var(--gold-deep); }
@media (prefers-reduced-motion: reduce) { #helpToggle.help-pulse { animation: none; } }

/* --- Actividades nuevas (ACTIVIDADES_PROPUESTAS.html) --- */
/* B1 · ¿Dónde pasó? */
.mg-map { margin: 12px 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--parchment-2); }
.mg-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.mg-guess { fill: var(--siena, #a6552e); stroke: #fff; stroke-width: 2; opacity: .9; }
.mg-guess.ok { fill: var(--sage, #7c8a6b); }
.mg-true { fill: none; stroke: var(--gold-deep); stroke-width: 4; }
.mg-line { stroke: var(--siena, #a6552e); stroke-width: 2.5; stroke-dasharray: 6 5; }
.mg-desc { color: var(--ink-soft); font-size: .92rem; margin: 8px 0 0; }
/* B3 · El arte del libro */
.art-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
@media (max-width: 560px) { .art-grid { grid-template-columns: repeat(3, 1fr); } }
.art-card { position: relative; aspect-ratio: 1; border: 1px solid var(--border); border-radius: 10px; background: var(--parchment-2); cursor: pointer; padding: 0; overflow: hidden; font: inherit; }
.art-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gold-deep); background: var(--parchment-2); transition: opacity .25s; }
.art-face { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; display: flex; align-items: center; justify-content: center; padding: 4px; }
.art-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.art-name { font-size: .78rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.3; }
.art-card.open .art-back, .art-card.done .art-back { opacity: 0; }
.art-card.open .art-face, .art-card.done .art-face { opacity: 1; }
.art-card.done { border-color: var(--gold-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-foil) 50%, transparent); cursor: default; }
.art-caption { min-height: 24px; font-size: .88rem; color: var(--ink-soft); }
.art-caption.art-caption-link { cursor: pointer; text-decoration: underline dotted var(--gold-deep); text-underline-offset: 3px; }
.art-card.art-info { cursor: pointer; }
.art-card.art-info:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-foil) 55%, transparent); }
/* Icono SVG en línea dentro de texto (pistas, títulos pequeños) */
.ico-inline svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2.5px; color: var(--gold-deep); }
/* Parejas → lectura: chip unido clicable + lista de lecturas de la ronda */
.match-item.match-read { border-color: var(--gold-deep); cursor: pointer; }
.match-item.match-read:hover { background: color-mix(in srgb, var(--gold-foil) 22%, var(--card)); }
.match-book { font-size: .82em; }
.match-readings { margin-top: 14px; }
.match-readings h3 { margin: 0 0 10px; font-size: 1rem; }
.match-readings .xref-link { display: block; width: 100%; text-align: left; margin: 6px 0; cursor: pointer; font: inherit; font-size: .85rem; }
.match-readings .rd-note { margin: 0 0 8px 4px; font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }
.harm-note { margin: 8px 0 0; font-size: .82rem; color: var(--ink-faint); line-height: 1.55; }
button.q-ref-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* A5 · nota de tramo al comprobar */
.oi-note { flex-basis: 100%; font-size: .78rem; color: var(--ink-faint); padding: 2px 0 0 26px; }
/* B4 · Constrúyelo según el texto (build) */
.build-intro .build-done-title { margin: 0 0 4px; }
.build-parts { margin-top: 14px; }
.build-parts h3 { margin: 0 0 10px; font-size: 1rem; }
.build-part-list { display: flex; flex-direction: column; gap: 6px; }
.build-part { font-size: .88rem; color: var(--ink-soft); padding: 6px 10px; border: 1px solid var(--border); border-left: 3px solid var(--gold-deep); border-radius: 8px; background: var(--parchment); }
.build-reveal { text-align: center; }
.build-done-title { font-family: var(--font-display); font-size: 1.9rem; color: var(--indigo); margin: 4px 0 8px; }
body.theme-dark .build-done-title { color: var(--gold-foil); }
.build-figure { margin: 6px 0 10px; }
.build-figure .build-img { width: 100%; max-width: 640px; border-radius: 12px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.14)); }
.build-img-soon { padding: 40px 16px; border: 2px dashed var(--border); border-radius: 12px; color: var(--ink-faint); font-weight: 700; font-size: .9rem; }
.build-caption { font-size: .9rem; color: var(--ink-soft); margin: 0 auto 12px; max-width: 560px; }
.build-part-final { max-width: 460px; margin: 0 auto 14px; text-align: left; }
/* A7 · opciones en la lengua original */
.ws-gloss-q { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-bottom: 4px; }
.opt.ws-orig-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.ws-opt-o { font-family: var(--font-read), serif; font-size: 1.55rem; line-height: 1.2; }
.ws-opt-t { font-family: var(--font-body); font-size: .84rem; font-style: italic; color: var(--ink-soft); font-weight: 500; letter-spacing: .01em; }
/* C1 · tarjeta de la ronda en el Inicio */
.round-card .resume-eyebrow { color: var(--gold-deep); }
.round-card.round-done { opacity: .82; }
/* B2 · escribir de memoria */
.mz-ta { width: 100%; box-sizing: border-box; font: inherit; font-size: max(16px, 1rem); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--parchment); color: var(--ink); margin-bottom: 8px; }

/* --- Sección D · audio y compartir --- */
/* Tool 17 · lectura en voz alta: control en la barra + versículo en curso */
.audio-ctl { display: inline-flex; align-items: center; gap: 6px; }
.verse.audio-now { background: color-mix(in srgb, var(--gold-foil) 26%, transparent); border-radius: 8px; transition: background .25s; }
body.theme-dark .verse.audio-now { background: color-mix(in srgb, var(--gold-deep) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .verse.audio-now { transition: none; } }

/* --- Sección C · contexto visual e histórico --- */
/* Tool 12 · árbol genealógico: la LÁMINA vive en su bloque propio, al final de la hoja. Aquí queda la ficha. */
.gt-pop-name { margin: 2px 0 8px; font-family: var(--font-display); }
.gt-pop-row { font-size: .92rem; margin: 4px 0; }
.gt-pop-note { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.gt-pop-derived { color: var(--ink-faint); font-size: .8rem; }
.gt-pop-refs { margin-top: 10px; }
.gt-pop-branch { margin-top: 12px; }
/* Tool 13 · cronología visual */
.chrono-card { margin-bottom: 14px; overflow-x: auto; }
.chrono-h { margin: 0 0 10px; }
.chrono-svg { width: 100%; min-width: 640px; height: auto; display: block; }
.ch-grid { stroke: color-mix(in srgb, var(--ink-faint) 22%, transparent); stroke-width: 1; }
.ch-tick { font-size: 11px; fill: var(--ink-faint); }
.ch-name { font-size: 11px; fill: var(--ink); }
.ch-bar { opacity: .9; }
.ch-a { fill: var(--sage, #7c8a6b); }
.ch-b { fill: var(--gold, #c9a24b); }
.ch-c { fill: var(--indigo, #2c3e6b); }
.ch-event { stroke: var(--siena, #a6552e); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ch-event-t { font-size: 10.5px; fill: var(--siena, #a6552e); font-weight: 600; }
.chrono-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.ch-lg { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-soft); }
.ch-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ch-dot.ch-a { background: var(--sage, #7c8a6b); } .ch-dot.ch-b { background: var(--gold, #c9a24b); } .ch-dot.ch-c { background: var(--indigo, #2c3e6b); }
.chrono-note { font-size: .82rem; color: var(--ink-faint); margin: 10px 0 0; line-height: 1.5; }
/* Tool 13 · Juan: la tira de fiestas */
.feast-strip { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; padding: 6px 2px 10px; }
.feast-item { flex: 1 0 130px; min-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; }
.feast-item:hover { border-color: var(--gold); }
.feast-item b { font-size: .88rem; }
.feast-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold-deep); }
.feast-unc .feast-dot { background: var(--ink-faint); }
.feast-unc { border-style: dashed; }
.feast-d { font-size: .74rem; color: var(--ink-soft); line-height: 1.35; }
.feast-ref { font-size: .72rem; color: var(--ink-faint); }
.feast-line { flex: 0 0 14px; align-self: center; border-top: 2px solid var(--gold-soft); }
/* Tool 14 · calendario hebreo */
.ch-dot.cw-lg-p { background: var(--gold-deep); border-radius: 50%; }
.ch-dot.cw-lg-o { background: var(--indigo); border-radius: 50%; }
/* --- Tool 14 · Las fiestas que Dios instituye (#/calendar) ---
   ⭐⭐ REESCRITO 2026-09-07 (wire-in de la sección de fiestas). Sustituye entero al bloque de la
   RUEDA del año, que se retiró con su renderer: la página tiene ahora una CINTA (una bahía por
   mes) y una LISTA por origen, atadas por el número de cada fiesta. Se conservan `.ch-dot.cw-lg-*`
   —los dos puntos de la leyenda, que la cinta sigue usando— y `.cal-john*`, que no cambian. */
.cal-ribbon-box { padding: 24px 24px 20px; }
.cal-ribbon { display: block; width: 100%; height: auto; }
.cr-dense { fill: color-mix(in srgb, var(--gold) 14%, var(--card)); }
.cr-band { fill: var(--card); stroke: var(--border); }
.cr-div { stroke: var(--border); stroke-width: 1; }
.cr-month { font-size: 12px; font-weight: 700; fill: var(--ink); }
.cr-greg { font-size: 8.5px; fill: var(--ink-faint); }
.cr-chip { fill: var(--indigo); stroke: var(--card); stroke-width: 1.8; }
.cr-chip.cr-pilgrim { fill: var(--gold-deep); }
.cr-n { font-size: 9px; font-weight: 700; fill: #fff; pointer-events: none; }
.cr-count { font-size: 9.5px; font-weight: 700; fill: var(--gold-deep); letter-spacing: .04em; }
.cr-countn { font-size: 8.5px; fill: var(--ink-faint); }
.cr-gap { stroke: color-mix(in srgb, var(--ink-faint) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.cr-gapt { font-size: 9px; fill: var(--ink-faint); }

.cal-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px;
           margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.cal-keyhead { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
               color: var(--gold-deep); font-weight: 700; margin-bottom: 7px; }
.cal-keyhead.cal-kh-mute { color: var(--ink-soft); }
.cal-keyrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: .82rem; }
.cal-n { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
         border-radius: 50%; background: var(--indigo); color: #fff; font-size: .6rem; font-weight: 700;
         flex-shrink: 0; }
.cal-n.cal-n-p { background: var(--gold-deep); }
.cal-when { margin-left: auto; color: var(--ink-faint); font-size: .74rem; padding-left: 8px; }
.cal-nodate { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cal-nodate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 22px; }
.cal-keyrow.cal-cyc { background: var(--parchment-2); border-radius: 8px; padding: 6px 10px; }
.cal-legend { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ch-lg.cal-hint { margin-left: auto; color: var(--ink-faint); }
.cal-ribnote { margin: 14px 0 30px; }

.cal-verse { background: var(--indigo); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 26px; }
.cal-verse-k { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
               color: var(--gold-foil); font-weight: 700; margin-bottom: 9px; }
.cal-verse-q { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem;
               line-height: 1.45; color: var(--parchment-2); }
.cal-verse-r { margin-top: 9px; font-size: .78rem; }
.cal-verse-r a { color: var(--gold-soft); }

.cal-head { display: flex; align-items: center; gap: 12px; margin: 0 0 5px; color: var(--gold-deep); }
.cal-head h2 { font-size: 1.3rem; margin: 0; color: var(--ink); }
.cal-head i { flex-grow: 1; height: 1px; background: var(--border); }
.cal-head b { font-size: .78rem; color: var(--ink-faint); }
.cal-head.cal-head-mute { color: var(--ink-faint); margin-top: 32px; }
.cal-head.cal-head-mute h2 { color: var(--ink-soft); }
.cal-seal { width: 24px; height: 24px; flex-shrink: 0; }
.cal-headnote { font-size: .84rem; color: var(--ink-faint); line-height: 1.5; margin: 0 0 14px; }

.cal-list { padding: 4px 22px 6px; }
.cal-list.cal-list-later { background: var(--parchment-2); }
.cal-row { display: flex; align-items: flex-start; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.cal-row:last-child { border-bottom: none; }
.cal-row-h { width: 200px; flex-shrink: 0; display: flex; gap: 9px; }
.cal-row-b { flex-grow: 1; min-width: 0; }
/* la lámina de la fiesta (wire-in de Éx 14, 2026-09-07): misma proporción que .plate (1600×995) */
.cal-row-img { width: 236px; flex-shrink: 0; }
.cal-row-img img { display: block; width: 100%; aspect-ratio: 1600 / 995; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.cal-row-r { width: 120px; flex-shrink: 0; text-align: right; font-size: .74rem; line-height: 1.55; }
.cal-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
           border-radius: 50%; background: var(--indigo); color: #fff; font-size: .62rem; font-weight: 700;
           flex-shrink: 0; margin-top: 2px; }
.cal-num.cal-num-p { background: var(--gold-deep); }
.cal-name { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.2; }
.cal-when-b { font-size: .74rem; color: var(--gold-deep); font-weight: 700; letter-spacing: .02em; margin-top: 3px; }
.cal-row-h .proph-badge { margin: 6px 4px 0 0; display: inline-block; }
.proph-badge.cal-bd-p { color: var(--ink-action); background: color-mix(in srgb, var(--indigo) 10%, var(--card));
                        border-color: color-mix(in srgb, var(--indigo) 25%, var(--card)); }
.cal-lbl { font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-bottom: 3px; }
.cal-lbl.cal-lbl-why { color: var(--gold-deep); }
.cal-lbl.cal-lbl-cmd { color: var(--ink-faint); }
.cal-quote { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; line-height: 1.42; color: var(--ink); }
.cal-quote.cal-q-mute { color: var(--ink-soft); }
.cal-qref { margin-top: 6px; font-size: .74rem; }
.cal-what { font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.cal-john { margin-top: 10px; font-size: .88rem; }
.cal-john-n { font-size: .8rem; color: var(--ink-soft); margin-left: 4px; }
.cal-john .btn { margin: 4px 6px 0 0; }

/* En pantalla estrecha la ficha se apila y la cinta pide desplazarse: se le da su propio
   carril de scroll para que la PÁGINA nunca se mueva en horizontal. */
@media (max-width: 720px) {
  .cal-ribbon-box { padding: 16px 14px 14px; }
  .cal-ribbon { min-width: 620px; }
  .cal-ribbon-box > svg { display: block; }
  .cal-rib-scroll { overflow-x: auto; }
  .cal-row { flex-direction: column; gap: 10px; }
  .cal-row-h, .cal-row-r { width: auto; }
  .cal-row-img { width: 100%; }
  .cal-row-r { text-align: left; }
}
/* Tool 15 · conversor de medidas */
.ms-conv { margin: 18px 0; }
.ms-conv h3 { margin: 0 0 10px; }
.ms-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ms-row input, .ms-row select { font: inherit; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--parchment); color: var(--ink); }
.ms-row input { width: 110px; }
.ms-row select { flex: 1; min-width: 200px; }
.ms-result { font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-deep); margin-top: 12px; }
.ms-range { font-size: .82rem; color: var(--ink-faint); margin-top: 4px; }
.ms-card h3 { margin: 0 0 4px; }
/* Tool 16 · tramo de viaje en la parada del recorrido */
.md-travel { margin: 8px 0 2px; font-size: .86rem; color: var(--ink-soft); background: var(--parchment-2, rgba(0,0,0,.04)); border: 1px solid var(--border); border-radius: 10px; padding: 7px 11px; }
@media (pointer: coarse) { .ms-row input, .ms-row select { font-size: 16px; } } /* ≥16px: sin auto-zoom móvil */

/* --- Mi estudio (#/mystudy) --- */
.mystudy-io { display: flex; gap: 8px; margin-bottom: 18px; }
.ms-memhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ms-due { font-weight: 700; color: var(--gold-deep); } .ms-ok { color: var(--ink-faint); }
.ms-memlist, .ms-list { display: flex; flex-direction: column; gap: 8px; }
.ms-memitem { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.ms-item { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.ms-item.ms-hl-gold { border-left: 4px solid #e7c66a; } .ms-item.ms-hl-sage { border-left: 4px solid #a9c48f; }
.ms-item.ms-hl-sky { border-left: 4px solid #9ec7e0; } .ms-item.ms-hl-rose { border-left: 4px solid #e6a6b6; }
.ms-item-top { display: flex; align-items: center; gap: 8px; }
.ms-ref { font-weight: 700; color: var(--ink-action); text-decoration: none; }
.ms-ref:hover { color: var(--gold-deep); }
.ms-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ms-dot-gold { background: #e7c66a; } .ms-dot-sage { background: #a9c48f; } .ms-dot-sky { background: #9ec7e0; } .ms-dot-rose { background: #e6a6b6; }
.ms-star { color: var(--gold-deep); }
.ms-note { margin-top: 6px; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.ms-badge { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.ms-b-new { background: #eef0e8; color: #6b7a52; } .ms-b-learning { background: #f6e7d4; color: #a9821f; } .ms-b-firm { background: #e0efe0; color: #3f6b3f; }
.ms-x { margin-left: auto; background: none; border: 0; color: var(--ink-faint); font-size: 1rem; cursor: pointer; }
.ms-x:hover { color: var(--siena, #a6552e); }
.ms-empty, .ms-empty-all { color: var(--ink-faint); font-size: .95rem; }
/* --- Memorización (#/memorize) --- */
.mz-progress { text-align: center; color: var(--ink-faint); font-size: .82rem; margin-bottom: 12px; }
.mz-card { max-width: 640px; margin: 0 auto; background: var(--card); border: 1px solid var(--gold-soft); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 26px 24px; text-align: center; }
.mz-ref { font-weight: 700; color: var(--gold-deep); margin-bottom: 12px; }
.mz-text { font-family: var(--font-read); font-size: 1.3rem; line-height: 1.8; color: var(--ink); margin: 0 0 20px; }
.mz-blank { color: var(--gold-deep); letter-spacing: .04em; }
.mz-controls { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mz-q { color: var(--ink-soft); margin-right: 4px; }
.mz-done { text-align: center; padding: 40px 20px; }
.mz-done-ico { display: inline-block; font-size: 2.4rem; color: var(--gold-deep); margin-bottom: 10px; }
/* --- Planes de lectura (#/plans) --- */
.plan-progline { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.plan-bar { flex: 1; height: 9px; background: color-mix(in srgb, var(--ink-faint) 18%, transparent); border-radius: 999px; overflow: hidden; }
.plan-bar > i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }
.plan-pct { font-size: .82rem; color: var(--ink-faint); white-space: nowrap; }
.plan-days { display: flex; flex-direction: column; gap: 6px; }
.plan-day { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.plan-day.done { background: color-mix(in srgb, #a9c48f 12%, var(--card)); }
.plan-day.today { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-soft); }
.plan-check { width: 26px; height: 26px; flex: none; border-radius: 7px; border: 2px solid var(--gold-soft); background: var(--card); color: var(--gold-deep); font-weight: 700; cursor: pointer; }
.plan-day.done .plan-check { background: var(--gold); color: #fff; border-color: var(--gold); }
.plan-dnum { font-size: .82rem; color: var(--ink-faint); min-width: 8em; }
.plan-chs { display: flex; flex-wrap: wrap; gap: 8px; }
.plan-chs a { font-size: .9rem; color: var(--ink-action); text-decoration: none; }
.plan-chs a:hover { color: var(--gold-deep); }
.home-studylinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
/* --- Preguntas de estudio en el lector (Tool 10) --- */
.study-q { background: color-mix(in srgb, var(--indigo) 5%, var(--card)); border: 1px solid var(--border); border-left: 3px solid var(--indigo); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 22px 0; }
.sq-h { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-action); margin: 0 0 10px; }
.sq-list { margin: 0; padding-left: 20px; }
.sq-item { font-size: .95rem; line-height: 1.6; color: var(--ink); margin-bottom: 10px; }
.sq-ref { display: inline-block; margin-left: 4px; }
/* --- Tool 11: hoja imprimible --- */
#printSheet_c { display: none; }
@media print {
  body.printing > *:not(#printSheet_c) { display: none !important; }
  body.printing #printSheet_c { display: block; }
  #printSheet_c { color: #1a1a1a; background: #fff; font-family: Georgia, "Times New Roman", serif; }
  .ps-inner { max-width: 42em; margin: 0 auto; padding: 8px 10px; }
  .ps-brand { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8a7d6e; margin-bottom: 4px; }
  .ps-title { font-size: 1.7rem; margin: 0 0 12px; border-bottom: 2px solid #c9a24b; padding-bottom: 6px; }
  .ps-note { font-size: .92rem; font-style: italic; margin-bottom: 12px; color: #333; }
  .ps-text { font-size: 1.02rem; line-height: 1.7; }
  .ps-v { margin: 0 0 6px; } .ps-v b { color: #a9821f; font-size: .8em; vertical-align: super; margin-right: 3px; }
  .ps-sec { margin-top: 16px; page-break-inside: avoid; }
  .ps-sec h2 { font-size: 1.1rem; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin: 0 0 8px; }
  .ps-sec ul, .ps-sec ol { margin: 0; padding-left: 20px; } .ps-sec li { margin-bottom: 6px; font-size: .92rem; line-height: 1.5; }
  .ps-lines { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
  .ps-line { display: block; border-bottom: 1px solid #bbb; height: 0; }
}
/* Lista numerada de paradas (bajo el mapa): legible siempre y clic = vuela a la parada */
.journey-list { margin: 0 0 12px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.jl-head { padding: 11px 16px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 700; font-style: italic; color: var(--indigo); border-bottom: 1px solid var(--border); }
.jl-items { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 3px; }
.jl-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-radius: 10px; padding: 7px 10px; cursor: pointer; color: var(--ink-soft); }
.jl-item:hover { background: var(--parchment-2); }
.jl-item.active { background: var(--parchment-2); box-shadow: inset 3px 0 0 var(--gold); }
.jl-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--indigo); font-size: .76rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.jl-item.active .jl-num { background: var(--indigo); color: var(--gold); }
.jl-name { flex: 1; font-size: .9rem; font-weight: 600; color: var(--ink); }
.jl-ref { flex: none; font-size: .72rem; color: var(--gold); font-weight: 700; }
/* Contraste en modo oscuro: índigo se pierde sobre la tarjeta oscura → usa oro */
body.theme-dark .jl-head { color: var(--gold); }
body.theme-dark .jl-item.active { background: rgba(201,162,39,.14); }
body.theme-dark .jl-item:hover { background: rgba(255,255,255,.06); }
body.theme-dark .person-journey { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .map-trail .jtrail-flow { animation: none; } }
.map-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: flex; flex-direction: column; gap: 6px; }
.mz-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); font-size: 1.15rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; box-shadow: var(--shadow); }
/* ⚠ 2026-08-27 (dueño): «al presionar se pone azul claro y casi no se ve» en oscuro.
   Eran DOS cosas a la vez, y la que se veía no era la que se había escrito:
   (a) el HIGHLIGHT DE TOQUE de Android — el velo azul translúcido que Chrome pinta
       sobre cualquier botón al tocarlo. No está en este CSS: es del navegador, y por eso
       no aparecía por ninguna parte al buscar «azul».
   (b) el único estado del botón era `:hover` con `--indigo` (#2c3e6b), un azul OSCURO
       pensado para el pergamino; sobre la tarjeta del tema oscuro casi no contrasta. Y
       en táctil el `:hover` se QUEDA pegado tras el toque, así que el botón se quedaba
       teñido justo después de usarlo.
   Arreglo: dorado en los dos temas —el acento de la casa—, `:active` y `:focus-visible`
   además de `:hover`, el `:hover` sólo donde hay ratón de verdad, y el velo del
   navegador desactivado para que el color lo ponga la app y no Android. */
.mz-btn { -webkit-tap-highlight-color: transparent; }
.mz-btn:active, .mz-btn:focus-visible { color: var(--gold-deep); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
@media (hover: hover) {
  .mz-btn:hover { color: var(--gold-deep); border-color: var(--gold); }
}
body.theme-dark .mz-btn { color: var(--gold-foil);
  border-color: color-mix(in srgb, var(--gold) 38%, var(--border)); }
body.theme-dark .mz-btn:active, body.theme-dark .mz-btn:focus-visible {
  color: var(--gold); border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 18%, var(--card)); }
@media (hover: hover) {
  body.theme-dark .mz-btn:hover { color: var(--gold); border-color: var(--gold); }
}
.map-detail { position: absolute; top: 14px; left: 14px; z-index: 8; width: 332px; max-width: calc(100% - 28px); max-height: calc(100% - 28px); overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); animation: mdIn .25s ease; }
@keyframes mdIn { from { opacity: 0; transform: translateY(10px); } }
.md-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--ink-soft); font-weight: 700; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.md-imgbox { position: relative; height: 154px; overflow: hidden; background: linear-gradient(150deg, var(--indigo-deep), #5a4a7a 55%, var(--gold)); border-radius: 18px 18px 0 0; }
.md-imgbox .md-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.md-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgba(255,255,255,.85); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.md-placeholder span { font-size: 2.2rem; }
.md-body { padding: 17px 19px 19px; }
.md-body h3 { margin: 0 0 7px; font-size: 1.32rem; }
.md-refs { font-size: .72rem; color: var(--gold-deep); font-weight: 700; margin: 5px 0 9px; letter-spacing: .04em; }
.md-body p { font-size: .87rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 11px; }
.md-history { background: color-mix(in srgb, var(--gold-foil) 12%, var(--card)); border-left: 3px solid var(--gold-soft); border-radius: 9px; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; padding: 10px 13px; margin: 0 0 13px; }
.md-history b { color: var(--ink-accent); }

/* ---------- Crumbs ---------- */
.crumbs { font-size: .8rem; font-weight: 500; color: var(--ink-faint); margin-bottom: 20px; font-family: var(--font-body); }
.crumbs a { color: var(--indigo); text-decoration: none; }
body.theme-dark .crumbs a { color: var(--gold-foil); }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Toast ---------- */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--parchment); font-weight: 600; font-size: .86rem; padding: 13px 24px; border-radius: 999px; z-index: 200; box-shadow: var(--shadow-lg); animation: toastIn .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px);} }

/* ---------- Phone preview (📱) ---------- */
body.phone-preview { background: #14110c; padding: 26px 0; }
body.phone-preview::after { display: none; }
body.phone-preview #device {
  width: 393px; max-width: calc(100vw - 24px); height: calc(100vh - 52px);
  margin: 0 auto; flex: none;
  border: 11px solid #0b0805; border-radius: 46px; overflow-y: auto; overflow-x: hidden;
  background: var(--parchment);
  box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 36px 90px rgba(0,0,0,.55), inset 0 0 0 2px #2a2118;
  scrollbar-width: none;
}
body.phone-preview #device::-webkit-scrollbar { display: none; }

/* ---------- Responsive (media + container) ---------- */
@media (max-width: 760px) {
  .verses.parallel { grid-template-columns: 1fr; gap: 28px; }
  .match-cols { gap: 8px 12px; }
  .topbar { padding: 11px 16px; gap: 12px; flex-wrap: wrap; }
  .topbar-actions { flex-wrap: wrap; }
  .topsearch { flex: 1 1 160px; }
  .brand-name { font-size: 1.05rem; }
  main { padding: 22px 16px 60px; }
  .book-hero { padding: 28px 22px; }
  .book-hero h1 { font-size: 2.2rem; }
  .reader-bar { position: static; }
  h1 { font-size: 2.2rem; } h2 { font-size: 1.55rem; }
  .hero { padding: 36px 8px 22px; }
  .topnav { width: 100%; order: 3; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .topnav .nav-full { display: none; }
  .topnav .nav-short { display: inline; }
}

/* ---------- Home book decks (testament accordion) ---------- */
.book-decks { max-width: 560px; margin: 0 auto; }
.testament { margin: 30px 0 0; }
.testament-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep);
  margin: 0 4px 16px;
}
.testament-label .tl-count { margin-left: auto; letter-spacing: .06em; color: var(--ink-faint); font-weight: 600; }
.book-deck { position: relative; padding-top: 2px; }

.book-tab {
  position: relative; width: 94%; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 0 14px 0 22px; cursor: pointer;
  box-shadow: 0 -2px 9px rgba(43,33,24,.06);
  transition: margin .36s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.book-tab + .book-tab { margin-top: -14px; }
.book-tab::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 14px 0 0 14px; background: linear-gradient(var(--gold-soft), var(--gold));
}
.bt-head { height: 50px; display: flex; align-items: center; gap: 9px; }
.bt-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--indigo); letter-spacing: -.01em; line-height: 1.05; transition: font-size .3s;
}
body.theme-dark .bt-name { color: var(--gold-foil); }
.bt-cap { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.bt-lock { width: 13px; height: 13px; color: var(--gold-deep); opacity: .7; flex: 0 0 auto; }
.bt-chev { width: 16px; height: 16px; color: var(--ink-faint); transition: transform .3s; flex: 0 0 auto; }
.bt-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s cubic-bezier(.2,.7,.2,1), opacity .3s, padding .4s; }
.bt-desc { font-family: var(--font-read); font-size: .96rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }
.bt-open {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  background: linear-gradient(135deg, var(--gold-foil), var(--gold)); color: #3a2e12;
  border: none; border-radius: 11px; padding: 11px 20px; text-decoration: none;
}
.bt-open:hover { filter: brightness(1.05); }
.bt-soon {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  background: var(--parchment-2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px;
}
.book-tab.open { z-index: 40; border-color: var(--gold-soft); box-shadow: var(--shadow-lg); }
.book-tab.open + .book-tab { margin-top: 10px; }
.book-tab.open .bt-head { height: auto; padding: 20px 0 0; align-items: flex-start; }
.book-tab.open .bt-name { font-size: 1.7rem; }
.book-tab.open .bt-cap { align-self: center; }
.book-tab.open .bt-chev { transform: rotate(180deg); }
.book-tab.open .bt-body { max-height: 240px; opacity: 1; padding: 12px 0 20px; }
.book-tab.locked .bt-name { color: var(--ink-faint); }
.book-tab:focus-within { outline: none; }
.bt-head:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ---------- Home book browse: rows (desktop/tablet) vs deck (phone) ---------- */
.books-rows { display: block; }
.book-decks { display: none; }
@media (max-width: 760px) { .books-rows { display: none; } .book-decks { display: block; } }
@container device (max-width: 760px) { .books-rows { display: none; } .book-decks { display: block; } }

/* Horizontal accordion of vertical book spines */
.book-row { display: flex; gap: 8px; height: 188px; margin-bottom: 8px; }
.spine {
  position: relative; flex: 1 1 0%; min-width: 44px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  overflow: hidden; cursor: pointer; box-shadow: 0 2px 10px rgba(43,33,24,.07);
  transition: flex-grow .5s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.spine::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--gold-soft), var(--gold)); z-index: 4; }
.sp-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px 0;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--indigo);
  white-space: nowrap; transition: opacity .3s; z-index: 3; pointer-events: none;
}
body.theme-dark .sp-label { color: var(--gold-foil); }
.spine.locked .sp-label { color: var(--ink-faint); }
.sp-cap { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 700; letter-spacing: .05em; color: var(--ink-faint); transition: opacity .3s; z-index: 3; pointer-events: none; }
.sp-content { position: absolute; inset: 0; padding: 18px 20px 18px 24px; display: flex; flex-direction: column; opacity: 0; transition: opacity .35s .1s; z-index: 2; min-width: 300px; }
.sp-eb { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }
.sp-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -.015em; color: var(--indigo); margin: 6px 0 0; white-space: nowrap; }
body.theme-dark .sp-content h3 { color: var(--gold-foil); }
.sp-desc { font-family: var(--font-read); font-size: .95rem; line-height: 1.45; color: var(--ink-soft); margin: 9px 0 0; max-width: 440px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sp-spacer { flex: 1; }
.sp-open { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .03em; background: linear-gradient(135deg, var(--gold-foil), var(--gold)); color: #3a2e12; border: none; border-radius: 10px; padding: 9px 16px; text-decoration: none; white-space: nowrap; }
.sp-soon { align-self: flex-start; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); background: var(--parchment-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.spine.open { flex-grow: 9; }
.spine.open .sp-content, .spine:hover .sp-content { opacity: 1; }
.spine.open .sp-label, .spine:hover .sp-label, .spine.open .sp-cap, .spine:hover .sp-cap { opacity: 0; }
.spine:hover { flex-grow: 9; border-color: var(--gold-soft); box-shadow: var(--shadow-lg); }
.book-row:hover .spine.open:not(:hover) { flex-grow: 1; }
.book-row:hover .spine.open:not(:hover) .sp-content { opacity: 0; }
.book-row:hover .spine.open:not(:hover) .sp-label, .book-row:hover .spine.open:not(:hover) .sp-cap { opacity: 1; }
.spine:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .spine { transition: none; } }

@container device (max-width: 760px) {
  .verses.parallel { grid-template-columns: 1fr; gap: 28px; }
  .match-cols { gap: 8px 12px; }
  .topbar { padding: 11px 15px; gap: 10px; flex-wrap: wrap; }
  .topbar-actions { flex-wrap: wrap; }
  .topsearch { flex: 1 1 160px; }
  .brand-name { font-size: 1.02rem; }
  .brand-logo { width: 30px; height: 30px; }
  main { padding: 22px 16px 60px; }
  .book-hero { padding: 28px 22px; }
  .book-hero h1 { font-size: 2.1rem; }
  .reader-bar { position: static; }
  .reader-title { font-size: 2rem; }
  /* Respeta el control A−/A+ también en móvil (antes fijaba 1.18rem e ignoraba --fs-scale). */
  .verse-block { font-size: calc(1.18rem * var(--fs-scale, 1)); }
  .hero { padding: 34px 8px 20px; }
  .hero h1 { font-size: 2.3rem; }
  h2 { font-size: 1.5rem; }
  .topnav { width: 100%; order: 3; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .topnav a { white-space: nowrap; }
  .topnav .nav-full { display: none; }
  .topnav .nav-short { display: inline; }
  .btn-icon { min-width: 36px; height: 36px; font-size: .8rem; }
  .stat-row { gap: 20px; }
  .grid-books, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .chap-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 9px; }
  .q-text { font-size: 1.2rem; }
  .order-item { font-size: .85rem; }
  .dropcap { font-size: 3rem; }
}

/* ===== Modernización del texto / modernized-text markers ===== */
/* Palabra modernizada del RV1909 — SIN marca inline (2026-07-08). El texto del lector queda
   LIMPIO (sin subrayado ni globo): las palabras actualizadas se consultan en el documento de
   modernización (enlace «1909 modernizado ⓘ» en el encabezado del capítulo). Así el texto no
   compite con las ayudas de la Lectura Inmersiva (enlaces/imágenes). Se conserva la clase .modw
   + data-orig para el modo Inmersiva y posibles usos futuros. */
.modw { }

/* enlace al documento explicativo en la barra del lector */
/* Cabecera de edición del lector (una columna, paralelo e interlineal).
   REGLA (dueño, 2026-08-27): el ÉNFASIS es de la MARCA. El nombre de la edición
   (.ed-name) se lleva el oro; el texto base + ⓘ (.modw-doc) queda apagado pero
   sigue leyéndose como enlace por el subrayado punteado y el hover. Antes era al
   revés —el enlace era el único elemento en oro— y el ojo leía «World English
   Bible» como el nombre de lo que se está leyendo, que es justo lo que no es. */
.ed-name { color: var(--gold-deep); font-weight: 700; }
.modw-doc {
  color: var(--ink-faint); font-weight: 600;
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}
.modw-doc:hover { color: var(--gold-deep); text-decoration-style: solid; }

/* ===== Lector interlineal / interlinear reader ===== */
.il-source { font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; margin: 2px 0 4px; }
.il-demo { font-size: .82rem; color: var(--gold-deep); font-weight: 600; margin: 0 0 14px; }
.il-wrap { margin-top: 6px; }
.il-verse { display: flex; gap: 8px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); }
.il-vnum { font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); font-size: .95rem; min-width: 1.6em; text-align: right; padding-top: 6px; flex: none; }
.il-row { display: flex; flex-wrap: wrap; gap: 4px 10px; flex: 1; }
.il-row[dir="rtl"] { justify-content: flex-start; }
.il-word {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 6px 8px 5px; cursor: pointer; font-family: var(--font-body);
  transition: background .12s ease, border-color .12s ease; text-align: center;
}
.il-word:hover, .il-word:focus { background: color-mix(in srgb, var(--gold-foil) 16%, transparent); border-color: var(--gold-soft); outline: none; }
.il-o { font-size: 1.6rem; line-height: 1.25; color: var(--ink); }
.il-o[lang="hbo"] { font-family: "Frank Ruhl Libre", "Times New Roman", serif; font-size: 1.85rem; }
.il-o[lang="grc"] { font-family: "Cormorant Garamond", "EB Garamond", serif; font-weight: 600; }
.il-t { font-size: .74rem; font-style: italic; color: var(--ink-faint); }
.il-g { font-size: .82rem; color: var(--ink-soft); max-width: 13ch; }
.il-s { font-size: .62rem; letter-spacing: .04em; color: var(--gold-deep); font-weight: 700; }

/* ficha de estudio de palabra */
.il-card-back { position: fixed; inset: 0; background: rgba(20,16,10,.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 18px; }
.il-card { position: relative; background: var(--card); border: 1px solid var(--gold-soft); border-radius: 16px; box-shadow: var(--shadow-lg); max-width: 440px; width: 100%; padding: 26px 24px 22px; text-align: center; }
.il-card-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.1rem; color: var(--ink-faint); cursor: pointer; line-height: 1; }
.il-card-x:hover { color: var(--ink); }
.il-card-orig { font-size: 2.6rem; line-height: 1.2; color: var(--ink); }
.il-card-orig[lang="hbo"] { font-family: "Frank Ruhl Libre", serif; }
.il-card-orig[lang="grc"] { font-family: "Cormorant Garamond", "EB Garamond", serif; font-weight: 600; }
.il-card-translit { font-style: italic; color: var(--ink-soft); margin-top: 2px; }
.il-card-strong { display: inline-block; margin-top: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--gold-deep); background: color-mix(in srgb, var(--gold-foil) 20%, var(--card)); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 3px 11px; }
.il-card-rows { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.il-card-row { display: flex; gap: 10px; font-size: .9rem; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); padding-top: 10px; }
.il-card-row .il-k { flex: none; width: 8.5em; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 700; padding-top: 2px; }
.il-card-row .il-val { color: var(--ink); line-height: 1.5; }
.il-refs { color: var(--ink-faint); font-size: .82rem; }
/* Concordancia (todas las apariciones de la palabra en el libro) dentro de la ficha */
.il-conc { margin-top: 16px; text-align: left; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); padding-top: 12px; }
.il-conc-h { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; font-weight: 700; margin-bottom: 8px; }
.il-conc-n { color: var(--gold-deep); text-transform: none; letter-spacing: 0; font-weight: 700; }
.il-conc-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow: auto; padding: 2px; }
.il-ref-link { font-size: .8rem; color: var(--indigo); text-decoration: none; background: color-mix(in srgb, var(--gold-foil) 16%, var(--card)); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.il-ref-link:hover { background: color-mix(in srgb, var(--gold-foil) 34%, var(--card)); }
.il-conc-more { font-size: .78rem; color: var(--ink-faint); align-self: center; padding: 2px 4px; }
body.theme-dark .il-ref-link { color: var(--gold-foil); }
body.theme-dark .il-card-back { background: rgba(0,0,0,.62); }
@media (max-width: 640px) {
  .il-card-row { flex-direction: column; gap: 2px; }
  .il-card-row .il-k { width: auto; }
  .il-o { font-size: 1.4rem; }
  .il-o[lang="hbo"] { font-size: 1.6rem; }
}

/* interlineal + traducción (comparar) */
.il-par { margin-top: 6px; }
.il-par-verse { display: flex; gap: 8px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); }
.il-par-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 6px 28px; flex: 1; align-items: start; }
.il-par-head { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); font-weight: 700; margin-bottom: 8px; }
.il-par-trans { border-left: 1px solid color-mix(in srgb, var(--gold-soft) 60%, transparent); padding-left: 22px; }
.il-trans-text { font-family: var(--font-read); font-size: 1.18rem; line-height: 1.75; color: var(--ink); margin: 0; }
.il-par-orig .il-row { gap: 4px 8px; }
@media (max-width: 760px) {
  .il-par-cols { grid-template-columns: 1fr; gap: 14px; }
  .il-par-trans { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--gold-soft) 60%, transparent); padding-left: 0; padding-top: 12px; }
}

/* ===== Lectura paralela en móvil: una columna + número tocable ===== */
.parallel-hint { display: none; font-size: .8rem; color: var(--gold-deep); font-weight: 600; margin: 0 0 12px; text-align: center; }

/* popup del versículo en la otra versión */
.verse-pop-back { position: fixed; inset: 0; box-sizing: border-box; background: rgba(20,16,10,.5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 16px; overflow: auto; }
.verse-pop { position: relative; box-sizing: border-box; background: var(--card); border: 1px solid var(--gold-soft); border-radius: 14px; box-shadow: var(--shadow-lg); max-width: 460px; width: 100%; max-height: 90%; overflow: auto; padding: 20px 22px 18px; }
/* Móvil: ceñir al viewport VISIBLE (dvh sigue la barra del navegador y el teclado)
   para que el popup (con la nota abierta) nunca exceda la pantalla. */
@supports (height: 1dvh) { .verse-pop { max-height: min(90%, 88dvh); } }
.verse-pop-x { position: absolute; top: 8px; right: 11px; background: none; border: 0; font-size: 1.05rem; color: var(--ink-faint); cursor: pointer; line-height: 1; }
.verse-pop-x:hover { color: var(--ink); }
.verse-pop-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); font-weight: 700; margin-bottom: 8px; }
.verse-pop-text { font-family: var(--font-read); font-size: 1.2rem; line-height: 1.75; color: var(--ink); margin: 0; }
.verse-pop-actions { display: flex; gap: 8px; margin-top: 16px; }
/* Popup INTERLINEAL (actividades de vocabulario): un poco más ancho para que quepa
   original + glosa + traducción. En móvil las columnas ya colapsan a una sola
   (regla .il-par-cols @760px). Tocar una palabra abre su ficha (openCard). */
.verse-pop.il-pop { max-width: 620px; }
.il-pop .il-pop-body { margin-top: 2px; }
.il-pop .il-par-verse { border-bottom: 0; padding: 6px 0 10px; }
.il-pop .rp-read { display: inline-flex; margin-top: 14px; }
/* Pasajes relacionados (referencias cruzadas) dentro del popup del versículo */
.verse-pop-xref { margin-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ink-faint) 16%, transparent); padding-top: 12px; }
.vp-xref-h { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: 8px; }
.vp-xref-list { display: flex; flex-wrap: wrap; gap: 6px; }
.xref-link { font-size: .82rem; border-radius: 999px; padding: 3px 11px; white-space: nowrap; border: 1px solid var(--gold-soft); }
.xref-live { color: var(--indigo); background: color-mix(in srgb, var(--gold-foil) 16%, var(--card)); cursor: pointer; }
.xref-live:hover { background: color-mix(in srgb, var(--gold-foil) 34%, var(--card)); }
.xref-text { color: var(--ink-soft); background: var(--parchment-2, transparent); }
body.theme-dark .xref-live { color: var(--gold-foil); }
body.theme-dark .verse-pop-back { background: rgba(0,0,0,.62); }

/* ============================================================
   LA CAPA DEL MAPA desde la lectura (js/immersive.js, 2026-08-08)
   La palabra de un LUGAR con punto abre EL MAPA, acercado. Va por DEBAJO del
   z-index del popup (200) a propósito: así «ⓘ Ficha» sube la tarjeta ENCIMA del
   mapa y el mapa nunca se pierde de fondo — que es lo que hace que el atajo no
   cueste la enseñanza de la ficha.
   ============================================================ */
.immmap-back { position: fixed; inset: 0; box-sizing: border-box; background: rgba(20,16,10,.62);
  display: flex; align-items: center; justify-content: center; z-index: 190; padding: 16px; }
.immmap { position: relative; box-sizing: border-box; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: 14px;
  box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; height: 100%; max-height: 92%;
  overflow: hidden; }
@supports (height: 1dvh) { .immmap { max-height: min(92%, 90dvh); } }
.immmap-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px 9px;
  border-bottom: 1px solid var(--border); }
.immmap-id { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.immmap-id b { font-family: var(--font-display, Georgia, serif); font-size: 1.02rem; color: var(--indigo);
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.immmap-id small { font-size: .7rem; color: var(--ink-faint); }
.immmap-btn { flex: 0 0 auto; background: none; border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 11px; font-size: .78rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.immmap-btn:hover { border-color: var(--gold); color: var(--indigo); }
.immmap-canvas { flex: 1; min-height: 0; background: #e9e2d0; }
.immmap-svg { display: block; width: 100%; height: 100%; }
.immmap-foot { padding: 9px 12px 11px; border-top: 1px solid var(--border); }
.immmap-zoom { width: 100%; }
.immmap-cap { margin: 8px 2px 0; font-size: .76rem; line-height: 1.5; color: var(--ink-faint); }
body.theme-dark .immmap-back { background: rgba(0,0,0,.7); }
body.theme-dark .immmap-id b { color: var(--gold-foil); }
body.theme-dark .immmap-id small { color: var(--ink-soft); }
body.theme-dark .immmap-btn { color: var(--ink); border-color: color-mix(in srgb, var(--gold-foil) 30%, transparent); }
body.theme-dark .immmap-btn:hover { color: var(--gold-foil); border-color: var(--gold-foil); }
body.theme-dark .immmap-cap { color: var(--ink-soft); }
body.theme-dark .immmap .map-pin.sel .pin-label { fill: #1b2440; }

/* El punto del versículo GANA a sus vecinos. En el mapa del libro todos los pines valen
   igual porque el lector busca; aquí no busca — le están señalando uno, y en el racimo de
   Canaán (Bet-el, Hai, Salem, Moriah, Hebrón, Sodoma) con todos iguales no se sabe cuál es.
   Los vecinos no se esconden: son la referencia que pedía el probador. Solo se apartan. */
.immmap .map-pin:not(.sel) .pin-halo { r: 6; }
.immmap .map-pin:not(.sel) .pin-dot  { r: 4; }
.immmap .map-pin:not(.sel) .pin-core { r: 1.8; }
.immmap .map-pin:not(.sel) .pin-label { font-size: 12px; font-weight: 600; opacity: .5; }
.immmap .map-pin.sel .pin-halo { r: 13; }
.immmap .map-pin.sel .pin-dot  { r: 9.5; }
.immmap .map-pin.sel .pin-core { r: 3.8; }
.immmap .map-pin.sel .pin-label { font-size: 19px; font-weight: 800; fill: var(--indigo);
  stroke-width: 7; }
.immmap .map-pin { pointer-events: none; }
.immmap .map-labels text { opacity: .8; }

/* La marca de la palabra: un pin diminuto. Sin él, el lector no puede saber que ESTA
   etiqueta abre un mapa y no una ficha — hasta hoy todas hacían lo mismo. */
.imm.imm-place-pin::after { content: ''; display: inline-block; width: .52em; height: .52em;
  margin: 0 1px .18em 3px; vertical-align: middle; opacity: .9;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9821f'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.6A2.6 2.6 0 1 1 12 6.4a2.6 2.6 0 0 1 0 5.2z'/%3E%3C/svg%3E"); }
body.theme-dark .imm.imm-place-pin::after { opacity: 1; filter: brightness(1.5); }


/* ---- Referencias de tarjeta clicables → popup de versículo ---- */
.refs, .md-refs { cursor: pointer; }
.refs:hover, .md-refs:hover { color: var(--gold); }
.refs:focus-visible, .md-refs:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
body.editing .refs, body.editing .md-refs { cursor: default; }

/* popup de versículo desde tarjeta (reusa .verse-pop) */
.ref-pop { max-width: 520px; }
.rp-text { font-size: 1.12rem; }
.rp-v { display: inline; }
.rp-n { font-size: .62em; font-weight: 700; color: var(--gold-deep); vertical-align: super; margin: 0 2px 0 1px; }
.rp-more { font-style: italic; color: var(--ink-faint); font-size: .9rem; }
.rp-src { margin-top: 12px; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
.rp-read { display: inline-block; margin-top: 12px; text-decoration: none; }
/* Flecha ← para volver al popup anterior (pasajes relacionados → lectura → volver). */
.verse-pop-head.has-back { display: flex; align-items: center; gap: 8px; }
.rp-back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; padding: 0; margin: -2px 4px -2px -2px; font-size: 1rem; line-height: 1;
  color: var(--gold-deep); background: color-mix(in srgb, var(--gold-foil) 22%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 50%; cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s; }
.rp-back:hover { background: color-mix(in srgb, var(--gold-foil) 46%, transparent); border-color: var(--gold); }
.rp-back:active { transform: scale(.92); }
/* varias lecturas en una misma ref (p. ej. «Gn 16:1-4; 30:1-13») → una sección por lectura */
.rp-seg + .rp-seg { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gold-soft); }
.rp-seg-ref { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; margin-bottom: 6px; }
.rp-seg .rp-read { margin-top: 10px; }

/* ---- «el Amor Kenótico del Señor» (regla global — docs/DECISIONS.md) ----
   El término va SIEMPRE resaltado y clicable → popup que explica la expresión
   (js/overlays.js: kenosisPopup / kenosisTermHTML). */
.kenosis-term {
  display: inline; padding: 0 2px; margin: 0; border: none; background: none;
  font: inherit; color: var(--gold-deep); font-weight: 700; cursor: pointer;
  border-bottom: 2px dotted var(--gold); border-radius: 0;
}
.kenosis-term:hover { color: var(--ink); border-bottom-style: solid; }
.kenosis-pop p { margin: 0 0 10px; font-size: .92rem; line-height: 1.55; }
.kenosis-pop ul { margin: 0 0 10px; padding-left: 20px; }
.kenosis-pop li { margin: 5px 0; font-size: .9rem; line-height: 1.5; }

/* ---- Lightbox de imagen (zoom) ---- */
.custom-img, .md-img { cursor: zoom-in; }
.img-lb-back { position: fixed; inset: 0; box-sizing: border-box; z-index: 240; background: rgba(12,9,6,.82);
  display: flex; align-items: center; justify-content: center; }
body.theme-dark .img-lb-back { background: rgba(0,0,0,.88); }
.img-lb { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.img-lb-bar { position: absolute; top: 10px; right: 12px; z-index: 2; display: flex; gap: 8px; }
.img-lb-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(20,16,10,.55); color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); transition: background .15s; }
.img-lb-btn:hover { background: rgba(60,48,30,.8); }
.img-lb-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab; }
.img-lb-stage.zoomed { cursor: grab; }
.img-lb-img { max-width: 94%; max-height: 92%; object-fit: contain; border-radius: 8px; user-select: none;
  transform-origin: center center; transition: transform .08s ease-out; box-shadow: 0 12px 40px rgba(0,0,0,.5); }

/* el número del versículo, tocable, en la columna primaria (solo móvil/teléfono) */
.parallel-mobile-num {
  cursor: pointer; color: var(--indigo);
  background: color-mix(in srgb, var(--gold-foil) 26%, transparent);
  border-radius: 6px; padding: 1px 6px; margin-right: 3px;
}
body.theme-dark .parallel-mobile-num { color: var(--gold-foil); }

@media (max-width: 760px) {
  .verses.parallel .verse-block.secondary { display: none; }
  .verses.parallel { grid-template-columns: 1fr; }
  .verses.parallel .parallel-hint { display: block; }
  .verse-block.primary .verse sup {
    cursor: pointer; color: var(--indigo);
    background: color-mix(in srgb, var(--gold-foil) 26%, transparent);
    border-radius: 6px; padding: 1px 6px; margin-right: 3px;
  }
  body.theme-dark .verse-block.primary .verse sup { color: var(--gold-foil); }
}
/* la vista de teléfono (📱) no dispara el media query, así que se replica */
body.phone-preview .verses.parallel .verse-block.secondary { display: none; }
body.phone-preview .verses.parallel { grid-template-columns: 1fr; }
body.phone-preview .verses.parallel .parallel-hint { display: block; }
body.phone-preview .verse-block.primary .verse sup {
  cursor: pointer; color: var(--indigo);
  background: color-mix(in srgb, var(--gold-foil) 26%, transparent);
  border-radius: 6px; padding: 1px 6px; margin-right: 3px;
}
body.theme-dark.phone-preview .verse-block.primary .verse sup { color: var(--gold-foil); }

/* ---------- Búsqueda de versículos / verse search ---------- */
/* Juego "Palabras clave" (word study) */
.ws-orig { font-family: var(--font-read), serif; font-size: 2.6rem; line-height: 1.25; text-align: center; margin: 4px 0 2px; }
.ws-translit { text-align: center; font-style: italic; color: var(--ink-soft); margin-bottom: 4px; }
.ws-ask { text-align: center; font-weight: 600; margin: 12px 0 2px; }
.ws-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
/* Referencia clicable en las actividades → abre el lector en el versículo */
.q-ref-link { color: var(--gold); font-weight: 600; text-decoration: none; border-bottom: 1px dashed currentColor; cursor: pointer; }
.q-ref-link:hover, .q-ref-link:focus { color: var(--ink); }

.search-view { max-width: 760px; margin: 0 auto; }
.search-title { font-family: var(--font-display); margin: 0 0 6px; }
.search-box { position: relative; margin: 16px 0 6px; }
.search-box .search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 1.05rem; opacity: .7; pointer-events: none; }
.search-box input {
  width: 100%; box-sizing: border-box; font-family: var(--font-read); font-size: 1.12rem;
  padding: 14px 16px 14px 46px; border: 1.5px solid var(--line, rgba(0,0,0,.16));
  border-radius: 14px; background: var(--paper, #fff); color: var(--ink); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-foil) 22%, transparent); }
.search-msg { color: var(--ink-faint); font-size: .95rem; padding: 14px 2px; }
.search-count { color: var(--ink-soft); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin: 14px 2px 8px; }
.search-list { display: flex; flex-direction: column; gap: 2px; }
.search-hit {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 14px; align-items: baseline;
  padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; transition: background .12s, border-color .12s;
}
.search-hit:hover { background: color-mix(in srgb, var(--gold-foil) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.search-hit .sh-ref { font-family: var(--font-display); font-weight: 600; color: var(--gold-deep, var(--indigo)); font-size: .95rem; white-space: nowrap; }
.search-hit .sh-text { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.6; color: var(--ink-soft); }
.search-mark { background: color-mix(in srgb, var(--gold-foil) 55%, transparent); color: var(--ink); border-radius: 4px; padding: 0 2px; font-weight: 600; }
@media (max-width: 620px) {
  .search-hit { grid-template-columns: 1fr; gap: 3px; }
}
/* salto a un versículo (desde la búsqueda o una actividad): realce que se desvanece */
.verse-flash { animation: verseFlash 3.2s ease-out; border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-foil) 40%, transparent); }
@keyframes verseFlash {
  0%, 45% { background: color-mix(in srgb, var(--gold-foil) 62%, transparent); }
  100% { background: transparent; box-shadow: 0 0 0 1px transparent; }
}
body.theme-dark .search-box input { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------- Búsqueda por tema / subject search ---------- */
.subj-block { margin-top: 22px; }
.subj-block-h { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
.subj-block-n { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--ink-faint); }
.subj-group { margin: 0 0 16px; }
.subj-h { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep, var(--indigo)); font-weight: 700; margin: 0 0 7px; }
.subj-n { color: var(--ink-faint); font-weight: 600; }
.subj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.subj-hit { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; border-radius: 12px; text-decoration: none; color: var(--ink); border: 1px solid var(--border); background: var(--card); transition: background .12s, border-color .12s, transform .12s; }
.subj-hit:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold-foil) 10%, transparent); transform: translateY(-1px); }
.sj-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); }
.sj-sub { font-family: var(--font-body); font-weight: 500; font-size: .78rem; color: var(--ink-faint); }
.sj-desc { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.sj-meta { font-size: .74rem; color: var(--ink-faint); }
@media (max-width: 620px) { .subj-list { grid-template-columns: 1fr; } }
/* salto a una ficha (persona/lugar/costumbre/nombre/profecía) desde la búsqueda por tema */
.entity-flash { animation: verseFlash 3.2s ease-out; border-radius: 14px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }

/* ---------- Enlace de comentarios (probadores) / feedback link ---------- */
.footer-feedback {
  display: block; width: fit-content; margin: 10px auto 0;
  padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  text-decoration: none; color: var(--gold-deep, var(--indigo));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: background .12s, border-color .12s;
}
.footer-feedback:hover { background: color-mix(in srgb, var(--gold-foil) 16%, transparent); border-color: var(--gold); }
.footer-feedback[hidden] { display: none; }

/* ============================================================
   LECTURA INMERSIVA (modo) — resaltado en el texto + vistazo rápido + selector
   ============================================================ */
/* palabras tocables dentro del versículo */
.imm { cursor: pointer; border-bottom: 2px solid transparent; border-radius: 3px;
  padding: 0 .5px; transition: background .12s, border-color .12s; -webkit-tap-highlight-color: transparent; }
.imm-term    { border-bottom-color: color-mix(in srgb, #6a5b8c 55%, transparent); }
.imm-person  { border-bottom-color: color-mix(in srgb, #a6552e 55%, transparent); }
.imm-place   { border-bottom-color: color-mix(in srgb, #4a8c8c 60%, transparent); }
.imm-custom  { border-bottom-color: color-mix(in srgb, #a9821f 60%, transparent); }
.imm-measure { border-bottom-color: color-mix(in srgb, #3d7a5a 60%, transparent); }
.imm-money   { border-bottom-color: color-mix(in srgb, #8a6d1f 60%, transparent); }
.imm-build   { border-bottom-color: color-mix(in srgb, #7a5a3d 60%, transparent); }
.imm-dict    { border-bottom-color: color-mix(in srgb, #3f6d9a 60%, transparent); }
.imm-first   { border-bottom-color: color-mix(in srgb, #a84a5e 60%, transparent); }
.imm-tree    { border-bottom-color: color-mix(in srgb, #5f7a4a 65%, transparent); }  /* genealogía → árbol */
.imm.modw { border-bottom-style: solid; }   /* fusionado con una palabra modernizada */
body:not(.editing) .imm:hover { background: color-mix(in srgb, var(--gold-foil) 26%, transparent); }
.imm:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Palabra con MÁS de una capa (p. ej. palabra del original + primera vez): puntito dorado. */
.imm-multi { position: relative; }
.imm-multi::after { content: ""; position: absolute; top: -2px; right: -3px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold, #a9821f); }
/* ⚠ LAS CUATRO REGLAS QUE ESTABAN AQUÍ —.imm-pop-div, .imm-pop-fig, .imm-pop-img y
   .imm-pop-cap— SE FUERON al bloque de la ficha (2026-08-23, rediseño de la rejilla),
   que las redefine. Estaban DUPLICADAS: dos copias del mismo selector a 130 líneas de
   distancia, ganando la de abajo por cascada, de modo que editar ésta no hacía nada.
   Una sola fuente por regla; el bloque de la ficha es el sitio. */

/* «En este capítulo» — SOLO modo Estudio (2026-07-11): franja con miniaturas de las imágenes
   disponibles + resumen de lo tocable, y miniatura por versículo. Acentos en DORADO (no indigo)
   para que sea legible también en modo oscuro. */
.imm-chapstrip { background: color-mix(in srgb, var(--gold) 8%, var(--card)); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; }
/* En Inmersiva la franja va al PIE del capítulo: espacio ARRIBA (la separa del último versículo). */
.imm-chapstrip-bottom { margin: 22px 0 6px; }
.imm-cs-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-deep, #a9821f); margin-bottom: 10px; }
/* ⚠ `justify-content: center` (2026-09-03, aviso del dueño: «hay que centrarlas»).
   Con las miniaturas a 100px fijos y la caja pegada a la izquierda, lo que sobra se
   amontonaba TODO a la derecha: 26px en un teléfono de 412px y **88px en escritorio,
   más una última fila con UNA sola miniatura pegada al borde izquierdo**. Centrar
   reparte el sobrante a los dos lados y coloca la fila huérfana bajo las demás. */
.imm-cs-imgs { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.imm-cs-thumb { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100px; border: 0; background: transparent; cursor: pointer; padding: 0; font: inherit; }
.imm-cs-thumb img { width: 100px; height: 75px; object-fit: cover; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .12s ease, box-shadow .12s ease; }
.imm-cs-thumb:hover img, .imm-cs-thumb:focus-visible img { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.28); }
.imm-cs-thumb span { font-size: .66rem; line-height: 1.2; color: var(--ink-soft); text-align: center; }
.imm-cs-sum { margin-top: 10px; font-size: .8rem; color: var(--ink-soft); line-height: 1.6; }
.imm-cs-sum b { color: var(--gold-deep, #a9821f); }
body.theme-dark .imm-cs-title, body.theme-dark .imm-cs-sum b { color: var(--gold-foil); }
/* Tarjeta del ÁRBOL GENEALÓGICO en la franja «En este capítulo» (regla del dueño 2026-07-27):
   mismo tamaño y comportamiento que una miniatura, pero con el icono `tree` del set duotono
   dorado (js/icons.js) en vez de una foto — no hay arte del árbol y no debe inventarse. */
.imm-cs-thumb .imm-cs-tree { width: 100px; height: 75px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, rgba(169,130,31,.16), rgba(169,130,31,.05));
  border: 1px solid rgba(169,130,31,.32); color: var(--gold-deep, #a9821f);
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .12s ease, box-shadow .12s ease; }
.imm-cs-thumb .imm-cs-tree svg { width: 38px; height: 38px; display: block; }
/* Tarjeta de LUGAR en la franja: el mini-mapa ocupa el hueco de una miniatura y se comporta
   como ella (mismo tamaño, mismo hover), pero es un SVG vivo, no una imagen. */
.imm-cs-thumb .imm-cs-map { width: 100px; height: 75px; border-radius: 9px; overflow: hidden; display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .12s ease, box-shadow .12s ease; background: #e9e2d0; }
.imm-cs-thumb .imm-cs-mapsvg { display: block; width: 100%; height: 100%; }
.imm-cs-thumb:hover .imm-cs-map, .imm-cs-thumb:focus-visible .imm-cs-map { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.28); }
/* Variante con ARTE (el rollo de las generaciones): la imagen sustituye al icono y se quita el marco. */
.imm-cs-thumb .imm-cs-tree.imm-cs-tree-art { background: none; border: 0; }
.imm-cs-thumb .imm-cs-tree img { width: 100px; height: 75px; object-fit: cover; border-radius: 9px; display: block; }
.imm-cs-thumb:hover .imm-cs-tree, .imm-cs-thumb:focus-visible .imm-cs-tree { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.28); }
body.theme-dark .imm-cs-thumb .imm-cs-tree { color: var(--gold-foil); border-color: rgba(233,217,168,.26);
  background: linear-gradient(160deg, rgba(233,217,168,.13), rgba(233,217,168,.04)); }

/* ⚠⚠ EN UN TELÉFONO ESTRECHO, CENTRAR NO BASTA (2026-09-03). Medido a 360px —el
   teléfono del dueño—: la caja mide 298px, caben DOS miniaturas de 100 y sobran 86.
   Centrarlas deja 43px de aire a cada lado y unas fotos diminutas en la mitad de la
   pantalla. Aquí las dos LLENAN la fila y la lámina crece con ellas. El corte va a
   480px y no a los 760px de siempre: entre 480 y 760 caben tres de 100px sin aire
   que valga la pena repartir, y estirarlas a la mitad del ancho las haría enormes.

   ⚠⚠⚠ Y VA AQUÍ ABAJO, DESPUÉS DE TODAS LAS `.imm-cs-*`, no arriba. Escrito antes de
   ellas, las fotos crecían y **los mapas no**: `.imm-cs-thumb .imm-cs-map` de la regla
   base tiene la MISMA especificidad (0,2,0) que la de aquí, y a igualdad gana la que
   viene después en el archivo. Un `@container` NO añade especificidad — solo condiciona;
   una regla responsiva se escribe después de la que corrige, siempre. */
@container device (max-width: 480px) {
  .imm-cs-thumb { width: calc(50% - 6px); max-width: 170px; }
  .imm-cs-thumb img,
  .imm-cs-thumb .imm-cs-map,
  .imm-cs-thumb .imm-cs-tree,
  .imm-cs-thumb .imm-cs-tree img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .imm-cs-thumb span { font-size: .7rem; }
}

/* =============================================================================
   LA FICHA DEL VISTAZO RÁPIDO — REJILLA DE DEFINICIÓN (rediseño 2026-08-23)
   -----------------------------------------------------------------------------
   Acompaña al bloque del mismo nombre en js/immersive.js. Los chips por tipo
   (.imm-chip-*) se conservan tal cual y se les añaden los DOS que faltaban —list y
   tree—, que llevaban desde su cableado saliendo sin color. Las antiguas
   .imm-pop-sub y .imm-pop-body desaparecen porque ya no hay quien las pinte: la
   sub-línea es ahora la rejilla y el cuerpo es .imm-note.
   El shell (.verse-pop-back / .verse-pop / .verse-pop-x) NO se toca.
   ============================================================================= */
/* vistazo rápido (reusa el shell .verse-pop-back / .verse-pop) */
.imm-pop { max-width: 480px; }

/* Cabecera de una capa: el título manda, la acción va a su lado y el ✕ del shell
   sigue en la esquina — por eso el padding-right, para que no se pisen. */
.imm-sec-top { display: flex; align-items: flex-start; gap: 12px; padding-right: 26px; }
.imm-sec-id { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.imm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.imm-chip { display: inline-block; font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; border-radius: 999px; padding: 2px 8px; }
.imm-chip-term { background: #efebf5; color: #6a5b8c; }
.imm-chip-person { background: #f7ece6; color: #a6552e; }
.imm-chip-place { background: #e7f1f1; color: #4a8c8c; }
.imm-chip-custom { background: #fbf3e0; color: #a9821f; }
.imm-chip-measure { background: #e8f2ec; color: #3d7a5a; }
.imm-chip-money { background: #f7f0dd; color: #8a6d1f; }
.imm-chip-build { background: #f2ebe3; color: #7a5a3d; }
.imm-chip-dict { background: #eef4fa; color: #3f6d9a; }
.imm-chip-first { background: #f9ecee; color: #a84a5e; }
.imm-chip-list { background: #f0eee7; color: #6b6355; }
.imm-chip-tree { background: #e9eef7; color: #3f5d8a; }

/* Kicker: solo lo pintan los tipos que NO están en TYPE_LABEL (genéricos). */
.imm-kicker { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }

/* EL TÍTULO ES SOLO EL NOMBRE. Antes esta regla pintaba una línea con cinco datos
   (nombre + original + translit) y por eso era un flex; ahora es un titular. */
.imm-pop-head { font-family: var(--font-display, "Playfair Display", serif); color: var(--indigo);
  font-size: 1.75rem; line-height: 1.08; letter-spacing: -.02em; font-weight: 700; margin: 0;
  text-wrap: pretty; }
/* CONTRASTE — regla del dueño (2026-07-11): en modo OSCURO el título del vistazo era indigo
   (#2c3e6b), casi igual que el fondo oscuro → ilegible. Se pasa a dorado claro, el MISMO patrón
   dark del resto de la app. UNA sola regla arregla TODAS las tarjetas inmersivas. */
body.theme-dark .imm-pop-head { color: var(--gold-foil); }

/* Acciones ARRIBA, junto al título: dejan de depender de lo larga que sea la nota. */
.imm-pop-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0; }

/* LA REJILLA. Una fila por campo; las vacías no se pintan (gridHTML las filtra), así que el
   mismo <dl> sirve para los once tipos sin una cabecera distinta por tipo. */
.imm-grid { margin: 16px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; align-items: baseline; }
.imm-grid dt { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint); text-align: right; }
.imm-grid dd { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.5; }

.imm-orig { font-family: var(--font-read); font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.imm-tr { font-family: var(--font-read); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); }
.imm-gloss { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.imm-def { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.55; color: var(--ink-soft); }
.imm-strong { font-size: .72rem; color: var(--ink-faint); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 7px; }

/* EL VERSÍCULO dentro de la ficha: clonado del <p> de la lectura, con la palabra tocada
   resaltada donde estaba. El resaltado es el mismo par de la app (filete accent + fondo dorado). */
.imm-q { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); }
.imm-q-hi { color: var(--ink); border-bottom: 2px solid rgba(166,85,46,.75);
  background: rgba(227,199,122,.22); border-radius: 3px; padding: 0 1px; }

/* LA NOTA, partida por sus propias marcas. El rótulo se lo da el ⭐ del dato. */
.imm-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 11px; color: var(--ink-soft); font-size: .95rem; line-height: 1.62; }
.imm-note-k { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-deep); }
.imm-note p { margin: 0; text-wrap: pretty; }
.imm-warn { color: var(--gold-deep); }

/* La lista enumerable: en columna y numerada (a dos columnas se leía como un índice roto). */
.imm-pop-list { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.imm-pop-list li { display: flex; gap: 9px; font-family: var(--font-read); font-size: 1rem;
  line-height: 1.45; color: var(--ink); }
.imm-pop-li-n { flex: 0 0 auto; font-family: var(--font-body); font-size: .72rem; line-height: 1.9; color: var(--ink-faint); }

/* Imagen de la capa (sin cambios de sitio: lo primero que se ve). */
.imm-pop-fig { margin: 0 0 14px; }
.imm-pop-img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.imm-pop-cap { margin-top: 6px; font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }

/* Separador entre capas apiladas: filete dorado, para que se vea que empieza OTRA ficha. */
.imm-pop-div { border: 0; border-top: 2px solid var(--gold); margin: 18px 0 16px; }

/* Pie de referencia: solo sale cuando la ficha NO pudo tomar el versículo de la lectura. */
.imm-pop-ref { margin-top: 14px; font-size: .78rem; color: var(--ink-faint); }

/* Móvil: la acción se va a su propia línea, a lo ancho, y las etiquetas de la rejilla suben
   encima de su valor — a 360 px una columna de versalitas se come el texto. */
@media (max-width: 460px) {
  .imm-sec-top { flex-wrap: wrap; }
  .imm-pop-actions { width: 100%; }
  .imm-pop-actions .imm-act { flex: 1 1 auto; justify-content: center; text-align: center; }
  .imm-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .imm-grid dt { text-align: left; margin-top: 8px; }
}

/* selector de modo (al entrar o al tocar ✨) */
/* «Novedades» para probadores (notas de la actualización) — se muestra ANTES del selector de modo. */
.wn-back { position: fixed; inset: 0; z-index: 92; padding: 20px;
  background: color-mix(in srgb, var(--ink) 62%, transparent); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; }
.wn { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 18px;
  max-width: 480px; width: 100%; padding: 26px 24px 22px; box-shadow: 0 16px 48px rgba(20, 16, 12, .34);
  max-height: 88vh; overflow-y: auto; text-align: left; }
.wn-badge { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-deep, #a9821f); margin-bottom: 10px; }
body.theme-dark .wn-badge { color: var(--gold-foil, #e3c77a); }
.wn-ref { font-family: var(--font-display, "Playfair Display", serif); font-size: 1.5rem; color: var(--indigo); line-height: 1.1; }
body.theme-dark .wn-ref { color: var(--gold-foil, #e3c77a); }
.wn-title { font-size: 1rem; color: var(--ink); margin: 3px 0 14px; font-weight: 600; }
.wn-items { margin: 0; padding-left: 20px; }
.wn-items li { font-size: .9rem; line-height: 1.55; color: var(--ink-soft, var(--ink)); margin: 5px 0; }
.wn-histh { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin: 16px 0 8px; border-top: 1px solid var(--border); padding-top: 12px; }
.wn-history { display: flex; flex-direction: column; gap: 7px; }
.wn-hrow { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; }
.wn-hdot { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); align-self: center; }
.wn-href { font-weight: 700; color: var(--ink); white-space: nowrap; }
.wn-htitle { color: var(--ink-faint); }
.wn-btn { display: block; width: 100%; margin-top: 20px; padding: 12px 16px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 700; cursor: pointer; background: var(--gold, #c9a24b); color: #2a1e08;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 40%, transparent); }
.wn-btn:hover { filter: brightness(1.05); }
.mode-chooser-back { position: fixed; inset: 0; z-index: 90; padding: 20px;
  background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; }
.mode-chooser { background: var(--card, #fff); border: 1px solid var(--border); border-radius: 18px;
  max-width: 720px; width: 100%; padding: 28px 24px; box-shadow: 0 16px 48px rgba(20, 16, 12, .34); }
.mc-head { font-family: var(--font-display, "Playfair Display", serif); font-size: 1.5rem; color: var(--indigo); text-align: center; }
/* tema oscuro: --indigo (#2c3e6b) se pierde sobre la tarjeta navy → dorado pálido */
body.theme-dark .mc-head { color: var(--gold-foil, #e3c77a); }
.mc-sub { text-align: center; color: var(--ink-faint); font-size: .86rem; margin: 5px 0 20px; }
/* Estilo «B+E» (dueño, 2026-07-10 — MOCKUP_SELECTOR_MODO.html): arte del libro arriba +
   numeral romano dorado con filete + título serif. Sin emojis (numerales tipográficos). */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.mc-card { display: flex; flex-direction: column; text-align: center; font: inherit; color: var(--ink);
  background: var(--parchment-2, #f4ecdd); border: 1px solid var(--border); border-radius: 16px;
  padding: 0; overflow: hidden; cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s; }
.mc-card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: var(--shadow-lg, 0 10px 30px rgba(20,16,12,.25)); }
.mc-card.current { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent); }
.mc-art { display: block; height: 86px; background-size: cover; background-position: center;
  border-bottom: 1px solid var(--border); }
.mc-body { display: block; padding: 12px 13px 16px; }
.mc-num { display: block; font-family: var(--font-display, "Playfair Display", serif);
  font-size: 1.9rem; line-height: 1; color: var(--gold-deep); transition: text-shadow .18s; }
.mc-card:hover .mc-num { text-shadow: 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent); }
.mc-rule { display: block; width: 34px; height: 1.5px; margin: 7px auto 8px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.mc-t { display: block; font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 700; color: var(--ink); font-size: 1.02rem; }
.mc-d { display: block; font-size: .78rem; color: var(--ink-faint); line-height: 1.5; margin-top: 5px; }
/* Idioma con PALABRAS COMPLETAS dentro del selector (dueño, 2026-07-11): quien abre la app
   en el idioma equivocado debe ver clarísimo el cambio — «Español / English», no «ES/EN». */
.mc-lang { display: flex; justify-content: center; margin: 0 0 14px; }
.mc-lang-opt { font: inherit; font-size: .86rem; font-weight: 700; padding: 6px 18px; cursor: pointer;
  background: var(--parchment-2); color: var(--ink-faint); border: 1px solid var(--border); }
.mc-lang-opt:first-child { border-radius: 999px 0 0 999px; border-right: none; }
.mc-lang-opt:last-child { border-radius: 0 999px 999px 0; }
.mc-lang-opt:hover { color: var(--ink); border-color: var(--gold); }
.mc-lang-opt.on { background: var(--gold); color: #241c10; border-color: var(--gold); }

@media (max-width: 640px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-card { flex-direction: row; text-align: left; align-items: stretch; }
  .mc-art { width: 96px; height: auto; flex: none; border-bottom: none; border-right: 1px solid var(--border); }
  .mc-body { padding: 11px 13px; }
  .mc-num { display: inline-block; font-size: 1.3rem; margin-right: 8px; vertical-align: baseline; }
  .mc-rule { display: none; }
  .mc-t { display: inline-block; }
}
#modeToggle { font-size: 1rem; line-height: 1; }

/* ============================================================
   ICONOS DUOTONO (Set 2, decisión del dueño 2026-07-11 — js/icons.js)
   Tamaño Y COLOR: los iconos del cromo van SIEMPRE en oro (currentColor
   hereda; aquí se fija el oro en sus contenedores — como en el catálogo).
   ============================================================ */
.btn svg, .vps-btn svg, .rn-res svg { width: 1em; height: 1em; vertical-align: -0.12em; }
#modeToggle svg { width: 18px; height: 18px; vertical-align: middle; }
.btn-icon svg { width: 17px; height: 17px; vertical-align: middle; }
.btn-icon svg, .ts-go svg, .btn svg, .vps-btn svg, .rn-res svg, .rn-btn svg { color: var(--gold-deep); }
.mc-sub svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--gold-deep); }

/* ============================================================
   READNAV — modos de lectura (Plana/Inmersiva): directo a la Escritura
   (js/readnav.js · aprobado 2026-07-10 · mockup MOCKUP_LECTURA_DIRECTA.html)
   ============================================================ */
/* cromo esbelto SOLO en el lector, en modos de lectura */
body.view-read.mode-plain .crumbs, body.view-read.mode-immersive .crumbs,
body.view-read.mode-plain #printSheet, body.view-read.mode-immersive #printSheet,
body.view-read.mode-plain .study-q, body.view-read.mode-immersive .study-q,
body.view-read.mode-plain .footer, body.view-read.mode-immersive .footer,
body.view-read.mode-plain #topnav, body.view-read.mode-immersive #topnav { display: none !important; }
/* ⚠⚠ UNA SOLA BARRA (2026-09-06 · opción B, decisión del dueño). Aquí vivía
   `display:none` sobre `.reader-bar .fs-ctl`, porque los A−/A+ de verdad se
   duplicaban con los de la barra esbelta que `js/readnav.js` pintaba encima.
   Ya no hay dos barras: ☰ y la píldora se inyectan en la `.reader-bar`, así que
   el fs-ctl ORIGINAL es el único que hay y se ve. La regla se fue, y con ella
   el proxy de JS que la obligaba a existir. Orden de la barra:
   [☰ píldora │ capítulo · versión │ A− A+ · hoja]. Los dos separadores son
   BORDES, no elementos: una barra no lleva DOM que solo pinta una raya. */
.rn-head { display: inline-flex; align-items: center; gap: 8px;
  border-right: 1px solid var(--border); padding-right: 12px; margin-right: 2px; }
/* el fs-ctl venía con `margin-left:auto` de cuando la barra alineaba a la
   izquierda y él se iba al fondo; en una barra CENTRADA eso abría un hueco. */
.reader-bar .fs-ctl { margin-left: 2px; position: relative; }
.reader-bar .fs-ctl::before { content: ""; position: absolute; left: -9px; top: 1px; bottom: 1px;
  width: 1px; background: var(--border); }
/* ⚠ EL TELÉFONO SE QUEDA COMO ESTABA (decisión del dueño): allí `readnav` sigue
   pintando su barra esbelta propia —☰ + píldora + A−/A+— porque fusionar le
   costaba 111px pegados arriba en vez de 54 (medido a 390px). Así que en
   estrecho vuelven las tres reglas de antes: la barra, el proxy A−/A+, y el
   fs-ctl original oculto para no verlo dos veces. El escritorio no las ve. */
.rn-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px;
  position: sticky; top: 0; z-index: 30; padding: 8px 0;
  background: color-mix(in srgb, var(--parchment) 90%, transparent); backdrop-filter: blur(6px); }
.rn-fs { font-size: .78rem; font-weight: 700; padding: 7px 9px; }
.rn-fs-big { font-size: .92rem; }
@container device (max-width: 760px) {
  /* la cabecera del riel tumbado mide 54px — el mismo par que `.edit-banner` */
  body.shell-rail .rn-bar { top: 54px; }
  body.view-read.mode-plain .reader-bar .fs-ctl,
  body.view-read.mode-immersive .reader-bar .fs-ctl { display: none !important; }
}
.rn-btn { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink-soft); font: inherit; font-size: 1rem; padding: 7px 12px; cursor: pointer; }
.rn-btn:hover { border-color: var(--gold); color: var(--ink); }
.rn-pill { flex: 1; max-width: 340px; text-align: center; background: var(--card);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--ink); font-size: .95rem; }
.rn-pill:hover { border-color: var(--gold); }
.rn-pill small { color: var(--ink-faint); font-weight: 600; }

/* flechas laterales ‹ › */
.rn-arrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 28;
  width: 36px; height: 60px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--border);
  color: var(--ink-soft); cursor: pointer; font-size: 1.25rem; }
.rn-arrow:hover { color: var(--gold-deep); border-color: var(--gold); }
.rn-arrow.prev { left: 0; border-radius: 0 12px 12px 0; border-left: none; }
.rn-arrow.next { right: 0; border-radius: 12px 0 0 12px; border-right: none; }
body:not(.view-read) .rn-arrow, body.mode-study .rn-arrow { display: none; }

/* hoja de navegación (libros/capítulos + buscador) */
.rn-sheet-back { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end;
  background: color-mix(in srgb, var(--ink) 50%, transparent); }
.rn-sheet { background: var(--card); border-top: 2px solid var(--gold);
  border-radius: 18px 18px 0 0; width: 100%; max-height: 80vh; overflow: auto;
  padding: 10px 16px 26px; animation: rnup .18s ease-out; }
@keyframes rnup { from { transform: translateY(28px); opacity: .4; } to { transform: none; opacity: 1; } }
.rn-sh-grip { width: 44px; height: 4px; border-radius: 999px; background: var(--border); margin: 2px auto 8px; }
.rn-sh-title { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold-deep); margin: 12px 0 7px; }
.rn-search { width: 100%; font: inherit; font-size: .95rem; background: var(--parchment);
  border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 13px; color: var(--ink); }
.rn-search:focus { outline: none; border-color: var(--gold); }
.rn-res { display: block; width: 100%; text-align: left; background: var(--parchment);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0;
  cursor: pointer; font: inherit; color: var(--ink-soft); font-size: .86rem; line-height: 1.5; }
.rn-res:hover { border-color: var(--gold); }
.rn-res b { color: var(--gold-deep); }
.rn-res.rn-go { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card));
  color: var(--ink); font-weight: 600; }
.rn-none { font-size: .82rem; color: var(--ink-faint); font-style: italic; margin: 6px 0; }
.rn-tabs { display: flex; gap: 8px; }
.rn-tab { flex: 1; text-align: center; background: var(--parchment); border: 1px solid var(--border);
  border-radius: 10px; padding: 7px; cursor: pointer; font: inherit; color: var(--ink-soft);
  font-weight: 700; font-size: .88rem; }
.rn-tab.on { border-color: var(--gold); color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.rn-bookselect { width: 100%; font: inherit; font-size: .95rem; background: var(--parchment);
  border: 1.5px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--ink);
  cursor: pointer; margin-bottom: 8px; }
.rn-bookselect:focus { outline: none; border-color: var(--gold); }
/* grilla COMPACTA: abreviaturas de canto de Biblia (Gn, Éx, Lv…) — título = nombre completo */
.rn-books { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.rn-bk { background: var(--parchment); border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 2px; text-align: center; font-size: .8rem; color: var(--ink); cursor: pointer;
  font: inherit; font-weight: 700; white-space: nowrap; }
.rn-bk:hover { border-color: var(--gold); }
.rn-bk.soon { opacity: .38; cursor: default; }
.rn-bk.cur { border-color: var(--gold); color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.rn-chs { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.rn-ch { background: var(--parchment); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 0; text-align: center; font-size: .88rem; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-weight: 700; }
.rn-ch:hover { border-color: var(--gold); color: var(--ink); }
.rn-ch.cur { border-color: var(--gold); color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
@media (min-width: 760px) {
  .rn-sheet-back { align-items: center; justify-content: center; padding: 24px; }
  .rn-sheet { max-width: 560px; border-radius: 18px; border: 1px solid var(--border); border-top: 2px solid var(--gold); }
  .rn-books { grid-template-columns: repeat(8, 1fr); }
  .rn-chs { grid-template-columns: repeat(10, 1fr); }
}

/* ============================================================
   CABECERA DEL LECTOR ALINEADA A LA COLUMNA (2026-07-10, pedido del dueño)
   El título «Génesis 1», el subtítulo y la nota del capítulo comparten la
   columna de la Escritura: mismo ancho 66ch calculado con la MISMA fuente
   del texto (font-family/size del contenedor) → el título arranca exactamente
   donde arranca la Escritura, centrado en la página como el texto.
   ============================================================ */
.reader-head { max-width: 66ch; margin: 0 auto; text-align: center;
  font-family: var(--font-read); font-size: calc(1.27rem * var(--fs-scale, 1)); }
.reader-head .reader-title { font-size: 2.5rem; }
.reader-head .reader-sub { font-size: .76rem; }
/* la nota del capítulo mantiene su texto a la izquierda (lectura), solo la caja va centrada */
.reader-head .chapter-note { font-size: 1rem; text-align: left; }
/* las barras de control también centradas, no pegadas a la izquierda */
.reader-bar { justify-content: center; }
.rn-pill { flex: 0 1 340px; }
/* y la barra de NAVEGACIÓN superior igual: contenido centrado, no apiñado a la izquierda */
.topbar { justify-content: center; }
@media (max-width: 760px) {
  .reader-head { font-size: calc(1.18rem * var(--fs-scale, 1)); }
  .reader-head .reader-title { font-size: 2rem; }
}
@container device (max-width: 760px) {
  .reader-head { font-size: calc(1.18rem * var(--fs-scale, 1)); }
  .reader-head .reader-title { font-size: 2rem; }
}

/* ============================================================
   PARALELO EN PARES POR VERSÍCULO (2026-07-10, pedido del dueño)
   Escritorio: dos columnas ALINEADAS verso a verso. Móvil/📱: el versículo
   secundario va justo debajo del primario (como interlineal + traducción).
   ============================================================ */
.verses.parallel.pairs { display: block; max-width: 1080px; margin: 8px auto 0; }
.par-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.par-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; align-items: start; }
@media (max-width: 760px) {
  .verses.parallel.pairs { max-width: 66ch; }
  .par-heads { grid-template-columns: 1fr; }
  .par-head-sec { display: none; }
  .par-pair { display: block; margin-bottom: 18px; }
  .par-pair .verse { margin-bottom: 4px; }
  .par-pair .verse.par-sec { font-size: .88em; color: var(--ink-soft);
    border-left: 2px solid var(--border); padding-left: 12px; margin: 2px 0 0; line-height: 1.75; }
  .par-pair .verse.par-sec .dropcap { all: unset; font-weight: 700; }
  .par-pair .verse.par-sec .dropcap .dropcap-punct { all: unset; }
}
@container device (max-width: 760px) {
  .verses.parallel.pairs { max-width: 66ch; }
  .par-heads { grid-template-columns: 1fr; }
  .par-head-sec { display: none; }
  .par-pair { display: block; margin-bottom: 18px; }
  .par-pair .verse { margin-bottom: 4px; }
  .par-pair .verse.par-sec { font-size: .88em; color: var(--ink-soft);
    border-left: 2px solid var(--border); padding-left: 12px; margin: 2px 0 0; line-height: 1.75; }
  .par-pair .verse.par-sec .dropcap { all: unset; font-weight: 700; }
  .par-pair .verse.par-sec .dropcap .dropcap-punct { all: unset; }
}

/* ============================================================
   VOLUMEN IMPRESO — retórica editorial de las pestañas del libro
   (2026-08-27). Evolución de «Manuscrito iluminado»: NO añade ni un
   token de color ni una fuente. Solo composición sobre el sistema que
   ya existe — se quita la caja y se pone aire, filete o versalita.
   Regla rectora (UI_STYLEGUIDE.md): lo premium se logra QUITANDO.
   ⚠ Los cortes responsivos van en @container device y NO en @media:
   #device es el contenedor con container-type:inline-size, así que la
   misma regla sirve para el móvil real Y para la vista de teléfono 📱
   (un @media leería la ventana del escritorio y la vista 📱 mentiría).
   ============================================================ */

/* ---------- Cornisa (running head) bajo la fila de pestañas ---------- */
.book-cornice { display: flex; align-items: center; gap: 18px; padding: 9px 50px;
  background: var(--parchment-2); border-bottom: 1px solid var(--border); }
.bc-book { font-family: var(--font-display); font-size: .92rem; font-weight: 700; letter-spacing: .02em; color: var(--indigo); }
body.theme-dark .bc-book { color: var(--gold-foil); }
.bc-sep { width: 1px; height: 14px; background: var(--gold-soft); flex: none; }
.bc-tab { text-transform: uppercase; letter-spacing: .2em; font-size: .64rem; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }
body.theme-dark .bc-tab { color: var(--gold); }
.bc-parts { display: flex; gap: 22px; margin-left: auto; }
.bc-part { display: flex; align-items: baseline; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.bc-part i { font-family: var(--font-display); font-style: normal; font-weight: 700; color: var(--gold); }

/* ---------- Fila de pestañas en versalitas ---------- */
.tabs.tabs-vol { justify-content: center; gap: 0; border-bottom: 1px solid var(--border); margin: 24px 0 0; padding: 0 40px; background: var(--parchment-2); flex-wrap: nowrap; }
.tabs-vol .tab { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-faint); padding: 14px 26px; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs-vol .tab:hover { color: var(--ink); }
.tabs-vol .tab.active { font-weight: 700; color: var(--indigo); border-bottom-color: var(--gold); }
body.theme-dark .tabs-vol .tab.active { color: var(--gold-foil); }
.tabs-vol .tab-div { width: 1px; height: 15px; background: color-mix(in srgb, var(--border) 80%, var(--ink-faint)); align-self: center; flex: none; }

/* ---------- Portada de pestaña ---------- */
.vol-cover { text-align: center; padding: 48px 0 36px; }
.vol-cover .eyebrow { justify-content: center; }
.vol-cover h1 { font-size: 2.9rem; letter-spacing: -.02em; margin: 0; }
.vol-cover .lead { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.8; color: var(--ink); max-width: 62ch; margin: 18px auto 0; text-wrap: pretty; }
.vol-cover .rule-gold { margin-top: 32px; }
.vol-stats { display: flex; gap: 44px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.vol-stat { display: flex; flex-direction: column; align-items: center; }
.vol-stat b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold-deep); line-height: 1.1; }
body.theme-dark .vol-stat b { color: var(--gold); }
.vol-stat span { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); margin-top: 2px; }
.vol-cover .book-cta { max-width: 460px; margin: 26px auto 0; }

/* ---------- Parte numerada ---------- */
.vol-part-head { display: flex; gap: 32px; align-items: baseline; margin-bottom: 8px; }
.vol-num { font-family: var(--font-display); font-size: 3.2rem; font-weight: 700; color: var(--gold-soft); line-height: 1; flex: none; width: 76px; }
.vol-part-head h2 { font-size: 1.85rem; margin: 0 0 6px; }
.vol-part-head p { font-size: 1rem; color: var(--ink-soft); line-height: 1.7; margin: 0; max-width: 64ch; }
.vol-body { margin: 20px 0 58px 108px; }
.vol-body > .edit-tools { margin-top: 16px; }

/* ---------- Entrada editorial (persona, lugar, tema, actividad) ---------- */
.vol-entry { padding: 26px 0; border-top: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr 168px; gap: 40px; align-items: start; }
.vol-entry h3 { font-size: 1.62rem; margin: 0 0 8px; }
.vol-entry .who { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-weight: 700; color: var(--indigo); margin-bottom: 6px; }
body.theme-dark .vol-entry .who { color: var(--gold-foil); }
.vol-entry p { font-family: var(--font-read); font-size: 1.09rem; line-height: 1.75; color: var(--ink); margin: 0; max-width: 66ch; text-wrap: pretty; }
.vol-entry .vol-aside { text-align: right; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.vol-entry .refs { font-size: .76rem; color: var(--gold-deep); font-weight: 700; letter-spacing: .03em; line-height: 1.5; }
body.theme-dark .vol-entry .refs { color: var(--gold); }
.vol-entry .vol-aside .proph-ref { font-size: .76rem; }
.vol-entry .person-journey { margin-top: 10px; }

/* ---------- Lámina enmarcada: TODA imagen de contenido va aquí dentro ---------- */
.plate { display: block; padding: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 1px 2px rgba(43,33,24,.05), 0 8px 22px rgba(43,33,24,.10); }
.plate img { width: 100%; aspect-ratio: 1600 / 995; object-fit: cover; display: block;
  border: 1px solid #efe6d2; background: var(--parchment-2); }
.plate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 26px; align-items: start; }
/* Galería de LÁMINAS en flujo de columnas (galería de lugares). En una rejilla
   de filas, una ficha SIN arte deja su fila coja: su pie arranca arriba y el de
   la vecina con lámina arranca 200 px más abajo. Génesis lo enseña sin piedad —
   10 de sus 37 lugares tienen arte hoy—. El flujo de columnas no deja huecos,
   respeta el orden (columna a columna, como un índice impreso) y, cuando TODOS
   los lugares tengan su lámina, se lee igual que la rejilla. */
.plate-flow { display: block; columns: 3; column-gap: 26px; }
.plate-flow .plate-item { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 38px; }
.plate-cap { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.plate-cap h3 { font-size: 1.24rem; margin: 0; line-height: 1.2; }
.plate-cap p { font-family: var(--font-read); font-size: 1.02rem; line-height: 1.65; color: var(--ink); margin: 0; text-wrap: pretty; }
.plate-cap .orig-name { margin: 0; }
.plate-cap .refs { margin-top: 8px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--card));
  font-size: .76rem; color: var(--gold-deep); font-weight: 700; letter-spacing: .03em; }
body.theme-dark .plate-cap .refs { color: var(--gold); }

/* ---------- Nota de filete (sustituye a .custom-origin y .custom-cmd) ---------- */
.vol-note { padding-left: 13px; border-left: 2px solid var(--border); margin-top: 4px; }
.vol-note.is-command { border-left-color: var(--gold-soft); }
.vol-note-tag { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; font-weight: 700; color: var(--gold-deep); margin-bottom: 3px; }
.vol-note.is-command .vol-note-tag { color: var(--indigo); }
body.theme-dark .vol-note-tag { color: var(--gold); }
body.theme-dark .vol-note.is-command .vol-note-tag { color: var(--gold-foil); }
.vol-note p { font-family: var(--font-read); font-size: .98rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ---------- Lista de índice con guía punteada ---------- */
.vol-index a, .vol-index .vol-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.vol-index a:hover { color: var(--gold-deep); }
.vol-index a:hover .vi-dots { border-bottom-color: var(--gold-soft); }
.vol-index .vi-label { font-family: var(--font-serif); font-size: 1.16rem; line-height: 1.35; }
.vol-index .vi-ref { flex: 0 0 92px; font-size: .8rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .04em; }
body.theme-dark .vol-index .vi-ref, body.theme-dark .vol-index .vi-end { color: var(--gold); }
.vol-index .vi-dots { flex: 1; border-bottom: 1px dotted #d9cdb2; transform: translateY(-4px); }
.vol-index .vi-end { flex: none; font-size: .76rem; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }
.vol-index .vi-ico { flex: none; display: flex; align-items: center; color: var(--gold-deep); }
.vol-index .vi-ico svg { width: 18px; height: 18px; display: block; }
body.theme-dark .vol-index .vi-ico { color: var(--gold); }
.vol-index-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }

/* ---------- Folios de capítulo (sustituye .chap-grid) ---------- */
.vol-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.vol-progress span { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--ink-faint); }
.vol-progress i { display: block; width: 170px; height: 5px; border-radius: 3px; background: var(--parchment-2); overflow: hidden; }
.vol-progress i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.folio-row { display: grid; grid-template-columns: repeat(21, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.folio { display: flex; align-items: center; justify-content: center; padding: 16px 0; text-decoration: none;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink-faint);
  border-bottom: 2px solid transparent; border-left: 1px solid color-mix(in srgb, var(--border) 60%, var(--card)); }
.folio-row .folio:nth-child(21n + 1) { border-left: 0; }
.folio-row .folio:nth-child(n + 22) { border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--card)); }
.folio.done { color: var(--indigo); border-bottom-color: var(--gold); }
body.theme-dark .folio.done { color: var(--gold-foil); }
.folio:hover { background: var(--parchment-2); color: var(--gold-deep); }

/* ---------- Índice de capítulos ---------- */
.chap-vol a { display: grid; grid-template-columns: 76px 1fr 92px; gap: 30px; align-items: baseline;
  padding: 22px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.chap-vol a:hover .cv-num { color: var(--gold); }
.chap-vol .cv-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold-soft); line-height: 1; text-align: right; }
.chap-vol b { display: block; font-family: var(--font-display); font-size: 1.34rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; }
.chap-vol p { font-family: var(--font-read); font-size: 1.07rem; line-height: 1.7; color: var(--ink); margin: 0; max-width: 70ch; text-wrap: pretty; }
.chap-vol .cv-badge { text-align: right; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-good); }

/* ---------- Cronología sin tarjetas (parte IV del Estudio) ---------- */
.chrono-vol { margin: 0 0 30px; overflow-x: auto; }
.chrono-vol .chrono-h { margin: 0 0 12px; font-size: 1.16rem; color: var(--indigo); }
body.theme-dark .chrono-vol .chrono-h { color: var(--gold-foil); }
.chrono-vol .feast-strip { gap: 0; padding: 6px 0 12px; }
.chrono-vol .feast-item { background: none; border: 0; border-left: 1px solid var(--border); border-radius: 0; padding: 4px 14px; align-items: flex-start; text-align: left; }
.chrono-vol .feast-item:first-child { border-left: 0; padding-left: 0; }
.chrono-vol .feast-item:hover { border-color: var(--border); }
.chrono-vol .feast-item:hover b { color: var(--gold-deep); }
.chrono-vol .feast-item b { font-family: var(--font-display); font-size: .96rem; }
.chrono-vol .feast-dot { width: 9px; height: 9px; background: var(--gold); }
.chrono-vol .feast-unc .feast-dot { background: var(--ink-faint); }
.chrono-vol .feast-unc { border-style: solid; }
.chrono-vol .feast-line { display: none; }
.chrono-vol .chrono-note { margin-top: 4px; }
.vol-timeline { position: relative; }
.vol-timeline .tl-item { position: relative; padding: 18px 0 18px 130px; border-top: 1px solid var(--border); }
.vol-timeline .tl-item::before { display: none; }
.vol-timeline .tl-item::after { content: ''; position: absolute; left: 110px; top: 20px; bottom: 20px; width: 1px; background: var(--border); }
.vol-timeline .tl-item .tl-ref { position: absolute; left: 0; top: 20px; width: 100px; text-align: right; font-size: .74rem; }
.vol-timeline .tl-item b { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.015em; }
.vol-timeline .tl-item p { font-family: var(--font-read); font-size: 1.07rem; line-height: 1.7; color: var(--ink); margin: 6px 0 0; max-width: 66ch; text-wrap: pretty; }

/* ---------- Mapa como lámina, con la ficha al margen ---------- */
.map-vol { display: grid; grid-template-columns: 1fr 348px; gap: 26px; align-items: start; }
.map-vol > .map-searchbar, .map-vol > .map-viewtabs, .map-vol > .journey-list { grid-column: 1 / -1; }
.map-vol .map-stage { padding: 13px; background: var(--card); border: 1px solid var(--border); border-radius: 5px;
  box-shadow: 0 1px 2px rgba(43,33,24,.05), 0 10px 26px rgba(43,33,24,.12); }
.map-vol .map-stage > svg { border: 1px solid #efe6d2; }
.map-vol .map-detail { position: static; width: auto; max-height: none; animation: none;
  border-radius: 4px; padding: 11px; box-shadow: 0 1px 2px rgba(43,33,24,.05), 0 8px 22px rgba(43,33,24,.10); }
/* ⚠ La caja de la imagen guarda SIEMPRE la proporción de la lámina, haya arte
   o no: así el marco no se desploma cuando el archivo aún no existe. Y la
   imagen queda `relative` —no `static`— porque el z-index solo obedece a un
   elemento POSICIONADO: en estático, el «imagen en preparación», que es
   absoluto, se pintaba ENCIMA de la fotografía. */
.map-vol .md-imgbox { height: auto; aspect-ratio: 1600 / 995; border-radius: 0; background: var(--parchment-2); }
.map-vol .md-imgbox .md-img { position: relative; z-index: 2; width: 100%; height: 100%;
  object-fit: cover; display: block; border: 1px solid #efe6d2; }
.map-vol .md-placeholder { color: var(--ink-faint); z-index: 1; }
.map-vol .md-close { display: none; }
.map-vol .md-history { background: none; border-left: 2px solid var(--gold-soft); border-radius: 0; padding: 0 0 0 13px; }
.map-plate-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 2px 0; }
.map-plate-cap em { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: var(--ink-soft); }
.map-plate-cap span { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); flex: none; }
.map-side-index { margin-top: 22px; }
.map-side-index .mi-head { text-transform: uppercase; letter-spacing: .18em; font-size: .62rem; font-weight: 700; color: var(--gold-deep); margin-bottom: 6px; }
body.theme-dark .map-side-index .mi-head { color: var(--gold); }
.map-side-index .vi-label { font-size: 1.02rem; flex: 0 1 auto; }
/* Las refs de un lugar pueden ser LARGUÍSIMAS (Galilea sale en doce pasajes).
   En la columna estrecha se dejan envolver en su propio bloque: si se forzara
   una sola línea, el nombre del lugar sería el que se partiría. */
.map-side-index .vi-end { font-size: .72rem; white-space: normal; text-align: right;
  flex: 0 1 auto; max-width: 62%; line-height: 1.45; }
.map-side-index .vi-dots { flex: 1 1 12px; min-width: 12px; }
.map-side-index .vol-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; text-align: left; font: inherit; }
.map-side-index .vol-row:hover .vi-label { color: var(--gold-deep); }
.map-side-index .vol-row.active .vi-label { color: var(--indigo); font-weight: 700; }
body.theme-dark .map-side-index .vol-row.active .vi-label { color: var(--gold-foil); }
.map-viewtabs.vol { gap: 26px; }
.map-viewtabs.vol .map-viewtab { border: 0; background: none; border-radius: 0; padding: 0 0 7px;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; }
.map-viewtabs.vol .map-viewtab.active { color: var(--indigo); font-weight: 700; border-bottom-color: var(--gold); background: none; }
body.theme-dark .map-viewtabs.vol .map-viewtab.active { color: var(--gold-foil); }

/* ---------- Modo oscuro: solo los dos hex literales del sistema ---------- */
body.theme-dark .plate img, body.theme-dark .map-vol .map-stage > svg,
body.theme-dark .map-vol .md-imgbox .md-img { border-color: #3a4570; }
body.theme-dark .vol-index .vi-dots { border-bottom-color: #3a4570; }
body.theme-dark .plate, body.theme-dark .map-vol .map-stage, body.theme-dark .map-vol .map-detail {
  box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.38); }

/* ---------- Piezas de las partes: datos clave, grupos, láminas, juegos ---------- */
.vol-part { margin: 0; }
.vol-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.vol-fact { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--border); }
.vol-fact i { font-family: var(--font-display); font-style: normal; font-size: 1.5rem; font-weight: 700; color: var(--gold-soft); width: 28px; flex: none; line-height: 1; text-align: right; }
.vol-fact p { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.7; color: var(--ink); margin: 0; text-wrap: pretty; }
.vol-group-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 2px; }
.vol-group-head:first-child { margin-top: 0; }
.vol-group-head h3 { font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; color: var(--indigo); margin: 0; }
body.theme-dark .vol-group-head h3 { color: var(--gold-foil); }
.vol-group-head span { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--ink-faint); }
.vol-index button.vol-row { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit; text-align: left; cursor: pointer; }
.plate-item { min-width: 0; }
.cv-body { min-width: 0; }
/* Regla 7 · el nombre en el original pierde la caja: solo la serif y el acento. */
.vol-body .orig-name, .plate-cap .orig-name, .map-vol .md-body .orig-name {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 4px;
  font-family: var(--font-serif); font-size: 1.14rem; color: var(--accent); line-height: 1.45; }
/* Actividades */
.vol-ico { flex: none; color: var(--gold); font-size: 1.5rem; line-height: 1; }
.vol-ico svg { width: 28px; height: 28px; display: block; }
.vol-game { grid-template-columns: 52px 1fr 210px; gap: 22px; text-decoration: none; color: var(--ink); }
.vol-game:hover h3 { color: var(--gold-deep); }
.vol-game .vol-ico { padding-top: 5px; }
.vol-game .vol-aside { padding-top: 5px; }
.vg-count { font-size: .66rem; font-weight: 700; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .12em; }
body.theme-dark .vg-count { color: var(--gold); }
.vg-best { background: color-mix(in srgb, var(--sage) 16%, var(--card)); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--sage) 40%, var(--border)); border-radius: 999px;
  font-size: .66rem; font-weight: 700; padding: 4px 10px; }
.vol-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.vol-acts a { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0;
  border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.vol-acts a:hover b { color: var(--gold-deep); }
.vol-acts b { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 3px; }
.vol-acts p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.55; }
.vol-acts .vol-ico svg { width: 24px; height: 24px; }
/* Las dos columnas del mapa */
.map-vol > .map-col-main, .map-vol > .map-col-side { min-width: 0; }

/* ---------- Teléfono (real y vista 📱): @container, nunca @media ---------- */
@container device (max-width: 980px) {
  .plate-grid { grid-template-columns: repeat(2, 1fr); }
  .plate-flow { columns: 2; }
  .map-vol { grid-template-columns: 1fr; }
  .folio-row { grid-template-columns: repeat(7, 1fr); }
  .folio-row .folio:nth-child(21n + 1) { border-left: 1px solid color-mix(in srgb, var(--border) 60%, var(--card)); }
  .folio-row .folio:nth-child(7n + 1) { border-left: 0; }
  .folio-row .folio:nth-child(n + 8) { border-top: 1px solid color-mix(in srgb, var(--border) 60%, var(--card)); }
  .vol-index-2 { grid-template-columns: 1fr; }
}
@container device (max-width: 760px) {
  /* ⚠ 2026-08-27 (dueño): esta fila era un SCROLL HORIZONTAL con la barra OCULTA
     (`overflow-x: auto` + `scrollbar-width: none`). O sea: había seis pestañas y el
     lector solo veía tres, sin ninguna señal de que hubiera más — el único indicio era
     una palabra cortada, y el dueño solo lo sabía porque él las había puesto. Esconder
     la barra quitó la ÚNICA pista que tenía el scroll. En un móvil no hay hover ni
     rueda: si no se ve, no existe.
     Arreglo: NO se descubre un scroll, se ENSEÑAN las pestañas. En teléfono la fila
     ENVUELVE en dos líneas y se ven las seis a la vez. Cuesta ~44px de alto una vez;
     a cambio ninguna sección del libro queda escondida. Los divisores siguen ocultos
     (entre filas quedarían sueltos) y el borde inferior sigue cerrando el bloque. */
  .tabs.tabs-vol { justify-content: center; flex-wrap: wrap; overflow-x: visible;
    padding: 2px 10px; row-gap: 0; }
  .tabs-vol .tab { flex: none; padding: 11px 12px; font-size: .92rem; }
  .tabs-vol .tab-div { display: none; }
  .book-cornice { padding: 8px 14px; gap: 10px; }
  .bc-parts { display: none; }
  .vol-cover { padding: 30px 0 24px; }
  .vol-cover h1 { font-size: 2.1rem; }
  .vol-stats { gap: 26px; }
  .vol-num { font-size: 2.2rem; width: auto; }
  .vol-part-head { gap: 14px; }
  .vol-part-head h2 { font-size: 1.45rem; }
  .vol-body { margin-left: 0; }
  .vol-entry { grid-template-columns: 1fr; gap: 10px; }
  .vol-facts, .vol-acts { grid-template-columns: 1fr; }
  .vol-game .vol-aside { flex-direction: row; align-items: center; gap: 12px; }
  .vol-entry .vol-aside { text-align: left; padding-top: 0; align-items: flex-start; }
  .chap-vol a { grid-template-columns: 44px 1fr; gap: 16px; }
  .chap-vol .cv-badge { display: none; }
  .vol-timeline .tl-item { padding-left: 0; }
  .vol-timeline .tl-item::after { display: none; }
  .vol-timeline .tl-item .tl-ref { position: static; width: auto; text-align: left; display: block; margin-bottom: 4px; }
}
@container device (max-width: 660px) {
  .plate-grid { grid-template-columns: 1fr; }
  .plate-flow { columns: 1; }
}

/* ============================================================
   FRONTISPICIO — portada de la página de inicio (dirección 1a, 2026-08-27)
   La home es la portada de un libro impreso: doble filete, marca, verso;
   luego los volúmenes abiertos, el canon como índice tipográfico y los modos.
   Sin tokens ni fuentes nuevos: todo se compone con los de :root.
   ⚠ Los literales de papel (#fdfbf6, #d8c48a, #e0d3b6, #d9cdb2, #b7a98f, #ddd0b4)
   vienen del mockup y son de MODO CLARO. El bloque `body.theme-dark` del final los
   remapea a tokens — sin él la portada sale papel blanco sobre fondo azul noche.
   ============================================================ */
.frontis { padding: 12px; }
.frontis-outer { border: 1px solid #d8c48a; border-radius: 10px; padding: 5px; }
.frontis-inner { border: 1px solid var(--border); border-radius: 7px; padding: 52px 70px 44px;
  text-align: center; background: linear-gradient(180deg, #fdfbf6, #f8f2e6); }
.frontis-eyebrow { text-transform: uppercase; letter-spacing: .34em; font-size: .62rem; font-weight: 700; color: var(--gold-deep); }
/* ⚠ `text-transform: uppercase` NO venía en el CSS del prompt, pero el §0 pide que la marca
   se lea DABARION y el §3.1 que las mayúsculas las ponga el CSS y no el dato («así el nombre
   no se guarda gritado»). Sin esta línea el dato «Dabarion» se pintaba tal cual. */
.frontis h1 { font-family: var(--font-display); font-size: 3.5rem; font-weight: 700;
  letter-spacing: .1em; line-height: 1.04; margin: 0; text-transform: uppercase; }
.frontis-descriptor { font-family: var(--font-body); font-size: .78rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); margin-top: 14px; }
.frontis-lead { font-family: var(--font-serif); font-size: 1.34rem; line-height: 1.5;
  color: var(--ink-soft); max-width: 52ch; margin: 20px auto 0; text-wrap: pretty; }
.frontis-rule { height: 1px; margin: 32px 0 26px;
  background: linear-gradient(90deg, transparent, var(--gold-soft) 18%, var(--gold) 50%, var(--gold-soft) 82%, transparent); }
.frontis-verse { font-family: var(--font-read); font-style: italic; font-size: 1.5rem;
  line-height: 1.5; color: var(--ink-accent); max-width: 44ch; margin: 0 auto; }
.frontis-ref { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep); margin-top: 14px; }
@container device (max-width: 760px) {
  .frontis { padding: 9px; } .frontis-inner { padding: 30px 22px 26px; }
  .frontis h1 { font-size: 1.86rem; } .frontis-descriptor { font-size: .66rem; margin-top: 10px; }
  .frontis-lead { display: none; } .frontis-verse { font-size: 1.06rem; }
  .frontis-rule { margin: 18px 0 14px; }
}

/* Marcador — franja, no tarjeta */
.bookmark-strip { display: flex; align-items: center; gap: 16px; margin: 8px 12px 0;
  padding: 13px 20px; background: var(--parchment-2); border: 1px solid var(--border);
  border-left: 4px solid var(--gold); border-radius: 8px; color: var(--ink); text-decoration: none; }
.bookmark-strip .bs-eb { text-transform: uppercase; letter-spacing: .2em; font-size: .62rem;
  font-weight: 700; color: var(--gold-deep); flex: none; }
.bookmark-strip .bs-ref { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; }
.bookmark-strip .bs-sub { font-size: .86rem; color: var(--ink-soft); }
.bookmark-strip .bs-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bookmark-strip .bs-streak { font-size: .78rem; font-weight: 700; color: var(--ink-accent);
  display: inline-flex; align-items: center; gap: 5px; }
.bookmark-strip .bs-streak svg { width: 16px; height: 16px; }
.bookmark-strip .bs-go { font-weight: 700; font-size: .86rem; color: var(--ink-action); }
@container device (max-width: 760px) { .bookmark-strip { flex-wrap: wrap; gap: 6px 10px; }
  .bookmark-strip .bs-sub { display: none; } }

/* Cabecera de sección con filete */
.sec-head-rule { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.sec-head-rule h2 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin: 0; }
.sec-head-rule .shr-line { flex: 1; height: 1px; background: #e0d3b6; }
.sec-head-rule .shr-tag { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--gold-deep); }

/* Volúmenes abiertos */
.volumes { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.volume { display: block; color: var(--ink); text-decoration: none; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; background: #fdfbf6; }
.volume .vol-img { height: 196px; overflow: hidden; border-bottom: 1px solid var(--border); }
.volume .vol-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.volume .vol-txt { padding: 20px 24px 22px; }
.volume h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0; }
.volume .vol-ch { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); }
.volume p { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); margin: 8px 0 14px; }
.volume .vol-cta { font-weight: 700; font-size: .88rem; color: var(--ink-action); }
@container device (max-width: 760px) { .volumes { grid-template-columns: 1fr; gap: 12px; }
  .volume .vol-img { height: 118px; } .volume .vol-txt { padding: 12px 14px 14px; }
  .volume h3 { font-size: 1.1rem; } .volume p { font-size: .98rem; margin: 5px 0 0; }
  .volume .vol-cta { display: none; } }

/* Índice del canon */
.canon-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 54px; }
.canon-col-head { font-family: var(--font-display); font-size: .88rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: 8px; border-bottom: 1px solid var(--gold-soft); margin-bottom: 6px; }
.canon-line { display: flex; align-items: baseline; gap: 9px; padding: 5px 0; color: var(--ink); text-decoration: none; }
.canon-line .cl-n { flex: none; width: 22px; text-align: right; font-size: .76rem;
  color: #b7a98f; font-variant-numeric: tabular-nums; }
.canon-line .cl-name { flex: none; font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink-faint); font-weight: 400; }
.canon-line.is-active .cl-name { color: var(--ink); font-weight: 600; }
.canon-line .cl-dots { flex: 1; border-bottom: 1px dotted #d9cdb2; transform: translateY(-4px); }
.canon-line .cl-ch { flex: none; font-size: .78rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.canon-line .cl-dot { flex: none; width: 16px; text-align: center; color: var(--gold); font-size: .7rem; }

/* ⚠⚠ UN LIBRO CERRADO ES UN <button>, Y UN <button> TRAE EQUIPAJE. Chromium le
   pone `padding: 1px 6px`, su propia tipografía y un `text-align: center` de
   fábrica, así que sin estas cuatro líneas la fila de Levítico no cuadraría con
   la de Génesis: el número se desplazaría, la línea de puntos empezaría antes y
   el conjunto se vería torcido sin que nadie hubiera escrito una sola regla que
   lo torciera. Es la regla del 2026-09-02 aplicada a una fila que no es tarjeta.
   ⚠ Y `width: 100%` porque un botón NO se estira solo dentro de un contenedor
   de bloque, y su `.cl-dots` necesita todo el ancho para llegar al número. */
button.canon-line { width: 100%; padding: 5px 0; font: inherit; text-align: inherit;
  background: none; border: 0; cursor: pointer; }
button.canon-line:hover .cl-name { color: var(--ink); }
button.canon-line:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- #/entrar — canjear el enlace de acceso ---------- */
/* Una sola columna estrecha y centrada: esta pantalla tiene UNA cosa que decir
   y no compite con nada. Se llega a ella desde el correo, o sea de fuera. */
.entrar-caja { max-width: 34rem; margin: 0 auto; padding: 12vh 0 8vh; text-align: center; }
.entrar-t { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.25; margin: 0 0 14px; color: var(--ink); }
.entrar-b { font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft); margin: 0; }
.entrar-nota { font-size: .84rem; line-height: 1.6; color: var(--ink-faint); margin: 18px 0 0; }
.entrar-acts { margin: 28px 0 0; }
/* ⚠ `.entrar-go` es un <a>, así que declara su color: sin regla propia saldría
   con el azul del navegador, que el modo oscuro no puede redefinir. Regla del
   2026-09-02. */
.entrar-go { display: inline-block; background: var(--gold); color: #3a2e12; text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: 13px 28px; border-radius: 999px; }
.entrar-go:visited { color: #3a2e12; }
.entrar-go:hover { background: var(--gold-deep); color: #2a2010; }
.entrar-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── EL CAMPO DEL CÓDIGO (#/codigo) ──────────────────────────
   ⚠ El campo va en MONOESPACIADA y con `letter-spacing`: ocho caracteres
   proporcionales y pegados se revisan mal a ojo, y esta pantalla existe
   precisamente para que alguien compruebe lo que acaba de teclear contra un
   correo. `text-transform: uppercase` es cosmético —`normalizaCodigo` ya
   sube todo en el Worker y en el cliente—, pero enseña al lector que las
   minúsculas no son un problema en vez de dejarle la duda.
   ⚠⚠ El aviso de error NO va solo por color: lleva su texto entero. Un borde
   rojo no le dice a nadie si se equivocó al teclear, si ya lo usó o si caducó,
   y esas tres cosas se arreglan de maneras distintas. */
.codigo-form { margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.codigo-lab { font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.codigo-in { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.35rem; letter-spacing: .16em; text-align: center; text-transform: uppercase;
  width: min(15rem, 100%); padding: 13px 14px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--card); color: var(--ink); }
.codigo-in::placeholder { color: var(--ink-faint); opacity: .55; letter-spacing: .16em; }
.codigo-in:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--gold); }
.codigo-go { background: var(--gold); color: #3a2e12; border: 0; cursor: pointer;
  font-weight: 600; font-size: .95rem; padding: 13px 28px; border-radius: 999px; }
.codigo-go:hover { background: var(--gold-deep); color: #2a2010; }
.codigo-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.codigo-go[disabled] { opacity: .6; cursor: default; }
.codigo-aviso { font-size: .9rem; line-height: 1.6; margin: 16px 0 0; color: var(--ink-soft); }
.codigo-aviso.is-mal { color: var(--ink-bad); }

@media (max-width: 520px) { .entrar-caja { padding: 8vh 0 6vh; } .entrar-t { font-size: 1.6rem; } }
.canon-note { font-size: .84rem; color: var(--ink-faint); margin: 18px 0 0; }
@container device (max-width: 760px) { .canon-index { grid-template-columns: 1fr; gap: 18px; }
  .canon-line .cl-name { font-size: 1rem; } .canon-line .cl-dot { display: none; } }

/* Selector de modo */
.mode-choose { margin-top: 36px; padding: 34px 50px 40px; border-top: 1px solid var(--gold-soft);
  background: linear-gradient(180deg, var(--parchment-2), var(--parchment)); }
.mode-choose > p { font-size: .94rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 24px; max-width: 80ch; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mode-card { display: flex; flex-direction: column; color: var(--ink); text-align: left; cursor: pointer;
  border: 1px solid var(--gold-soft); font: inherit;
  /* ⚠⚠ `padding: 0` NO es cosmética: la tarjeta es un `<button>`, y Chromium le da de fábrica
     `padding: 1px 6px`. Nadie lo había puesto a cero, así que la lámina —que ocupa el ancho del
     contenido— quedaba metida 6px por cada lado y se veía el azul de la tarjeta a izquierda y
     derecha, en TODAS las anchuras. No aparecía en ninguna regla del proyecto porque no la
     escribió el proyecto: la escribe el navegador. El texto no lo nota, `.mc-txt` trae su propio
     relleno (18px 22px 22px). Medido: hueco lateral 7px → 1px (solo el borde). */
  padding: 0;
  border-radius: 12px; overflow: hidden; background: #fdfbf6; box-shadow: 0 3px 12px rgba(43,33,24,.08); }
.mode-card[aria-pressed="true"] { border-color: var(--gold); }
.mode-card .mc-thumb { display: flex; gap: 14px; box-sizing: border-box; height: 78px; padding: 19px 22px;
  background: var(--parchment-2); border-bottom: 1px solid var(--border); }
.mode-card .mc-thumb i { display: block; height: 5px; border-radius: 3px; background: #ddd0b4; flex: 1; }
.mode-card[data-mode="immersive"] .mc-thumb:not(.mc-thumb-art) { flex-direction: column; align-items: center; gap: 6px;
  padding: 19px 34px; background: #211c16; border-bottom-color: #4a3d29; }
.mode-card[data-mode="immersive"] .mc-thumb:not(.mc-thumb-art) i { background: #8d8271; width: 100%; flex: none; }
/* Miniatura CON ARTE: el mismo cuadro que el lector ve en el modal de primera visita
   (js/immersive.js → chooserData). Las tres capas del `background-image` van en línea desde
   el JS —veladura, arte, degradado de respaldo—, así que aquí solo se ajusta el encuadre. */
/* ⚠ PROPORCIÓN NATIVA, no una altura fija (2026-09-02, aviso del dueño). La miniatura de
   RAYAS mide 78px de alto porque las rayas no tienen proporción; con la lámina eso daba una
   franja de 302×78 —3,87:1 sobre un arte de 1,61:1—, o sea la foto recortada por arriba y
   por abajo. El modal del selector se veía bien por casualidad: sus tarjetas son estrechas
   (≈145×86 = 1,69:1) y ahí `cover` apenas corta. Declarando la proporción del propio arte
   (§8 regla 5 del UI_STYLEGUIDE) no se recorta ni un píxel, en ninguna anchura de tarjeta. */
.mode-card .mc-thumb-art { position: relative; height: auto; aspect-ratio: 1600 / 995;
  padding: 0; background-size: cover; background-position: center; }
/* La veladura que asienta la lámina contra la tarjeta. Vivía como primera capa del
   `background-image` en línea (js/app.js) y por eso no se podía apagar por maquetación. */
.mode-card .mc-thumb-art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(20,24,44,0) 55%, rgba(20,24,44,.45)); }
.mode-card .mc-txt { padding: 18px 22px 22px; }
.mode-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 0; display: inline; }
.mode-card .mc-tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin-left: 10px; }
.mode-card p { font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.55; color: var(--ink-soft); margin: 8px 0 0; }
.mode-card .mc-cta { font-weight: 700; font-size: .86rem; color: var(--ink-action); margin-top: 14px; display: block; }
@container device (max-width: 760px) {
  .mode-choose { padding: 20px 18px 24px; }
  /* ⚠ `grid-auto-rows: 1fr` iguala las tres tarjetas al alto de la mayor. En escritorio salían
     iguales solas —van en UNA fila, y una fila de rejilla estira a sus hijos—, pero apiladas
     cada una es su propia fila y cada fila se ajusta a SU texto: 4 líneas, 3 y 3, o sea tres
     alturas distintas y tres bandas de lámina distintas. El desajuste no estaba en la tarjeta:
     estaba en que apilar cambia de UNA fila a TRES. */
  .mode-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 10px; }
  /* La lámina es una BANDA a sangre por el costado izquierdo: ocupa el alto ENTERO de la
     tarjeta y llega hasta su borde (decisión del dueño, 2026-09-02). Por eso la tarjeta
     pierde su relleno —lo recupera el texto— y estira sus hijos en vez de centrarlos; las
     esquinas las redondea el `overflow: hidden` de la propia tarjeta. `cover` recorta lo
     que sobre a los lados en vez de deformar: la lámina llena, no se estira. */
  .mode-card { flex-direction: row; align-items: stretch; gap: 0; padding: 0; min-height: 44px; }
  .mode-card .mc-txt { padding: 13px 15px; }
  /* La variante de RAYAS no es una lámina: sigue centrada y con su marco, como estaba.
     Hoy los tres modos traen arte, pero el camino existe en js/app.js y se queda vivo. */
  .mode-card .mc-thumb:not(.mc-thumb-art) { flex: none; align-self: center; width: 44px; height: auto;
    margin: 13px 0 13px 15px; padding: 6px 5px; border: 1px solid var(--border); border-bottom: 0; border-radius: 6px; }
  /* ⚠⚠ LA MINIATURA DE ARTE NECESITA ALTO PROPIO (arreglado 2026-09-02, aviso del dueño).
     Esta fila móvil se escribió para la miniatura de RAYAS, donde los `<i>` le dan altura al
     span; la de ARTE es un span VACÍO con la lámina en `background-image`, así que con
     `height: auto` se quedaba en los 12px de su relleno: **44×13 px**, una astilla de la
     lámina. Medido en los DOS index —es de antes del riel—. Se le da el ancho y su
     proporción NATIVA (1600/995, §8 regla 5 del UI_STYLEGUIDE), con lo que `cover` no
     recorta ni un píxel y la fila crece a un objetivo táctil decente. */
  /* En la banda lateral manda el ALTO de la tarjeta, así que aquí la proporción se suelta. */
  .mode-card .mc-thumb-art { flex: none; width: 104px; height: auto; aspect-ratio: auto;
    align-self: stretch; padding: 0; border: 0; border-radius: 0; }
  /* Sin veladura en la banda alta: sobre las láminas de cielo claro se leía como un bloque
     gris en el cuarto inferior, no como un asiento. */
  .mode-card .mc-thumb-art::after { display: none; }
  .mode-card .mc-txt { flex: 1; min-width: 0; }
  .mode-card h3 { font-size: 1.04rem; } .mode-card .mc-tag, .mode-card .mc-cta { display: none; }
  .mode-card p { font-family: var(--font-body); font-size: .78rem; margin-top: 2px; }
}

/* Pie de accesos */
.home-foot { padding: 18px 50px; border-top: 1px solid var(--border); background: var(--parchment-2);
  display: flex; align-items: center; gap: 26px; font-size: .88rem; }
/* ⚠ Los enlaces del pie NO heredaban color: el proyecto no define una regla global para <a>,
   así que salían con el morado de «visitado» del navegador — ni se leía sobre el pergamino ni
   pegaba con nada. Dorado, como el resto de los acentos, y con :visited igualado para que no
   vuelva a cambiar de color al volver de la página. */
.home-foot a { font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-deep); text-decoration: none; }
.home-foot a:visited { color: var(--gold-deep); }
.home-foot a:hover { text-decoration: underline; }
body.theme-dark .home-foot a, body.theme-dark .home-foot a:visited { color: var(--gold-foil); }
.home-foot a svg { width: 18px; height: 18px; }
.home-foot .hf-sep { color: var(--gold-soft); }
@container device (max-width: 760px) { .home-foot { gap: 14px; padding: 14px 18px; flex-wrap: wrap; } }

/* ---------- Modo oscuro: remapeo de los literales de papel a tokens ----------
   El mockup se dibujó en claro. Sin esto la portada se queda blanca sobre el azul
   noche del tema oscuro, y el índice del canon pierde los puntos guía. */
body.theme-dark .frontis-outer { border-color: var(--gold-soft); }
body.theme-dark .frontis-inner { background: linear-gradient(180deg, var(--card), var(--parchment-2)); }
body.theme-dark .sec-head-rule .shr-line { background: var(--border); }
body.theme-dark .volume { background: var(--card); }
body.theme-dark .canon-line .cl-n { color: var(--ink-faint); }
body.theme-dark .canon-line .cl-dots { border-bottom-color: var(--border); }
body.theme-dark .mode-card { background: var(--card); box-shadow: none; }
body.theme-dark .mode-card .mc-thumb i { background: var(--border); }

/* ============================================================
   PWA — aviso de actualización e invitación a instalar (2026-08-28)
   §§12-13 del plan de distribución. Dos piezas discretas, ambas
   descartables, ninguna modal: no interrumpen la lectura.
   ⚠ padding-bottom con safe-area: instalada en iPhone, el borde de
   abajo es la barra de gestos y sin esto la barra queda debajo.
   ============================================================ */
/* ⚠ Ancho FIJO y no «lo que ocupe el texto». Con `max-width` el flex encogía la
   frase hasta una columna de una palabra por línea dentro de una píldora — se
   vio en la captura del banco, no en el código. Un ancho declarado y
   `min-width:0` en el texto lo dejan igual en 360 px y en escritorio. */
.pwa-bar {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  width: min(430px, calc(100vw - 24px));
  padding: 12px 12px 12px 18px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); z-index: 210;
  transition: opacity .28s ease, transform .28s ease;
}
.pwa-bar.show { opacity: 1; transform: translate(-50%, 0); }
.pwa-bar-txt { flex: 1; min-width: 0; font-size: .88rem; font-weight: 600; line-height: 1.35; }
.pwa-bar-go {
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--gold-deep); background: var(--gold); color: #fff;
}
.pwa-bar-go:hover { background: var(--gold-deep); }
.pwa-bar-x {
  font: inherit; cursor: pointer; line-height: 1; padding: 6px 8px;
  border: 0; background: none; color: var(--ink-faint); border-radius: 999px;
}
.pwa-bar-x:hover { color: var(--ink); background: var(--parchment-2); }

.pwa-install {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px); opacity: 0;
  display: flex; align-items: flex-start; gap: 14px;
  width: min(460px, calc(100vw - 28px));
  padding: 16px 14px 16px 16px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 205;
  transition: opacity .3s ease, transform .3s ease;
}
.pwa-install.show { opacity: 1; transform: translate(-50%, 0); }
.pwa-install-icon { border-radius: 10px; flex: none; }
.pwa-install-body { flex: 1; min-width: 0; }
.pwa-install-body b { display: block; font-family: var(--font-serif); font-size: 1.08rem; }
.pwa-install-body p { margin: 4px 0 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.pwa-install-ios b { display: inline; font-family: inherit; font-size: inherit; font-weight: 700; white-space: nowrap; }
.pwa-install .ios-share { width: 15px; height: 15px; vertical-align: -3px; margin: 0 1px; }
.pwa-install-go {
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; align-self: center;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--gold-deep); background: var(--gold); color: #fff;
}
.pwa-install-go:hover { background: var(--gold-deep); }
.pwa-install-x {
  font: inherit; cursor: pointer; line-height: 1; padding: 4px 6px; align-self: flex-start;
  border: 0; background: none; color: var(--ink-faint);
}
.pwa-install-x:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .pwa-bar, .pwa-install { transition: none; }
}
body.theme-dark .pwa-bar-go, body.theme-dark .pwa-install-go { color: var(--indigo-deep); }

/* ============================================================
   RIEL LATERAL — el chrome de 2026-09-02
   (mockups/genesis4-riel-indigo.html, decisión del dueño)
   ------------------------------------------------------------
   QUÉ CAMBIA: la barra horizontal de arriba se convierte en un RIEL índigo a
   la izquierda (I Inicio · II Antiguo · III Nuevo · IV Buscar · V Modo de
   lectura, con los ajustes al pie) más un PANEL blanco con los libros del
   testamento elegido. En móvil el riel se tumba: cabecera compacta de 54px y
   barra inferior de cinco pestañas. NO cambia ni un token de color ni una
   fuente — es el mismo sistema «Manuscrito iluminado», recompuesto.

   ⚠ TODO va bajo `body.shell-rail`. El `index.html` viejo NO lleva esa clase,
   así que sigue viéndose exactamente igual mientras se prueba el nuevo. Cuando
   el riel se dé por bueno, la clase pasa al index y este bloque manda.

   ⚠⚠ EL CONTENEDOR SE ANIDA, Y ES LO ÚNICO DELICADO DE AQUÍ. Todo el CSS del
   proyecto corta en `@container device (max-width: 760px)` porque `#device`
   declara `container-type: inline-size`. Si el riel viviera DENTRO de ese
   mismo contenedor, sus 84+210px contarían como ancho de CONTENIDO y cada
   corte responsivo de la app mediría 294px de más — el lector entraría en la
   maqueta de móvil con sitio de sobra. Por eso `.shell-main` declara OTRO
   contenedor con el MISMO nombre: `@container device` resuelve al ancestro
   nombrado MÁS CERCANO, así que
     · lo de dentro de `.shell-main` (todas las vistas) mide el CONTENIDO, y
     · el riel y la barra inferior, que quedan fuera, miden la VENTANA.
   Las dos medidas son las correctas, y ninguna regla vieja se toca.
   ============================================================ */

/* ---------- Armazón ---------- */
body.shell-rail .shell { display: flex; align-items: flex-start; flex: 1; width: 100%; min-width: 0; }
body.shell-rail .shell-main {
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column;
  container-type: inline-size; container-name: device; /* ver la cabecera ⚠⚠ */
}
body.shell-rail main { padding: 26px 30px 90px; }

/* ---------- El riel ---------- */
body.shell-rail .rail {
  position: sticky; top: 0; z-index: 80;
  flex: 0 0 auto; width: 84px; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 16px 0 14px;
  background: var(--indigo-deep);
  border-right: 1px solid #0d1428;
}
body.shell-rail .rail .brand { flex-direction: column; gap: 0; margin-bottom: 8px; }
body.shell-rail .rail .brand-name { display: none; }
body.shell-rail .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; }

body.shell-rail .rail-link {
  width: 70px; min-height: 54px; padding: 7px 3px;
  border: 0; background: transparent; cursor: pointer; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-family: var(--font-body); font-size: .575rem; font-weight: 700; letter-spacing: .015em;
  line-height: 1.2; text-align: center; text-decoration: none;
  color: #9aa3bd; -webkit-tap-highlight-color: transparent;
  transition: background .18s, color .18s;
}
body.shell-rail .rail-link .num {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1;
  color: var(--gold-foil);
}
body.shell-rail .rail-link .ic { display: block; line-height: 0; color: var(--gold-soft); }
body.shell-rail .rail-link .ic svg { width: 14px; height: 14px; display: block; }
/* ⚠ El botón de modo tiene DOS reglas por id más arriba en este mismo archivo
   (`#modeToggle { font-size: 1rem }` y `#modeToggle svg { width: 18px }`), de
   cuando era un botón-icono suelto de la barra. Un id gana a dos clases, así
   que en el riel su etiqueta salía a 16px al lado de las de 9px. Se le gana
   con su propio id en vez de tocar las reglas viejas, que siguen sirviendo al
   `index.html` sin riel. */
body.shell-rail .rail-link#modeToggle { font-size: .575rem; line-height: 1.2; }
body.shell-rail .rail-link#modeToggle .ic svg { width: 14px; height: 14px; }
@media (hover: hover) {
  body.shell-rail .rail-link:hover { background: rgba(227,199,122,.10); color: #dfe4f1; }
}
body.shell-rail .rail-link:active { background: rgba(227,199,122,.18); }
body.shell-rail .rail-link:focus-visible { outline: 2px solid var(--gold-foil); outline-offset: -2px; }
body.shell-rail .rail-link.active { background: var(--indigo); color: var(--gold-foil); }
body.shell-rail .rail-div { width: 32px; height: 1px; background: rgba(154,163,189,.26); flex: 0 0 auto; }

/* ── El lacre del que sostiene ────────────────────────────────
   ⚠ Va ARRIBA del pie y con su propio filete: el pie es la fila de los
   CONTROLES, y una pieza ahí que no controla nada invita a pulsarla. El filete
   es el mismo `rail-div` de la navegación, para no inventar un separador nuevo.
   ⚠ `cursor: default` y sin `:hover`: nada debe sugerir que es pulsable.
   ⚠ El `drop-shadow` es lo único que lo despega del navy; sin él la cera flota.
   Detalle: js/shell.js, bloque «EL LACRE DEL QUE SOSTIENE». */
body.shell-rail .rail-bottom .rail-sello {
  display: block; line-height: 0; cursor: default;
  padding-bottom: 9px; margin-bottom: 1px;
  border-bottom: 1px solid rgba(154,163,189,.26);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
body.shell-rail .rail-bottom .rail-sello svg { display: block; }

/* Pie del riel: ES|EN, tema, guía y —solo en local— vista móvil y edición. */
body.shell-rail .rail-bottom {
  margin-top: auto; padding-top: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
body.shell-rail .rail-bottom .lang-switch,
body.shell-rail .rail-bottom .theme-switch { background: #222c4c; border-color: #3a4570; }
body.shell-rail .rail-bottom .lang-switch .ls-opt { color: #99a3bd; }
body.shell-rail .rail-bottom .lang-switch:not(.en) .ls-opt[data-l="es"],
body.shell-rail .rail-bottom .lang-switch.en .ls-opt[data-l="en"] { color: #fff; }
body.shell-rail .rail-bottom .lang-switch .ls-knob,
body.shell-rail .rail-bottom .theme-switch .ts-knob { background: #46588c; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
body.shell-rail .rail-bottom .theme-switch .ts-sun,
body.shell-rail .rail-bottom .theme-switch .ts-moon { color: var(--gold-foil); }
body.shell-rail .rail-bottom .btn-icon {
  min-width: 34px; height: 34px; padding: 0 8px;
  background: transparent; border-color: #3a4570; color: #9aa3bd;
}
@media (hover: hover) {
  body.shell-rail .rail-bottom .btn-icon:hover { border-color: var(--gold-soft); color: var(--gold-foil); transform: none; }
  body.shell-rail .rail-bottom .lang-switch:hover,
  body.shell-rail .rail-bottom .theme-switch:hover { border-color: var(--gold-soft); }
}
body.shell-rail .rail-bottom .btn-icon.active { background: var(--indigo); border-color: var(--gold); color: var(--gold-foil); }

/* ============================================================
   LOS RESULTADOS DE BÚSQUEDA — 2026-09-03
   (opción B del lienzo «La búsqueda de Dabarion», decisión del dueño)
   ------------------------------------------------------------
   QUÉ ORDENA. Arriba lo RARO Y VALIOSO —lo que la app enseña SOBRE la palabra,
   con su lámina o su mini-mapa—; debajo la concordancia entera con un filtro
   por libro. Nada detrás de un clic: quien busca porque medio se acuerda de un
   versículo lo tiene ahí mismo, y quien buscaba el tema tiene su ficha arriba.

   ⚠ LAS FICHAS SE PARTEN POR RANGO, y ése fue el hallazgo que cambió el diseño:
   de las 16 que devuelve «agua», solo DOS hablan de agua; las otras catorce
   salen porque la palabra aparece en su descripción. Arriba las que casan por
   NOMBRE, como tarjetas; las demás, plegadas en «y la mencionan otras N».
   ============================================================ */

.sr-tot { margin: 14px 0 0; font-size: .82rem; color: var(--ink-faint); }
.sr-tot b { color: var(--ink-action); font-weight: 800; }
.sr-lang { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px;
  border-radius: 999px; border: 1px solid var(--border); font-size: .66rem; font-weight: 800;
  letter-spacing: .06em; color: var(--ink-soft); }

.sr-h { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700;
  margin: 26px 0 12px; color: var(--ink); }
.sr-h-n { font-family: var(--font-body); font-size: .68rem; font-weight: 800; letter-spacing: .1em;
  color: var(--gold-deep); margin-left: 8px; vertical-align: 2px; }

/* ---------- Las fichas que hablan DEL término ---------- */
.sr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.sr-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card);
  transition: transform .16s, border-color .16s, box-shadow .16s; }
@media (hover: hover) {
  .sr-card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--shadow); }
}
.sr-thumb { display: block; height: 96px; background-size: cover; background-position: center;
  background-color: var(--parchment-2); border-bottom: 1px solid var(--border); }
.sr-thumb-map { overflow: hidden; }
.sr-thumb-map svg { display: block; width: 100%; height: 100%; }
.sr-thumb-none { display: flex; align-items: center; justify-content: center; color: var(--gold-soft);
  background: linear-gradient(150deg, rgba(201,162,75,.16), rgba(44,62,107,.24)); }
.sr-thumb-none svg { width: 26px; height: 26px; }
.sr-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sr-kind { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); }
.sr-t { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.sr-d { font-size: .79rem; line-height: 1.5; color: var(--ink-soft); }
.sr-r { font-size: .7rem; color: var(--ink-faint); margin-top: auto; padding-top: 6px; }

/* ---------- Las que solo la mencionan ---------- */
.sr-weak { margin-top: 14px; }
.sr-weak > summary { cursor: pointer; font-size: .8rem; color: var(--ink-soft); list-style: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; }
.sr-weak > summary::-webkit-details-marker { display: none; }
.sr-weak > summary::after { content: "›"; font-size: 1.1rem; line-height: 1; color: var(--gold-deep);
  transform: rotate(90deg); transition: transform .18s; }
.sr-weak[open] > summary::after { transform: rotate(-90deg); }
.sr-weak > summary b { color: var(--ink-action); font-weight: 800; }
.sr-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.sr-pill { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 10px;
  border: 1px dashed var(--border); text-decoration: none; font-size: .78rem; color: var(--ink-soft); }
.sr-pill b { color: var(--ink); font-weight: 700; }
.sr-pill span { font-size: .68rem; color: var(--ink-faint); }
@media (hover: hover) { .sr-pill:hover { border-style: solid; border-color: var(--gold); color: var(--ink); } }

/* ---------- El filtro por libro ---------- */
.sr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: -4px 0 14px; }
.sr-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--parchment-2); cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--ink-soft); }
.sr-chip b { font-size: .7rem; font-weight: 800; color: var(--ink-faint); }
.sr-chip.on { background: var(--indigo); border-color: var(--gold-soft); color: var(--gold-foil); }
.sr-chip.on b { color: var(--gold-foil); }
.sr-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- La concordancia ---------- */
/* ⚠ Rejilla de dos columnas y no una lista con la referencia en línea: con 71 resultados la
   columna de referencias alineada es lo que deja BARRER la lista con el ojo — que es lo que
   hace quien busca porque medio se acuerda de un versículo. */
.sr-verses { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; }
.sr-v { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 11px 14px; background: var(--card); text-decoration: none; color: var(--ink); }
.sr-v:nth-child(even) { background: var(--parchment-2); }
@media (hover: hover) { .sr-v:hover { background: color-mix(in srgb, var(--gold-foil) 12%, var(--card)); } }
.sr-vref { font-family: var(--font-body); font-size: .75rem; font-weight: 800; letter-spacing: .01em;
  color: var(--gold-deep); }
.sr-vlang { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px;
  border: 1px solid var(--border); font-size: .58rem; font-weight: 800; color: var(--ink-faint); }
.sr-vtx { font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.5; }
.sr-more { margin-top: 10px; font-size: .78rem; color: var(--ink-faint); }

@container device (max-width: 640px) {
  .sr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sr-thumb { height: 76px; }
  .sr-body { padding: 9px 10px 11px; }
  .sr-t { font-size: .9rem; }
  .sr-d { display: none; }             /* en el teléfono manda el nombre y la lámina */
  /* «LUGARES · EN EL MAPA» se parte en dos líneas a 360px y se come la tarjeta. El «en el
     mapa» es un matiz: el icono del pin ya está en la lámina. Fuera en el teléfono. */
  .sr-onmap { display: none; }
  /* La referencia sobre el texto: a 360px una columna de 132px se come el versículo. */
  .sr-v { grid-template-columns: 1fr; gap: 3px; padding: 10px 12px; }
  .sr-vtx { font-size: .98rem; }
}

/* ============================================================
   LOS TRES MODOS, A UN TOQUE — 2026-09-03
   (opción C en el riel · opción 3 en el teléfono; maqueta:
    el lienzo «Selector de modo · Dabarion», decisión del dueño)
   ------------------------------------------------------------
   QUÉ CAMBIA. Hasta hoy cambiar de modo de lectura costaba DOS gestos en todas
   partes: abrir el selector grande y elegir. El selector no se va —es donde
   alguien entiende qué es cada modo la primera vez—, pero al lado nace el atajo
   para quien ya lo sabe: en escritorio, los tres modos colgando del rótulo del
   riel; en el teléfono, una pastilla de oro en el centro de la barra.

   ⚠⚠ EL ACTIVO SE PINTA CON EL `<body>`, NO CON JS, y es la decisión que sostiene
   todo este bloque. `Immersive.applyMode()` ya escribe `mode-plain` /
   `mode-immersive` / `mode-study` en el `<body>` desde 2026-07-10, y lo escribe
   en el ÚNICO sitio que cambia el modo. Marcar el activo desde `js/shell.js`
   habría creado un segundo registro de la misma verdad —el que se desincroniza
   el día que alguien cambie el modo por un camino que shell.js no observa—.
   Aquí no hay estado: hay tres reglas que leen el que ya existe.

   ⚠ POR QUÉ NO LLEVAN NUMERAL. Los romanos del riel son el ÍNDICE de los SITIOS
   a los que se va (regla del dueño, 2026-09-02). Un modo de lectura no es un
   sitio: es un ajuste. Por eso cuelgan del rótulo con un filete en vez de ser
   tres entradas más, y por eso `paintRail` —que numera las entradas con hueco
   `.num`— no los cuenta: no lo tienen.
   ============================================================ */

/* ---------- El rótulo, que ahora es la cabecera de su lista ---------- */
/* ⚠ Sigue siendo `#modeToggle`, el MISMO botón de siempre: `js/immersive.js` lo
   busca por ese id, le escribe el título y el `aria-label` con el modo en curso,
   y al pulsarlo sigue abriendo el selector grande. Solo cambia de aspecto.
   Su hueco `.ic` se esconde: en esta forma el icono del modo activo lo pone la
   lista de abajo, y dejar el icono arriba lo diría dos veces. El hueco NO se
   borra del HTML —`updateModeBtn` escribe en él— y esconderlo no cuesta nada. */
body.shell-rail .rail-link#modeToggle {
  min-height: 0; width: 76px; padding: 4px 5px 3px; gap: 2px;
  font-size: .5rem; letter-spacing: .11em; text-transform: uppercase; color: #7b849d;
}
body.shell-rail .rail-link#modeToggle .ic { display: none; }
body.shell-rail .rail-link#modeToggle::after {
  content: ""; display: block; width: 100%; height: 1px; margin-top: 3px;
  background: rgba(154,163,189,.34);
}
body.shell-rail .rail-link#modeToggle.active { background: transparent; color: #7b849d; }

/* ---------- La lista sangrada ---------- */
body.shell-rail .rail-modes {
  position: relative; width: 72px; padding-left: 8px;
  display: flex; flex-direction: column; gap: 1px; margin-bottom: 2px;
}
body.shell-rail .rail-modes::before {
  content: ""; position: absolute; left: 1px; top: 5px; bottom: 5px;
  width: 1px; background: rgba(154,163,189,.34);
}
body.shell-rail .rail-modes button {
  position: relative; display: flex; align-items: center; gap: 4px;
  padding: 5px 3px; border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: .5125rem; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.2; text-align: left; color: #8b93ad;
  -webkit-tap-highlight-color: transparent; transition: background .16s, color .16s;
}
body.shell-rail .rail-modes button .mi { display: block; line-height: 0; opacity: .75; flex: 0 0 auto; }
body.shell-rail .rail-modes button .mi svg { width: 11px; height: 11px; display: block; }
@media (hover: hover) {
  body.shell-rail .rail-modes button:hover { background: rgba(227,199,122,.10); color: #dfe4f1; }
  body.shell-rail .rail-modes button:hover .mi { opacity: 1; }
}
body.shell-rail .rail-modes button:active { background: rgba(227,199,122,.18); }
body.shell-rail .rail-modes button:focus-visible { outline: 2px solid var(--gold-foil); outline-offset: -2px; }

/* El activo, leído del `<body>`. Tres reglas, ningún estado nuevo. */
body.shell-rail.mode-plain     .rail-modes button[data-mode="plain"],
body.shell-rail.mode-immersive .rail-modes button[data-mode="immersive"],
body.shell-rail.mode-study     .rail-modes button[data-mode="study"] { color: var(--gold-foil); }
body.shell-rail.mode-plain     .rail-modes button[data-mode="plain"] .mi,
body.shell-rail.mode-immersive .rail-modes button[data-mode="immersive"] .mi,
body.shell-rail.mode-study     .rail-modes button[data-mode="study"] .mi { opacity: 1; }
body.shell-rail.mode-plain     .rail-modes button[data-mode="plain"]::before,
body.shell-rail.mode-immersive .rail-modes button[data-mode="immersive"]::before,
body.shell-rail.mode-study     .rail-modes button[data-mode="study"]::before {
  content: ""; position: absolute; left: -7px; top: 50%; margin-top: -7.5px;
  width: 3px; height: 15px; border-radius: 2px; background: var(--gold-foil);
}

/* ---------- Cajón de libros ----------
   ⚠⚠ ERA UN PANEL FIJO DE 210px HASTA EL 2026-09-02 (decisión del dueño). Se pliega por
   TRES razones, y la primera es la que manda: los enlaces «Antiguo» y «Nuevo» del riel
   no tenían nada que hacer con el panel ya abierto — pulsarlos no producía ningún efecto
   visible, que es como se lee «roto». Ahora ELLOS lo despliegan, así que hacen algo
   siempre. Segunda: el lector recupera 210px de ancho de lectura en cada pantalla.
   Tercera: es UN solo elemento y UNA sola lista para escritorio y móvil — antes había un
   panel y una hoja con el mismo contenido, o sea dos sitios donde arreglar lo mismo.
   ⚠ Cerrado se esconde DETRÁS DEL RIEL (`translateX(-100%)` con el borde derecho a 84px,
   y el riel por encima con más z-index), no fuera de la pantalla: así el desplazamiento
   es corto, no hay barra horizontal que aparezca a mitad de animación, y el cajón parece
   salir de debajo del riel, que es de donde lo llama el lector. */
body.shell-rail .books-drawer {
  position: fixed; top: 0; left: 84px; z-index: 70;
  width: 260px; max-width: calc(100vw - 84px); height: 100vh; height: 100dvh;
  overflow-y: auto; scrollbar-width: thin;
  background: var(--card); border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 18px 10px 24px;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
}
body.shell-rail .books-drawer.open { transform: none; }
@media (prefers-reduced-motion: reduce) { body.shell-rail .books-drawer { transition: none; } }

/* El velo va POR DEBAJO del riel a propósito: con el cajón abierto se puede pulsar el otro
   testamento y la lista cambia sin cerrar y volver a abrir. */
body.shell-rail .bp-scrim {
  position: fixed; inset: 0; z-index: 65; background: rgba(20,17,12,.34);
  opacity: 0; pointer-events: none; transition: opacity .26s ease;
}
body.shell-rail .bp-scrim.open { opacity: 1; pointer-events: auto; }

/* La ✕ y el segmentado comparten fila. Antes la ✕ iba `absolute` arriba a la derecha y
   caía JUSTO encima de «Nuevo», que es el botón que más se pulsa del cajón. */
body.shell-rail .bp-top { display: flex; align-items: center; gap: 8px; margin: 0 4px 12px; }
body.shell-rail .bp-top .bp-seg { flex: 1; margin: 0; }
body.shell-rail .bp-close {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%; padding: 0;
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
@media (hover: hover) { body.shell-rail .bp-close:hover { border-color: var(--gold); color: var(--ink); } }
body.shell-rail .bp-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
body.shell-rail .bp-head {
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep); padding: 4px 10px 2px;
}
body.shell-rail .bp-count {
  font-size: .62rem; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-faint); padding: 0 10px 10px;
}
body.shell-rail .bp-seg { display: flex; gap: 3px; background: var(--parchment-2); border-radius: 10px; padding: 3px; }
body.shell-rail .bp-seg button {
  flex: 1; border: 0; cursor: pointer; border-radius: 8px; padding: 7px 0;
  font: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: transparent; color: var(--ink-faint); -webkit-tap-highlight-color: transparent;
}
body.shell-rail .bp-seg button.on { background: var(--card); color: var(--ink-action); box-shadow: 0 1px 3px rgba(43,33,24,.14); }
body.shell-rail .bp-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
body.shell-rail .bp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 9px; margin-bottom: 1px;
  font-size: .84rem; font-weight: 600; color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
body.shell-rail a.bp-item { background: var(--parchment-2); }
@media (hover: hover) { body.shell-rail a.bp-item:hover { background: var(--parchment-2); color: var(--gold-deep); } }
body.shell-rail a.bp-item:active { background: color-mix(in srgb, var(--gold-foil) 26%, var(--parchment-2)); }
body.shell-rail a.bp-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
body.shell-rail a.bp-item.on { background: var(--indigo); color: #fff; }
body.shell-rail a.bp-item.on .bp-star { color: var(--gold-foil); }
/* ⚠⚠ EL LIBRO CERRADO PASÓ DE <div> A <button> (2026-09-04), Y CHROMIUM LE PONE
   `padding: 1px 6px`, su propia tipografía, un borde y `width: auto` de fábrica.
   Sin estas líneas la fila se encogería a lo que mide el nombre y perdería su
   sangría respecto a las abiertas: nadie habría escrito una regla que lo
   torciera y aun así se vería torcido. Regla del 2026-09-02, otra vez.
   ⚠ Sigue `muted` —apagado, sin punto de oro— a propósito: que se pueda pulsar
   no significa que esté disponible. Lo que cambia es que ahora contesta. */
body.shell-rail .bp-item.muted { font-weight: 500; color: var(--ink-faint); background: none; }
body.shell-rail button.bp-item { width: 100%; font: inherit; font-weight: 500;
  border: 0; text-align: left; cursor: pointer; }
@media (hover: hover) { body.shell-rail button.bp-item:hover { color: var(--ink-soft); background: var(--parchment-2); } }
body.shell-rail button.bp-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
body.shell-rail .bp-star { color: var(--gold-deep); font-size: .95rem; line-height: 1; }
body.shell-rail .bp-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--parchment-2); padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
body.shell-rail .bp-tag.rev { color: var(--ink-bad); background: color-mix(in srgb, var(--red) 12%, transparent); }
body.shell-rail .bp-note { padding: 12px 12px 0; font-size: .68rem; line-height: 1.5; color: var(--ink-faint); }

/* ---------- Buscador desplegable (IV Buscar) ---------- */
body.shell-rail .rail-search {
  position: fixed; top: 16px; left: 92px; z-index: 90;
  width: 320px; max-width: calc(100vw - 108px);
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 13px;
}
body.shell-rail .rail-search[hidden] { display: none !important; }
body.shell-rail .rail-search .rs-title {
  font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--ink);
  margin: 0 0 9px 2px;
}
body.shell-rail .rail-search .topsearch { display: flex; width: 100%; flex: 1 1 auto; }

/* ---------- Barra inferior (solo móvil) ---------- */
body.shell-rail .tabbar { display: none; }

/* ============================================================
   RIEL → CABECERA + BARRA INFERIOR (móvil real y vista 📱)
   ⚠ @container device, NUNCA @media: el riel y la barra viven FUERA de
   `.shell-main`, así que su contenedor más cercano es `#device` — o sea,
   la ventana en escritorio y el marco del teléfono en la vista 📱.
   ============================================================ */

@container device (max-width: 760px) {
  body.shell-rail .shell { display: block; }
  body.shell-rail .shell-main { display: block; }
  /* ⚠ 118px y no 96: la pastilla de modo se eleva ~30px sobre la barra (66px), así que
     el final de un capítulo se quedaba debajo del botón. Es la misma cuenta que el pie
     legal —la altura del mobiliario fijo, no un número redondo—. */
  body.shell-rail main { padding: 22px 16px 118px; }

  body.shell-rail .rail {
    position: sticky; top: 0; width: auto; height: 54px;
    flex-direction: row; align-items: center; gap: 9px; padding: 0 14px;
    background: var(--card); border-right: 0; border-bottom: 1px solid var(--border);
  }
  body.shell-rail .rail .brand { flex-direction: row; gap: 9px; margin-bottom: 0; }
  body.shell-rail .rail .brand-logo { width: 27px; height: 27px; border-radius: 8px; }
  body.shell-rail .rail .brand-name { display: block; font-size: .98rem; color: var(--ink); }
  body.shell-rail .rail-nav,
  body.shell-rail .rail-div,
  body.shell-rail #railSearch { display: none; }

  /* El botón de modo salta al extremo derecho y se queda solo con su icono. */
  body.shell-rail .rail-link#modeToggle {
    margin-left: auto; width: 31px; min-height: 31px; height: 31px; padding: 0;
    border: 1px solid var(--border); border-radius: 50%; color: var(--ink-soft);
  }
  body.shell-rail .rail-link#modeToggle .num,
  body.shell-rail .rail-link#modeToggle .lb { display: none; }
  body.shell-rail .rail-link#modeToggle .ic { color: var(--ink-soft); }
  body.shell-rail .rail-link#modeToggle .ic svg { width: 16px; height: 16px; }

  /* ⚠⚠ `margin-left: auto` (2026-09-03, aviso del dueño: «se ve mal distribuida»).
     Hasta hoy el que empujaba los ajustes al extremo derecho era el botón redondo de
     MODO, con su propio `margin-left: auto`. Al salir de la cabecera —la pastilla de la
     barra hace ya su trabajo— se llevó el empujón con él y todo quedó amontonado a la
     izquierda con **138px de vacío a la derecha** (medido a 412px). El empujón no era
     suyo: era de la fila. → la misma lección que `rule-2026-09-02-una-regla-de-una-
     variante-no-sirve-a-la-siguiente`: al quitar una pieza se releen las reglas que se
     apoyaban en ella, aunque no las toque el diff. */
  body.shell-rail .rail-bottom { flex-direction: row; margin-left: auto; margin-top: 0; padding-top: 0; gap: 7px; }

  /* ⚠⚠ EL LACRE EN LA CABECERA DE MÓVIL (2026-09-08). Aquí el pie deja de ser una
     COLUMNA y pasa a ser una FILA, así que el separador del lacre —un
     `border-bottom` con su relleno— se convertía en una raya suelta colgando
     debajo del sello, y los 9px de relleno lo subían: 37px de alto en una barra
     de 54. Es la misma lección de siempre: al cambiar el eje de un contenedor se
     releen las reglas que se apoyaban en el eje anterior.
     El filete pasa a la DERECHA, que es donde ahora está la frontera con los
     controles, y la sombra baja de intensidad: la de escritorio está calculada
     contra el navy del riel y sobre `--card` (blanco en claro) sonaba a golpe. */
  body.shell-rail .rail-bottom .rail-sello {
    padding: 0 8px 0 0; margin: 0 1px 0 0;
    border-bottom: 0; border-right: 1px solid var(--border);
    filter: drop-shadow(0 1px 2px rgba(43, 33, 24, .28));
  }
  body.shell-rail .rail-bottom .lang-switch,
  body.shell-rail .rail-bottom .theme-switch { background: var(--parchment-2); border-color: var(--border); }
  body.shell-rail .rail-bottom .lang-switch .ls-opt { color: var(--ink-faint); }
  body.shell-rail .rail-bottom .lang-switch:not(.en) .ls-opt[data-l="es"],
  body.shell-rail .rail-bottom .lang-switch.en .ls-opt[data-l="en"] { color: var(--ink); }
  body.shell-rail .rail-bottom .lang-switch .ls-knob,
  body.shell-rail .rail-bottom .theme-switch .ts-knob { background: var(--card); box-shadow: 0 1px 3px rgba(27,36,64,.35); }
  /* ⚠⚠ EN OSCURO LA CORREDERA ERA INVISIBLE (2026-09-03, aviso del dueño: «el azul que
     envuelve la opción elegida casi no se nota»). `--card` sobre `--parchment-2` da
     #222d4d sobre #1e2742 = **1,09:1**: no es poco contraste, es NINGUNO — el mismo
     azul dos veces. Y no se cazaba con `check_contrast`, que mide TINTA sobre fondo, no
     una pieza de interfaz sobre otra.
     Elegido midiendo, no al ojo: #5570b5 da **3,07:1** contra la pista (AA de elementos
     no textuales pide 3) y el blanco encima da **4,80:1** (AA de texto pide 4,5). Un azul
     más claro rompía lo segundo y uno más oscuro lo primero — ésos son los dos topes.
     El rótulo elegido pasa a BLANCO: `--ink` (#ece4d4) sobre este azul se queda en 3,80. */
  body.theme-dark.shell-rail .rail-bottom .lang-switch .ls-knob,
  body.theme-dark.shell-rail .rail-bottom .theme-switch .ts-knob {
    background: #5570b5; box-shadow: 0 1px 4px rgba(0,0,0,.45);
  }
  body.theme-dark.shell-rail .rail-bottom .lang-switch:not(.en) .ls-opt[data-l="es"],
  body.theme-dark.shell-rail .rail-bottom .lang-switch.en .ls-opt[data-l="en"] { color: #fff; }
  body.shell-rail .rail-bottom .theme-switch .ts-sun { color: var(--gold-deep); }
  body.shell-rail .rail-bottom .btn-icon {
    min-width: 31px; width: 31px; height: 31px; padding: 0; border-radius: 50%;
    border-color: var(--border); color: var(--ink-soft);
  }
  /* La vista 📱 y el Modo Edición no tienen sentido en un teléfono de verdad;
     en la vista 📱 el botón SÍ se queda, porque es la única puerta de salida. */
  body.shell-rail #phoneToggle { display: none; }
  body.phone-preview.shell-rail #phoneToggle { display: inline-flex; }

  body.shell-rail .rail-search {
    position: sticky; top: 54px; left: 0; width: auto; max-width: none;
    border-radius: 0; border-left: 0; border-right: 0; border-top: 0; box-shadow: var(--shadow);
  }

  /* La barra de cinco pestañas */
  body.shell-rail .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: var(--card); border-top: 1px solid var(--border);
    padding: 7px 2px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.shell-rail .tabbar button {
    flex: 1; min-height: 46px; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: inherit; font-size: .6rem; font-weight: 600; color: var(--ink-faint);
    -webkit-tap-highlight-color: transparent;
  }
  body.shell-rail .tabbar .ic { line-height: 0; }
  body.shell-rail .tabbar .ic svg { width: 19px; height: 19px; display: block; }
  body.shell-rail .tabbar .bar { width: 20px; height: 2px; border-radius: 2px; background: transparent; }
  body.shell-rail .tabbar button.on { color: var(--gold-deep); }
  body.shell-rail .tabbar button.on .bar { background: var(--gold); }
  body.shell-rail .tabbar button:active { background: color-mix(in srgb, var(--gold-foil) 20%, transparent); border-radius: 12px; }
  body.shell-rail .tabbar button:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: 12px; }


  /* ══ LA PASTILLA DE MODO (2026-09-03, opción 3 del dueño) ══════════════════
     El centro de la barra NO es una pestaña más: es un botón de oro elevado. La
     forma dice lo que las palabras no caben en decir — que el modo de lectura no
     es un destino como Inicio o Mapa, sino de otra especie. Al tocarlo suben tres
     medallas en orden de lectura.
     ⚠ El rótulo redondo de modo SALE de la cabecera del teléfono: con la pastilla
     haría lo mismo desde dos sitios, y dos puertas a la misma habitación se leen
     como dos habitaciones. El selector grande sigue llegando por su cuenta la
     primera vez, y las tarjetas de modo del Inicio cuentan lo mismo con su arte. */
  body.shell-rail .rail-link#modeToggle,
  body.shell-rail .rail-modes { display: none; }

  body.shell-rail .tabbar button.tab-modo { position: relative; overflow: visible; }
  /* ⚠⚠ 30px Y NO 20 (2026-09-03, aviso del dueño: «las letras quedan cubiertas, solo
     se ve la mitad»). Con 20px el borde de abajo del círculo caía EXACTAMENTE sobre el
     borde de arriba de la palabra —medido: 1px de solape—, o sea CERO holgura: en el
     teléfono del dueño, con su escala de fuente, eso se convierte en media palabra
     tapada. Un diseño que solo funciona si el navegador redondea a mi favor no funciona.
     A 30px quedan 11px de aire y la etiqueta sigue alineada con «Inicio» y «Mapa».
     Lo mide `tools/bench/modos.mjs`, que ahora exige 6px de holgura como mínimo. */
  body.shell-rail .tabbar button.tab-modo .ic {
    position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
    width: 50px; height: 50px; border-radius: 50%; color: var(--indigo-deep);
    background: radial-gradient(circle at 34% 28%, #f0d894, #c9a24b 74%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(20,16,10,.34), inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 5px var(--card);
    transition: transform .18s;
  }
  body.shell-rail .tabbar button.tab-modo .ic svg { width: 22px; height: 22px; }
  body.shell-rail .tabbar button.tab-modo { color: var(--gold-deep); padding-top: 22px; }
  body.shell-rail .tabbar button.tab-modo .bar { background: transparent !important; }
  body.shell-rail .tabbar button.tab-modo:active { background: none; }
  body.shell-rail .tabbar button.tab-modo:active .ic { transform: translateX(-50%) scale(.94); }

  /* El velo y el arco. ⚠ EL VELO VA POR ENCIMA DE LA CABECERA, y esto se midió: con
     z-index 78 el velo tapaba la lectura pero la cabecera del teléfono —que es
     `position: sticky` con z-index 80— se quedaba a plena luz, así que media pantalla
     salía atenuada y la otra media no. Las capas del cromo, de abajo arriba:
     barra de pestañas 65 · cajón de libros 70 · cabecera 80 · VELO 82 · ARCO 84 ·
     hoja de libros del móvil 120 · búsqueda 90.
     ⚠ Y LA BARRA SUBE POR ENCIMA DEL VELO MIENTRAS EL ARCO ESTÁ ABIERTO (86). Sin eso,
     la pastilla que el lector acaba de pulsar se quedaba atenuada bajo su propio velo —
     el control que abrió la cosa, apagado—. Sube la barra ENTERA y no solo la pastilla
     porque `.tabbar` es `position: fixed` con z-index propio: un hijo no puede salirse
     del contexto de apilamiento de su padre, y elevar solo la pastilla no habría hecho
     nada. Que el resto de la barra quede a plena luz es correcto: es de donde salió el
     gesto y es lo que el pulgar tiene debajo. */
  body.shell-rail.modes-open .tabbar { z-index: 86; }
  body.shell-rail .mode-scrim {
    position: fixed; inset: 0; z-index: 82; background: rgba(20,16,10,.42);
    opacity: 0; transition: opacity .2s;
  }
  body.shell-rail .mode-scrim.open { opacity: 1; }
  body.shell-rail .mode-arc {
    position: fixed; left: 50%; z-index: 84; transform: translateX(-50%);
    bottom: calc(52px + var(--shell-bottom) + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 12px; align-items: center;
    opacity: 0; transition: opacity .18s, transform .24s cubic-bezier(.3,1.15,.5,1);
  }
  body.shell-rail .mode-arc.open { opacity: 1; }
  body.shell-rail .mode-arc button {
    width: 58px; height: 58px; border-radius: 50%; padding: 0 3px; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); color: var(--ink-soft);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-family: var(--font-body); font-size: .5375rem; font-weight: 700; line-height: 1.1;
    box-shadow: 0 4px 14px rgba(20,16,10,.20);
    -webkit-tap-highlight-color: transparent;
  }
  body.shell-rail .mode-arc button .mi { line-height: 0; }
  body.shell-rail .mode-arc button .mi svg { width: 17px; height: 17px; display: block; }
  body.shell-rail .mode-arc button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  body.shell-rail.mode-plain     .mode-arc button[data-mode="plain"],
  body.shell-rail.mode-immersive .mode-arc button[data-mode="immersive"],
  body.shell-rail.mode-study     .mode-arc button[data-mode="study"] {
    border-color: var(--gold); color: var(--gold-deep); background: var(--parchment-2);
  }

  /* EL MISMO CAJÓN, subiendo desde abajo. No es otra pieza ni otra lista: es este
     elemento con otra geometría, porque en un teléfono una hoja inferior cae bajo el
     pulgar y un cajón lateral no. Sube por encima de la barra de pestañas (z-index),
     que es lo que el lector acaba de pulsar. */
  body.shell-rail .books-drawer {
    top: auto; left: 0; right: 0; bottom: 0; z-index: 120;
    width: auto; max-width: none; height: auto; max-height: 76vh;
    border-right: 0; border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 8px 12px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  body.shell-rail .books-drawer.open { transform: none; }
  body.shell-rail .bp-scrim { z-index: 110; }
}

/* La barra inferior en la vista 📱 va DENTRO del marco del teléfono, no pegada
   a la ventana (mismo truco que .map-fab: fixed, pero recolocada). */
body.phone-preview.shell-rail .tabbar {
  left: calc(50% - 185px); right: calc(50% - 185px); bottom: 37px;
  border-radius: 0 0 20px 20px; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  padding-bottom: 10px;
}
/* El cajón y su velo, en la vista 📱, dentro del marco del teléfono.
   ⚠ Y CERRADO HAY QUE EMPUJARLO 37px MÁS. `translateY(100%)` mueve el cajón SU PROPIA
   ALTURA, que en un teléfono de verdad basta porque su borde inferior está en 0. Aquí no:
   está a 37px del borde de la ventana —el marco del móvil—, así que tras el desplazamiento
   su borde superior queda justo ahí y esos 37px ASOMAN por debajo del teléfono. Se veía la
   fila «Antiguo | Nuevo | ✕» flotando fuera del marco, y solo en la vista 📱. */
body.phone-preview.shell-rail .books-drawer {
  left: calc(50% - 185px); right: calc(50% - 185px); bottom: 37px; max-height: 62vh;
  transform: translateY(calc(100% + 37px));
}
body.phone-preview.shell-rail .books-drawer.open { transform: none; }
body.phone-preview.shell-rail .bp-scrim { inset: 26px calc(50% - 196px); border-radius: 34px; }

/* ---------- El lector con riel ----------
   La regla vieja de «cromo esbelto» esconde #topnav en los modos Plana e
   Inmersiva: con la barra horizontal eso quitaba una fila, pero en el RIEL DE PIE
   deja un hueco en mitad de la columna y el lector pierde la única salida hacia
   Inicio / los testamentos. Con riel, el cromo esbelto ya lo da el propio riel —
   el ancho de lectura no cambia por esconder tres botones.

   ⚠⚠ Y VA ACOTADA AL RIEL DE PIE, que es lo que faltaba. Esta regla lleva
   `!important` para ganarle a la vieja, y `!important` no entiende de
   contenedores: en el móvil ganaba TAMBIÉN, y como allí el riel está TUMBADO en
   una cabecera de 54px, las entradas «II Antiguo Testamento» y «III Nuevo
   Testamento» —apiladas, con su numeral— reaparecían encima de la cabecera y se
   salían de ella. Solo pasaba en Plana e Inmersiva y solo en el lector, que es
   justo donde nadie mira dos veces. En móvil la nav SÍ tiene que esconderse: sus
   dos destinos viven en la barra inferior (Inicio y Libros), así que ahí la regla
   vieja acierta y esta no tiene nada que arreglar. */
@container device (min-width: 761px) {
  body.shell-rail.view-read.mode-plain #topnav,
  body.shell-rail.view-read.mode-immersive #topnav { display: flex !important; }
}

/* La banda del Modo Edición se pegaba bajo la barra horizontal (top: 65px). Con
   el riel no hay nada encima del contenido en escritorio, y en móvil está la
   cabecera de 54px. (Va dentro de `.shell-main`, así que el corte lo mide el
   contenedor de CONTENIDO — que es lo que aquí queremos.) */
body.shell-rail .edit-banner { top: 0; }
@container device (max-width: 760px) { body.shell-rail .edit-banner { top: 54px; } }

/* La barra del lector se pega IGUAL que la banda de edición, y por lo mismo: con
   el riel no hay nada encima del contenido en escritorio, y en móvil está la
   cabecera de 54px. Antes decía `top: 67px` (la barra horizontal que ya no
   existe) y en móvil `position: static`, porque la parte que tenía que quedarse
   a la vista —☰ y la píldora— viajaba en OTRA barra. Desde que son una sola, la
   que se queda es ésta. Los 10px son aire: el texto pasa por debajo de la
   tarjeta, no pegado al borde de la ventana. */
body.shell-rail .reader-bar { top: 10px; }
/* ⚠ En estrecho NO se toca: la `.reader-bar` sigue `position: static` (regla de
   más arriba) y quien se queda pegado es la barra esbelta del teléfono. */

/* Y con la barra pegada arriba, «Cambiar versión» (`.top-fab`) SE QUEDA SIN
   TRABAJO: ese botón existía solo porque al bajar se perdía de vista el
   selector de versión y había que volver arriba a buscarlo. Ahora no se pierde.
   En el TELÉFONO sí se pierde —allí la barra de los selectores viaja en el
   flujo, a propósito—, así que allí el botón sigue vivo. */
body.shell-rail.view-read .top-fab { display: none; }
@container device (max-width: 760px) { body.shell-rail.view-read .top-fab { display: inline-flex; } }

/* ============================================================
   EL MOBILIARIO FIJO ESQUIVA EL RIEL Y LA BARRA (2026-09-02)
   ------------------------------------------------------------
   La app tiene siete piezas `position: fixed` que se anclan a una esquina: los
   tres botones flotantes del lector y del mapa, las dos barras de la PWA y el
   aviso. Todas se colocaban contra la VENTANA, que es lo mismo que el área de
   lectura mientras el cromo fue una barra de arriba. Con el riel ya no lo es:
   «Cambiar versión» aparecía a 22px del borde izquierdo, o sea ENCIMA del riel
   y del panel de libros, y en móvil los tres quedaban debajo de la barra de
   pestañas — tapados, y sin nada que lo dijera.

   ⚠ POR QUÉ AQUÍ VAN CLASES DEL BODY Y NO `@container`. Las barras de la PWA y
   el aviso los cuelga `document.body`, FUERA de `#device`: no hay contenedor
   que consultar, y un `@media` mediría la ventana del escritorio y mentiría
   justo en la vista 📱. Así que la medida la toma js/shell.js del ancho REAL de
   `#device` —el mismo número que usa `@container`— y la publica como
   `shell-compact` / `shell-mobile` en el `<body>`, donde todo el mundo la ve.
   Aquí solo se declaran los DESPLAZAMIENTOS; la maquetación sigue en
   `@container`, sin duplicar. ============================================================ */
/* Solo el riel: el cajón flota por encima y no le quita sitio a nadie. */
body.shell-rail { --shell-left: 84px; --shell-bottom: 0px; }
body.shell-rail.shell-mobile { --shell-left: 0px; --shell-bottom: 66px; }

body.shell-rail .top-fab,
body.shell-rail .map-up-fab { left: calc(22px + var(--shell-left)); bottom: calc(22px + var(--shell-bottom)); }
/* ⚠⚠ EL PIE TAMBIÉN, y se me había escapado. `main` reserva sitio para la barra inferior con
   su `padding-bottom`, pero el PIE es HERMANO de `main`, no hijo: queda debajo, fuera de esa
   reserva, y la barra le tapaba los últimos 64px — justo donde acaba el aviso legal. La
   reserva se toma de la MISMA variable que todo lo demás (0 en escritorio, 66 en móvil), así
   que no hay un segundo número que mantener. */
body.shell-rail .footer { padding-bottom: calc(26px + var(--shell-bottom) + env(safe-area-inset-bottom, 0px)); }
body.shell-rail .map-fab { bottom: calc(22px + var(--shell-bottom)); }
body.shell-rail.shell-mobile .toast { bottom: calc(26px + var(--shell-bottom)); }
body.shell-rail.shell-mobile .pwa-bar,
body.shell-rail.shell-mobile .pwa-install { bottom: calc(20px + var(--shell-bottom) + env(safe-area-inset-bottom, 0px)); }

/* En la vista 📱 los tres flotantes ya venían recolocados a mano contra el
   marco del teléfono; solo hay que subirlos por encima de la barra de pestañas,
   que ahí va a 37px del borde de la ventana. */
body.phone-preview.shell-rail .map-fab,
body.phone-preview.shell-rail .top-fab,
body.phone-preview.shell-rail .map-up-fab { bottom: 108px; }
body.phone-preview.shell-rail .top-fab,
body.phone-preview.shell-rail .map-up-fab { left: calc(50% - 178px); }

/* ============================================================
   RIEL · AJUSTES DE LA PRIMERA REVISIÓN DEL DUEÑO (2026-09-02)
   ============================================================ */

/* 1 · LOS DOS INTERRUPTORES, DEL MISMO LARGO.
   Venían de la barra horizontal, donde nunca se vieron uno encima del otro: ES|EN mide 58px
   (dos etiquetas) y el de claro/oscuro 48px (un pomo). Apilados en el pie del riel, esos 10px
   de diferencia son lo único que se ve. Se igualan a 52 y se recalcula el recorrido de cada
   pomo — que es el número que se olvida y deja el pomo a medio camino. Va acotado al riel: la
   barra vieja del `index.html` sin riel conserva sus medidas. */
body.shell-rail .rail-bottom .lang-switch,
body.shell-rail .rail-bottom .theme-switch { width: 52px; }
body.shell-rail .rail-bottom .lang-switch .ls-knob { width: 24px; }
body.shell-rail .rail-bottom .lang-switch.en .ls-knob { transform: translateX(24px); }
body.shell-rail .rail-bottom .theme-switch.on .ts-knob { transform: translateX(27px); }

/* 2 · EL BOTÓN DE MODO, SIN NUMERAL.
   Al quitarle el romano se queda con el icono del modo activo como única marca, así que el
   icono sube de 14 a 18px: era un acompañante del numeral y ahora es el numeral. */
body.shell-rail .rail-link#modeToggle .ic svg { width: 18px; height: 18px; }
body.shell-rail .rail-link#modeToggle .ic { color: var(--gold-foil); }

/* El recordatorio de modo del Inicio es más largo que «ÍNDICE», así que en pantalla
   estrecha baja a su propia línea en vez de estrangular el filete de la cabecera. */
.sec-head-rule .shr-mode { text-align: right; }
@container device (max-width: 620px) {
  .sec-head-rule { flex-wrap: wrap; }
  .sec-head-rule .shr-mode { flex-basis: 100%; text-align: left; }
}

/* ============================================================
   EL PIE LEGAL (2026-09-02)
   ------------------------------------------------------------
   ⚠⚠ `.footer-legal` NO TENÍA NI UNA REGLA DE CSS, y eso no es «le falta estilo»: es que
   salía con el AZUL POR DEFECTO DEL NAVEGADOR (#0000EE) y su morado de visitado. Sobre el
   pergamino canta; sobre el fondo de noche da **1,78:1** medido —AA pide 4,5—, o sea que el
   enlace al aviso legal era prácticamente invisible en modo oscuro, en el sitio publicado.
   ⚠ Y `tools/check_contrast.js` NO PUEDE VERLO, por construcción: lee el CSS buscando reglas
   que pinten tinta con un color de relleno, y aquí el defecto es la AUSENCIA de regla — el
   color no está en el archivo, lo pone el navegador. Es el punto ciego hermano de
   `rule-2026-08-29-la-tinta-va-por-ink`: aquella caza la tinta mal elegida, ésta es la tinta
   que nadie eligió. (El proyecto ya lo había arreglado UNA vez, para `.home-foot a`, con su
   comentario al lado; nadie miró si había más enlaces sin color. Los había.)
   ============================================================ */
.footer-legal { font-weight: 600; color: var(--ink-action); text-decoration: none; }
.footer-legal:visited { color: var(--ink-action); }
.footer-legal:hover { text-decoration: underline; }
.footer-legal:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* El aviso entero en escritorio; en el teléfono, la línea de copyright y el enlace.
   (Decisión del dueño. La atribución completa vive en AVISO_LEGAL.html, que el enlace abre.) */
.footer-short { display: none; }
@container device (max-width: 760px) {
  .footer > span[data-cfg="footerText"] { display: none; }
  .footer-short { display: block; }
  /* Si el enlace es la ÚNICA puerta a la atribución, tiene que parecerlo: deja de ser letra
     pequeña de pie y pasa a leerse como un enlace de verdad. */
  .footer-legal { display: inline-block; margin-top: 10px; font-size: .84rem; text-decoration: underline; }
}

/* ============================================================
   EL ESTANTE DEL INICIO — «Por dónde va el trabajo» (2026-09-06)
   ------------------------------------------------------------
   Los 66 libros de canto, con la abreviatura corriendo HACIA ARRIBA: es lo que
   son —`content/abbr.js` se titula «abreviaturas de CANTO de Biblia»— y de pie
   los 39 del Antiguo caben en UNA fila, así que el nombre no cuesta ni una fila
   de más. NO sustituye al índice de «El canon completo»: aquél sirve para
   escoger libro, éste para seguir el trabajo.
   ============================================================ */
.shelf-lead { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.7;
  color: var(--ink-soft); max-width: 64ch; margin: 0 0 26px; text-wrap: pretty; }
.shelf-row { margin-bottom: 20px; }
.shelf-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 9px; }
/* ⚠ La columna del Inicio mide 1.080, no los 1.180 de la landing: con hueco de
   4px los 39 lomos suman 1.092 y «Mal» se caía a una segunda fila. Con 3px son
   1.053 y el Antiguo cabe entero — medido, no estimado. */
.shelf-books { display: flex; flex-wrap: wrap; gap: 3px; }
.shelf-spine {
  width: 24px; height: 74px; flex: none; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 3px; background: transparent;
  display: flex; align-items: center; justify-content: center; padding: 6px 0; overflow: hidden;
  font-family: var(--font-display); font-size: .78rem; letter-spacing: .02em; color: var(--ink-faint);
  writing-mode: vertical-rl; transform: rotate(180deg); position: relative; cursor: default;
}
.shelf-spine.done { background: var(--gold); border-color: var(--gold-deep); color: #3a2e12; }
/* El de EN OBRA se llena con lo que va hecho de verdad (`--wip`, que lo pone el
   render desde CONTENT_PROGRESS). ⚠ El lomo va rotado 180°, así que «abajo» en
   pantalla es `top` en el elemento. */
.shelf-spine.wip { border-color: var(--gold); color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 12%, transparent); }
.shelf-spine.wip::after { content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: var(--wip, 0%); background: var(--gold); }
/* ⭐ 2026-10-01 · EL LIBRO DE DONANTES: terminado, abierto a quien aportó. Lomo dorado de
   borde y relleno rayado —ni el lleno de «abierto a todos» ni la barra de «en obra»—; en el
   aparato de quien lo tiene abierto (`tramoAbierto`) lleva además `.done` y se ve lleno.
   La tinta va por `--gold-deep`, como la de `.wip`: el tema oscuro ya la redefine. */
.shelf-spine.tramo { border-color: var(--gold); color: var(--gold-deep);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold) 22%, transparent) 0 3px, transparent 3px 7px); }
.shelf-spine.tramo.done { background: var(--gold); border-color: var(--gold-deep); color: #3a2e12; }
/* ⚠ NO lleva parche `body.theme-dark`: `--gold-deep` YA vale #dcc079 en oscuro
   —el tema lo redefine—, así que el rol solo se pinta una vez. Es la deuda que
   `tools/check_contrast.js` cuenta en otras 25 reglas; aquí no se estrena. */
.shelf-keys { display: flex; flex-direction: column; margin-top: 22px; max-width: 64ch; }
.shelf-key { display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px dotted var(--border); font-size: .84rem; color: var(--ink-soft); }
.shelf-key:first-child { border-top: 1px dotted var(--border); }
.shelf-key b { font-weight: 600; color: var(--ink); }
.shelf-key .sk-sp { flex: 1; }
.shelf-key .sk-v { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-deep); text-align: right; }
.sk-sw { width: 11px; height: 26px; flex: none; border: 1px solid var(--border); border-radius: 2px; position: relative; }
.sk-sw.done { background: var(--gold); border-color: var(--gold-deep); }
.sk-sw.wip { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); overflow: hidden; }
.sk-sw.wip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 25%; background: var(--gold); }
.sk-sw.tramo { border-color: var(--gold);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gold) 30%, transparent) 0 3px, transparent 3px 7px); }
/* La etiqueta «Para quienes apoyan» del cajón y del índice del canon. Fuera de
   `body.shell-rail` a propósito: el índice del canon la pinta también sin el riel. */
.bp-tag.tramo { display: inline-block; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-deep); border: 1px solid var(--gold); padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-ui, inherit); align-self: center; }
body.shell-rail .bp-tag.tramo { background: transparent; color: var(--gold-deep); }
/* Teléfono: los 39 lomos no caben en una fila (1.092px), así que cada bloque
   toma las columnas que le salen EXACTAS —13×3 y 9×3— y ninguna acaba coja. */
@container device (max-width: 760px) {
  .shelf-books { display: grid; justify-content: center; gap: 4px; }
  .shelf-at { grid-template-columns: repeat(13, 22px); }
  .shelf-nt { grid-template-columns: repeat(9, 22px); }
  .shelf-spine { width: 22px; height: 66px; font-size: .72rem; }
  .shelf-lbl { text-align: center; }
}

/* ── EL BLOQUE DE INSTALAR DENTRO DE LA PANTALLA DE CANJE ────
   ⚠ No es el aviso flotante de `js/pwa.js`: aquél interrumpe y se cierra con
   una ✕; éste es texto dentro de la caja donde la persona ya está mirando,
   justo después de «tu acceso quedó registrado». Por eso no lleva sombra ni
   fondo de tarjeta —no es una capa por encima— sino un filete de oro a la
   izquierda, el mismo recurso que usa el correo para el mismo párrafo. */
.entrar-instalar { margin: 30px 0 0; padding: 16px 18px; text-align: left;
  border-left: 3px solid var(--gold); background: var(--card); border-radius: 0 10px 10px 0; }
.entrar-instalar b { display: block; font-family: var(--font-serif); font-size: 1.02rem; color: var(--ink); }
.entrar-instalar p { font-size: .9rem; line-height: 1.65; color: var(--ink-soft); margin: 6px 0 0; }
.entrar-instalar-go { margin: 12px 0 0; background: var(--gold); color: #3a2e12; border: 0;
  cursor: pointer; font-weight: 600; font-size: .9rem; padding: 11px 22px; border-radius: 999px; }
.entrar-instalar-go:hover { background: var(--gold-deep); color: #2a2010; }
.entrar-instalar-go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* El icono de Compartir va alineado con el texto, no flotando encima de él. */
.entrar-instalar-ios .ios-share { width: 1.05em; height: 1.05em; vertical-align: -.18em; margin: 0 .12em; }
/* ⚠ `.entrar-alt` es un <a> secundario junto al botón dorado: declara su color
   por la regla del 2026-09-02 (sin regla propia saldría con el azul del
   navegador, que el modo oscuro no redefine). */
.entrar-alt { display: inline-block; margin: 12px 0 0; font-size: .9rem;
  color: var(--ink-action); text-decoration: underline; text-underline-offset: 3px; }
.entrar-alt:visited { color: var(--ink-action); }
.entrar-alt:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ============================================================
   LA LÁMINA DEL ÁRBOL — #/genealogy/<libro> (viewGenealogy)
   (2026-09-11, decisión del dueño: modelo III de los cinco del lienzo)
   ------------------------------------------------------------
   El árbol genealógico deja de ser una columna de pastillas y pasa a ser una LÁMINA
   iluminada y enmarcada, como toda imagen del volumen (§8 regla 5: `.plate`). Tronco
   dorado, un medallón con la inicial por generación, los hermanos como brotes, el
   diluvio en olas, la línea lateral en plata discontinua y los doce abiertos en abanico
   por madre. No añade ni un token de color ni una fuente: los valores propios de aquí
   (el relleno del medallón y el fondo del campo, en claro y en oscuro) son el suelo
   sobre el que se pinta, como el filete #efe6d2 de `.plate img`.
   ⚠ DOS LÁMINAS EN EL DOM, UNA A LA VISTA. js/app.js dibuja la ANCHA (1056) y la
   ESTRECHA (340); aquí se elige con `@container device`, nunca con `@media` (§8). La
   estrecha se queda en 480px como mucho: escalada a 700 los nombres saldrían al doble.
   ⚠ Todo el texto va en SVG con `fill` y no con `color`: el tamaño lo pone la clase
   (y `.n` lo baja en la estrecha), salvo la inicial del medallón, que lo trae en su
   atributo `font-size` — por eso `.gl-mt` NO declara tamaño: el CSS le ganaría.
   ============================================================ */
.glam { --gl-fill: #fbf7ef; --gl-letter: var(--gold-deep); --gl-lab: var(--gold-deep); --gl-gen: var(--gold-deep);
  --gl-field: radial-gradient(90% 40% at 50% 0%, #fffdf8 0%, #f7f0e2 70%, #f1e7d4 100%); }
body.theme-dark .glam { --gl-fill: #151c33; --gl-letter: var(--gold-foil); --gl-lab: var(--gold); --gl-gen: var(--gold-soft);
  --gl-field: radial-gradient(90% 40% at 50% 0%, #1f2a4f 0%, #161d33 55%, #11172b 100%); }
.glam-cover { padding-bottom: 30px; }
.glam-plate { margin-top: 10px; }
.glam-field { position: relative; background: var(--gl-field); border: 1px solid color-mix(in srgb, var(--border) 70%, var(--card)); }
.glam-svg { display: block; width: 100%; height: auto; }
.glam-narrow { display: none; }

/* el dibujo */
.glam-svg .gl-e { text-anchor: end; }
.glam-svg .gl-s { text-anchor: start; }
.glam-svg .gl-m { text-anchor: middle; }
.gl-frame { fill: none; stroke: var(--gold-soft); stroke-width: .8; opacity: .7; }
.gl-orn { fill: none; stroke: var(--gold); stroke-width: 1; }
.gl-ctk { font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: 4px; fill: var(--gl-lab); }
.gl-ctt { font-family: var(--font-display); font-style: italic; font-size: 30px; font-weight: 600; fill: var(--ink); }
.gl-ctt.n { font-size: 20px; }
.gl-ctl { stroke: var(--gold-soft); stroke-width: .8; }
.gl-tr { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.gl-trh { fill: none; stroke: var(--gold-foil); stroke-width: .8; opacity: .45; }
.gl-st1 { stop-color: #e3c77a; } .gl-st2 { stop-color: #c9a24b; } .gl-st3 { stop-color: #a9821f; }
.gl-lf { fill: var(--gold-soft); opacity: .42; }
.gl-lv { fill: none; stroke: var(--gold); stroke-width: .6; opacity: .7; }
.gl-mo { fill: var(--gl-fill); stroke: var(--gold); stroke-width: 1.4; transition: stroke .18s; }
.gl-mi { fill: none; stroke: var(--gold-soft); stroke-width: .8; opacity: .7; }
.gl-mt { font-family: var(--font-display); font-weight: 700; fill: var(--gl-letter); text-anchor: middle; }
.gl-mo.gl-bud, .gl-mo.gl-side { stroke: var(--ink-faint); stroke-width: 1.1; }
.gl-mt.gl-bud, .gl-mt.gl-side { fill: var(--ink-soft); }
.gl-mo.gl-dau { stroke-dasharray: 3 3; }
.gl-mo.gl-has { stroke: var(--gold-foil); stroke-width: 1.8; }
.gl-glow, .gl-glow2 { fill: none; stroke: var(--gold-foil); opacity: 0; transition: opacity .2s; }
.gl-hit { fill: transparent; }
.gl-g { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: 2px; fill: var(--gl-gen); opacity: .85; }
.gl-g.n { font-size: 8.5px; letter-spacing: 1.6px; }
.gl-nm { font-family: var(--font-display); font-size: 21px; font-weight: 700; fill: var(--ink); letter-spacing: -.2px; transition: fill .18s; }
.gl-nm.n { font-size: 18px; }
.gl-al { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: 1.8px; fill: var(--gl-lab); }
.gl-y { font-family: var(--font-read); font-size: 14.5px; fill: var(--gl-lab); font-feature-settings: "onum" 1, "tnum" 1; }
.gl-y.n { font-size: 13px; }
.gl-ag { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: 1.5px; fill: var(--ink-faint); }
.gl-ag.n { font-size: 7.5px; }
.gl-td { fill: none; stroke: var(--ink-faint); stroke-width: 1; opacity: .75; }
.gl-sb { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 17px; fill: var(--ink-soft); transition: fill .18s; }
.gl-sb.n { font-size: 15px; }
.gl-sk { font-family: var(--font-body); font-size: 8px; font-weight: 700; letter-spacing: 1.6px; fill: var(--ink-faint); }
.gl-sk.n { font-size: 7.5px; letter-spacing: 1.2px; }
.gl-wv { fill: none; stroke: var(--turq); stroke-width: 1.3; }
.gl-bbg { fill: var(--gl-fill); }
.gl-bk { font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: 3px; fill: var(--ink); }
.gl-bk.n { font-size: 8.5px; letter-spacing: 2.4px; }
.gl-bb { font-family: var(--font-display); font-size: 24px; font-weight: 700; fill: var(--gl-lab); }
.gl-bb.n { font-size: 20px; }
.gl-bs { font-family: var(--font-serif); font-style: italic; font-size: 14.5px; fill: var(--ink-faint); }
.gl-bs.n { font-size: 13px; }
.gl-cl { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .85; transition: stroke .3s, opacity .3s; }
.gl-cn { font-family: var(--font-display); font-size: 16px; font-weight: 700; fill: var(--ink-soft); transition: fill .18s; }
.gl-cn.n { font-size: 15px; }
.gl-cs { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; fill: var(--ink-faint); }
.gl-cs.n { font-size: 12.5px; }
.gl-co { font-family: var(--font-body); font-size: 7.5px; font-weight: 700; letter-spacing: .9px; fill: var(--gl-lab); }
.gl-ck { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: 2.4px; fill: var(--ink-soft); }
.gl-ck.n { font-size: 8.5px; letter-spacing: 2px; }
.gl-sep { stroke: var(--border); stroke-width: 1; }
.gl-bra { fill: none; stroke: var(--gold); stroke-width: 1.6; opacity: .9; }
.gl-twg { fill: none; stroke: var(--gold-soft); stroke-width: 1; opacity: .85; }
.gl-brace { fill: none; stroke: var(--border); stroke-width: 1; }
.gl-tn { font-family: var(--font-serif); font-size: 16px; font-weight: 700; fill: var(--ink); transition: fill .18s; }
.gl-tn.it { font-style: italic; fill: var(--ink-soft); }
.gl-tref { font-family: var(--font-body); font-size: 8.5px; font-weight: 700; letter-spacing: .6px; fill: var(--gl-lab); }
.gl-tm { font-family: var(--font-body); font-size: 9.5px; font-weight: 800; letter-spacing: 2.6px; fill: var(--gl-lab); }
.gl-tm.n { font-size: 8.5px; letter-spacing: 2px; }
.gl-tc { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0; fill: var(--ink-faint); }

/* lo tocable: medallón, brote o nombre abren la ficha (`.verse-pop`) */
.gl-n { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  .gl-n:hover .gl-mo { stroke: var(--gold-foil); }
  .gl-n:hover .gl-nm, .gl-n:hover .gl-sb, .gl-n:hover .gl-cn, .gl-n:hover .gl-tn { fill: var(--ink-action); }
}
.gl-n:active .gl-mo { stroke: var(--gold-foil); }
.gl-n:focus-visible .gl-glow, .gl-n.is-focus .gl-glow { opacity: .55; }
.gl-n.is-focus .gl-glow2 { opacity: .2; }
.gl-n.is-focus .gl-nm, .gl-n.is-focus .gl-sb, .gl-n.is-focus .gl-cn { fill: var(--ink-action); }
.gl-br.is-flash .gl-cl { stroke: var(--gold-foil); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gl-glow, .gl-glow2, .gl-mo, .gl-cl { transition: none; } }

/* bajo la lámina: cómo se lee, lo que casi nadie nota y lo declarado */
.glam-cap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 20px 2px 0; }
.glam-cap h3 { font-size: 1.24rem; margin: 0 0 6px; }
.glam-cap p { font-family: var(--font-read); font-size: 1.04rem; line-height: 1.65; color: var(--ink); margin: 0; text-wrap: pretty; }
.glam-key { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; align-content: start; padding-top: 4px; }
.glam-key span { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--ink-soft); }
.glam-key svg { width: 30px; height: 22px; flex: none; }
.glam-sec { margin-top: 46px; }
.glam-sec h2 { font-size: 1.4rem; margin: 0; }
.glam-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; margin-top: 16px; }
.glam-f { display: flex; gap: 14px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--border); }
.glam-fn { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--gold); display: grid; place-items: center;
  font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--gold-deep); background: var(--parchment); }
.glam-f p { margin: 0; font-family: var(--font-read); font-size: 1.05rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.glam-foot { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }

/* el teléfono (y la vista 📱): la lámina estrecha */
@container device (max-width: 760px) {
  .glam-wide { display: none; }
  .glam-narrow { display: block; }
  .glam-plate { max-width: 480px; margin-left: auto; margin-right: auto; padding: 8px; }
  .glam-cap, .glam-facts, .glam-foot { grid-template-columns: 1fr; gap: 18px; }
  .glam-key { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================================
   PROFECÍAS MESIÁNICAS (#/prophecies) — «EL VOLUMEN IMPRESO»
   Modelo A, elegido por el dueño el 2026-09-11 sobre tres maquetas. Extiende la
   retórica de «VOLUMEN IMPRESO» (§8 de UI_STYLEGUIDE.md) a una página de ESTUDIO:
   hasta hoy esa retórica vivía solo en las seis pestañas del libro, y esta página
   seguía en el sistema de TARJETAS que la regla 1 de aquel bloque retiró.
   NO añade ni un token de color ni una fuente: reutiliza `.vol-part-head`, `.vol-num`,
   `.vol-body`, `.vol-index`, `.vi-dots`, `.vi-label`, `.vi-end`, `.vol-stats`,
   `.eyebrow`, `.rule-gold`, `.bc-*` y `.proph-ref`, con sus cortes de teléfono ya
   escritos (líneas 3084-3088). Lo propio es `.pv-*`.
   ⚠⚠ VA AL FINAL DE LA HOJA A PROPÓSITO, y no es estética: `.pv-index .vol-row`
   compite con `.vol-index a, .vol-index .vol-row` y las dos valen (0,2,0), así que a
   igualdad de especificidad decide el ORDEN. Escrito arriba, este bloque perdería.
   ⚠ Los cortes responsivos van en `@container device`, NUNCA en `@media`: `#device`
   es el contenedor, así que la misma regla sirve para el móvil real y para la vista 📱.
   ⚠ El `.proph-*` de arriba NO se toca: lo siguen usando «Las promesas del pacto»,
   «Los primeros», el catálogo de mandatos, las estructuras y el calendario.
   ============================================================ */
.pv-view { max-width: 980px; }

/* Cornisa: la línea de arriba del volumen. Sin caja y sin fondo — una línea de tipos
   sobre un filete, que es lo que hace una cornisa impresa. */
.pv-cornice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 9px; border-bottom: 1px solid var(--border); }
.pv-cornice-n { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--ink-faint); }

/* Portada de la página */
.pv-cover { text-align: center; padding: 40px 0 30px; }
.pv-cover h1 { font-size: 2.9rem; letter-spacing: -.02em; margin: 0 auto; max-width: 24ch; }
.pv-lead { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.8; color: var(--ink);
  max-width: 62ch; margin: 18px auto 0; text-wrap: pretty; }
.pv-cover .rule-gold { margin-top: 30px; }

/* Índice de guías punteadas. El reset del `<button>` lo da ya `.vol-index button.vol-row`;
   aquí solo el numeral romano, los estados y el suelo táctil de 44px. */
.pv-index { margin: 6px 0 52px; }
.pv-index .vol-row { min-height: 44px; -webkit-tap-highlight-color: transparent; }
/* ⚠ EL NUMERAL VA EN `--gold-deep` Y NO EN `--gold-soft`, que es lo que usa el romano grande
   de `.vol-num`: medido sobre el pergamino, #dcc079 da 1,64:1 y #a9821f da 3,30 — el mismo valor
   que la referencia y el rango que van en esa MISMA fila. Un numeral de 2rem es texto GRANDE (AA
   pide 3,0) y a 1,64 no llegaba ni a eso; y el de la entrada no es adorno: es el localizador al
   que salta el buscador global. En modo oscuro los dos tokens valen lo mismo, así que no se mueve. */
.pv-vi-num { flex: 0 0 46px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--gold-deep); }
.pv-index .vol-row:active { color: var(--gold-deep); }
.pv-index .vol-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; color: var(--gold-deep); }
@media (hover: hover) {
  .pv-index .vol-row:hover { color: var(--gold-deep); }
  .pv-index .vol-row:hover .vi-dots { border-bottom-color: var(--gold-soft); }
  .pv-index .vol-row:hover .pv-vi-num { color: var(--gold); }
}

/* Entrada: numeral · enunciado · referencias AL MARGEN (regla 8 del volumen impreso) */
.pv-ent { display: grid; grid-template-columns: 64px 1fr 178px; gap: 30px; align-items: start;
  padding: 24px 0; border-top: 1px solid var(--border); }
.pv-ent-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--gold-deep); line-height: 1; text-align: right; padding-top: 2px; }
.pv-ent-body { min-width: 0; }
.pv-tag { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem;
  font-weight: 700; color: var(--gold-deep); margin-bottom: 6px; }
.pv-at { font-family: var(--font-read); font-size: 1.18rem; line-height: 1.55; color: var(--ink);
  margin: 0; max-width: 60ch; text-wrap: pretty; }
.pv-nt { display: flex; gap: 13px; margin-top: 13px; }
.pv-nt > i { flex: none; width: 2px; background: var(--gold-soft); border-radius: 1px; }
.pv-nt > div { min-width: 0; }
.pv-nt-lab { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem;
  font-weight: 700; color: var(--ink-action); margin-bottom: 3px; }
.pv-nt p { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft);
  margin: 0; max-width: 58ch; text-wrap: pretty; }

/* La lectura viva. ⚠ `:empty` NO es un adorno: el hueco se pinta VACÍO y lo rellena
   `pvFillLive()` después; sin esto, una referencia cuyo capítulo no cargue dejaría un
   filete de oro suelto colgando de la nada. */
.pv-live { margin-top: 13px; padding-left: 13px; border-left: 2px solid var(--gold); }
.pv-live:empty { display: none; }
.pv-live-lab { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .58rem;
  font-weight: 700; color: var(--gold-deep); margin-bottom: 4px; }
.pv-live p { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft);
  margin: 0; font-style: italic; max-width: 62ch; text-wrap: pretty; }
.pv-live-n { font-style: normal; font-size: .6rem; font-weight: 700; color: var(--gold-deep);
  margin-right: 2px; }

/* Nota textual: filete al margen, nunca caja */
.pv-note { margin-top: 14px; padding-left: 13px; border-left: 2px solid var(--border); }
.pv-note-tag { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem;
  font-weight: 700; color: var(--gold-deep); margin-bottom: 3px; }
.pv-note p { font-family: var(--font-read); font-size: .99rem; color: var(--ink-soft); line-height: 1.6;
  margin: 0; max-width: 70ch; text-wrap: pretty; }

/* Las referencias, al margen derecho */
.pv-aside { display: flex; flex-direction: column; gap: 12px; text-align: right; padding-top: 3px; }
.pv-ref-grp { display: block; }
.pv-ref-grp > span { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .58rem;
  font-weight: 700; color: var(--ink-faint); margin-bottom: 3px; }
.pv-aside .proph-ref { display: inline-block; line-height: 1.45; }
.pv-aside .proph-ref-link { text-align: right; }

.pv-foot { margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: .76rem; line-height: 1.6; color: var(--ink-faint); }

/* el teléfono (y la vista 📱): el margen derecho se tumba bajo el enunciado */
@container device (max-width: 760px) {
  .pv-cover { padding: 26px 0 22px; }
  .pv-cover h1 { font-size: 1.78rem; max-width: none; }
  .pv-lead { font-size: 1.05rem; line-height: 1.7; }
  .pv-cornice-n { margin-left: 0; flex-basis: 100%; }
  .pv-index { margin-bottom: 34px; }
  .pv-vi-num { flex-basis: 26px; font-size: .94rem; }
  .pv-index .vi-label { font-size: 1.04rem; }
  .pv-ent { grid-template-columns: 34px 1fr; gap: 0 14px; padding: 18px 0; }
  .pv-ent-num { grid-column: 1; grid-row: 1; font-size: 1.35rem; text-align: left; }
  .pv-ent-body { grid-column: 2; grid-row: 1; }
  .pv-aside { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap;
    gap: 6px 20px; text-align: left; margin-top: 12px; padding-top: 0; }
  .pv-at { font-size: 1.09rem; }
  /* ⚠ EL SUELO TÁCTIL NO SE PAGA CON ALTO, SE PAGA CON UN ÁREA. Estirar el botón a 44px lo
     hacía `inline-flex` centrado, y su `border-bottom: 1px dashed` —que es lo que dice «esto se
     toca»— se iba al fondo de la caja: un filete suelto quince píxeles por debajo de su propia
     referencia. El área invisible centrada sobre el texto da los 44px sin mover ni un píxel de
     tinta. */
  .pv-aside .proph-ref-link { position: relative; }
  .pv-aside .proph-ref-link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); height: 44px; }
}

/* ============================================================
   LA UNIDAD DE LA ESCRITURA (#/harmony · #/harmony/<libro>) — «EL PLIEGO ENFRENTADO»
   Modelo B, elegido por el dueño el 2026-09-12 sobre tres maquetas. Segunda página de
   ESTUDIO que sale del sistema «VOLUMEN IMPRESO» (§8 de UI_STYLEGUIDE.md) y primera que lo
   usa para una comparación de DOS COLUMNAS: las dos Escrituras enfrentadas con un lomo de
   oro en medio y el enunciado cruzando por encima, porque el enunciado es el VÍNCULO y no
   es de ninguno de los dos lados.
   NO añade ni un token de color ni una fuente: reutiliza `.vol-part-head`, `.vol-num`,
   `.vol-body`, `.vol-index`, `.vi-dots`, `.vi-label`, `.vi-end`, `.vol-stats`,
   `.vol-group-head`, `.vol-note`, `.eyebrow`, `.rule-gold`, `.bc-*`, `.proph-ref` y
   `.proph-badge`. Lo propio es `.hv-*`.
   ⚠⚠ VA AL FINAL DE LA HOJA, DETRÁS DEL BLOQUE DE PROFECÍAS, y no es estética: `.hv-index
   .vol-row` y `.hv-part-head` compiten con `.vol-index .vol-row` y `.vol-part-head`, y a
   igualdad de especificidad (0,2,0 y 0,1,0) decide el ORDEN. Escrito arriba, este bloque
   perdería sin decirlo — es la misma advertencia que trae el bloque `.pv-*`.
   ⚠ Los cortes responsivos van en `@container device`, NUNCA en `@media`: `#device` es el
   contenedor, así que la misma regla sirve para el móvil real y para la vista 📱.
   ⚠ El `.proph-*` y el `.harm-*` de arriba NO se tocan: `.harm-toc`/`.harm-goto` los usa la
   GUÍA de la app (#/help), y `.proph-*` las demás páginas de estudio. `.harm-ev`,
   `.harm-only` y `.harm-note` quedan sin consumidor desde hoy y se declaran aquí en vez de
   borrarse, como el resto de las clases que el «volumen impreso» fue jubilando.
   ============================================================ */
.hv-view { max-width: 1000px; }

/* Cornisa: la línea de arriba del volumen — tipos sobre un filete, sin caja. */
.hv-cornice { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 0 9px; border-bottom: 1px solid var(--border); }
.hv-cornice-n { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--ink-faint); }

/* Portada de la página */
.hv-cover { text-align: center; padding: 38px 0 26px; }
.hv-cover h1 { font-size: 2.8rem; letter-spacing: -.02em; margin: 0 auto; max-width: 24ch; }
.hv-lead { font-family: var(--font-read); font-size: 1.12rem; line-height: 1.8; color: var(--ink);
  max-width: 62ch; margin: 18px auto 0; text-wrap: pretty; }
.hv-cover .rule-gold { margin-top: 28px; }

/* Índice del documento completo (una fila por libro) */
.hv-index { margin: 6px 0 40px; }
.hv-index .vol-row { min-height: 44px; -webkit-tap-highlight-color: transparent; }
/* ⚠ El numeral va en `--gold-deep` y no en `--gold-soft`: es un LOCALIZADOR, no un adorno, y
   sobre el pergamino #dcc079 da 1,64:1 — la misma razón escrita en `.pv-vi-num`. */
.hv-vi-num { flex: 0 0 46px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  color: var(--gold-deep); }
.hv-index .vol-row:active { color: var(--gold-deep); }
.hv-index .vol-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; color: var(--gold-deep); }
@media (hover: hover) {
  .hv-index .vol-row:hover { color: var(--gold-deep); }
  .hv-index .vol-row:hover .vi-dots { border-bottom-color: var(--gold-soft); }
  .hv-index .vol-row:hover .hv-vi-num { color: var(--gold); }
}

/* EL RAÍL — quién cita a este libro. Todo lo que dice sale medido del propio dato. */
.hv-rail { margin: 6px 0 44px; }
.hv-rail-head { margin: 0 0 2px; }
.hv-rail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
.hv-rail-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.hv-rail-n { font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.hv-rail-c { flex: none; font-size: .74rem; font-weight: 700; color: var(--gold-deep); white-space: nowrap; }

/* Cabecera de parte: la del volumen, en un cuerpo menor — aquí la parte solo agrupa, y el
   peso de la página está en las entradas enfrentadas. Y el cuerpo NO se sangra 108px: el
   pliego necesita su ancho entero para que las dos columnas sean iguales. */
.hv-part-head { gap: 18px; align-items: center; margin-bottom: 4px; }
.hv-part-head .vol-num { font-size: 2.6rem; width: auto; }
.hv-part-head h2 { font-size: 1.62rem; margin: 0 0 3px; }
.hv-part-head p { font-size: .95rem; line-height: 1.6; }
.hv-body { margin: 20px 0 34px; }

/* Sección de un libro dentro del documento completo */
.hv-sec-head { margin: 42px 0 18px; }
.hv-sec-head h2 { font-size: 1.85rem; margin: 0 0 6px; }
.hv-sec-head p { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.75; color: var(--ink-soft);
  margin: 0; max-width: 64ch; text-wrap: pretty; }

/* LA ENTRADA — enunciado a todo lo ancho, y debajo las dos Escrituras enfrentadas */
.hv-ent { padding: 26px 0 28px; border-top: 1px solid var(--border); }
.hv-ent-head { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.hv-ent-num { flex: none; width: 42px; text-align: right; font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; color: var(--gold-deep); line-height: 1; }
.hv-ev { font-family: var(--font-serif); font-size: 1.36rem; font-weight: 600; line-height: 1.35;
  color: var(--ink); margin: 0; max-width: 64ch; text-wrap: pretty; }

.hv-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 34px; margin-left: 62px; }
/* El lomo: un filete que se desvanece por los extremos, como el doblez de un pliego. */
.hv-spine { background: linear-gradient(180deg, transparent, var(--gold-soft) 12%, var(--gold-soft) 88%, transparent); }
.hv-side { min-width: 0; }
.hv-side-lab { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem;
  font-weight: 700; color: var(--gold-deep); margin-bottom: 7px; }
.hv-lab-r { color: var(--ink-action); }
.hv-side-ref { margin-bottom: 9px; }

/* La lectura viva. ⚠ `:empty` NO es un adorno: el hueco se pinta VACÍO y lo rellena
   `pvFillLive()` después; sin esto, una referencia cuyo capítulo no cargue dejaría un rótulo
   suelto colgando de la nada. Aquí el bloque va SIN filete al margen — el lomo de al lado ya
   es la única línea vertical que esta composición admite. */
.hv-live:empty { display: none; }
.hv-live p { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.7; color: var(--ink);
  margin: 4px 0 0; text-wrap: pretty; }

/* La columna de la derecha: el NOMBRE del libro y su referencia, una por línea. */
.hv-ref-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; flex-wrap: wrap; }
.hv-ref-bk { flex: 0 0 116px; font-family: var(--font-serif); font-size: 1.04rem; line-height: 1.35; color: var(--ink); }
.hv-none { font-family: var(--font-read); font-size: 1.02rem; color: var(--ink-faint); margin: 0; }
.hv-badge { display: inline-block; }
.hv-note { margin-top: 12px; }

.hv-foot { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: .76rem; line-height: 1.6; color: var(--ink-faint); display: flex; gap: 24px; flex-wrap: wrap; }
.hv-foot > span { flex: 1; min-width: 300px; }
.hv-foot a { font-weight: 600; text-decoration: none; }
.hv-foot a:hover { text-decoration: underline; }

/* el teléfono (y la vista 📱): el pliego se deshace y las dos Escrituras se apilan */
@container device (max-width: 760px) {
  .hv-cover { padding: 26px 0 20px; }
  .hv-cover h1 { font-size: 1.78rem; max-width: none; }
  .hv-lead { font-size: 1.05rem; line-height: 1.7; }
  .hv-cornice-n { margin-left: 0; flex-basis: 100%; }
  .hv-rail-grid { grid-template-columns: 1fr; }
  .hv-index { margin-bottom: 28px; }
  .hv-vi-num { flex-basis: 26px; font-size: .94rem; }
  .hv-index .vi-label { font-size: 1.04rem; }
  .hv-part-head { gap: 12px; }
  .hv-part-head .vol-num { font-size: 1.8rem; }
  .hv-part-head h2 { font-size: 1.3rem; }
  .hv-body { margin: 16px 0 26px; }
  .hv-ent-head { gap: 12px; margin-bottom: 14px; }
  .hv-ent-num { width: 28px; font-size: 1.22rem; }
  .hv-ev { font-size: 1.16rem; }
  /* ⚠ El lomo se RETIRA, no se estira: en una columna sola se quedaría en un filete
     horizontal de 1px suelto entre las dos mitades. Lo que separa aquí es el filete de la
     mitad de abajo, que es lo que hace un pliego doblado. */
  .hv-cols { grid-template-columns: 1fr; gap: 16px; margin-left: 0; }
  .hv-spine { display: none; }
  .hv-side-r { padding-top: 14px; border-top: 1px solid var(--border); }
  .hv-ref-bk { flex-basis: 100px; font-size: 1rem; }
}

/* ============================================================
   BUZÓN — «Ideas y reportes» (js/buzon.js, 2026-09-30)
   Reusa el caparazón de la guía «?» (.verse-pop-back / .verse-pop): ventana
   centrada en escritorio y en el teléfono. El botón es un `.btn-icon` más del
   pie del riel, así que hereda sus estilos de claro, oscuro y cabecera móvil.
   ⚠ Toda la tinta va por las `--ink-*` y la tinta suave: nada de pintar texto
   con `--indigo`/`--accent`, que en oscuro se quedan en 1,4:1.
   ============================================================ */
.verse-pop.bz-pop { max-width: 520px; padding: 24px 24px 20px; }
.bz-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.15; margin: 0 28px 6px 0; color: var(--ink); }
.bz-intro { margin: 0 0 18px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.bz-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.bz-kind {
  min-height: 60px; padding: 8px 4px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--card); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.bz-kind.on { border-color: var(--ink-action); background: color-mix(in srgb, var(--ink-action) 12%, var(--card)); }
.bz-kind:focus-visible, .bz-text:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bz-kind-ic { line-height: 0; color: var(--gold-deep); }
.bz-kind-ic svg { width: 20px; height: 20px; }
.bz-label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.bz-text {
  width: 100%; box-sizing: border-box; min-height: 130px; resize: vertical;
  border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--parchment); color: var(--ink); font: inherit; font-size: .95rem; line-height: 1.5;
}
.bz-text::placeholder { color: var(--ink-faint); }
.bz-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: .75rem; color: var(--ink-soft); }
/* El campo trampa: fuera de la vista y del lector de pantalla (aria-hidden), no `display:none`,
   que algunos robots saben saltarse. */
.bz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bz-where { margin: 14px 0 0; font-size: .78rem; color: var(--ink-soft); }
.bz-where code { font-size: .74rem; background: var(--parchment-2); padding: 1px 6px; border-radius: 4px; color: var(--ink); }
.bz-safe { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }
.bz-safe span { line-height: 0; color: var(--gold-deep); flex-shrink: 0; margin-top: 1px; }
.bz-safe svg { width: 16px; height: 16px; }
.bz-err { margin: 12px 0 0; font-size: .85rem; color: var(--ink-bad); }
.bz-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.bz-done { text-align: center; padding: 8px 0 0; }
.bz-done-ic { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-deep); }
.bz-done-ic svg { width: 26px; height: 26px; }
.bz-done h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: 12px 0 6px; color: var(--ink); }
.bz-done p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.bz-done .bz-actions { justify-content: center; }