/* ═══════════════════════════════════════════════════════════════════════════
   Ventanas · TODAS en el lenguaje de la portada v4 («Noche plata»)
   Modales (instalar, compartir, cuenta, modo de reproducción, descargas,
   listas…), aviso flotante y las capas a pantalla completa (Estudio,
   Podcast, Pasajes, Listas). Misma pieza visual que las ventanas Premium de
   css/enfoque.css. Solo aspecto: ningún id, onclick ni lógica cambia.
   Va la última, tras enfoque.css y biblia-v4.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --v4-bg:#06080F; --v4-bg-2:#0E1017; --v4-ink:#ECEEF3; --v4-muted:#868B99;
  --v4-line:rgba(236,238,243,.10); --v4-line-2:rgba(236,238,243,.18);
  --v4-gold:#C9A84C; --v4-gold-soft:#E6D3A0;
  --v4-serif:"Instrument Serif", Georgia, serif; --v4-ui:"Inter", system-ui, sans-serif; --v4-mono:"Geist Mono", ui-monospace, monospace;
}

/* ── Fondo y tarjeta ─────────────────────────────────────────────────── */
body .modal-overlay{ background:rgba(3,4,8,.78); backdrop-filter:blur(10px); overflow-y:auto; overscroll-behavior:contain; }
/* Centrada si cabe; si es más alta que la pantalla (venta del Enfoque en móvil) empieza arriba y se desplaza */
body .modal-overlay > .modal-card{ margin:auto; flex-shrink:0; }
body .modal-overlay .modal-card{
  background:var(--v4-bg-2) !important; border:1px solid var(--v4-line) !important; border-radius:4px !important;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85) !important; color:var(--v4-ink); font-family:var(--v4-ui);
  text-align:left; position:relative; padding:34px 30px 28px;
}
body .modal-overlay .modal-icon{ display:none; }
body .modal-overlay .modal-title{
  font:400 36px/1.02 var(--v4-serif) !important; letter-spacing:-.01em; text-align:left; margin:0 44px 0 0;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; text-transform:none;
}
body .modal-overlay .modal-subtitle{ font:400 15px/1.55 var(--v4-ui) !important; color:var(--v4-muted) !important; text-align:left; margin:14px 0 22px; font-style:normal; }
body .modal-overlay .modal-subtitle strong, body .modal-overlay .modal-subtitle b{ color:var(--v4-ink); font-weight:500; }
body .modal-overlay .modal-close{
  position:absolute; top:14px; right:14px; left:auto; width:36px; height:36px; display:grid; place-items:center; padding:0;
  border:1px solid var(--v4-line-2); border-radius:50%; background:none; color:var(--v4-muted); font:300 20px/1 var(--v4-ui); box-shadow:none;
}
body .modal-overlay .modal-close:hover{ color:var(--v4-ink); border-color:var(--v4-ink); }

/* Etiqueta en mono sobre el título (la ponen las ventanas que la tienen) */
body .modal-overlay .welcome-badge{
  display:block; width:auto; margin:0 0 12px; padding:0; border:0; background:none; box-shadow:none;
  font:500 10.5px/1 var(--v4-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--v4-gold);
}

/* ── Botones: oro lleno (el principal), hilo fino (el resto) ─────────── */
body .modal-overlay .share-btns{ gap:10px; }
body .modal-overlay .share-btn{
  border-radius:40px !important; padding:16px 22px !important; font:600 14.5px/1 var(--v4-ui) !important;
  box-shadow:none; transform:none;
}
body .modal-overlay .share-btn.gold{ background:var(--v4-gold) !important; color:var(--v4-bg) !important; border:0 !important; box-shadow:0 0 34px -8px rgba(201,168,76,.5) !important; }
body .modal-overlay .share-btn.gold:hover{ background:var(--v4-ink) !important; }
body .modal-overlay .share-btn.ghost, body .modal-overlay .share-btn.wa, body .modal-overlay .share-btn:not(.gold){
  background:none !important; color:var(--v4-ink) !important; border:1px solid var(--v4-line-2) !important; font-weight:500 !important;
}
body .modal-overlay .share-btn.ghost:hover, body .modal-overlay .share-btn.wa:hover{ border-color:var(--v4-ink) !important; }
body .modal-overlay .share-btn .ic{ width:17px; height:17px; }

