/* Codex Digital — PWA
   Todos los colores y fuentes vienen de Admin → Apariencia (variables CSS). */
:root {
  --bg: #0b0708;
  --surface: #151012;
  --line: #2b1d20;
  --text: #f6eff0;
  --muted: #a2959a;
  --accent: #b11226;
  --accent-2: #d9b27c;
  --live: #e5383b;
  --accent-rgb: 177, 18, 38;
  --accent2-rgb: 217, 178, 124;
  --live-rgb: 229, 56, 59;
  --bg-rgb: 11, 7, 8;
  --accent-ink: #ffffff;
  --radius: 10px;
  --font-display: "Sora", system-ui, sans-serif;
  --font-ui: "Manrope", system-ui, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--bg); color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.is-app { height: 100%; overflow: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; fill: currentColor; }
svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary svg.i, .btn-ghost svg.i { width: 18px; height: 18px; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--radius);
  font-weight: 600; letter-spacing: .02em; text-decoration: none;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff 30%));
  color: var(--accent-ink);
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), .28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(var(--accent-rgb), .38); }
.btn-primary.block { width: 100%; margin-top: 22px; }
.btn-ghost {
  background: rgba(255,255,255,.03); color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-icon svg { width: 20px; height: 20px; }
.reinstall-link { display: inline-block; margin-top: 16px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: .86rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.reinstall-link:hover, .reinstall-link:focus-visible { outline: none; color: var(--text); }

/* ---------- Boot splash ---------- */
.boot {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  background: var(--bg); transition: opacity .4s var(--ease);
}
/* La web pública enseña la portada desde el primer pintado. El splash queda reservado a la APK. */
html.native-launch .boot { display: grid; }
html.native-launch #landing { display: none; }
.boot.out { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), .15); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.boot-logo { width: 44px; height: 44px; object-fit: contain; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Brand ---------- */
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { height: 34px; width: auto; max-width: 140px; object-fit: contain; }
.brand-logo.is-mark, .auth-logo.is-mark {
  width: 34px; height: 34px; border-radius: 9px;
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35), inset 0 0 0 1px rgba(255,255,255,.08);
}
.auth-logo.is-mark { width: 64px; height: 64px; border-radius: 16px; }
.brand {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; letter-spacing: .02em;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =================================================================
   LANDING (web)
   ================================================================= */
.landing { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.landing-bg {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(var(--accent-rgb), .18), transparent 60%),
    radial-gradient(700px 500px at -10% 40%, rgba(var(--accent2-rgb), .14), transparent 60%),
    radial-gradient(600px 400px at 50% 110%, rgba(var(--live-rgb), .10), transparent 60%),
    var(--bg);
  background-size: cover; background-position: center;
}
.landing-bg.has-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .88) 55%, var(--bg) 100%);
}
.land-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(18px + var(--safe-top)) clamp(18px, 5vw, 64px) 18px;
}
.land-nav { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,26px); margin-left:auto; }
.land-nav a { color:var(--muted); font-size:.84rem; text-decoration:none; white-space:nowrap; transition:color .2s ease; }
.land-nav a:hover,.land-nav a:focus-visible { color:var(--accent); }
.platform-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--muted); font-size: .8rem; white-space: nowrap;
}
.platform-pill svg { width: 16px; height: 16px; color: var(--accent); }
.land-main { flex: 1; padding: 0 clamp(18px, 5vw, 64px); }

.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  gap: clamp(24px, 5vw, 72px);
  min-height: calc(100vh - 160px); padding: 24px 0 48px;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
  padding: 8px 14px; border-radius: 999px;
  background: rgba(var(--accent-rgb), .08); border: 1px solid rgba(var(--accent-rgb), .25);
}
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(var(--live-rgb), .6); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), .6); } 70% { box-shadow: 0 0 0 10px rgba(var(--live-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--live-rgb), 0); } }
.hero-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: 1.02; letter-spacing: -.01em;
  margin: 22px 0 18px;
  background: linear-gradient(180deg, var(--text) 30%, color-mix(in srgb, var(--text) 60%, var(--accent) 40%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise .8s var(--ease) both;
}
.hero-sub { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; max-width: 560px; margin: 0 0 24px; animation: rise .8s .1s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.feature-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; animation: rise .8s .2s var(--ease) both; }
.feature-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); font-size: .88rem;
}
.feature-list li svg { color: var(--accent); width: 16px; height: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; animation: rise .8s .3s var(--ease) both; }
.installed-note { margin-top: 16px; color: var(--accent); font-size: .92rem; }
.inapp-warning {
  display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid rgba(var(--live-rgb), .45);
  background: rgba(var(--live-rgb), .08); font-size: .9rem;
}
.inapp-warning .btn-ghost { justify-self: start; padding: 8px 14px; }

/* Hero devices (CSS puro, se tiñen con la paleta) */
.hero-visual { position: relative; height: clamp(300px, 42vw, 480px); }
.device-tv { position: absolute; right: 0; top: 6%; width: 88%; animation: float 7s ease-in-out infinite; }
.device-tv .screen {
  position: relative; aspect-ratio: 16/9; border-radius: calc(var(--radius) + 4px);
  border: 10px solid #05070a; outline: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .55), transparent 55%),
    linear-gradient(315deg, rgba(var(--accent2-rgb), .55), transparent 60%),
    linear-gradient(180deg, #101826, #06080c);
  background-size: cover; background-position: center;
  box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 90px rgba(var(--accent-rgb), .15);
  overflow: hidden;
}
.device-tv .stand { width: 26%; height: 14px; margin: 0 auto; background: linear-gradient(#0b0f15, #05070a); border-radius: 0 0 8px 8px; }
.screen-live {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; letter-spacing: .14em; font-weight: 700;
  padding: 5px 9px; border-radius: 4px; background: var(--live); color: #fff;
}
.device-tv .screen-live { left: auto; right: 14px; }
.screen-live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.screen-guide {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); display: grid; gap: 6px;
}
.g-row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: .7rem; color: rgba(255,255,255,.7); }
.g-row span { height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); }
.g-row.now span { background: linear-gradient(90deg, var(--accent) 45%, rgba(255,255,255,.18) 45%); }
.device-phone {
  position: absolute; left: 2%; bottom: 0; width: 26%;
  animation: float 7s 1.5s ease-in-out infinite;
}
.device-phone .screen {
  position: relative; aspect-ratio: 9/19; border-radius: 22px; border: 7px solid #05070a; outline: 1px solid var(--line);
  background:
    linear-gradient(200deg, rgba(var(--accent2-rgb), .6), transparent 60%),
    linear-gradient(20deg, rgba(var(--accent-rgb), .5), transparent 60%),
    #0a0f16;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.device-phone .screen-live { top: 12px; left: 10px; font-size: .55rem; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* Install section */
.install-section { padding: 24px 0 72px; scroll-margin-top: 24px; }
.install-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 8px; }
.install-head p { color: var(--muted); margin: 0 0 22px; }
.platform-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.platform-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  transition: all .2s var(--ease);
}
.platform-tab svg { width: 18px; height: 18px; }
.platform-tab.active { background: rgba(var(--accent-rgb), .12); border-color: var(--accent); color: var(--text); }
.platform-tab .tag { font-size: .65rem; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; }
.install-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: start; }
.install-card {
  padding: clamp(20px, 3vw, 32px); border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 90%, var(--accent) 10%), var(--surface));
  border: 1px solid var(--line);
  animation: rise .5s var(--ease) both;
}
.install-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: 1.25rem; }
.install-card h3 svg { width: 26px; height: 26px; color: var(--accent); }
.install-card > p { color: var(--muted); margin: 0 0 18px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li {
  counter-increment: s; position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(var(--bg-rgb), .5); border: 1px solid var(--line); line-height: 1.45;
}
.steps li::before {
  content: counter(s); flex: 0 0 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .85rem;
  background: var(--accent); color: var(--accent-ink);
}
.kbd {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 28px; height: 26px; padding: 0 7px; margin: 0 2px; vertical-align: middle;
  border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--accent);
  font-size: .85rem; font-weight: 600;
}
.kbd svg { width: 15px; height: 15px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.qr-card {
  width: 250px; padding: 20px; border-radius: calc(var(--radius) + 6px);
  background: var(--surface); border: 1px solid var(--line); display: grid; gap: 14px;
}
.qr-card p { color: var(--muted); font-size: .85rem; margin: 4px 0 0; }
.qr { background: #fff; padding: 12px; border-radius: var(--radius); line-height: 0; }
.qr svg, .qr img { width: 100%; height: auto; image-rendering: pixelated; }
.land-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 22px clamp(18px, 5vw, 64px) calc(22px + var(--safe-bottom));
  border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem;
}
.land-foot-nav { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(14px,2.5vw,30px); }
.land-foot-nav a { color:var(--muted); text-decoration:none; transition:color .18s ease; }
.land-foot-nav a:hover,.land-foot-nav a:focus-visible { color:var(--accent); }
.land-nav button,.land-foot-nav button {
  appearance:none; border:0; padding:8px 12px; border-radius:999px; background:transparent;
  color:var(--muted); font:600 .86rem var(--font-ui); white-space:nowrap; cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.land-nav button:hover,.land-nav button:focus-visible,.land-foot-nav button:hover,.land-foot-nav button:focus-visible {
  color:var(--text); background:rgba(var(--accent-rgb),.1); outline:none;
}
.land-top {
  position:fixed; inset:0 0 auto; z-index:80; min-height:78px;
  padding:calc(12px + var(--safe-top)) clamp(16px,5vw,64px) 12px;
  border-bottom:1px solid rgba(var(--accent-rgb),.16);
  background:rgba(var(--bg-rgb),.78); backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%); box-shadow:0 12px 36px rgba(0,0,0,.16);
}
.land-top .land-nav { order:initial; flex:0 0 auto; width:auto; margin-left:auto; overflow:visible; padding:0; }
.land-top .platform-pill { margin-left:0; }
.land-main { width:min(1420px,100%); margin-inline:auto; padding-top:96px; }
.hero { min-height:calc(100svh - 170px); }
.plans-section { scroll-margin-top:96px; }
.install-section { scroll-margin-top:96px; }
.public-plans { grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),370px)); justify-content:center; }
.public-plan-card { min-height:380px; transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.public-plan-card:hover { transform:translateY(-5px); border-color:rgba(var(--accent-rgb),.5); box-shadow:0 28px 70px rgba(0,0,0,.32),0 0 34px rgba(var(--accent-rgb),.09); }
.install-grid { grid-template-columns:minmax(0,900px); justify-content:center; }
.install-card { width:100%; }
.land-foot { align-items:center; min-height:76px; background:rgba(var(--bg-rgb),.56); }
.land-foot-nav { gap:8px; }
.support-link { margin-left:auto; }
@media (max-width:850px) {
  .land-top { flex-wrap:nowrap; }
  .land-top .land-nav { order:initial; flex:0 0 auto; width:auto; justify-content:center; overflow:visible; }
  .land-top .platform-pill { margin-left:0; }
  .land-main { padding-top:84px; }
}
@media (max-width:600px) {
  .land-top { min-height:66px; gap:8px; padding:calc(10px + var(--safe-top)) 12px 10px; }
  .brand-lockup { gap:7px; }
  .brand-logo { max-width:34px; height:34px; }
  .brand { font-size:1rem; }
  .land-top .land-nav { gap:3px; }
  .land-nav button { padding:8px 7px; font-size:.7rem; }
  .platform-pill { display:none; }
  .land-main { padding:76px 16px 0; }
  .hero { min-height:auto; padding:32px 0 44px; }
  .hero-visual { height:clamp(220px,65vw,330px); }
  .plans-section { padding:54px 0 40px; }
  .public-plans { grid-template-columns:minmax(0,420px); }
  .public-plan-card { min-height:340px; }
  .install-section { padding:36px 0 52px; }
  .land-foot { justify-content:center; text-align:center; padding:20px 16px calc(20px + var(--safe-bottom)); }
  .land-foot-nav { justify-content:center; width:100%; }
  .support-link { margin-left:0; }
}
.plans-section { padding:72px 0 56px; scroll-margin-top:24px; }
.plans-section .install-head { margin-bottom:26px; }
.plans-section .install-head .eyebrow { margin-bottom:14px; }
.plans-section .install-head h2 { margin-top:0; }
.public-plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px; }
.public-plan-card { overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:350px; border:1px solid var(--line); border-radius:calc(var(--radius) + 10px); background:linear-gradient(155deg,color-mix(in srgb,var(--surface) 85%,var(--accent) 15%),var(--surface) 62%); box-shadow:0 18px 46px rgba(0,0,0,.22); }
.public-plan-image,.public-plan-mark { width:100%; height:150px; object-fit:cover; display:grid; place-items:center; background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.28),transparent 65%),rgba(var(--bg-rgb),.45); }
.public-plan-mark { color:var(--accent); font-family:var(--font-display); font-weight:800; font-size:2.8rem; letter-spacing:.12em; }
.public-plan-copy { display:flex; flex:1; flex-direction:column; padding:20px; }
.plan-period { color:var(--accent); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.public-plan-copy h3 { margin:8px 0; font:600 1.35rem var(--font-display); }
.public-plan-copy p { min-height:2.8em; margin:0 0 14px; color:var(--muted); line-height:1.5; }
.public-plan-price { margin:0 0 18px; font:700 1.8rem var(--font-display); }
.public-plan-price small { font:400 .76rem var(--font-ui); color:var(--muted); }
.plan-request { width:100%; margin-top:auto; }
.plan-loading,.plan-empty { grid-column:1/-1; padding:24px; border:1px solid var(--line); border-radius:var(--radius); color:var(--muted); text-align:center; background:rgba(var(--bg-rgb),.35); }
.reseller-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.reseller-head h4 { margin:0; }
@media (max-width:850px) {
  .land-top { flex-wrap:wrap; }
  .land-nav { order:3; flex:1 0 100%; justify-content:flex-start; overflow-x:auto; padding:4px 0; }
  .platform-pill { margin-left:auto; }
}
@media (max-width:520px) {
  .land-nav { gap:16px; }
  .land-nav a { font-size:.76rem; }
  .reseller-head { align-items:flex-start; flex-direction:column; }
  .public-plan-card { min-height:320px; }
}
.support-link { color: var(--accent); text-decoration: none; }

/* Guía de instalación Android */
.install-sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: flex; align-items: flex-end; justify-content: center; animation: fade .25s both; }
.install-sheet-card {
  position: relative; width: min(460px, 100%); margin: 0 12px calc(92px + var(--safe-bottom));
  padding: 26px 22px 22px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--line); text-align: center;
  animation: sheetUp .4s var(--ease) both;
}
.install-sheet.top .install-sheet-card { margin-bottom: auto; margin-top: calc(80px + var(--safe-top)); }
.install-sheet-card h3 { margin: 10px 0 16px; font-size: 1.15rem; }
.install-sheet-card .steps { text-align: left; }
.sheet-icon { width: 64px; height: 64px; border-radius: 16px; }
.sheet-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.install-arrow {
  position: fixed; left: 50%; bottom: calc(18px + var(--safe-bottom)); width: 36px; height: 60px; margin-left: -18px;
  background: var(--accent);
  clip-path: polygon(50% 100%, 0 60%, 32% 60%, 32% 0, 68% 0, 68% 60%, 100% 60%);
  animation: bounce 1.2s infinite;
}
.install-sheet.top .install-arrow { top: calc(8px + var(--safe-top)); bottom: auto; left: auto; right: 22px; transform: rotate(180deg); }
.guard-screen { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; text-align: center; padding: 24px; background: rgba(8, 5, 6, .96); backdrop-filter: blur(10px); animation: fade .25s both; }
.guard-screen img { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 14px; }
.guard-screen h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.3rem; }
.guard-screen p { margin: 0; color: var(--muted); }
.install-sheet.apk { align-items: center; }
.install-sheet.apk .install-arrow { display: none; }
.install-sheet.apk .sheet-icon { animation: apkPulse 1.4s ease-in-out infinite; }
@keyframes apkPulse { 50% { transform: translateY(4px); filter: drop-shadow(0 8px 18px rgba(var(--accent-rgb), .55)); } }
.sheet-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); }

* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
@keyframes bounce { 50% { translate: 0 10px; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* =================================================================
   APP: login
   ================================================================= */
.gate-screen {
  position: fixed; inset: 0; z-index: 40; overflow: auto; overscroll-behavior: contain;
  display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--safe-top)) 24px calc(16px + var(--safe-bottom));
  background: #060405; isolation: isolate;
}
.gate-screen[hidden] { display: none; }
.gate-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 120%, rgba(var(--accent-rgb), .22), transparent 60%), #060405; }
.gate-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent);
  animation: gridPan 24s linear infinite;
}
.gate-bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(70px); opacity: .5; }
.gate-bg i:nth-child(1) { background: rgba(var(--accent-rgb), .55); left: -12vmax; top: -18vmax; animation: orbA 16s ease-in-out infinite alternate; }
.gate-bg i:nth-child(2) { background: rgba(var(--accent-rgb), .28); right: -16vmax; bottom: -22vmax; animation: orbB 19s ease-in-out infinite alternate; }
.gate-bg i:nth-child(3) { width: 22vmax; height: 22vmax; background: rgba(255,255,255,.07); left: 55%; top: 10%; animation: orbA 22s ease-in-out infinite alternate-reverse; }
@keyframes orbA { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes orbB { to { transform: translate(-12vmax, -8vmax) scale(.9); } }
@keyframes gridPan { to { background-position: 48px 48px, 48px 48px; } }

.gate-card {
  position: relative; width: min(400px, 100%); margin: auto; padding: 34px 32px 30px;
  display: flex; flex-direction: column; gap: 14px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) both;
}
.gate-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--sweep, 0deg), transparent 0 70%, rgba(var(--accent-rgb), .9) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sweep 6s linear infinite;
}
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sweep { to { --sweep: 360deg; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.gate-card > * { animation: itemIn .6s cubic-bezier(.16, 1, .3, 1) both; }
.gate-card > :nth-child(1) { animation-delay: .15s; }
.gate-card > :nth-child(2) { animation-delay: .23s; }
.gate-card > :nth-child(3) { animation-delay: .31s; }
.gate-card > :nth-child(4) { animation-delay: .39s; }
.gate-card > :nth-child(5) { animation-delay: .47s; }
@keyframes itemIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.gate-title { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; letter-spacing: .01em; color: #fff; text-align: center; }

.field { position: relative; display: block; }
.field svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: rgba(255,255,255,.45); transition: color .25s; pointer-events: none; }
.field input {
  width: 100%; height: 56px; padding: 20px 16px 6px 48px; border-radius: 14px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 1rem;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field span { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); font-size: .98rem; pointer-events: none; transition: top .22s var(--ease), font-size .22s var(--ease), color .22s; }
.field input:focus { outline: none; border-color: rgba(var(--accent-rgb), .9); background: rgba(0,0,0,.5); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); }
.field input:focus ~ svg, .field:focus-within svg { color: var(--accent); }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field input:-webkit-autofill + span { top: 17px; font-size: .7rem; letter-spacing: .04em; color: rgba(255,255,255,.65); }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 40px #140d0f inset; caret-color: #fff; }

.gate-btn {
  position: relative; height: 54px; margin-top: 4px; border: 0; border-radius: 14px; cursor: pointer; overflow: hidden;
  display: grid; place-items: center; font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), .4), inset 0 1px 0 rgba(255,255,255,.2);
  transition: transform .2s var(--ease), box-shadow .25s, filter .2s;
}
.gate-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: shine 3.2s ease-in-out infinite 1.2s; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.gate-btn:hover, .gate-btn:focus-visible { outline: none; transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--accent-rgb), .55), 0 0 0 3px rgba(255,255,255,.14); }
.gate-btn:active { transform: scale(.98); }
.gate-btn > * { grid-area: 1 / 1; }
.btn-spin { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.gate-btn.loading { pointer-events: none; filter: saturate(.85); }
.gate-btn.loading span { opacity: 0; transform: translateY(-6px); }
.gate-btn span { transition: opacity .2s, transform .2s; }
.gate-btn.loading .btn-spin { opacity: 1; transform: none; animation: spin .8s linear infinite; }
.gate-btn.ok { background: linear-gradient(135deg, #1fa971, #13804f); box-shadow: 0 14px 34px rgba(31,169,113,.4); }

.gate-card > .auth-alert, .gate-card > .perm-help { animation-delay: 0s; }

/* ---------- Login: fondo matizado y difuminado en el color del tema ---------- */
.auth-screen .gate-bg::after { display: none; }
.auth-screen .gate-bg { background: radial-gradient(120% 90% at 50% 120%, rgba(var(--accent-rgb), .22), transparent 60%), linear-gradient(160deg, #0d090b 0%, var(--bg, #060405) 55%, #0a0708 100%); }
.auth-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.auth-scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%); }
.ab { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; animation: abDrift 28s ease-in-out infinite alternate; }
.ab1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax; background: rgba(var(--accent-rgb), .55); }
.ab2 { width: 38vmax; height: 38vmax; right: -12vmax; bottom: -14vmax; background: rgba(var(--accent-rgb), .42); animation-duration: 34s; animation-delay: -9s; }
.ab3 { width: 26vmax; height: 26vmax; left: 52%; top: 38%; background: rgba(255,255,255,.07); animation-duration: 40s; animation-delay: -18s; }
@keyframes abDrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ab { animation: none; } }
/* ---------- Tarjeta de cristal ---------- */
.auth-card {
  width: min(420px, 100%); padding: 40px 36px 30px; gap: 0; border-radius: 28px; overflow: hidden;
  background: linear-gradient(150deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 45%, rgba(255,255,255,.07));
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(var(--accent-rgb), .18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.06);
}
.auth-card::before { display: none; }
.auth-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, transparent 42%); }
.auth-card > * { animation: none; }
.auth-pane { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.auth-pane[hidden] { display: none; }
.auth-pane > * { animation: itemIn .55s cubic-bezier(.16, 1, .3, 1) both; }
.auth-pane > :nth-child(2) { animation-delay: .06s; } .auth-pane > :nth-child(3) { animation-delay: .12s; }
.auth-pane > :nth-child(4) { animation-delay: .18s; } .auth-pane > :nth-child(5) { animation-delay: .24s; }
.auth-pane > :nth-child(6) { animation-delay: .3s; } .auth-pane > :nth-child(7) { animation-delay: .36s; }
.auth-pane > .auth-alert { animation-delay: 0s; }
.auth-head { display: grid; gap: 6px; text-align: center; margin-bottom: 10px; }
.auth-title { margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 18px rgba(var(--accent-rgb), .45); }
.auth-sub { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.auth-text { margin: -4px 0 2px; text-align: center; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.72); }
.auth-text b { color: #fff; }

/* Campos tipo píldora con borde claro */
.auth-card .field input {
  height: 54px; padding: 18px 20px 4px 52px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.45); color: #fff;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.25);
}
.auth-card .field svg { left: 20px; color: rgba(255,255,255,.75); }
.auth-card .field span { left: 52px; color: rgba(255,255,255,.72); }
.auth-card .field input:focus + span, .auth-card .field input:not(:placeholder-shown) + span, .auth-card .field input:-webkit-autofill + span { top: 15px; color: rgba(255,255,255,.8); }
.auth-card .field input:hover { border-color: rgba(255,255,255,.7); }
.auth-card .field input:focus { background: rgba(0,0,0,.36); border-color: #fff; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .35), 0 0 22px rgba(var(--accent-rgb), .45); }
.auth-card .field:focus-within svg { color: #fff; }
.auth-card .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #1a1214 inset; }
.field.has-eye input, .field.has-state input { padding-right: 54px; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: rgba(255,255,255,.7); transition: color .2s, background .2s;
}
.pw-eye:hover, .pw-eye:focus-visible { outline: none; color: #fff; background: rgba(255,255,255,.12); }
.field .pw-eye svg { position: static; left: auto; transform: none; width: 20px; height: 20px; color: inherit; }
.pw-eye .eye-off, .pw-eye[aria-pressed="true"] .eye-on { display: none; }
.pw-eye[aria-pressed="true"] .eye-off { display: block; }

/* Estado del correo al recuperar: verificando / registrado / no registrado */
.field-state { position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); display: grid; place-items: center; pointer-events: none; }
.field-state > * { grid-area: 1 / 1; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.field .field-state svg { position: static; left: auto; transform: none; width: 20px; height: 20px; stroke-width: 2.4; }
.fs-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; animation: spin .8s linear infinite; }
.field.checking .fs-spin, .field.valid .fs-ok, .field.invalid .fs-bad { opacity: 1; transform: none; }
.auth-card .field.valid input { border-color: #3ddc97; box-shadow: 0 0 0 4px rgba(61,220,151,.18); }
.auth-card .field.valid .fs-ok { color: #3ddc97; }
.auth-card .field.invalid input { border-color: #ff6b7a; box-shadow: 0 0 0 4px rgba(255,107,122,.18); }
.auth-card .field.invalid .fs-bad { color: #ff6b7a; }

/* Botón principal tipo píldora con flecha */
.auth-btn { height: 54px; margin-top: 6px; border-radius: 999px; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 12px 34px rgba(var(--accent-rgb), .55), 0 0 0 1px rgba(255,255,255,.18) inset, inset 0 1px 0 rgba(255,255,255,.35); }
.auth-btn span { display: inline-flex; align-items: center; gap: 12px; }
.auth-btn span svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.auth-btn:hover span svg, .auth-btn:focus-visible span svg { transform: translateX(4px); }
.auth-btn:disabled { cursor: not-allowed; filter: grayscale(.55) brightness(.7); box-shadow: none; transform: none; }
.auth-btn:disabled::after { display: none; }
.auth-link { align-self: center; padding: 6px 10px; border: 0; background: none; cursor: pointer; font: inherit; font-size: .88rem; color: rgba(255,255,255,.78); text-decoration: none; border-radius: 8px; transition: color .2s, background .2s; }
.auth-link:hover, .auth-link:focus-visible { outline: none; color: #fff; background: rgba(255,255,255,.08); }
.auth-link.strong { padding: 2px 4px; font-weight: 700; color: #fff; }
.auth-foot { margin: -4px 0 0; text-align: center; font-size: .88rem; color: rgba(255,255,255,.72); }
.auth-done { align-self: center; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 2px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), rgba(var(--accent-rgb), .35)); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 40px rgba(var(--accent-rgb), .5); animation: donePop .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.auth-done svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-done.ok { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), rgba(31,169,113,.55)); box-shadow: 0 0 40px rgba(31,169,113,.45); }
.auth-done.bad { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(179,38,30,.55)); box-shadow: 0 0 40px rgba(179,38,30,.45); }
.auth-timer { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px 12px; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: .88rem; color: rgba(255,255,255,.82); }
.auth-timer svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.auth-timer b { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.auth-timer i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent, #b11226); transform-origin: left; transform: scaleX(var(--p, 1)); transition: transform 1s linear, background .3s; }
.auth-timer.low { border-color: rgba(230,160,40,.45); color: #ffd99a; }
.auth-timer.low i { background: #e6a028; }
.auth-timer.low b { animation: timerPulse 1s ease-in-out infinite; }
.auth-timer.expired { border-color: rgba(179,38,30,.5); background: rgba(179,38,30,.14); color: #ffb3ad; }
.auth-timer.expired i { transform: scaleX(0); }
@keyframes timerPulse { 50% { opacity: .55; } }@keyframes donePop { from { opacity: 0; transform: scale(.4); } }

/* Aviso del login: se cierra solo a los 5 s y colapsa sin dejar hueco */
.auth-alert {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; overflow: hidden;
  padding: 11px 14px; border-radius: 12px; font-size: .87rem; line-height: 1.45;
  color: #ffc2c8; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .32);
  max-height: 140px; animation: alertIn .35s var(--ease) both;
  transition: max-height .32s var(--ease), padding .32s var(--ease), margin .32s var(--ease), opacity .22s, border-width .32s;
}
.auth-alert svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-alert.a-ok { color: #a9f0cc; background: rgba(31,169,113,.12); border-color: rgba(31,169,113,.35); }
.auth-alert.a-warn { color: #ffd9a0; background: rgba(230,160,40,.1); border-color: rgba(230,160,40,.32); }
.auth-alert.a-info { color: #d7dbe6; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.auth-alert.out { max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -14px; opacity: 0; border-width: 0; }
.auth-card .auth-alert { border-radius: 16px; backdrop-filter: none; }
/* Pantallas bajas (celular en horizontal, TV 720p con zoom): tarjeta compacta sin desplazamiento */
@media (max-height: 560px) {
  .auth-card { padding: 20px 28px 16px; border-radius: 22px; }
  .auth-pane { gap: 9px; }
  .auth-head { margin-bottom: 2px; gap: 2px; }
  .auth-title { font-size: 1.35rem; }
  .auth-sub { font-size: .66rem; }
  .auth-text { font-size: .8rem; line-height: 1.4; margin: -2px 0 0; }
  .auth-card .field input { height: 44px; padding-top: 14px; }
  .auth-card .field input:focus + span, .auth-card .field input:not(:placeholder-shown) + span { top: 11px; font-size: .64rem; }
  .auth-btn { height: 44px; margin-top: 2px; }
  .auth-link { padding: 2px 8px; font-size: .8rem; }
  .auth-foot { font-size: .8rem; margin-top: -6px; }
  .auth-done { width: 52px; height: 52px; }
  .auth-done svg { width: 24px; height: 24px; }
  .auth-alert.out { margin-top: -9px; }
}
@keyframes alertIn { from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } to { opacity: 1; } }
.gate-card.shake { animation: cardIn .8s cubic-bezier(.16, 1, .3, 1) both, shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { translate: -9px 0; } 40%, 80% { translate: 9px 0; } }
.gate-screen.leave .gate-card { animation: cardOut .5s cubic-bezier(.7, 0, .84, 0) forwards; }
.gate-screen.leave { animation: fadeOut .55s .15s ease forwards; }
@keyframes cardOut { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

.perm-list { display: grid; gap: 10px; }
.perm-item { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); transition: border-color .3s, background .3s; }
.perm-item b { font-weight: 600; font-size: .98rem; color: #fff; }
.perm-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.perm-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.perm-st { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: all .3s; }
.perm-item.ok { border-color: rgba(31,169,113,.45); background: rgba(31,169,113,.08); }
.perm-item.ok .perm-ic { background: rgba(31,169,113,.16); color: #3fd197; }
.perm-item.ok .perm-st { border-color: #1fa971; background: #1fa971; }
.perm-item.ok .perm-st::after { content: ""; width: 10px; height: 6px; border: 2.2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); animation: itemIn .3s both; }
.perm-item.bad { border-color: rgba(var(--accent-rgb), .55); }
.perm-item.bad .perm-st { border-color: var(--accent); }
.perm-item.bad .perm-st::after { content: "!"; font-size: .8rem; font-weight: 800; color: var(--accent); }
.perm-help { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.75); text-align: center; }
.perm-help b { color: #fff; }

/* Pantallas bajas (celular en horizontal, teclado abierto) */
@media (max-height: 460px) {
  .gate-card { padding: 20px 24px 18px; gap: 10px; width: min(380px, 100%); }
  .gate-title { font-size: 1.3rem; margin-bottom: 2px; }
  .field input { height: 48px; padding-top: 16px; }
  .field input:focus + span, .field input:not(:placeholder-shown) + span, .field input:-webkit-autofill + span { top: 13px; }
  .gate-btn { height: 46px; }
  .perm-item { padding: 8px 12px; }
  .perm-ic { width: 36px; height: 36px; }
}

/* =================================================================
   APP: TV (horizontal)
   ================================================================= */
.tv-app {
  --rail-w: 68px;
  --ch-w: 250px;
  --row-h: 62px;
  --px-min: 4.667px;
  position: relative;
  height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
  overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(900px 500px at 70% -10%, rgba(var(--accent-rgb), .10), transparent 60%), var(--bg);
  animation: fade .5s both;
}

/* Riel de iconos */
.tv-rail {
  position: relative; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 18px;
  min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  padding: calc(14px + var(--safe-top)) 0 calc(14px + var(--safe-bottom));
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); border-right: 1px solid rgba(255,255,255,.05);
}
.tv-rail::-webkit-scrollbar { display: none; }
.tv-rail > * { flex: 0 0 auto; }
.rail-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; }
.rail-logo.is-mark { background: rgba(var(--accent-rgb), .15); padding: 6px; }
.rail-btns { display: flex; flex-direction: column; gap: 6px; }
.rail-end { margin-top: auto; }
.rail-btn {
  position: relative; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; border-radius: 12px; color: var(--muted); transition: background .2s, color .2s;
}
.rail-btn svg { width: 22px; height: 22px; }
.rail-btn span { display: none; }
.rail-btn:hover, .rail-btn:focus-visible { color: var(--text); background: rgba(255,255,255,.07); outline: none; }
.rail-btn.active { color: var(--text); }
.rail-btn.active::before { content: ""; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }
.rail-btn.on { color: var(--accent); }

/* Cajón de categorías */
.tv-drawer {
  position: absolute; z-index: 25; top: 0; bottom: 0; left: calc(var(--rail-w) + var(--pad-l, 0px)); width: 320px;
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(18px + var(--safe-top)) 12px calc(18px + var(--safe-bottom));
  background: linear-gradient(90deg, rgba(var(--bg-rgb), .98), rgba(var(--bg-rgb), .94));
  border-right: 1px solid var(--line); box-shadow: 30px 0 60px rgba(0,0,0,.5);
  transform: translateX(calc(-100% - var(--rail-w) - var(--pad-l, 0px))); transition: transform .3s var(--ease); visibility: hidden;
}
.tv-app.drawer-open .tv-drawer { transform: none; visibility: visible; }
.drawer-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.45); animation: fade .25s both; }
.drawer-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); }
.drawer-search svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.drawer-search input { flex: 1; min-width: 0; padding: 12px 0; background: none; border: 0; color: var(--text); font: inherit; outline: none; }
.drawer-list, .drawer-settings { display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; }
.drawer-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  text-align: left; cursor: pointer; font-size: .92rem; letter-spacing: .02em; transition: background .15s, color .15s;
}
.drawer-item em { font-style: normal; font-size: .75rem; color: var(--muted); }
.drawer-item b { font-weight: 500; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.drawer-item.upper span { text-transform: uppercase; letter-spacing: .08em; font-size: .84rem; }
.drawer-item:hover, .drawer-item:focus-visible { background: rgba(255,255,255,.07); color: var(--text); outline: none; }
.drawer-item.active { color: var(--text); background: rgba(var(--accent-rgb), .16); }
.drawer-item.active b { color: var(--accent); }
.drawer-sep { height: 1px; margin: 6px 8px; background: var(--line); }

/* Tarjeta de cuenta (Ajustes) */
.acct-card {
  flex: 0 0 auto; display: grid; gap: 12px; margin: 0 0 10px; padding: 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), .2), rgba(255,255,255,.03) 55%);
  border: 1px solid rgba(var(--accent-rgb), .28); color: var(--text);
}
.acct-card[hidden] { display: none; }
.ac-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ac-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.ac-who { min-width: 0; flex: 1; display: grid; }
.ac-who b { font-weight: 600; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-who small { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-badge { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ac-badge.ok { background: rgba(31,157,107,.18); color: #5fd6a4; }
.ac-badge.trial { background: rgba(var(--accent-rgb), .22); color: #ffb3bc; }
.ac-badge.warn { background: rgba(199,124,14,.2); color: #ffc46b; }
.ac-badge.bad { background: rgba(229,56,59,.2); color: #ff8a8c; }
.ac-plan { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.ac-plan small { width: 100%; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ac-plan strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.15; }
.ac-plan em { font-style: normal; font-size: .8rem; color: var(--muted); }
.ac-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.ac-bar i { display: block; height: 100%; border-radius: 5px; background: var(--accent); }
.ac-bar.ok i { background: #1f9d6b; }
.ac-bar.warn i { background: #c77c0e; }
.ac-left { margin-top: -6px; font-size: .78rem; color: var(--text); font-weight: 600; }
.ac-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.ac-dates div { display: grid; gap: 2px; min-width: 0; }
.ac-dates small { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ac-dates b { font-size: .8rem; font-weight: 600; }
.drawer-item.ac-cta { margin-top: 2px; padding: 10px 12px; background: rgba(var(--accent-rgb), .18); color: var(--text); text-decoration: none; flex-wrap: wrap; gap: 2px 10px; }
.drawer-item.ac-cta em { color: rgba(255,255,255,.7); }
.drawer-item.ac-cta:hover, .drawer-item.ac-cta:focus-visible { background: var(--accent); color: var(--accent-ink); }

/* Zona principal */
.tv-main {
  display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: 12px;
  padding: calc(12px + var(--safe-top)) 16px calc(10px + var(--safe-bottom)) 14px;
}
.tv-main > .ticker { margin-bottom: 0; flex: 0 0 auto; }
/* Reproductor siempre 16:9 exacto: el alto sale de la pantalla real y el ancho del alto */
/* Márgenes para la zona segura de televisores y dispositivos Android. */
.tv-app {
  --pad-l: var(--safe-left); --pad-r: var(--safe-right); --pad-y: 0px;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-l);
  --vw: calc(100vw - var(--pad-l) - var(--pad-r)); --vh: calc(100vh - var(--pad-y) * 2);
}
/* Los navegadores de TV antiguos no conocen dvh: una variable inválida rompería todo el cálculo */
@supports (height: 100dvh) { .tv-app { --vh: calc(100dvh - var(--pad-y) * 2); } }
html.dev-tv .tv-app { --pad-l: 2.6vw; --pad-r: 2.6vw; --pad-y: 3vh; }
.tv-app {
  --top-w: .5; --top-h: .42; --main-pad: 40px;
  --ph: max(118px, min(calc(var(--vh) * var(--top-h)), calc((var(--vw) - var(--rail-w) - var(--main-pad)) * var(--top-w) * .5625)));
}
/* El ancho se calcula del alto: el tamaño nativo del video nunca agranda el reproductor */
.tv-top {
  flex: 0 0 auto; display: grid; grid-template-columns: calc(var(--ph) * 16 / 9) minmax(0, 1fr); gap: 22px;
  height: var(--ph); align-items: stretch;
}
.tv-top .player-shell { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; }
.tv-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 2px; }
.info-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: .78rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.info-cat { color: var(--accent-2); font-weight: 600; }
.info-clock { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: .02em; }
.info-ch { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; min-height: 30px; }
.info-logo { width: 42px; height: 28px; object-fit: contain; }
.fav-btn { margin-left: auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: all .2s; }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn:hover, .fav-btn:focus-visible { border-color: var(--accent-2); color: var(--text); outline: none; }
.fav-btn.on { color: #f5c542; border-color: rgba(245,197,66,.6); }
.fav-btn.on svg { fill: currentColor; }
.info-title { margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.3vw, 2rem); line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-time, .osd-meta { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-bar, .osd-bar { position: relative; flex: 0 1 120px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.info-bar i, .osd-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: 4px; transition: width .6s linear; }
.info-desc { margin: 4px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.info-next { margin: 0; font-size: .8rem; color: var(--muted); }
.info-next b { color: var(--text); font-weight: 600; }
.tv-info .banner-slot { margin-top: auto; height: 72px; flex: 0 0 auto; }
.tv-info .ad-banner img { width: 96px; height: 54px; }
.tv-info .ad-banner .noimg { height: 54px; }

/* Ticker */
.ticker {
  display: flex; align-items: stretch; margin-bottom: 10px; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
  --tone: var(--accent); --tone-rgb: var(--accent-rgb);
}
.ticker-label { flex: 0 0 auto; padding: 7px 12px; font-size: .68rem; letter-spacing: .14em; font-weight: 700; background: var(--tone); color: var(--accent-ink); display: grid; place-items: center; }
.ticker-track { position: relative; flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-move { display: inline-flex; gap: 48px; padding: 7px 0; white-space: nowrap; font-size: .88rem; animation: marquee var(--ticker-dur, 30s) linear infinite; padding-left: 100%; }
.ticker-move b { color: var(--tone); font-weight: 600; margin-right: 6px; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Reproductor (mini y pantalla completa) */
.player-shell {
  position: relative; background: var(--surface); border-radius: calc(var(--radius) + 2px); overflow: hidden; min-height: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45); cursor: pointer; touch-action: manipulation;
}
.player-shell.focus { box-shadow: 0 0 0 2px var(--accent), 0 18px 40px rgba(0,0,0,.45); }
#player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bg); display: block; }
.player-empty {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px;
  color: var(--muted); text-align: center; padding: 16px;
  background:
    radial-gradient(520px 320px at 50% 38%, rgba(var(--accent-rgb), .18), transparent 68%),
    linear-gradient(145deg, var(--bg), var(--surface));
}
.player-empty p { margin: 0; max-width: 280px; }
.player-empty .ch-logo {
  width: 56px; height: 56px; object-fit: contain; border-radius: 12px;
  background: rgba(255,255,255,.06); padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#player[poster] { object-fit: contain; background: var(--bg); }
/* Evita que un poster/logo se vea gigante: el video siempre contain sobre fondo de tema */
#player { background-size: 0 0 !important; }

/* APK: PlayerView TextureView encima del WebView; ocultar capa HTML del player */
html.codex-native .player-shell.native-video {
  background: #000 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.35);
}
html.codex-native .player-shell.native-video #player,
html.codex-native .player-shell.native-video .player-empty,
html.codex-native .player-shell.native-video .player-status,
html.codex-native .player-shell.native-video .resume {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.codex-native .tv-app.full .player-shell.native-video {
  background: #000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* APK fullscreen: OSD HTML oculto — se usa OSD nativo transparente sobre el video */
html.codex-native .tv-app.full .osd {
  display: none !important;
}
.player-status {
  position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 12px;
  text-align: center; padding: 16px; background: rgba(0,0,0,.55); font-size: .9rem; color: #fff;
}
.player-status .spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.player-status .retry { padding: 9px 18px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer; }
.player-status small { color: rgba(255,255,255,.7); max-width: 340px; }
.player-status.solid { background: var(--bg); }
.player-status.quiet { inset: auto 14px 14px auto; padding: 0; background: none; pointer-events: none; }
.player-status.quiet .spin { width: 26px; height: 26px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.zap {
  position: absolute; top: 18px; right: 22px; z-index: 6; padding: 6px 16px; border-radius: 10px;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.12); font-variant-numeric: tabular-nums;
}

/* OSD de pantalla completa */
.osd { position: absolute; inset: 0; z-index: 20; display: none; flex-direction: column; justify-content: space-between; pointer-events: none; isolation: isolate; }
.tv-app.full .osd { display: flex; opacity: 0; transition: opacity .35s var(--ease); }
.tv-app.full .osd.show { opacity: 1; }
.tv-app.full .osd.show .osd-btn { pointer-events: auto; }
.osd-top {
  position: relative; z-index: 21; display: flex; justify-content: space-between; align-items: center; padding: calc(22px + var(--safe-top)) 36px 50px;
  background: linear-gradient(rgba(0,0,0,.7), transparent); font-size: 1rem; color: rgba(255,255,255,.85);
}
.osd-cat { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.osd-clock { font-variant-numeric: tabular-nums; }
.osd-bottom { padding: 70px 36px calc(26px + var(--safe-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.88) 45%); display: grid; gap: 18px; }
.osd-main { display: flex; gap: 22px; align-items: center; min-width: 0; }
.osd-logo { width: 96px; height: 72px; object-fit: contain; flex: 0 0 auto; background: rgba(255,255,255,.06); border-radius: 12px; padding: 8px; }
.osd-logo[src=""] { visibility: hidden; }
.osd-text { min-width: 0; display: grid; gap: 7px; }
.osd-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.8vw, 2.2rem); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osd-meta { color: rgba(255,255,255,.8); font-size: .95rem; }
.osd-bar { flex-basis: 220px; }
.osd-ch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,.9); }
.osd-ch b { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.osd-badges { display: inline-flex; gap: 6px; }
.osd-badges i { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.9); }
.osd-next { font-size: .85rem; color: rgba(255,255,255,.65); }
.osd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.osd-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: .9rem; backdrop-filter: blur(6px);
}
.osd-btn svg { width: 18px; height: 18px; }
.osd-btn:hover, .osd-btn:focus-visible { background: #fff; color: #000; outline: none; }
.osd-btn em { font-style: normal; font-weight: 700; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.14); }
.osd-btn:hover em, .osd-btn:focus-visible em { background: rgba(0,0,0,.1); }
.osd-btn[hidden] { display: none; }

/* Opciones en una sola fila, compactas; el panel inferior entra deslizando */
.osd-actions { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.osd-actions::-webkit-scrollbar { display: none; }
.osd-btn { flex: 0 0 auto; gap: 6px; padding: 7px 13px; font-size: .8rem; white-space: nowrap; }
.osd-btn svg { width: 15px; height: 15px; }
.osd-btn em { font-size: .7rem; padding: 1px 7px; }
.osd-btn.osd-icon { padding: 7px 10px; }
.osd-btn svg.fill { fill: currentColor; stroke: none; }
.osd-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .25); }
.osd-cat[data-shift]:not([data-shift=""])::after { content: attr(data-shift); margin-left: 10px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: .7rem; letter-spacing: .1em; }
.osd-cat[data-shift="EN VIVO"]::after { background: rgba(255,255,255,.14); color: #fff; }
.tv-app.full .osd-bottom { transform: translateY(100%); transition: transform .42s var(--ease); }
.tv-app.full .osd-top { transform: translateY(-100%); transition: transform .42s var(--ease); }
.tv-app.full .osd.show .osd-bottom, .tv-app.full .osd.show .osd-top { transform: none; }

/* Continuar viendo / Ver canal */
.resume {
  display: inline-flex; align-items: center; gap: 14px; max-width: min(92%, 440px); padding: 12px 20px 12px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(12,9,10,.72); backdrop-filter: blur(10px); color: #fff; cursor: pointer; text-align: left;
  box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: itemIn .45s var(--ease) both;
}
.resume[hidden] { display: none; }
.resume:hover, .resume:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35), 0 16px 40px rgba(0,0,0,.5); }
.resume-play { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .22); }
.resume-play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.resume-text { display: grid; gap: 2px; min-width: 0; }
.resume-text small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.resume-text b { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resume-text em { font-style: normal; font-size: .8rem; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La barra lateral nunca corta botones en pantallas bajas: se desliza sin barra visible */
.tv-rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.tv-rail::-webkit-scrollbar { display: none; }
@media (orientation: landscape) and (max-height: 430px) {
  .rail-btns, .rail-end { gap: 0 !important; }
  .rail-btn { height: 34px !important; }
  .tv-rail { gap: 4px !important; }
}
html.rotate .tv-rail .rail-btn { height: 34px; }
html.rotate .tv-rail .rail-btns, html.rotate .tv-rail .rail-end { gap: 0; }

/* Plan: prueba gratis (permanente) y vencimiento cercano (marca de agua) */
/* Marca de agua del plan: abajo al centro, justo sobre los botones. Sin desenfoque: sobre el video
   un backdrop-filter obliga a recomponer cada cuadro y en Android provoca saltos de imagen. */
.plan-mark {
  position: absolute; z-index: 6; left: 50%; bottom: 12px; transform: translateX(-50%);
  pointer-events: none; display: flex; align-items: center; gap: 10px; width: max-content;
  max-width: calc(100% - 24px); padding: 7px 16px 7px 8px; border-radius: 999px; color: #fff; font-size: .8rem; line-height: 1.3;
  background: rgba(8,5,6,.72); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 18px rgba(0,0,0,.35);
  white-space: nowrap; transition: bottom .42s var(--ease), opacity .3s ease;
}
.plan-mark[hidden] { display: none; }
.plan-mark em { font-style: normal; font-weight: 700; color: #fff; }
.plan-mark .pm-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.plan-mark .pm-tag { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .66rem; font-weight: 700; letter-spacing: .1em; }
.plan-mark.warn { border-color: rgba(var(--accent-rgb), .55); }
.plan-mark.warn .pm-tag { background: rgba(var(--accent-rgb), .2); color: #ffb3bc; display: inline-flex; align-items: center; gap: 5px; }
.plan-mark.warn .pm-tag svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.plan-mark.warn b { color: #ffb3bc; }
.tv-app.full .plan-mark { bottom: var(--pm-lift, calc(22px + var(--safe-bottom, 0px))); font-size: .84rem; }
.tv-app.full .osd.show.has-plan .osd-main { margin-bottom: 40px; }
@media (max-height: 520px) { .plan-mark { font-size: .72rem; padding: 5px 12px 5px 6px; } .tv-app.full .osd.show.has-plan .osd-main { margin-bottom: 38px; } }

/* Instalando / actualizando aplicación */
.mandatory-update {
  position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; overflow: hidden;
  box-sizing: border-box; padding: max(8px, env(safe-area-inset-top)) 12px max(8px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 20%, rgba(var(--accent-rgb), .15), transparent 52%), rgba(5,7,10,.97);
  overscroll-behavior: none; backdrop-filter: blur(18px); color: var(--text); animation: fadeIn .3s ease both;
}
.mandatory-update-card {
  box-sizing: border-box; width: min(380px, 100%); max-height: 100%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.25vh, 10px);
  padding: clamp(15px, 2.6vh, 23px) clamp(18px, 4vw, 26px); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 22px;
  background: linear-gradient(155deg, rgba(28,32,39,.98), rgba(12,15,20,.99));
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 38px rgba(var(--accent-rgb), .08); text-align: center;
}
.mandatory-update-mark { width: clamp(42px, 7vh, 54px); height: clamp(42px, 7vh, 54px); flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 17px; background: rgba(var(--accent-rgb), .13); color: var(--accent); }
.mandatory-update-mark svg { width: 24px; height: 24px; }
.mandatory-update-eyebrow { margin: 0; color: var(--accent); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mandatory-update-card h1 { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 4.5vw, 1.65rem); line-height: 1.15; font-weight: 600; }
.mandatory-update-copy { max-width: 310px; margin: 0; color: var(--muted); line-height: 1.4; font-size: .86rem; }
.mandatory-update-versions { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 1px 0; color: var(--muted); font-size: .72rem; }
.mandatory-update-versions span { display: grid; gap: 2px; }
.mandatory-update-versions b { color: var(--text); font-size: .84rem; font-variant-numeric: tabular-nums; }
.mandatory-update-versions i { width: 34px; height: 1px; background: var(--line); }
.mandatory-update-card button { width: 100%; justify-content: center; min-height: 42px; flex: 0 0 auto; }
.mandatory-update-card button:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); outline-offset: 3px; }
.mandatory-update-help { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.35; }
@media (max-height: 520px) {
  .mandatory-update { padding-top: 6px; padding-bottom: 6px; }
  .mandatory-update-card { gap: 6px; padding: 10px 18px; border-radius: 18px; }
  .mandatory-update-mark { width: 38px; height: 38px; border-radius: 13px; }
  .mandatory-update-mark svg { width: 20px; height: 20px; }
  .mandatory-update-help { display: none; }
  .mandatory-update-card button { min-height: 38px; }
}
@media (max-height: 390px) {
  .mandatory-update-card { gap: 4px; padding: 7px 16px; }
  .mandatory-update-mark { display: none; }
  .mandatory-update-card h1 { font-size: 1.2rem; }
  .mandatory-update-copy { font-size: .78rem; }
  .mandatory-update-card button { min-height: 34px; }
}
@media (max-width: 420px) { .mandatory-update-card { width: min(350px, 100%); padding-left: 18px; padding-right: 18px; border-radius: 20px; } }
.pg-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 18px; background: rgba(6,4,5,.82); animation: fadeIn .25s ease both; }
.pg-card {
  width: min(400px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 24px;
  border-radius: 24px; background: linear-gradient(180deg, #1c1517, #0f0b0c); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); color: #fff; text-align: center;
}
.pg-icon { position: relative; width: 76px; height: 76px; margin-bottom: 6px; border-radius: 22px; padding: 10px; background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.pg-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
.pg-icon.pg-icon-success { display: grid; place-items: center; padding: 0; border-radius: 50%; color: #5fd6a4; background: rgba(31,157,107,.15); box-shadow: 0 0 0 1px rgba(95,214,164,.28), 0 0 28px rgba(31,157,107,.18); }
.pg-icon.pg-icon-success svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-modal[data-mode="run"] .pg-icon::after {
  content: ""; position: absolute; inset: -6px; border-radius: 26px; border: 2px solid transparent;
  border-top-color: var(--accent); border-right-color: rgba(var(--accent-rgb), .35); animation: pgSpin 1s linear infinite;
}
@keyframes pgSpin { to { transform: rotate(360deg); } }
.pg-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.pg-sub { margin: 0; font-size: .86rem; line-height: 1.5; color: rgba(255,255,255,.66); max-width: 320px; }
.pg-track { width: 100%; height: 6px; margin-top: 10px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; }
.pg-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #ff5a6e); transition: width .2s linear; }
.pg-pct { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.pg-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 6px; }
.pg-actions:empty { display: none; }
.pg-actions button { width: 100%; justify-content: center; }
.pg-modal[data-mode="ask"] .pg-track, .pg-modal[data-mode="ask"] .pg-pct { display: none; }
.pg-modal[data-mode="done"] .pg-fill { background: #1f9d6b; }
.pg-modal[data-mode="done"] .pg-pct { color: #5fd6a4; }

/* Control parental */
.pc-modal { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.74); backdrop-filter: blur(8px); animation: fadeIn .25s ease both; }
.pc-card {
  width: min(420px, 100%); max-height: calc(100% - 8px); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 20px 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(30,22,24,.98), rgba(14,10,11,.98));
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 80px rgba(0,0,0,.6); color: #fff; text-align: center; overflow: hidden;
}
.pc-card h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.pc-sub { margin: 0; font-size: .8rem; color: rgba(255,255,255,.62); }
.pc-lock { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb), .16); color: var(--accent); }
.pc-lock.sm { width: 40px; height: 40px; flex: 0 0 auto; }
.pc-lock svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pc-dots { display: flex; gap: 14px; margin: 4px 0 6px; }
.pc-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); transition: background .15s, border-color .15s, transform .15s; }
.pc-dots i.on { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }
.pc-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; }
.pc-pad button {
  height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: #fff;
  font-size: 1.3rem; font-weight: 600; cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.pc-pad button:hover, .pc-pad button:focus-visible, .pc-pad button:focus { outline: none; border-color: var(--accent); background: rgba(var(--accent-rgb), .22); }
.pc-pad button:active { transform: scale(.95); }
.pc-pad .pc-soft { font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.75); }
.pc-pad svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pc-card.shake { animation: pcShake .4s ease; }
@keyframes pcShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pc-head { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; }
.pc-head > div:nth-child(2) { flex: 1; min-width: 0; }
.pc-x { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; display: grid; place-items: center; cursor: pointer; }
.pc-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pc-x:focus-visible, .pc-x:hover { outline: none; border-color: var(--accent); }
.pc-list { width: 100%; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding: 2px; margin-top: 4px; }
.pc-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); position: relative;
}
.pc-row:has(input:focus-visible), .pc-row:has(input:focus), .pc-row:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .12); }
.pc-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: .9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name small { font-size: .7rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.5); }
.pc-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pc-check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.pc-row input:checked + .pc-check { background: var(--accent); border-color: var(--accent); }
.pc-row input:checked + .pc-check::after { content: ""; width: 6px; height: 11px; border: solid var(--accent-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.pc-foot { width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding-top: 4px; }
.pc-hint { font-size: .74rem; color: rgba(255,255,255,.6); }
.pc-hint b { color: #fff; letter-spacing: .12em; }
.pc-row.fixed { cursor: default; border-color: rgba(var(--accent-rgb), .35); }
.pc-row.fixed .pc-check { opacity: .75; }
.pc-link { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.82); font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; padding: 7px 14px; border-radius: 999px; transition: background .2s, border-color .2s, color .2s; }
.pc-link:focus-visible, .pc-link:hover { outline: none; color: #fff; background: rgba(255,255,255,.1); border-color: color-mix(in srgb, var(--accent, #b11226) 60%, transparent); }
@media (max-height: 520px) {
  .pc-card { padding: 14px 16px; gap: 6px; }
  .pc-lock { width: 38px; height: 38px; }
  .pc-pad { grid-template-columns: repeat(3, 58px); gap: 6px; }
  .pc-pad button { height: 40px; }
}
html.rotate .pc-card { padding: 14px 16px; gap: 6px; }
html.rotate .pc-pad { grid-template-columns: repeat(3, 58px); gap: 6px; }
html.rotate .pc-pad button { height: 40px; }

/* Botón actualizar */
.rail-refresh.spin svg { animation: spin .8s linear infinite; }
.rail-refresh.spin { color: var(--accent); pointer-events: none; }

/* Buscador (texto y voz) a pantalla completa */
.search-sheet {
  position: fixed; inset: 0; z-index: 95; display: none; flex-direction: column;
  background: rgba(8,6,7,.97); backdrop-filter: blur(14px);
  padding: calc(10px + var(--safe-top)) max(14px, var(--safe-right)) calc(10px + var(--safe-bottom)) max(14px, var(--safe-left));
}
.search-sheet.open { display: flex; animation: fadeIn .25s ease both; }
.ss-bar { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ss-btn { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; }
.ss-btn svg { width: 22px; height: 22px; }
.ss-btn:focus-visible, .ss-btn:hover { outline: none; border-color: var(--accent); background: rgba(var(--accent-rgb), .18); }
.ss-mic { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.search-sheet.listening .ss-mic { animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .55); } 50% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } }
.ss-field { flex: 1; min-width: 0; position: relative; display: block; }
.ss-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: rgba(255,255,255,.5); pointer-events: none; }
.ss-field input {
  width: 100%; height: 48px; padding: 0 16px 0 44px; border-radius: 999px; font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
}
.ss-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); }
.ss-field input::-webkit-search-cancel-button { filter: invert(1); }
.ss-hint { flex: 0 0 auto; padding: 12px 6px 8px; font-size: .8rem; color: rgba(255,255,255,.6); }
.search-sheet.listening .ss-hint { color: var(--accent); font-weight: 600; }
.ss-list { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; gap: 8px; padding: 2px; }
.ss-item {
  display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 58px;
  padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04);
  color: #fff; text-align: left; font: inherit; cursor: pointer;
}
.ss-item b { font-family: var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; text-align: center; }
.ss-item img { width: 52px; height: 36px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.06); }
.ss-item img[src=""] { visibility: hidden; }
.ss-item span { display: grid; min-width: 0; }
.ss-item strong { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item small { font-size: .76rem; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-item em { font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.ss-item:hover, .ss-item:focus-visible { outline: none; border-color: var(--accent); background: rgba(var(--accent-rgb), .14); }
.ss-item.on { border-color: rgba(var(--accent-rgb), .5); }
.ss-empty { grid-column: 1 / -1; margin: 30px 0; text-align: center; color: rgba(255,255,255,.6); }
html.dev-tv .ss-item:focus, html.dev-tv .ss-btn:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Modal de permisos dentro de la app */
.perm-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); animation: fadeIn .3s ease both; }
.perm-modal .perm-card { width: min(420px, 100%); }
.perm-modal.leave { animation: fadeOut .3s ease forwards; }
.perm-sub { margin: -4px 0 4px; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72); text-align: center; }

/* Menú de calidad */
.q-menu {
  position: absolute; right: 36px; bottom: calc(90px + var(--safe-bottom)); z-index: 7; pointer-events: auto;
  width: 270px; max-height: calc(100% - 140px); overflow: auto; padding: 8px; border-radius: 16px;
  background: rgba(16, 12, 14, .94); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: sheetUp .25s var(--ease) both;
}
.q-title { padding: 8px 12px 10px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.q-menu button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px 11px 34px; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; position: relative; text-align: left;
}
.q-menu button b { font-weight: 600; font-size: .95rem; }
.q-menu button small { white-space: nowrap; font-size: .74rem; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.q-menu button.on::before { content: ""; position: absolute; left: 13px; top: 50%; width: 9px; height: 5px; border: 2px solid var(--accent); border-top: 0; border-right: 0; transform: translateY(-70%) rotate(-45deg); }
.q-menu button.on b { color: var(--accent); }
.q-menu button:hover, .q-menu button:focus-visible { background: rgba(255,255,255,.1); outline: none; }

/* Pantalla completa: API nativa o, si el equipo no la tiene, la capa ocupa toda la pantalla */
.tv-app.full .player-shell { position: fixed; inset: 0; z-index: 90; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; box-shadow: none; cursor: none; }
.tv-app.full #player { object-fit: var(--fit, contain); }
.tv-app.full .player-shell.cursor { cursor: default; }
.player-shell:fullscreen { border-radius: 0; }
.tv-app.full .player-ad { top: auto; bottom: 200px; }

/* Guía EPG */
.tv-guide { position: relative; flex: 1 1 auto; min-height: 0; border-top: 1px solid rgba(255,255,255,.06); }
.guide-scroll { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.guide-inner { position: relative; min-width: 100%; }
.guide-head { position: sticky; top: 0; z-index: 6; display: flex; height: 40px; background: var(--bg); border-bottom: 1px solid rgba(255,255,255,.06); }
.gh-date {
  position: sticky; left: 0; z-index: 2; flex: 0 0 var(--ch-w); display: flex; align-items: center; padding: 0 12px;
  background: var(--bg); font-size: .82rem; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gh-slots { position: relative; flex: 0 0 auto; }
.gh-slots span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 10px; font-size: .8rem; color: var(--muted); border-left: 1px solid rgba(255,255,255,.07); font-variant-numeric: tabular-nums; white-space: nowrap; }
.guide-rows { position: relative; }
.ep-row { touch-action: manipulation; display: flex; height: var(--row-h); border-bottom: 1px solid rgba(255,255,255,.05); outline: none; cursor: pointer; }
.g-ch {
  position: sticky; left: 0; z-index: 3; flex: 0 0 var(--ch-w); display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) 22px;
  align-items: center; gap: 8px; padding: 0 10px 0 8px; background: var(--bg); border-right: 1px solid rgba(255,255,255,.06);
}
.g-num { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.g-logo { width: 52px; height: 34px; object-fit: contain; }
.g-logo.ph { display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.06); font-size: .7rem; font-weight: 700; color: var(--muted); }
.g-name { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-play { width: 20px; height: 20px; color: var(--muted); opacity: 0; transition: opacity .2s; }
.g-fav { width: 12px; height: 12px; color: #f5c542; fill: currentColor; margin-left: 4px; vertical-align: -1px; }
.g-line { position: relative; flex: 0 0 auto; }
.g-cell {
  position: absolute; top: 5px; bottom: 5px; padding: 0 12px; min-width: 0; overflow: hidden;
  border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.g-cell b, .g-cell small { display: block; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-cell b { font-size: .86rem; font-weight: 600; color: var(--text); }
.g-cell small { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-cell.tight { padding: 0 8px; }
.g-cell.past { background: rgba(255,255,255,.025); }
.g-cell.past b { color: var(--muted); font-weight: 500; }
.g-cell.live { background: rgba(255,255,255,.09); box-shadow: inset 3px 0 0 var(--accent); }
.g-cell.empty { background: transparent; border: 1px dashed rgba(255,255,255,.07); }
.g-cell.empty b { font-weight: 400; color: var(--muted); font-size: .8rem; }
.ep-row:hover .g-ch, .ep-row:focus .g-ch { background: #1b1416; background: color-mix(in srgb, var(--bg) 82%, #fff 8%); }
.ep-row:hover .g-play, .ep-row:focus .g-play, .ep-row.playing .g-play { opacity: 1; }
.ep-row:focus .g-ch { box-shadow: inset 3px 0 0 var(--accent); }
.ep-row:focus .g-cell.live, .ep-row.playing .g-cell.live { background: rgba(var(--accent-rgb), .28); border-color: rgba(var(--accent-rgb), .5); }
.ep-row.playing .g-name { color: var(--accent); font-weight: 600; }
.ep-row.playing .g-play { color: var(--accent); }
.now-line { position: absolute; top: 34px; bottom: 0; z-index: 2; width: 2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 10px rgba(var(--accent-rgb), .7); }
.now-line::before { content: ""; position: absolute; top: -2px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.guide-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 20px; }

/* Aviso tipo notificación de banco */
.push-banner {
  position: fixed; z-index: 120; top: calc(12px + var(--safe-top)); left: 50%; width: min(440px, calc(100vw - 24px));
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 18px; cursor: pointer;
  background: rgba(28, 24, 26, .96); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transform: translate(-50%, 0); animation: pushIn .5s cubic-bezier(.2, 1.2, .3, 1) both;
}
.push-banner.out { animation: pushOut .35s var(--ease) forwards; }
.push-banner .pb-icon { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: var(--accent); }
.push-banner .pb-app { display: flex; gap: 6px; align-items: center; font-size: .72rem; color: rgba(255,255,255,.6); letter-spacing: .02em; }
.push-banner .pb-app b { color: rgba(255,255,255,.85); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.push-banner .pb-title { font-weight: 700; font-size: .95rem; color: #fff; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-banner .pb-body { font-size: .85rem; color: rgba(255,255,255,.8); margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.push-banner .pb-img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.push-banner .pb-bar { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: pbBar var(--pb-ms, 5s) linear forwards; opacity: .8; }
.push-banner .pb-app span { margin-left: auto; }
.push-banner .pb-app { width: 100%; }
.push-banner .pb-app i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* Línea de estado: reemplaza las ventanas emergentes dentro de la app (actualizando, éxito, error) */
.cdx-status { position: fixed; inset: 0 0 auto; z-index: 140; pointer-events: none; display: grid; justify-items: center; }
.cdx-status[hidden] { display: none; }
.cs-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; }
.cdx-status.s-run .cs-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: csRun 1.1s ease-in-out infinite;
}
.cdx-status.s-ok .cs-line { background: #1fa971; animation: csFade 1.6s ease forwards; }
.cdx-status.s-error .cs-line, .cdx-status.s-warn .cs-line { background: var(--accent); animation: csFade 1.6s ease forwards; }
.cs-pill {
  margin-top: calc(12px + var(--safe-top, 0px)); max-width: min(560px, calc(100vw - 32px));
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 600; letter-spacing: .01em; color: #fff; text-align: left; line-height: 1.35;
  background: rgba(16,12,14,.94); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: csIn .3s var(--ease) both;
}
.cs-pill svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-ok .cs-pill svg { color: #3ddc97; }
.s-error .cs-pill svg { color: #ff6b7a; }
.s-warn .cs-pill svg { color: #ffc062; }
.s-info .cs-pill svg { color: rgba(255,255,255,.7); }
.cs-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); border-top-color: #fff; animation: spin .8s linear infinite; }
.cdx-status.out .cs-pill { animation: csOut .25s ease forwards; }
@keyframes csRun { to { left: 100%; } }
@keyframes csFade { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes csIn { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes csOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pushIn { from { transform: translate(-50%, -140%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes pushOut { to { transform: translate(-50%, -140%); opacity: 0; } }
@keyframes pbBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Anuncio sobre el reproductor */
.player-ad {
  position: absolute; right: 14px; top: 14px; width: min(320px, 46%);
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--radius);
  background: rgba(var(--bg-rgb), .82); backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--tone-rgb, var(--accent-rgb)), .5);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: slideLeft .45s var(--ease) both; overflow: hidden; z-index: 3;
}
.player-ad img { width: 72px; height: 54px; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.player-ad .t { font-size: .88rem; font-weight: 600; }
.player-ad .b { font-size: .74rem; color: var(--muted); margin-top: 2px; }
.player-ad.no-img { grid-template-columns: 1fr; padding-left: 14px; }
.player-ad .ad-tag { display: block; margin-bottom: 3px; font-size: .56rem; letter-spacing: .14em; color: var(--tone, var(--accent)); }
.player-ad .ad-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--tone, var(--accent)); animation: shrink linear forwards; }
.ad-close { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
@keyframes slideLeft { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
@keyframes shrink { from { width: 100%; } to { width: 0; } }

/* Banner carrusel */
.banner-slot { position: relative; margin-top: 12px; height: 92px; }
.ad-banner {
  position: absolute; inset: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  padding: 10px 16px 10px 10px; border-radius: var(--radius); overflow: hidden;
  background:
    linear-gradient(100deg, rgba(var(--tone-rgb), .22), rgba(var(--tone-rgb), .04) 60%),
    var(--surface);
  border: 1px solid rgba(var(--tone-rgb), .4);
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.ad-banner.on { opacity: 1; transform: none; pointer-events: auto; }
.ad-banner img { width: 128px; height: 72px; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.ad-banner .noimg { width: 6px; height: 72px; border-radius: 4px; background: var(--tone); }
.ad-banner .t { font-weight: 600; font-size: 1rem; }
.ad-banner .b { color: var(--muted); font-size: .84rem; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-banner .cta { padding: 10px 16px; font-size: .85rem; }
.ad-banner .ad-close { top: 6px; right: 8px; }
.banner-dots { position: absolute; right: 14px; bottom: 6px; display: flex; gap: 5px; z-index: 2; }
.banner-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.banner-dots i.on { background: var(--accent); }

/* Tonos de anuncios */
.tone-promo   { --tone: var(--accent);  --tone-rgb: var(--accent-rgb); }
.tone-info    { --tone: var(--accent-2); --tone-rgb: var(--accent2-rgb); }
.tone-success { --tone: #3fbf7f; --tone-rgb: 63, 191, 127; }
.tone-warning { --tone: #f0b429; --tone-rgb: 240, 180, 41; }
.tone-danger  { --tone: var(--live); --tone-rgb: var(--live-rgb); }

/* Modal de anuncio */
.ad-modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.7); backdrop-filter: blur(8px); animation: fade .3s both; }
.ad-modal-card {
  position: relative; width: min(520px, 100%); overflow: hidden; border-radius: calc(var(--radius) + 8px);
  background: var(--surface); border: 1px solid rgba(var(--tone-rgb), .5);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 80px rgba(var(--tone-rgb), .15);
  animation: sheetUp .45s var(--ease) both;
}
.ad-modal-card img.hero { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ad-modal-card .body { padding: 24px; }
.ad-modal-card .tag { display: inline-block; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tone); margin-bottom: 8px; }
.ad-modal-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; }
.ad-modal-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.ad-modal-card .actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.ad-modal-card .ad-close { top: 10px; right: 12px; font-size: 1.5rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* Toast */
.toast {
  position: fixed; right: 20px; bottom: calc(20px + var(--safe-bottom)); z-index: 130;
  width: min(380px, calc(100vw - 40px)); display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius);
  background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-left: 3px solid var(--tone, var(--accent));
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: sheetUp .4s var(--ease) both;
}
.toast img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.toast .tt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tone, var(--accent)); }
.toast .tb { margin-top: 4px; font-size: .95rem; }
.toast .tm { margin-top: 3px; font-size: .78rem; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 8px; }
  .hero-visual { height: 260px; order: -1; }
  .install-grid { grid-template-columns: 1fr; }
  .qr-card { display: none !important; }
}
/* TV grandes (1080p+): todo un poco más grande para verse a distancia */
@media (min-width: 1600px) {
  .tv-app { --rail-w: 84px; --ch-w: 300px; --row-h: 72px; --px-min: 5.6px; font-size: 18px; }
  .rail-btn { width: 54px; height: 54px; }
  .rail-btn svg { width: 26px; height: 26px; }
}
/* Vista previa estrecha del panel (en equipos táctiles la app siempre va en horizontal) */
@media (max-width: 760px) and (orientation: portrait) and (pointer: fine) {
  .tv-app { --ch-w: 150px; --row-h: 58px; --px-min: 3.2px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .tv-rail { grid-row: 2; flex-direction: row; justify-content: space-around; gap: 0; padding: 4px 6px calc(4px + var(--safe-bottom)); border-right: 0; border-top: 1px solid rgba(255,255,255,.06); background: rgba(var(--bg-rgb), .98); }
  .rail-logo, .rail-btn[data-rail="notify"] { display: none; }
  .rail-btns, .rail-end { flex-direction: row; gap: 0; margin: 0; }
  .rail-btn { width: 54px; height: 52px; grid-template-rows: 24px auto; gap: 2px; }
  .rail-btn span { display: block; font-size: .62rem; }
  .rail-btn.active::before { left: 18px; right: 18px; top: -4px; bottom: auto; width: auto; height: 3px; }
  .tv-drawer { left: 0; width: min(320px, 86vw); bottom: 0; transform: translateX(-105%); }
  .tv-main { grid-row: 1; padding: calc(8px + var(--safe-top)) 0 0; gap: 8px; }
  .tv-main > .ticker { margin: 0 10px; }
  .tv-top { grid-template-columns: 1fr; height: auto; gap: 8px; }
  .tv-top .player-shell { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
  .tv-info { padding: 0 14px; gap: 3px; }
  .info-title { font-size: 1.15rem; -webkit-line-clamp: 1; }
  .info-desc, .tv-info .banner-slot { display: none !important; }
  .g-ch { grid-template-columns: 26px 40px minmax(0, 1fr); gap: 6px; padding: 0 6px; }
  .g-logo { width: 40px; height: 28px; }
  .g-play { display: none; }
  .g-name { font-size: .8rem; }
  .osd-top { padding: calc(14px + var(--safe-top)) 16px 40px; font-size: .85rem; }
  .osd-bottom { padding: 50px 16px calc(16px + var(--safe-bottom)); gap: 12px; }
  .osd-logo { width: 60px; height: 46px; }
  .osd-btn { padding: 6px 10px; font-size: .74rem; }
}
/* Celular en horizontal / TV box pequeños */
@media (orientation: landscape) and (max-height: 520px) {
  .tv-app { --rail-w: 56px; --ch-w: 190px; --row-h: 52px; --px-min: 3.6px; --top-h: .44; --top-w: .44; --main-pad: 20px; }
  .tv-rail { gap: 8px; padding: calc(8px + var(--safe-top)) 0 calc(8px + var(--safe-bottom)); }
  .rail-btns { gap: 2px; }
  .rail-end { display: flex; flex-direction: column; gap: 2px; }
  .rail-logo { width: 30px; height: 30px; }
  .rail-btn { width: 38px; height: 38px; border-radius: 10px; }
  .rail-btn svg { width: 20px; height: 20px; }
  .rail-btn.active::before { left: -9px; top: 10px; bottom: 10px; }
  .tv-main { padding: calc(8px + var(--safe-top)) 10px calc(6px + var(--safe-bottom)) 10px; gap: 8px; }
  .tv-top { gap: 16px; }
  .g-cell { top: 4px; bottom: 4px; gap: 2px; }
  .g-cell b { font-size: .8rem; }
  .g-cell small { font-size: .68rem; }
  .info-desc, .tv-info .banner-slot { display: none !important; }
  .info-title { font-size: 1.1rem; }
  .osd-top { padding: 12px 22px 30px; }
  .osd-bottom { padding: 40px 22px 14px; gap: 10px; }
  .osd-logo { width: 64px; height: 48px; }
  .osd-btn { padding: 6px 11px; font-size: .74rem; gap: 5px; }
  .osd-btn svg { width: 14px; height: 14px; }
  .g-ch { grid-template-columns: 22px 38px minmax(0, 1fr); gap: 6px; padding: 0 8px 0 4px; }
  .g-logo { width: 38px; height: 26px; }
  .g-play { display: none; }
  .g-name { font-size: .82rem; }
}

/* Televisores: se navega con el control remoto, el foco tiene que verse desde el sillón */
html.dev-tv, html.dev-tv * { cursor: none !important; scrollbar-width: none; }
html.dev-tv ::-webkit-scrollbar { display: none; }
html.dev-tv .rail-btn:focus, html.dev-tv .fav-btn:focus, html.dev-tv .drawer-item:focus,
html.dev-tv .osd-btn:focus, html.dev-tv .q-menu button:focus, html.dev-tv .retry:focus, html.dev-tv .gate-btn:focus {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
html.dev-tv .rail-btn:focus { color: var(--text); background: rgba(var(--accent-rgb), .22); }
html.dev-tv .ep-row:focus { outline: none; }
html.dev-tv .ep-row:focus .g-ch { background: rgba(var(--accent-rgb), .2); box-shadow: inset 4px 0 0 var(--accent); }
html.dev-tv .ep-row:focus .g-name { color: #fff; font-weight: 600; }
html.dev-tv .ep-row:focus .g-cell.live { outline: 2px solid rgba(var(--accent-rgb), .8); outline-offset: -2px; }
html.dev-tv .player-shell.focus { box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0,0,0,.45); }
html.dev-tv .field input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .5); }
html.dev-tv .tv-app.full .osd-bottom { padding-left: 5vw; padding-right: 5vw; padding-bottom: 5vh; }
html.dev-tv .tv-app.full .osd-top { padding-left: 5vw; padding-right: 5vw; padding-top: 4vh; }
html.dev-tv .q-menu { right: 5vw; bottom: calc(5vh + 70px); }

.osd-top, .osd-bottom { padding-left: max(22px, calc(12px + var(--safe-left))); padding-right: max(22px, calc(12px + var(--safe-right))); }
.q-menu { right: max(36px, calc(16px + var(--safe-right))); }

/* Celular que no acepta el bloqueo de orientación: la app se gira 90° y queda en horizontal */
html.rotate, html.rotate body { overflow: hidden; height: 100%; }
html.rotate body {
  position: fixed; top: 0; left: 0; width: var(--app-w, 100vh); height: var(--app-h, 100vw); min-height: 0;
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
}
html.rotate .tv-app { height: 100%; --rail-w: 56px; --ch-w: 190px; --row-h: 52px; --px-min: 3.6px; --vw: var(--app-w); --vh: var(--app-h); --top-h: .44; --top-w: .44; --main-pad: 20px; }
html.rotate .tv-rail { gap: 8px; padding: 8px 0; }
html.rotate .rail-btns, html.rotate .rail-end { display: flex; flex-direction: column; gap: 2px; }
html.rotate .rail-btn svg { width: 20px; height: 20px; }
html.rotate .g-cell { top: 4px; bottom: 4px; gap: 2px; }
html.rotate .g-cell b { font-size: .8rem; }
html.rotate .g-cell small { font-size: .68rem; }
html.rotate .rail-logo { width: 30px; height: 30px; }
html.rotate .rail-btn { width: 38px; height: 38px; }
html.rotate .tv-main { padding: 8px 10px 6px 10px; gap: 8px; }
html.rotate .tv-top { gap: 16px; }
html.rotate .info-desc, html.rotate .tv-info .banner-slot { display: none !important; }
html.rotate .info-title { font-size: 1.1rem; }
html.rotate .osd-top { padding: 12px 22px 30px; }
html.rotate .osd-bottom { padding: 40px 22px 14px; gap: 10px; }
html.rotate .osd-logo { width: 64px; height: 48px; }
html.rotate .osd-btn { padding: 6px 11px; font-size: .74rem; gap: 5px; }
html.rotate .osd-btn svg { width: 14px; height: 14px; }
html.rotate .g-ch { grid-template-columns: 22px 38px minmax(0, 1fr); gap: 6px; padding: 0 8px 0 4px; }
html.rotate .g-logo { width: 38px; height: 26px; }
html.rotate .g-play { display: none; }
html.rotate .g-name { font-size: .82rem; }
html.rotate .gate-card { padding: 20px 24px 18px; gap: 10px; width: min(380px, 100%); }
html.rotate .gate-title { font-size: 1.3rem; margin-bottom: 2px; }
html.rotate .field input { height: 48px; padding-top: 16px; }
html.rotate .field input:focus + span, html.rotate .field input:not(:placeholder-shown) + span { top: 13px; }
html.rotate .gate-btn { height: 46px; }
html.rotate .perm-item { padding: 8px 12px; }
html.rotate .perm-ic { width: 36px; height: 36px; }
html.rotate .push-banner { width: min(440px, calc(var(--app-w, 100vh) - 24px)); }
html.rotate .cs-pill { max-width: calc(var(--app-w, 100vh) - 32px); }
html.rotate .auth-card { padding: 20px 28px 16px; border-radius: 22px; }
html.rotate .auth-pane { gap: 9px; }
html.rotate .auth-head { margin-bottom: 2px; gap: 2px; }
html.rotate .auth-title { font-size: 1.35rem; }
html.rotate .auth-sub { font-size: .66rem; }
html.rotate .auth-text { font-size: .8rem; line-height: 1.4; margin: -2px 0 0; }
html.rotate .auth-card .field input { height: 44px; padding-top: 14px; }
html.rotate .auth-card .field input:focus + span, html.rotate .auth-card .field input:not(:placeholder-shown) + span { top: 11px; font-size: .64rem; }
html.rotate .auth-btn { height: 44px; margin-top: 2px; }
html.rotate .auth-link { padding: 2px 8px; font-size: .8rem; }
html.rotate .auth-foot { font-size: .8rem; margin-top: -6px; }
html.rotate .auth-alert.out { margin-top: -9px; }
@media (max-width: 520px) {
  .platform-pill span { display: none; }
  .hero-actions .btn-primary { flex: 1; }
  .player-ad { width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Televisores y TV box: GPU modesta. Sin desenfoques ni animaciones decorativas, que traban la imagen y el control */
.boot-msg { position: absolute; left: 0; right: 0; bottom: 20vh; margin: 0; text-align: center; color: var(--muted); font-size: .95rem; }
html.dev-tv *, html.dev-tv *::before, html.dev-tv *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.dev-tv .ab, html.dev-tv .gate-bg i, html.dev-tv .gate-bg::after, html.dev-tv .gate-btn::after, html.dev-tv .gate-card::before,
html.dev-tv .auth-scene::after { display: none !important; }
html.dev-tv .gate-card, html.dev-tv .gate-card > *, html.dev-tv .dot-live, html.dev-tv .install-sheet .sheet-icon { animation: none !important; }
html.dev-tv .auth-card { background: #171113; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
html.dev-tv .pc-modal, html.dev-tv .perm-modal, html.dev-tv .ad-modal { background: rgba(0,0,0,.86); }
html.dev-tv .search-sheet, html.dev-tv .guard-screen { background: rgba(8,6,7,.99); }
html.dev-tv .g-play, html.dev-tv .field input, html.dev-tv .field span, html.dev-tv .gate-btn { transition: none; }
/* Solo se dibujan las filas de la guía que están en pantalla */
html.dev-tv .ep-row { width: calc(var(--ch-w) + var(--guide-w, 0px)); content-visibility: auto; contain-intrinsic-size: auto var(--row-h); }
/* Cajón de categorías en TV: más ancho, opciones separadas y selector relleno (un contorno se recortaba en los bordes) */
html.dev-tv .tv-drawer { width: 380px; padding-left: 18px; padding-right: 18px; gap: 12px; }
html.dev-tv .drawer-list, html.dev-tv .drawer-settings { gap: 8px; padding: 4px 2px; }
html.dev-tv .drawer-item { padding: 15px 18px; border-radius: 12px; font-size: 1rem; background: rgba(255,255,255,.04); }
html.dev-tv .drawer-item b, html.dev-tv .drawer-item em { font-size: .85rem; }
html.dev-tv .drawer-item.active { background: rgba(var(--accent-rgb), .18); box-shadow: inset 4px 0 0 var(--accent); }
html.dev-tv .drawer-item:focus { outline: none; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .35); }
html.dev-tv .drawer-item:focus b, html.dev-tv .drawer-item:focus em { color: inherit; }
html.dev-tv .drawer-sep { margin: 8px 10px; }
/* Botones del reproductor en pantalla completa: foco relleno y bien visible desde el sillón */
html.dev-tv .osd-btn:focus { outline: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .4); }
html.dev-tv .q-menu button:focus { outline: none; background: var(--accent); color: var(--accent-ink); }
html.dev-tv .auth-link:focus, html.dev-tv .pw-eye:focus, html.dev-tv .ad-modal button:focus, html.dev-tv .ad-modal a:focus,
html.dev-tv .auth-card a:focus, html.dev-tv .banner-slot a:focus, html.dev-tv .banner-slot button:focus {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 10px;
}

/* Barra lateral: logo, 9 botones y Ajustes siempre entran completos. Muchos TV box muestran la app a 540 px de alto,
   por eso tamaños y separaciones se ajustan a la altura de la pantalla en vez de desplazarse */
@media (orientation: landscape) {
  .tv-rail { gap: clamp(6px, 2.2vh, 18px); padding-top: calc(clamp(8px, 2.4vh, 14px) + var(--safe-top)); padding-bottom: calc(clamp(8px, 2.4vh, 14px) + var(--safe-bottom)); }
  .rail-btns { gap: clamp(1px, .7vh, 6px); }
  .rail-logo { width: clamp(28px, 7vh, 40px); height: clamp(28px, 7vh, 40px); }
  .rail-btn { height: clamp(32px, 7.4vh, 46px); }
  .rail-btn.active::before { top: 25%; bottom: 25%; }
}
@media (orientation: landscape) and (min-width: 1600px) {
  .rail-btn { height: clamp(40px, 6.4vh, 54px); }
  .rail-logo { width: clamp(32px, 6.4vh, 48px); height: clamp(32px, 6.4vh, 48px); }
}

/* ---------- Sincronización al abrir la app ---------- */
.sync {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--accent-rgb), .16), transparent 60%), var(--bg);
  opacity: 0; transition: opacity .35s var(--ease);
}
.sync.in { opacity: 1; }
.sync.out { opacity: 0; pointer-events: none; }
.sync-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(440px, 100%); transform: translateY(10px) scale(.98); transition: transform .45s var(--ease);
}
.sync.in .sync-card { transform: none; }
.sync-mark { position: relative; width: clamp(84px, 16vh, 112px); height: clamp(84px, 16vh, 112px); display: grid; place-items: center; margin-bottom: clamp(14px, 3vh, 24px); }
.sync-mark img { width: 52%; height: 52%; object-fit: contain; animation: syncPulse 1.8s ease-in-out infinite; }
.sync-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(var(--accent-rgb), .14); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.sync-ring.r2 { inset: 12%; border-width: 2px; border-color: transparent; border-bottom-color: rgba(var(--accent-rgb), .6); animation-duration: 1.6s; animation-direction: reverse; }
.sync-title { margin: 0; font-size: clamp(1.05rem, 2.6vh, 1.35rem); font-weight: 700; letter-spacing: .01em; color: var(--text, #fff); }
.sync-sub {
  margin: 6px 0 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: min(clamp(.7rem, 1.6vh, .85rem), 2.9vw); font-style: italic; color: var(--muted); letter-spacing: .01em;
}
.sync-steps { list-style: none; margin: clamp(16px, 3.4vh, 26px) 0 0; padding: 0; display: flex; gap: clamp(14px, 3vw, 26px); justify-content: center; }
.sync-steps li { display: flex; align-items: center; gap: 8px; font-size: clamp(.78rem, 1.8vh, .9rem); color: var(--muted); transition: color .3s; }
.sync-steps i {
  position: relative; width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid rgba(var(--accent-rgb), .25); border-top-color: var(--accent); animation: spin .8s linear infinite;
}
.sync-steps li.ok { color: var(--text, #fff); }
.sync-steps li.ok i { animation: none; border-color: var(--accent); background: var(--accent); }
.sync-steps li.ok i::after {
  content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.sync-bar { position: relative; width: min(280px, 80%); height: 4px; margin-top: clamp(16px, 3vh, 24px); border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.sync-bar b { position: absolute; left: 0; top: 0; bottom: 0; width: 6%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #ff4d5e); transition: width .45s var(--ease); }
.sync-bar::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); animation: syncShine 1.4s linear infinite;
}
@keyframes syncPulse { 50% { transform: scale(.92); opacity: .85; } }
@keyframes syncShine { from { left: -30%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .sync-mark img, .sync-bar::after { animation: none; } }

/* Barra de opciones del reproductor centrada abajo */
.osd-actions {
  justify-self: center; width: max-content; max-width: 100%; margin: 4px auto 0; padding: 6px; gap: 6px;
  border-radius: 999px; background: rgba(12, 9, 10, .58); border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.osd-actions .osd-btn { border-color: transparent; background: rgba(255, 255, 255, .06); }
.osd-actions .osd-btn:hover, .osd-actions .osd-btn:focus-visible { background: #fff; color: #000; }
.q-menu {
  bottom: calc(96px + var(--safe-bottom)); width: 250px; padding: 6px; border-radius: 18px;
  background: rgba(10, 8, 9, .42); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 48px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.q-title { padding: 10px 14px 8px; font-size: .66rem; font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .08); margin-bottom: 4px; }
.q-menu button { padding: 9px 14px 9px 36px; border-radius: 12px; transition: background .18s var(--ease); }
.q-menu button b { font-size: .88rem; font-weight: 500; letter-spacing: .01em; }
.q-menu button small { color: rgba(255, 255, 255, .45); }
.q-menu button.on { background: rgba(var(--accent-rgb), .16); }
.q-menu button.on b { font-weight: 600; }
.q-menu button:hover, .q-menu button:focus-visible { background: rgba(255, 255, 255, .12); }
html.dev-tv .q-menu { bottom: calc(5vh + 80px); }
/* En TV box el desenfoque encima del video le quita fuerza al decodificador: fondo sólido translúcido */
html.dev-tv .osd-btn, html.dev-tv .osd-actions, html.dev-tv .q-menu { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.dev-tv .osd-actions { background: rgba(12, 9, 10, .72); }
html.dev-tv .q-menu { background: rgba(14, 10, 12, .8); }
html.dev-tv .osd-actions .osd-btn:focus { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Portada Android: mockups de la app, con colores vinculados al tema del panel. */
.land-nav button,.land-foot-nav button{appearance:none!important;-webkit-appearance:none!important;background:transparent!important;border:1px solid transparent!important;color:var(--text,#eef7fb)!important;border-radius:999px;padding:11px 16px;font:600 .92rem Manrope, sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;}
.land-nav button:hover,.land-nav button:focus-visible,.land-foot-nav button:hover,.land-foot-nav button:focus-visible{background:rgba(var(--accent-rgb),.13)!important;border-color:rgba(var(--accent-rgb),.46)!important;outline:none;transform:translateY(-1px)}
.land-nav button .bi,.land-foot-nav button .bi{color:var(--accent);font-size:1.05rem}
.btn-primary{appearance:none;-webkit-appearance:none;border:1px solid transparent;cursor:pointer}.btn-ghost{appearance:none;-webkit-appearance:none;cursor:pointer}
.hero-visual .device-tv .screen{overflow:hidden;background:var(--bg,#07141c);display:flex;flex-direction:column;padding:2.1% 2.2%;gap:3%;}
.mini-appbar{height:9%;min-height:22px;display:flex;align-items:center;gap:8px;color:var(--text,#f1f7fa);font-size:clamp(8px,.75vw,13px);border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:1%;}
.mini-appbar img{width:clamp(17px,2vw,30px);height:clamp(17px,2vw,30px);object-fit:contain;border-radius:7px}.mini-appbar span{margin-left:auto;display:flex;gap:12px;color:var(--muted,#9ab0bd)}
.mini-layout{display:flex;gap:2.2%;min-height:0;flex:1}.mini-sidebar{width:4%;display:flex;flex-direction:column;align-items:center;gap:13%;padding-top:3%;color:var(--muted,#90a5b0);font-size:clamp(9px,.9vw,15px)}.mini-sidebar .active{color:var(--accent)}
.mini-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:4%}.mini-heading{display:flex;align-items:center;justify-content:space-between;color:var(--muted,#9ab0bd);font-size:clamp(7px,.68vw,11px)}.mini-heading span{letter-spacing:.16em;color:var(--accent)}.mini-heading b{color:var(--text,#f1f7fa);font-size:1.35em}
.mini-feature{display:grid;grid-template-columns:1.35fr 1fr;gap:2.4%;min-height:0;flex:1}.mini-poster{position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.72),rgba(5,17,24,.95));background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:space-between;padding:3%;color:white}.mini-poster>span,.phone-poster>span{align-self:flex-start;border-radius:999px;background:#f04467;color:#fff;padding:4px 8px;font-size:clamp(6px,.6vw,10px);font-weight:700;letter-spacing:.08em}.mini-poster>div{display:flex;flex-direction:column;gap:3px}.mini-poster small{font-size:clamp(6px,.55vw,9px);letter-spacing:.12em;opacity:.78}.mini-poster strong{font-size:clamp(10px,1.1vw,18px)}
.mini-channel-list{display:flex;flex-direction:column;gap:7%;justify-content:center}.mini-channel{min-height:25%;display:flex;align-items:center;gap:8px;padding:2.5% 3%;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.045);color:var(--accent);font-size:clamp(10px,1.1vw,17px)}.mini-channel.selected{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.13)}.mini-channel img{width:clamp(19px,2vw,30px);height:clamp(19px,2vw,30px);object-fit:contain;border-radius:6px}.mini-channel span{display:flex;flex-direction:column;gap:2px;color:var(--text,#eef7fb);min-width:0}.mini-channel b{font-size:clamp(7px,.68vw,11px);white-space:nowrap}.mini-channel small{font-size:clamp(6px,.56vw,9px);color:var(--muted,#9ab0bd)}.mini-channel>i:last-child{margin-left:auto}.mini-rail{display:flex;align-items:center;gap:5%;font-size:clamp(6px,.62vw,10px);color:var(--muted,#9ab0bd);padding:1% 0}.mini-rail b{color:var(--text,#eef7fb);font-size:1.12em}
.device-phone .screen{overflow:hidden;background:var(--bg,#07141c);padding:8% 7% 5%;display:flex;flex-direction:column;color:var(--text,#eef7fb)}.phone-status{display:flex;gap:5px;justify-content:flex-end;align-items:center;font-size:7px;color:var(--muted,#9ab0bd)}.phone-status span{margin-right:auto}.phone-brand{display:flex;align-items:center;gap:6px;margin:10% 0 7%;font-size:9px}.phone-brand img{width:18px;height:18px;border-radius:5px;object-fit:contain}.phone-brand i{margin-left:auto;color:var(--accent)}.phone-poster{height:35%;min-height:65px;border-radius:9px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.68),#07141c);background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8px}.phone-poster>span{font-size:6px;padding:3px 6px}.phone-poster>b{font-size:9px}.phone-poster>small{font-size:6px;color:#d2e0e6}.phone-section{display:flex;flex-direction:column;gap:7px;margin-top:10%;font-size:8px}.phone-card{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:7px;color:var(--accent)}.phone-card span{display:flex;flex-direction:column;gap:2px;color:var(--text)}.phone-card span b{font-size:7px}.phone-card small{font-size:6px;color:var(--muted,#9ab0bd)}.phone-nav{margin-top:auto;display:flex;justify-content:space-around;padding-top:8px;color:var(--muted,#9ab0bd);font-size:10px;border-top:1px solid rgba(255,255,255,.08)}.phone-nav i:first-child{color:var(--accent)}
@media(max-width:700px){.land-nav button{padding:8px 10px;font-size:.8rem}.mini-channel-list{gap:4%}.mini-channel{padding:2%}.hero-visual .device-phone{transform:scale(.9);transform-origin:bottom left}}

/* Portada refinada: vista móvil limpia, reloj en vivo y alineación consistente. */
.device-phone .screen{padding:0;display:grid;place-items:center;overflow:hidden;background:var(--bg,#07141c);}
.phone-center-logo{display:block;width:62%;height:38%;max-width:110px;max-height:110px;object-fit:contain;object-position:center;filter:drop-shadow(0 8px 20px rgba(0,0,0,.3));}
.boot.boot-waiting{display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;}
.boot.boot-waiting .boot-msg{position:static;max-width:28rem;margin:0;color:var(--muted);font-size:1rem;line-height:1.55;}
.mini-appbar .mini-clock{margin-left:auto;display:flex;align-items:center;gap:7px;color:var(--text,#eef7fb);font-size:clamp(9px,.9vw,14px);font-variant-numeric:tabular-nums;white-space:nowrap;}
.mini-clock i{color:var(--accent);}
.mini-heading span{display:flex;align-items:center;gap:7px;}
.mini-live-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(var(--live-rgb),.13);}
.land-foot{justify-content:center;text-align:center;}
.public-plan-copy{text-align:center;align-items:center;}
.public-plan-copy h3,.public-plan-copy p,.public-plan-price,.public-plan-copy .plan-period{text-align:center;}
.public-plan-copy p{max-width:38ch;}
@media(max-width:600px){
  .land-top{display:grid;grid-template-columns:1fr;justify-items:center;gap:8px;}
  .land-top .brand-lockup{justify-content:center;}
  .land-top .land-nav{width:100%;margin:0;justify-content:center;gap:10px;}
  .land-nav button{padding:9px 12px;font-size:.82rem;}
  .land-main{padding-top:112px;}
  .hero{justify-items:center;text-align:center;}
  .hero-copy{width:100%;display:flex;flex-direction:column;align-items:center;}
  .hero-title,.hero-sub{text-align:center;}
  .feature-list,.hero-actions{justify-content:center;}
  .feature-list li{justify-content:center;text-align:center;}
  .inapp-warning{justify-items:center;text-align:center;}
  .install-head{text-align:center;}
  .public-plans{justify-items:center;}
  .public-plan-card{width:min(100%,420px);}
  .install-grid{justify-items:center;}
  .land-foot{width:100%;padding-inline:16px;}
}

/* Parental panel: translucent, theme-aware, readable on televisions. */
.pc-modal { background: rgba(3,8,14,.48); backdrop-filter: blur(16px); }
.pc-card { background: linear-gradient(145deg,rgba(var(--bg-rgb),.84),rgba(var(--bg-rgb),.68)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); }
.pc-row { background: rgba(255,255,255,.045); min-height: 48px; }
.pc-row:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; background: rgba(var(--accent-rgb),.16); }
.pc-name { flex-wrap: wrap; white-space: normal; gap: 4px 10px; }
html.dev-tv .pc-modal { background: rgba(3,8,14,.55); }
#osdTitle, #osd .osd-meta, #osdChannel { display: none !important; }
#osdCat { font-size: 0; }
#osdCat::before { content: 'EN VIVO'; display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid rgba(var(--accent-rgb),.72); border-radius: 999px; background: rgba(var(--accent-rgb),.24); box-shadow: 0 0 20px rgba(var(--accent-rgb),.24); color: #fff; font-size: 12px; letter-spacing: .12em; }
#osdCat::after { display: none !important; }

#osd .osd-main { display: none !important; }