/* StreamCore V4.1 RC3 — gris premium, sin metalizados ni degradados fuertes */
:root{
  --color:#8EA4FF;--color-rgb:142,164,255;--color2:#A8B8FF;--ok:#51D7A3;--warn:#D8A84E;--err:#E06C7A;
  --bg:#090C12;--bg2:#0C1017;--surface:#111720;--surface2:#151D28;--card:#121923;
  --line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.13);
  --text:#F4F6FA;--muted:#A8B1BF;--soft:#778292;--dark:#05070A;
  --shadow:0 18px 58px rgba(0,0,0,.38);--radius:18px;--font:Inter,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input,textarea,select{font-family:inherit}button{cursor:pointer}a{color:var(--color);text-decoration:none}.honeypot{position:absolute;left:-9999px;opacity:0}.muted{color:var(--muted);font-size:14px;line-height:1.6}
.screen-login{min-height:100vh;position:relative;overflow:hidden;background:#05070a}.login-bg{position:absolute;inset:0;background:radial-gradient(circle at 22% 18%,rgba(var(--color-rgb),.10),transparent 32%),linear-gradient(135deg,#070A10,#10151e 48%,#05070a);filter:saturate(.82)}.login-bg.has-media{background:#020307}.login-bg .hero-media-bg{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.46) saturate(.75) blur(.3px)}.login-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.38) 50%,rgba(0,0,0,.76))}.login-shade{position:absolute;inset:0;background:radial-gradient(circle at 74% 36%,rgba(var(--color-rgb),.10),transparent 28%),linear-gradient(180deg,rgba(8,10,15,.25),#05070b)}.login-shell{position:relative;z-index:2;min-height:100vh;display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:64px;align-items:center;width:min(1120px,calc(100% - 40px));margin:0 auto}.login-card{background:rgba(17,23,32,.92);border:1px solid var(--line2);border-radius:24px;padding:30px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}.brand-line{display:flex;align-items:center;gap:12px;margin-bottom:28px}.brand-line strong,.client-brand strong{display:block;font-size:16px;font-weight:800}.brand-line span,.client-brand span{display:block;color:var(--soft);font-size:12px;margin-top:2px}.brand-img{max-width:130px;max-height:42px;object-fit:contain}.brand-fallback,.client-brand-fallback{width:42px;height:42px;border-radius:12px;background:#1b2431;border:1px solid var(--line2);display:grid;place-items:center;font-weight:900;color:#fff}
.auth-view h1{font-size:27px;letter-spacing:-.6px;margin-bottom:8px}.auth-view p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:22px}.auth-view label,.client-section label{display:block;text-transform:uppercase;letter-spacing:.7px;color:var(--soft);font-weight:800;font-size:11px;margin:14px 0 7px}.field{width:100%;min-height:46px;background:#0A0E15;border:1px solid var(--line2);border-radius:12px;color:var(--text);outline:none;padding:0 14px;font-size:14px;transition:.18s}.field:focus{border-color:rgba(var(--color-rgb),.55);box-shadow:0 0 0 3px rgba(var(--color-rgb),.12)}.textarea{padding:13px 14px;min-height:120px;resize:vertical;line-height:1.55}.password-wrap{position:relative}.password-wrap .field{padding-right:52px}.eye-btn{position:absolute;right:8px;top:7px;width:34px;height:32px;border:0;background:transparent;color:var(--muted);border-radius:10px}.eye-btn:hover{background:rgba(255,255,255,.05);color:var(--text)}
.btn-primary{border:1px solid rgba(255,255,255,.12);background:#1B2533;color:white;border-radius:12px;height:44px;padding:0 20px;font-weight:800;font-size:14px;box-shadow:none;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary:hover{background:#253247;border-color:rgba(var(--color-rgb),.35);transform:translateY(-1px)}.btn-primary.full{width:100%;margin-top:20px}.btn-primary.small{height:36px;border-radius:10px}.btn-ghost{border:1px solid var(--line2);background:rgba(255,255,255,.025);color:var(--muted);border-radius:12px;height:42px;padding:0 18px;font-weight:700}.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.055)}.auth-links{text-align:center;margin-top:17px;font-size:14px}.alert{padding:12px 14px;border-radius:12px;margin-top:14px;font-size:13px;line-height:1.5;border:1px solid rgba(var(--color-rgb),.22);background:rgba(var(--color-rgb),.08);color:#c8d2ff}.alert.error{border-color:rgba(224,108,122,.32);background:rgba(224,108,122,.10);color:#ffb3bd}.login-copy{max-width:560px}.hero-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.055);border:1px solid var(--line2);color:#fff;border-radius:999px;padding:8px 13px;font-size:12px;text-transform:uppercase;letter-spacing:.8px;margin-bottom:22px}.hero-badge span{width:7px;height:7px;border-radius:50%;background:var(--color);box-shadow:0 0 0 5px rgba(var(--color-rgb),.10)}.login-copy h2{font-size:56px;line-height:1.02;letter-spacing:-2px;margin-bottom:20px}.login-copy p{font-size:18px;color:var(--muted);line-height:1.7;max-width:480px}
.client-app{min-height:100vh;background:var(--bg);display:grid;grid-template-columns:260px 1fr;position:relative;overflow:hidden}.client-hero-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 78% 12%,rgba(var(--color-rgb),.08),transparent 34%)}.client-hero-bg.has-media img,.client-hero-bg.has-media video{width:100%;height:100%;object-fit:cover;filter:brightness(.38) saturate(.72);opacity:.65}.client-hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,12,18,.72),#090c12 70%)}.client-sidebar{position:sticky;z-index:1;top:0;background:#0B0F16;border-right:1px solid var(--line);padding:20px 16px;display:flex;flex-direction:column;min-height:100vh}.client-brand{display:flex;align-items:center;gap:12px;padding:10px 8px 20px;border-bottom:1px solid var(--line);margin-bottom:18px}.client-brand img{max-width:130px;max-height:42px;object-fit:contain}.client-nav{display:flex;flex-direction:column;gap:7px}.client-nav button{height:42px;border:1px solid transparent;background:transparent;color:var(--muted);text-align:left;padding:0 12px;border-radius:12px;font-weight:700;display:flex;align-items:center;gap:10px}.nav-ico{width:21px;height:21px;border-radius:8px;border:1px solid rgba(255,255,255,.12);display:inline-grid;place-items:center;color:#f7f8fb;font-size:12px;line-height:1;background:rgba(255,255,255,.035)}.client-nav button.active,.client-nav button:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.10);color:var(--text)}.client-nav button.active .nav-ico,.client-nav button:hover .nav-ico{border-color:rgba(var(--color-rgb),.35);background:rgba(var(--color-rgb),.13)}.logout{margin-top:auto;width:100%}.client-main{position:relative;z-index:1;padding:34px;max-width:1280px;width:100%;margin:0 auto}.client-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:28px}.client-topbar h2{font-size:28px;letter-spacing:-.7px}.client-topbar h2 span{color:var(--color)}.client-topbar p{color:var(--muted);margin-top:5px}.client-section{display:none}.client-section.active{display:block}.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:16px;margin-bottom:18px}.kpi{background:rgba(18,25,35,.86);border:1px solid var(--line);border-left:3px solid rgba(var(--color-rgb),.55);border-radius:18px;padding:18px;min-height:118px}.kpi span{display:block;color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:900;margin-bottom:12px}.kpi strong{display:block;font-size:29px;letter-spacing:-.8px}.kpi em{display:block;color:var(--soft);font-size:12px;font-style:normal;margin-top:8px}.panel-card{background:rgba(17,23,32,.88);border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:18px;box-shadow:0 12px 34px rgba(0,0,0,.18)}.panel-card h3{font-size:18px;margin-bottom:8px}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.info-grid div{background:#0B1017;border:1px solid var(--line);border-radius:14px;padding:14px}.info-grid span{display:block;color:var(--soft);font-size:11px;text-transform:uppercase;font-weight:900;margin-bottom:7px}.info-grid b{font-size:16px}.device-list,.mini-list,.faq-list{display:grid;gap:10px;margin-top:14px}.list-item,.faq-item{background:#0B1017;border:1px solid var(--line);border-radius:14px;padding:14px}.list-item strong,.faq-item strong{display:block;margin-bottom:5px}.list-item span,.faq-item p{display:block;color:var(--muted);font-size:13px;line-height:1.55}.ticket-open{color:var(--warn)}.ticket-closed{color:var(--ok)}
.portal-ticker{position:fixed;z-index:45;left:0;right:0;bottom:0;height:42px;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -12px 34px rgba(0,0,0,.25);display:none}.portal-ticker-track{height:100%;display:flex;align-items:center;gap:18px;white-space:nowrap;will-change:transform;animation:scTicker var(--ticker-speed,28s) linear infinite;padding-left:100%}.portal-ticker-logo{max-height:26px;max-width:80px;object-fit:contain;margin-right:12px}.portal-ticker-text{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.1px}@keyframes scTicker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
/* v4.9.12: rediseño de la barra de cookies — antes cuadro plano con borde
   simple, ahora estilo glass con blur, icono circular y mejor jerarquía. */
