/* EnjoyTV Play — tema oscuro turquesa, simple y limpio */
:root{
  --accent:#19C6BF; --accent-2:#5DDAD5; --accent-hover:#11B5AE;
  --bg:#0b1020; --bg-2:#121a30; --card:#16203a; --card-2:#1c2848;
  --text:#eef2fb; --muted:#8b97b5; --border:#243154;
  --radius:16px; --shadow:0 10px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted);font-size:.9rem}

/* ---------- Marca ---------- */
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.25rem}
.brand-logo{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#04231f;font-size:.95rem;box-shadow:0 4px 14px rgba(25,198,191,.4)
}
.brand-name{letter-spacing:.3px}
.brand-accent{color:var(--accent)}

/* ---------- Login ---------- */
.login-body{
  display:grid;place-items:center;min-height:100vh;position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% -10%,#16203a,#0b1020 60%);
}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;z-index:0}
.orb-1{width:360px;height:360px;background:var(--accent);top:-80px;left:-60px}
.orb-2{width:420px;height:420px;background:#3b5bdb;bottom:-120px;right:-80px;opacity:.35}
.login-card{
  position:relative;z-index:1;width:min(92vw,400px);padding:2.4rem 2rem;
  background:rgba(22,32,58,.75);backdrop-filter:blur(14px);
  border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);
  text-align:center;animation:rise .5s ease
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.login-card .brand{justify-content:center;font-size:1.6rem;margin-bottom:.3rem}
.login-card .brand-logo{width:42px;height:42px;font-size:1.1rem}
.login-sub{color:var(--muted);margin-bottom:1.6rem;font-size:.92rem}
.login-form{display:flex;flex-direction:column;gap:.85rem}
.field{
  display:flex;align-items:center;gap:.6rem;background:var(--bg-2);
  border:1px solid var(--border);border-radius:12px;padding:.05rem .9rem;
  transition:border-color .2s,box-shadow .2s
}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(25,198,191,.15)}
.field-icon{opacity:.7}
.field input{flex:1;background:none;border:0;outline:0;color:var(--text);padding:.85rem 0;font-size:1rem}
.btn-primary{
  margin-top:.4rem;padding:.9rem;border:0;border-radius:12px;cursor:pointer;
  font-weight:700;font-size:1rem;color:#04231f;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  transition:transform .12s,box-shadow .2s
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(25,198,191,.35)}
.alert{
  background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.4);color:#ffb3b3;
  padding:.7rem .9rem;border-radius:10px;font-size:.9rem;margin-bottom:1rem
}
.login-foot{margin-top:1.6rem;color:var(--muted);font-size:.78rem}

/* ---------- App ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1.2rem;border-bottom:1px solid var(--border);
  background:rgba(11,16,32,.85);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10
}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.pill{font-size:.78rem;color:var(--muted);border:1px solid var(--border);padding:.3rem .65rem;border-radius:99px}
.user-chip{font-size:.85rem;background:var(--card-2);padding:.35rem .75rem;border-radius:99px}
.btn-ghost{font-size:.85rem;padding:.4rem .8rem;border:1px solid var(--border);border-radius:99px;transition:.2s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.layout{display:grid;grid-template-columns:280px 1fr;min-height:calc(100vh - 60px)}
.sidebar{border-right:1px solid var(--border);padding:1rem;background:var(--bg-2);overflow-y:auto;max-height:calc(100vh - 60px)}
.search-box input{
  width:100%;padding:.7rem .9rem;border-radius:11px;border:1px solid var(--border);
  background:var(--card);color:var(--text);outline:0
}
.search-box input:focus{border-color:var(--accent)}
.cat-title{margin:1.1rem .2rem .5rem;font-size:.75rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.cat-list{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.cat-list li{padding:.65rem .8rem;border-radius:10px;cursor:pointer;font-size:.92rem;transition:.15s}
.cat-list li:hover{background:var(--card)}
.cat-list li.active{background:linear-gradient(135deg,rgba(25,198,191,.25),rgba(93,218,213,.12));color:var(--accent-2);font-weight:600}

.content{padding:1.2rem 1.4rem;overflow-y:auto;max-height:calc(100vh - 60px)}
.player-wrap{position:relative;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow);margin-bottom:1.2rem}
#video{width:100%;aspect-ratio:16/9;display:block;background:#000}
.now-playing{position:absolute;left:0;right:0;bottom:0;padding:.6rem 1rem;font-size:.9rem;
  background:linear-gradient(transparent,rgba(0,0,0,.75));pointer-events:none}
.section-h{font-size:1.05rem;margin:.4rem .2rem 1rem}
.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.channel{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:.9rem;cursor:pointer;transition:.18s;display:flex;flex-direction:column;gap:.55rem;align-items:center;text-align:center
}
.channel:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 8px 20px rgba(0,0,0,.3)}
.channel.playing{border-color:var(--accent);background:var(--card-2)}
.channel img{width:56px;height:56px;object-fit:contain;border-radius:10px;background:#0009}
.channel-noicon{width:56px;height:56px;display:grid;place-items:center;font-size:1.6rem;border-radius:10px;background:#0009}
.channel .name{font-size:.85rem;line-height:1.25;color:var(--text)}

.loader{color:var(--muted);font-size:.9rem;padding:.6rem}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .layout{grid-template-columns:1fr}
  .sidebar{max-height:none;border-right:0;border-bottom:1px solid var(--border)}
  .content{max-height:none}
}