/* ═══════════════════════════════════════════════════════════════════════════
   Biblia · diseño «Constelación» (portada v4, mismo lenguaje que enfoque.css)
   Índice editorial: nombres de libros en serif, etiquetas mono, hilos finos,
   oro solo en lo elegido o lo que suena. Solo aspecto: ids y onclick intactos.
   ═══════════════════════════════════════════════════════════════════════════ */

#listen{
  --e-bg:#06080F; --e-bg-2:#0C1020; --e-ink:#ECEEF3; --e-muted:#868B99; --e-line:rgba(236,238,243,.10); --e-line-2:rgba(236,238,243,.18);
  --e-gold:#C9A84C; --e-gold-soft:#E6D3A0;
  --e-serif:"Instrument Serif", Georgia, serif; --e-ui:"Inter", system-ui, sans-serif; --e-mono:"Geist Mono", ui-monospace, monospace;
  color:var(--e-ink); font-family:var(--e-ui);
}
body[data-tab-active="biblia"]{ background:#06080F !important; }
#listen.listen-section{ background:#06080F !important; }
#listen .bib-wrap, #listen .chapter-result{ max-width:1080px; }

/* ── Encabezado ───────────────────────────────────────────────────────── */
/* Encabezado = la sección «Biblia» de la portada v4: texto a la izquierda, esfera-mapa a la derecha */
#listen .bib-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:24px; text-align:left; padding-top:12px; min-height:560px; }
#listen .bib-kicker{ font:500 11px/1.4 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-muted); display:flex; align-items:center; gap:12px; margin:0 0 36px; }
#listen .bib-kicker::before{ content:""; width:24px; height:1px; background:currentColor; opacity:.6; }
#listen .bib-title{ font:400 clamp(48px,6vw,96px)/.92 var(--e-serif); letter-spacing:-.02em; color:var(--e-ink); background:none; -webkit-text-fill-color:currentColor; margin:0; }
#listen .bib-title b{ font-weight:400; font-style:italic; color:var(--e-gold); -webkit-text-fill-color:var(--e-gold); background:none; }
#listen .bib-facts{ display:flex; gap:44px; margin-top:28px; }
#listen .bib-facts b{ display:block; font:400 54px/1 var(--e-serif); color:var(--e-ink); }
#listen .bib-facts span{ display:block; margin-top:8px; font:500 11px/1.4 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-muted); }
#listen .bib-lead{ max-width:430px; margin:28px 0 0; font:400 17px/1.55 var(--e-ui); color:var(--e-muted); }
#listen .bib-map{ position:relative; width:100%; aspect-ratio:1; max-width:640px; justify-self:end; }
#listen .bib-map canvas{ display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
#listen .bib-map canvas:active{ cursor:grabbing; }
#listen .bib-map-tip{ position:absolute; left:0; top:0; pointer-events:none; opacity:0; transition:opacity .15s; padding:10px 14px; border:1px solid var(--e-line-2); border-radius:4px; background:rgba(6,8,15,.88); backdrop-filter:blur(8px); white-space:nowrap; }
#listen .bib-map-tip.on{ opacity:1; }
#listen .bib-map-tip b{ display:block; font:italic 400 20px/1.1 var(--e-serif); color:var(--e-ink); }
#listen .bib-map-tip span{ display:block; margin-top:4px; font:500 10px/1 var(--e-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--e-muted); }

/* ── Bloques y etiquetas ──────────────────────────────────────────────── */
#listen .bib-block{ margin-top:56px; padding:0; border:0; background:none; box-shadow:none; }
#listen .bib-step-label{ font:500 11px/1.4 var(--e-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--e-ink); margin:0 0 16px; }
#listen .bib-step-label::before, #listen .bib-step-label::after{ display:none; }
#listen .bib-block-head{ align-items:center; gap:16px; margin-bottom:16px; }

/* Voces: tres columnas de hilo fino */
#listen .bib-trans-grid{ gap:0; border-top:1px solid var(--e-line); border-bottom:1px solid var(--e-line); }
#listen .bib-trans{ position:relative; padding:22px 20px 22px 0; border:0; border-radius:0; background:none; box-shadow:none; text-align:left; transition:background .2s; }
#listen .bib-trans + .bib-trans{ padding-left:20px; border-left:1px solid var(--e-line); }
#listen .bib-trans:hover{ background:rgba(236,238,243,.025); transform:none; }
#listen .bib-trans-ico{ display:block; text-align:left; width:auto; height:auto; margin:0 0 14px; border:0; border-radius:0; background:none; box-shadow:none; color:var(--e-muted); }
#listen .bib-trans-ico .ic{ width:20px; height:20px; stroke-width:1.5; }
#listen .bib-trans h4{ font:400 28px/1 var(--e-serif); letter-spacing:-.01em; color:var(--e-ink); margin:0 0 8px; }
#listen .bib-trans p{ font-size:13.5px; line-height:1.45; color:var(--e-muted); margin:0; }
#listen .bib-trans p b{ color:var(--e-ink); font-weight:500; }
#listen .bib-trans-check{ display:none; }
#listen .bib-trans.active{ background:none; border-top:0; border-right:0; border-bottom:0; box-shadow:inset 0 -2px 0 var(--e-gold); }
#listen .bib-trans.active:first-child{ border-left:0; }
#listen .bib-trans.active h4{ color:var(--e-gold); font-style:italic; }
#listen .bib-trans.active .bib-trans-ico{ color:var(--e-gold); }
#listen .bib-trans-pill{ position:absolute; top:20px; right:16px; font:500 10px/1 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-gold); background:none; border:1px solid rgba(201,168,76,.45); padding:6px 9px; border-radius:40px; box-shadow:none; }

/* Buscar libro + testamentos */
#listen .bib-search{ background:none; border:0; border-bottom:1px solid var(--e-line-2); border-radius:0; padding:0 0 6px; box-shadow:none; color:var(--e-muted); min-width:220px; }
#listen .bib-search input{ background:none; color:var(--e-ink); font:400 15px/1.2 var(--e-ui); }
#listen .bib-search input::placeholder{ color:var(--e-muted); }
#listen .bib-search:focus-within{ border-color:var(--e-gold); }
/* Testamentos (Zax 2026-10-09, opción F): sin filtro; los 66 con títulos y dos atajos fijos que bajan a cada testamento */
#listen .bib-jumps{ position:sticky; top:var(--bib-nav-h,58px); z-index:5; display:flex; gap:6px; margin:6px -16px 4px; padding:10px 16px; background:rgba(6,8,15,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#listen .bib-jumps[hidden]{ display:none; }
#listen .bib-jump{ margin:0; padding:9px 14px; border:1px solid var(--e-line-2); border-radius:99px; background:none; box-shadow:none; color:#C4C8D2; font:500 13px/1 var(--e-ui); letter-spacing:0; text-transform:none; transition:border-color .15s,color .15s; }
#listen .bib-jump:hover{ color:var(--e-ink); border-color:rgba(236,238,243,.32); }
#listen .bib-jump.active{ border-color:var(--e-gold); color:var(--e-gold-soft); }
#listen .bib-jump:focus-visible{ outline:2px solid var(--e-gold); outline-offset:2px; }
#listen .bib-test-h{ grid-column:1/-1; margin:46px 0 6px; font:400 clamp(34px,5vw,52px)/1 var(--e-serif); letter-spacing:-.01em; color:var(--e-ink); text-align:left; }
#listen .bib-test-h:first-child{ margin-top:14px; }
#listen .bib-test-h i{ color:var(--e-gold); }
#listen .bib-test-h small{ display:block; margin-top:10px; font:500 10.5px/1.4 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-muted); }
#listen .bib-sec-h{ grid-column:1/-1; display:flex; align-items:baseline; gap:12px; margin:30px 0 4px; font:500 10.5px/1 var(--e-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--e-gold); }
#listen .bib-sec-h span{ color:var(--e-muted); }
#listen .bib-sec-h::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,168,76,.4),transparent); }
#listen .bib-test-h + .bib-sec-h{ margin-top:22px; }

/* Libros: índice editorial (nombre en serif + nº de capítulos en mono) */
#listen .bib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:0 28px; }
#listen .bib-book{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; width:100%; min-height:0; padding:13px 0; border:0; border-bottom:1px solid var(--e-line); border-radius:0; background:none; box-shadow:none; text-align:left; color:var(--e-ink); transition:color .2s, padding .25s cubic-bezier(.22,1,.36,1); }
#listen .bib-book .bk-n{ font:400 22px/1.1 var(--e-serif); letter-spacing:-.005em; }
#listen .bib-book .bk-c{ font:500 10.5px/1 var(--e-mono); letter-spacing:.08em; color:var(--e-muted); }
#listen .bib-book:hover{ background:none; color:#fff; padding-left:6px; transform:none; }
#listen .bib-book.active{ background:none; color:var(--e-gold); border-bottom-color:var(--e-gold); box-shadow:none; }
#listen .bib-book.active .bk-n{ font-style:italic; }
#listen .bib-book.active .bk-c{ color:var(--e-gold); }

/* Libro elegido */
#listen .bib-selected{ margin-top:24px; padding:18px 0; border:0; border-top:1px solid var(--e-line); border-bottom:1px solid var(--e-line); border-radius:0; background:none; box-shadow:none; gap:14px; align-items:baseline; }
#listen .bib-sel-ic{ display:none; }
#listen .bib-sel-name{ font:400 40px/1 var(--e-serif); font-style:italic; color:var(--e-gold); }
#listen .bib-sel-sub{ font:500 11px/1 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-muted); }
#listen .bib-sel-x{ margin-left:auto; width:36px; height:36px; border:1px solid var(--e-line-2); border-radius:50%; background:none; color:var(--e-muted); }
#listen .bib-sel-x:hover{ color:var(--e-ink); border-color:var(--e-ink); }

/* Capítulos: números en serif */
#listen .bib-ch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:0; border-top:1px solid var(--e-line); border-left:1px solid var(--e-line); }
#listen .bib-ch{ aspect-ratio:1; display:grid; place-items:center; border:0; border-right:1px solid var(--e-line); border-bottom:1px solid var(--e-line); border-radius:0; background:none; box-shadow:none; color:var(--e-muted); font:400 22px/1 var(--e-serif); transition:background .2s, color .2s; }
#listen .bib-ch:hover{ background:rgba(236,238,243,.04); color:var(--e-ink); transform:none; }
#listen .bib-ch.active{ background:var(--e-gold); color:var(--e-bg); font-style:italic; box-shadow:none; }

/* Escuchar: el único botón lleno */
#listen .bib-load{ width:auto; display:inline-flex; align-items:center; gap:12px; padding:18px 30px; border:0; border-radius:40px; background:var(--e-ink); color:var(--e-bg); font:600 15px/1 var(--e-ui); box-shadow:none; }
#listen .bib-load span{ background:none; color:inherit; box-shadow:none; width:auto; height:auto; }
#listen .bib-load:hover{ background:var(--e-gold); transform:none; }
#listen .bib-load svg{ width:18px; height:18px; }

/* ── Lector ───────────────────────────────────────────────────────────── */
#listen .bib-reader{ margin-top:64px; padding:0; border:0; border-top:1px solid var(--e-line); border-radius:0; background:none; box-shadow:none; }
#listen .bib-reader-head{ padding:28px 0 18px; border:0; background:none; align-items:flex-end; }
#listen .bib-reader-title{ font:400 clamp(44px,6vw,76px)/.95 var(--e-serif); letter-spacing:-.02em; color:var(--e-ink); background:none; -webkit-text-fill-color:currentColor; }
#listen .bib-reader-sub{ font:500 11px/1 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-muted); }
#listen .bib-navbtn{ width:40px; height:40px; border:1px solid var(--e-line-2); border-radius:50%; background:none; color:var(--e-ink); box-shadow:none; font:300 20px/1 var(--e-ui); }
#listen .bib-navbtn:hover{ border-color:var(--e-ink); background:none; }
#listen .chapter-nav-mode{ background:none; border:1px solid var(--e-line); border-radius:40px; box-shadow:none; color:var(--e-muted); }
#listen .chapter-nav-mode strong{ font:500 10px/1 var(--e-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--e-gold); }
#listen .chapter-nav-mode span{ color:var(--e-ink); }

/* Texto: se lee como un libro */
#listen .bib-verses{ max-width:680px; padding:8px 0 32px; border:0; background:none; box-shadow:none; }
#listen .verse-line{ font:400 22px/1.6 var(--e-serif); color:rgba(236,238,243,.88); margin:0 0 6px; padding:0; border:0; background:none; }
#listen .verse-number{ font:500 10.5px/1 var(--e-mono); color:var(--e-gold); vertical-align:5px; margin-right:8px; background:none; border:0; padding:0; min-width:0; }
/* RV 1909: número en otras Biblias donde la 1909 numera distinto (js/numeracion-rv1909.js) */
#listen .verse-number[data-otra]::after{ content:'(' attr(data-otra) ')'; margin-left:5px; color:var(--e-muted); letter-spacing:0; }
#listen .num-rv-nota{ font:400 12.5px/1.5 var(--e-sans, 'Inter', sans-serif); color:var(--e-muted); margin:0 0 14px; padding:6px 10px; border-left:2px solid rgba(201,168,76,.35); }
#listen .verse-line + .num-rv-nota{ margin:14px 0 0; }

/* Reproductor del capítulo */
#listen .bib-player{ position:sticky; bottom:12px; z-index:2; margin-top:12px; padding:16px 20px; border:1px solid var(--e-line); border-radius:4px; background:rgba(12,16,32,.92); backdrop-filter:blur(12px); box-shadow:0 20px 50px -20px rgba(0,0,0,.8); }
#listen .bib-time{ font:500 11px/1 var(--e-mono); color:var(--e-muted); }
#listen .bib-prog{ height:2px; background:var(--e-line-2); border-radius:0; }
#listen .bib-prog-fill{ background:var(--e-gold); border-radius:0; box-shadow:none; }
#listen .bib-speed{ gap:14px; padding:0; border:0; background:none; }
#listen .bib-speed button{ padding:6px 0; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; box-shadow:none; color:var(--e-muted); font:500 12px/1 var(--e-mono); }
#listen .bib-speed button.active{ background:none; color:var(--e-ink); border-bottom-color:var(--e-gold); }
#listen .bib-skip{ background:none; border:0; color:var(--e-muted); box-shadow:none; }
#listen .bib-skip:hover{ color:var(--e-ink); }
#listen .bib-bigplay{ width:60px; height:60px; border:0; border-radius:50%; background:var(--e-ink); color:var(--e-bg); box-shadow:0 0 0 7px rgba(236,238,243,.05); }
#listen .bib-bigplay:hover{ background:#fff; transform:none; }
#listen .bib-focus{ border:1px solid rgba(201,168,76,.45); border-radius:40px; background:none; color:var(--e-gold); box-shadow:none; font:500 13px/1 var(--e-ui); }
#listen .bib-focus:hover{ background:var(--e-gold); color:var(--e-bg); }
#listen .bib-actions{ border-top:1px solid var(--e-line); margin-top:14px; padding-top:12px; gap:22px; justify-content:flex-start; }
#listen .bib-act{ padding:4px 0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--e-muted); font:500 10.5px/1 var(--e-mono); letter-spacing:.14em; text-transform:uppercase; }
#listen .bib-act:hover{ color:var(--e-ink); background:none; }

@media (max-width:900px){
  #listen .bib-hero{ grid-template-columns:1fr; min-height:0; gap:0; }
  #listen .bib-map{ order:-1; justify-self:center; max-width:460px; margin:-8px auto -24px; }
}
@media (max-width:760px){
  #listen .bib-facts{ gap:22px; } #listen .bib-facts b{ font-size:40px; }
  #listen .bib-trans-grid{ grid-template-columns:1fr; }
  #listen .bib-trans + .bib-trans, #listen .bib-trans + .bib-trans.active{ padding-left:0; border-left:0; border-top:1px solid var(--e-line); }
  #listen .bib-grid{ grid-template-columns:1fr 1fr; gap:0 18px; }
  #listen .bib-book .bk-n{ font-size:19px; }
  #listen .bib-block-head{ flex-wrap:wrap; }
  #listen .bib-search{ min-width:0; flex:1 1 100%; }
  #listen .verse-line{ font-size:20px; }
}

/* Voces que vienen (Premium, aún sin activar): misma rejilla de hilo fino, atenuadas */
#listen .bib-soon-label{ margin-top:32px; color:var(--e-muted); }
#listen .bib-soon-grid{ grid-template-columns:repeat(2,1fr); }
/* Voces: 4 (SBLL, RVA, RV-SDV Masculina, RV-SDV Femenina) en dos filas de dos, sin tarjeta suelta */
@media (min-width:761px){
  #listen .bib-trans-grid:not(.bib-soon-grid){ grid-template-columns:repeat(2,1fr); }
  #listen .bib-trans-grid:not(.bib-soon-grid) .bib-trans:nth-child(odd){ padding-left:0; border-left:0; }
  #listen .bib-trans-grid:not(.bib-soon-grid) .bib-trans:nth-child(n+3){ border-top:1px solid var(--e-line); }
}
#listen .bib-trans-soon{ cursor:default; }
#listen .bib-trans-soon:hover{ background:none; }
#listen .bib-trans-soon h4{ color:var(--e-muted); }
@media (max-width:760px){ #listen .bib-soon-grid{ grid-template-columns:1fr; } }