:root{
  --ink:#0b1b2b;--ink2:#13293f;--paper:#f3f6f9;--card:#fff;--line:#d9e3ec;
  --text:#16283a;--muted:#5d7287;--accent:#00a8e8;--amber:#ffb703;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{
  margin:0;padding:1.2em;min-height:100vh;
  display:flex;justify-content:center;align-items:center;
  font-family:'DM Sans',system-ui,sans-serif;color:var(--text);line-height:1.6;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px,#c9d6e2 1px,transparent 0);
  background-size:22px 22px;
}
h1,h2{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;line-height:1.02;margin:0}

/* Formulario de carga */
#loadContainer{
  width:100%;max-width:640px;background:var(--card);
  border-radius:24px;padding:2.5em 3em;
  box-shadow:0 30px 60px -20px rgba(11,27,43,.35);
}
#loadContainer h2{color:var(--ink);font-weight:800;font-size:clamp(2em,4.5vw,3em);margin-bottom:.6em}
#m3uUrl{
  display:block;width:100%;padding:.9em 1.1em;margin-bottom:.8em;
  background:var(--paper);color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  font:inherit;font-size:1em;
}
#loadError{margin:0 0 .8em;color:#b3261e;font-weight:500}
.btn-primary{
  width:100%;padding:.85em 1.6em;border:0;border-radius:14px;
  background:var(--accent);color:var(--ink);
  font:inherit;font-weight:700;font-size:1.05em;cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.btn-primary:hover:not(:disabled){background:var(--amber);transform:translateY(-3px)}
.btn-primary:disabled{opacity:.7;cursor:wait}

/* Aplicación */
#appContainer{
  display:none;width:100%;max-width:1400px;height:calc(100vh - 2.4em);
  background:var(--card);border-radius:24px;overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(11,27,43,.35);
}
.player-column{
  flex:1;min-width:0;padding:2.5em 3em;overflow-y:auto;
}
#nowPlaying{
  color:var(--ink);font-weight:800;font-size:clamp(1.6em,3.4vw,2.6em);
  margin-bottom:.8em;overflow-wrap:anywhere;
}
#playerContainer{
  --plyr-color-main:var(--accent);
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:14px;overflow:hidden;
}
#iptvPlayer{width:100%;height:100%;background:#000;object-fit:contain}
#playerContainer .plyr,#playerContainer .plyr__video-wrapper{height:100%}
#playerStatus{
  position:absolute;inset:0;z-index:2;margin:0;padding:1em;
  display:grid;place-items:center;text-align:center;
  color:#e8f1f8;font-weight:500;pointer-events:none;
}

/* Panel oscuro de canales */
.channels-column{
  order:-1;flex:0 0 380px;min-height:0;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding:2.5em 2em 2em;color:#e8f1f8;
  background:linear-gradient(170deg,var(--ink2),var(--ink) 70%);
}
.channels-column::before{
  content:"";position:absolute;top:-90px;right:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,168,232,.45),transparent 70%);
  pointer-events:none;
}
.channels-column > *{position:relative}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:1em;margin-bottom:1em}
.panel-head h2{color:#fff;font-weight:800;font-size:2.4em}
#channelCount{color:var(--accent);font-weight:500}
.search-bar{
  width:100%;padding:.7em 1em;margin-bottom:1em;
  background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.25);border-radius:14px;font:inherit;
}
.search-bar::placeholder{color:rgba(232,241,248,.6)}
#channelsList{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;gap:.5em;padding-right:.3em;
}
#noResults{margin:0;color:rgba(232,241,248,.7)}
.channel{
  flex:0 0 auto;width:100%;display:flex;align-items:center;gap:.8em;
  padding:.6em .8em;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.07);color:#fff;
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  font:inherit;transition:background .2s ease,border-color .2s ease;
}
.channel:hover{background:rgba(255,255,255,.14)}
.channel.active{background:rgba(0,168,232,.2);border-color:var(--accent)}
.channel img{
  flex:0 0 40px;width:40px;height:40px;padding:3px;
  background:#fff;border-radius:10px;object-fit:contain;
}
.channel span{min-width:0;overflow-wrap:anywhere}
.change-list{
  margin-top:1em;padding:.6em 1em;cursor:pointer;
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.25);border-radius:14px;font:inherit;font-weight:500;
  transition:background .2s ease;
}
.change-list:hover{background:rgba(255,255,255,.14)}

/* Scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,168,232,.35);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,168,232,.6)}
.channels-column ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25)}

:is(button,input,.channel):focus-visible{outline:3px solid var(--amber);outline-offset:3px}

@media (max-width:1024px){
  .channels-column{flex-basis:300px;padding:1.5em}
  .panel-head h2{font-size:2em}
  .player-column{padding:2em}
}
@media (max-width:768px){
  body{align-items:flex-start}
  #appContainer{flex-direction:column;height:auto}
  .player-column{flex:none;overflow:visible;padding:1.5em 1.4em}
  .channels-column{order:0;flex:none;height:70vh}
  #loadContainer{padding:1.8em 1.4em;border-radius:20px}
}
@media (max-width:480px){
  body{padding:.5em}
  .player-column{padding:1.2em 1em}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}