/* Compartir versículos (js/compartir-verso.js). Noche plata; oro solo en lo elegido. */

/* Versículo marcado */
#listen .verse-line{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
#listen .verse-line.cv-sel{ background:rgba(201,168,76,.09); box-shadow:-10px 0 0 rgba(201,168,76,.09), inset 2px 0 0 #C9A84C; border-radius:2px 6px 6px 2px; }
#listen .verse-line.cv-sel .verse-number{ color:#C9A84C; }

/* Barra de abajo: tapa el reproductor mientras haya algo marcado */
.cv-barra{ position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:1003; transform:translateX(-50%); display:flex; align-items:center; gap:6px; width:min(560px, calc(100% - 24px)); padding:8px 8px 8px 18px; border:1px solid rgba(236,238,243,.16); border-radius:99px; background:rgba(12,16,32,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 14px 40px rgba(0,0,0,.5); animation:cvSube .16s ease-out; }
.cv-barra[hidden]{ display:none; }
.cv-ref{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#ECEEF3; font:500 11px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; }
.cv-b{ display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 14px; border:1px solid rgba(236,238,243,.16); border-radius:99px; background:none; color:#ECEEF3; font:600 14px/1 Inter,system-ui,sans-serif; cursor:pointer; transition:border-color .15s,background .15s; }
.cv-b svg, .cv-ventana svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.cv-b:hover{ border-color:rgba(236,238,243,.4); }
.cv-main{ background:#C9A84C; border-color:#C9A84C; color:#06080F; }
.cv-main:hover{ background:#E6D3A0; border-color:#E6D3A0; }
.cv-x{ width:44px; padding:0; border-color:transparent; color:#868B99; }
.cv-b:focus-visible, .cv-ventana button:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }
@media (max-width:420px){ .cv-copiar span{ display:none; } .cv-copiar{ width:44px; padding:0; } }

/* Ventana */
.cv-velo{ position:fixed; inset:0; z-index:10050; display:flex; align-items:flex-end; justify-content:center; background:rgba(3,4,8,.72); animation:cvFunde .16s ease-out; }
.cv-ventana{ width:100%; max-width:460px; max-height:94vh; overflow:auto; padding:20px 20px calc(20px + env(safe-area-inset-bottom)); border:1px solid rgba(236,238,243,.12); border-bottom:0; border-radius:22px 22px 0 0; background:#0C1020; color:#ECEEF3; animation:cvSube .2s ease-out; }
.cv-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cv-eyebrow{ margin:0 0 6px; font:500 10.5px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; color:#868B99; }
.cv-cab h3{ margin:0; font:400 28px/1.1 "Instrument Serif",Georgia,serif; color:#ECEEF3; }
.cv-cerrar{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid rgba(236,238,243,.14); border-radius:50%; background:none; color:#ECEEF3; cursor:pointer; flex:none; }
.cv-prev{ position:relative; display:flex; justify-content:center; margin:0 0 14px; }
.cv-prev img{ display:block; max-width:100%; max-height:44vh; aspect-ratio:4/5; border-radius:12px; border:1px solid rgba(236,238,243,.1); box-shadow:0 12px 34px rgba(0,0,0,.45); background:#06080F; transition:opacity .15s; }
.cv-prev[data-f="historia"] img{ aspect-ratio:9/16; }
.cv-prev img:not([src]){ width:60%; }
.cv-prev.cargando img{ opacity:.35; }
.cv-cargando{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font:500 10.5px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#868B99; opacity:0; pointer-events:none; }
.cv-prev.cargando .cv-cargando{ opacity:1; }
.cv-formato{ display:flex; gap:4px; padding:4px; margin:0 0 12px; border:1px solid rgba(236,238,243,.16); border-radius:99px; background:rgba(236,238,243,.04); }
.cv-formato button{ flex:1; padding:11px 8px; border:0; border-radius:99px; background:none; color:#C4C8D2; font:600 14px/1 Inter,system-ui,sans-serif; cursor:pointer; }
.cv-formato button.on{ background:rgba(201,168,76,.16); color:#E6D3A0; box-shadow:inset 0 0 0 1px rgba(201,168,76,.6); }
.cv-principal{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:52px; margin:0 0 10px; border:0; border-radius:99px; background:#C9A84C; color:#06080F; font:600 16px/1 Inter,system-ui,sans-serif; cursor:pointer; transition:background .15s; }
.cv-principal:hover{ background:#E6D3A0; }
.cv-fila{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cv-sec{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:64px; padding:10px 4px; border:1px solid rgba(236,238,243,.14); border-radius:14px; background:rgba(236,238,243,.03); color:#ECEEF3; font:500 12.5px/1.1 Inter,system-ui,sans-serif; cursor:pointer; transition:border-color .15s; }
.cv-sec:hover{ border-color:rgba(236,238,243,.36); }

@media (min-width:700px){
  .cv-velo{ align-items:center; }
  .cv-ventana{ border-bottom:1px solid rgba(236,238,243,.12); border-radius:22px; }
}
@keyframes cvSube{ from{ opacity:0; transform:translate(var(--cv-x,0),10px); } to{ opacity:1; transform:translate(var(--cv-x,0),0); } }
.cv-barra{ --cv-x:-50%; }
@keyframes cvFunde{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cv-barra, .cv-velo, .cv-ventana{ animation:none; } }