/* Hispano IPTV web — same look as the Android TV app, sized for a computer screen. */

@font-face { font-family: Montserrat; font-weight: 100 900; font-display: swap; src: url(fonts/montserrat.woff2) format('woff2'); }

:root {
  /* Hispano IPTV: purple #880BEB to orange #F47F13, on near-black with a hint of purple */
  --bg: #0b0a10;
  --surface: #16141d;
  --surface2: #221e2b;
  --surface3: #2e2939;
  --line: rgba(255, 255, 255, .08);
  --text: #f6f4fa;
  --dim: #aea8bc;
  --faint: #746e82;
  --purple: #880beb;
  --orange: #f47f13;
  --accent: #f47f13;
  --grad: linear-gradient(to top right, #880beb, #c4497a 52%, #f47f13);
  --grad-h: linear-gradient(90deg, #880beb, #c4497a 55%, #f47f13);
  --focus: #ffffff;
  --pad: clamp(16px, 3.4vw, 56px);
  --nav: calc(64px + env(safe-area-inset-top)); /* la barra incluye la zona del reloj / notch del iPhone */
  --poster: clamp(122px, 10.2vw, 184px);
  --wide: clamp(208px, 16.5vw, 288px);
  --event: clamp(240px, 20vw, 320px);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.reduce *, body.reduce *::before, body.reduce *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
button { font: inherit; color: inherit; }
img { display: block; }
img.missing { visibility: hidden; }
h1, h2, h3, h4, p { margin: 0; }

.t-display { font-size: clamp(28px, 3.2vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.t-title { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.t-section { font-size: 17px; font-weight: 600; line-height: 1.35; }
.t-label { font-size: 14px; font-weight: 500; line-height: 1.35; }
.t-caption { font-size: 12.5px; line-height: 1.4; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }
.grow { flex: 1; }
.clamp1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2, .clamp3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp2 { -webkit-line-clamp: 2; }
.clamp3 { -webkit-line-clamp: 3; }
.ic { display: inline-flex; width: 18px; height: 18px; flex: none; }
.ic svg { width: 100%; height: 100%; }
.ic.sm { width: 14px; height: 14px; }

/* focusable items: rings only for the keyboard (body.kbd); the mouse gets hover states */
.f { outline: none; -webkit-tap-highlight-color: transparent; }
body.kbd .f:focus { outline: 2px solid var(--focus); outline-offset: 3px; }
#app { position: fixed; inset: 0; overflow: hidden; }

/* ------------------------------------------------------------ loading TV */
.spinner { width: 64px; height: 64px; background: url(img/mark-square.png) center/contain no-repeat; transform-origin: 50% 100%; animation: tvrock 1.3s infinite; }
/* the TV of the logo rocking on its base, like a set being tuned in */
@keyframes tvrock {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(-9deg); animation-timing-function: ease-in-out; }
  50% { transform: rotate(9deg); animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  74% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; text-align: center; padding: 24px; }

/* ------------------------------------------------------------ buttons */
.pill {
  height: 40px; padding: 0 18px; border-radius: 99px; border: 0; background: rgba(255, 255, 255, .12); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.pill:hover { background: rgba(255, 255, 255, .2); }
.pill:active { transform: scale(.97); }
.pill .ic { width: 17px; height: 17px; }
.pill.glass { background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pill.glass:hover { background: rgba(255, 255, 255, .28); }
.pill.ghost { background: transparent; padding: 0 14px 0 10px; color: var(--dim); }
.pill.ghost:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.pill.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px -8px rgba(136, 11, 235, .7); }
.pill.primary:hover { background: var(--grad); filter: brightness(1.1); }
body.kbd .pill.primary:focus { background: #fff; color: #0b0a10; filter: none; }
.pill.round { width: 40px; padding: 0; }
.pill.round svg { width: 18px; height: 18px; }
.pill.round.on { color: #fff; }
.pill[disabled] { opacity: .45; cursor: default; }
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 99px; background: var(--surface2); flex: none; }
.seg .tab { height: 32px; padding: 0 14px; border-radius: 99px; border: 0; background: transparent; color: var(--dim); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
.seg .tab:hover { color: var(--text); }
.seg .tab.on { background: rgba(255, 255, 255, .14); color: var(--text); }
.more { border: 0; background: none; color: var(--dim); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 6px; display: inline-flex; align-items: center; gap: 2px; }
.more:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* chips (filters, categories) */
.chipbtn {
  height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: var(--dim);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; flex: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chipbtn:hover { color: var(--text); border-color: rgba(255, 255, 255, .34); }
.chipbtn.on { background: var(--grad); color: #fff; border-color: transparent; }
.chipbtn.on .n { color: rgba(255, 255, 255, .75); }
.chipbtn i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chipbtn .n { color: var(--faint); font-weight: 500; font-size: 12.5px; }
.selectbox {
  height: 34px; border-radius: 99px; background-color: var(--surface2); color: var(--text); border: 1px solid rgba(255, 255, 255, .14);
  padding: 0 34px 0 14px; font: inherit; font-size: 13.5px; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6b0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.selectbox:hover { border-color: rgba(255, 255, 255, .34); }
.selectbox.on { border-color: #fff; }
.selectbox option { background: var(--surface2); color: var(--text); }
.filterbox, .searchbox {
  display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--surface2);
  border: 1px solid rgba(255, 255, 255, .14); color: var(--dim); transition: border-color .15s, background .15s; cursor: text;
}
.filterbox:focus-within, .searchbox:focus-within { border-color: rgba(255, 255, 255, .5); background: var(--surface3); }
.filterbox .ic, .searchbox .ic { width: 16px; height: 16px; }
.filterbox input, .searchbox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; font-size: 13.5px; }
input[type=search]::-webkit-search-cancel-button { filter: invert(1) opacity(.6); cursor: pointer; }

/* ------------------------------------------------------------ top bar */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav); z-index: 40; display: flex; align-items: center; gap: 20px; padding: env(safe-area-inset-top) max(var(--pad), env(safe-area-inset-right)) 0 max(var(--pad), env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(11, 10, 16, .92), rgba(11, 10, 16, .6) 60%, rgba(11, 10, 16, 0)); transition: background .25s, box-shadow .25s;
}
.topnav.solid, .topnav.onpage { background: rgba(11, 10, 16, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
.topnav .brand { width: 128px; height: 27px; flex: none; border: 0; padding: 0; cursor: pointer; background: url(img/logo.png) left center/contain no-repeat; margin-right: 8px; transition: opacity .15s; }
.topnav .brand:hover { opacity: .8; }
.topnav .links { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav .links::-webkit-scrollbar { display: none; }
.lnk { position: relative; height: 36px; padding: 0 14px; border-radius: 99px; border: 0; background: transparent; color: var(--dim); font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.lnk:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.lnk.cur { color: var(--text); }
.lnk.cur::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--grad-h); }
.topnav .searchbox { height: 38px; width: clamp(170px, 17vw, 280px); background: rgba(255, 255, 255, .08); border-color: transparent; }
.topnav .searchbox:focus-within { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .35); }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .15s, color .15s; }
.iconbtn:hover, .iconbtn.cur { background: rgba(255, 255, 255, .1); color: var(--text); }
.iconbtn svg { width: 20px; height: 20px; }
.topnav .clock { font-size: 14px; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.topnav .status { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim); max-width: 240px; min-width: 0; }
.topnav .status .spinner { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------ screens */
.screen { position: absolute; inset: 0; }
.scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--nav) + 8px) 0 72px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; overscroll-behavior: contain;
}
.scroll::-webkit-scrollbar { width: 12px; }
.scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 12px; border: 3px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .3); }
.page { position: absolute; inset: 0; background: var(--bg); z-index: 1; }
.page.under { visibility: hidden; }
.sentinel { height: 1px; }
.empty { position: relative; min-height: 60vh; }
.hint { margin: 8px var(--pad); color: var(--dim); }

/* shelves */
.shelf { margin-bottom: 22px; }
.shelf-h { display: flex; align-items: center; gap: 10px; margin: 0 var(--pad); }
.shelf-h h3 { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: -.005em; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; display: inline-block; }
.rowwrap { position: relative; }
.row { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding: 12px var(--pad) 10px; scroll-padding: 0 var(--pad); }
.row::-webkit-scrollbar { display: none; }
.row > * { flex: none; }
.rarr {
  position: absolute; top: 12px; bottom: 10px; width: max(44px, calc(var(--pad) + 4px)); border: 0; z-index: 3; color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .2s; padding: 0;
}
.rarr.l { left: 0; background: linear-gradient(90deg, rgba(11, 10, 16, .95), rgba(11, 10, 16, .6) 60%, rgba(11, 10, 16, 0)); }
.rarr.r { right: 0; background: linear-gradient(270deg, rgba(11, 10, 16, .95), rgba(11, 10, 16, .6) 60%, rgba(11, 10, 16, 0)); }
.rarr svg { width: 30px; height: 30px; transition: transform .15s; }
.rarr:hover svg { transform: scale(1.18); }
.rowwrap:hover .rarr { opacity: 1; }
.rarr[hidden] { display: none; }
.catrow .row { gap: 8px; padding-top: 10px; padding-bottom: 6px; }
.catrow .rarr { top: 10px; bottom: 6px; }

/* cards */
.card { width: var(--poster); cursor: pointer; }
.card.wide { width: var(--wide); }
.card .art { position: relative; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden; background: linear-gradient(var(--surface2), var(--surface)); transition: transform .25s var(--ease), box-shadow .25s; }
.card.wide .art { aspect-ratio: 16/9; }
.card .art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .art .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; color: var(--dim); font-size: 13px; font-weight: 500; }
.card .art img:not(.missing) + .fallback { display: none; }
.card .ttl { margin-top: 8px; font-size: 13.5px; font-weight: 500; color: #dcd8e4; }
.card .sub { font-size: 12.5px; color: var(--faint); }
.card .hov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 40%, rgba(0, 0, 0, .3)); opacity: 0; transition: opacity .2s; }
.playic { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: #0b0a10; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .25s var(--ease); pointer-events: none; }
.playic svg { width: 20px; height: 20px; margin-left: 2px; }
.favbtn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0; background: rgba(11, 10, 16, .72); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .15s, color .15s, transform .15s; cursor: pointer; z-index: 2; }
.favbtn svg { width: 16px; height: 16px; }
.favbtn:hover { background: #fff; color: #0b0a10; transform: scale(1.08); }
.favbtn.on svg { color: inherit; }
.card:hover .art { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.card:hover .hov, .card:hover .playic, .card:hover .favbtn { opacity: 1; }
.card:hover .playic { transform: none; }
.card:hover .ttl { color: #fff; }
body.kbd .card:focus { outline: none; }
body.kbd .card:focus .art { box-shadow: 0 0 0 2px var(--focus), 0 14px 30px rgba(0, 0, 0, .6); transform: scale(1.04); }
body.kbd .card:focus .ttl { color: #fff; }
.chip { position: absolute; padding: 2px 7px; border-radius: 6px; background: rgba(0, 0, 0, .7); color: #fff; font-size: 12px; font-weight: 600; }
.chip.tr { top: 8px; right: 8px; }
.chip.tl { top: 8px; left: 8px; }
.progress { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grad-h); }
.card .progress { position: absolute; left: 8px; right: 8px; bottom: 8px; }
.livechip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.livechip .dot { width: 6px; height: 6px; }
.capimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk { background: var(--surface); border-radius: 10px; animation: breathe 1.8s ease-in-out infinite alternate; }
.sk.card { aspect-ratio: 2/3; }
@keyframes breathe { from { opacity: .45; } to { opacity: .9; } }

/* channel logo tiles */
.logo-tile { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--surface2); }
.logo-tile img { max-width: 76%; max-height: 68%; object-fit: contain; }
.logo-tile { transition: background-color .25s; }
.logo-tile.tone-d { background: #d5d5da; } /* dark logo: soft light grey, never pure white */
.logo-tile.tone-w { background: #2e3035; } /* white logo: graphite */
.logo-tile.tone-d .nm { color: #4a4a52; }
.logo-tile.tone-fill { background: var(--plate); } /* logo with its own background: the whole tile takes its colour */
.logo-tile.tone-fill img { max-width: 84%; max-height: 80%; }
.logo-tile .nm { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; color: var(--dim); font-size: 12.5px; font-weight: 600; }
.logo-tile img:not(.missing) ~ .nm { display: none; }
.logo-tile.floating { background: transparent; left: 30%; }
.logo-tile.floating.tone-d, .logo-tile.floating.tone-w, .logo-tile.floating.tone-fill { background: transparent; }
.logo-tile.floating.tone-d img { filter: brightness(0) invert(.86); }

/* event cards */
.event { width: var(--event); aspect-ratio: 16/9; border-radius: 12px; position: relative; overflow: hidden; background: var(--surface); cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s; }
.event .evbg, .event .tint { position: absolute; inset: 0; }
.event img.cap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15), transparent 40%, rgba(0, 0, 0, .88)); }
.event .lg { position: absolute; top: 10px; right: 10px; width: 64px; height: 36px; border-radius: 6px; overflow: hidden; }
.event .livechip { position: absolute; top: 10px; left: 10px; }
.event .txt { position: absolute; left: 12px; right: 12px; bottom: 12px; }
.event .txt .t { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.3; }
.event .txt .s { font-size: 12.5px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.event .progress { margin-top: 8px; }
.event:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .6); }
.event:hover .playic { opacity: 1; transform: none; }
body.kbd .event:focus { outline: none; box-shadow: 0 0 0 2px var(--focus), 0 14px 30px rgba(0, 0, 0, .6); transform: scale(1.04); }

/* ------------------------------------------------------------ big boxes (featured, showcase, live band) */
.box { position: relative; border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
body.kbd .box:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.box .stage { position: absolute; inset: 0; cursor: pointer; }
.box .layer { position: absolute; inset: 0; transition: opacity .7s; }
.box .layer.out { opacity: 0; }
.box .layer img.bg { width: 100%; height: 100%; object-fit: cover; }
.box .kb { animation: kb 18s linear infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.box .blur { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(30px); opacity: .55; }
.box .poster { position: absolute; right: 7%; top: 8%; bottom: 8%; aspect-ratio: 2/3; object-fit: cover; border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.box .grad-l { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .66) 32%, rgba(0, 0, 0, .15) 60%, transparent 80%); }
.box .grad-b { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .75)); }
.box .info { position: absolute; left: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 40px); width: min(580px, 56%); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.box .title { margin-top: 8px; font-size: clamp(24px, 2.6vw, 42px); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.box .meta { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .78); }
.box .desc { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .66); line-height: 1.5; }
.btns { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.favwrap { display: contents; }
.boxctl { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; }
.boxctl .pill.round { width: 36px; height: 36px; opacity: 0; transition: opacity .2s, background .15s; }
.box:hover .boxctl .pill.round, .liveband:hover .boxctl .pill.round, body.kbd .boxctl .pill.round { opacity: 1; }
.dots { display: flex; gap: 4px; align-items: center; padding: 6px 8px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .4); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.dots button:hover { background: rgba(255, 255, 255, .8); }
.dots button.on { width: 22px; background: #fff; }
.video-cover { position: absolute; inset: 0; overflow: hidden; }
.video-cover video, .video-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-cover video { opacity: 0; transition: opacity .6s; }
.video-cover video.on { opacity: 1; }

/* home bento */
.bento { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 380px); gap: 16px; height: clamp(320px, 46vh, 540px); margin: 4px var(--pad) 30px; }
.livepanel { border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); padding: 14px 8px 8px; display: flex; flex-direction: column; min-height: 0; }
.livepanel .ph { display: flex; align-items: center; justify-content: space-between; margin: 0 4px 6px 10px; }
.livepanel h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.livepanel .list { flex: 1; overflow-y: auto; scrollbar-width: none; min-height: 0; }
.livepanel .list::-webkit-scrollbar { display: none; }
.lnr { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.lnr .lg { width: 58px; height: 33px; border-radius: 6px; overflow: hidden; position: relative; flex: none; }
.lnr .tx { flex: 1; min-width: 0; }
.lnr .t { font-size: 14px; font-weight: 600; }
.lnr .s { font-size: 12.5px; color: var(--faint); }
.lnr .s b { color: var(--accent); font-weight: 700; font-size: 11.5px; letter-spacing: .03em; }
.lnr .progress { width: 34px; flex: none; }
.lnr:hover, .lnr.pin { background: var(--surface3); }
body.kbd .lnr:focus { outline-offset: -2px; }

/* live band (En vivo) */
.liveband { display: grid; grid-template-columns: minmax(280px, 36%) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); height: clamp(300px, 46vh, 520px); margin: 4px var(--pad) 30px; }
.liveband .txtcol { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.liveband .title { font-size: clamp(26px, 2.8vw, 44px); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; margin: 14px 0 12px; }
.liveband .sub { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .78); font-size: 14px; min-width: 0; }
.minilogo { width: 46px; height: 26px; position: relative; border-radius: 5px; overflow: hidden; flex: none; }
.liveband .bar { width: 72%; margin-top: 12px; }
.liveband .desc { color: rgba(255, 255, 255, .6); font-size: 14px; margin-top: 12px; line-height: 1.5; }
.liveband .vid { height: 100%; }

/* En vivo: channel list */
.chsec { margin: 8px var(--pad) 0; }
.chsec-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.chsec-h h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.chsec-h .count { color: var(--faint); font-size: 14px; }
.chtools { position: sticky; top: -8px; z-index: 5; display: flex; gap: 12px; align-items: center; padding: 12px 0; margin-bottom: 6px; background: var(--bg); box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .8); }
.chtools .chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; padding: 2px; }
.chtools .chips::-webkit-scrollbar { display: none; }
.chtools .toolsr { display: flex; gap: 10px; align-items: center; flex: none; }
.chtools .filterbox { width: clamp(180px, 16vw, 250px); }
.chgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px 12px; }
.chrow { display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 6px; border-radius: 12px; background: var(--surface); cursor: pointer; min-width: 0; transition: background .15s; }
.chrow:hover { background: var(--surface3); }
.chrow .num { width: 32px; text-align: right; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.chrow .lg { width: 72px; height: 41px; border-radius: 7px; overflow: hidden; position: relative; flex: none; }
.chrow .tx { flex: 1; min-width: 0; }
.chrow .n { font-size: 14.5px; font-weight: 600; }
.chrow .p { font-size: 12.5px; color: var(--dim); margin-top: 1px; }
.chrow .p .tm { color: var(--faint); font-variant-numeric: tabular-nums; margin-right: 6px; }
.chrow .progress { margin-top: 6px; height: 3px; max-width: 170px; }
.chrow .fav { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--faint); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.chrow .fav svg { width: 18px; height: 18px; }
.chrow:hover .fav { opacity: 1; }
.chrow .fav:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.chrow .fav.on { opacity: 1; color: var(--accent); }
body.kbd .chrow:focus { outline-offset: -2px; background: var(--surface3); }
.chempty { grid-column: 1 / -1; padding: 48px 0; color: var(--dim); text-align: center; }

/* Películas / Series */
.showcase { height: clamp(320px, 50vh, 580px); margin: 4px var(--pad) 26px; }

/* pages opened over a section */
.backrow { display: flex; align-items: center; gap: 12px; margin: 0 var(--pad) 10px; position: relative; z-index: 2; }
.backrow .pill.ghost { margin-left: -10px; }
.gridhead { display: flex; align-items: flex-end; gap: 16px; margin: 6px var(--pad) 20px; flex-wrap: wrap; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--poster), 1fr)); gap: 24px 14px; margin: 0 var(--pad); }
.pgrid .card { width: auto; }
.detailpage { padding-top: calc(var(--nav) + 8px); }
.detail-bg { position: absolute; top: 0; right: 0; width: 72%; height: min(84vh, 820px); pointer-events: none; }
.detail-bg img { width: 100%; height: 100%; object-fit: cover; }
.detail-bg.blur img { filter: blur(32px); opacity: .55; }
.detail-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg), rgba(11, 10, 16, .6) 42%, rgba(11, 10, 16, .1) 75%), linear-gradient(180deg, rgba(11, 10, 16, .55), transparent 20%, rgba(11, 10, 16, .25) 55%, var(--bg) 96%); }
.detail { position: relative; padding: clamp(24px, 9vh, 120px) var(--pad) 0; max-width: calc(640px + 2 * var(--pad)); }
.detail h1 { margin-top: 10px; }
.detail .meta { margin-top: 12px; color: var(--dim); font-size: 14.5px; font-weight: 500; }
.detail .plot { margin-top: 16px; color: #c9c9d1; font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.detail .credits { margin-top: 10px; font-size: 13.5px; color: var(--dim); }
.detail .btnrow { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.detail-rows { position: relative; margin-top: clamp(32px, 7vh, 72px); }
.eps-h { display: flex; align-items: center; gap: 14px; margin: 0 var(--pad) 14px; }
.eps-h h2 { font-size: 20px; font-weight: 700; }
.epgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 14px; margin: 0 var(--pad) 34px; }
.epgrid .card { width: auto; }
.loadbox { position: relative; height: 200px; }
.searchhead { margin: 8px var(--pad) 18px; }

/* ------------------------------------------------------------ forms / auth */
.form { width: 440px; max-width: 92vw; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.input { width: 100%; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .12); background: var(--surface2); color: var(--text); font: inherit; font-size: 15px; padding: 0 14px; outline: none; transition: border-color .15s; }
.input:hover { border-color: rgba(255, 255, 255, .24); }
.input:focus { border-color: rgba(255, 255, 255, .7); }
.err { color: #ff8a90; font-size: 13.5px; min-height: 18px; }
.brand-big { width: min(340px, 80vw); height: 72px; background: url(img/logo-full.png) center/contain no-repeat; }
.form .seg { align-self: flex-start; }
.form .pill { height: 44px; }

/* settings */
.settings { padding: 8px var(--pad) 40px; max-width: calc(980px + 2 * var(--pad)); }
.settings h2 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 32px 0 10px; }
.srow { display: flex; align-items: center; gap: 24px; padding: 16px 20px; border-radius: 12px; background: var(--surface); margin-bottom: 8px; flex-wrap: wrap; }
.srow .tx { flex: 1; min-width: 240px; }
.srow .tx .a { font-size: 15px; font-weight: 600; }
.srow .tx .b { font-size: 13px; color: var(--dim); margin-top: 2px; }
.speedbox { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.speed { font-size: 13px; color: var(--text); text-align: right; }
.btnset { display: flex; gap: 8px; flex-wrap: wrap; }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 24px; padding: 16px 20px; border-radius: 12px; background: var(--surface); }
.key { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--dim); }
kbd { min-width: 64px; text-align: center; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--surface3); border-radius: 6px; padding: 3px 8px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------ player */
.player { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; outline: none; user-select: none; }
.player.idle, .player.idle video { cursor: none; }
.player video, .player movi-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.player .spinwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.player .spinwrap .spinner { width: 52px; height: 52px; }
.ptop, .pbottom { position: absolute; left: 0; right: 0; transition: opacity .3s, transform .3s var(--ease); z-index: 2; }
.ptop { top: 0; display: flex; align-items: center; gap: 12px; padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 56px max(20px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 55%, transparent); }
.pbottom { bottom: 0; padding: 64px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: linear-gradient(0deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .45) 60%, transparent); }
.player.hidectl .ptop { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.player.hidectl .pbottom { opacity: 0; transform: translateY(14px); pointer-events: none; }
.player.islive .seek { display: none; }
.pbtn { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .15s, transform .12s; }
.pbtn:hover { background: rgba(255, 255, 255, .14); }
.pbtn:active { transform: scale(.9); }
.pbtn svg { width: 24px; height: 24px; }
.pbtn.big { width: 50px; height: 50px; }
.pbtn.dim { opacity: .45; }
.pbtn.dim:hover { opacity: .8; }
.tourvid { position: fixed; right: 0; bottom: 0; width: 4px; height: 4px; opacity: .01; pointer-events: none; z-index: -1; }
.pbtn.big svg { width: 28px; height: 28px; }
.ptitle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ptx { min-width: 0; }
.ptx .a { font-size: 18px; font-weight: 700; }
.ptx .a .num { color: var(--accent); margin-right: 10px; font-variant-numeric: tabular-nums; }
.ptx .b { font-size: 13.5px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.plogo { width: 72px; height: 41px; border-radius: 7px; overflow: hidden; position: relative; flex: none; }
.livebadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.prow { display: flex; align-items: center; gap: 4px; }
.pgrow { flex: 1; }
.ptime { font-size: 13.5px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; margin-left: 10px; white-space: nowrap; }
.vol { display: flex; align-items: center; }
.vol .rng { width: 0; opacity: 0; transition: width .2s, opacity .2s, margin .2s; accent-color: #fff; cursor: pointer; margin: 0; }
.vol:hover .rng, .vol:focus-within .rng { width: 92px; opacity: 1; margin: 0 8px 0 2px; }
.pnow { flex: 1; min-width: 0; padding: 0 16px; }
.pnow .t { font-size: 14px; font-weight: 600; }
.pnow .t .tm { color: rgba(255, 255, 255, .6); font-weight: 500; margin-right: 8px; font-variant-numeric: tabular-nums; }
.pnow .progress { margin-top: 6px; max-width: 420px; height: 3px; }
.pnow .n { font-size: 12.5px; color: rgba(255, 255, 255, .55); margin-top: 5px; }
.seek { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; margin: 0 10px 4px; touch-action: none; }
.seek .track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .25); transition: height .12s; }
.seek:hover .track, .seek.drag .track { height: 6px; }
.seek .buf, .seek .played { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.seek .buf { background: rgba(255, 255, 255, .3); }
.seek .played { background: var(--grad-h); }
.seek .knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; }
.seek:hover .knob, .seek.drag .knob { transform: scale(1); }
.seek .tip { position: absolute; bottom: 24px; transform: translateX(-50%); background: rgba(22, 20, 29, .96); padding: 4px 8px; border-radius: 6px; font-size: 12.5px; font-variant-numeric: tabular-nums; display: none; white-space: nowrap; pointer-events: none; }
.seek:hover .tip, .seek.drag .tip { display: block; }
.player .flash { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: rgba(0, 0, 0, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; opacity: 0; pointer-events: none; color: #fff; }
.player .flash svg { width: 34px; height: 34px; }
.player .flash span { font-size: 11.5px; font-weight: 600; }
.player .flash.on { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 0; transform: scale(.8); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.player .err { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(16, 16, 20, .92); padding: 24px 28px; border-radius: 16px; text-align: center; color: var(--text); font-size: 14px; max-width: min(520px, 90vw); z-index: 3; }
.player .err .et { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.player .engrow { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.player .engrow .pill { height: 32px; padding: 0 12px; font-size: 13px; }
.engchip { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .14); font-size: 11.5px; font-weight: 600; vertical-align: 3px; color: rgba(255, 255, 255, .85); }
.player video, .player movi-player, .player avbridge-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
.player .err .diag { margin-top: 10px; font-size: 12.5px; color: var(--faint); }
.errbtns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.player .mosca { position: absolute; left: 32px; bottom: 26px; height: 22px; width: 104px; background: url(img/logo.png) left bottom/contain no-repeat; opacity: 0; transition: opacity .8s; pointer-events: none; }
.player .mosca.on { opacity: .3; }
.player .side {
  position: absolute; top: 12px; bottom: 96px; width: min(380px, calc(100vw - 24px)); background: rgba(14, 14, 18, .97); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), opacity .25s; z-index: 4;
}
.player .side.left { left: 12px; }
.player .side.right { right: 12px; bottom: auto; max-height: calc(100% - 108px); }
.player .side.closed.left { transform: translateX(-24px); opacity: 0; pointer-events: none; }
.player .side.closed.right { transform: translateX(24px); opacity: 0; pointer-events: none; }
.sideh { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 10px; }
.sideh h3 { font-size: 18px; font-weight: 700; }
.player .side .filterbox { margin: 0 6px; height: 38px; }
.optlist { flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.optlist h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 16px 10px 6px; }
.optlist .note { padding: 0 10px; font-size: 13px; }
.chipset { display: flex; gap: 6px; padding: 0 8px; flex-wrap: wrap; }
.player .opt { min-height: 42px; border-radius: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; }
.player .opt:hover { background: rgba(255, 255, 255, .08); }
.player .opt.cur { background: rgba(255, 255, 255, .12); }
.player .opt .ck { width: 18px; color: var(--accent); font-weight: 700; }
.player .opt.ch .num { width: 34px; text-align: right; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }
.player .opt.ch .lg { width: 52px; height: 30px; position: relative; border-radius: 5px; overflow: hidden; flex: none; background: var(--surface2); }
.player .opt.ch .tx { min-width: 0; flex: 1; }
.player .opt.ch .p { font-size: 12px; color: var(--faint); }
body.kbd .player .opt:focus { outline-offset: -2px; }
.player .digits { position: absolute; top: 24px; right: 24px; background: rgba(0, 0, 0, .7); border-radius: 12px; padding: 6px 18px; font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 3; }
.player .nextup { position: absolute; right: 24px; bottom: 120px; width: min(470px, 90vw); display: flex; gap: 16px; padding: 14px; border-radius: 16px; background: rgba(12, 12, 16, .9); z-index: 3; }
.player .nextup .thumb { width: 160px; aspect-ratio: 16/9; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface2); }
.player .nextup .nx { flex: 1; min-width: 0; }
.player .nextup .nt { font-size: 14px; font-weight: 600; margin: 4px 0 10px; }
.player .nextup .nb { display: flex; gap: 8px; flex-wrap: wrap; }
.player .nextup .nb .pill { height: 34px; padding: 0 14px; font-size: 13px; }
.player .nextup .secs { margin-top: 8px; }
video::cue { font-family: Montserrat, sans-serif; font-weight: 500; color: #fff; background: transparent; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
body.subbg video::cue { background: rgba(0, 0, 0, .63); text-shadow: none; }

#toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px); background: rgba(34, 30, 43, .97); color: var(--text); padding: 11px 20px; border-radius: 99px; font-size: 14px; font-weight: 500; opacity: 0; transition: opacity .25s, transform .25s; z-index: 100; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ smaller windows */
/* versions of a film */
.versions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.versions .vl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }

/* ------------------------------------------------------------ "+" card, Organizar */
.addcard .art { border: 1.5px dashed rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .03); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.addcard .plus { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: #fff; transition: background .15s, transform .2s var(--ease); }
.addcard .plus .ic { width: 22px; height: 22px; }
.addcard .lbl { font-size: 13.5px; font-weight: 600; color: var(--dim); }
.addcard:hover .art { border-color: rgba(255, 255, 255, .45); box-shadow: none; }
.addcard:hover .plus { background: var(--grad); color: #fff; transform: scale(1.06); }
.addcard:hover .lbl { color: var(--text); }
body.kbd .addcard:focus .art { border-color: transparent; }
body.kbd .addcard:focus .plus { background: #fff; color: #0b0a10; }
.orgbar { display: flex; justify-content: center; margin: 4px var(--pad) 26px; }
.orgbar .pill { color: var(--faint); }

/* ------------------------------------------------------------ dialogs */
.dlg { position: fixed; inset: 0; z-index: 60; background: rgba(5, 5, 8, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .16s; }
.dlg.in { opacity: 1; }
.dlg.out { opacity: 0; }
.dlg-p { width: min(620px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .7); transform: translateY(10px) scale(.985); transition: transform .2s var(--ease); }
.dlg-p.wide { width: min(980px, 100%); }
.dlg.in .dlg-p { transform: none; }
.dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 20px 14px 12px 24px; }
.dlg-h .tx { flex: 1; min-width: 0; }
.dlg-h h2 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.dlg-h .sub { font-size: 13px; color: var(--dim); margin-top: 3px; }
.dlg-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 24px 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; overscroll-behavior: contain; }
.dlg-b h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 16px 2px 8px; }

/* switch */
.switch { width: 44px; height: 26px; border-radius: 99px; border: 0; padding: 0; background: var(--surface3); position: relative; cursor: pointer; flex: none; transition: background .18s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #c9c9d1; transition: transform .2s var(--ease), background .18s; }
.switch.on { background: var(--grad); }
.switch.on i { transform: translateX(18px); background: #fff; }
body.kbd .switch:focus { outline-offset: 2px; }

/* sortable rows */
.sortable { display: flex; flex-direction: column; gap: 6px; }
.srt { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 4px; border-radius: 12px; background: var(--surface2); position: relative; transition: background .15s, opacity .15s; }
.srt .grip { width: 30px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--faint); cursor: grab; touch-action: none; flex: none; border-radius: 8px; }
.srt .grip:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.srt .grip .ic { width: 18px; height: 18px; }
.srt .main { flex: 1; min-width: 0; }
.srt .tx .a { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 9px; }
.srt .tx .b { font-size: 12.5px; color: var(--faint); margin-top: 1px; }
.srt .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.srt .mv { width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; background: transparent; color: var(--dim); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: background .15s, color .15s, opacity .15s; }
.srt .mv .ic { width: 18px; height: 18px; }
.srt .mv:hover { background: rgba(255, 255, 255, .1); color: var(--text); }
.srt .mv.off { opacity: .25; pointer-events: none; }
body.kbd .srt .mv.off:focus { opacity: .6; }
.srt .switch { margin-left: 6px; }
.srt.hid .main { opacity: .45; }
.srt.dragging { z-index: 2; background: var(--surface3); box-shadow: 0 14px 34px rgba(0, 0, 0, .6); transition: none; }
.srt.dragging .grip { cursor: grabbing; }
.srt.moved { animation: srtmoved .5s ease-out; }
@keyframes srtmoved { from { background: rgba(255, 255, 255, .16); } to { background: var(--surface2); } }
.org > p { margin: 0 2px 12px; }
.orgfoot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* forms in dialogs */
.form { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--dim); }
.fld > input { height: 42px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: var(--surface2); color: var(--text); font: inherit; font-size: 15px; padding: 0 14px; outline: none; transition: border-color .15s; }
.fld > input:focus { border-color: rgba(255, 255, 255, .55); }
.fld .filterbox { height: 38px; }
.catpick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 214px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.catpick .chipbtn { height: 32px; }
.catpick .chipbtn.on .n { color: #55555f; }

/* channel picker (Mis canales) */
.picker { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.pkcol { min-width: 0; }
.pkcol.mine { position: sticky; top: 0; }
.filterbox.big { height: 44px; padding: 0 16px; }
.filterbox.big input { font-size: 15px; }
.pklist { display: flex; flex-direction: column; gap: 4px; }
.pkrow, .mrow { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pkrow { padding: 7px 8px 7px 7px; border-radius: 12px; cursor: pointer; transition: background .15s; }
.pkrow:hover { background: var(--surface2); }
body.kbd .pkrow:focus { outline-offset: -2px; background: var(--surface2); }
.pkrow .lg, .mrow .lg { width: 64px; height: 36px; border-radius: 7px; overflow: hidden; position: relative; flex: none; }
.mrow .lg { width: 52px; height: 30px; }
.pkrow .tx { flex: 1; min-width: 0; }
.pkrow .n, .mrow .n { font-size: 14px; font-weight: 600; min-width: 0; }
.pkrow .p { font-size: 12.5px; color: var(--faint); }
.pkbtn { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: rgba(255, 255, 255, .08); color: var(--dim); transition: background .15s, color .15s; }
.pkbtn svg { width: 17px; height: 17px; }
.pkrow:hover .pkbtn { background: rgba(255, 255, 255, .16); color: var(--text); }
.pkrow.on .pkbtn { background: var(--grad); color: #fff; }
.pkempty { padding: 14px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, .14); }
.picker .srt { padding: 6px 6px 6px 2px; }
@media (max-width: 760px) {
  .dlg { padding: 0; align-items: flex-end; }
  .dlg-p, .dlg-p.wide { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .dlg-h { padding: 16px 10px 10px 16px; }
  .dlg-b { padding: 4px 16px 20px; }
  .picker { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pkcol.mine { position: static; order: -1; }
  .pkcol.mine .sortable { max-height: 34vh; overflow-y: auto; }
  .srt .mv { width: 30px; }
}

@media (max-width: 1100px) {
  .topnav .status span { display: none; }
}
@media (max-width: 980px) {
  .bento { grid-template-columns: minmax(0, 1fr); height: auto; }
  .bento > .box { height: clamp(260px, 52vw, 440px); }
  .livepanel { max-height: 360px; }
  .liveband { grid-template-columns: minmax(0, 1fr); height: auto; gap: 18px; }
  .liveband .vid { aspect-ratio: 16/9; height: auto; order: -1; }
  .chtools { flex-wrap: wrap; }
  .chtools .chips { flex-basis: 100%; }
  .chtools .toolsr { flex: 1 1 100%; min-width: 0; }
  .chtools .selectbox { flex: 0 1 auto; min-width: 0; }
  .chtools .filterbox { flex: 1 1 160px; width: auto; min-width: 0; }
  .box .info { width: auto; right: clamp(20px, 3vw, 44px); }
}
@media (max-width: 760px) {
  :root { --nav: calc(58px + env(safe-area-inset-top)); }
  .topnav { gap: 8px; }
  .topnav .clock { display: none; }
  .topnav .brand { background-image: url(img/mark-square.png); width: 36px; margin-right: 2px; }
  .lnk { padding: 0 10px; font-size: 14px; }
  .lnk.cur::after { left: 10px; right: 10px; }
  .topnav .searchbox { width: 38px; padding: 0 10px; }
  .topnav .searchbox:focus-within { position: absolute; left: var(--pad); right: var(--pad); width: auto; z-index: 2; background: var(--surface3); }
  .box .desc { display: none; }
  .boxctl .pill.round { display: none; }
  .ptop { padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 40px max(10px, env(safe-area-inset-left)); }
  .pbottom { padding: 40px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .pnow { display: none; }
  .vol .rng { display: none; }
  .favbtn { opacity: 1; }
}
@media (hover: none) {
  .rarr { display: none; }
  .favbtn, .chrow .fav { opacity: 1; }
  .boxctl .pill.round { opacity: 1; }
}

/* ------------------------------------------------------------------ acceso con usuario y clave (como la app) */
.login { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 56px; padding: max(40px, env(safe-area-inset-top)) max(6vw, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(6vw, env(safe-area-inset-left)); }
.login-side { flex: 1; max-width: 460px; display: flex; flex-direction: column; gap: 18px; }
.login-side .brand-big { width: 300px; height: 64px; background-position: left center; }
.login-title { font-size: 24px; font-weight: 700; color: #b9b4c6; }
.login-side .dim { font-size: 15px; line-height: 1.45; }
.login-side .faint { font-size: 13px; }
.login-card { width: 420px; max-width: 92vw; background: var(--surface); border-radius: 24px; padding: 32px 28px; display: flex; flex-direction: column; gap: 8px; }
.login-card .lbl { font-size: 12px; color: rgba(246, 244, 250, .85); margin-top: 8px; }
.login-card .btn { margin-top: 18px; align-self: flex-start; }
.login-card .err { min-height: 18px; }
@media (max-width: 820px) {
  .login { flex-direction: column; gap: 28px; justify-content: flex-start; overflow-y: auto; }
  .login-side { max-width: 420px; align-items: flex-start; }
  .login-side .brand-big { width: 240px; height: 52px; }
}

/* Aviso del panel en Inicio */
.notice { margin: 8px 0 18px; padding: 14px 18px; border-radius: 14px; background: var(--surface2); max-width: 900px; }
.notice .a { color: #f47f13; font-weight: 600; font-size: 13px; }
.notice .b { font-size: 15px; margin-top: 2px; }

/* "SERIES CLASIFICADAS POR PLATAFORMA" */
.eyebrow-row { color: #f47f13; font-weight: 700; font-size: 12px; letter-spacing: .04em; margin: 30px 0 -6px; }

/* Perfiles */
.avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; }
.avatar.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.avatar.md { width: 40px; height: 40px; border-radius: 10px; font-size: 17px; }
.avatar.lg { width: 84px; height: 84px; border-radius: 18px; font-size: 36px; }
.avatar.xl { width: 120px; height: 120px; border-radius: 24px; font-size: 50px; }
.avatar.add { background: var(--surface2); font-weight: 400; }
.profiles { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; }
.profile { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px; border-radius: 28px; }
.profile .avatar { transition: transform .2s, box-shadow .2s; }
.profile:hover .avatar, .profile:focus-visible .avatar, .profile.focus .avatar { transform: scale(1.06); box-shadow: 0 0 0 3px #fff; }
.profile .pn { font-size: 15px; }
.profrow { display: inline-flex; align-items: center; gap: 10px; }
.avwrap { display: flex; justify-content: center; margin-bottom: 6px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; }
.swatch.on { box-shadow: 0 0 0 3px #fff; }

/* Top 10: thin white outline over a dark see-through fill, sticking out over the top of the poster.
   Static Montserrat Medium, digits only (the variable font draws its overlapping pieces when outlined). */
@font-face { font-family: RankDigits; src: url(fonts/rank-digits.woff2) format('woff2'); font-display: swap; }
.card.ranked { position: relative; container-type: inline-size; margin-top: 24px; }
.card.ranked .rank { position: absolute; top: -0.55em; left: -2px; z-index: 3; font-family: RankDigits, Montserrat, sans-serif; font-size: 40cqw;
  line-height: 1; letter-spacing: .02em; color: rgba(10, 10, 20, .3); -webkit-text-stroke: 1.5px rgba(255, 255, 255, .95); pointer-events: none; }
.card.ranked .art .chip.tl { display: none; } /* the number takes that corner */
/* "Ver todas" at the end of a category row, poster-sized */
.card.allcard .art { display: flex; align-items: center; justify-content: center; background: var(--surface2); border: 1px solid var(--line); }
.card.allcard .allin { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px; }
.card.allcard .allin b { font-size: 16px; font-weight: 700; }
.card.allcard .allin span { font-size: 12px; color: var(--dim); }
/* Parental control */
.settings input.pin { display: block; width: 260px; max-width: 100%; margin: 10px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--text); font: inherit; font-size: 20px; letter-spacing: .3em; }
.settings input.pin:focus { outline: 2px solid var(--text); }
.settings .perr { color: var(--accent); min-height: 1.2em; margin: 4px 0 10px; }
.settings .pdesc { color: var(--dim); margin: 0 0 14px; }

/* iPhone/iPad: aviso para añadir a la pantalla de inicio */
.a2hs{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#1c1a24;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.5);font-size:.95rem;line-height:1.35}
.a2hs-x{margin-left:auto;flex:none;background:none;border:0;color:inherit;font-size:1.7rem;line-height:1;cursor:pointer;padding:0 4px}

/* iPhone/iPad: Safari no dejó empezar con sonido */
.player .taptoplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;font-size:1.15rem;padding:.9em 1.7em}

/* Entrada: pestañas Código / Usuario y clave */
.ltabs{display:flex;gap:6px;margin:0 0 16px;padding:4px;border-radius:12px;background:rgba(255,255,255,.06)}
.ltab{flex:1;padding:.6em .8em;border:0;border-radius:9px;background:none;color:inherit;font:inherit;cursor:pointer;opacity:.7}
.ltab.on{background:rgba(255,255,255,.14);opacity:1;font-weight:600}
.codebox{text-align:center;padding:6px 0 4px}
.logincode{font-size:2.6rem;font-weight:700;letter-spacing:.12em;margin:4px 0 12px;font-variant-numeric:tabular-nums}
.lpane { display: flex; flex-direction: column; gap: 8px; }
.login-card .err:empty { display: none; min-height: 0; }

/* Versión nueva publicada: botón para recargar (encima de todo, también del reproductor) */
.updbar{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translateX(-50%);z-index:120;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 24px);padding:10px 10px 10px 16px;border-radius:14px;background:#1c1a24;color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.55);font-size:.95rem;line-height:1.3}
.updbar-go{flex:none;border:0;border-radius:99px;padding:.55em 1.1em;font:inherit;font-weight:600;color:#fff;background:var(--grad-h);cursor:pointer}
.updbar-x{flex:none;background:none;border:0;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 4px;opacity:.7}