/* Pantalla de TV del tour. Una sola vista, sin scroll, que escala con el alto
   de la pantalla (todo en vh/vw): se ve igual en 1080p, 720p o vertical. Fondo
   oscuro para que se lea desde lejos; cada torneo conserva su color. */

html, body.tv-body { margin: 0; height: 100%; overflow: hidden; background: #0b1220; }
body.tv-body.tr { margin: 0; color: #fff; font-size: clamp(11px, 1.9vh, 34px); font-family: "Inter", system-ui, sans-serif; }
.tv, .tv * { box-sizing: border-box; }
.tv em { font-style: normal; opacity: .55; font-weight: 600; font-size: .78em; text-transform: uppercase; letter-spacing: .08em; padding: 0 .25em; }

/* Los tonos oscuros de cada color (para el fondo de las tarjetas). */
.tv .tr-c-blue   { --cd: #14275a; } .tv .tr-c-orange { --cd: #5a2508; } .tv .tr-c-green { --cd: #0e3b1f; }
.tv .tr-c-purple { --cd: #31195f; } .tv .tr-c-pink   { --cd: #5e1236; } .tv .tr-c-teal  { --cd: #0b3b37; }
.tv .tr-c-amber  { --cd: #4f3a07; } .tv .tr-c-red    { --cd: #5a1414; } .tv .tr-c-slate { --cd: #2a3441; }
.tv .tr-c-lime   { --cd: #2f4210; }

.tv { height: 100vh; width: 100vw; display: flex; flex-direction: column; gap: 1.4vh; padding: 1.8vh 1.8vw; overflow: hidden; }
.tv-top, .tv-sponsors { flex: none; }
.tv-block { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tv-block--courts { flex: 1.45 1 0; }
.tv-lower { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vw; }

/* ------------------------------------------------------------ cabecera */
.tv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2vw; align-items: center; }
.tv-title h1 { margin: 0; font-family: var(--tr-display); font-size: 4.2vh; line-height: 1.05; letter-spacing: -.02em; color: #fff; text-transform: none; }
.tv-sub { font-size: 2.1vh; color: rgba(255,255,255,.72); margin-top: .5vh; }
.tv-legend { display: flex; gap: .9vw; flex-wrap: wrap; justify-content: center; }
.tv-legend span { display: inline-flex; align-items: center; gap: .5vw; font-weight: 700; font-size: 1.9vh; padding: .5vh 1vw .5vh .7vw;
  border-radius: 99px; background: var(--cd); border: .25vh solid var(--c); }
.tv-legend i, .tv-row small i, .tv-court-next b i, .tv-queue li > div small i { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--c); display: inline-block; flex: none; }
.tv-clock { display: flex; align-items: center; gap: 1.2vw; }
.tv-clock b { font-family: var(--tr-display); font-size: 6vh; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tv-live, .tv-pill { display: inline-flex; align-items: center; gap: .5vw; font-weight: 800; font-size: 1.7vh; letter-spacing: .1em; text-transform: uppercase;
  background: var(--tr-signal); color: #fff; border-radius: .8vh; padding: .5vh 1vw; }
.tv-live i, .tv-pill i { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: #fff; animation: tr-pulse 1.4s infinite; }
.tv-offline-msg { display: none; font-size: 1.6vh; color: #fbbf24; }
.tv--offline .tv-offline-msg { display: inline; }

/* -------------------------------------------------------------- bloques */
.tv-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .8vh; flex: none; }
.tv-h h2 { margin: 0; font-family: var(--tr-display); font-size: 2.6vh; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.tv-pag { font-size: 1.7vh; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; }

/* Canchas: cada tarjeta lleva lo que se juega y los 3 partidos siguientes de esa cancha */
.tv-courts { flex: 1; min-height: 0; overflow: hidden; display: grid; gap: 1.2vh 1vw;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34vw), 1fr)); grid-auto-rows: minmax(0, 1fr); }
.tv-court { min-width: 0; min-height: 0; border-radius: 1.4vh; padding: 1.1vh 1vw; display: flex; flex-direction: column; justify-content: flex-start; gap: .7vh; overflow: hidden;
  background: #121c30; border: .25vh dashed rgba(255,255,255,.18); }
.tv-court--on { background: var(--cd); border: .25vh solid var(--c); border-left-width: 1vh; }
.tv-court-head { display: flex; justify-content: space-between; align-items: center; gap: 1vw; flex: none; }
.tv-court-name { font-weight: 800; font-size: 1.8vh; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.tv-court--on .tv-court-name { color: #fff; }
.tv-court-now { display: grid; gap: .25vh; flex: none; }
.tv-court-cat { font-weight: 700; font-size: 1.9vh; color: var(--c); filter: brightness(1.55) saturate(.9); }
.tv-court-sides { font-family: var(--tr-display); font-weight: 700; font-size: 2.3vh; line-height: 1.12; display: grid; gap: 0; }
.tv-court-sides em { font-size: .55em; }
.tv-court-meta { font-size: 1.6vh; color: rgba(255,255,255,.7); }
.tv-free { font-family: var(--tr-display); font-weight: 700; font-size: 2.4vh; color: rgba(255,255,255,.55); }
.tv-court-next { color: rgba(255,255,255,.8); display: grid; gap: .3vh; font-size: 2vh; }
.tv-court-next small { font-size: 1.6vh; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.tv-queue-h { flex: none; margin-top: .2vh; font-size: 1.45vh; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.tv-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .5vh; min-height: 0; }
.tv-queue li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: .8vw; align-items: center; padding: .4vh .6vw; border-radius: .9vh;
  background: rgba(255,255,255,.06); border-left: .6vh solid var(--c, #475569); min-width: 0; }
.tv-queue time, .tv-row time { font-family: var(--tr-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.05; }
.tv-queue time { font-size: 2.2vh; }
.tv-queue time small, .tv-row time small { display: block; margin-top: .25vh; font-family: "Inter", sans-serif; font-size: 1.35vh; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.62); white-space: nowrap; }
.tv-queue li > div { min-width: 0; display: grid; gap: .15vh; }
.tv-queue li > div small { font-size: 1.4vh; color: rgba(255,255,255,.66); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .4vw; }
.tv-queue li > div span { font-size: 1.7vh; font-weight: 600; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Listas */
.tv-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .9vh; }
.tv-row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto; gap: 1vw; align-items: center; padding: 1vh 1vw; border-radius: 1.1vh; flex: none;
  background: var(--cd, #121c30); border-left: .9vh solid var(--c, #475569); }
.tv-row time { font-size: 2.6vh; }
.tv-row-main { min-width: 0; display: grid; gap: .3vh; }
.tv-row-main small { font-size: 1.65vh; color: rgba(255,255,255,.66); display: flex; align-items: center; gap: .5vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.tv-row-main span { font-size: 2.1vh; font-weight: 600; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tv-row--done .tv-score { font-family: var(--tr-display); font-weight: 800; font-size: 3.2vh; text-align: right; font-variant-numeric: tabular-nums; }
.tv-score small { display: block; font-family: "Inter", sans-serif; font-size: 1.5vh; font-weight: 500; color: rgba(255,255,255,.6); }
.tv-win { font-weight: 800; color: #fff; }
.tv-win::before { content: "▸ "; color: var(--c, var(--tr-signal)); filter: brightness(1.4); }
.tv-none { color: rgba(255,255,255,.5); font-size: 2vh; padding: 1vh 0; }

/* Sin fixture programado */
.tv-vacio { flex: 1; display: grid; place-content: center; text-align: center; gap: 1.2vh; color: rgba(255,255,255,.7); }
.tv-vacio i { font-size: 8vh; color: var(--tr-signal); }
.tv-vacio b { font-family: var(--tr-display); font-size: 4vh; color: #fff; }
.tv-vacio span { font-size: 2.2vh; max-width: 44ch; }

/* ------------------------------------------------------ patrocinadores */
.tv-sponsors { display: flex; align-items: center; gap: 1.4vw; height: 9.5vh; background: #000; color: #fff; border: .2vh solid rgba(255,255,255,.16); border-radius: 1.4vh; padding: .9vh 1.4vw; overflow: hidden; }
.tv-sponsors--light { background: #fff; color: var(--tr-ink); border-color: transparent; }
.tv-sponsors--solo { height: 6vh; background: transparent; border: .2vh solid rgba(255,255,255,.14); justify-content: center; }
.tv-sponsors--solo .tv-sponsors-label { color: rgba(255,255,255,.55); }
.tv-sponsors-label { font-size: 1.6vh; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); flex: none; }
.tv-sponsors--light .tv-sponsors-label { color: #667085; }
.tv-sponsors-view { flex: 1; min-width: 0; overflow: hidden; }
.tv-track { display: flex; align-items: center; justify-content: center; gap: 3.5vw; width: max-content; min-width: 100%; }
.tv-track--marquee { justify-content: flex-start; padding-right: 3.5vw; animation: tv-marquee 40s linear infinite; }   /* = gap: el -50% es una vuelta exacta */
.tv-sponsor { display: inline-flex; align-items: center; flex: none; }
.tv-sponsor img { height: 6.2vh; max-width: 14vw; object-fit: contain; display: block; }
.tv-sponsor b { font-family: var(--tr-display); font-size: 3vh; color: #fff; }
.tv-sponsors--light .tv-sponsor b { color: var(--tr-ink-2); }
@keyframes tv-marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ controles */
.tv-back, .tv-fs { position: fixed; bottom: 1.4vh; width: 4.4vh; height: 4.4vh; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff; font-size: 2vh; cursor: pointer; text-decoration: none; opacity: 1; transition: opacity .3s; z-index: 10; }
.tv-back { left: 1vw; } .tv-fs { right: 1vw; }
.tv-quieto .tv-back, .tv-quieto .tv-fs { opacity: 0; }
.tv-quieto { cursor: none; }

@media (orientation: portrait) {
  .tv-top { grid-template-columns: 1fr auto; } .tv-legend { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
  .tv-lower { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 1.2vh; }
  .tv-courts { grid-template-columns: 1fr; grid-auto-rows: minmax(15vh, 1fr); }
  .tv-court-name { font-size: 1.5vh; }
}
@media (prefers-reduced-motion: reduce) { .tv-track--marquee { animation: none; flex-wrap: wrap; justify-content: center; } .tv-live i, .tv-pill i { animation: none; } }

.tv-late { display: inline-block; margin-left: .8vw; padding: .1vh .8vh; border-radius: 99px; background: #f3a36f; color: #3a1500; font-size: 1.3vh; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }

/* Marcador en vivo en la tarjeta de cancha de la TV. */
.tv-lv { display: grid; gap: .5vh; margin: .6vh 0; font-variant-numeric: tabular-nums; }
.tv-lv-head, .tv-lv-row { display: grid; grid-template-columns: minmax(0, 1fr) 9vw 6vw 8vw; gap: 1vw; align-items: center; }
.tv-lv-head { font-size: 1.3vh; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: center; }
.tv-lv-head span:first-child { text-align: left; }
.tv-lv-row { padding: .5vh .8vh; border-radius: 1vh; background: rgba(255,255,255,.07); font-weight: 700; font-size: 2.6vh; }
.tv-lv-n { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; }
.tv-lv-sets { display: inline-flex; gap: 1vw; justify-content: center; color: rgba(255,255,255,.6); font-size: 2.8vh; }
.tv-lv-sets .w { color: #fff; font-weight: 900; }
.tv-lv-g { text-align: center; font-weight: 900; font-size: 4vh; }
.tv-lv-p { text-align: center; font-weight: 900; font-size: 4.2vh; background: var(--tr-signal, #e8590c); color: #fff; border-radius: 1vh; padding: .1vh 0; }