:root {
  --bg: #04100f;
  --surface: #0a1c1b;
  --surface-2: #10292a;
  --line: #163a3a;
  --text: #eaf6f2;
  --muted: #8aa9a3;
  --accent: #19e6b0;
  --accent-2: #0fb58a;
  --gold: #e2b453;
  --danger: #ff7a6b;
  --nav-h: 64px;
  --pad: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.hidden { display: none !important; }

/* ---------- Botones ---------- */
.btn { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 9px 20px; font-weight: 600; transition: background .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--surface-2); border-color: var(--accent-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #032018; }
.btn.primary:hover { background: #4cf0c4; }
.btn.small { padding: 5px 14px; font-size: 13px; }
.btn.icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }

/* ---------- Acceso ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; padding: 24px; background: radial-gradient(900px 500px at 50% -10%, #0d3a36 0%, transparent 60%), var(--bg); }
.login-card { width: 100%; max-width: 380px; background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: 32px; display: grid; gap: 14px; box-shadow: 0 20px 60px #0008; }
.login-card img { width: 190px; height: auto; margin: 0 auto; }
.login-card h1 { margin: 0; text-align: center; font-size: 20px; letter-spacing: .12em; }
.login-card label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.login-card input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; }
.login-card input:focus { border-color: var(--accent); outline: none; }
.msg { color: var(--muted); font-size: 13px; text-align: center; }
.msg.err { color: var(--danger); }

/* ---------- Barra superior ---------- */
.nav { position: sticky; top: 0; z-index: 30; height: var(--nav-h); display: flex; align-items: center; gap: 22px; padding: 0 var(--pad); background: linear-gradient(#04100fee, #04100fcc); backdrop-filter: blur(10px); border-bottom: 1px solid #0f2a2a; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .16em; font-size: 14px; white-space: nowrap; background: none; border: 0; padding: 0; }
.brand img { height: 36px; width: auto; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: #032018; background: var(--accent); }
.search { position: relative; }
.search input { width: 200px; max-width: 34vw; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 34px; transition: width .2s, border-color .2s; }
.search input:focus { width: 300px; border-color: var(--accent); outline: none; }
.search::before { content: ""; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; border: 2px solid var(--muted); border-radius: 50%; transform: translateY(-65%); }
.search::after { content: ""; position: absolute; left: 24px; top: 50%; width: 6px; height: 2px; background: var(--muted); transform: rotate(45deg) translate(2px, 4px); }
.who { color: var(--muted); font-size: 13px; }
.whobtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 999px; }
.whobtn:hover { background: #ffffff14; color: var(--text); }
/* Perfiles */
.avatar { display: inline-grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; font-size: 40px; font-weight: 700; color: #04100f; background: #2fbf8a; border: 0; }
.avatar.small { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
.avatar.plus { background: #ffffff14; color: var(--muted); }
.avatar[data-c="verde"] { background: #2fbf8a; } .avatar[data-c="dorado"] { background: #d6a35c; } .avatar[data-c="turquesa"] { background: #22b8c9; } .avatar[data-c="coral"] { background: #e5705a; }
.avatar[data-c="violeta"] { background: #8b6fe0; } .avatar[data-c="azul"] { background: #4a8de8; } .avatar[data-c="rosa"] { background: #e07aa8; } .avatar[data-c="gris"] { background: #8a97a0; }
.picker { display: grid; gap: 28px; justify-items: center; text-align: center; max-width: 720px; }
.picker h1 { margin: 0; font-size: 26px; }
.profiles { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.profile { display: grid; gap: 8px; justify-items: center; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 10px; border-radius: 16px; width: 130px; }
.profile:hover, .profile:focus-visible { color: var(--text); background: #ffffff10; outline: none; }
.profile .pname { font-size: 15px; color: var(--text); overflow-wrap: anywhere; }
.profile small { font-size: 12px; }
.swatches { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.swatches .avatar { cursor: pointer; }
.swatches .avatar.on { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- Inicio ---------- */
.view { min-height: calc(100vh - var(--nav-h)); padding-bottom: 64px; }
.hero { position: relative; min-height: min(62vh, 520px); display: flex; align-items: flex-end; padding: 0 var(--pad) 40px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 20%; filter: blur(18px) saturate(1.1) brightness(.5); transform: scale(1.15); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 4%, transparent 60%), linear-gradient(to right, #04100fcc, transparent 70%); }
.hero-in { position: relative; z-index: 1; display: flex; gap: 28px; align-items: flex-end; max-width: 1100px; }
.hero-poster { width: clamp(110px, 16vw, 190px); aspect-ratio: 2/3; border-radius: 12px; object-fit: cover; box-shadow: 0 14px 40px #000a; background: var(--surface-2); flex: none; }
.hero-kicker { color: var(--accent); font-weight: 700; letter-spacing: .14em; font-size: 12px; text-transform: uppercase; }
.hero h2 { margin: 6px 0 14px; font-size: clamp(26px, 5vw, 46px); line-height: 1.1; }
.hero .row { display: flex; gap: 10px; flex-wrap: wrap; }

.rowsec { padding: 22px 0 0; }
.rowhead { display: flex; align-items: baseline; gap: 12px; padding: 0 var(--pad); }
.rowhead h3 { margin: 0; font-size: 18px; }
.rowhead button { background: none; border: 0; color: var(--accent); font-size: 13px; }
.rail { display: flex; gap: 12px; overflow-x: auto; padding: 12px var(--pad) 8px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rail > * { scroll-snap-align: start; flex: none; }

/* ---------- Tarjetas ---------- */
.card { width: clamp(112px, 14vw, 168px); background: none; border: 0; padding: 0; text-align: left; position: relative; }
.card.wide { width: clamp(160px, 20vw, 240px); }
.card .art { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: var(--surface-2); transition: transform .18s, box-shadow .18s; }
.card.wide .art { aspect-ratio: 16/9; }
.card:hover .art, .card:focus-visible .art { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 28px #000a, 0 0 0 2px var(--accent-2); }
.card .art img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.card.wide .art img { object-fit: contain; padding: 10px; }
.card .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #1f6055; }
.card .name { margin-top: 7px; font-size: 13px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #0008; z-index: 2; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.tag { position: absolute; z-index: 2; left: 6px; bottom: 8px; background: #000b; border-radius: 4px; padding: 1px 6px; font-size: 11px; }
.star { position: absolute; z-index: 2; top: 6px; right: 6px; color: var(--gold); font-size: 16px; text-shadow: 0 1px 4px #000; }
.more { width: clamp(112px, 14vw, 168px); aspect-ratio: 2/3; border: 1px dashed var(--line); border-radius: 10px; background: none; color: var(--accent); font-weight: 700; }
.more.wide { width: clamp(160px, 20vw, 240px); aspect-ratio: 16/9; }

/* ---------- Páginas ---------- */
.page { padding: 28px var(--pad) 0; }
.page h2 { margin: 0 0 6px; font-size: 26px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.chip { border: 1px solid var(--line); background: none; border-radius: 999px; padding: 5px 14px; font-size: 13px; color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--accent-2); }
.chip.on { background: var(--accent); color: #032018; border-color: var(--accent); font-weight: 700; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 18px 14px; margin-top: 18px; }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grid .card, .grid .card.wide { width: auto; }
.expiry { margin: 10px var(--pad) 0; padding: 9px 14px; border-radius: 10px; background: #d6a35c24; color: #f0d9b0; font-size: 14px; border: 1px solid #d6a35c55; }
.empty { color: var(--muted); padding: 60px 0; text-align: center; }
.skeleton { height: 220px; margin: 22px var(--pad) 0; border-radius: 12px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sh 1.4s infinite linear; }
@keyframes sh { to { background-position: -200% 0; } }
/* Silueta de una tarjeta mientras su fila espera a acercarse a la pantalla (ver rowSection en app.js). */
.card-skel { width: clamp(112px, 14vw, 168px); aspect-ratio: 2/3; border-radius: 10px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: sh 1.4s infinite linear; }
.card-skel.wide { width: clamp(160px, 20vw, 240px); aspect-ratio: 16/9; }
.live-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; margin-top: 16px; }
.live-groups { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 190px); overflow: auto; position: sticky; top: calc(var(--nav-h) + 12px); align-self: start; }
.live-groups button { text-align: left; background: none; border: 0; border-radius: 8px; padding: 8px 10px; color: var(--muted); }
.live-groups button:hover { background: var(--surface); color: var(--text); }
.live-groups button.on { background: var(--surface-2); color: var(--accent); font-weight: 700; }
.now { color: var(--accent); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .live-layout { grid-template-columns: 1fr; } .live-groups { flex-direction: row; max-height: none; position: static; overflow-x: auto; } .live-groups button { white-space: nowrap; } .who { display: none; } .nav { gap: 12px; } .brand span { display: none; } }

/* ---------- Ficha ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: #000c; display: grid; place-items: start center; overflow: auto; padding: 4vh 12px; }
.sheet { width: min(920px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.sheet-head { display: flex; gap: 22px; padding: 26px; position: relative; }
.sheet-head img.poster { width: 150px; aspect-ratio: 2/3; border-radius: 10px; object-fit: cover; background: var(--surface-2); flex: none; }
.sheet-head h2 { margin: 0 0 6px; font-size: 26px; }
.sheet-head .meta { color: var(--muted); margin-bottom: 16px; }
.sheet-head .plot { margin: 0 0 12px; line-height: 1.55; color: var(--text); max-width: 62ch; }
.sheet-head .plot:empty { display: none; }
.sheet-head .facts { color: var(--muted); font-size: 13px; margin-bottom: 16px; display: grid; gap: 4px; max-width: 62ch; }
.sheet-head .facts b { color: var(--text); font-weight: 600; }
.similar { padding: 4px 26px 26px; }
.similar:empty { display: none; }
.ep .t small.ep-plot { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.sheet-head .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sheet .close { position: absolute; top: 14px; right: 14px; }
.eps { padding: 0 26px 26px; }
.seasons { display: flex; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.ep { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); padding: 12px 4px; }
.ep:hover { background: var(--surface-2); }
.ep .n { width: 34px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; flex: none; }
.ep .t { flex: 1; min-width: 0; }
.ep .t small { color: var(--muted); display: block; }
@media (max-width: 600px) { .sheet-head { flex-direction: column; } .sheet-head img.poster { width: 110px; } }

/* ---------- Reproductor ---------- */
.player { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; flex-direction: column; }
.player video { flex: 1; min-height: 0; width: 100%; background: #000; }
.ptop { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(#000c, transparent); transition: opacity .3s; }
.ptop .title { flex: 1; min-width: 0; }
.ptop .title b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptop .title small { color: var(--muted); }
.player.idle .ptop { opacity: 0; pointer-events: none; }
.player.idle { cursor: none; }
.pmsg { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: 12px; text-align: center; padding: 24px; background: #000b; }
.pmsg.hidden { display: none; }
.spinner { position: absolute; z-index: 1; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px; border: 4px solid #fff3; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.next-up { position: absolute; z-index: 3; right: 20px; bottom: 90px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; width: 260px; }
.next-up small { color: var(--accent); letter-spacing: .12em; font-weight: 700; }

/* ---------- Otros ---------- */
#toast { position: fixed; z-index: 100; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--surface-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: .25s; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.pin { display: grid; gap: 12px; padding: 24px; width: min(340px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; margin-top: 12vh; }
.pin input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; letter-spacing: .3em; font-size: 20px; }

/* ---------- Teléfono: barra en dos filas (marca + búsqueda arriba, secciones deslizables debajo) ---------- */
@media (max-width: 760px) {
  .nav { height: auto; flex-wrap: wrap; gap: 8px 12px; padding-top: 8px; padding-bottom: 6px; }
  .brand { order: 1; }
  .search { order: 2; margin-left: auto; }
  .nav > .btn { order: 3; }
  .tabs { order: 4; flex-basis: 100%; }
  .search input, .search input:focus { width: 44vw; max-width: none; }
  .hero { padding-bottom: 24px; }
  .hero-in { gap: 16px; }
}