/* ═══════════════════════════════════════════════════════════════════════════
   Marco común · menú superior, barra inferior (app instalada), reproductor
   flotante y pie, en el lenguaje de la portada v4 («Noche plata»).
   Va la ÚLTIMA hoja (tras ventanas-v4.css). Usa los tokens --v4-* de
   ventanas-v4.css. Solo aspecto: ids y onclick siguen siendo los de app.js.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{ --mv-nav-h:68px; --mv-ease:cubic-bezier(.22,1,.36,1); }
@media (max-width:900px){ :root{ --mv-nav-h:58px; } }
@media (display-mode: standalone){ :root{ --bottomnav-h:64px; } }

/* ── Menú superior ───────────────────────────────────────────────────── */
body #navbar{
  box-sizing:border-box; left:0; right:0; width:100%;
  height:var(--mv-nav-h); padding:0 clamp(16px,4vw,56px) !important;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--v4-line) !important; box-shadow:none !important;
}
/* El desenfoque va en una capa aparte: en el propio #navbar convertiría la barra en el contenedor
   de los position:fixed y el menú móvil quedaría atrapado en sus 58 px */
body #navbar::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb, var(--v4-bg) 80%, transparent);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
}
body #navbar .nav-logo{ display:flex; align-items:center; gap:10px; color:var(--v4-ink); text-decoration:none; flex:none; }
body #navbar .nav-logo .logo-text{ font:600 12px/1 var(--v4-ui) !important; letter-spacing:.3em !important; text-transform:uppercase; }

/* Enlaces (escritorio) */
body #navbar .nav-links{ gap:34px; margin:0 auto 0 0; padding-left:clamp(16px,3vw,48px); }
body #navbar .nav-links a{
  font:400 14px/1 var(--v4-ui) !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--v4-muted) !important; padding:6px 0; background:none !important; white-space:nowrap;
}
body #navbar .nav-links a::after{ display:none; }
body #navbar .nav-links a:hover, body #navbar .nav-links a.active{ color:var(--v4-ink) !important; font-weight:400 !important; }
body #navbar .nav-links .nl-menu-solo{ display:none; }
body #navbar .nav-links .badge-new{
  margin-left:6px; padding:3px 7px; border-radius:20px; border:0; background:var(--v4-gold); color:var(--v4-bg);
  font:600 9px/1 var(--v4-mono); letter-spacing:.1em; text-transform:uppercase; vertical-align:2px;
}

/* Modo Enfoque: el único dorado del menú, con un punto que late */
body #navbar a.nav-enf{ display:inline-flex !important; align-items:center; gap:9px; color:var(--v4-gold) !important; }
body #navbar a.nav-enf:hover{ color:var(--v4-gold-soft) !important; }
body #navbar a.nav-enf i{ width:6px; height:6px; border-radius:50%; background:var(--v4-gold); box-shadow:0 0 12px var(--v4-gold); animation:mvLatido 4s ease-in-out infinite; }
@keyframes mvLatido{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.45; transform:scale(.7); } }

/* Derecha: Entrar · Crear cuenta · perfil · menú */
body #navbar .nav-right{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-acceso{ display:flex; align-items:center; gap:6px; }
.nav-entrar{ background:none !important; border:0 !important; box-shadow:none !important; font:400 14px/1 var(--v4-ui); color:var(--v4-muted); padding:0 10px; text-decoration:none; transition:color .18s; }
.nav-entrar:hover{ color:var(--v4-ink); }
.nav-cuenta{
  display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:40px; border:1px solid var(--v4-line-2);
  color:var(--v4-ink); font:500 13.5px/1 var(--v4-ui); text-decoration:none; white-space:nowrap;
  transition:border-color .18s, background .18s, color .18s;
}
.nav-cuenta:hover{ background:var(--v4-ink); color:var(--v4-bg); border-color:var(--v4-ink); }
.nav-perfil{
  width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, var(--v4-gold) 55%, transparent); color:var(--v4-gold-soft, #E6D3A0);
  background:color-mix(in srgb, var(--v4-gold) 10%, transparent);
  display:none; place-items:center; transition:border-color .18s, color .18s;
}
.nav-perfil svg{ width:18px; height:18px; stroke-width:1.8; }
.nav-perfil:hover, .nav-perfil.active{ border-color:var(--v4-gold); color:var(--v4-gold); }
/* Con sesión iniciada (cuenta.js esconde Entrar/Crear cuenta) se ve el círculo del perfil */
#navCrearCuentaItem[style*="none"] ~ .nav-perfil{ display:grid; }
body #navbar a.nav-enf-m{ display:none !important; text-decoration:none; }