/* ── Listas y pasos ──────────────────────────────────────────────────── */
body .modal-overlay .welcome-perks{ gap:0; margin:0 0 22px; padding:0; list-style:none; border-top:1px solid var(--v4-line); }
body .modal-overlay .welcome-perks li{ display:flex; align-items:flex-start; gap:12px; padding:13px 0 !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important; background:none !important; border-radius:0 !important; box-shadow:none !important; color:var(--v4-ink); font:400 14.5px/1.45 var(--v4-ui); text-align:left; }
body .modal-overlay .welcome-perks li .ic{ color:var(--v4-gold); flex-shrink:0; width:18px; height:18px; }

body .modal-overlay .ios-steps{ gap:0; margin:0 0 20px; border-top:1px solid var(--v4-line); }
body .modal-overlay .ios-step{ gap:16px; padding:15px 0; background:none; border:0; border-bottom:1px solid var(--v4-line); border-radius:0; color:var(--v4-ink); font:400 14.5px/1.5 var(--v4-ui); }
body .modal-overlay .ios-step strong{ color:var(--v4-ink); font-weight:600; }
body .modal-overlay .ios-step-num{ width:auto; height:auto; background:none; border-radius:0; box-shadow:none; color:var(--v4-gold); font:400 26px/1 var(--v4-serif); font-style:italic; min-width:18px; }
body .modal-overlay .ios-share-svg{ fill:var(--v4-ink); }
body .modal-overlay .ios-a2hs-row{ background:none; border:1px solid var(--v4-line-2); border-radius:4px; }
body .modal-overlay .ios-a2hs-txt{ color:var(--v4-ink); }
body .modal-overlay .ios-a2hs-plus{ border-color:var(--v4-line-2); color:var(--v4-ink); border-radius:4px; }
body .modal-overlay .ios-final-hint, body .modal-overlay .ios-note{ text-align:left; color:var(--v4-muted); font:400 13.5px/1.55 var(--v4-ui); }
body .modal-overlay .ios-app-chip{ background:var(--v4-bg); border:1px solid rgba(201,168,76,.45); color:var(--v4-gold); box-shadow:none; border-radius:8px; }
body .modal-overlay .ios-app-chip.big{ border-radius:14px; }
body .modal-overlay .install-done-check{ margin:0 0 18px; width:52px; height:52px; background:none; border:1px solid var(--v4-gold); color:var(--v4-gold); box-shadow:none; font:400 26px/1 var(--v4-ui); }
body .modal-overlay .install-done-icon{ align-items:flex-start; }
body .modal-overlay .install-done-name{ font:500 10.5px/1 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--v4-muted); }

/* Compartir: el QR en un marco fino */
body .modal-overlay .qr-box{ margin:0 0 22px; border-radius:4px; box-shadow:none; background:#F4F2EC; }

/* ── ¿Cómo quieres escuchar? ─────────────────────────────────────────── */
body .modal-overlay .modal-options{ gap:0; margin:0 0 18px; border-top:1px solid var(--v4-line); }
body .modal-overlay .modal-option{ gap:16px; padding:16px 4px; background:none !important; border:0; border-bottom:1px solid var(--v4-line); border-radius:0; transform:none !important; box-shadow:none; color:var(--v4-ink); }
body .modal-overlay .modal-option:hover{ background:rgba(236,238,243,.03) !important; }
body .modal-overlay .modal-option.recommended{ box-shadow:inset 0 -2px 0 var(--v4-gold); }
body .modal-overlay .modal-option-emoji{ color:var(--v4-muted); font-size:0; width:20px; display:grid; place-items:center; }
body .modal-overlay .modal-option-emoji .ic{ width:20px; height:20px; }
body .modal-overlay .modal-option.recommended .modal-option-emoji{ color:var(--v4-gold); }
body .modal-overlay .modal-option-title{ font:400 22px/1.1 var(--v4-serif); color:var(--v4-ink); }
body .modal-overlay .modal-option.recommended .modal-option-title{ font-style:italic; color:var(--v4-gold); }
body .modal-overlay .modal-option-badge{ background:none; border:1px solid rgba(201,168,76,.45); color:var(--v4-gold); font:500 9.5px/1 var(--v4-mono); letter-spacing:.16em; padding:5px 8px; border-radius:40px; font-style:normal; }
body .modal-overlay .modal-option-desc{ font:400 13.5px/1.45 var(--v4-ui); color:var(--v4-muted); }
body .modal-overlay .modal-footer{ text-align:left; font:400 12.5px/1.6 var(--v4-ui) !important; font-style:normal !important; color:var(--v4-muted) !important; }
body .modal-overlay .modal-footer label{ color:var(--v4-ink); font-family:var(--v4-ui); }

/* ── Límite de descargas ─────────────────────────────────────────────── */
body .modal-overlay .dl-limit-info{ text-align:left; background:none; border:0; border-top:1px solid var(--v4-line); border-bottom:1px solid var(--v4-line); border-radius:0; padding:14px 0; margin:0 0 18px; color:var(--v4-muted); font:400 14px/1.5 var(--v4-ui); }
body .modal-overlay .dl-limit-info strong{ color:var(--v4-ink); font-weight:500; }
body .modal-overlay .btn-share-bonus, body .modal-overlay .btn-upgrade-cta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 10px; padding:16px 22px; border-radius:40px;
  font:600 14px/1.2 var(--v4-ui); box-shadow:none; transform:none;
}
body .modal-overlay .btn-share-bonus{ background:var(--v4-gold) !important; color:var(--v4-bg) !important; border:0 !important; }
body .modal-overlay .btn-upgrade-cta{ background:none !important; color:var(--v4-ink) !important; border:1px solid var(--v4-line-2) !important; }
body .modal-overlay .upgrade-badge{ background:none; border:1px solid var(--v4-line-2); color:var(--v4-muted); font:500 9.5px/1 var(--v4-mono); letter-spacing:.14em; text-transform:uppercase; padding:5px 8px; border-radius:40px; }

