/* Estilos base: móvil primero (maqueta A: rejilla de logos), modo claro y oscuro.
   El acento y el modo por defecto los elige el admin: /theme.css redefine --accent y --default-mode,
   y js/theme.js recalcula los derivados del acento y pone data-theme="light|dark" en <html>.
   Todos los colores de superficie, texto y borde salen de los dos bloques [data-theme]; el único color fijo
   fuera de ellos es el negro de la zona de vídeo (.player), igual en los dos modos. */
:root {
  --accent: #FF0090;
  --default-mode: auto;
  /* Derivados: respaldo en CSS; js/theme.js los sustituye por valores calculados (incluido --on-accent) */
  --accent-hover: color-mix(in srgb, var(--accent) 90%, black);
  --accent-press: color-mix(in srgb, var(--accent) 80%, black);
  --on-accent: white;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --tap: 44px;
}

/* Oscuro (también sin data-theme, por si no corre el script) */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116; --surface: #171b22; --surface-2: #1f242d; --field: #0e1116;
  --text: #e8eaf0; --text-muted: #8b91a0; --border: #2a2f3a;
  --overlay: rgba(14, 17, 22, .96); --shadow: rgba(0, 0, 0, .5);
  --link: color-mix(in srgb, var(--accent) 70%, white);
  --rec: #ff3b30; --err: #ff4d4f; --err-bg: #3a1416; --ok: #3ddc84; --ok-bg: #143a24;
  --toast-bg: #2a2f3a; --toast-text: #e8eaf0; --toast-err-bg: #4a1518;
  --tile-border: transparent; --logo-bg: #ffffff; --logo-bg-dark: #1b1f27; --logo-text: #222222; --cam-bg: #22272f;
  --chip-on-media: rgba(0, 0, 0, .65); --on-media: #ffffff;
  --star-off: rgba(255, 255, 255, .35); --star-on: #ffc531; --star-shadow: #000000;
  --qr-bg: #ffffff; --preview-bg: linear-gradient(135deg, #1d2a40, #40281d);
}

/* Claro: superficies blancas y gris muy claro, texto casi negro, bordes suaves (texto ≥ 4,5:1) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f7; --surface: #ffffff; --surface-2: #eceef2; --field: #ffffff;
  --text: #15181d; --text-muted: #5a6170; --border: #d6dae1;
  --overlay: rgba(244, 245, 247, .96); --shadow: rgba(21, 24, 29, .16);
  --link: color-mix(in srgb, var(--accent) 75%, black);
  --rec: #e5232b; --err: #c62828; --err-bg: #fdecec; --ok: #1b7a3a; --ok-bg: #e4f4e9;
  --toast-bg: #1f242d; --toast-text: #f2f3f5; --toast-err-bg: #9b1c1f;
  --tile-border: #e1e4ea; --logo-bg: #ffffff; --logo-bg-dark: #1b1f27; --logo-text: #222222; --cam-bg: #e2e5ea;
  --chip-on-media: rgba(0, 0, 0, .65); --on-media: #ffffff;
  --star-off: rgba(0, 0, 0, .28); --star-on: #f5a400; --star-shadow: rgba(255, 255, 255, .9);
  --qr-bg: #ffffff; --preview-bg: linear-gradient(135deg, #1d2a40, #40281d); /* imita vídeo: oscuro también en claro */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { overflow-x: hidden; }
