/* ═══════════════════════════════════════════════════════════════════════════
   Modo lectura (Zax 2026-10-09, opción B de prototipos/modo-lectura.html)
   1) Botón «Leer» en el capítulo → pantalla completa solo con el texto.
   2) En el lector normal (móvil), al bajar se apartan menú, barra y reproductor.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --lec-fs:21px; }

/* El capítulo fluye en la página: antes iba en una caja con scroll propio (42vh) y en el móvil
   apenas se veían 4 versículos. Lectura viva, hermanos y compartir usan scrollIntoView: siguen igual. */
#listen .bib-verses.chapter-verses{ max-height:none; overflow:visible; padding-right:0; }

/* Botón «Leer» bajo la cabecera del capítulo */
#listen .lec-row{ display:flex; justify-content:flex-end; margin:-4px 0 14px; }
#listen .lec-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 15px 0 13px; margin:0; border:1px solid rgba(201,168,76,.7); border-radius:99px; background:rgba(201,168,76,.10); box-shadow:none; color:#E6D3A0; font:600 13.5px/1 "Inter",system-ui,sans-serif; letter-spacing:0; text-transform:none; cursor:pointer; transition:background .15s; }
#listen .lec-btn:hover{ background:rgba(201,168,76,.18); }
#listen .lec-btn svg{ width:17px; height:17px; }
#listen .lec-btn:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }

