/*
 * Pantalla del WOD en la TV del box · "Línea con banda" (DESIGN.md). Se lee a 5 m; el cronómetro a 8 m.
 * Todo en rem y la raíz sigue al alto de la pantalla: 16 px a 1080 de alto, 10.7 px a 720. La misma
 * composición en 1920×1080 y 1280×720.
 * Negro, Saira, líneas finas. El rojo de la marca va solo en el letrero, en la "x" de la espera y en
 * UNA raya (la de la parte principal del WOD). Nunca rellena. El ámbar de los últimos segundos va
 * siempre con su palabra.
 */
:root {
  --texto: #f2f2f2;
  --texto-tv-2: #cfcfcf; /* lo secundario en la TV: el gris del panel cae a 2.7:1 con el reflejo */
  --tira: 6.5rem;
  --banda: 7rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html.tv { font-size: min(1.4815vh, 0.8333vw); background: var(--fondo); color: var(--texto); font-family: var(--letra); -webkit-font-smoothing: antialiased; overflow: hidden; cursor: none; }
body { height: 100vh; overflow: hidden; background: var(--fondo); display: flex; flex-direction: column; line-height: 1.2; }
::selection { background: var(--texto); color: var(--fondo); }
[hidden] { display: none !important; }
.sprite { position: absolute; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ───── Tira de arriba: letrero, sede, fecha y hora ───── */
.tira { flex: none; height: var(--tira); display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 3.5rem; border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: 1.5rem; }
.casco { width: 5.5rem; height: auto; }
.letrero { font-family: var(--letrero); font-size: 1.75rem; letter-spacing: 0.06em; white-space: nowrap; }
.letrero b { font-weight: 400; color: var(--marca-rojo); }
.cuando { display: flex; align-items: baseline; gap: 2rem; font-size: 2.25rem; font-weight: 600; font-stretch: 87.5%; white-space: nowrap; }
.cuando span { color: var(--texto-tv-2); font-weight: 500; }
.cuando time { font-size: 3rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }

.p { flex: 1; min-height: 0; }

/* ───── El WOD: la parte principal grande a la izquierda, las demás apiladas a la derecha ───── */
.p-wod { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); }
.p-wod.sola { grid-template-columns: minmax(0, 1fr); }
.principal { --k: 1; padding: 3.5rem 3.5rem 3rem; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.resto { --k: 1; display: flex; flex-direction: column; border-left: 1px solid var(--linea); overflow: hidden; min-height: 0; }

.parte { display: flex; flex-direction: column; min-height: 0; }
.p-nombre { display: flex; align-items: baseline; gap: 1.25rem; font-size: calc(2.25rem * var(--k)); font-weight: 700; font-stretch: 87.5%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tv-2); }
.p-nombre b { color: var(--texto); font-weight: 700; letter-spacing: 0.02em; text-transform: none; font-stretch: 100%; }
.principal .p-nombre::before { content: ""; align-self: center; width: 4.5rem; height: 0.375rem; background: var(--marca-rojo); flex: none; } /* la raya roja: una por pantalla */
.p-formato { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 2.5rem; margin-top: calc(0.5rem * var(--k)); font-size: calc(8.5rem * var(--k)); line-height: 0.95; font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: 0.01em; }
.p-formato small { font-size: 0.42em; font-weight: 700; font-stretch: 75%; color: var(--texto-tv-2); letter-spacing: 0.03em; }
.movs { list-style: none; padding: 0; margin-top: calc(2rem * var(--k)); border-top: 1px solid var(--linea-fuerte); }
.movs li { display: flex; align-items: baseline; gap: 0.45em; padding: calc(0.7rem * var(--k)) 0; border-bottom: 1px solid var(--linea); font-size: calc(3.9rem * var(--k)); line-height: 1.08; font-weight: 500; font-stretch: 87.5%; }
.movs li b { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.movs li .peso { color: var(--texto-tv-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.movs li.esquema { font-weight: 800; font-stretch: 75%; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.escalado { display: grid; gap: calc(0.4rem * var(--k)); margin-top: calc(1.75rem * var(--k)); font-size: calc(1.75rem * var(--k)); color: var(--texto-tv-2); }
.escalado p { display: flex; gap: 0.8em; }
.escalado b { min-width: 7.2em; color: var(--texto); font-weight: 700; font-stretch: 87.5%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.86em; padding-top: 0.08em; }
.notas { margin-top: auto; padding-top: calc(1.5rem * var(--k)); font-size: calc(1.9rem * var(--k)); color: var(--texto-tv-2); }

/* Las demás partes, más chicas */
.resto .parte { padding: calc(2.25rem * var(--k)) 3rem calc(2rem * var(--k)); border-bottom: 1px solid var(--linea); }
.resto .parte:last-child { border-bottom: 0; }
.resto .p-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; }
.resto .p-nombre { font-size: calc(1.9rem * var(--k)); }
.resto .p-formato { margin-top: 0; font-size: calc(3.6rem * var(--k)); white-space: nowrap; }
.resto .movs { margin-top: calc(0.9rem * var(--k)); border-top: 0; columns: 2; column-gap: 2.5rem; }
.resto .movs li { break-inside: avoid; font-size: calc(2.45rem * var(--k)); padding: calc(0.35rem * var(--k)) 0; border-bottom: 0; }
.resto .escalado { margin-top: calc(0.75rem * var(--k)); font-size: calc(1.5rem * var(--k)); }
.resto .movs.una { columns: 1; }

/* ───── Sin WOD ───── */
.p-espera { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; text-align: center; padding: 0 4rem; }
.casco-grande { width: 22rem; height: auto; }
.frase { font-size: 7rem; line-height: 1; font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; letter-spacing: 0.01em; }
.frase b { color: var(--marca-rojo); font-weight: 800; }
.proxima { font-size: 3.25rem; font-weight: 600; font-stretch: 87.5%; }
.proxima span { color: var(--texto-tv-2); font-weight: 500; }

/* ───── Cronómetro (se lee a 8 m) ───── */
.p-crono { --k: 1; display: grid; grid-template-columns: minmax(0, 1fr); }
.p-crono.con-movs { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.reloj { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 2rem 3rem; }
.c-que { font-size: 3.25rem; font-weight: 700; font-stretch: 87.5%; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-tv-2); }
.c-que b { color: var(--texto); }
.c-cifra { font-size: 31rem; line-height: 0.92; font-weight: 800; font-stretch: 62.5%; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.c-cifra.larga { font-size: 23rem; }
.c-cifra.palabra { font-size: 21rem; letter-spacing: 0.01em; }
.c-estado { display: flex; align-items: center; gap: 1.25rem; min-height: 1.2em; font-size: 4.5rem; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.c-estado .ico { stroke-width: 2.5; }
.c-estado span { color: var(--texto-tv-2); font-weight: 700; }
.p-crono.pausa .c-cifra { color: var(--texto-tv-2); }
.p-crono.ultimos .c-cifra, .p-crono.ultimos .c-estado { color: var(--aviso-t); }
.p-crono.previa .c-cifra { font-size: 36rem; }
.c-movs { border-left: 1px solid var(--linea); padding: 3rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.c-movs .movs { margin-top: 0; border-top: 0; }
.c-movs .movs li { font-size: 3.4rem; }
.c-movs .p-nombre { margin-bottom: 1.5rem; font-size: 2.5rem; }

/* ───── Anuncio: una banda abajo, de lado a lado (sin color: no es un estado) ───── */
.banda { flex: none; height: var(--banda); display: flex; align-items: center; gap: 2rem; padding: 0 3.5rem; background: var(--capa); border-top: 1px solid var(--linea-fuerte); font-size: 3rem; font-weight: 600; font-stretch: 87.5%; }
.banda .ico { font-size: 3.5rem; color: var(--texto-tv-2); }
.banda p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───── "Bienvenido, Juan": discreto, 3 s ───── */
.hola { position: fixed; right: 3.5rem; bottom: calc(var(--banda) + 2rem); padding: 1.5rem 2.5rem; background: var(--capa-2); border-top: 1px solid var(--linea-fuerte); font-size: 2.75rem; font-weight: 500; font-stretch: 87.5%; animation: fundido 400ms ease-out; }
.hola b { font-weight: 800; }
body.sin-banda .hola { bottom: 2rem; }
@keyframes fundido { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hola { animation-duration: 120ms; } }

/* ───── Emparejar ───── */
.p-emparejar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; }
.titular { font-size: 6rem; font-weight: 800; font-stretch: 62.5%; text-transform: uppercase; }
.emparejar { display: grid; gap: 1.25rem; width: 46rem; font-size: 2rem; }
.emparejar label { font-weight: 600; color: var(--texto-tv-2); }
.emparejar input { font: inherit; font-size: 2.5rem; padding: 1.25rem 1.5rem; background: var(--capa); color: var(--texto); border: 2px solid var(--linea-fuerte); border-radius: 0; caret-color: var(--marca-rojo); }
.emparejar input:focus { outline: none; border-color: var(--texto); }
.emparejar button { font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1.25rem; background: var(--accion); color: var(--accion-texto); border: 0; border-radius: 0; cursor: pointer; }
.ayuda { color: var(--texto-tv-2); font-size: 1.75rem; }
html.tv:has(.p-emparejar:not([hidden])) { cursor: auto; }

/* Vista previa dentro del panel: sin cursor escondido */
html.previa { cursor: default; }