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

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;
}
/* 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; }
.reader-nav { display: flex; justify-content: space-between; margin-top: 36px; gap: 10px; }
.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 */
.chapter-end {
  max-width: 66ch; margin: 40px auto 0; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--gold-soft); border-radius: 14px;
  padding: 18px 20px; box-shadow: var(--shadow);
}
.chapter-end .ce-mark { flex-basis: 100%; color: var(--gold); font-size: 1.05rem; line-height: 1; margin-bottom: 2px; }
.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; }
.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; } }
/* --- 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; }
@media (max-width: 620px) { .name-row { flex-direction: column; gap: 2px; } .name-row .name-k { width: auto; } }
/* ---- 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); }
/* ---- 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 */
.gene-facts { margin: 18px 0; }
.gene-facts h3 { margin: 0 0 8px; }
.gene-facts ul { margin: 0; padding-left: 20px; }
.gene-facts li { margin: 5px 0; color: var(--ink-soft); font-size: .93rem; }
.gene-tree { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 22px 0 8px; }
.gt-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; position: relative; padding: 7px 0; }
.gt-row + .gt-row::before { content: ""; position: absolute; top: -7px; left: 50%; width: 1.5px; height: 14px; background: var(--gold-soft); }
.gt-node { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; background: var(--card);
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 13px; cursor: pointer; font: inherit; color: var(--ink); }
.gt-node b { font-size: .92rem; }
.gt-node:hover { border-color: var(--gold); }
.gt-main { border-color: var(--gold-deep); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-foil) 45%, transparent); }
.gt-years { font-size: .7rem; color: var(--ink-faint); }
.gt-sep { width: 100%; text-align: center; margin: 12px 0; }
.gt-sep span { background: var(--parchment-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; font-size: .78rem; color: var(--ink-soft); }
.gt-mothers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%; margin-top: 6px; }
.gt-mother h4 { margin: 0 0 8px; color: var(--gold-deep); }
.gt-sons { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-son { cursor: default; }
.gt-son[data-gid] { cursor: pointer; }
.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; }
.gt-branch-up { margin-left: 8px; padding: 2px 10px; font-size: .74rem; vertical-align: middle; }
/* 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 */
.cal-wheel-box { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 18px 0; }
.cal-wheel { width: min(380px, 92vw); height: auto; }
.cw-ring { fill: var(--card); stroke: var(--gold-deep); stroke-width: 2; }
.cw-hub { fill: var(--parchment-2); stroke: var(--gold-soft); }
.cw-spoke { stroke: color-mix(in srgb, var(--ink-faint) 25%, transparent); }
.cw-month { font-size: 13px; font-weight: 700; fill: var(--ink); }
.cw-greg { font-size: 9.5px; fill: var(--ink-faint); }
.cw-center { font-size: 13px; fill: var(--gold-deep); font-weight: 700; }
.cw-feast { fill: var(--indigo); stroke: #fff; stroke-width: 1.5; }
.cw-feast.cw-pilgrim { fill: var(--gold-deep); }
.ch-dot.cw-lg-p { background: var(--gold-deep); border-radius: 50%; }
.ch-dot.cw-lg-o { background: var(--indigo); border-radius: 50%; }
.cal-grid { margin-top: 10px; }
.cal-card h3 { margin: 0 0 4px; }
.cal-when { font-size: .8rem; color: var(--gold-deep); font-weight: 700; margin-bottom: 6px; }
.cal-pilgrim { border-left: 4px solid var(--gold-deep); }
.cal-john { margin-top: 10px; font-size: .88rem; }
.cal-john-n { font-size: .8rem; color: var(--ink-soft); margin-left: 4px; }
/* 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 */
/* Persona ENFOCADA en el árbol genealógico (al llegar tocando un nombre en Gn 5). */
.gt-node.gt-focus { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 28%, transparent); }
.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; }
.imm-cs-imgs { display: flex; gap: 12px; flex-wrap: wrap; }
.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)); }

/* =============================================================================
   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; }
/* A−/A+ viven en la barra esbelta (rn-fs); el fs-ctl del lector se oculta para no duplicar */
body.view-read.mode-plain .reader-bar .fs-ctl, body.view-read.mode-immersive .reader-bar .fs-ctl { display: none !important; }

/* barra esbelta con el pill */
.rn-bar { display: flex; align-items: 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-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; }
.rn-fs { font-size: .78rem; font-weight: 700; padding: 7px 9px; }
.rn-fs-big { font-size: .92rem; }

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

/* ============================================================
   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; }
.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;
  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. */
.mode-card .mc-thumb-art { padding: 0; background-size: cover; background-position: center; }
.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; }
  .mode-grid { grid-template-columns: 1fr; gap: 10px; }
  .mode-card { flex-direction: row; align-items: center; gap: 13px; padding: 13px 15px; min-height: 44px; }
  .mode-card .mc-thumb { flex: none; width: 44px; height: auto; padding: 6px 5px; border: 1px solid var(--border); border-bottom: 0; border-radius: 6px; }
  .mode-card .mc-txt { padding: 0; flex: 1; }
  .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); }