/* Radio de Pedro Solines · estilo Spotify con su marca (verde oscuro #0A5A28, verde #097F49, verde vivo #30AB70, amarillo #F8DA6E; letra Kanit y Montserrat) */
:root{
  --bg:#041a0d; --s1:#082513; --s2:#0d311b; --s3:#134126; --linea:#1d4d30;
  --tx:#f3fbf5; --tx2:#b9d8c2; --tx3:#86a892; --ink:#062012;
  --mor:#097F49; --mor2:#0A5A28; --ama:#F8DA6E; --rosa:#30AB70;
  --alto-rep:88px; --alto-mini:64px; --alto-nav:58px; --ancho-lat:268px; --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:15px/1.45 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,p{margin:0}
svg{width:1.3em;height:1.3em;display:block;flex:none}
i[data-ico]{display:contents}
:focus-visible{outline:2px solid var(--ama);outline-offset:2px;border-radius:6px}
button[disabled]{opacity:.35;cursor:default}

/* ---------- estructura (escritorio) ---------- */
#app{display:grid;grid-template-columns:var(--ancho-lat) minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--alto-rep);
  grid-template-areas:"lat centro" "rep rep";height:100vh;height:100dvh;gap:8px;padding:8px 8px 0}
#lateral{grid-area:lat;background:var(--s1);border-radius:var(--r);padding:20px 12px 14px;display:flex;flex-direction:column;gap:4px;min-height:0;overflow:auto}
#centro{grid-area:centro;min-width:0;min-height:0;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(9,127,73,.55) 0,var(--s1) 420px) no-repeat,var(--s1)}
#vista{flex:1;min-height:0;overflow:auto;padding:4px 28px 32px;outline:none;scrollbar-width:thin;scrollbar-color:#1f5a37 transparent}

/* ---------- lateral ---------- */
#lateral .logo{display:block;padding:0 10px 14px}
#lateral .logo img{width:150px;max-width:100%;height:auto;display:block}
.menu{display:flex;flex-direction:column;gap:2px;flex:none}
.menu a,.menu button{display:flex;align-items:center;gap:16px;width:100%;padding:11px 12px;border-radius:10px;color:var(--tx2);font-weight:700;text-align:left;transition:color .15s,background .15s}
.menu svg{width:24px;height:24px}
.menu a:hover,.menu button:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.menu .activo{color:var(--tx)}
.pt-vivo{margin-left:auto;width:9px;height:9px;border-radius:50%;background:transparent}
body.en-vivo .pt-vivo{background:var(--rosa);animation:late 1.4s ease-in-out infinite}
.tit-lat{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);margin:18px 12px 6px;font-weight:700}
.listas{display:flex;flex-direction:column;gap:2px;flex:none}
.listas a{display:flex;align-items:center;gap:12px;padding:7px 10px;border-radius:10px;color:var(--tx2);transition:background .15s}
.listas a:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.listas a.activo{background:rgba(255,255,255,.09);color:var(--tx)}
.listas .cov{width:44px}
.listas b{display:block;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.listas small{display:block;color:var(--tx3);font-size:.8rem}
.listas span.tx{min-width:0}
.a-panel{margin-top:auto;flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--tx3);font-size:.9rem;font-weight:600}
.a-panel svg{width:18px;height:18px}
.a-panel:hover{color:var(--tx);background:rgba(255,255,255,.05)}

/* ---------- barra de arriba ---------- */
#barra{display:flex;align-items:center;gap:14px;padding:14px 28px}
.logo-m{display:none}
.flechas{display:flex;gap:8px}
.flechas button{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);display:grid;place-items:center}
.flechas button:hover{background:rgba(0,0,0,.65)}
.busca{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.35);border:1px solid transparent;border-radius:99px;padding:0 16px;height:42px;flex:1 1 180px;max-width:380px;color:var(--tx2);transition:border-color .15s,background .15s}
.busca:focus-within{border-color:var(--tx);background:rgba(0,0,0,.5);color:var(--tx)}
.busca input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--tx);font:inherit;height:100%}
.busca input::placeholder{color:var(--tx3)}
.busca input::-webkit-search-cancel-button{-webkit-appearance:none}
.busca svg{width:20px;height:20px}
.a-panel-top{margin-left:auto;flex:none;white-space:nowrap;font-weight:700;font-size:.85rem;color:var(--tx2);padding:.5rem 1rem;border-radius:99px;border:1px solid var(--linea)}
.a-panel-top:hover{color:var(--tx);border-color:var(--tx3)}