/* ── Añadir a una lista ──────────────────────────────────────────────── */
body .modal-overlay .alm-lists{ border-top:1px solid var(--v4-line); }
body .modal-overlay .alm-lists > *{ background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important; border-radius:0 !important; color:var(--v4-ink) !important; font-family:var(--v4-ui); }
body .modal-overlay .alm-new{ margin-top:18px; gap:10px; }
body .modal-overlay .alm-new input, body .modal-overlay input[type=text], body .modal-overlay input[type=email]{
  background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line-2) !important; border-radius:0 !important;
  color:var(--v4-ink) !important; font:400 15px/1.3 var(--v4-ui) !important; padding:10px 2px !important; box-shadow:none !important; outline:0;
}
body .modal-overlay input:focus{ border-bottom-color:var(--v4-gold) !important; }
body .modal-overlay .alm-new button{ background:none; border:1px solid var(--v4-line-2); border-radius:40px; color:var(--v4-ink); font:500 13px/1 var(--v4-ui); padding:10px 18px; }

/* ── Mi cuenta (lleva estilos en línea: se anulan aquí) ──────────────── */
#accountModal h3{ font:400 34px/1.05 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 44px 10px 0 !important; }
#accountModal h4{ font:500 10.5px/1 var(--v4-mono) !important; letter-spacing:.18em; text-transform:uppercase; color:var(--v4-muted) !important; margin:18px 0 10px !important; }
#accountModal p{ color:var(--v4-muted) !important; font-family:var(--v4-ui); }
#accountModal #accountPlan{ color:var(--v4-gold) !important; font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; }
#accountModal .signout-link{ background:none; border:0; color:var(--v4-muted); font:500 10.5px/1 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px; }
#accountModal #accountVerses > *{ background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important; border-radius:0 !important; }

/* ── Aviso flotante ──────────────────────────────────────────────────── */
body .toast{ background:var(--v4-bg-2) !important; color:var(--v4-ink) !important; border:1px solid var(--v4-line-2) !important; border-radius:40px !important; box-shadow:0 20px 50px -20px rgba(0,0,0,.8) !important; font:500 14px/1.3 var(--v4-ui) !important; }

/* ── Capas a pantalla completa: mismo cielo casi negro ───────────────── */
body .sb-overlay{ background:rgba(3,4,8,.72); }
body .sb-panel{ background:var(--v4-bg) !important; border-left:1px solid var(--v4-line) !important; color:var(--v4-ink); }
body .podcast-overlay, body .podcast-player, body .pasajes-overlay, body .list-overlay{ background:var(--v4-bg) !important; }

/* ═══ Capas grandes: Podcast, reproductor, Pasajes, Listas, Estudio, Buscar ═══
   Mismas reglas que la portada: títulos en serif fina, etiquetas en mono gris,
   nada de círculos de oro degradado ni cajas muy redondeadas. */