/* ── 2) Barras que se apartan al bajar (solo móvil / tableta) ── */
@media (max-width:900px){
  #navbar, #bottomNav, #audioPlayerBar, .ad-banner{ transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .22s; }
  body.lec-calma #navbar{ transform:translateY(-100%); }
  body.lec-calma #bottomNav{ transform:translateY(100%); }
  body.lec-calma #audioPlayerBar{ transform:translateY(calc(100% + var(--bottomnav-h,0px) + 20px)); opacity:0; pointer-events:none; }
  body.lec-calma .ad-banner{ transform:translateY(var(--bottomnav-h,0px)); }
}
.lec-hilo{ position:fixed; left:0; right:0; bottom:0; z-index:999; height:3px; background:rgba(236,238,243,.08); opacity:0; pointer-events:none; transition:opacity .2s; }
.lec-hilo i{ display:block; height:100%; width:0; background:#C9A84C; box-shadow:0 0 8px rgba(201,168,76,.7); }
body.lec-calma .lec-hilo.on{ opacity:1; }
body.ads-on .lec-hilo{ bottom:var(--ad-h,0px); }

/* ── 1) Pantalla de lectura ── */
.lec{ position:fixed; inset:0; z-index:1300; display:flex; flex-direction:column; background:#06080F; color:#ECEEF3; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .2s, transform .2s cubic-bezier(.22,1,.36,1), visibility 0s .2s; }
.lec.open{ opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .2s cubic-bezier(.22,1,.36,1); }
.lec button{ font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:0; }
.lec button:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }
.lec-top{ position:absolute; top:0; left:0; right:0; z-index:3; display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 10px; background:linear-gradient(#06080F 70%, rgba(6,8,15,0)); transition:transform .22s cubic-bezier(.22,1,.36,1), opacity .22s; }
.lec.calma .lec-top{ transform:translateY(-100%); opacity:0; }
.lec .lec-ib{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(236,238,243,.18); display:grid; place-items:center; color:#C4C8D2; flex:none; }
.lec .lec-ib svg{ width:17px; height:17px; }
.lec-ref{ flex:1; text-align:center; font:500 11px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; color:#868B99; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lec .lec-aa{ font:400 19px/1 "Instrument Serif",Georgia,serif; }
.lec-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.lec-body{ max-width:640px; margin:0 auto; padding:calc(76px + env(safe-area-inset-top)) 22px 140px; transition:transform .24s cubic-bezier(.22,1,.36,1), opacity .24s; }
.lec-body.sal-izq{ transform:translateX(-40px); opacity:0; }
.lec-body.sal-der{ transform:translateX(40px); opacity:0; }
.lec-body h2{ margin:0 0 6px; font:400 calc(var(--lec-fs) * 2.3)/1 "Instrument Serif",Georgia,serif; letter-spacing:-.01em; color:#ECEEF3; }
.lec-body h2 i{ color:#C9A84C; }
.lec-sub{ margin:0 0 30px; font:500 10.5px/1.4 "Geist Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#868B99; }
.lec-text{ font:400 var(--lec-fs)/1.75 "Instrument Serif",Georgia,serif; color:rgba(236,238,243,.92); text-wrap:pretty; }
.lec-text sup{ font:500 calc(var(--lec-fs) * .45)/1 "Geist Mono",ui-monospace,monospace; color:rgba(201,168,76,.85); margin:0 4px 0 2px; vertical-align:.6em; }
.lec-text.porverso > span{ display:block; margin-bottom:.45em; }
.lec-end{ display:flex; gap:10px; margin-top:44px; padding-top:24px; border-top:1px solid rgba(236,238,243,.10); }
.lec .lec-end button{ flex:1; min-width:0; padding:16px 14px; border:1px solid rgba(236,238,243,.18); border-radius:14px; text-align:left; }
.lec .lec-end button.sig{ border-color:rgba(201,168,76,.6); background:rgba(201,168,76,.08); }
.lec-end small{ display:block; margin-bottom:8px; font:500 10px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#868B99; }
.lec-end b{ display:block; font:400 22px/1.1 "Instrument Serif",Georgia,serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lec-end .sig b{ color:#E6D3A0; }
.lec .lec-end button[disabled]{ opacity:.3; cursor:default; }
.lec-hint{ margin:18px 0 0; text-align:center; font:500 10px/1.4 "Geist Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(134,139,153,.6); }

.lec-audio{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:12px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(rgba(6,8,15,0), #06080F 35%); }
.lec-audio[hidden]{ display:none; }
.lec-audio .lec-ln{ flex:1; height:2px; background:rgba(236,238,243,.12); border-radius:2px; overflow:hidden; }
.lec-audio .lec-ln i{ display:block; height:100%; width:0; background:#C9A84C; }
.lec-audio small{ font:500 10px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; color:#868B99; }
.lec .lec-audio .lec-ib{ width:34px; height:34px; background:#ECEEF3; color:#06080F; border:0; }
.lec .lec-audio .lec-ib svg{ width:13px; height:13px; }

.lec-sheet{ position:absolute; left:10px; right:10px; top:calc(62px + env(safe-area-inset-top)); z-index:4; max-width:420px; margin-left:auto; padding:16px; border:1px solid rgba(236,238,243,.18); border-radius:18px; background:rgba(16,19,30,.98); box-shadow:0 20px 50px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .15s, transform .15s, visibility 0s .15s; }
.lec-sheet.open{ opacity:1; visibility:visible; transform:none; transition:opacity .15s, transform .15s; }
.lec-row2{ display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid rgba(236,238,243,.10); }
.lec-row2:first-child{ padding-top:2px; }
.lec-row2:last-child{ border-bottom:0; padding-bottom:2px; }
.lec-row2 > span{ flex:1; font:500 14px/1.3 "Inter",system-ui,sans-serif; }
.lec-row2 > span small{ display:block; margin-top:3px; font:400 12px/1.3 "Inter",system-ui,sans-serif; color:#868B99; }
.lec-sz{ display:flex; align-items:center; border:1px solid rgba(236,238,243,.18); border-radius:99px; }
.lec .lec-sz button{ width:46px; height:38px; font:400 17px/1 "Instrument Serif",Georgia,serif; }
.lec .lec-sz button:first-child{ font-size:14px; border-right:1px solid rgba(236,238,243,.18); }
.lec .lec-sz button:last-child{ font-size:22px; }
.lec-seg{ display:flex; border:1px solid rgba(236,238,243,.18); border-radius:99px; padding:3px; }
.lec .lec-seg button{ padding:8px 11px; border-radius:99px; font:500 12px/1 "Inter",system-ui,sans-serif; color:#868B99; white-space:nowrap; }
.lec .lec-seg button.on{ background:rgba(201,168,76,.16); color:#E6D3A0; }
.lec .lec-sw{ width:46px; height:28px; border-radius:99px; background:rgba(236,238,243,.14); position:relative; transition:background .15s; flex:none; }
.lec .lec-sw::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#C4C8D2; transition:transform .15s cubic-bezier(.22,1,.36,1), background .15s; }
.lec .lec-sw[aria-checked="true"]{ background:rgba(201,168,76,.55); }
.lec .lec-sw[aria-checked="true"]::after{ transform:translateX(18px); background:#fff; }
@media (max-width:380px){ .lec-row2{ flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce){ .lec, .lec *, #navbar, #bottomNav, #audioPlayerBar{ transition:none !important; } }