/* ── Modo TV ────────────────────────────────────────────────────────────
   Pantalla grande, sin intervención. Nada de scroll manual: la página rota
   sola entre escenas. Paleta de tuarco (azul-violeta #667eea -> #764ba2)
   pero sobre fondo oscuro: en un TV los blancos grandes deslumbran y la
   distancia de visión es de varios metros, así que manda el contraste.

   Todo va en `clamp()`/`vw` para que se adapte de 720p a 4K sin tocar nada.
   No se usa nada de Tailwind: esta página no hereda `base.html`.
   --------------------------------------------------------------------- */

:root {
    --tv-fondo:        #0f1020;
    --tv-fondo-2:      #181a33;
    --tv-panel:        #1e2140;
    --tv-panel-borde:  #2e3260;
    --tv-acento:       #667eea;
    --tv-acento-2:     #764ba2;
    --tv-texto:        #f3f4fa;
    --tv-texto-suave:  #a8adc9;
    --tv-oro:          #fbbf24;
    --tv-plata:        #cbd5e1;
    --tv-bronce:       #d97706;
    --tv-live:         #ef4444;
    --tv-d1:           #667eea;
    --tv-d2:           #f472b6;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;            /* la TV no se scrollea a mano */
    /* Sin "pull to refresh" ni gesto de atrás: el swipe lo gestiona tv.js. */
    overscroll-behavior: none;
    touch-action: pan-y;
    background: radial-gradient(ellipse at 20% 0%, #1b1e3d 0%, var(--tv-fondo) 55%);
    color: var(--tv-texto);
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;   /* los números no bailan al cambiar */
    cursor: none;                /* en un TV no hay ratón */
}

/* ── Estructura ─────────────────────────────────────────────────────── */
#tv {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    padding: clamp(1rem, 2vw, 2.2rem);
    gap: clamp(.8rem, 1.6vw, 1.6rem);
}

/* ── Cabecera fija: no rota nunca ───────────────────────────────────── */
.tv-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(.7rem, 1.2vw, 1.1rem) clamp(1rem, 1.8vw, 1.6rem);
    background: linear-gradient(135deg, rgba(102,126,234,.18) 0%, rgba(118,75,162,.18) 100%);
    border: 1px solid var(--tv-panel-borde);
    border-radius: clamp(.6rem, 1vw, 1rem);
}

.tv-evento { display: flex; align-items: center; gap: clamp(.8rem, 1.4vw, 1.4rem); min-width: 0; }
.tv-evento-nombre {
    font-size: clamp(1.3rem, 2.3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.tv-evento-lugar {
    font-size: clamp(.8rem, 1.05vw, 1.05rem);
    color: var(--tv-texto-suave);
    white-space: nowrap;
}

.tv-estado { display: flex; align-items: center; gap: clamp(.8rem, 1.4vw, 1.5rem); flex: 0 0 auto; }
.tv-estado-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem;
    border-radius: 9999px;
    font-size: clamp(.7rem, .85vw, .9rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid var(--tv-panel-borde);
    color: var(--tv-texto-suave);
}
.tv-estado-chip.live {
    background: var(--tv-live);
    border-color: var(--tv-live);
    color: #fff;
}
.tv-estado-chip.live .tv-punto {
    animation: tv-latido 1.4s ease-in-out infinite;
}
.tv-punto {
    width: .6em; height: .6em; border-radius: 50%;
    background: currentColor; flex: 0 0 auto;
}
@keyframes tv-latido {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.75); }
}

.tv-reloj {
    font-size: clamp(1.2rem, 1.9vw, 2rem);
    font-weight: 800;
    letter-spacing: .02em;
}

/* ── Escenario de las escenas ───────────────────────────────────────── */
#tv-escenario {
    position: relative;
    min-height: 0;               /* sin esto el grid desborda y corta */
    border-radius: clamp(.6rem, 1vw, 1rem);
}

.tv-escena {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    /* La escena ocupa TODO el escenario: si se encoge, la caja de la diana
       queda baja y la triple se dibuja diminuta. */
    height: 100%;
    opacity: 0;
    transform: translateY(1.2rem);
    transition: opacity .7s ease, transform .7s ease;
    pointer-events: none;
    overflow: hidden;
}
.tv-escena.activa { opacity: 1; transform: none; pointer-events: auto; }
.tv-escena.saliendo { opacity: 0; transform: translateY(-1.2rem); }

