:root {
  --bg: #0f1115;
  --panel: #161a21;
  --panel-2: #1d222b;
  --line: #262c37;
  --text: #e6e8ec;
  --muted: #8a93a3;
  --dim: #565e6e;   /* lo que no carga: se lee, pero se va al fondo */
  --accent: #4f8cff;
  --error: #ff6b6b;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.error { color: var(--error); }

input, button, select {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { cursor: pointer; background: var(--accent); border-color: var(--accent); color: #fff; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
button:hover { filter: brightness(1.1); }

/* Login */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login-card {
  width: min(380px, 100%);
  display: grid; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 24px;
}
.login-card h1 { margin: 0; }
.login-card p { margin: 0; }
.login-card label { display: grid; gap: 4px; color: var(--muted); }
.login-card input { width: 100%; }
.login-card .pin { font-size: 28px; letter-spacing: 12px; text-align: center; }

/* Layout */
.app {
  height: 100%;
  display: grid;
  grid-template-columns: 220px 320px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top top" "cats items viewer";
}
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-size: 16px; }
.tabs { display: flex; gap: 4px; }
.tabs button { background: transparent; border-color: transparent; color: var(--muted); }
.tabs button.active { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.account { font-size: 12px; }
.source { max-width: 160px; padding: 6px 8px; }
.url-form { display: grid; gap: 8px; }
.url-form input { width: 100%; }
.session-badge { margin-left: auto; font-size: 12px; padding: 6px 10px; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-badge.on::before { content: "● "; color: #3ddc84; }
.session-badge.away { border-color: var(--accent); color: var(--accent); }
button.ghost.away { border-color: var(--accent); color: var(--accent); }

.takeover {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: #000c; text-align: center; padding: 16px;
}
.takeover p { margin: 0; color: var(--muted); }
.takeover button { font-size: 18px; padding: 12px 24px; border-radius: 999px; }

.categories, .items {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; min-height: 0; border-right: 1px solid var(--line);
}
.categories { grid-area: cats; }
.items { grid-area: items; }
.categories ul, .items ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.categories li, .items li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.categories li:hover, .items li:hover { background: var(--panel-2); }
li.active { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.items li img { width: 40px; height: 40px; object-fit: contain; flex: none; border-radius: 4px; background: #0003; }
.items li .poster { width: 40px; height: 58px; object-fit: cover; }
.items li span { overflow: hidden; text-overflow: ellipsis; }
.status { margin: 0; font-size: 12px; }
.more { justify-content: center; color: var(--accent); }
/* Lo que no cargó: en gris oscuro y con aviso, pero se sigue pudiendo intentar.
   Color explícito en vez de opacidad: así no se aclara al pasar el ratón por encima. */
.items li.broken span { color: var(--dim); }
.items li.broken img { opacity: .3; filter: grayscale(1); }
.items li .warn { margin-left: auto; flex: none; color: var(--error); font-size: 14px; }
.broken-note {
  margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--error); border-radius: 8px; color: var(--error);
}
.broken-note button { flex: none; }

/* Viewer */
.viewer { grid-area: viewer; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.player-wrap { position: relative; background: #000; aspect-ratio: 16 / 9; flex: none; }
video { width: 100%; height: 100%; display: block; }
.player-msg {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center; color: var(--muted); pointer-events: none; text-align: center; padding: 16px;
}
.now { padding: 16px; display: grid; gap: 12px; }

.media-controls, .tracks {
  display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.media-controls input[type="range"] { flex: 1; min-width: 80px; padding: 0; accent-color: var(--accent); }
.media-controls span { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.tracks label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.tracks select { max-width: 220px; }
video::cue { font-size: 1.1em; background: rgba(0, 0, 0, .65); }
.now-head { display: flex; align-items: center; gap: 12px; }
.play-btn { flex: none; font-size: 15px; padding: 10px 20px; border-radius: 999px; }
.play-btn:disabled {
  background: var(--panel-2); border-color: var(--line); color: var(--muted); cursor: default;
}
.now h2 { margin: 0; font-size: 18px; flex: 1; }
#details p { margin: 0 0 8px; }

.epg { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.epg li { display: grid; grid-template-columns: 110px 1fr; gap: 8px; }
.epg li.current { color: var(--accent); }
.epg small { grid-column: 2; color: var(--muted); }

.series-head { display: flex; gap: 16px; }
.series-head img { width: 120px; border-radius: 6px; flex: none; }
.episodes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.episodes li { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.episodes li:hover { background: var(--panel-2); }

/* ---------- móvil: barra inferior y hoja desplegable ---------- */
/* En escritorio no existen; el layout de tres columnas ya funciona. */
.mini, .sheet-head, .cat-trigger { display: none; }
.items-head { display: flex; align-items: center; gap: 8px; }
.items-head input { flex: 1; min-width: 0; }

/* En "solo mando" el recuadro negro del vídeo solo ocupa sitio. Se esconde el <video> pero
   NO el contenedor: dentro vive el texto de estado, que ahí sí hace falta. Sin la proporción
   16:9 el bloque se encoge a la altura de una línea. */
body.remote-only .player-wrap { aspect-ratio: auto; background: transparent; }
body.remote-only .player-wrap video { display: none; }
body.remote-only .player-msg { position: static; padding: 14px 16px; text-align: left; }

@media (max-width: 900px) {
  /* La pantalla la manda la lista: cabecera, categorías y lista, y nada más que scrollee. */
  .app {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "items";
    overflow-x: hidden; /* por si algún título larguísimo se escapa */
  }

  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .tabs { order: 3; flex: 1 0 100%; }
  .source { order: 2; max-width: 40vw; }
  .tabs button { flex: 1; }
  /* La barra de abajo ya dice qué suena, y el nombre de usuario no aporta aquí. */
  .session-badge, .account { display: none; }
  #view-mode { margin-left: auto; }

  /* Categorías: una sola fila que se desplaza en horizontal, no una lista alta. */
  /* Las categorías dejan de ocupar sitio: se abren a pantalla completa desde el selector,
     con su buscador y la lista en vertical, que es lo cómodo para recorrer cien. */
  .categories {
    position: fixed; inset: 0; z-index: 25; background: var(--bg);
    padding: 0 12px 12px; border-right: 0; gap: 10px;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  body.cats .categories { transform: none; }
  .categories .sheet-head { margin: 0 -12px; }
  .categories ul { max-height: none; }
  .categories li { padding: 12px 10px; }

  /* El selector comparte fila con el buscador. */
  .cat-trigger {
    display: block; flex: none; max-width: 45%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Lo único que scrollea. El hueco de abajo deja ver el último elemento tras la barra. */
  .items { grid-area: items; border-right: 0; padding: 8px 12px 0; min-width: 0; }
  .items ul { max-height: none; padding-bottom: 76px; }

  /* El reproductor deja de ocupar sitio: sube desde abajo cuando lo pides. */
  .viewer {
    position: fixed; inset: 0; z-index: 20; background: var(--bg);
    transform: translateY(100%); transition: transform .25s ease;
    will-change: transform;
  }
  body.sheet .viewer { transform: none; }
  .sheet-head {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
  }
  .sheet-head button { font-size: 20px; line-height: 1; padding: 4px 14px; }
  .sheet-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mini {
    display: flex; align-items: center; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    padding: 8px 12px; background: var(--panel); border-top: 1px solid var(--line);
  }
  .mini-open {
    flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left;
    background: transparent; border: 0; padding: 4px 0; color: var(--text);
  }
  .mini-open strong, .mini-open small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
  }
  .mini-open small { font-size: 12px; }
  .mini-play { flex: none; font-size: 18px; padding: 8px 16px; border-radius: 999px; }

  /* Dentro de la hoja, la ficha de lo elegido y su ▶ van arriba del todo: si fueran detrás
     del vídeo y los controles, habría que hacer scroll para poder reproducir. */
  .now { order: -1; }
  .now-head { flex-wrap: wrap; }
  .play-btn { padding: 12px 22px; }

  /* Controles más cómodos con el dedo. */
  .media-controls, .tracks { padding: 12px; }
  .media-controls button { padding: 10px 14px; }
  .tracks select { max-width: 45vw; }
}