/* Pantallas del CCTV. Diseño basado en el LED wall de Crionet (CCO2026): columnas por cancha, tarjetas con franja de estado,
   cuerpo oscuro con bandera, nombre y marcador, y pie azul con duración y ronda. Sin recursos externos (funciona sin internet).
   Compatibilidad: pensado para navegadores de Smart TV / LED antiguos (Chromium 61+): sin :has(), sin gap en flex, sin subgrid.
   Alineación: cada fila de equipo usa la MISMA plantilla de columnas (nombre | sets | puntos | ✓) con anchos fijos en em. */
/* ═══ ARCHIVO: public/style.css · CAPA: PANTALLA ═══════════════════════════════════════════════════
   ÍNDICE (busca el título con Ctrl+F):
   1. Variables (:root)                       colores y tipografía; los pisa la identidad de /admin y custom.css
   2. "Tamaño base"                           escala de la letra según alto/ancho de la pantalla
   3. "Encabezado"                            logos y título
   4. "Pie"                                   reloj y patrocinadores
   5. "tarjeta de partido" y "Fila de equipo" la tarjeta: franja de estado, nombres, sets, puntos
   6. "pantalla de una cancha"                marcador grande de /court/N
   7. "Dobles…"                               ajustes de dobles (orden del día y cancha), fotos y placas
   8. "vertical / pantallas angostas"         celular, tablet, monitor vertical
   9. "efectos de pantalla completa"          lluvia / pulso rojo cuando hay un aviso
   Ajustes SOLO de un torneo: no se editan aquí sino en custom.css de la carpeta del torneo.
   Compatibilidad TV antiguas (Chromium 61): sin :has(), sin gap en flex, sin subgrid, sin inset. */
:root {
  --bg: #000; --card: #17171c; --head: rgba(0,0,0,.55); --fg: #fff; --dim: #9aa0ad; --live: #ffd23f; --warn: #ff9d3d;
  --band-sched: #c9c3d9; --band-sched-fg: #1b1b22;
  --band-final: var(--final); --band-final-fg: #2a1700;
  --live1: #ff8fba; --live2: #ff2d2d; --final: #f5a524; --accent: #1c3fd6; --accent-rgb: 28,63,214;
  --band-live: linear-gradient(90deg, var(--live1) 0%, var(--live2) 100%); --band-live-fg: #2a0010;
  --band-pre: #8fd3ff; --band-pre-fg: #00263b;
  --band-paused: #b58cff; --band-paused-fg: #1d0a40;
  --foot: var(--accent);
  --f: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --cols: 3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Tamaño base: escala con la altura; si hay muchas columnas también se limita por el ancho. */
html { font-size: 1.85vh; font-size: min(1.85vh, calc(100vw / (var(--cols) * 32))); }
html, body { height: 100%; margin: 0; }
body { background: var(--bg) radial-gradient(ellipse 90% 40% at 50% 0%, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), 0) 70%) no-repeat; color: var(--fg); font-family: var(--f); font-size: 1rem; overflow: hidden; -webkit-text-size-adjust: 100%; }

#banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--warn); color: #1a1000; text-align: center; font-weight: 700; letter-spacing: .14em; padding: .2em; }

.wall { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: .5rem .6rem 0; }

