:root {
  --bg: #000;
  --head-corner: #271c5c;
  --accent: #00ffc6;
  --head-time: #00ffc6;
  --row-a: #6551a3;
  --row-b: #2f2169;
  --line: rgba(255, 255, 255, .6);
  --chan-w: 372px;
  --head-h: 84px;
  --row-h: 139px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); cursor: none; }
body { font-family: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif; color: #fff; }

#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 0 0; background: var(--bg); overflow: hidden; }

#logo { position: absolute; left: 780px; top: 60px; width: 480px; height: 320px; object-fit: contain; object-position: center; }

#place { position: absolute; left: 24px; top: 18px; width: 700px; height: 146px; overflow: hidden; font-family: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
#place .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; white-space: nowrap; font-size: 104px; line-height: 1.3; padding-top: 10px; letter-spacing: 2px; will-change: transform; }

#datetime { position: absolute; left: 24px; top: 168px; width: 700px; height: 210px; display: flex; align-items: baseline; white-space: nowrap; font-family: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; line-height: 1; letter-spacing: 2px; }
#dt-date { font-size: 60px; margin-right: 22px; opacity: .9; }
#dt-time { font-size: 190px; color: var(--accent); }
#dt-ampm { font-size: 70px; color: var(--accent); margin-left: 4px; }

#ad { position: absolute; left: 1290px; top: 40px; width: 610px; height: 343px; background: #000; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
#ad[hidden] { display: none; }
#ad .layer { position: absolute; inset: 0; width: 100%; height: 100%; }
#ad iframe, #ad img.layer, #ad video.layer { width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
#ad .qrslide { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 18px 24px; background: #000; }
#ad .qrslide > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; font-family: "Bebas Neue", "Oswald", Impact, "Arial Narrow", sans-serif; text-transform: uppercase; }
#ad .qrslide b { font-size: 56px; line-height: .95; font-weight: 400; color: #00ffc6; letter-spacing: 1px; }
#ad .qrslide span { font-size: 38px; line-height: 1; letter-spacing: 1px; }
#ad .qrslide small { font-size: 26px; color: #9aa1b2; letter-spacing: 1px; text-transform: none; font-family: "Barlow Condensed", Arial, sans-serif; }
#ad .qrslide img { width: 270px; height: 270px; border-radius: 12px; flex: none; }
#ad .fade { opacity: 0; transition: opacity .5s; }
#ad .fade.in { opacity: 1; }

#guide { position: absolute; left: 20px; top: 428px; width: 1880px; height: calc(var(--head-h) + 4 * var(--row-h)); border: 2px solid #fff; background: var(--row-b); }
#head { display: flex; height: var(--head-h); }
.corner { width: var(--chan-w); background: var(--head-corner); }
#head-view { position: relative; flex: 1; overflow: hidden; background: var(--head-time); }
.head-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.head-cells div { display: flex; align-items: flex-end; padding: 0 0 6px 10px; font-size: 62px; font-weight: 600; line-height: 1; color: #000; border-left: 2px solid var(--line); }
.head-cells div:first-child { border-left: 0; }

#rows-view { position: relative; height: calc(4 * var(--row-h)); overflow: hidden; }
.page { position: absolute; inset: 0; will-change: transform; }
.row { position: absolute; left: 0; right: 0; height: var(--row-h); display: flex; }
.row:nth-child(1) { top: 0; }
.row:nth-child(2) { top: var(--row-h); }
.row:nth-child(3) { top: calc(2 * var(--row-h)); }
.row:nth-child(4) { top: calc(3 * var(--row-h)); }
.row:nth-child(odd) { background: var(--row-a); }
.row:nth-child(even) { background: var(--row-b); }
.chan { width: var(--chan-w); padding: 8px; display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--line); }
.chan .logo { flex: none; width: 117px; height: 117px; border-radius: 8px; background: rgba(0, 0, 0, .38); display: flex; align-items: center; justify-content: center; padding: 4px; }
.chan .logo img { width: 100%; height: 100%; object-fit: contain; }
.chan .logo.empty { font-size: 44px; font-weight: 600; opacity: .55; letter-spacing: 1px; }
.chan .label { flex: 1; min-width: 0; text-transform: uppercase; }
.chan .num { color: var(--accent); font-size: 64px; font-weight: 600; line-height: .95; }
.chan .name { font-size: 40px; font-weight: 500; line-height: .95; margin-top: 2px; overflow-wrap: break-word; }
.pw { position: relative; flex: 1; overflow: hidden; border-bottom: 2px solid var(--line); }
.progs { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(120, 1fr); }
.cell { position: relative; overflow: hidden; padding: 6px 10px; border-left: 2px solid var(--line); display: flex; align-items: flex-start; }
.cell .t { display: block; max-width: 100%; font-weight: 500; font-size: 60px; line-height: 1; text-transform: uppercase; letter-spacing: .3px; word-break: normal; overflow-wrap: break-word; }
/* programa al aire: fondo un poco más claro + barra verde con el avance real del programa */
.cell.live { background: rgba(255, 255, 255, .13); }
.cell.live::after { content: ""; position: absolute; left: 0; bottom: 0; height: 7px; width: calc(var(--p, 0) * 1%); background: var(--accent); }
.cell.tiny { padding: 6px 4px; }
.cell.tiny .t { display: none; }
.cell.tiny::before { content: "…"; color: rgba(255, 255, 255, .55); font-size: 34px; line-height: 1; font-weight: 600; }
.cell.local .t { font-style: italic; font-weight: 400; opacity: .85; }
.cell.cont-r .t::after { content: " ▶"; font-size: .6em; vertical-align: .15em; opacity: .7; }

/* línea vertical de «ahora» que cruza toda la guía */
#nowline { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--accent); box-shadow: 0 0 12px rgba(0, 255, 198, .8); z-index: 5; pointer-events: none; }
#nowmark { position: absolute; bottom: -1px; width: 0; height: 0; margin-left: -15px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 20px solid var(--head-corner); z-index: 6; pointer-events: none; }

#stale { position: absolute; left: 24px; bottom: 6px; font-size: 22px; color: #ffb000; }