/* Botón de menú (web en móvil) */
body #navbar .mobile-menu-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--v4-line-2) !important; background:none !important;
  align-items:center; justify-content:center; padding:0; box-shadow:none !important;
}
body #navbar .mobile-menu-btn .mb-bars{ width:16px; gap:4px; }
body #navbar .mobile-menu-btn .mb-bars span{ width:16px; height:1.5px; margin:0; background:var(--v4-ink) !important; border-radius:2px; transition:transform .2s, opacity .2s; }
/* «×» al abrir: las barras están a 5.5 px (1.5 + 4 de hueco); las de app.css asumían otro espaciado y salía «>» */
body #navbar .mobile-menu-btn.active .mb-bars span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body #navbar .mobile-menu-btn.active .mb-bars span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

@media (max-width:1100px){ .nav-entrar{ padding:0 6px; } body #navbar .nav-links{ gap:20px; } }

html, body{ overflow-x:clip; }

/* Móvil y tableta: logo + «Modo Enfoque» + perfil (+ menú en la web) */
@media (max-width:1023px){
  body #navbar a.nav-enf-m{ display:inline-flex !important; font:500 12.5px/1 var(--v4-ui) !important; height:36px; padding:0 14px; border-radius:40px;
    border:1px solid color-mix(in srgb, var(--v4-gold) 50%, transparent); text-decoration:none; }
  .nav-acceso{ display:none !important; }
  .nav-perfil{ display:grid; width:36px; height:36px; }
  body #navbar .mobile-menu-btn{ width:36px; height:36px; }
  body #navbar .nav-logo .logo-text{ font-size:10.5px !important; letter-spacing:.22em !important; }
  body #navbar .nav-right{ gap:8px; }

  /* Menú desplegable de la web: lista editorial a pantalla completa */
  body #navbar .nav-links{
    position:fixed !important; top:var(--mv-nav-h) !important; left:0; right:0; bottom:0; height:auto;
    margin:0; padding:18px 20px 40px !important; gap:0; flex-direction:column; align-items:stretch; overflow-y:auto;
    background:var(--v4-bg) !important; backdrop-filter:none; border:0 !important; box-shadow:none !important;
  }
  body #navbar .nav-links .nl-menu-solo{ display:block; }
  body #navbar .nav-links .nl-enf{ display:none; }
  body #navbar .nav-links li{ width:100%; border-bottom:1px solid var(--v4-line); }
  body #navbar .nav-links a{
    display:flex !important; align-items:baseline; padding:20px 2px !important; border:0 !important;
    font:400 34px/1 var(--v4-serif) !important; letter-spacing:-.01em !important; color:var(--v4-ink) !important;
  }
  body #navbar .nav-links a.active{ color:var(--v4-gold) !important; font-style:italic; }
  body #navbar .nav-links .badge-new{ margin-left:12px; align-self:center; }
}
/* Web en móvil: «Mi perfil» va dentro del menú; en la app instalada (sin menú) queda el círculo */
@media (max-width:1023px) and (display-mode:browser){ .nav-perfil{ display:none !important; } }
@media (max-width:380px){ .nav-enf-m{ padding:0 11px; font-size:11.5px !important; } .nav-enf-m i{ display:none; } }