/* Títulos: Instrument Serif, sin negrita */
:is(.pf-title,.pj-col-name,.pj-cols-headline,.pj-trk-name,.pod-info-title,.pod-section-head h3,.pod-title,.pp-cover-title,.pp-title,.prc-title,.sb-panel-ref,.sb-title,.pod-empty h4,.sp-conn-ref,.ls-hero h1,.ls-hero h2,.ls-hero h3){
  font-family:var(--v4-serif) !important; font-weight:400 !important; letter-spacing:-.01em !important; text-transform:none !important;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
:is(.pod-title,.pj-cols-headline,.sb-title){ font-size:clamp(40px,7vw,64px) !important; line-height:.95 !important; }
:is(.pf-title,.pp-title){ font-size:30px !important; line-height:1.05 !important; }
:is(.pod-section-head h3,.pod-info-title,.sb-panel-ref){ font-size:26px !important; line-height:1.05 !important; }
:is(.prc-title,.pj-col-name,.pj-trk-name){ font-size:19px !important; line-height:1.15 !important; }

/* Etiquetas: Geist Mono, mayúsculas, gris */
:is(.ls-hero-badge,.ls-row-ref,.pf-ref,.pj-cols-eyebrow,.pod-eyebrow,.pod-info-ref,.pp-cover-ref,.pp-eyebrow,.prc-ref,.sb-block-label,.sb-block-t,.sb-curated-label,.sb-eyebrow,.sb-sep,.sp-apply-l,.sp-bigidea-l,.sp-card-l,.sp-cell-l,.sp-refline,.sp-ver-l,.sp-word-lang,.sp-word-why-l,.pj-nav-title,.pj-trk-n,.sb-panel-test){
  font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase !important;
  color:var(--v4-muted) !important; opacity:1 !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
.pj-nav-title{ color:var(--v4-ink) !important; }

/* Subtítulos y pistas: Inter normal, gris (fuera la Lora cursiva) */
:is(.ls-cta,.ls-empty,.pj-cols-sub,.pj-player-hint,.pj-trk-hint,.pj-trk-sub,.pod-empty p,.pod-section-sub,.pod-sub,.sb-block-s,.sb-intent-s,.sb-results-hint,.sb-sub,.sp-authorline,.sp-hint,.sp-note,.sp-soon,.sp-word-or,.sp-word-or2,.sp-q-t,.sp-voice-q){
  font-family:var(--v4-ui) !important; font-style:normal !important; color:var(--v4-muted) !important;
}
/* Lectura larga del Estudio: Inter cómoda; versículos citados en serif */
:is(.sp-teach,.sp-apply,.sp-prayer,.sp-card-p,.sp-cell-v,.sp-conn-tx,.sp-word-why,.sp-bigidea){ font-family:var(--v4-ui) !important; font-style:normal !important; color:rgba(236,238,243,.86) !important; }
:is(.sp-verse,.sp-ver-t,.sp-voice-a){ font-family:var(--v4-serif) !important; font-style:normal !important; font-size:22px !important; line-height:1.45 !important; color:var(--v4-ink) !important; }
.sp-teach::first-letter{ font-family:var(--v4-serif) !important; font-weight:400 !important; color:var(--v4-gold) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }

/* Cajas: hilo fino, esquinas casi rectas, sin brillos */
:is(.pod-featured,.pod-card,.pod-ep,.pod-empty,.sp-verse,.sp-bigidea,.sp-apply,.sp-prayer,.sp-cell,.sp-card,.sp-conn){
  border-radius:4px !important; background:none !important; border:1px solid var(--v4-line) !important; box-shadow:none !important;
}
:is(.pod-featured,.pod-card,.pod-ep):hover{ border-color:var(--v4-line-2) !important; transform:none !important; }
.sp-apply{ border-width:0 0 0 2px !important; border-color:var(--v4-gold) !important; }
:is(.prc-cover,.pf-cover,.pod-thumb,.pj-col-card,.pp-cover){ border-radius:4px !important; }
:is(.pod-btn,.pp-chip){ border-radius:40px !important; background:none !important; border:1px solid var(--v4-line-2) !important; color:var(--v4-ink) !important; font-family:var(--v4-ui) !important; }
:is(.pod-btn.primary,.ls-act.gold){ background:var(--v4-gold) !important; color:var(--v4-bg) !important; border:0 !important; filter:none !important; }

/* Botones de play: círculo claro (como en la portada), no oro degradado */
:is(.pf-play,.pj-btn-play,.pod-ep-play,.pp-play,.prc-play,.pcf-play){
  background:var(--v4-ink) !important; color:var(--v4-bg) !important; box-shadow:0 0 0 6px rgba(236,238,243,.05) !important; filter:none !important;
}
:is(.pf-play,.pj-btn-play,.pod-ep-play,.pp-play,.prc-play,.pcf-play) svg{ fill:var(--v4-bg) !important; color:var(--v4-bg) !important; }
.pf-badge{ background:none !important; border:1px solid rgba(201,168,76,.45) !important; color:var(--v4-gold) !important; font:500 9.5px/1 var(--v4-mono) !important; letter-spacing:.16em !important; border-radius:40px !important; }
.prc-badge{ background:rgba(6,8,15,.7) !important; font:500 10px/1 var(--v4-mono) !important; border-radius:40px !important; }

/* Fuera los adornos viejos: emblema dorado del podcast, auras, icono del panel */
.pod-emblem, .sb-panel-icn{ display:none !important; }
.podcast-overlay .pod-bg, .podcast-player .pp-bg{ background:none !important; }
:is(.pod-eyebrow,.pod-title,.pod-sub){ align-self:flex-start !important; text-align:left !important; }
.pp-seek{ height:2px !important; border-radius:0 !important; background:var(--v4-line-2) !important; }
.pp-seek-fill{ background:var(--v4-gold) !important; border-radius:0 !important; }
.pp-times{ font:500 11px/1 var(--v4-mono) !important; color:var(--v4-muted) !important; }

/* Barras superiores de las capas */
.pj-nav{ background:rgba(6,8,15,.85) !important; backdrop-filter:blur(12px); border-bottom:1px solid var(--v4-line) !important; }
.pj-nav-back{ color:var(--v4-ink) !important; font-family:var(--v4-ui) !important; }
:is(.pj-nav-close,.sb-panel-x){ width:36px !important; height:36px !important; border-radius:50% !important; border:1px solid var(--v4-line-2) !important; background:none !important; color:var(--v4-muted) !important; }
.sb-panel-top{ background:rgba(6,8,15,.94) !important; backdrop-filter:blur(12px); border-bottom:1px solid var(--v4-line) !important; }
.sp-tab{ color:var(--v4-muted) !important; font-family:var(--v4-ui) !important; font-weight:500 !important; }
.sb-tabs-arrow{ color:var(--v4-muted) !important; }
.sp-tab.active{ color:var(--v4-ink) !important; border-bottom-color:var(--v4-gold) !important; }

/* Ayuda del micrófono (Buscar por voz) */
#micHelpModal .mic-steps{ margin:0; padding:0 0 0 20px; display:grid; gap:12px; font:400 15px/1.55 var(--v4-ui); color:rgba(236,238,243,.86); text-align:left; }
#micHelpModal .mic-steps b{ color:var(--v4-ink); font-weight:500; }
#micHelpModal .mic-steps li::marker{ color:var(--v4-gold); font-family:var(--v4-mono); }
#micHelpModal .mic-code{ margin:18px 0 0; font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.08em; color:var(--v4-muted); }
#micHelpModal .mic-code:empty{ display:none; }
#micHelpModal .mic-kbd{ width:100%; height:50px; border:0; border-radius:40px; background:var(--v4-gold); color:var(--v4-bg); font:600 15px/1 var(--v4-ui); cursor:pointer; margin:4px 0 18px; }
#micHelpModal .mic-more summary{ cursor:pointer; font:500 13px/1.4 var(--v4-ui); color:var(--v4-muted); margin-bottom:12px; text-align:left; }

/* Estudio: volver al versículo de origen tras abrir una Conexión */
.sb-panel-back{ display:inline-flex; align-items:center; gap:4px; margin:0 0 8px -4px; padding:5px 12px 5px 6px; border:1px solid rgba(201,168,76,.32); border-radius:40px; background:rgba(201,168,76,.08); color:var(--v4-gold); font:500 12px/1 var(--v4-ui); cursor:pointer; max-width:100%; white-space:nowrap; transition:background .15s,border-color .15s; }
.sb-panel-id{ min-width:0; flex:1; } .sb-panel-id > div{ min-width:0; flex:1; }
.sb-panel-back[hidden]{ display:none; }
.sb-panel-back b{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-panel-back .ic{ width:14px; height:14px; stroke-width:2.2; flex:none; }
.sb-panel-back:hover{ background:rgba(201,168,76,.16); border-color:rgba(201,168,76,.5); }
.sb-panel-back:focus-visible{ outline:2px solid var(--v4-gold); outline-offset:2px; }