.cookie-banner{position:fixed;z-index:50;left:20px;right:20px;bottom:20px;max-width:640px;margin:0 auto;
  background:rgba(14,16,20,.82);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -16px rgba(0,0,0,.6);border-radius:18px;padding:16px 18px;
  display:flex;align-items:center;gap:16px}
.cookie-icon{flex:none;width:38px;height:38px;border-radius:50%;background:rgba(var(--color-rgb,142,164,255),.14);
  border:1px solid rgba(var(--color-rgb,142,164,255),.3);display:grid;place-items:center;font-size:16px}
.cookie-copy{flex:1;min-width:0}
.cookie-banner strong{font-size:13.5px;font-weight:800;display:block;margin-bottom:2px}
.cookie-banner #open-policy{color:var(--color,#8EA4FF);font-size:12.5px;font-weight:700;text-decoration:none}
.portal-ticker[style*="display: block"]~.cookie-banner,.portal-ticker[style*="display:block"]~.cookie-banner{bottom:62px}.cookie-banner p{color:var(--muted);font-size:13px;margin:4px 0}.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:22px}.modal-card{width:min(720px,100%);max-height:86vh;overflow:auto;background:var(--surface);border:1px solid var(--line2);border-radius:22px;padding:26px;box-shadow:var(--shadow);position:relative}.modal-card.small-card{max-width:430px}.modal-close{position:absolute;right:14px;top:12px;background:transparent;border:0;color:var(--muted);font-size:28px}.policy-content{color:var(--muted);line-height:1.7;margin-top:16px;white-space:pre-wrap}.row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
@media(max-width:900px){.login-shell{grid-template-columns:1fr;gap:22px;padding:28px 0}.login-copy{display:none}.client-app{grid-template-columns:1fr}.client-sidebar{position:relative;min-height:auto}.client-nav{display:grid;grid-template-columns:repeat(2,1fr)}.client-main{padding:22px}.client-topbar{align-items:center;flex-direction:column;text-align:center}.client-topbar .btn-primary{align-self:center}.kpi-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:1fr}.cookie-banner{flex-direction:column;align-items:flex-start}.portal-ticker{height:38px}}@media(max-width:520px){.login-card{padding:24px}.client-nav{grid-template-columns:1fr}.login-shell{width:min(100% - 24px,440px)}.client-main{padding:16px 14px 58px}.login-copy h2{font-size:38px}.btn-primary{width:100%}.client-topbar .btn-primary{width:min(260px,100%);justify-content:center}}
/* Defensa anti-caché: si el navegador mezcla HTML antiguo, ocultar ticker EPG estático viejo. */.lc-epg,.ticker,#lc-epg-inner{display:none!important;}