.tv-escena-titulo {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: clamp(.5rem, 1vw, .9rem);
    flex: 0 0 auto;
}
.tv-escena-titulo h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1.9vw, 2rem);
    font-weight: 800;
}
.tv-escena-titulo .tv-sub {
    font-size: clamp(.8rem, 1vw, 1.1rem);
    color: var(--tv-acento);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Clasificación ──────────────────────────────────────────────────── */
.tv-clasificacion { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* Una diapositiva = una DIVISIÓN completa, con sus categorías dentro.
   Los bloques se reparten el alto disponible para no dejar la pantalla
   medio vacía cuando hay pocas categorías. */
/* Tres divisiones por diapositiva, en tres columnas. */
.tv-clas-cols {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.7rem, 1.2vw, 1.3rem);
    overflow: hidden;
}
.tv-clas-cols-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-clas-cols-una { grid-template-columns: minmax(0, 1fr); }

.tv-clas-col {
    display: flex; flex-direction: column; gap: .35rem;
    min-width: 0; min-height: 0; overflow: hidden;
}
.tv-clas-division {
    display: flex; align-items: baseline; gap: .45rem;
    padding-bottom: .25rem; margin-bottom: .1rem;
    border-bottom: 2px solid var(--tv-acento);
    flex: 0 0 auto;
}
.tv-clas-div-nom {
    font-size: clamp(.85rem, 1.2vw, 1.35rem);
    font-weight: 800; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-clas-div-sex {
    font-size: clamp(.6rem, .75vw, .8rem);
    color: var(--tv-acento); font-weight: 800;
}

.tv-clas-bloques {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: clamp(.4rem, .9vw, .9rem);
    overflow: hidden;
}
.tv-clas-bloque { display: flex; flex-direction: column; gap: .25rem; min-height: 0; overflow: hidden; }
.tv-clas-categoria {
    display: flex; align-items: baseline; gap: .6rem;
    padding: .1rem .2rem .25rem;
    border-bottom: 1px solid rgba(46,50,96,.9);
    flex: 0 0 auto;
}
.tv-clas-cat-nom {
    font-size: clamp(.72rem, .95vw, 1.05rem);
    font-weight: 800; color: var(--tv-acento);
    text-transform: uppercase; letter-spacing: .08em;
}
.tv-clas-cat-n { font-size: clamp(.62rem, .75vw, .82rem); color: var(--tv-texto-suave); }
.tv-fila {
    display: grid;
    grid-template-columns: 3.2em 1fr auto auto;
    align-items: center;
    gap: clamp(.6rem, 1.2vw, 1.2rem);
    flex: 0 1 auto;
    max-height: 5.2rem;
    padding: clamp(.45rem, .85vw, .8rem) clamp(.8rem, 1.3vw, 1.3rem);
    background: var(--tv-panel);
    border: 1px solid var(--tv-panel-borde);
    border-radius: .6rem;
    /* Entrada escalonada: el retardo lo pone el JS por fila. */
    opacity: 0;
    transform: translateX(-1.6rem);
    animation: tv-entra-fila .55s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes tv-entra-fila {
    to { opacity: 1; transform: none; }
}
.tv-fila-podio-1 { border-color: var(--tv-oro);   background: linear-gradient(90deg, rgba(251,191,36,.16), var(--tv-panel) 60%); }
.tv-fila-podio-2 { border-color: var(--tv-plata); background: linear-gradient(90deg, rgba(203,213,225,.13), var(--tv-panel) 60%); }
.tv-fila-podio-3 { border-color: var(--tv-bronce);background: linear-gradient(90deg, rgba(217,119,6,.14), var(--tv-panel) 60%); }

.tv-fila-pos {
    font-size: clamp(1rem, 1.5vw, 1.6rem);
    font-weight: 800;
    color: var(--tv-texto-suave);
    text-align: center;
}
.tv-fila-podio-1 .tv-fila-pos { color: var(--tv-oro); }
.tv-fila-podio-2 .tv-fila-pos { color: var(--tv-plata); }
.tv-fila-podio-3 .tv-fila-pos { color: var(--tv-bronce); }

.tv-fila-nombre {
    font-size: clamp(.95rem, 1.4vw, 1.5rem);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tv-fila-club {
    display: block;
    font-size: clamp(.68rem, .82vw, .9rem);
    color: var(--tv-texto-suave);
    font-weight: 500;
}
.tv-fila-diana {
    font-size: clamp(.7rem, .85vw, .95rem);
    color: var(--tv-texto-suave);
    font-weight: 700;
    padding: .15rem .5rem;
    border: 1px solid var(--tv-panel-borde);
    border-radius: .35rem;
}
.tv-fila-total {
    font-size: clamp(1.1rem, 1.8vw, 2rem);
    font-weight: 800;
    min-width: 3.2em;
    text-align: right;
}

/* Variante compacta: cuando la división trae varias categorías en la misma
   diapositiva, las filas se aprietan para que quepan todas. */
.tv-fila-compacta {
    max-height: none;
    grid-template-columns: 1.8em minmax(0,1fr) auto;
    padding: clamp(.16rem, .3vw, .32rem) clamp(.45rem, .75vw, .75rem);
    border-radius: .4rem;
    gap: .4rem;
}
.tv-fila-compacta .tv-fila-nombre { font-size: clamp(.7rem, .95vw, 1.02rem); }
.tv-fila-compacta .tv-fila-total { font-size: clamp(.78rem, 1.02vw, 1.15rem); }
.tv-fila-compacta .tv-fila-pos { font-size: clamp(.66rem, .85vw, .95rem); }
.tv-fila-compacta .tv-fila-club { font-size: clamp(.52rem, .64vw, .68rem); }
.tv-fila-compacta .tv-fila-diana { font-size: clamp(.55rem, .66vw, .72rem); }

/* Cuando una columna trae muchas categorías, todo se aprieta un poco más
   para que quepa sin cortarse. */
.tv-clas-col .tv-clas-categoria { padding: 0 0 .12rem; }
.tv-clas-col .tv-clas-cat-nom { font-size: clamp(.6rem, .78vw, .85rem); }
.tv-clas-col .tv-clas-cat-n { font-size: clamp(.52rem, .62vw, .68rem); }
.tv-clas-col .tv-clas-bloque { gap: .1rem; }

/* ── Diana y tablilla ───────────────────────────────────────────────── */
.tv-panel {
    background: var(--tv-panel);
    border: 1px solid var(--tv-panel-borde);
    border-radius: clamp(.6rem, 1vw, 1rem);
    padding: clamp(.9rem, 1.5vw, 1.5rem);
    min-height: 0;
}

/* Diana en TRES columnas: D1 | identidad | D2. */
.tv-diana-layout {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1rem, 2vw, 2rem);
}
.tv-diana-3col {
    /* Las dianas mandan: la columna central solo lleva foto, nombre y totales. */
    grid-template-columns: minmax(0, 1.15fr) minmax(11rem, .7fr) minmax(0, 1.15fr);
    align-items: stretch;
}
.tv-diana-2col { grid-template-columns: minmax(0, 1fr) minmax(13rem, .8fr); }

.tv-diana-col {
    display: flex; flex-direction: column; min-height: 0; padding: .6rem;
    align-items: center;
}
.tv-diana-col-cab {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex: 0 0 auto; margin-bottom: .4rem;
}
.tv-diana-col-total { font-size: clamp(1.1rem, 1.7vw, 1.8rem); font-weight: 800; }

/* OJO: aquí NO se limita el canvas (max-width/max-height). El visor fija el
   tamaño con `style.width/height`; cualquier tope de CSS lo descuadra y deja
   huecos o recortes. Solo se centra. */
/* Proporción del papel de triple: 1 : 1.55. Si la caja es más ancha, el visor
   tiene que encoger la diana para caber en el alto. */
.tv-diana-canvas {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
    min-height: 0; min-width: 0; padding: .2rem; overflow: hidden;
    aspect-ratio: 1 / 1.55;
    max-width: 100%;
    margin: 0 auto;
}
.tv-diana-canvas .tv-canvas-diana-cv { display: block; flex: 0 0 auto; }

/* Columna central: foto, nombre, club con su logo y totales. */
.tv-diana-centro { display: flex; align-items: center; justify-content: center; }
.tv-ident-cab {
    display: flex; align-items: center; gap: clamp(.7rem, 1.2vw, 1.1rem);
    min-width: 0; width: 100%;
}
.tv-ident-foto {
    width: clamp(4rem, 7vw, 7.5rem); height: clamp(4rem, 7vw, 7.5rem);
    border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 2px solid var(--tv-acento); background: var(--tv-panel);
}
.tv-ident-inicial {
    width: clamp(4rem, 7vw, 7.5rem); height: clamp(4rem, 7vw, 7.5rem);
    border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tv-acento), var(--tv-acento-2));
    font-size: clamp(1.6rem, 2.8vw, 3rem); font-weight: 800; color: #fff;
}
.tv-ident-textos { min-width: 0; }
.tv-ident-club { display: flex; align-items: center; gap: .45rem; margin-top: .25rem; }
.tv-ident-logo {
    height: clamp(1.3rem, 1.9vw, 2rem); width: auto; max-width: 4.5rem;
    object-fit: contain;
    /* Fondo claro: los logos vienen con transparencia y sobre el panel
       oscuro se perdían (daban la impresión de estar rotos). */
    background: #fff;
    border-radius: .25rem;
    padding: 1px 3px;
}
.tv-totales-grande { flex-direction: column; gap: .7rem; padding-top: 1.2rem; }

.tv-identidad { display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.tv-identidad-nombre {
    font-size: clamp(1.3rem, 2.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}
.tv-identidad-club {
    font-size: clamp(.8rem, 1vw, 1.05rem);
    color: var(--tv-texto-suave);
}
.tv-diana-distancias { display: flex; gap: .4rem; margin-top: .4rem; }
.tv-dist-chip {
    font-size: clamp(.72rem, .88vw, .95rem);
    font-weight: 800;
    padding: .2rem .6rem;
    border-radius: 9999px;
    border: 1px solid currentColor;
}
.tv-dist-chip.d1 { color: var(--tv-d1); }
.tv-dist-chip.d2 { color: var(--tv-d2); }

.tv-totales { display: flex; gap: clamp(1rem, 2vw, 2rem); margin-top: auto; padding-top: 1rem; }
.tv-total-bloque { display: flex; flex-direction: column; }
.tv-total-lbl {
    font-size: clamp(.68rem, .8vw, .85rem);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tv-texto-suave);
    font-weight: 700;
}
.tv-total-val { font-size: clamp(1.4rem, 2.4vw, 2.6rem); font-weight: 800; line-height: 1; }

/* Tablilla de series */
.tv-tablilla { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Rejilla de la diapositiva de tablillas: 2 deportistas en fila, cada uno
   con sus dos distancias. Cuatro tablillas en total. */
/* DOS deportistas por diapositiva: uno arriba y otro abajo. Cada fila lleva
   las dos distancias (D1 y D2) lado a lado dentro de su deportista. */
.tv-tab-grid-rejilla {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(.6rem, 1vw, 1rem);
    overflow: hidden;
}
.tv-tab-grid-rejilla.tv-tab-grid-una {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}
/* Cada deportista: nombre arriba y debajo sus dos tablillas. */
.tv-tab-deportista {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.tv-tab-deportista .tv-tab-grid {
    flex: 1 1 auto;
    min-height: 0;
}
.tv-tab-deportista { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.tv-tab-nombre {
    display: flex; align-items: baseline; gap: .5rem;
    padding: 0 .2rem .3rem; flex: 0 0 auto;
    border-bottom: 1px solid rgba(46,50,96,.9);
    margin-bottom: .35rem;
}
.tv-tab-nombre-txt {
    font-size: clamp(.85rem, 1.15vw, 1.3rem);
    font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tv-tab-club {
    font-size: clamp(.56rem, .7vw, .75rem);
    color: var(--tv-texto-suave);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Las dos distancias de un deportista, lado a lado. */
.tv-tab-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(.4rem, .8vw, .8rem);
}
.tv-tab-grid.tv-tab-grid-una { grid-template-columns: minmax(0, 1fr); }
.tv-tab-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* Cabecera de cada tablilla: la distancia y su total bien grandes. */
.tv-tab-dist {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; margin-bottom: .35rem; flex: 0 0 auto;
}
.tv-tab-dist-total {
    font-size: clamp(1.1rem, 1.7vw, 1.8rem);
    font-weight: 800;
}
/* En dos columnas las filas van más apretadas para que quepan las dos. */
/* Con CUATRO tablillas en pantalla hay que apretar de verdad. */
.tv-tab-grid-rejilla .tv-tab-nombre { margin-bottom: .2rem; }
.tv-tab-grid-rejilla .tv-tab-nombre-txt { font-size: clamp(.8rem, 1.1vw, 1.25rem); }
.tv-tab-grid .tv-serie { padding: .1rem .3rem; gap: .25rem; grid-template-columns: 1.8em minmax(0,1fr) 3em 3.4em; }
.tv-tab-grid .tv-tablilla-cab { padding: .15rem .3rem; gap: .25rem; grid-template-columns: 1.8em minmax(0,1fr) 3em 3.4em; }
.tv-tab-grid .tv-tablilla-cab span:nth-child(3),
.tv-tab-grid .tv-tablilla-cab span:nth-child(4) { text-align: right; }
.tv-tab-grid .tv-serie-flechas { gap: .15rem; }
.tv-tab-grid .tv-serie-num,
.tv-tab-grid .tv-serie-sub,
.tv-tab-grid .tv-serie-acum { font-size: clamp(.6rem, .78vw, .88rem); }
.tv-tab-grid .tv-flecha {
    min-width: 1.6em; height: 1.6em;
    font-size: clamp(.6rem, .78vw, .88rem);
}
.tv-tab-grid .tv-tab-dist-total { font-size: clamp(.9rem, 1.3vw, 1.3rem); }
.tv-tab-grid .tv-total-val { font-size: clamp(.85rem, 1.1vw, 1.1rem); }
.tv-tab-grid .tv-total-lbl { font-size: clamp(.5rem, .6vw, .64rem); }
/* Con una sola tablilla (o pocas series) la caja no debe ocupar todo el
   alto: dejaba un hueco negro enorme debajo. */
.tv-tab-col { max-height: 100%; }
.tv-tab-grid .tv-tab-col { align-self: start; }
/* Con dos columnas el ancho se parte: los rotulos de la cabecera se solapan
   ("SERIE"+"FLECHAS", "SUBTOTAL"+"ACUMULADO"). Se separan y se recortan. */
.tv-tab-grid .tv-tablilla-cab span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(.56rem, .68vw, .72rem);
    letter-spacing: .03em;
}
/* "Subtotal"/"Acumulado" no caben enteros al lado: se abrevian. */
.tv-tab-grid .tv-tablilla-cab span:nth-child(3) { text-align: right; }
.tv-tab-grid .tv-tablilla-cab span:nth-child(3)::after { content: ""; }
.tv-tab-grid .tv-tablilla-cab span:nth-child(4) { text-align: right; }
.tv-tab-grid .tv-serie-flechas { gap: .2rem; }
.tv-tablilla-cab {
    display: grid;
    grid-template-columns: 3.2em minmax(0, 1fr) 4.5em 5em;
    gap: .6rem;
    padding: .3rem .8rem;
    font-size: clamp(.66rem, .78vw, .82rem);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tv-texto-suave);
    font-weight: 700;
    border-bottom: 1px solid var(--tv-panel-borde);
    flex: 0 0 auto;
}
.tv-serie {
    display: grid;
    grid-template-columns: 3.2em minmax(0, 1fr) 4.5em 5em;
    align-items: center;
    gap: .6rem;
    padding: clamp(.3rem, .6vw, .6rem) .8rem;
    border-bottom: 1px solid rgba(46,50,96,.6);
    opacity: 0;
    transform: translateY(.7rem);
    animation: tv-entra-serie .4s ease forwards;
}
@keyframes tv-entra-serie { to { opacity: 1; transform: none; } }
.tv-serie-num { font-weight: 800; color: var(--tv-acento); font-size: clamp(.8rem, 1vw, 1.05rem); }
.tv-serie-flechas { display: flex; gap: .3rem; flex-wrap: wrap; }
.tv-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9em;
    height: 1.9em;
    padding: 0 .25em;
    border-radius: .3rem;
    background: #262a52;
    font-size: clamp(.8rem, 1.05vw, 1.15rem);
    font-weight: 800;
}
.tv-flecha.diez { background: var(--tv-oro); color: #3b2a00; }
.tv-flecha.nueve { background: #4b5cc4; color: #fff; }
.tv-flecha.fallo { background: #7f1d1d; color: #fecaca; }
.tv-serie-sub { text-align: right; font-weight: 700; color: var(--tv-texto-suave); font-size: clamp(.85rem, 1.05vw, 1.15rem); }
.tv-serie-acum { text-align: right; font-weight: 800; font-size: clamp(.95rem, 1.25vw, 1.4rem); }

/* ── VS: duelo entre dos deportistas ────────────────────────────────── */
.tv-vs { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tv-vs-rejilla {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: stretch;
}
.tv-vs-lado {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(.8rem, 2vw, 2rem);
}
/* El bloque de identidad va arriba y el total grande en el centro: sin
   separación los números quedaban flotando en mitad de un panel vacío. */
.tv-vs-lado {
    /* Contenido agrupado en el CENTRO del panel. Antes el recuento caía al
       borde inferior y el total quedaba flotando en mitad de un hueco. */
    justify-content: center;
    padding-left: clamp(1rem, 2vw, 2rem);
    padding-right: clamp(1rem, 2vw, 2rem);
}
.tv-vs-cuenta { margin-top: .8rem; }
.tv-vs-a { border-color: rgba(143,162,255,.6); }
.tv-vs-b { border-color: rgba(240,168,255,.6); }
.tv-vs-ident { display: flex; align-items: center; gap: .8rem; width: 100%; min-width: 0; }
.tv-vs-foto {
    width: clamp(4rem, 6.5vw, 7rem); height: clamp(4rem, 6.5vw, 7rem);
    border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 2px solid rgba(150,160,220,.7);
}
.tv-vs-textos { min-width: 0; }
.tv-vs-nombre {
    font-size: clamp(1rem, 1.6vw, 1.7rem); font-weight: 800; line-height: 1.15;
    overflow-wrap: anywhere;
}
.tv-vs-club { font-size: clamp(.66rem, .82vw, .9rem); color: var(--tv-texto-suave); }
.tv-vs-total {
    font-size: clamp(2.6rem, 6vw, 6rem); font-weight: 800; line-height: 1;
}
.tv-vs-a .tv-vs-total { color: #8fa2ff; }
.tv-vs-b .tv-vs-total { color: #f0a8ff; }
.tv-vs-parciales { display: flex; gap: .5rem; }
.tv-vs-parcial {
    font-size: clamp(.66rem, .85vw, .95rem); font-weight: 700;
    color: var(--tv-texto-suave);
    border: 1px solid var(--tv-panel-borde); border-radius: .4rem;
    padding: .15rem .5rem;
}
/* Recuento por valor en BARRAS COMPARABLES.
   Los dos deportistas comparten escala, así que la longitud de la barra dice
   de un vistazo quién lleva más flechas de cada valor. */
.tv-vs-cuenta {
    display: flex; flex-direction: column;
    gap: .28rem; margin-top: 1rem; width: 100%;
    max-width: 26rem;
}
.tv-barra-fila {
    display: grid;
    grid-template-columns: 3.4em 1fr 2.4em;
    align-items: center;
    gap: .5rem;
}
.tv-barra-et {
    font-size: clamp(.66rem, .85vw, .95rem);
    font-weight: 800; color: var(--tv-texto-suave);
    text-align: right;
}
.tv-barra-et.es-diez { color: var(--tv-oro); }
.tv-barra-pista {
    height: clamp(.7rem, 1.1vw, 1.1rem);
    background: rgba(120,130,190,.22);
    border-radius: 9999px;
    overflow: hidden;
}
.tv-barra-relleno {
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, #8fa2ff, #b48cff);
    /* Se anima el ancho al aparecer: las barras "crecen" y se comparan mejor. */
    animation: tv-barra-crece 1s cubic-bezier(.2,.8,.3,1) both;
    transform-origin: left center;
}
.tv-barra-relleno.es-diez { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.tv-barra-relleno.es-nueve { background: linear-gradient(90deg, #8fa2ff, #667eea); }
@keyframes tv-barra-crece {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
.tv-barra-n {
    font-size: clamp(.72rem, .92vw, 1.05rem);
    font-weight: 800; text-align: right;
}

.tv-vs-centro {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; padding: 0 clamp(.3rem, .8vw, .8rem);
}
.tv-vs-vs {
    font-size: clamp(1.4rem, 2.6vw, 2.8rem); font-weight: 900;
    color: #fff; letter-spacing: .06em;
    background: linear-gradient(135deg, #8fa2ff, #f0a8ff);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tv-vs-dif {
    font-size: clamp(.7rem, .95vw, 1.05rem);
    color: var(--tv-texto-suave); font-weight: 700; white-space: nowrap;
}

/* ── Gráficas (progresión y evolución de puestos) ───────────────────── */
.tv-grafica-escena { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.tv-grafica-caja {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; padding: .6rem;
}
.tv-svg { width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; }

/* La línea se dibuja sola: el trazo se "escribe" de izquierda a derecha.
   Es CSS puro (dashoffset), aguanta horas sin gastar CPU de JS. */
.tv-linea-anim {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: tv-traza 2.2s ease-out forwards;
}
@keyframes tv-traza { to { stroke-dashoffset: 0; } }

.tv-punto-anim {
    opacity: 0;
    animation: tv-aparece .35s ease forwards;
    animation-delay: 1.6s;
}
@keyframes tv-aparece { to { opacity: 1; } }

/* Leyenda de la evolución: un item por participante, con su color. */
.tv-evo-leyenda {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem 1.1rem;
    padding-top: .6rem; font-size: clamp(.62rem, .8vw, .9rem);
    color: var(--tv-texto-suave); font-weight: 700;
}
.tv-evo-item { display: inline-flex; align-items: center; gap: .35rem; }
.tv-evo-marca {
    width: 1.1rem; height: .32rem; border-radius: 9999px;
    display: inline-block; flex: 0 0 auto;
}
.tv-evo-nombre { color: var(--tv-texto); font-weight: 600; }
.tv-evo-final { color: var(--tv-texto-suave); }

/* Aviso de pausa (mantener el dedo o barra espaciadora). */
.tv-pausa {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.9);
    display: flex; align-items: center; gap: .6rem;
    padding: clamp(.7rem, 1.2vw, 1.2rem) clamp(1.2rem, 2.4vw, 2.4rem);
    background: rgba(15,16,32,.88);
    border: 2px solid var(--tv-acento);
    border-radius: 9999px;
    font-size: clamp(1rem, 1.8vw, 1.9rem);
    font-weight: 800;
    color: #fff;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 60;
}
.tv-pausa.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tv-pausa-icono { color: var(--tv-acento); letter-spacing: -.1em; }

/* ── Espera y pie ───────────────────────────────────────────────────── */
.tv-vacio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    color: var(--tv-texto-suave);
}
.tv-vacio-icono { font-size: clamp(3rem, 6vw, 6rem); opacity: .35; }
.tv-vacio-texto { font-size: clamp(1rem, 1.6vw, 1.7rem); font-weight: 700; color: var(--tv-texto); }
.tv-vacio-sub { font-size: clamp(.8rem, 1.05vw, 1.1rem); }

.tv-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: clamp(.7rem, .85vw, .9rem);
    color: var(--tv-texto-suave);
    padding: 0 .3rem;
}
/* Barra de progreso de la diapositiva: dice cuánto falta para la siguiente.
   Medía 3 px y el relleno era del mismo azul que el fondo: no se veía.
   Ahora 14 px, fondo claro, relleno en degradado cálido y brillo. */
.tv-progreso {
    flex: 1;
    height: 14px;
    background: rgba(120,130,190,.35);
    border: 1px solid rgba(150,160,220,.55);
    border-radius: 9999px;
    overflow: hidden;
    max-width: 55%;
    position: relative;
}
/* La barra se anima con @keyframes, NO con transition: con `transition` se
   reiniciaba a 0 en cada escena y la animacion arrancaba a tirones. Aqui la
   duracion se fija desde JS con `--tv-duracion` y el navegador la interpola
   de forma continua. */
.tv-progreso-barra {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background: linear-gradient(90deg, #8fa2ff 0%, #b48cff 55%, #f0a8ff 100%);
    border-radius: 9999px;
    box-shadow: 0 0 16px rgba(180,140,255,.95);
}
.tv-progreso-barra.corriendo {
    animation: tv-progreso var(--tv-duracion, 5s) linear forwards;
}
@keyframes tv-progreso {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Sin movimiento: sin animaciones de entrada, todo aparece ya colocado. */
@media (prefers-reduced-motion: reduce) {
    .tv-escena, .tv-fila, .tv-serie { transition: none; animation: none; opacity: 1; transform: none; }
    .tv-estado-chip.live .tv-punto { animation: none; }
}