/* Banderas en Windows (no trae emojis de bandera): fuente Twemoji Country Flags (CC-BY 4.0), solo para los caracteres de bandera */
@font-face { font-family:"Twemoji Country Flags"; unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; src:url('fonts/TwemojiCountryFlags.woff2') format('woff2'); font-display:swap; }
/* Estilos propios de Radiosenlinea.com (cargados siempre) */
:root { --navy:#060C2B; --blue:#2A44B8; --plum:#5626A3; --sky:#38BDF8; --gold:#D97706; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { background:#F8FAFC; overflow-x:hidden; }
img { max-width:100%; }
.grad-brand { background-image:linear-gradient(135deg,#0B1747 0%,#2A2A8F 55%,#5626A3 100%); }
.grad-brand-h { background-image:linear-gradient(90deg,#2A44B8 0%,#6D35C9 100%); }
.grad-hero { background-color:#060C2B; background-image:radial-gradient(60rem 30rem at 85% -10%,rgba(109,53,201,.45),transparent 60%),radial-gradient(40rem 26rem at 10% 110%,rgba(42,68,184,.45),transparent 60%),linear-gradient(160deg,#060C2B 0%,#0B1747 55%,#1C0B3B 100%); }
.grad-brand-soft { background-image:linear-gradient(135deg,#EFF6FF 0%,#F8FAFC 55%,#E0F2FE 100%); }
.grad-text { background-image:linear-gradient(120deg,#2A44B8 0%,#6D35C9 60%,#A57CF0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grid-bg { background-image:linear-gradient(rgba(11,31,77,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(11,31,77,.05) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%); mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%); }
.vip-card { background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#D97706,#FDE68A,#F59E0B,#B45309) border-box; border:1.5px solid transparent; }
.vip-shine { position:relative; overflow:hidden; }
.vip-shine::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.6) 45%,transparent 60%); transform:translateX(-120%); animation:shine 5s ease-in-out infinite; pointer-events:none; }
@keyframes shine { 0%,65% { transform:translateX(-120%);} 100% { transform:translateX(120%);} }
.eq span { display:inline-block; width:3px; margin:0 1px; background:currentColor; border-radius:2px; animation:eq 1s ease-in-out infinite; }
.eq span:nth-child(2){animation-delay:.2s} .eq span:nth-child(3){animation-delay:.4s} .eq span:nth-child(4){animation-delay:.1s}
@keyframes eq { 0%,100%{height:4px} 50%{height:16px} }
.eq.paused span { animation-play-state:paused; height:4px; }
.no-scrollbar::-webkit-scrollbar{display:none} .no-scrollbar{scrollbar-width:none}
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
input[type=range].vol { accent-color:#8653E2; }
.store-btn { display:inline-flex; align-items:center; gap:.65rem; border-radius:.85rem; padding:.55rem 1rem; background:#0B1324; color:#fff; line-height:1.05; transition:transform .15s, background .15s; }
.store-btn:hover { background:#421E7E; transform:translateY(-1px); }
.store-btn i { font-size:1.55rem; }
.store-btn small { display:block; font-size:.62rem; font-weight:600; opacity:.75; letter-spacing:.02em; }
.store-btn b { display:block; font-size:.95rem; font-weight:800; }
.store-btn.light { background:#fff; color:#0B1324; border:1px solid #E2E8F0; }
.store-btn.light:hover { background:#EFF6FF; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }
/* Paneles */
.inp{width:100%;border-radius:.75rem;border:1px solid #E2E8F0;background:#fff;padding:.7rem .9rem;font-size:16px;color:#0B1324;outline:none;transition:.15s}
@media (min-width:640px){.inp{font-size:.9rem}}
.inp:focus{border-color:#A57CF0;box-shadow:0 0 0 4px #EDE4FD}
.lbl{display:block;font-size:.85rem;font-weight:700;color:#0B1324;margin-bottom:.35rem}
.help{margin-top:.35rem;font-size:.75rem;line-height:1.4;color:#94A3B8}
.help code{background:#F1F5F9;color:#64748B;padding:0 .3rem;border-radius:.3rem;font-size:.72rem;word-break:break-all}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:.75rem;padding:.7rem 1.2rem;font-size:.875rem;font-weight:700;transition:.15s}
.btn-primary{color:#fff;background-image:linear-gradient(135deg,#0B1747,#2A2A8F 55%,#5626A3);box-shadow:0 10px 24px -12px rgba(47,21,92,.75)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-ghost{border:1px solid #E2E8F0;background:#fff;color:#0B1324}
.btn-ghost:hover{border-color:#93C5FD}
.card{background:#fff;border:1px solid #E2E8F0;border-radius:1.25rem;box-shadow:0 1px 2px rgba(11,19,36,.04),0 8px 24px -8px rgba(11,19,36,.10)}

/* ---------- Botón primario degradado (navy → morado) ---------- */
.btn-grad { color:#fff; background-image:linear-gradient(135deg,#0B1747 0%,#2A2A8F 50%,#5626A3 100%); background-size:160% 160%; background-position:0% 50%; transition:background-position .4s, transform .15s, box-shadow .2s; box-shadow:0 12px 26px -14px rgba(47,21,92,.85); }
.btn-grad:hover { background-position:100% 50%; box-shadow:0 16px 32px -14px rgba(86,38,163,.9); }
/* ---------- Reproductor ---------- */
.live-dot { position:relative; display:inline-block; width:8px; height:8px; border-radius:9999px; background:#F43F5E; }
.live-dot::after { content:""; position:absolute; inset:-4px; border-radius:9999px; background:rgba(244,63,94,.45); animation:ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform:scale(2); opacity:0; } }
.viz { align-items:flex-end; gap:3px; height:28px; }
.viz i { display:block; width:4px; border-radius:3px; background:linear-gradient(to top,#6D35C9,#38BDF8); height:20%; animation:viz 1.1s ease-in-out infinite; }
.viz i:nth-child(2){animation-delay:.15s} .viz i:nth-child(3){animation-delay:.3s} .viz i:nth-child(4){animation-delay:.45s} .viz i:nth-child(5){animation-delay:.6s} .viz i:nth-child(6){animation-delay:.2s} .viz i:nth-child(7){animation-delay:.5s} .viz i:nth-child(8){animation-delay:.35s} .viz i:nth-child(9){animation-delay:.1s} .viz i:nth-child(10){animation-delay:.4s}
@keyframes viz { 0%,100% { height:18%; } 50% { height:100%; } }
.viz.paused i { animation-play-state:paused; height:18%; }
.cover-spin { transition:transform .4s; }
.is-playing .cover-pulse { animation:coverpulse 2.4s ease-in-out infinite; }
@keyframes coverpulse { 0%,100% { box-shadow:0 0 0 0 rgba(134,83,226,.55), 0 20px 40px -12px rgba(0,0,0,.6); } 50% { box-shadow:0 0 0 10px rgba(134,83,226,0), 0 20px 40px -12px rgba(0,0,0,.6); } }
.play-ring { position:relative; }
.is-playing .play-ring::before { content:""; position:absolute; inset:-4px; border-radius:inherit; border:2px solid rgba(165,124,240,.7); animation:ring 1.8s ease-out infinite; pointer-events:none; }
@keyframes ring { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(1.08,1.25); opacity:0; } }
.like-btn.on { color:#fff; background:linear-gradient(135deg,#5626A3,#8653E2); border-color:transparent; box-shadow:0 6px 16px -6px rgba(86,38,163,.6); }
.like-btn.on i { animation:heart .35s ease; }
@keyframes heart { 50% { transform:scale(1.35); } }
.viz i:nth-child(3n){animation-duration:.85s} .viz i:nth-child(4n+1){animation-duration:1.35s} .viz i:nth-child(5n+2){animation-delay:.25s} .viz i:nth-child(7n){animation-delay:.55s;animation-duration:.95s}
#heroViz i, #pViz i { width:auto; flex:1; max-width:7px; }

/* ---------- Publicidad ---------- */
.rel-ad { position:relative; margin:0 auto; text-align:center; }
.rel-ad-label { display:block; margin-bottom:.35rem; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#94A3B8; }
.rel-ad-img { display:block; margin:0 auto; max-width:100%; height:auto; border-radius:14px; box-shadow:0 8px 24px -12px rgba(11,19,36,.25); }
.rel-ad-html { display:flex; justify-content:center; overflow:hidden; }

/* ---------- Páginas legales ---------- */
.legal { line-height:1.75; color:#334155; }
.legal h2 { margin:1.8rem 0 .6rem; font-size:1.2rem; font-weight:800; color:#0B1324; }
.legal h3 { margin:1.4rem 0 .5rem; font-weight:800; color:#0B1324; }
.legal p { margin:.7rem 0; }
.legal ul, .legal ol { margin:.7rem 0 .7rem 1.3rem; }
.legal ul { list-style:disc; } .legal ol { list-style:decimal; }
.legal li { margin:.3rem 0; }
.legal a { color:#2A44B8; font-weight:600; text-decoration:underline; }
.legal table td { border:1px solid #E2E8F0; }

/* ---------- Botón de tema ---------- */
.theme-ico-light { display:none; }
html.dark .theme-ico-dark { display:none; }
html.dark .theme-ico-light { display:inline-block; color:#FBBF24; }

/* =========================================================
 * MODO OSCURO (html.dark) — capa que adapta las utilidades claras
 * ========================================================= */
html.dark { color-scheme:dark; }
html.dark body { background:#050A1F; color:#CBD5E1; }
html.dark .bg-white { background-color:#0D1433 !important; }
html.dark .bg-white\/85, html.dark .bg-white\/80, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color:rgba(10,15,40,.88) !important; }
html.dark .bg-slate-50, html.dark .bg-\[\#F8FAFC\] { background-color:#0A1029 !important; }
html.dark .bg-slate-100 { background-color:#151D44 !important; }
html.dark .hover\:bg-slate-50:hover, html.dark .hover\:bg-slate-100:hover { background-color:#18214D !important; }
html.dark .bg-brand-50, html.dark .bg-plum-50 { background-color:rgba(109,53,201,.18) !important; }
html.dark .hover\:bg-brand-50:hover, html.dark .hover\:bg-brand-100:hover { background-color:rgba(109,53,201,.28) !important; }
html.dark .bg-sun-50 { background-color:rgba(245,158,11,.14) !important; }
html.dark .text-ink, html.dark .text-slate-900, html.dark .text-slate-800 { color:#F1F5F9 !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color:#CBD5E1 !important; }
html.dark .text-slate-500 { color:#94A3B8 !important; }
html.dark .text-slate-400 { color:#7C89A6 !important; }
html.dark .text-brand-700, html.dark .text-brand-600 { color:#A5B4FC !important; }
html.dark .text-plum-700, html.dark .text-plum-600 { color:#C3A6F7 !important; }
html.dark .border-slate-100, html.dark .border-slate-200, html.dark .border-slate-200\/80, html.dark .border-slate-300 { border-color:#1E2752 !important; }
html.dark .divide-slate-100 > * + * { border-color:#1E2752 !important; }
html.dark .shadow-soft { box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -12px rgba(0,0,0,.6) !important; }
html.dark .card { background:#0D1433; border-color:#1E2752; box-shadow:0 10px 28px -12px rgba(0,0,0,.6); }
html.dark .inp, html.dark input[type=search], html.dark select { background-color:#0A1029 !important; border-color:#243063 !important; color:#E2E8F0 !important; }
html.dark .inp:focus { box-shadow:0 0 0 4px rgba(109,53,201,.3); }
html.dark .lbl { color:#E2E8F0; }
html.dark .btn-ghost { background:#0D1433; border-color:#243063; color:#E2E8F0; }
html.dark .vip-card { background:linear-gradient(#0D1433,#0D1433) padding-box, linear-gradient(135deg,#D97706,#FDE68A,#F59E0B,#B45309) border-box; }
html.dark .grid-bg { background-image:linear-gradient(rgba(165,180,252,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(165,180,252,.06) 1px,transparent 1px); }
html.dark .legal { color:#CBD5E1; } html.dark .legal h2, html.dark .legal h3 { color:#F1F5F9; } html.dark .legal a { color:#A5B4FC; }
html.dark .legal table td { border-color:#1E2752; }
html.dark .store-btn.light { background:#0D1433; color:#F1F5F9; border-color:#243063; }
html.dark img[src$="default-logo.svg"] { box-shadow:none; }
html.dark ::placeholder { color:#64748B; }
html.dark .keep-light { background-color:#fff !important; color:#0B1747 !important; }

/* =========================================================
 * Reproductor fijo v2 — dinámico
 * ========================================================= */
/* Borde degradado animado (se activa al sonar) */
.rp-shell { background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); }
.is-playing .rp-shell { background:linear-gradient(120deg,#E11D48,#6D35C9,#38BDF8,#6D35C9,#E11D48); background-size:300% 300%; animation:rpBorder 6s linear infinite; }
@keyframes rpBorder { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }

/* Barra superior "en vivo" */
.rp-live-bar { background:linear-gradient(90deg,#2A44B8,#6D35C9); opacity:.6; }
.is-playing .rp-live-bar { opacity:1; background:linear-gradient(90deg,transparent,#F43F5E,#A57CF0,#38BDF8,transparent); background-size:50% 100%; background-repeat:no-repeat; animation:rpSweep 2.2s linear infinite; }
@keyframes rpSweep { 0%{background-position:-50% 0} 100%{background-position:150% 0} }

/* Portada con anillo giratorio */
.rp-disc { padding:3px; background:rgba(255,255,255,.12); }
.rp-disc::before { content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(from 0deg,#F43F5E,#A57CF0,#38BDF8,#F43F5E); opacity:0; transition:opacity .3s; }
.is-playing .rp-disc::before { opacity:1; animation:rpSpin 3.5s linear infinite; }
.rp-disc img { position:relative; }
@keyframes rpSpin { to { transform:rotate(360deg); } }
.rp-onair { opacity:.85; }
.is-playing .rp-onair { animation:rpBlink 1.6s ease-in-out infinite; opacity:1; }
@keyframes rpBlink { 50%{ box-shadow:0 0 0 4px rgba(244,63,94,.25);} }

/* Título largo con desplazamiento */
.rp-marquee { overflow:hidden; white-space:nowrap; mask-image:linear-gradient(90deg,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); }
.rp-marquee:not(.is-long) { mask-image:none; -webkit-mask-image:none; }
.rp-marquee p { display:inline-block; }
.rp-marquee.is-long p { animation:rpMarquee var(--rp-dur,10s) ease-in-out infinite alternate; }
@keyframes rpMarquee { 0%,15%{transform:translateX(0)} 85%,100%{transform:translateX(var(--rp-shift,0))} }

/* Botón de play: ROJO cuando no suena, morado cuando suena */
.play-main { color:#fff; background-image:linear-gradient(135deg,#F43F5E 0%,#DC2626 55%,#B91C1C 100%); box-shadow:0 10px 26px -10px rgba(220,38,38,.85); transition:transform .15s, box-shadow .25s, filter .2s; }
.play-main:hover { filter:brightness(1.08); transform:scale(1.05); }
.play-main:not(.playing) { animation:rpCall 2.4s ease-in-out infinite; }
@keyframes rpCall { 0%,100%{ box-shadow:0 10px 26px -10px rgba(220,38,38,.85), 0 0 0 0 rgba(244,63,94,.45);} 50%{ box-shadow:0 10px 26px -10px rgba(220,38,38,.85), 0 0 0 10px rgba(244,63,94,0);} }
.is-playing .play-main, .play-main.playing { animation:none; background-image:linear-gradient(135deg,#2A44B8 0%,#5626A3 60%,#6D35C9 100%); box-shadow:0 10px 26px -10px rgba(86,38,163,.9); }
.is-loading .play-main, .play-main.loading { animation:none; background-image:linear-gradient(135deg,#6D35C9,#2A44B8); }
.is-playing .play-ring::before { border-color:rgba(165,124,240,.75); }
@media (prefers-reduced-motion:reduce){ .rp-shell,.rp-live-bar,.rp-disc::before,.rp-marquee p,.play-main{animation:none!important} }