:root{color-scheme:dark;
  /* Colores tomados del logotipo */
  --green:#6af401;--green-deep:#35b802;--cyan:#00cbfd;--blue:#0b8cf2;--magenta:#d620b3;--orange:#fc7f03;--slate:#313e4f;
  --brand-gradient:linear-gradient(100deg,#35b802,#00cbfd 30%,#0b8cf2 52%,#d620b3 78%,#fc7f03);
  --action-gradient:linear-gradient(100deg,#0b8cf2,#d620b3);
  --bg:#0b1017;--panel:#131a24;--panel2:#1a2332;--text:#f4f7fb;--muted:#a3adbd;--line:rgba(255,255,255,.09)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:radial-gradient(ellipse at 20% -10%,rgba(11,140,242,.22),transparent 45%),radial-gradient(ellipse at 85% -5%,rgba(214,32,179,.16),transparent 40%),var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button,a{font:inherit}a{color:inherit;text-decoration:none}.page-shell{width:min(100% - 36px,1040px);margin:0 auto}
.topbar{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}.brand-logo{width:48px;height:48px;object-fit:contain;border-radius:8px;background:#0f151e}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-size:16px;letter-spacing:.09em}.brand-copy em{font-style:normal;color:var(--cyan)}.brand-copy small{font-size:9px;letter-spacing:.24em;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:9px;flex-shrink:0}.live-pill{display:flex;align-items:center;gap:8px;border:1px solid #fc7f0366;background:#fc7f0318;color:#ffa84d;border-radius:99px;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.1em}.live-pill i,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fc7f03;box-shadow:0 0 12px #fc7f03}
main{padding:44px 0 54px}.intro{text-align:center;margin:0 auto 28px;max-width:660px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.24em;color:var(--cyan)}h1{font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.04em;margin:12px 0}h1 span{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-copy{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.install-top-wrap{display:flex;justify-content:center;margin-top:18px}
.install-top-button{background:var(--action-gradient);border-color:transparent;color:#fff;box-shadow:0 8px 22px #0b8cf238}
.player-card{background:linear-gradient(160deg,#172030,#0f151e);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px #0008}.player-heading,.player-footer{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}.player-heading{font-size:12px;color:#d4d1dc}.player-heading>div{display:flex;align-items:center;gap:9px}.live-label{font-size:10px;letter-spacing:.15em;color:#ffa84d;font-weight:900}
.video-wrap{position:relative;background:#030304;aspect-ratio:16/9;max-height:70vh;overflow:hidden}.video-wrap video{width:100%;height:100%;display:block;object-fit:contain;background:#030304}.video-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:18px;background:radial-gradient(ellipse at center,#0b8cf226,transparent 68%);pointer-events:none}.video-overlay.hidden{display:none}.video-overlay strong{font-size:clamp(17px,3vw,24px);letter-spacing:.16em}.video-overlay p{font-size:12px;color:#c4c0ca;margin:0 0 4px}.signal-symbol{height:36px;display:flex;align-items:center;gap:4px}.signal-symbol span{width:5px;border-radius:4px;background:var(--cyan);box-shadow:0 0 16px #00cbfd66}.signal-symbol span:nth-child(1){background:var(--green)}.signal-symbol span:nth-child(2){background:var(--cyan)}.signal-symbol span:nth-child(3){background:var(--magenta)}.signal-symbol span:nth-child(4){background:var(--orange)}.signal-symbol span:nth-child(1){height:14px}.signal-symbol span:nth-child(2){height:27px}.signal-symbol span:nth-child(3){height:36px}.signal-symbol span:nth-child(4){height:20px}
.primary-button,.secondary-button,.icon-button{border:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:750;cursor:pointer;transition:transform .15s,filter .15s}.primary-button{padding:13px 18px;background:var(--action-gradient);color:white;box-shadow:0 8px 22px #0b8cf238}.primary-button:hover,.secondary-button:hover,.icon-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.video-overlay .primary-button{pointer-events:auto}.player-footer{border-top:1px solid var(--line);gap:12px}.now-playing{display:flex;align-items:center;gap:12px}.now-playing>div{display:flex;flex-direction:column;gap:3px}.now-playing strong{font-size:12px}.now-playing small{font-size:11px;color:var(--muted)}.equalizer{height:18px;display:flex;align-items:center;gap:3px}.equalizer i:nth-child(1){background:var(--green)}.equalizer i:nth-child(2){background:var(--cyan)}.equalizer i:nth-child(3){background:var(--magenta)}.equalizer i:nth-child(4){background:var(--orange)}.equalizer i{width:3px;border-radius:3px;background:var(--cyan);height:8px;animation:equalize .8s ease-in-out infinite alternate}.equalizer i:nth-child(2){height:15px;animation-delay:.2s}.equalizer i:nth-child(3){height:11px;animation-delay:.4s}.equalizer i:nth-child(4){height:6px;animation-delay:.1s}@keyframes equalize{to{height:4px}}
.icon-button{background:var(--panel2);border:1px solid var(--line);padding:9px 12px;color:#eee;font-size:16px}.icon-button span{font-size:11px}.action-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:22px 0 16px}.secondary-button{padding:12px 16px;background:#ffffff0a;border:1px solid var(--line);color:#eee}.help-note{text-align:center;color:#9aa4b4;font-size:12px;line-height:1.6;max-width:600px;margin:0 auto}footer{border-top:1px solid var(--line);padding:20px 0 26px;display:flex;justify-content:space-between;gap:12px;color:#8791a1;font-size:11px}
@media(max-width:560px){.page-shell{width:min(100% - 24px,1040px)}.topbar{height:72px}.brand-logo{width:40px;height:40px}.brand-copy strong{font-size:13px}.live-pill{font-size:9px;padding:7px 9px}.topbar-actions{gap:6px}.share-top-button{padding:7px 9px;font-size:10px}.share-top-button>span:first-child{font-size:15px}main{padding:32px 0 38px}.intro{margin-bottom:22px}.player-heading,.player-footer{padding:12px}.player-card{border-radius:13px}.video-wrap{aspect-ratio:16/10}.video-overlay p{max-width:240px}.action-row>*{width:100%}footer{flex-direction:column;text-align:center}}


/* Pantalla de bienvenida: brillo suave del logotipo original */
.splash-screen{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(ellipse at center,rgba(11,140,242,.18),transparent 50%),#0b1017;transition:opacity .65s ease,visibility .65s ease;overflow:hidden}
.splash-screen.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.splash-glow{position:absolute;width:min(68vw,380px);aspect-ratio:1;border-radius:50%;background:conic-gradient(#6af401,#00cbfd,#0b8cf2,#d620b3,#fc7f03,#6af401);filter:blur(95px);opacity:.16;animation:splashAura 3.2s ease-in-out infinite alternate}
.splash-logo{position:relative;width:clamp(118px,24vw,180px);height:clamp(118px,24vw,180px);object-fit:contain;border-radius:24px;animation:logoGlow 2.8s ease-in-out infinite;filter:drop-shadow(0 0 7px #00cbfd40)}
.splash-title{position:relative;margin:12px 0 0;font-size:clamp(22px,5vw,31px);font-weight:900;letter-spacing:.13em}.splash-title span{color:var(--cyan)}
.splash-caption{position:relative;margin:0;color:var(--muted);font-size:10px;letter-spacing:.32em}
.splash-loader{position:relative;display:flex;gap:5px;align-items:center;margin-top:22px}.splash-loader span{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:loaderPulse 1s ease-in-out infinite}.splash-loader span:nth-child(1){background:var(--green)}.splash-loader span:nth-child(2){animation-delay:.15s;background:var(--blue)}.splash-loader span:nth-child(3){animation-delay:.3s;background:var(--magenta)}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 7px #00cbfd35) drop-shadow(0 0 0 #d620b300);transform:scale(1)}50%{filter:drop-shadow(0 0 15px #00cbfd80) drop-shadow(0 0 30px #d620b345);transform:scale(1.025)}}
@keyframes splashAura{from{transform:scale(.86);opacity:.08}to{transform:scale(1.12);opacity:.19}}
@keyframes loaderPulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.share-top-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 11px;border:1px solid #00cbfd66;border-radius:999px;background:linear-gradient(110deg,#0b8cf233,#d620b333);color:#fff;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s;box-shadow:0 4px 18px #0b8cf21c}
.share-top-button:hover{filter:brightness(1.2);transform:translateY(-1px);box-shadow:0 5px 20px #0b8cf240}
.share-top-button>span:first-child{font-size:16px;line-height:1}
.external-player{padding:12px 16px}
.video-wrap{box-shadow:inset 0 0 0 1px #ffffff08}
.player-card{border-color:#00cbfd2b;box-shadow:0 24px 70px #0008,0 0 36px #0b8cf218}
.player-heading{background:linear-gradient(90deg,#00cbfd0f,#d620b30a 45%,transparent 75%)}
.video-overlay{backdrop-filter:blur(1.5px)}
@media(max-width:380px){.share-top-label{display:none}.share-top-button{width:34px;height:34px;padding:0}.topbar-actions{gap:5px}}
@media(max-width:560px){.splash-logo{border-radius:18px}.action-row .external-player{width:100%}}
@media(prefers-reduced-motion:reduce){.splash-logo,.splash-glow,.splash-loader span,.equalizer i{animation:none!important}.splash-screen{transition:none}}


/* ---- Mejoras: accesibilidad, avisos y controles sobre el video ---- */
:focus-visible{outline:2px solid #00cbfd;outline-offset:3px;border-radius:8px}
.video-chips{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:8px;z-index:2;pointer-events:none}
.video-chips [hidden]{display:none}
.chip{pointer-events:auto;border:1px solid #ffffff2a;background:#0b1017cc;color:#fff;border-radius:999px;padding:8px 13px;font-size:12px;font-weight:750;cursor:pointer;backdrop-filter:blur(6px);transition:filter .15s}
.chip:hover{filter:brightness(1.25)}
.chip-right{margin-left:auto;border-color:#fc7f0399}
.ios-hint{max-width:420px;margin:16px auto 0;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#ffffff08;color:#c4c0ca;font-size:12px;line-height:1.6}
.offline-banner{position:sticky;top:0;z-index:900;padding:calc(9px + env(safe-area-inset-top)) 14px 9px;text-align:center;font-size:12px;font-weight:700;background:#8a3b00;color:#fff}
.offline-banner[hidden],.toast[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,12px);z-index:950;max-width:calc(100% - 32px);padding:11px 18px;border-radius:999px;background:var(--panel2);border:1px solid #00cbfd55;color:#fff;font-size:13px;font-weight:700;box-shadow:0 12px 36px #000a;opacity:0;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(display-mode:standalone){.topbar{padding-top:4px}}
@media(prefers-reduced-motion:reduce){.toast,.chip{transition:none}}

/* Botones de color del logotipo */
.btn-orange{border-color:#fc7f0399;background:linear-gradient(100deg,#fc7f0326,#fc7f0312);color:#ffa84d}
.btn-green{border-color:#6af40199;background:linear-gradient(100deg,#6af40124,#35b80214);color:#8dfa3a}
.btn-cyan{border-color:#00cbfd99;background:linear-gradient(100deg,#00cbfd24,#0b8cf214);color:#4fdcff}
.btn-orange:hover{box-shadow:0 6px 20px #fc7f0333}
.btn-green:hover{box-shadow:0 6px 20px #6af40130}
.btn-cyan:hover{box-shadow:0 6px 20px #00cbfd30}

[hidden]{display:none!important}
.external-player{text-align:center}