/* Pantalla del día para TV: fondo oscuro, letra grande, todo el día visible sin scroll. */
:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #f2f4f7;
  --muted: #8d95a3;
  --ok: #3ccf8e;
  --now: #ff5a4f;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
body.sin-cursor, body.sin-cursor * { cursor: none !important; }

.tv { height: 100vh; display: flex; flex-direction: column; padding: 1.6vh 1.4vw; gap: 1.2vh; }

/* Cabecera */
.tv-cab { display: flex; align-items: center; gap: 1.2vw; flex: 0 0 auto; }
.tv-logos { display: flex; gap: .5vw; }
.tv-logos img, .tv-logos .lt { width: 5.2vh; height: 5.2vh; border-radius: 50%; background: #fff; object-fit: contain; }
.tv-logos .lt { display: grid; place-items: center; background: #111; color: #fff; font: 400 2vh var(--serif); border: 1px solid #444; overflow: hidden; }
.tv-titulo { flex: 1; min-width: 0; }
.tv-titulo h1 { margin: 0; font: 400 3.6vh/1.1 var(--serif); letter-spacing: .01em; }
.tv-titulo p { margin: .3vh 0 0; color: var(--muted); font-size: 1.7vh; }
.tv-reloj { font: 800 6vh/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tv-acc { display: flex; gap: .6vw; }
.tv-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .9vh 1.2vw; font: 600 1.5vh var(--sans); cursor: pointer; }
.tv-btn:hover { border-color: var(--muted); }
:fullscreen .tv-acc { display: none; }

.tv-leyenda { display: flex; gap: 1.2vw; align-items: center; color: var(--muted); font-size: 1.6vh; flex: 0 0 auto; flex-wrap: wrap; }
.tv-leyenda i { filter: brightness(1.6); display: inline-block; width: 1.4vh; height: 1.4vh; border-radius: 4px; margin-right: .4vw; vertical-align: -.15vh; }

/* Grilla */
.tv-grilla { flex: 1 1 auto; min-height: 0; display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tv-tiempos { flex: 0 0 5vw; position: relative; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.tv-col { flex: 1 1 0; min-width: 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.tv-col:last-child { border-right: 0; }
.tv-colcab { flex: 0 0 auto; height: 7.6vh; padding: .8vh .8vw; border-bottom: 1px solid var(--line); background: var(--panel-2); display: flex; flex-direction: column; justify-content: center; gap: .3vh; }
.tv-colcab strong { font-size: 2.1vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-colcab span { color: var(--muted); font-size: 1.45vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-colcab .pts { display: inline-flex; gap: .3vw; margin-right: .4vw; }
.tv-colcab .pts i { width: 1vh; height: 1vh; border-radius: 50%; display: inline-block; }
.tv-colcab.ocupado { box-shadow: inset 0 -3px 0 var(--now); }
.tv-colcab.libre-ahora { box-shadow: inset 0 -3px 0 var(--ok); }
.tv-cuerpo { position: relative; flex: 1 1 auto; overflow: hidden;
  background: repeating-linear-gradient(135deg, #14171d 0 8px, #12141a 8px 16px); }
.tv-tiempos .tv-cuerpo { background: none; }
.tv-tiempos .tv-colcab { background: var(--panel-2); }
.tv-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.tv-linea.media { border-top-style: dashed; opacity: .55; }
.tv-hora { position: absolute; right: .6vw; transform: translateY(-50%); font-size: 1.6vh; color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-hora.media { font-size: 1.2vh; opacity: .7; }
.tv-turno { position: absolute; left: 0; right: 0; background: var(--panel); }
.tv-res, .tv-bloq { position: absolute; left: .35vw; right: .35vw; border-radius: 8px; padding: .5vh .6vw; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; }
.tv-res { background: color-mix(in srgb, var(--c) 55%, #1b1e25); border-left: .45vw solid color-mix(in srgb, var(--c) 55%, #fff); }
.tv-res.corta { flex-direction: row; align-items: center; gap: .5vw; padding-top: 0; padding-bottom: 0; }
.tv-res.corta b { font-size: 1.65vh; flex: 0 1 auto; }
.tv-res.corta small { font-size: 1.3vh; flex: 1 1 0; min-width: 0; }
.tv-res.corta.ahora::after { display: none; }
.tv-res b { font-size: 1.9vh; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-res small { font-size: 1.45vh; color: #c9ced8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-res.pasada { opacity: .38; }
.tv-res.ahora { box-shadow: 0 0 0 2px var(--now), 0 0 18px rgba(255, 90, 79, .35); }
.tv-res.ahora::after { content: "EN ATENCIÓN"; position: absolute; top: .4vh; right: .5vw; font: 800 1.05vh var(--sans); letter-spacing: .08em; color: var(--now); }
.tv-bloq { background: repeating-linear-gradient(135deg, #262a33 0 6px, #20242c 6px 12px); border: 1px dashed #3a404c; color: var(--muted); font-size: 1.4vh; }
.tv-ahora { position: absolute; left: 0; right: 0; border-top: 3px solid var(--now); z-index: 3; pointer-events: none; }
.tv-ahora::before { content: ""; position: absolute; left: -6px; top: -7px; width: 11px; height: 11px; border-radius: 50%; background: var(--now); }
.tv-tiempos .tv-ahora span { position: absolute; right: .4vw; top: -1.1vh; background: var(--now); color: #fff; font: 800 1.35vh var(--sans); padding: .15vh .35vw; border-radius: 4px; }

/* Pie */
.tv-pie { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 1vw; }
.tv-caja { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1vh 1vw; min-width: 0; }
.tv-caja h2 { margin: 0 0 .7vh; font: 700 1.4vh var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tv-chips { display: flex; flex-wrap: wrap; gap: .5vw; }
.tv-chip { background: color-mix(in srgb, var(--ok) 16%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); color: #c9f5e0; border-radius: 999px; padding: .5vh .9vw; font: 600 1.75vh var(--sans); }
.tv-prox { display: flex; gap: 1.4vw; overflow: hidden; white-space: nowrap; font-size: 1.8vh; }
.tv-prox span b { font-variant-numeric: tabular-nums; margin-right: .4vw; }
.tv-prox span i { font-style: normal; color: var(--muted); }
.tv-vacio { color: var(--muted); font-size: 1.7vh; }

/* Ingreso */
.tv-login { margin: auto; width: min(420px, 90vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.tv-login h1 { margin: 0; font: 400 28px var(--serif); }
.tv-login p { margin: 0; color: var(--muted); }
.tv-login button { background: var(--text); color: var(--bg); border: 0; border-radius: 999px; padding: 12px; font: 700 16px var(--sans); cursor: pointer; }
.tv-error { color: #ff8a80; margin: 0; }
.tv-btn-g { text-align: center; text-decoration: none; font-size: 16px; padding: 12px; }
.tv-aviso { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); background: #3a2a10; color: #ffd28a; border: 1px solid #6b4b14; padding: 6px 14px; border-radius: 999px; font-size: 13px; z-index: 9; }

@media (max-width: 760px) {
  html, body { overflow: auto; }
  .tv { height: auto; min-height: 100vh; }
  .tv-grilla { min-height: 70vh; overflow-x: auto; }
  .tv-col { flex: 0 0 140px; }
  .tv-pie { grid-template-columns: 1fr; }
}