:root{
  --bg:#0a0d14; --bg2:#111624; --card:#18202f; --line:#243044;
  --txt:#eef2f8; --dim:#9fb0c8; --accent:#e11d2a; --accent2:#ff3b47;
  --focus:#ffffff; --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:radial-gradient(1200px 700px at 70% -10%, #16203a 0%, var(--bg) 55%) fixed;
  color:var(--txt); font-family:'Segoe UI',system-ui,Roboto,Arial,sans-serif;
  overflow:hidden; user-select:none;
}
.view{position:fixed; inset:0;}
[hidden]{display:none !important;}
.brand-dot{display:inline-block; width:.7em; height:.7em; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px var(--accent2); vertical-align:middle; margin-right:.35em;}

/* ===== FOCUS (control remoto) ===== */
.focusable{outline:none; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.focusable.focused{
  transform:scale(1.06); z-index:5;
  box-shadow:0 0 0 4px var(--focus), 0 12px 34px rgba(0,0,0,.55);
}
.tab.focusable.focused, .cat.focusable.focused{transform:scale(1.03);}

/* ===== LOGIN ===== */
.view-login{display:flex; align-items:center; justify-content:center; padding:4vh 4vw;}
.login-card{width:min(94vw,440px); background:#12161f; border:1px solid var(--line); border-radius:24px;
  padding:5vh 7vw; text-align:center; box-shadow:0 26px 64px rgba(0,0,0,.55);}
.login-logo{width:92px; height:92px; margin:0 auto 1.4vh; filter:drop-shadow(0 6px 18px rgba(225,29,42,.35));}
.login-name{font-size:31px; font-weight:800; letter-spacing:.02em;}
.login-name b{color:var(--accent2);}
.login-sub{color:var(--dim); font-size:15px; margin-top:.3em; margin-bottom:3.4vh;}
.login-fieldwrap{text-align:left; margin-bottom:2vh;}
.login-lbl{display:block; color:var(--dim); font-size:14px; margin-bottom:1vh; font-weight:600;}
.code-input{width:100%; height:66px; border-radius:14px; background:#0c1119; border:1.5px solid var(--line);
  color:var(--txt); font-size:30px; font-weight:800; text-align:center; letter-spacing:.45em; text-indent:.45em; outline:none;}
.code-input::placeholder{color:#38445a; letter-spacing:.28em; font-weight:600;}
.code-input.focused{box-shadow:0 0 0 3px var(--focus) !important; transform:none;}
.code-input:focus{border-color:var(--accent);}
.login-btn{width:100%; height:60px; margin-top:1.2vh; border:none; border-radius:14px;
  background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; font-size:19px; font-weight:800; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:.5em;}
.login-btn.focused{transform:scale(1.03);}
.login-msg{color:var(--accent2); font-size:15px; margin-top:1.4vh; min-height:1em;}
.login-foot{color:var(--dim); font-size:13px; margin-top:2.4vh;}

/* ===== APP ===== */
.appbar{display:flex; align-items:center; gap:2vw; padding:2.4vh 3vw; }
.appbar-brand{font-size:2.8vh; letter-spacing:.12em; color:var(--dim); white-space:nowrap;}
.appbar-brand b{color:var(--txt);}
.tabs{display:flex; gap:1vw; flex:1;}
.appbar-right{display:flex; gap:1vw;}
.tab{
  border:1px solid var(--line); background:var(--card); color:var(--dim);
  padding:1.4vh 2.2vw; border-radius:999px; font-size:2.4vh; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tab.is-active{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; border-color:var(--accent);}

.app-main{position:absolute; top:9.5vh; bottom:0; left:0; right:0; display:flex;}
.cats{
  width:26vw; max-width:300px; min-width:210px; overflow:hidden auto; padding:1vh 1vw 3vh 2.4vw; display:flex; flex-direction:column; gap:.7vh;
  scrollbar-width:none; flex:none;
}
.cats::-webkit-scrollbar{display:none;}
.cat{
  text-align:left; border:1px solid transparent; background:transparent; color:var(--dim);
  padding:1.4vh 1vw; border-radius:12px; font-size:2.1vh; font-weight:600; cursor:pointer; line-height:1.25;
}
.cat.is-active{background:var(--card); color:var(--txt); border-color:var(--line);}
.content{flex:1; overflow:hidden; display:flex; flex-direction:column; padding:0 3vw 0 1vw;}
.content-head{padding:.5vh 0 1.5vh;}
.content-head h2{font-size:3vh; font-weight:700;}
.grid{flex:1; overflow:hidden auto; display:grid; gap:1.6vh 1.4vw; align-content:start; padding-bottom:4vh; scrollbar-width:none;}
.grid::-webkit-scrollbar{display:none;}
.grid.live{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.grid.poster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
.card{
  border:1px solid var(--line); background:var(--card); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
}
.card .thumb{
  width:100%; background:#0c1119; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.grid.live .thumb{aspect-ratio:1/1; border-bottom:1px solid var(--line);}
.grid.poster .thumb{aspect-ratio:2/3;}
.card .thumb img.lg{display:block;}
.grid.live .thumb img.lg{max-width:78%; max-height:78%; object-fit:contain;}
.grid.poster .thumb img.lg{width:100%; height:100%; object-fit:cover;}
.card .thumb .fallback{display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  font-size:5.5vh; font-weight:800; color:#4a5a74; background:linear-gradient(135deg,#1b2334,#0c1119);}
.card .cap{padding:1.1vh 1vw; font-size:1.95vh; font-weight:700; line-height:1.2; text-align:center;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.grid.poster .cap{text-align:left;}
.card .num{color:var(--accent2); font-weight:800; margin-right:.4em;}
.empty{padding:6vh; text-align:center; color:var(--dim); font-size:2.6vh;}

/* ===== PLAYER ===== */
.view-player{background:#000;}
.video{width:100%; height:100%; object-fit:contain; background:#000;}
.player-overlay{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,transparent 22%,transparent 72%,rgba(0,0,0,.75) 100%);
  opacity:0; transition:opacity .25s; display:flex; flex-direction:column; justify-content:space-between; padding:4vh 5vw;}
.player-overlay.show{opacity:1;}
.np{display:flex; align-items:center; gap:2vw;}
.np-logo{width:9vh; height:9vh; border-radius:14px; background:#111 center/contain no-repeat; border:1px solid var(--line); flex:none;}
.np-label{color:var(--accent2); font-size:1.8vh; letter-spacing:.18em; font-weight:800;}
.np-title{font-size:4vh; font-weight:800;}
.np-status{color:var(--dim); font-size:2.2vh;}
.player-hint{align-self:center; color:var(--dim); font-size:2.2vh; background:rgba(0,0,0,.5); padding:1vh 2vw; border-radius:999px;}
.player-loading{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.spinner{width:8vh; height:8vh; border:.7vh solid rgba(255,255,255,.15); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== TOAST ===== */
.toast{position:fixed; bottom:5vh; left:50%; transform:translateX(-50%);
  background:#1b2130; border:1px solid var(--line); color:var(--txt);
  padding:1.6vh 3vw; border-radius:999px; font-size:2.2vh; z-index:99; box-shadow:0 10px 30px rgba(0,0,0,.5);}

/* Canales grid en pantalla del player (overlay lista) */
.chanpanel{position:absolute; top:0; bottom:0; left:0; width:34vw; max-width:520px;
  background:rgba(8,11,18,.92); backdrop-filter:blur(6px); border-right:1px solid var(--line);
  transform:translateX(-102%); transition:transform .25s; overflow:hidden auto; padding:3vh 1.6vw; z-index:8; scrollbar-width:none;}
.chanpanel.show{transform:none;}
.chanpanel::-webkit-scrollbar{display:none;}
.chanpanel h3{font-size:2.6vh; margin-bottom:1.4vh; color:var(--dim);}
.chanrow{display:flex; align-items:center; gap:1vw; padding:1.2vh 1vw; border-radius:12px; cursor:pointer; border:1px solid transparent;}
.chanrow .clogo{width:6vh; height:6vh; border-radius:10px; background:#111 center/contain no-repeat; flex:none; border:1px solid var(--line);}
.chanrow .cname{font-size:2.2vh; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chanrow.playing{border-color:var(--accent);}

/* ===== MÓVIL / pantallas angostas ===== */
@media (max-width:760px){
  .appbar{gap:2.5vw; padding:12px 4vw;}
  .appbar-brand{font-size:16px;}
  .tabs{overflow-x:auto; scrollbar-width:none; flex:1 1 auto;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab{padding:9px 14px; font-size:14px;}
  .app-main{top:58px; flex-direction:column;}
  .cats{flex-direction:row; width:100%; max-width:none; min-width:0; overflow-x:auto; overflow-y:hidden;
    padding:10px 4vw; gap:8px; border-bottom:1px solid var(--line);}
  .cat{flex:0 0 auto; white-space:nowrap; border:1px solid var(--line); background:var(--card);
    padding:9px 16px; border-radius:999px; font-size:14px; line-height:1.1;}
  .cat.is-active{background:linear-gradient(180deg,var(--accent2),var(--accent)); color:#fff; border-color:var(--accent);}
  .content{padding:6px 4vw 0;}
  .content-head h2{font-size:19px;}
  .content-head{padding:8px 0 10px;}
  .grid{gap:12px;}
  .grid.live{grid-template-columns:repeat(3,1fr);}
  .grid.poster{grid-template-columns:repeat(3,1fr);}
  .card .cap{font-size:12px; padding:8px 6px;}
  .empty{font-size:16px; padding:24px;}
  .chanpanel{width:82vw; padding:16px;}
  .focusable.focused{transform:scale(1.02);}
}