/* ---------- portadas (generadas con la marca: no hay arte de las canciones) ---------- */
.cov{position:relative;display:block;container-type:size;aspect-ratio:1;border-radius:6px;overflow:hidden;flex:none;
  background:linear-gradient(145deg,var(--cv-a),var(--cv-b));color:var(--cv-t)}
.cov .ct{position:absolute;left:9cqw;right:9cqw;top:6cqw;padding-top:3cqw;font:800 12.5cqw/1.04 Kanit,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--cv-t);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-style:normal}
.cov.largo .ct{font-size:10cqw}
.cov .cb{position:absolute;left:-8cqw;right:-8cqw;bottom:12cqw;transform:rotate(-4deg);background:var(--cv-band);color:var(--cv-bt);
  font:800 8.5cqw/1 Kanit,Impact,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:3cqw 12cqw;white-space:nowrap;text-align:center;font-style:normal}
.cov .ano{position:absolute;inset:0;display:grid;place-items:center;font:800 24cqw/1 Kanit,Impact,sans-serif;color:var(--cv-t);font-style:normal;letter-spacing:.01em}
.v0{--cv-a:#30AB70;--cv-b:#0A5A28;--cv-t:#fff;--cv-band:#F8DA6E;--cv-bt:#0A5A28}
.v1{--cv-a:#097F49;--cv-b:#041a0d;--cv-t:#fff;--cv-band:#F8DA6E;--cv-bt:#0A5A28}
.v2{--cv-a:#F9E08A;--cv-b:#E7C24F;--cv-t:#0A5A28;--cv-band:#0A5A28;--cv-bt:#F8DA6E}
.v3{--cv-a:#0A5A28;--cv-b:#041a0d;--cv-t:#F8DA6E;--cv-band:#30AB70;--cv-bt:#fff}

/* ---------- inicio: saludo y radio en vivo ---------- */
.saludo{font:800 1.85rem/1.1 Kanit,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:6px 0 18px}
.vivo{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center;padding:30px 36px;border-radius:20px;overflow:hidden;
  background:radial-gradient(60% 150% at 100% 0%,rgba(248,218,110,.22),transparent 62%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 20px,transparent 20px 40px),
    linear-gradient(135deg,#097F49 0,#0A5A28 55%,#052a14 100%)}
.av{position:relative;width:176px;height:176px;margin-bottom:16px}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 5px rgba(255,255,255,.92),0 0 0 11px rgba(248,218,110,.45),0 0 0 22px rgba(248,218,110,.14)}
.banda{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%) rotate(-3deg);background:var(--ama);color:var(--mor);
  font:800 .85rem/1 Kanit,Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.42rem 1.05rem;white-space:nowrap;
  display:flex;align-items:center;gap:.55rem;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.banda i{width:9px;height:9px;border-radius:50%;background:var(--rosa);animation:late 1.4s ease-in-out infinite}
@keyframes late{0%,100%{box-shadow:0 0 0 0 rgba(48,171,112,.7)}60%{box-shadow:0 0 0 8px rgba(48,171,112,0)}}
.kicker{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;color:var(--ama);margin-bottom:4px}
.vivo h1{font:800 clamp(1.9rem,4.3vw,3.1rem)/1.02 Kanit,Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;margin-bottom:8px}
.vivo-sub{color:#dcf3e4;margin-bottom:14px}
.aire{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:20px;color:#dcf3e4;font-size:.95rem}
.aire b{color:#fff;font-weight:700}
.aire em{font-style:normal;color:#c9e8d3}
.aire .et{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ama)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-vivo{display:inline-flex;align-items:center;gap:10px;background:var(--ama);color:var(--ink);font-weight:800;font-size:1rem;padding:.85rem 1.5rem;border-radius:99px;transition:transform .15s,filter .15s}
.btn-vivo svg{width:22px;height:22px}
.btn-vivo:hover{transform:scale(1.03);filter:brightness(1.05)}
.btn-sec{display:inline-flex;align-items:center;padding:.85rem 1.3rem;border-radius:99px;border:1.5px solid rgba(255,255,255,.5);font-weight:700;transition:border-color .15s,background .15s}
.btn-sec:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.nota{margin-top:16px;font-size:.82rem;color:#BCDEB9}
.leyenda{margin-top:14px;font-size:.9rem;color:var(--ama);font-weight:600}
.mas{margin-top:14px}

/* ---------- secciones, listas en tarjetas ---------- */
.sec{font:800 1.4rem/1.1 Kanit,Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:34px 0 14px}
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.carta{position:relative;background:var(--s2);border-radius:12px;padding:12px;cursor:pointer;transition:background .2s;min-width:0}
.carta:hover{background:var(--s3)}
.carta .cov{width:100%;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.carta>b{display:block;margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carta small{display:block;color:var(--tx2);font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ama);color:var(--ink);box-shadow:0 8px 18px rgba(0,0,0,.45);transition:transform .15s,opacity .2s}
.fab svg{width:22px;height:22px}
.fab:hover{transform:scale(1.07)}
.carta .fab{position:absolute;right:22px;bottom:72px;opacity:0;transform:translateY(8px)}
@media (hover:hover){.carta:hover .fab,.carta:focus-within .fab{opacity:1;transform:none}}
@media (hover:none){.carta .fab{opacity:1;transform:none;width:40px;height:40px;right:18px;bottom:66px}}

/* ---------- tabla de canciones ---------- */
.tabla{margin-top:6px}
.cab-t,.fila{display:grid;grid-template-columns:44px minmax(0,1fr) 150px 64px;gap:14px;align-items:center;padding:8px 14px;border-radius:8px}
.cab-t{color:var(--tx3);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;border-bottom:1px solid var(--linea);border-radius:0;margin-bottom:6px;padding-top:6px;padding-bottom:8px}
.cab-t .n{text-align:center}
.cab-t .d{text-align:right}
.fila{cursor:pointer;transition:background .12s;user-select:none;-webkit-user-select:none}
.fila:hover{background:rgba(255,255,255,.07)}
.fila .n{display:grid;place-items:center;height:22px;color:var(--tx2);font-variant-numeric:tabular-nums}
.fila .ico-play{display:none;color:var(--tx)}
.fila .ico-play svg{width:18px;height:18px}
@media (hover:hover){.fila:hover .num{display:none}.fila:hover .ico-play{display:block}.fila.actual:hover .eq{display:none}}
.eq{display:none;align-items:flex-end;justify-content:center;gap:2px;height:14px}
.eq i{width:3px;height:100%;background:var(--ama);border-radius:1px;transform-origin:bottom;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s}.eq i:nth-child(3){animation-delay:-.8s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.fila.actual .num{display:none}
.fila.actual .eq{display:flex}
.fila.actual:not(.sonando) .eq i{animation-play-state:paused;transform:scaleY(.4)}
.fila .t{display:flex;align-items:center;gap:12px;min-width:0}
.fila .t .cov{width:42px}
.fila .tt{min-width:0}
.fila .tt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .tt span{display:block;color:var(--tx2);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila.actual .tt b{color:var(--ama)}
.fila .c{color:var(--tx2);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fila .d{text-align:right;color:var(--tx2);font-variant-numeric:tabular-nums}

/* ---------- lista abierta y búsqueda ---------- */
.lista-cab{display:flex;align-items:flex-end;gap:24px;padding:10px 0 22px}
.lista-cab .cov{width:clamp(130px,18vw,210px);border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.lista-cab h1{font:800 clamp(1.8rem,4.6vw,3.4rem)/1.02 Kanit,Impact,sans-serif;text-transform:uppercase;margin:4px 0 10px}
.meta{color:var(--tx2);font-size:.92rem}
.acc-lista{display:flex;align-items:center;gap:20px;padding:6px 0 14px}
.fab.grande{width:58px;height:58px}
.fab.grande svg{width:28px;height:28px}
.acc-lista .btn-ico{color:var(--tx2);width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.acc-lista .btn-ico:hover{color:var(--tx)}
.acc-lista .btn-ico.on{color:var(--ama)}
.buscar-m{display:none;padding:6px 0 12px}
.buscar-m .busca{width:100%;height:48px;background:var(--s3)}
.vacio{color:var(--tx2);padding:28px 4px}

/* ---------- reproductor de abajo ---------- */
#rep{grid-area:rep;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,2fr) minmax(0,1fr);align-items:center;gap:16px;padding:0 10px;background:var(--bg)}
.rep-izq{display:flex;align-items:center;gap:14px;min-width:0;cursor:default}
.rep-cov{display:block;width:58px;flex:none}
.rep-cov .cov{width:58px;border-radius:6px}
.rep-cov:empty{height:58px;background:var(--s2);border-radius:6px}
.rep-info{min-width:0}
.rep-info b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-info span{display:block;color:var(--tx2);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-centro{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.ctl{display:flex;align-items:center;justify-content:center;gap:20px}
.ctl button{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--tx2);transition:color .15s,transform .15s}
.ctl button:hover:not([disabled]){color:var(--tx)}
.ctl button.on{color:var(--ama)}
.ctl button svg{width:20px;height:20px}
.play{display:grid;place-items:center;border-radius:50%;background:var(--ama);color:var(--ink)}
.ctl .play{width:40px;height:40px;background:var(--ama);color:var(--ink)}
.ctl .play:hover:not([disabled]){transform:scale(1.07);color:var(--ink)}
.ctl .play svg{width:20px;height:20px}
.prog{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;color:var(--tx2);font-size:.74rem;font-variant-numeric:tabular-nums}
.prog time{min-width:38px}
.prog time:first-child{text-align:right}
.rep-der{display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0}
.vol{display:flex;align-items:center;gap:8px;width:130px}
.vol button{width:32px;height:32px;display:grid;place-items:center;color:var(--tx2)}
.vol button:hover{color:var(--tx)}
.vol svg{width:20px;height:20px}
.sin-vol .vol{display:none}
.mini-play,.rep-linea{display:none}
.pildora{display:inline-flex;align-items:center;gap:8px;padding:.42rem .95rem;border-radius:99px;font:800 .85rem/1 Kanit,Impact,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.1);color:var(--tx);white-space:nowrap;transition:background .15s}
.pildora::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tx3)}
.pildora:hover{background:rgba(255,255,255,.18)}
.pildora.vivo{background:var(--rosa);color:#fff}
.pildora.vivo::before{background:#fff;animation:late 1.4s ease-in-out infinite}

/* range (progreso y volumen) */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;background:transparent;cursor:pointer;--p:0%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--fill,#fff) var(--p),rgba(255,255,255,.22) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--fill,#fff)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;border:0;opacity:0;transition:opacity .15s}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:0;opacity:0}
input[type=range]:hover,input[type=range]:focus-visible{--fill:var(--ama)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{opacity:1}
input[type=range]:hover::-moz-range-thumb,input[type=range]:focus-visible::-moz-range-thumb{opacity:1}
input[type=range]:disabled{cursor:default;opacity:.6}
input[type=range]:disabled::-webkit-slider-thumb{opacity:0!important}
input[type=range]:disabled::-moz-range-thumb{opacity:0!important}
input[type=range]:disabled{--fill:var(--rosa)}

/* ---------- pantalla completa del reproductor (celular) y menú de abajo ---------- */
#pantalla,#inferior{display:none}
#aviso{position:fixed;left:50%;bottom:calc(var(--alto-rep) + 18px);transform:translate(-50%,12px);max-width:calc(100vw - 32px);background:var(--tx);color:var(--ink);padding:.65rem 1.1rem;border-radius:99px;font-weight:700;font-size:.92rem;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:80;text-align:center}
#aviso.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .cab-t,.fila{grid-template-columns:44px minmax(0,1fr) 64px}
  .cab-t .c,.fila .c{display:none}
}
@media (max-width:1000px) and (min-width:900px){
  :root{--ancho-lat:224px}
  .vivo{grid-template-columns:1fr;justify-items:start}
}

/* ---------- celular ---------- */
@media (max-width:899px){
  body{overflow:auto}
  #app{display:block;height:auto;padding:0}
  #lateral{display:none}
  #centro{display:block;background:linear-gradient(180deg,rgba(9,127,73,.5) 0,var(--bg) 320px) no-repeat,var(--bg);border-radius:0;overflow:visible;min-height:100vh;min-height:100dvh}
  #barra{position:sticky;top:0;z-index:20;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:linear-gradient(180deg,rgba(4,26,13,.94),rgba(4,26,13,.7));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .logo-m{display:block}
  .logo-m img{height:38px;width:auto;display:block}
  #barra .flechas,#barra .busca{display:none}
  .a-panel-top{font-size:.8rem;padding:.4rem .85rem}
  #vista{overflow:visible;padding:4px 16px calc(var(--alto-mini) + var(--alto-nav) + 34px + env(safe-area-inset-bottom))}
  .saludo{font-size:1.7rem;margin-bottom:14px}
  .vivo{grid-template-columns:1fr;justify-items:center;text-align:center;padding:26px 18px 24px;gap:22px;border-radius:18px}
  .av{width:128px;height:128px;margin-bottom:14px}
  .acciones{justify-content:center}
  .aire{justify-content:center;flex-direction:column;align-items:center}
  .sec{font-size:1.35rem;margin:28px 0 12px}
  .estante{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:144px;overflow-x:auto;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none;gap:12px}
  .estante::-webkit-scrollbar{display:none}
  .carta{padding:10px}
  .cab-t{display:none}
  .fila{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 6px}
  .fila .n{display:none}
  .lista-cab{flex-direction:column;align-items:center;text-align:center;gap:14px}
  .lista-cab .cov{width:min(56vw,220px)}
  .acc-lista{justify-content:center}
  .buscar-m{display:block}

  #rep{position:fixed;z-index:30;left:8px;right:8px;bottom:calc(var(--alto-nav) + env(safe-area-inset-bottom) + 6px);height:var(--alto-mini);
    display:flex;align-items:center;gap:10px;padding:0 10px 0 8px;border-radius:12px;background:#134126;box-shadow:0 8px 24px rgba(0,0,0,.5)}
  .rep-izq{flex:1;cursor:pointer}
  .rep-cov,.rep-cov .cov{width:46px}
  .rep-cov:empty{height:46px}
  .rep-centro,.rep-der{display:none}
  .mini-play{display:grid;width:44px;height:44px;flex:none}
  .mini-play svg{width:22px;height:22px}
  .rep-linea{display:block;position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
  .rep-linea i{display:block;height:100%;width:0;background:#fff}
  body.en-vivo .rep-linea i{background:var(--rosa)}
  #inferior{display:flex;position:fixed;z-index:30;left:0;right:0;bottom:0;height:calc(var(--alto-nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg,rgba(4,26,13,.9),#041a0d 40%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  #inferior a,#inferior button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--tx3);font-size:.7rem;font-weight:700}
  #inferior svg{width:24px;height:24px}
  #inferior .activo{color:var(--tx)}
  body.en-vivo #inferior button[data-nav=vivo]{color:var(--rosa)}
  #aviso{bottom:calc(var(--alto-nav) + var(--alto-mini) + 28px + env(safe-area-inset-bottom))}

  #pantalla{display:flex;flex-direction:column;position:fixed;inset:0;z-index:60;overflow:auto;
    padding:calc(12px + env(safe-area-inset-top)) 24px calc(22px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#097F49 0,#0A5A28 55%,#041a0d 100%)}
  .pant-cab{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;color:var(--tx2);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  .pant-cab button{width:44px;height:44px;display:grid;place-items:center}
  .pant-cab svg{width:28px;height:28px}
  .pant-cov{display:block;width:min(78vw,340px);margin:18px auto 22px}
  .pant-cov .cov{width:100%;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .pant-info{margin-bottom:14px}
  .pant-info h2{font:800 1.7rem/1.05 Kanit,Impact,sans-serif;text-transform:uppercase}
  .pant-info p{color:var(--tx2);margin-top:4px}
  #pantalla .prog{flex-direction:column;align-items:stretch;gap:2px;max-width:none}
  #pantalla input[type=range]{height:22px}
  #pantalla input[type=range]::-webkit-slider-thumb{opacity:1}
  #pantalla .tiempos{display:flex;justify-content:space-between}
  #pantalla .prog time{min-width:0}
  .ctl.grande{gap:16px;margin:10px 0 18px}
  .ctl.grande button{width:44px;height:44px}
  .ctl.grande button svg{width:24px;height:24px}
  .ctl.grande .play{width:68px;height:68px}
  .ctl.grande .play svg{width:30px;height:30px}
  .pildora.grande{align-self:center;font-size:1.05rem;padding:.55rem 1.2rem}
  .pant-sigue{text-align:center;color:var(--tx2);font-size:.88rem;margin-top:14px}
}
@media (max-width:380px){
  .vivo h1{font-size:2.1rem}
  .btn-vivo,.btn-sec{padding:.8rem 1.15rem}
}
.giro{animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.giro{animation:giro 2.4s linear infinite!important}}