/* ── Barra inferior (solo app instalada) ─────────────────────────────── */
body .bottom-nav{
  height:var(--bottomnav-h); background:color-mix(in srgb, var(--v4-bg) 92%, transparent) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--v4-line) !important; box-shadow:none !important;
}
body .bottom-nav .bn-item{ color:var(--v4-muted); font:500 9.5px/1 var(--v4-mono); letter-spacing:.12em; text-transform:uppercase; gap:6px; }
body .bottom-nav .bn-item::before{ top:-1px; width:18px; height:1.5px; border-radius:0; background:var(--v4-gold); }
body .bottom-nav .bn-item .bn-ico{ width:auto; height:22px; background:none !important; transform:none !important; }
body .bottom-nav .bn-item .bn-ico svg{ width:20px; height:20px; stroke-width:1.5; filter:none !important; }
body .bottom-nav .bn-item.active{ color:var(--v4-ink); }
body .bottom-nav .bn-item.active .bn-ico{ color:var(--v4-gold); }
body .bottom-nav .bn-item.active .bn-label{ font-weight:500; }
body .bottom-nav .bn-dot{ background:var(--v4-gold) !important; box-shadow:0 0 8px var(--v4-gold); }

/* ── Reproductor flotante ────────────────────────────────────────────── */
body .audio-player-bar{
  background:color-mix(in srgb, var(--v4-bg-2) 94%, transparent) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:0 !important; border-top:1px solid var(--v4-line) !important; box-shadow:0 -20px 40px -20px rgba(0,0,0,.6) !important;
  padding:14px clamp(16px,4vw,56px) !important;
}
body .audio-player-bar .player-inner{ max-width:1440px; gap:16px; }
/* La línea de avance va arriba, de lado a lado, como en la portada */
body .audio-player-bar .player-info{ position:static; min-width:0; flex:1; }
body .audio-player-bar .player-progress{
  position:absolute; top:-1px; left:0; right:0; height:2px; margin:0; border-radius:0; background:transparent !important; cursor:pointer;
}
body .audio-player-bar .player-progress::before{ content:''; position:absolute; left:0; right:0; top:-8px; bottom:-8px; }
body .audio-player-bar .player-progress-fill{ height:100%; border-radius:0; background:var(--v4-gold) !important; box-shadow:0 0 10px var(--v4-gold); }
body .audio-player-bar .player-ref-text{ font:400 21px/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body .audio-player-bar .player-sub{ font:500 10px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body .audio-player-bar .player-next-hint{ font:italic 400 13px/1.3 var(--v4-serif); color:var(--v4-muted); }
body .audio-player-bar .player-time{ font:500 11px/1 var(--v4-mono) !important; letter-spacing:.1em; color:var(--v4-muted) !important; }
body .audio-player-bar .player-wave .wave-bar{ width:2px; background:var(--v4-gold); }
body .audio-player-bar .player-loading{ border-color:var(--v4-line-2); border-top-color:var(--v4-gold); }

/* Botones: círculos de hilo; el de reproducir, macizo */
body .audio-player-bar .player-nav-btn{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--v4-line) !important; background:none !important;
  color:var(--v4-ink) !important; display:grid; place-items:center; padding:0; transition:border-color .18s;
}
body .audio-player-bar .player-nav-btn:hover{ border-color:var(--v4-ink) !important; }
body .audio-player-bar .player-nav-btn svg{ width:14px; height:14px; }
body .audio-player-bar .player-play-btn{
  width:48px; height:48px; border-radius:50%; background:var(--v4-ink) !important; color:var(--v4-bg) !important;
  border:0 !important; box-shadow:none !important; display:grid; place-items:center; transition:background .18s;
}
body .audio-player-bar .player-play-btn:hover{ background:var(--v4-gold) !important; }
body .audio-player-bar .player-play-btn svg{ width:16px; height:16px; fill:currentColor !important; }
body .audio-player-bar .player-play-btn #playIcon{ margin-left:2px; }
body .audio-player-bar .player-focus-btn{
  height:40px; padding:0 16px; border-radius:40px; background:none !important;
  border:1px solid color-mix(in srgb, var(--v4-gold) 50%, transparent) !important; color:var(--v4-gold) !important;
  font:500 12.5px/1 var(--v4-ui);
}
body .audio-player-bar .player-focus-btn svg{ fill:none !important; stroke:currentColor !important; width:15px; height:15px; }
body .audio-player-bar .player-focus-btn.active{ background:var(--v4-gold) !important; color:var(--v4-bg) !important; }
body .audio-player-bar .player-close{ color:var(--v4-muted); font-size:15px; width:36px; height:36px; }
body .audio-player-bar .player-close:hover{ color:var(--v4-ink); }

/* Móvil: tarjeta flotante con margen, encima de la barra inferior */
@media (max-width:768px){
  body .audio-player-bar{
    left:8px !important; right:8px !important; bottom:calc(var(--bottomnav-h) + 8px + env(safe-area-inset-bottom) * 0) !important;
    border:1px solid var(--v4-line-2) !important; border-radius:16px; padding:10px 10px 10px 14px !important;
    box-shadow:0 18px 40px -12px rgba(0,0,0,.8) !important; overflow:hidden;
  }
  body.ads-on .audio-player-bar{ bottom:calc(var(--bottomnav-h) + var(--ad-h) + 8px) !important; }
  body .audio-player-bar .player-inner{ gap:8px; }
  body .audio-player-bar .player-progress{ top:auto; bottom:0; }
  body .audio-player-bar .player-ref-text{ font-size:18px !important; }
  body .audio-player-bar .player-wave, body .audio-player-bar .player-time{ display:none; }
  body .audio-player-bar .player-sub{ display:block; font-size:9px !important; }
  body .audio-player-bar .player-nav-btn{ width:34px; height:34px; border:0 !important; }
  body .audio-player-bar .player-play-btn{ width:42px; height:42px; }
  body .audio-player-bar .player-focus-btn{ width:34px; height:34px; padding:0; justify-content:center; border:0 !important; }
  body .audio-player-bar .player-focus-btn .pf-label{ display:none; }
  body .audio-player-bar .player-close{ width:28px; padding:0; }
}
@media (max-width:360px){ body .audio-player-bar #playerPrevBtn{ display:none; } }

/* ── Pie ─────────────────────────────────────────────────────────────── */
footer.foot-v4{
  background:var(--v4-bg) !important; border-top:1px solid var(--v4-line) !important;
  padding:72px clamp(20px,5vw,72px) calc(48px + var(--bottomnav-h)) !important;
  color:var(--v4-muted); font:400 14px/1.55 var(--v4-ui); text-align:left;
}
.foot-v4 .fv-wrap{ max-width:1440px; margin:0 auto; }
.foot-v4 a{ color:inherit; text-decoration:none; }
.foot-v4 .fv-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid var(--v4-line); }
.foot-v4 .fv-logo{ font:600 12px/1 var(--v4-ui) !important; letter-spacing:.3em; color:var(--v4-ink); }
.foot-v4 .fv-verse{ margin:22px 0 0; max-width:320px; font:italic 400 19px/1.4 var(--v4-serif); color:var(--v4-ink); }
.foot-v4 .fv-verse span{ display:block; margin-top:10px; font:500 10.5px/1.4 var(--v4-mono); font-style:normal; letter-spacing:.16em; text-transform:uppercase; color:var(--v4-gold); }
.foot-v4 .fv-social{ display:flex; gap:10px; margin-top:26px; }
.foot-v4 .fv-social a{ width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--v4-line-2); border-radius:50%; color:var(--v4-ink); transition:border-color .18s, color .18s; }
.foot-v4 .fv-social a:hover{ border-color:var(--v4-gold); color:var(--v4-gold); }
.foot-v4 .fv-social svg{ width:19px; height:19px; }
.foot-v4 nav.fv-col{ position:static; inset:auto; width:auto; height:auto; padding:0; margin:0; z-index:auto; background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; }
.foot-v4 .fv-col{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:12px; text-align:left; }
.foot-v4 .fv-col > span{ font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--v4-ink); margin-bottom:6px; }
.foot-v4 .fv-col a{ width:fit-content; transition:color .18s; }
.foot-v4 .fv-col a:hover{ color:var(--v4-ink); }
.foot-v4 .fv-col a.gold{ color:var(--v4-gold); }
.foot-v4 .fv-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; font-size:13px; }
.foot-v4 .fv-bottom a.u{ border-bottom:1px solid var(--v4-line-2); }
.foot-v4 .footer-credit{ margin:0; font:inherit; color:inherit; }
.foot-v4 .footer-credit a{ color:var(--v4-gold) !important; font-weight:600; }
@media (max-width:900px){
  .foot-v4 .fv-top{ grid-template-columns:1fr 1fr; gap:40px 24px; }
  .foot-v4 .fv-brand{ grid-column:1 / -1; }
}
/* Con el reproductor abierto, el pie deja sitio para no quedar tapado */
body:has(.audio-player-bar.visible) footer.foot-v4{ padding-bottom:calc(140px + var(--bottomnav-h)) !important; }