/* Encabezado: logo ATP | título | logo del torneo. Los costados reservan el mismo ancho para que el título quede centrado. */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 5rem; padding: .1rem 0 .3rem; margin-bottom: .3rem; position: relative; }
.topbg .top { background: var(--topbg); border-radius: .3rem; padding-left: .6rem; padding-right: .6rem; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .2rem; border-radius: .1rem; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 18%, var(--accent) 82%, rgba(var(--accent-rgb), 0)); }
.mid { text-align: center; padding: 0 1rem; max-width: 60vw; }
.top .title { color: var(--toptext, inherit); font-size: 1.9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1; }
.top .sub { font-size: 1.05rem; letter-spacing: .14em; color: var(--toptext, var(--dim)); opacity: 1; text-transform: uppercase; margin-top: .1rem; }
.top .sub:empty { display: none; }
.top .sub.notice { display: inline-block; padding: .2rem 1.1rem; border-radius: 999px; font-weight: 700; letter-spacing: .1em; }
@keyframes hp { 0%, 100% { opacity: .8; box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); } 50% { opacity: 1; box-shadow: 0 0 .9rem rgba(var(--accent-rgb), .95); } }
.hpulse.play .top::after { animation: hp 2.2s ease-in-out infinite; }
.susp:not(.play) .top::after { background: linear-gradient(90deg, rgba(0,0,0,0), var(--band-paused) 18%, var(--band-paused) 82%, rgba(0,0,0,0)); }
@media (prefers-reduced-motion: reduce) { .hpulse.play .top::after { animation: none; } }
.slot { display: flex; align-items: center; min-width: 0; height: 4.8rem; overflow: hidden; }
.slot.l { justify-content: flex-start; }
.slot.r { justify-content: flex-end; }
.slot .logo { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.slot.plate { background: #f4f4f7; border-radius: .35rem; padding: .25rem .6rem; }
.slot.ph { border: .1rem dashed rgba(255,255,255,.25); color: var(--dim); font-size: .95rem; justify-content: center; border-radius: .35rem; padding: 0 .8rem; letter-spacing: .06em; text-transform: uppercase; }

/* Pie: reloj + patrocinadores (el espacio solo se reserva si hay patrocinadores o se pide en el backoffice). */
.bottom { display: flex; align-items: center; justify-content: center; min-height: 2.4rem; padding-top: .3rem; }
.bottom.with-sp { justify-content: space-between; min-height: 3.7rem; }
.clock { font-size: 1.7rem; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; flex: none; }
.sponsors { display: none; flex: 1; justify-content: flex-end; align-items: center; min-width: 0; height: 3.1rem; }
.with-sp .sponsors { display: flex; }
.sp-group { display: flex; align-items: center; justify-content: flex-end; height: 100%; max-width: 100%; }
.sp-group > * + * { margin-left: 1rem; }
.sp-label { font-size: 1rem; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; flex: none; }
.sp { display: flex; align-items: center; justify-content: center; height: 100%; min-width: 0; flex: none; }
.sp-group.plates .sp { background: #f4f4f7; border-radius: .35rem; padding: .3rem .8rem; height: 2.8rem; }
.sp-img { height: 100%; width: auto; max-width: 12rem; object-fit: contain; display: block; }
.sp-empty { border: .1rem dashed rgba(255,255,255,.25); color: var(--dim); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; border-radius: .35rem; padding: .7rem 1.4rem; }

.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-column-gap: .6rem; min-height: 0; }
.col { display: block; min-height: 0; overflow: hidden; }
.col > * + * { margin-top: .4rem; }
.courthead { background: var(--courtbg, var(--head)); color: var(--courttext, inherit); text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .5rem .25rem; border-radius: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: .2rem solid var(--accent); }

/* ---- tarjeta de partido (todo en em para poder escalarla) ---- */
.card { font-size: 1rem; background: var(--card); border-radius: .3em; overflow: hidden; }
.band { text-align: center; font-weight: 700; font-size: 1em; letter-spacing: .1em; text-transform: uppercase; padding: .12em .4em; background: var(--band-sched); color: var(--band-sched-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.final .band { background: var(--band-final); color: var(--band-final-fg); }
.card.live .band { background: var(--band-live); color: var(--band-live-fg); }
.card.live { box-shadow: 0 0 0 1px rgba(255,60,80,.45), 0 0 1.1em rgba(255,45,45,.22); }
.card.live .band::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; background: #2a0010; margin-right: .6em; vertical-align: .05em; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .card.live .band::before { animation: none; } }
.team.lose .nm, .team.lose .set { color: #aeb3c2; font-weight: 600; }
.card.pre .band { background: var(--band-pre); color: var(--band-pre-fg); }
.card.paused .band { background: var(--band-paused); color: var(--band-paused-fg); }

.body { padding: .25em .6em; }

/* Fila de equipo: columnas fijas. Las dos filas de la tarjeta comparten exactamente la misma plantilla,
   por eso sets, puntos del juego y ✓ quedan alineados en vertical. Ancho de cada celda = var(--cw). */
.team {
  --cw: 1.35em; --gpw: 0px; --ckw: 0px;
  font-size: 1.55em; line-height: 1.15;
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: 1.5em; padding: .06em 0;
}
.card:not(.n0) .team { grid-template-columns: minmax(0, 1fr) repeat(var(--n), var(--cw)) var(--gpw) var(--ckw); }
.card.live .team { --gpw: 2.1em; }
.card.final .team { --ckw: 1.1em; }
.card.n0 .set, .card.n0 .gpc, .card.n0 .chkc { display: none; }
.team + .team { border-top: 1px solid rgba(255,255,255,.07); }

.who { min-width: 0; }
.pl { display: flex; align-items: center; min-width: 0; line-height: 1.1; }
.pl > * + * { margin-left: .3em; }
.flag { height: .68em; width: .9em; object-fit: cover; border-radius: .05em; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.cc3 { flex: none; font-size: .5em; font-weight: 700; letter-spacing: .06em; color: #cfd4e0; }
.nm { font-size: 1em; font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: .01em; }
.nm.dim { color: var(--dim); }
.pl small { font-size: .6em; color: #dfe2ea; font-weight: 600; flex: none; }
.ball { width: .38em; height: .38em; border-radius: 50%; background: var(--live); box-shadow: 0 0 .25em var(--live); flex: none; margin-left: .4em; }

.set, .gpc, .chkc { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set { position: relative; }
.set sup { position: absolute; left: 77%; top: -.18em; font-size: .66em; line-height: 1; font-weight: 700; color: #fff; }
.gpc { padding-left: .3em; }
.gp { display: block; background: #f4f4f7; color: #111; border-radius: .18em; line-height: 1.1; font-size: .9em; }
.chkc { color: #6dff9a; font-size: .8em; }

.free { color: var(--dim); font-size: 1em; padding: .1em 0; }

.foot { background: var(--foot); display: flex; justify-content: space-between; align-items: center; padding: .08em .6em; font-size: .85em; font-weight: 700; letter-spacing: .06em; min-height: 1.5em; }
.foot .dur { display: inline-block; }
.clk { width: .75em; height: .75em; border-radius: 50%; border: .12em solid #fff; position: relative; display: inline-block; vertical-align: -.08em; margin-right: .35em; }
.clk::after { content: ""; position: absolute; left: 50%; top: 14%; width: .1em; height: .32em; background: #fff; margin-left: -.05em; }
.stale { color: #ffd9a8; }
.round { margin-left: auto; text-transform: uppercase; }
.empty { color: var(--dim); font-size: 1.6rem; text-align: center; padding: 2rem; grid-column: 1 / -1; }

/* ---- pantalla de una cancha ---- */
.single { min-height: 0; overflow: hidden; }
.single .now .card { font-size: 2.2rem; }
.single .next { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); grid-gap: .6rem; margin-top: .8rem; align-content: start; }

/* Dobles en la orden del día: renglones más juntos para que 4 partidos de dobles por cancha quepan en pantalla. */
.card.dbl:not(.photos) .team { min-height: 0; padding: .02em 0; }
.card.dbl:not(.photos) .pl { line-height: 1; }
/* Dobles próximos (vista de una cancha): un equipo por lado en vez de cuatro nombres apilados. */
.single .next .card.dbl.n0 .body { display: flex; flex-wrap: wrap; }
.single .next .card.dbl.n0 .team { flex: 1 1 0; min-width: 0; }
.single .next .card.dbl.n0 .team + .team { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); margin-left: .6em; padding-left: .6em; }
.single .next .card.dbl.n0 .free { flex: 0 0 100%; }
/* Como en las pantallas de la ATP: el segundo equipo va alineado a la derecha, con la bandera del lado derecho. */
.single .next .card.dbl.n0 .team + .team .pl { flex-direction: row-reverse; text-align: right; }
.single .next .card.dbl.n0 .team + .team .pl > * + * { margin-left: 0; margin-right: .3em; }

/* Foto del jugador (vista de una cancha): recuadro con iniciales debajo; si la foto carga, la cubre. */
.ph { position: relative; flex: none; width: 2.1em; height: 2.1em; border-radius: .22em; overflow: hidden; background: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.ph i { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: .6em; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.ph img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.card.photos .team { min-height: 2.3em; padding: .12em 0; }
.card.photos:not(.dbl) .ph { width: 3.1em; height: 3.1em; border-radius: .3em; }
.card.photos:not(.dbl) .team { min-height: 3.3em; }
.card.photos .pl + .pl { margin-top: .12em; }
/* Dobles con fotos: cada equipo en su propia placa (tono distinto), con una línea fina entre compañeros. */
.card.photos.dbl .team { padding: .26em .35em; border-radius: .22em; background: rgba(255,255,255,.045); }
.card.photos.dbl .team + .team { border-top: 0; margin-top: .3em; background: rgba(var(--accent-rgb), .22); }
.card.photos.dbl .pl + .pl { margin-top: .22em; padding-top: .22em; border-top: 1px solid rgba(255,255,255,.14); }

/* ---- vertical / pantallas angostas (celular, tablet, monitor vertical) ---- */
@media (max-aspect-ratio: 1/1), (max-width: 720px) {
  html { font-size: calc(100vw / 30); }
  body { overflow: auto; }
  .wall { height: auto; min-height: 100%; display: block; }
  .cols { display: block; }
  .col { overflow: visible; margin-bottom: 1rem; }
  .single .now .card { font-size: 1.15rem; }
  .single .next { display: block; }
  .single .next .card { margin-top: .6rem; }
  .top .title { font-size: 1.4rem; }
}

/* ---- efectos de pantalla completa (solo con un aviso activo): lluvia / pulso rojo en los bordes ---- */
#fx { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 8; pointer-events: none; overflow: hidden; display: none; }
.fx-rain #fx, .fx-heat #fx { display: block; }
#fx .rain1, #fx .rain2, #fx .heat, #fx .dim { display: none; position: absolute; }
.fx-rain #fx .dim { display: block; top: 0; left: 0; right: 0; bottom: 0; background: rgba(8, 18, 40, .22); }
.fx-rain #fx .rain1 { opacity: .8; }
.fx-rain #fx .rain2 { opacity: .65; }
.fx-rain #fx .rain1, .fx-rain #fx .rain2 { display: block; left: -100px; right: -100px; top: -400px; bottom: 0; will-change: transform; }
.fx-rain #fx .rain1 { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22400%22 height=%22400%22 viewBox=%220 0 400 400%22%3E%3Cg stroke=%22rgba%28205%2C228%2C255%2C.70%29%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 fill=%22none%22%3E%3Cline x1=%22219%22 y1=%2287%22 x2=%22205%22 y2=%22133%22/%3E%3Cline x1=%22256%22 y1=%22343%22 x2=%22242%22 y2=%22389%22/%3E%3Cline x1=%2278%22 y1=%2247%22 x2=%2264%22 y2=%2293%22/%3E%3Cline x1=%22328%22 y1=%2258%22 x2=%22314%22 y2=%22104%22/%3E%3Cline x1=%22241%22 y1=%22308%22 x2=%22227%22 y2=%22354%22/%3E%3Cline x1=%2283%22 y1=%22269%22 x2=%2269%22 y2=%22315%22/%3E%3Cline x1=%22163%22 y1=%2229%22 x2=%22149%22 y2=%2275%22/%3E%3Cline x1=%2298%22 y1=%22232%22 x2=%2284%22 y2=%22278%22/%3E%3Cline x1=%22268%22 y1=%2245%22 x2=%22254%22 y2=%2291%22/%3E%3Cline x1=%22177%22 y1=%2256%22 x2=%22163%22 y2=%22102%22/%3E%3Cline x1=%22336%22 y1=%22227%22 x2=%22322%22 y2=%22273%22/%3E%3Cline x1=%2284%22 y1=%22299%22 x2=%2270%22 y2=%22345%22/%3E%3Cline x1=%22117%22 y1=%22124%22 x2=%22103%22 y2=%22170%22/%3E%3Cline x1=%22352%22 y1=%2241%22 x2=%22338%22 y2=%2287%22/%3E%3Cline x1=%22349%22 y1=%22309%22 x2=%22335%22 y2=%22355%22/%3E%3Cline x1=%22257%22 y1=%2235%22 x2=%22243%22 y2=%2281%22/%3E%3C/g%3E%3C/svg%3E") repeat; animation: rainA .85s linear infinite; }
.fx-rain #fx .rain2 { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22250%22 height=%22250%22 viewBox=%220 0 250 250%22%3E%3Cg stroke=%22rgba%28170%2C205%2C245%2C.45%29%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 fill=%22none%22%3E%3Cline x1=%22105%22 y1=%2221%22 x2=%2296%22 y2=%2249%22/%3E%3Cline x1=%22191%22 y1=%2244%22 x2=%22182%22 y2=%2272%22/%3E%3Cline x1=%22123%22 y1=%22117%22 x2=%22114%22 y2=%22145%22/%3E%3Cline x1=%2285%22 y1=%22148%22 x2=%2276%22 y2=%22176%22/%3E%3Cline x1=%2279%22 y1=%22156%22 x2=%2270%22 y2=%22184%22/%3E%3Cline x1=%22127%22 y1=%22153%22 x2=%22118%22 y2=%22181%22/%3E%3Cline x1=%2295%22 y1=%2236%22 x2=%2286%22 y2=%2264%22/%3E%3Cline x1=%22197%22 y1=%22156%22 x2=%22188%22 y2=%22184%22/%3E%3Cline x1=%2297%22 y1=%22105%22 x2=%2288%22 y2=%22133%22/%3E%3Cline x1=%2273%22 y1=%22150%22 x2=%2264%22 y2=%22178%22/%3E%3Cline x1=%2265%22 y1=%22154%22 x2=%2256%22 y2=%22182%22/%3E%3Cline x1=%2264%22 y1=%22168%22 x2=%2255%22 y2=%22196%22/%3E%3Cline x1=%22101%22 y1=%22137%22 x2=%2292%22 y2=%22165%22/%3E%3Cline x1=%22185%22 y1=%22119%22 x2=%22176%22 y2=%22147%22/%3E%3Cline x1=%22129%22 y1=%22129%22 x2=%22120%22 y2=%22157%22/%3E%3Cline x1=%22198%22 y1=%22126%22 x2=%22189%22 y2=%22154%22/%3E%3Cline x1=%22141%22 y1=%2286%22 x2=%22132%22 y2=%22114%22/%3E%3Cline x1=%22112%22 y1=%2256%22 x2=%22103%22 y2=%2284%22/%3E%3Cline x1=%22111%22 y1=%2230%22 x2=%22102%22 y2=%2258%22/%3E%3Cline x1=%22196%22 y1=%2286%22 x2=%22187%22 y2=%22114%22/%3E%3Cline x1=%22183%22 y1=%22136%22 x2=%22174%22 y2=%22164%22/%3E%3Cline x1=%22136%22 y1=%22196%22 x2=%22127%22 y2=%22224%22/%3E%3Cline x1=%22163%22 y1=%2283%22 x2=%22154%22 y2=%22111%22/%3E%3Cline x1=%22204%22 y1=%2228%22 x2=%22195%22 y2=%2256%22/%3E%3Cline x1=%2279%22 y1=%22141%22 x2=%2270%22 y2=%22169%22/%3E%3Cline x1=%22156%22 y1=%2252%22 x2=%22147%22 y2=%2280%22/%3E%3C/g%3E%3C/svg%3E") repeat; animation: rainB .55s linear infinite; }
@keyframes rainA { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 400px, 0); } }
@keyframes rainB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 250px, 0); } }
.fx-heat #fx .heat { display: block; top: 0; left: 0; right: 0; bottom: 0; box-shadow: inset 0 0 9vh 2vh rgba(235, 20, 30, .9); animation: heatP 1.5s ease-in-out infinite; }
@keyframes heatP { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-rain #fx .rain1, .fx-rain #fx .rain2, .fx-heat #fx .heat { animation: none; } .fx-heat #fx .heat { opacity: .8; } }