[hidden] { display: none !important; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { margin: 0 0 16px; font-size: 1.4rem; }
h2 { font-size: 1.1rem; margin: 20px 0 10px; }
h3 { font-size: 1rem; margin: 16px 0 8px; color: var(--text-muted); font-weight: 600; }

/* ---- Login (tarjeta centrada) ---- */
.center { min-height: 100dvh; display: grid; place-items: center; padding: max(16px, var(--sat)) 16px max(16px, var(--sab)); }
.card { width: 100%; max-width: 360px; background: var(--surface); border-radius: 14px; padding: 24px; }
.card label { display: block; margin: 12px 0 4px; color: var(--text-muted); font-size: .85rem; }
.card input { width: 100%; }
.card button { width: 100%; margin-top: 18px; }
.error { color: var(--err); min-height: 1.4em; margin: 12px 0 0; font-size: .9rem; }

/* ---- Controles genéricos ---- */
input, select, textarea {
  min-height: var(--tap); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--field); color: var(--text); font: inherit; font-size: 1rem; max-width: 100%;
}
textarea { width: 100%; min-height: 120px; font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
button, .btn {
  min-height: var(--tap); min-width: var(--tap); padding: 10px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
/* :where() deja la especificidad mínima: .tab, .chip, .ghost, .icon y .danger conservan su fondo */
:where(button, .btn):hover { background: var(--accent-hover); }
:where(button, .btn):active { background: var(--accent-press); }
button:disabled { opacity: .6; }
button.ghost, .btn.ghost { background: var(--surface-2); color: var(--text); font-weight: 500; }
button.icon { background: transparent; padding: 0; font-size: 1.3rem; color: var(--text); }
button.danger { background: var(--err-bg); color: var(--err); }
button.small { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
input[type=checkbox] { min-height: auto; width: 22px; height: 22px; accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); padding: 0; border: 0; background: transparent; min-height: var(--tap); }
label.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); }
.muted { color: var(--text-muted); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ---- Barra superior y pestañas ---- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--overlay); backdrop-filter: blur(8px);
  padding: var(--sat) calc(12px + var(--sar)) 0 calc(12px + var(--sal));
}
.topbar .bar { display: flex; align-items: center; gap: 8px; height: 52px; }
.topbar .back {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap, 44px); min-width: 44px; padding: 0 10px 0 4px;
  color: var(--text); font-weight: 600; text-decoration: none; border-radius: 10px;
}
.topbar .back span { color: var(--accent); font-size: 1.4rem; line-height: 1; }
.topbar .back:active { background: var(--surface-2); }
.brand { font-weight: 800; font-size: 1.25rem; letter-spacing: .5px; color: var(--accent); margin-right: auto; }
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; background: transparent; color: var(--text-muted); border-radius: 0; font-weight: 600;
  padding: 10px 12px; border-bottom: 3px solid transparent;
}
.tab[aria-selected=true] { color: var(--text); border-bottom-color: var(--accent); }
.searchbar { display: flex; align-items: center; gap: 8px; padding: 6px 0 8px; }
.search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.view-toggle { margin: 0; flex: 0 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#view-toggle button { flex: 0 0 44px; min-width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
#view-toggle svg { width: 20px; height: 20px; fill: currentColor; display: block; }
#view-toggle button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.searchbar input { width: 100%; min-height: var(--tap, 44px); padding-right: 48px; }
.searchbar input::-webkit-search-cancel-button { display: none; }
.searchbar .icon { position: absolute; right: 0; top: 0; width: 44px; height: 44px; min-height: 44px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 10px 0 2px; }
.chips::-webkit-scrollbar { display: none; }
#chips { margin-bottom: 12px; } /* bouquets del deco: aire antes de la lista */
.chip {
  flex: 0 0 auto; background: var(--surface-2); color: var(--text); border-radius: 999px; font-weight: 500;
  padding: 8px 14px; font-size: .9rem; min-height: 40px;
}
.chip[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }

.menu {
  position: absolute; right: calc(8px + var(--sar)); top: calc(52px + var(--sat)); background: var(--surface-2);
  border-radius: 10px; padding: 6px; min-width: 200px; box-shadow: 0 8px 30px var(--shadow); z-index: 30;
}
.menu > button, .menu > a { width: 100%; justify-content: flex-start; background: transparent; color: var(--text); font-weight: 500; }
.menu-label { padding: 6px 12px 4px; font-size: .78rem; }

/* Control segmentado (Tema, Modo por defecto) */
.seg { display: flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; margin: 0 6px 6px; }
.seg button {
  flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: .85rem; font-weight: 500;
  background: transparent; color: var(--text-muted); border-radius: 7px;
}
.seg button[aria-checked=true] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.panel .seg { margin: 0; max-width: 360px; }

/* ---- Rejilla de logos ---- */
main.app { padding: 12px calc(12px + var(--sar)) calc(24px + var(--sab)) calc(12px + var(--sal)); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px;
  background: var(--surface); border: 1px solid var(--tile-border); border-radius: 12px; color: var(--text); font-weight: 500; text-align: left;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; min-width: 0;
}
.tile:active { transform: scale(.97); }
.tile .logo {
  aspect-ratio: 16 / 10; border-radius: 8px; background: var(--logo-bg) center / contain no-repeat;
  display: grid; place-items: center; overflow: hidden; color: var(--logo-text); font-weight: 800; font-size: 1.1rem;
}
.tile .logo.cam { background: var(--cam-bg); color: var(--text-muted); font-size: 1.6rem; }
.tile .logo.cam { position: relative; }
.tile .logo.cam .snap { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; }
.tile .logo.cam.has-snap .snap { opacity: 1; }
.tile .logo.cam.has-snap .ph { visibility: hidden; }
.tile .name { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .now { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.tile .star {
  position: absolute; right: 2px; top: 2px; width: var(--tap); height: var(--tap); min-width: 0; padding: 0;
  background: transparent; color: var(--star-off); font-size: 1.25rem; text-shadow: 0 1px 3px var(--star-shadow);
}
.tile .star[aria-pressed=true] { color: var(--star-on); }
.empty { color: var(--text-muted); text-align: center; padding: 40px 12px; }

/* ---- Aviso (toast) y banner de instalación ---- */
.toast {
  position: fixed; left: 50%; bottom: calc(20px + var(--sab)); transform: translateX(-50%); z-index: 100;
  background: var(--toast-bg); color: var(--toast-text); padding: 12px 16px; border-radius: 10px; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 30px var(--shadow); font-size: .95rem; transition: opacity .3s;
  pointer-events: none; /* el aviso no tiene nada que pulsar: nunca tapa los toques */
}
/* Tras desvanecerse deja de ocupar sitio para el lector de pantalla y para los toques */
.toast.gone { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.toast.err { background: var(--toast-err-bg); }
.banner {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border-left: 4px solid var(--accent);
  padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; font-size: .92rem;
}
.banner p { margin: 0; flex: 1 1 200px; }

/* ---- Hojas (reproductor, guía, grabaciones) ---- */
.sheet {
  position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; overflow-x: hidden;
  padding-bottom: var(--sab);
}
.sheet-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; background: var(--bg);
  padding: var(--sat) calc(8px + var(--sar)) 0 calc(8px + var(--sal)); height: calc(52px + var(--sat));
}
.sheet-head .title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-body { padding: 8px calc(12px + var(--sar)) 24px calc(12px + var(--sal)); }

/* ---- Reproductor ---- */
.player { position: relative; background: #000; width: 100%; aspect-ratio: 16 / 9; max-height: 70dvh; overflow: hidden; }
.player video { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
.player .mosca-overlay { position: absolute; z-index: 1; pointer-events: none; user-select: none; width: auto; }
.player .gesture { position: absolute; inset: 0; touch-action: none; z-index: 2; }
.player .osd {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none;
  background: rgba(0, 0, 0, .7); color: #fff; border-radius: 14px; padding: 12px 18px; font-size: 1.3rem; font-weight: 700;
  opacity: 0; transition: opacity .3s;
}
.player .osd.show { opacity: 1; transition: none; }
.player .spinner { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: #b9bec8; pointer-events: none; padding: 0 16px 56px; text-align: center; }
/* Barra de arranque por etapas, justo bajo el texto del spinner (centrado 28px por encima del medio) */
.player .loadbar {
  position: absolute; left: 50%; top: calc(50% - 6px); transform: translateX(-50%); z-index: 1; pointer-events: none;
  width: min(240px, 60%); height: 4px; background: rgba(255, 255, 255, .15); border-radius: 2px; overflow: hidden;
}
.player .loadbar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease-out; }
.player .retry { position: absolute; left: 50%; top: calc(50% + 4px); transform: translateX(-50%); z-index: 5; }
.player .controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px calc(8px + var(--sar)) 6px calc(8px + var(--sal)); background: linear-gradient(transparent, rgba(0, 0, 0, .85));
  transition: opacity .25s; color: #fff;
}
.player.hide-ui .controls { opacity: 0; pointer-events: none; }
/* Dentro del negro del vídeo todo va en blanco fijo, también en tema claro (--text sería casi negro) */
.player .controls button.icon {
  width: var(--tap); height: var(--tap); color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.player .controls label { display: flex; align-items: center; gap: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); font-size: 1rem; flex: 1 1 90px; min-width: 90px; max-width: 180px; }
.player .controls input[type=range] { width: 100%; }
/* Pantalla completa siempre en la esquina inferior derecha, por anchos que sean los deslizadores */
.player .controls #btn-fs { margin-left: auto; }
.player:fullscreen { max-height: none; aspect-ratio: auto; height: 100%; }
.player:-webkit-full-screen { max-height: none; aspect-ratio: auto; height: 100%; }
.options { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; }
.options .row > span { color: var(--text-muted); font-size: .85rem; min-width: 64px; }
.nownext { background: var(--surface); border-radius: 12px; padding: 12px; margin: 4px 0 12px; }
.nownext .when { color: var(--text-muted); font-size: .8rem; }
.nownext .t { font-weight: 600; }
.progress { height: 4px; background: var(--border); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); }

/* ---- Listas (guía, grabaciones, admin) ---- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.item .grow > * { overflow-wrap: anywhere; }
.item .meta { color: var(--text-muted); font-size: .82rem; }
.item.live { border-left: 4px solid var(--accent); }
.badge { display: inline-block; font-size: .72rem; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--text-muted); }
.badge.live { background: var(--accent); color: var(--on-accent); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.err { background: var(--err-bg); color: var(--err); }
.day { position: sticky; top: calc(52px + var(--sat)); background: var(--bg); padding: 6px 0; color: var(--text-muted); font-size: .85rem; font-weight: 600; z-index: 1; }

/* ---- Admin ---- */
.panel { background: var(--surface); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.panel h2 { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { color: var(--text-muted); font-size: .85rem; }
.field input:not([type=checkbox]), .field select { width: 100%; }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table td, .table th { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.table th { color: var(--text-muted); font-weight: 600; font-size: .8rem; }
.scroll-x { overflow-x: auto; }
.copy { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.copy code { flex: 1; min-width: 0; background: var(--bg); border-radius: 8px; padding: 10px; font-size: .78rem; overflow-wrap: anywhere; }
.qr { background: var(--qr-bg); padding: 10px; border-radius: 10px; width: 220px; max-width: 100%; display: block; margin: 8px 0; }
.steps li { margin-bottom: 6px; }
/* Configurar Kodi: campos tal como se ven en el add-on (nombre → valor a escribir) */
.kodi-form { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 6px 14px; align-items: center; margin: 4px 0 12px; }
.kodi-form .kodi-label { font-weight: 600; font-size: .9rem; }
.kodi-form .kodi-value { min-width: 0; }
.kodi-form .copy { margin-bottom: 0; }
.kodi-form .kodi-hint { font-size: .78rem; margin-top: 2px; }
.kodi-secret { font-style: italic; color: var(--text-muted); }
@media (max-width: 560px) { .kodi-form { grid-template-columns: 1fr; gap: 2px; } .kodi-form .kodi-label { margin-top: 8px; } }
.mosca-preview { position: relative; width: 100%; max-width: 480px; margin-bottom: 8px; aspect-ratio: 16 / 9; background: var(--preview-bg); border-radius: 8px; overflow: hidden; }
/* Posición y tamaño los pone admin-mosca.js en % (escala 720p: 48 px de alto sobre 720) */
.mosca-preview img { position: absolute; width: auto; }
.corner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.corner-grid button { background: var(--surface-2); color: var(--text); font-weight: 500; }
.corner-grid button[aria-checked=true] { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.mosca-margin { min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
pre.status { background: var(--bg); border-radius: 8px; padding: 10px; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Logos claros con transparencia (blancos, pensados para fondo oscuro): el servidor los marca con
   logoTone 'light' y llevan fondo oscuro en los dos temas. Un poco de aire para que no toquen el borde. */
.tile .logo { background-origin: content-box; padding: 6px; }
.tile .logo.on-dark { background-color: var(--logo-bg-dark); }

/* ---- Vista en lista ---- */
.grid.list { display: flex; flex-direction: column; gap: 8px; }
.grid.list .tile { flex-direction: row; align-items: center; gap: 10px; min-height: 60px; padding: 6px 48px 6px 8px; width: 100%; }
.grid.list .tile .logo { flex: 0 0 72px; width: 72px; aspect-ratio: 16 / 10; }
.grid.list .tile .star { top: 50%; transform: translateY(-50%); }
.grid.list .tile .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.grid.list .tile .info > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid.list .tile .name { font-size: .92rem; }
.grid.list .tile .now, .grid.list .tile .next { font-size: .75rem; color: var(--text-muted); }
.grid.list .tile .live { font-size: .75rem; color: var(--accent); }
.grid.list .tile .bq { font-size: .68rem; color: var(--text-muted); opacity: .8; }
.grid.list .tile .progress { height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.grid.list .tile .progress i { display: block; height: 100%; background: var(--accent); }

/* ---- Guía TV (rejilla): un único contenedor con desplazamiento en los dos ejes; regla y columna de
   canales fijas con position: sticky (sin JS en el desplazamiento); bloques en posición absoluta ---- */
.sheet.tvguide { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.tvguide .sheet-head { flex: 0 0 auto; position: static; }
.tvguide .sheet-head .title { line-height: 1.2; }
.tvguide .sheet-head .sub { color: var(--text-muted); font-size: .78rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.tvguide-days { flex: 0 0 auto; padding: 2px calc(12px + var(--sar)) 8px calc(12px + var(--sal)); }
.tvguide-src { flex: 0 0 auto; padding: 2px calc(12px + var(--sar)) 4px calc(12px + var(--sal)); }
.tvguide-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tvguide-body[hidden] { display: none; }
.tvguide-search { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; padding: 2px calc(12px + var(--sar)) 8px calc(12px + var(--sal)); }
.tvguide-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; }
.tvguide-search .icon { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
.tvguide-search [hidden] { display: none; }
.tvguide-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 calc(12px + var(--sar)) 12px calc(12px + var(--sal)); display: flex; flex-direction: column; gap: 8px; }
.tvguide-results[hidden] { display: none; }
.sr-row { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; width: 100%; min-height: 44px; text-align: left; background: var(--surface); color: var(--text); border: 1px solid var(--tile-border); border-radius: 10px; padding: 10px 12px; font-weight: 500; }
.sr-row:active { background: var(--surface-2); }
.sr-row .t { display: flex; gap: 8px; align-items: center; font-weight: 600; overflow-wrap: anywhere; }
.sr-row .m { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sr-row .s { font-size: .82rem; color: var(--text-muted); overflow-wrap: anywhere; font-weight: 400; }
.prog-repeats { margin-top: 16px; }
.prog-repeats h3 { margin: 0 0 6px; font-size: .95rem; }
.rep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rep-row { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.rep-row .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.rep-row .when { font-weight: 600; font-variant-numeric: tabular-nums; }
.rep-row .chn { display: flex; gap: 6px; align-items: center; color: var(--text-muted); flex-wrap: wrap; }
.rep-row img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
.rep-row button { flex: 0 0 auto; }
.epg-scroll {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border); padding-bottom: var(--sab);
}
.epg-canvas { position: relative; }
.epg-head { position: sticky; top: 0; z-index: 3; display: flex; height: 32px; background: var(--bg); border-bottom: 1px solid var(--border); }
.epg-corner {
  position: sticky; left: 0; z-index: 4; flex: 0 0 108px; display: flex; align-items: center; padding: 0 8px;
  background: var(--bg); border-right: 1px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--accent);
}
.epg-ruler { position: relative; flex: 0 0 auto; overflow: hidden; }
.epg-tick {
  position: absolute; top: 0; height: 100%; padding-left: 4px; border-left: 1px solid var(--border);
  font-size: .72rem; line-height: 32px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.epg-now-mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); z-index: 1; }
.epg-body { position: relative; }
.epg-chans { position: sticky; left: 0; z-index: 2; height: 100%; background: var(--bg); border-right: 1px solid var(--border); }
.epg-ch {
  position: absolute; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; -webkit-user-select: none;
}
.epg-ch:active { background: var(--surface-2); }
.epg-ch .logo {
  flex: 0 0 44px; height: 30px; border-radius: 6px; background: var(--logo-bg) center / contain no-repeat; background-origin: content-box;
  padding: 3px; display: grid; place-items: center; overflow: hidden; color: var(--logo-text); font-weight: 800; font-size: .7rem;
}
.epg-ch .logo.on-dark { background-color: var(--logo-bg-dark); }
.epg-ch .meta { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.epg-ch .name { font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg-progs { position: absolute; top: 0; height: 100%; }
.epg-prog {
  position: absolute; height: 52px; margin-top: 2px; padding: 4px 6px; border-radius: 6px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 1px; contain: layout paint;
  background: var(--surface); border: 1px solid var(--tile-border); color: var(--text); user-select: none; -webkit-user-select: none;
}
.epg-prog:active { background: var(--surface-2); }
.epg-prog .t { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.epg-prog .m { font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.epg-prog.past { color: var(--text-muted); }
.epg-prog.live { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border-color: var(--accent); }
.epg-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); z-index: 1; pointer-events: none; }

/* Ficha de un programa: hoja inferior sobre la rejilla */
.sheet.modal { background: var(--shadow); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-bottom: 0; }
.modal-card {
  width: 100%; max-width: 560px; max-height: 80dvh; overflow-y: auto; background: var(--surface); color: var(--text);
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px var(--shadow);
  padding: 18px calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal));
}
.prog-title { margin: 0 0 6px; font-size: 1.15rem; overflow-wrap: anywhere; }
.prog-when { display: flex; gap: 8px; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.prog-ch { font-size: .88rem; margin-top: 2px; }
.prog-cat { margin-top: 8px; }
.prog-cat:empty { display: none; }
.prog-desc { margin: 10px 0 0; font-size: .92rem; overflow-wrap: anywhere; white-space: pre-line; }
.prog-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.prog-actions button { flex: 1 1 100px; }
.series-form { display: flex; flex-direction: column; gap: 6px; }
.series-form > label:not(.check) { font-size: .88rem; font-weight: 600; margin-top: 4px; }
.series-form input[type=text] { width: 100%; }
.series-form .hint { margin: 0; font-size: .85rem; }
.series-count { margin: 6px 0 0; font-weight: 600; }
/* Canal cifrado (solo se ve en el deco de Movistar) */
.lock { margin-right: 4px; font-size: .85em; }

/* Icono de grabar: círculo rojo de "récord" */
.rec-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--rec); vertical-align: -.05em; margin-right: .4em; flex: none; }
.rec-dot.big { width: 1em; height: 1em; margin-right: 0; vertical-align: middle; }
/* Grabando ahora: el punto rojo del botón de grabaciones parpadea (sin animación si se pidió menos movimiento) */
@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
#btn-rec.recording .rec-dot { animation: rec-blink 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #btn-rec.recording .rec-dot { animation: none; box-shadow: 0 0 0 3px var(--rec); } }
.version { font-size: .75rem; margin-right: .5rem; }