@media (prefers-reduced-motion:reduce){ body #navbar a.nav-enf i{ animation:none; } }

/* Opciones del lector, ahora en la barra de abajo (velocidad, descargar, copiar) */
body .audio-player-bar .player-extra{ display:flex; align-items:center; gap:18px; padding-left:18px; margin-left:4px; border-left:1px solid var(--v4-line); }
body .audio-player-bar .player-speed{ display:flex; gap:12px; }
body .audio-player-bar .player-speed button{ background:none; border:0; border-bottom:1px solid transparent; padding:5px 0; cursor:pointer; font:500 11px/1 var(--v4-mono); letter-spacing:.06em; color:var(--v4-muted); transition:color .18s, border-color .18s; }
body .audio-player-bar .player-speed button:hover{ color:var(--v4-ink); }
body .audio-player-bar .player-speed button.active{ color:var(--v4-ink); border-bottom-color:var(--v4-gold); }
body .audio-player-bar .player-speed button.bib-speed-off{ opacity:.35; }
body .audio-player-bar .player-act{ width:36px; height:36px; display:grid; place-items:center; padding:0; border:1px solid var(--v4-line); border-radius:50%; background:none; color:var(--v4-muted); cursor:pointer; font-size:0; transition:color .18s, border-color .18s; }
body .audio-player-bar .player-act:hover{ color:var(--v4-ink); border-color:var(--v4-ink); }
body .audio-player-bar .player-act:disabled{ opacity:.45; cursor:default; }
body .audio-player-bar .player-act .ic, body .audio-player-bar .player-act svg{ width:15px; height:15px; margin:0; }
body .audio-player-bar .player-act .loading-spinner{ width:14px; height:14px; }
@media (max-width:900px){
  /* en el móvil, segunda fila dentro de la tarjeta para no apretar el título */
  body .audio-player-bar .player-inner{ flex-wrap:wrap; row-gap:8px; }
  body .audio-player-bar .player-extra{ order:10; flex-basis:100%; justify-content:space-between; gap:10px; padding:8px 0 0; margin:0; border-left:0; border-top:1px solid var(--v4-line); }
  body .audio-player-bar .player-speed{ gap:14px; margin-right:auto; }
  body .audio-player-bar .player-act{ width:32px; height:32px; }
}
/* «YouTube» en el menú: lleva a la escena «En YouTube» de Inicio; el logo en oro */
body #navbar .nav-links .nav-yt{ display:inline-flex; align-items:center; gap:8px; }
body #navbar .nav-links .nav-yt svg{ width:17px; height:17px; fill:var(--v4-gold); flex:none; }
@media (max-width:1023px){ body #navbar .nav-links .nav-yt{ gap:14px; } body #navbar .nav-links .nav-yt svg{ width:.75em; height:.75em; } }
@media (min-width:1024px) and (max-width:1279px){ body #navbar .nav-links .nav-yt .yt-txt{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } body #navbar .nav-links .nav-yt svg{ width:20px; height:20px; } }