/* StreamCore V4.1 RC2 — cierre visual/funcional */
:root{--bg:#090C12;--surface:#111720;--surface2:#151D28;--line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.13);--text:#F4F6FA;--muted:#A8B1BF;--soft:#778292;--color:#8EA4FF;--color-rgb:142,164,255;}
.btn-primary{background:#1B2533!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.btn-primary:hover{background:#253247!important;border-color:rgba(var(--color-rgb),.38)!important;transform:translateY(-1px);}
.btn-ghost{background:rgba(255,255,255,.025)!important;background-image:none!important;box-shadow:none!important;}
.brand-line img.brand-img{max-width:210px;max-height:54px;}
.client-brand img{max-width:178px;max-height:48px;}
.client-sidebar{padding-bottom:70px;}
.logout{margin-top:0;width:auto;}
.top-actions{display:flex;align-items:center;gap:12px;}
.logout-top{height:44px;min-width:84px;}
body.ticker-on .client-main{padding-bottom:86px;}
body.ticker-on .client-sidebar{padding-bottom:86px;}
.client-hero-bg.has-media{background-position:center;background-size:cover;background-repeat:no-repeat;opacity:1;}
.client-hero-bg.has-media img,.client-hero-bg.has-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.78);opacity:.52;}
.client-hero-bg.has-media:after{background:linear-gradient(180deg,rgba(9,12,18,.72),rgba(9,12,18,.88) 52%,#090c12 100%),radial-gradient(circle at 75% 12%,rgba(var(--color-rgb),.12),transparent 35%);}
.public-faq{position:relative;z-index:2;width:min(1120px,calc(100% - 40px));margin:0 auto 48px;padding:24px;background:rgba(17,23,32,.78);border:1px solid var(--line);border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.28);backdrop-filter:blur(12px);}
.public-faq-head{margin-bottom:18px;}
.public-faq-head span{display:inline-block;color:var(--soft);font-size:11px;text-transform:uppercase;letter-spacing:.8px;font-weight:900;margin-bottom:6px;}
.public-faq-head h2{font-size:24px;letter-spacing:-.5px;margin:0 0 6px;}
.public-faq-head p{margin:0;color:var(--muted);font-size:14px;}
.public-faq-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.public-faq-item{background:var(--zp-card-bg,#0E141C);border:1px solid var(--zp-card-line,rgba(255,255,255,.08));border-radius:18px;padding:16px;box-shadow:0 14px 36px -18px rgba(0,0,0,.55);}
.public-faq-item strong{display:block;font-size:14px;margin-bottom:8px;color:var(--text);}
.public-faq-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.55;}
.portal-ticker{height:44px;}
.portal-ticker-track{padding-left:100%;}
@media(max-width:900px){.top-actions{width:100%;justify-content:center;flex-wrap:wrap}.logout-top{width:auto}.public-faq{width:min(100% - 24px,720px);margin-bottom:32px}.public-faq-list{grid-template-columns:1fr}.client-sidebar{padding-bottom:18px}body.ticker-on .client-main{padding-bottom:92px}}
@media(max-width:520px){.top-actions{display:grid;grid-template-columns:1fr;gap:10px}.logout-top{width:100%}.public-faq{padding:18px}.public-faq-head h2{font-size:20px}}


/* StreamCore V4.1 RC3 — cierre visual, Hero real y branding */
/* FIX v4.9.10: --bg/--surface/--card tenían sesgo azul (canal azul más alto
   que rojo/verde en el hex, ej. #101620) — de ahí el aire "azul grisáceo"
   poco elegante reportado. Ahora son grises neutros/casi negro puro, look
   más premium tipo Netflix, funciona bien con cualquier color de acento que
   elija el operador. El --color de acento NO se toca — es la marca del
   operador configurada en el panel, no una decisión de diseño mía. */
:root{--bg:#0A0A0C;--bg2:#0D0D0F;--surface:#141416;--surface2:#191919;--card:#161617;--line:rgba(245,247,250,.075);--line2:rgba(245,247,250,.13);--text:#F5F7FA;--muted:#A9B4C4;--soft:#7C8798;--color:#8EA4FF;--color-rgb:142,164,255;}
.client-app{background:linear-gradient(180deg,#080B11,#0A0E15 55%,#080B11)}
.client-sidebar{background:rgba(9,13,20,.94);backdrop-filter:blur(16px)}
.client-hero-bg{opacity:1;background:radial-gradient(circle at 82% 10%,rgba(var(--color-rgb),.11),transparent 30%),radial-gradient(circle at 20% 82%,rgba(255,255,255,.035),transparent 30%)}
.client-hero-bg.has-media{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;}
/* FIX v4.9.7: brightness(.46)+opacity(.48) más un overlay oscuro ENCIMA
   (dos capas de oscurecimiento apiladas) dejaba prácticamente invisible
   cualquier imagen de fondo subida. Subido el brillo/opacidad de la imagen
   y aligerado el overlay — la imagen se nota, el texto sigue legible. */
.client-hero-bg.has-media .hero-media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.68) saturate(1);opacity:.7;}
.client-hero-bg.has-media:after{background:linear-gradient(90deg,rgba(8,11,17,.72),rgba(8,11,17,.4) 48%,rgba(8,11,17,.75)),linear-gradient(180deg,rgba(8,11,17,.38),#080B11 88%)}
.login-bg.has-media{background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;}
.login-bg.has-media .hero-media-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.82);opacity:.92;}
.login-bg.has-media:after{background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.42) 50%,rgba(0,0,0,.78))}
.btn-primary,.btn-ghost{background-image:none!important;text-shadow:none!important;box-shadow:none!important;}
.btn-primary{background:#202A3A!important;border-color:rgba(255,255,255,.13)!important;color:#fff!important;}
.btn-primary:hover{background:#2A3548!important;border-color:rgba(var(--color-rgb),.34)!important;}
.brand-line img.brand-img,.client-brand img{object-fit:contain;filter:none;}
.top-actions{display:flex;align-items:center;gap:10px;}
.logout-top{height:44px;min-width:82px;}
body.ticker-on .client-main{padding-bottom:92px;}
body.ticker-on .client-sidebar{padding-bottom:92px;}
.public-faq{margin-top:22px;margin-bottom:48px;}
@media(max-width:900px){.top-actions{width:100%;justify-content:center;flex-wrap:wrap}.logout-top{width:auto}.public-faq-list{grid-template-columns:1fr}.client-sidebar{padding-bottom:20px}body.ticker-on .client-main{padding-bottom:96px}}
@media(max-width:520px){.top-actions{display:grid;grid-template-columns:1fr;gap:10px}.logout-top{width:100%}.client-topbar{text-align:center}.client-topbar .btn-primary{width:min(260px,100%);margin:auto}}


/* StreamCore V4.1 RC4 — Cuenta, PWA y ajustes finos */
.pass-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 0 16px}
.panel-card .alert{margin-top:14px}
.modal.pwa .modal-card{border-color:rgba(var(--color-rgb),.18)}
.modal.pwa h3{font-size:22px;margin-bottom:8px}
.modal.pwa p{color:var(--muted);line-height:1.55}
@media(max-width:900px){.pass-grid{grid-template-columns:1fr}}

/* StreamCore V4.1 RC5.2 — Mobile UI tipo App */
.mobile-app-nav{display:none!important}
.mobile-app-nav button{border:0;background:transparent;color:#A8B1BF;border-radius:16px;font-weight:800;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0}
.mobile-app-nav button span{width:24px;height:24px;border:1px solid rgba(255,255,255,.13);border-radius:9px;display:grid;place-items:center;color:#fff;font-size:12px;background:rgba(255,255,255,.035)}
.mobile-app-nav button.active,.mobile-app-nav button:hover{color:#fff;background:rgba(255,255,255,.055)}
.mobile-app-nav button.active span{background:rgba(var(--color-rgb),.16);border-color:rgba(var(--color-rgb),.36)}
@media(max-width:760px){
  /* FIX · el panel de cliente ya arranca oculto (style="display:none", lo
     controla mostrarDashboard() al iniciar sesión). Esta regla vive dentro de
     un @media y useaba !important sobre TODO .client-app, lo que en CSS le
     gana a un estilo inline SIN !important — o sea, en cualquier celular
     esto forzaba el panel a mostrarse aunque no hubiese sesión iniciada
     (bug: hacer scroll en el login revelaba el portal de usuario detrás).
     Se acota a body.sc-authed, clase que solo agrega mostrarDashboard() tras
     un login exitoso. */
  body.sc-authed .client-app{display:block!important;min-height:100vh;padding-bottom:88px}
  .client-sidebar{display:none!important}
  .client-main{padding:18px 14px 104px!important;max-width:100%}
  .client-topbar{align-items:center;text-align:center;gap:14px;margin-bottom:18px}
  .client-topbar h2{font-size:25px}.client-topbar p{font-size:13px}
  .top-actions{display:flex!important;justify-content:center;width:100%;gap:9px;flex-wrap:wrap}
  .top-actions .btn-primary{width:min(230px,100%)}
  .logout-top{width:auto!important;min-width:92px}
  .kpi-grid{grid-template-columns:1fr!important;gap:12px}
  .panel-card{padding:18px;border-radius:18px}
  body.ticker-on .client-main{padding-bottom:150px!important}
}

/* StreamCore V4.2 — Planes, grillas y TV primero */
.portal-featured{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(135deg,rgba(19,27,42,.98),rgba(15,21,33,.98));border-color:rgba(var(--color-rgb),.16)}
.portal-featured h3{font-size:24px;margin:0 0 8px;letter-spacing:-.03em}.portal-featured p{max-width:680px}.featured-tv{min-width:190px;min-height:58px;font-size:15px;letter-spacing:.02em}.plan-action{display:flex;align-items:center;justify-content:space-between;gap:14px}.plan-action strong{display:block}.plan-price{color:var(--muted);font-size:13px}.request-status{font-size:12px;color:var(--muted)}
@media(max-width:760px){.portal-featured{display:grid;text-align:center;place-items:center}.featured-tv{width:100%;max-width:330px;min-height:64px}.top-actions .btn-primary{display:none!important}}
.player-sidebar-soft{background:linear-gradient(180deg,rgba(7,9,15,.78),rgba(10,14,22,.70))!important;backdrop-filter:blur(24px) saturate(.92)!important}
.pill-like{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(81,215,163,.26);background:rgba(81,215,163,.12);color:#7EE4B6;border-radius:999px;padding:6px 11px;font-weight:900;font-size:12px;white-space:nowrap}

/* StreamCore V4.2.2 hotfix: TV primero + menú hamburguesa post-login móvil */
@media(max-width:700px){
  #destacado-wrap.portal-featured{display:grid!important;grid-template-columns:1fr!important;text-align:center;gap:18px;padding:24px 18px;border-radius:24px;background:linear-gradient(180deg,rgba(20,30,46,.94),rgba(12,17,26,.94));}
  #destacado-wrap .featured-tv{width:100%;min-height:68px;font-size:18px;border-radius:18px;letter-spacing:.2px;}
  .client-topbar{margin-bottom:18px;}
  .client-nav{display:none!important;}
  .client-sidebar{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px;}
  .logout-top{display:inline-flex!important;}
}


/* StreamCore V4.2.2 — Portal móvil TV primero con menú secundario hamburguesa */
.mobile-menu-btn{display:none;border:1px solid var(--line);background:rgba(255,255,255,.045);color:#fff;border-radius:14px;width:44px;height:44px;font-size:20px;font-weight:900;align-items:center;justify-content:center;line-height:1;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.client-mobile-drawer{display:none;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.52);backdrop-filter:blur(8px)}
.client-mobile-drawer.open{display:block}
.drawer-panel{position:absolute;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));background:rgba(16,22,32,.98);border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:12px;box-shadow:0 24px 80px rgba(0,0,0,.48)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:8px 6px 12px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-head strong{font-size:15px;letter-spacing:.01em}.drawer-head button{width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.client-mobile-drawer .drawer-panel{background:#fff;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:4px;position:absolute;left:12px;top:12px;min-width:260px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.client-mobile-drawer .drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #eee}
.client-mobile-drawer .drawer-head strong{color:#111;font-size:16px}
.client-mobile-drawer .drawer-head button{background:none;border:1px solid #ddd;border-radius:50%;width:32px;height:32px;font-size:18px;color:#555;cursor:pointer}
.client-mobile-drawer .drawer-panel>button:not(#btn-client-menu-close){width:100%;height:48px;border:0;background:transparent;color:#222;border-radius:14px;padding:0 12px;display:flex;align-items:center;gap:12px;text-align:left;font-weight:700;cursor:pointer;font-size:14px}
.client-mobile-drawer .drawer-panel>button:not(#btn-client-menu-close):hover{background:#f1f5f9}
.client-mobile-drawer .drawer-panel>button span{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;border:1px solid #e2e8f0;background:#f8fafc;color:#555;font-size:13px}
.client-mobile-drawer .drawer-panel>button.danger{color:#e53e3e}
.client-mobile-drawer .drawer-panel>button.danger span{border-color:rgba(229,62,62,.3);background:rgba(229,62,62,.08)}
@media(max-width:700px){
  .mobile-menu-btn{display:inline-flex;position:absolute;left:14px;top:14px;z-index:5}
  .client-topbar{position:relative;padding-top:10px;padding-left:48px;padding-right:48px;min-height:96px;justify-content:center!important;}
  .client-title{width:100%;text-align:center}.client-title h2{font-size:27px!important;margin-top:0}.client-title p{max-width:320px;margin:6px auto 0;color:var(--muted)}
  /* FIX v4.9.14: segunda copia de .logout-top{display:none!important} que
     nunca se tocó — solo había arreglado la de la sección "V4.2.3" en
     v4.9.9, pero esta vive en un @media distinto y seguía ocultando el
     botón Salir en pantallas angostas específicamente. */
  #sec-inicio.active{display:flex!important;flex-direction:column;}
  #destacado-wrap.portal-featured{order:-10;margin-bottom:16px;}
  .kpi-grid{order:0;}
  #plan-comercial-wrap{order:2;}
  #premium-wrap{order:3;}
  body.ticker-on .client-main{padding-bottom:128px!important;}
}

/* StreamCore V4.2.3 — Portal desktop alineado con menú sutil y TV primero */
.client-app{grid-template-columns:1fr!important;}
.client-sidebar{display:none!important;}
.client-main{max-width:1180px;}
/* FIX v4.9.9: .logout-top{display:none!important} no tenía ningún motivo
   de diseño válido — un botón de cerrar sesión invisible es un problema
   funcional real, no una decisión de diseño. Se quita la regla completa.
   Nuevo botón de menú (abre el drawer con ticket/pagos/renovar/dispositivos,
   antes sin ningún disparador en toda la app) estilizado igual que Salir. */
.menu-open-btn{height:44px;min-width:84px;display:inline-flex;align-items:center;gap:6px}
.mobile-menu-btn{display:inline-flex!important;position:static!important;flex:0 0 44px;}
.client-topbar{justify-content:flex-start;align-items:center;}
.client-title{flex:1;}
.client-mobile-drawer .drawer-panel{width:min(420px,calc(100% - 24px));right:auto;bottom:auto;}
@media(min-width:701px){
  .client-mobile-drawer .drawer-panel{left:24px;top:24px;}
  .client-mobile-drawer{background:rgba(0,0,0,.38);}
}
@media(max-width:700px){
  .mobile-menu-btn{position:absolute!important;left:14px;top:14px;}
}

/* StreamCore V4.2.5 — Portal usuario TV primero compacto */
/* FIX v4.9.14: .client-tv-first{display:block!important} forzaba a
   #sec-inicio (el único elemento que usa esta clase) a quedar SIEMPRE
   visible, tuviera o no la clase .active — anulaba por completo el
   mostrar/ocultar de showSection(). Por eso al entrar a "Ajustes" la
   sección de cuenta SÍ aparecía, pero el inicio (los 3 tiles) nunca se
   ocultaba — quedaban los dos superpuestos en la misma pantalla. Residuo
   de un rediseño anterior a que existiera el sistema de secciones actual. */
.portal-featured-compact{display:flex!important;align-items:center;justify-content:center;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;margin:8px 0 14px!important;}
.portal-featured-compact .featured-tv-main{width:min(520px,100%);min-height:74px;border-radius:24px;font-size:18px;letter-spacing:.02em;box-shadow:0 18px 48px rgba(var(--color-rgb),.25);}
.client-plan-compact{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px!important;border-radius:22px!important;background:rgba(17,24,35,.90)!important;}
.plan-compact-main{display:flex;align-items:center;gap:12px;min-width:0;}
.plan-compact-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;border:1px solid rgba(var(--color-rgb),.28);background:rgba(var(--color-rgb),.13);font-weight:950;color:#fff;flex:0 0 auto;}
.plan-compact-main span{display:block;color:#86A0C2;text-transform:uppercase;font-size:11px;font-weight:950;letter-spacing:.08em;margin-bottom:3px;}
.plan-compact-main strong{display:block;font-size:19px;color:#fff;line-height:1.1;}
.plan-compact-main em{display:block;font-style:normal;color:var(--muted);font-size:12px;margin-top:3px;}
.plan-compact-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.plan-compact-meta span{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line2);background:#0A0E15;color:var(--muted);border-radius:999px;padding:8px 10px;font-size:12px;font-weight:850;white-space:nowrap;}
.plan-compact-meta b{color:#fff;}
.client-hidden-metrics{display:none!important;}
.client-secondary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;}
.client-secondary-grid button{background:#0A0E15;border:1px solid var(--line2);border-radius:18px;color:#fff;text-align:left;padding:16px;min-height:98px;cursor:pointer;}
.client-secondary-grid strong{display:block;font-size:16px;margin-bottom:5px;}
.client-secondary-grid span{display:block;color:var(--muted);font-size:12px;line-height:1.35;}
@media(max-width:700px){
  .client-title p{display:none!important;}
  .portal-featured-compact{margin-top:10px!important;}
  .portal-featured-compact .featured-tv-main{min-height:76px;width:100%;font-size:18px;border-radius:24px;}
  .client-plan-compact{display:block;text-align:center;padding:16px!important;}
  .plan-compact-main{justify-content:center;margin-bottom:12px;}
  .plan-compact-meta{justify-content:center;gap:7px;}
  .plan-compact-meta span{font-size:11px;padding:7px 9px;}
  .client-secondary-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
  .client-secondary-grid button{min-height:106px;padding:14px;}
  #premium-wrap{display:none!important;}
}

/* V4.2.8: ticketera conversacional — badge no leídos, modal de hilo */
.ticket-list-item{cursor:pointer}
.ticket-list-item:hover{border-color:rgba(var(--color-rgb),.32)}
.ticket-unread{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--color);color:#0A0E15;font-size:11px;font-weight:900;margin-left:6px;vertical-align:middle}
.ticket-modal-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 16px;font-size:13px;color:var(--muted)}
.ticket-modal-meta .ticket-open,.ticket-modal-meta .ticket-closed{font-weight:800}
.ticket-thread{display:flex;flex-direction:column;gap:10px;max-height:38vh;overflow:auto;padding:4px 2px;margin-bottom:6px}
.thread-msg{max-width:82%;border-radius:14px;padding:10px 13px;font-size:13px;line-height:1.55}
.thread-msg.from-cliente{align-self:flex-end;background:rgba(var(--color-rgb),.14);border:1px solid rgba(var(--color-rgb),.28)}
.thread-msg.from-admin{align-self:flex-start;background:#0B1017;border:1px solid var(--line)}
.thread-meta{font-size:11px;color:var(--soft);margin-bottom:5px}
.thread-body{white-space:pre-wrap;word-break:break-word}
.mt{margin-top:14px}
@media(max-width:760px){.thread-msg{max-width:92%}}


/* ═══════════════════════════════════════════════════════════════════════
   LAUNCHER · Pieza 1 (2026-08) — home del cliente rediseñada: 3 bloques con
   profundidad (TV grande + Radio/Ajustes apilados), colores tipo Ministra
   para el bloque Radio/Ajustes, marcas de agua temáticas, brillo que sigue
   el cursor, reloj+fecha grandes. Los 3 tiles usan colores FIJOS por
   categoría (rojo TV / dorado Radio / verde Ajustes) — no el color de marca
   del operador (ese se sigue usando en botones/acentos del resto del sitio).
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --tv-rgb:230,57,70;       /* rojo, para el bloque TV — fijo, no depende del color de marca del operador */
  --radio-rgb:217,166,32;   /* dorado, para el bloque Radio */
  --set-rgb:42,157,92;      /* verde, para el bloque Ajustes */
}
.launch-topline{display:flex;justify-content:flex-end;margin-bottom:10px}
.launch-clockwrap{text-align:right}
.launch-clock{font-family:inherit;font-weight:600;font-size:clamp(26px,3.6vw,36px);color:#fff;letter-spacing:.2px;line-height:1;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.launch-date{color:var(--muted);font-size:13px;margin-top:5px;text-transform:lowercase}
.launch-date::first-letter{text-transform:uppercase}

.launch-grid{display:grid;grid-template-columns:1.7fr 1fr;grid-template-rows:1fr 1fr;gap:14px;min-height:min(58vh,460px);margin-bottom:18px}
@media(max-width:900px){
  .launch-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;min-height:0}
  .launch-tv{grid-column:1/3;grid-row:1;min-height:210px}
  .launch-play{top:36%;width:58px;height:58px}
  .launch-play svg{width:24px;height:24px}
  .launch-radio{grid-column:1;grid-row:2;min-height:150px}
  .launch-settings{grid-column:2;grid-row:2;min-height:150px}
}

.launch-tile{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 24px 46px -18px rgba(0,0,0,.7),0 8px 18px -8px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s}
.launch-tile:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.26)}
.launch-tile:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 60px rgba(0,0,0,.38)}
/* halo de luz que sigue al cursor, posicionado por JS via --mx/--my */
.launch-tile:after{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:320px;height:320px;
  border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.14),transparent 62%);
  opacity:0;transition:opacity .3s;pointer-events:none}
.launch-tile:hover:after{opacity:1}
.launch-body{position:relative;z-index:2;height:100%;padding:20px;display:flex;flex-direction:column;justify-content:space-between}
.launch-wm{position:absolute;pointer-events:none;opacity:.13;z-index:0}
.launch-wm svg{color:#fff}
.launch-tile h3{margin:0 0 3px;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.2px}
.launch-tile p{margin:0;font-size:12.5px;color:rgba(255,255,255,.82)}
.launch-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.launch-ic svg{width:23px;height:23px}
.launch-hit{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer;z-index:3;padding:0}

/* FIX v4.9.7: el degradado bajaba hasta 24-42% de opacidad sobre una base
   casi negra — el color solo se notaba en una esquina y el resto del tile
   se veía oscuro/plano. Piso de opacidad subido y base aclarada un poco
   para que el color viva en todo el tile, no solo en el borde. */
.launch-tv{grid-row:1/3;grid-column:1;
  background:linear-gradient(150deg,rgba(var(--tv-rgb),.95),rgba(var(--tv-rgb),.62)),linear-gradient(#141d2c,#0e1622)}
.launch-tv:hover{box-shadow:0 32px 60px -18px rgba(var(--tv-rgb),.65)}
.launch-tv .launch-wm{right:-40px;bottom:-30px}.launch-tv .launch-wm svg{width:300px;height:300px}
.launch-tv h3{font-size:clamp(22px,2.6vw,28px)}
.launch-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.36);display:grid;place-items:center;z-index:2;transition:.2s}
.launch-tv:hover .launch-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.25)}
.launch-play svg{width:32px;height:32px;color:#fff;margin-left:3px}
.launch-badge-live{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:rgba(0,0,0,.4);
  color:#fff;padding:5px 11px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.5px}
.launch-badge-live i{width:8px;height:8px;border-radius:50%;background:#ff5b6e;box-shadow:0 0 9px #ff5b6e;animation:launchPulse 1.6s infinite}
@keyframes launchPulse{0%,100%{opacity:1}50%{opacity:.32}}
.launch-tv.is-loading .launch-play{opacity:.35}
.launch-tv.is-loading:after{content:"Cargando TV…";position:absolute;left:50%;top:44%;transform:translate(-50%,26px);
  z-index:2;color:#fff;font-weight:700;font-size:12px;background:rgba(0,0,0,.4);padding:5px 10px;border-radius:8px;opacity:1}

.launch-radio{grid-column:2;grid-row:1;
  background:linear-gradient(150deg,rgba(var(--radio-rgb),.9),rgba(var(--radio-rgb),.55)),linear-gradient(#251725,#180f1a)}
.launch-radio:hover{box-shadow:0 30px 56px -18px rgba(var(--radio-rgb),.6)}
.launch-radio .launch-wm{right:-18px;top:-8px}.launch-radio .launch-wm svg{width:190px;height:190px}

.launch-settings{grid-column:2;grid-row:2;
  background:linear-gradient(150deg,rgba(var(--set-rgb),.88),rgba(var(--set-rgb),.5)),linear-gradient(#102422,#0c1a1a)}
.launch-settings:hover{box-shadow:0 30px 56px -18px rgba(var(--set-rgb),.55)}
.launch-settings .launch-wm{right:-22px;bottom:-26px}.launch-settings .launch-wm svg{width:200px;height:200px}

@media(max-width:900px){.launch-tv .launch-wm svg{width:220px;height:220px}}

/* StreamCore V4.2.7.8 — Login Hero Visual Polish + configurable overlay/blur */
:root{
  --hero-overlay-left:.68;
  --hero-overlay-center:.36;
  --hero-overlay-right:.62;
  --hero-overlay-shade:.28;
  --hero-bg-blur:2px;
  --hero-bg-brightness:.82;
  --hero-bg-saturation:.92;
}
.screen-login .login-bg .hero-media-bg{
  filter:brightness(var(--hero-bg-brightness)) saturate(var(--hero-bg-saturation)) blur(var(--hero-bg-blur))!important;
  transform:scale(1.012);
}
.screen-login .login-bg:after{
  background:linear-gradient(90deg,rgba(0,0,0,var(--hero-overlay-left)),rgba(0,0,0,var(--hero-overlay-center)) 50%,rgba(0,0,0,var(--hero-overlay-right)))!important;
}
.screen-login .login-shade{
  background:radial-gradient(circle at 74% 36%,rgba(var(--color-rgb),.12),transparent 28%),linear-gradient(180deg,rgba(8,10,15,var(--hero-overlay-shade)),rgba(5,7,11,.44))!important;
}
.screen-login .login-card{
  background:rgba(15,23,42,.86)!important;
  border-color:rgba(226,232,240,.24)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
  box-shadow:0 24px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.screen-login .brand-line strong,
.screen-login .auth-view h1{
  color:#F8FAFC!important;
}
.screen-login .brand-line span,
.screen-login .auth-view p,
.screen-login .auth-links a{
  color:#CBD5E1!important;
}
.screen-login .hero-badge{
  background:rgba(15,23,42,.46)!important;
  border-color:rgba(248,250,252,.62)!important;
  color:#F8FAFC!important;
  box-shadow:0 10px 30px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(10px)!important;
}
.screen-login .login-copy h2{
  color:#F8FAFC!important;
  text-shadow:0 5px 28px rgba(0,0,0,.54)!important;
  letter-spacing:-2.4px!important;
}
.screen-login .login-copy p{
  color:#E2E8F0!important;
  text-shadow:0 2px 18px rgba(0,0,0,.48)!important;
}
.screen-login .field{
  background:#FFFFFF!important;
  color:#0F172A!important;
  border-color:rgba(226,232,240,.72)!important;
}
.screen-login .field::placeholder{color:#94A3B8!important;}
.screen-login .btn-primary.full{
  background:var(--color)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 18px 42px rgba(var(--color-rgb),.28)!important;
}
@media(max-width:760px){
  .screen-login .login-copy h2{letter-spacing:-1.6px!important;}
  .screen-login .login-bg:after{background:linear-gradient(180deg,rgba(0,0,0,var(--hero-overlay-center)),rgba(0,0,0,var(--hero-overlay-left)))!important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Home v4.9.74 — hero "continuar viendo" + KPIs animadas + destacados TV/
   Radio + últimos vistos + aviso del día + card de renovación (cuenta
   suspendida/vencida). Reutiliza --tv-rgb/--radio-rgb/--set-rgb definidos
   arriba (LAUNCHER · Pieza 1) para mantener los mismos colores por sección.
   ═══════════════════════════════════════════════════════════════════════ */
.zph-hero{margin-bottom:28px}
.zph-hero-signal{position:relative;border-radius:20px;overflow:hidden;min-height:360px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:28px;border:1px solid var(--line2);transition:filter .25s ease;cursor:pointer;
  background:radial-gradient(circle at 78% 15%,rgba(var(--color-rgb),.18),transparent 45%),
    radial-gradient(circle at 15% 85%,rgba(var(--tv-rgb),.14),transparent 45%),
    linear-gradient(180deg,#15161C 0%,#0B0C10 100%)}
.zph-hero-signal.st-caida{filter:grayscale(.35) brightness(.85)}
.zph-hero-signal.st-suspendida{filter:grayscale(.55) brightness(.7)}
.zph-hero-signal:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,.1) 100%)}
.zph-hero-signal>*{position:relative;z-index:2}
.zph-hero-bgimg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B0C10}
.zph-hero-bgimg img{width:100%;height:100%;object-fit:cover;filter:blur(22px) brightness(.5) saturate(1.15);transform:scale(1.2)}
.zph-hero-logo{position:absolute;inset:0 0 38% 0;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none}
.zph-hero-logo img{max-width:46%;max-height:66%;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.6))}
@media(max-width:700px){.zph-hero-logo{inset:0 0 44% 0}.zph-hero-logo img{max-width:56%}}
/* Carátula HORIZONTAL (backdrop de TMDB) del programa al aire en el último
   canal visto — reemplaza el difuminado+logo mientras hay EPG con imagen.
   z-index:0 a propósito (misma capa que .zph-hero-bgimg): debe quedar DEBAJO
   del degradado oscuro (:before, z-index:1) para que el texto siga legible. */
.zph-hero-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden}
.zph-hero-backdrop:before,.zph-hero-backdrop:after{content:'';position:absolute;inset:0;
  background-image:var(--bgimg);background-position:center;background-repeat:no-repeat}
.zph-hero-backdrop:before{background-size:cover;filter:blur(40px) brightness(.5) saturate(1.2);transform:scale(1.2)}
/* La imagen nítida se muestra completa (sin recortar cabezas) con
   background-size:contain, pero eso solo deja una caja rectangular con
   bordes duros contra el difuminado de atrás cuando el hero es más ancho
   que la proporción de la carátula (caso típico). Se difumina el borde de
   ESTA capa con una máscara en degradado — así se funde con el fondo en vez
   de verse como una caja pegada encima. */
.zph-hero-backdrop:after{background-size:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.zph-hero.has-backdrop .zph-hero-logo{display:none}
.zph-hero-progress-wrap{width:min(420px,70%);margin-bottom:18px}
.zph-hero-progress{width:100%;height:5px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.zph-hero-progress b{display:block;height:100%;background:var(--color);border-radius:3px}
.zph-hero-progress-wrap span{display:block;margin-top:6px;font-size:12px;color:var(--soft);font-variant-numeric:tabular-nums}
.zph-pill{display:inline-flex;align-items:center;gap:6px;background:#5D6FE0;color:#fff;
  border:1px solid rgba(255,255,255,.3);font-size:11.5px;font-weight:800;border-radius:999px;padding:5px 11px;width:fit-content;margin-bottom:16px;
  box-shadow:0 2px 10px rgba(93,111,224,.4)}
.zph-pill i{width:7px;height:7px;border-radius:50%;background:#fff;display:block;animation:zphPulse 1.6s infinite}
.zph-pill.muted{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.18)}
.zph-pill.muted i{animation:none;background:rgba(255,255,255,.4)}
.zph-pill.reco{background:rgba(var(--color-rgb),.16);color:var(--color);border-color:rgba(var(--color-rgb),.4)}
.zph-pill.reco i{animation:none;background:var(--color)}
@keyframes zphPulse{0%,100%{opacity:1}50%{opacity:.35}}
.zph-hero-signal h1{font-size:30px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px;color:#fff}
.zph-hero-sub{color:var(--muted);font-size:15px;margin-bottom:20px}
.zph-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.zph-hero-actions .btn-primary{background:rgba(var(--tv-rgb),.92)!important}
.zph-hero-actions .btn-primary:hover{background:rgba(var(--tv-rgb),1)!important}

/* ─── Panel de resultados del buscador (desktop/TV) ─────────────────────
   El input y el layout del topbar (.zp-search, .zp-topbar-spacer) viven en
   streamcore-enterprise.css — ahí está la autoridad real del topbar
   (body.sc-enterprise-portal, todo con !important). Acá solo el panel de
   resultados, que es un overlay flotante y no depende de ese layout. ──── */
.zp-search-results{position:fixed;z-index:120;top:64px;right:26px;width:320px;max-height:60vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:8px}
.zp-search-empty{padding:14px;color:var(--soft);font-size:13px;text-align:center}
.zp-search-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer}
.zp-search-item:hover{background:var(--card)}
.zp-search-lg{width:34px;height:34px;border-radius:8px;background:var(--card);display:flex;align-items:center;justify-content:center;
  overflow:hidden;font-size:10px;font-weight:800;color:#fff;flex:none}
.zp-search-lg img{width:100%;height:100%;object-fit:contain}
.zp-search-item b{display:block;font-size:13px;color:#fff}
.zp-search-item span{display:block;font-size:11px;color:var(--soft)}

/* ─── Buscador a pantalla completa (móvil) ──────────────────────────── */
.zp-search-overlay{position:fixed;inset:0;z-index:250;background:rgba(6,7,9,.7);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;padding:16px}
.zp-search-overlay.on{display:flex}
.zp-search-box{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--line2);border-radius:16px;
  padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.zp-search-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:11px 14px}
.zp-search-row svg{flex:none;color:var(--soft)}
.zp-search-row input{flex:1;min-width:0;background:none;border:none;color:var(--text);font-size:15px}
.zp-search-row input:focus{outline:none}
.zp-search-close{flex:none;background:none;border:none;color:var(--soft);font-size:15px}
.zp-search-results-mobile{max-height:60vh;overflow-y:auto}
.zp-search-results-mobile .zp-search-item{padding:11px 8px}

/* ─── Rieles "TV en vivo" / "Radio en vivo" — reemplazan al stack de KPIs ── */
.zph-sec-count{font-size:12.5px;color:var(--soft)}
.zph-live-card{flex:none;width:150px;cursor:pointer;display:flex;flex-direction:column;gap:9px;transition:transform .15s ease}
.zph-live-card:hover{transform:translateY(-4px)}
.zph-live-plate{position:relative;width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
/* Sin marco propio: el borde/fondo solo se ve cuando no hay logo (fallback de
   iniciales) — con logo, la imagen ocupa el 100% y lleva sus propios bordes
   redondeados, así todos los logos quedan con la misma proporción sin
   importar cuánto padding traiga el archivo original. */
.zph-live-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#fff;font-size:13px;background:var(--card);border:1px solid var(--line2);
  border-radius:16px;overflow:hidden}
.zph-live-fallback img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.zph-live-name{font-size:12.5px;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zph-live-card.pinned{width:186px}
.zph-live-card.pinned .zph-live-plate{aspect-ratio:16/10}
.zph-live-card.pinned .zph-live-fallback{border-color:rgba(var(--color-rgb),.5)}
.zph-live-ribbon{position:absolute;top:9px;left:9px;background:var(--color);color:#0B0F19;font-size:9.5px;
  font-weight:800;letter-spacing:.3px;padding:4px 8px;border-radius:6px;z-index:2}
.zph-live-card[data-tipo="radio"] .zph-live-fallback,
.zph-live-card[data-tipo="radio"] .zph-live-fallback img{border-radius:50%}
.zph-live-card.pinned[data-tipo="radio"] .zph-live-plate{aspect-ratio:1/1}
.zph-live-eq{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:2.5px;
  align-items:flex-end;height:14px}
.zph-live-eq span{width:2.5px;background:var(--color);border-radius:1px;animation:zphEqLive 1s ease-in-out infinite}
.zph-live-eq span:nth-child(1){height:6px;animation-delay:0s}
.zph-live-eq span:nth-child(2){height:12px;animation-delay:.15s}
.zph-live-eq span:nth-child(3){height:8px;animation-delay:.3s}
.zph-live-eq span:nth-child(4){height:11px;animation-delay:.45s}
@keyframes zphEqLive{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

.zph-kpi-stack{display:flex;flex-direction:column;gap:12px}
.zph-kpi{position:relative;border-radius:16px;padding:24px 22px;overflow:hidden;flex:1;min-height:100px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line2);cursor:pointer;transition:transform .15s ease,opacity .2s ease,filter .2s ease}
.zph-kpi:hover{transform:translateY(-2px)}
.zph-kpi-ic{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:48px;height:48px}
.zph-tt{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:6px}
.zph-main{font-size:15px;font-weight:800;margin-bottom:2px;max-width:78%;color:#fff}
.zph-sub{font-size:12px;color:rgba(255,255,255,.55);max-width:78%}
.zph-kpi-tv{background:linear-gradient(120deg,rgba(var(--tv-rgb),.28),rgba(var(--tv-rgb),.08)),var(--card)}
.zph-kpi-tv .zph-tt{color:#FF7D89}
.zph-kpi-radio{background:linear-gradient(120deg,rgba(var(--radio-rgb),.26),rgba(var(--radio-rgb),.07)),var(--card)}
.zph-kpi-radio .zph-tt{color:#E8C468}
.zph-kpi-cuenta{background:linear-gradient(120deg,rgba(var(--set-rgb),.24),rgba(var(--set-rgb),.06)),var(--card)}
.zph-kpi-cuenta .zph-tt{color:#59D08E}

.zph-wave{position:absolute;border:2px solid #FF4757;border-radius:50%;opacity:0;animation:zphWave 2.4s ease-out infinite}
.zph-wave.a2{animation-delay:.6s}.zph-wave.a3{animation-delay:1.2s}
@keyframes zphWave{0%{width:10px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.9}
  100%{width:48px;height:48px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0}}
.zph-wave-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#FF4757}
.zph-eq{position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex;align-items:flex-end;gap:3px;height:30px}
.zph-eq span{width:4px;height:7px;background:#E8C468;border-radius:2px}
.zph-kpi-radio:hover .zph-eq span,.zph-kpi-radio:active .zph-eq span{animation:zphEq 1s ease-in-out infinite}
.zph-eq span:nth-child(1){animation-delay:0s}.zph-eq span:nth-child(2){animation-delay:.15s}
.zph-eq span:nth-child(3){animation-delay:.3s}.zph-eq span:nth-child(4){animation-delay:.45s}
@keyframes zphEq{0%,100%{height:7px}50%{height:28px}}
.zph-gear{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#59D08E}
.zph-kpi-cuenta:hover .zph-gear,.zph-kpi-cuenta:active .zph-gear{animation:zphGear 6s linear infinite}
@keyframes zphGear{to{transform:translateY(-50%) rotate(360deg)}}

.zph-renew{display:none;background:linear-gradient(120deg,rgba(224,108,122,.22),rgba(224,108,122,.06)),var(--card);
  border:1px solid rgba(224,108,122,.4);border-radius:16px;padding:22px;flex:1;min-height:100px;flex-direction:column;justify-content:center;gap:7px;cursor:pointer}
.zph-renew .zph-tt{color:#FF8A96;font-size:12px;font-weight:800;letter-spacing:.04em}
.zph-renew .zph-main{font-size:15px;font-weight:800;color:#fff}
.zph-renew .zph-sub{font-size:12px;color:rgba(255,255,255,.6);max-width:100%}
.zph-renew button{margin-top:6px;align-self:flex-start;height:36px;padding:0 16px;font-size:12.5px}
body.sc-restringida .zph-kpi-cuenta{display:none}
body.sc-restringida .zph-renew{display:flex}
body.sc-restringida .zph-kpi-tv,body.sc-restringida .zph-kpi-radio{opacity:.5;filter:grayscale(.5);pointer-events:none}

.zph-sec{margin-bottom:30px}
.zph-sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.zph-sec-head h2{font-size:14px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.zph-see-all{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid var(--line2);padding:6px 13px;border-radius:999px;
  transition:background .15s ease}
.zph-see-all:hover{background:rgba(255,255,255,.14)}
.zph-carousel{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none}
.zph-carousel::-webkit-scrollbar{display:none;height:0}
.zph-ch-card{flex:none;width:150px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;
  cursor:pointer;transition:border-color .15s ease,transform .15s ease;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.zph-ch-card:hover{border-color:rgba(var(--color-rgb),.4);transform:translateY(-2px)}
.zph-ch-wm{width:100%;height:86px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;overflow:hidden}
.zph-ch-wm img{width:100%;height:100%;object-fit:contain}
.zph-live-pill{display:inline-flex;align-items:center;gap:5px;background:#FF4757;color:#fff;font-size:9.5px;
  font-weight:800;border-radius:999px;padding:3px 8px;width:fit-content}
.zph-live-pill i{width:5px;height:5px;border-radius:50%;background:#fff;display:block}
.zph-ch-name{font-size:12.5px;color:var(--muted)}
.zph-rd-card{flex:none;width:122px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px;text-align:center;
  cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.zph-rd-card:hover{border-color:rgba(var(--color-rgb),.4);transform:translateY(-2px)}
.zph-rd-lg{width:50px;height:50px;margin:0 auto 9px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--muted);overflow:hidden}
.zph-rd-lg img{width:100%;height:100%;object-fit:contain}
.zph-rd-card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.35;min-height:32px;margin-bottom:8px}

.zph-recent-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.zph-recent-row::-webkit-scrollbar{display:none;height:0}
.zph-recent-chip{flex:none;display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 16px 10px 10px;cursor:pointer;min-width:200px;transition:border-color .15s ease}
.zph-recent-chip:hover{border-color:rgba(var(--color-rgb),.4)}
.zph-recent-lg{flex:none;width:42px;height:42px;border-radius:9px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--muted);overflow:hidden}
.zph-recent-lg img{width:100%;height:100%;object-fit:contain}
.zph-recent-chip b{font-size:13.5px;display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.zph-recent-chip span{font-size:11.5px;color:var(--soft)}

.zph-ch-card.locked,.zph-rd-card.locked{opacity:.4;filter:grayscale(.5);cursor:default}

.zph-epg-card{flex:none;width:210px;aspect-ratio:2/3;position:relative;cursor:pointer;overflow:hidden;
  border-radius:16px;background:var(--card);transition:transform .18s ease,box-shadow .18s ease}
.zph-epg-card:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.zph-epg-bg{position:absolute;inset:0}
.zph-epg-bg img{width:100%;height:100%;object-fit:cover;display:block}
.zph-epg-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--surface2),var(--surface))}
.zph-epg-fallback img{width:56%;height:56%;object-fit:contain;opacity:.9}
.zph-epg-fallback span{font-size:13px;font-weight:800;color:var(--soft);text-align:center;padding:0 16px}
.zph-epg-ch{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:8px;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:9.5px;font-weight:800;color:#fff;z-index:2}
.zph-epg-ch img{width:100%;height:100%;object-fit:contain;padding:3px}
.zph-epg-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 14px 14px;
  background:linear-gradient(0deg,rgba(0,0,0,.92) 15%,rgba(0,0,0,.6) 60%,transparent)}
.zph-epg-title{font-size:15px;font-weight:800;color:#fff;line-height:1.28;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.zph-epg-channel{font-size:11.5px;color:#fff;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zph-epg-progress{width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:9px}
.zph-epg-progress-bar{height:100%;background:var(--color);border-radius:2px}
.zph-epg-remain{font-size:10.5px;color:#fff;margin-top:4px}

.zph-aviso-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.zph-aviso-overlay.on{display:flex}
.zph-aviso-card{width:min(50%,460px);max-height:80vh;background:var(--surface);border:1px solid var(--line2);border-radius:18px;
  overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
@media(max-width:640px){.zph-aviso-card{width:min(92vw,460px)}}
.zph-aviso-close{position:absolute;top:10px;right:10px;z-index:2;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.zph-aviso-img{width:100%;aspect-ratio:16/9}
.zph-aviso-img img{width:100%;height:100%;object-fit:cover;display:block}
.zph-aviso-body{padding:20px 22px 22px}
.zph-aviso-body h3{font-size:17px;font-weight:800;margin-bottom:8px;color:#fff}
.zph-aviso-body p{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.zph-aviso-actions{display:flex;gap:10px}
.zph-aviso-actions .btn-primary,.zph-aviso-actions .btn-ghost{flex:1;justify-content:center;text-align:center}

@media(max-width:700px){
  .zph-hero-signal{min-height:260px;padding:22px}
  .zph-hero-signal h1{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════════
   Home v4.9.75 — fix responsive real: en tablet/celular las imágenes del
   Home (logos de destacados, carátulas EPG, fondo del hero) se veían a su
   tamaño de escritorio y el contenido se cortaba. Causa: .client-app usa
   CSS Grid (grid-template-columns:1fr) y .zph-hero usa Grid también
   (1.55fr 1fr) — un ítem de grid, por spec, nunca se achica por debajo del
   ancho mínimo de su contenido salvo que se le fije min-width:0 de forma
   explícita. Sin eso, el contenido empujaba el ancho real más allá del
   viewport y .client-app (que tiene overflow:hidden) lo recortaba en vez
   de acomodarlo — de ahí "se pierde todo". Se agrega min-width:0 a los
   ítems de grid/flex involucrados y se reducen tamaños de tarjetas/logos
   en pantallas chicas para que quepan más cómodos sin scroll horizontal
   forzado. ═══════════════════════════════════════════════════════════
*/
.client-app>.client-main,.client-main.zp-main{min-width:0}
.zph-hero-signal,.zph-kpi-stack{min-width:0}
.zph-kpi{min-width:0}
.zph-carousel,.zph-recent-row{min-width:0}

@media(max-width:900px){
  .zph-kpi-stack{min-width:0}
  .zph-sec-head h2{font-size:13px}
}

@media(max-width:600px){
  .zph-hero{gap:12px;margin-bottom:22px}
  .zph-hero-signal{min-height:220px;padding:18px}
  .zph-hero-signal h1{font-size:21px}
  .zph-hero-sub{font-size:13px;margin-bottom:14px}
  .zph-hero-actions{gap:8px}
  .zph-hero-actions .btn-primary,.zph-hero-actions .btn-ghost{height:40px;font-size:12.5px;padding:0 14px}
  .zph-kpi-stack{gap:10px}
  .zph-kpi,.zph-renew{padding:18px 16px;min-height:84px}
  .zph-kpi-ic{width:40px;height:40px}
  .zph-sec{margin-bottom:24px}
  .zph-carousel,.zph-recent-row{gap:9px}
  .zph-ch-card{width:122px;padding:10px}
  .zph-ch-wm{height:66px}
  .zph-rd-card{width:100px;padding:11px}
  .zph-rd-lg{width:42px;height:42px}
  .zph-recent-chip{min-width:168px;padding:8px 12px 8px 8px}
  .zph-recent-lg{width:36px;height:36px}
  .zph-recent-chip b{max-width:106px}
  .zph-epg-card{width:150px}
  .zph-epg-ch{width:24px;height:24px;top:8px;left:8px}
  .zph-epg-overlay{padding:26px 10px 10px}
  .zph-epg-title{font-size:12.5px}
  .zph-epg-channel{font-size:10px}
  .zph-live-card{width:112px}
  .zph-live-card.pinned{width:150px}
  .zph-hero-progress-wrap{width:88%}
  .zp-search-results{left:16px;right:16px;width:auto;top:auto}
}