/* ==========================================================================
   PRIME CHAMPIONS · CUADRO ELIMINATORIO DEL MODO TORNEO
   Archivo NUEVO: css/prime-cuadro.css
   Cargar en index.html DESPUÉS de css/prime-impostor.css (index.html:25).

   AUTOSUFICIENTE POR DISEÑO. Prefijos propios .pcCuadro* / .pcCol* / .pcLlave*
   / .pcPulso* / .pcChip* / .pcTrofeo* / .pcCoronacion* — verificado que ninguno
   existe hoy en css/ ni en js/. No edita .torneoPartidoCard,
   .torneoBracketContainer, .torneoScoreBadge, .torneoNavTabs ni ningún selector
   agrupado con otras pantallas, así que:
     · los !important de css/prime-theme.css:769-775 y css/prime-claro.css:306
       no pueden pisar nada de aquí (ese es el bug que hoy mata el resaltado
       inline de "mi partido", js/torneo.js:831);
     · no se rompe #menuSubasta, que reutiliza .torneoAmigosWrapper (index.html:546).

   TODO EL COLOR SALE DE TOKENS --pc-*: funciona en oscuro y en html.modo-claro
   sin duplicar reglas. color-mix() ya se usa en el proyecto
   (css/prime-anuncios.css, css/prime-desafio.css, css/prime-claro-ajustes.css).

   REGLA DE MOVIMIENTO: los keyframes de estado se escriben SÓLO con `from`.
   El estado final es el estado natural del elemento, así que apagarlos bajo
   prefers-reduced-motion deja el cuadro completo y correcto — ganador
   encendido, perdedor apagado, campeón coronado — sólo sin movimiento.
   ========================================================================== */

/* ==========================================================================
   0 · CONTENEDOR
   min-width/max-width son OBLIGATORIOS: .torneoAmigosWrapper es un grid
   (css/style.css:6346-6352) y un hijo con contenido ancho puede reventar la
   pista del grid. Ver también .torneoTabPanel más abajo.
   ========================================================================== */

.pcCuadro {
    --pcq-col: clamp(250px, 82vw, 320px);   /* ancho REAL de columna en móvil */
    --pcq-gap: 12px;
    --pcq-escudo: 26px;
    --pcq-stagger: 60ms;

    display: grid;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--pc-texto);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* El <div> que envuelve el contenido de la pestaña en js/torneo.js:651 pasa a
   llevar esta clase (ver cambiosEnJs): sin min-width:0 el scroll horizontal de
   la pista puede ensanchar el grid en lugar de desplazarse. */
.torneoTabPanel { min-width: 0; max-width: 100%; }

/* ==========================================================================
   1 · BARRA DE PULSO — la fase en palabras y en números
   ========================================================================== */

.pcCuadro__pulso {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(80px, 1fr) minmax(0, auto);
    align-items: center;
    gap: 10px 14px;
    padding: 10px 14px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
    box-shadow: var(--pc-sombra-1);
    min-width: 0;
}

.pcPulso__fase { display: grid; gap: 2px; min-width: 0; }

.pcPulso__eyebrow {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.pcPulso__nombre {
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--pc-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcPulso__medidor {
    position: relative;
    height: 6px;
    min-width: 0;
    border-radius: 999px;
    background: var(--pc-superficie-3);
    box-shadow: inset 0 0 0 1px var(--pc-borde-suave);
    overflow: hidden;
}

/* Transición, NO animación: al repintar salta al valor correcto sin re-animar. */
.pcPulso__barra {
    width: var(--pcq-avance, 0%);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pc-primario), var(--pc-oro-fondo));
    transition: width var(--pc-lento) var(--pc-salida);
}

.pcPulso__cifras {
    display: grid;
    gap: 2px;
    justify-items: end;
    text-align: right;
    font-size: .72rem;
    color: var(--pc-texto-suave);
    white-space: nowrap;
}
.pcPulso__cifra b { color: var(--pc-texto); font-size: .84rem; }

.pcPulso__suspenso {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--pc-oro);
}

.pcPulso__punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pc-oro-fondo);
    box-shadow: 0 0 0 0 var(--pc-oro-glow);
    animation: pcCuadroLatido 2s ease-out infinite;
}

/* ==========================================================================
   2 · TU CAMINO — el hilo personal, en una línea
   ========================================================================== */

.pcCuadroTu {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid var(--pc-borde);
    border-left: 3px solid var(--pc-primario);
    border-radius: var(--pc-radio-sm);
    background: var(--pc-superficie-3);
    font-size: .78rem;
    color: var(--pc-texto-suave);
    min-width: 0;
}
.pcCuadroTu b { color: var(--pc-texto); }
.pcCuadroTu span { min-width: 0; overflow-wrap: anywhere; }

.pcCuadroTu__escudo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
}

.pcCuadroTu--fuera { border-left-color: var(--pc-peligro-fondo); }
.pcCuadroTu--fuera .pcCuadroTu__escudo { filter: grayscale(1); opacity: .7; }

.pcCuadroTu--espectador {
    border-left-color: var(--pc-borde-fuerte);
    color: var(--pc-texto-tenue);
}

/* ==========================================================================
   3 · HILO DE RONDAS
   ========================================================================== */

.pcCuadroChips { display: flex; flex-wrap: wrap; gap: 8px; }

.pcChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;                      /* área táctil */
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie-2);
    color: var(--pc-texto-suave);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--pc-rapido) var(--pc-entrada),
                color var(--pc-rapido) var(--pc-entrada),
                background-color var(--pc-rapido) var(--pc-entrada);
}
.pcChip:hover { border-color: var(--pc-borde-fuerte); color: var(--pc-texto); }
.pcChip:focus-visible { outline: 2px solid var(--pc-primario); outline-offset: 2px; }

.pcChip__punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}
.pcChip__ok { color: var(--pc-exito); font-size: .8rem; }

/* Cuántas llaves de esa ronda están resueltas. Con una sola columna a la vista
   es lo que reemplaza al vistazo general que daba ver las cinco. */
.pcChip__cuenta {
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--pc-superficie-3);
    color: var(--pc-texto-tenue);
    font-size: .62rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pcChip--cerrada { opacity: .72; }

/* En juego ≠ a la vista. El punto late en la ronda que se está jugando; el
   relleno marca la que estás mirando. Antes eran la misma clase y al elegir
   otra ronda parecía que el torneo había cambiado de fase. */
.pcChip--enJuego .pcChip__punto {
    background: var(--pc-oro);
    opacity: 1;
    animation: pcCuadroLatido 2s ease-out infinite;
}
.pcChip--enJuego { color: var(--pc-texto); }

.pcChip--activa {
    color: var(--pc-texto);
    border-color: var(--pc-primario);
    background: color-mix(in srgb, var(--pc-primario) 14%, var(--pc-superficie-2));
    box-shadow: 0 0 0 1px var(--pc-primario) inset, 0 0 18px -6px var(--pc-glow);
}
.pcChip--activa .pcChip__punto { background: var(--pc-primario); opacity: 1; }
.pcChip--activa .pcChip__cuenta { background: var(--pc-superficie); color: var(--pc-texto-suave); }

.pcChip--futura {
    border-style: dashed;
    color: var(--pc-texto-tenue);
    background: transparent;
}

.pcChip--final { border-color: color-mix(in srgb, var(--pc-oro-fondo) 55%, var(--pc-borde)); }
.pcChip--final:not(.pcChip--futura) { color: var(--pc-oro); }

/* ==========================================================================
   4 · PISTA Y COLUMNAS
   Base (hasta 1099px) = UNA ronda a la vista, la que eligen los chips.

   La versión anterior era una pista con scroll horizontal y columnas de 86vw.
   Se leía mal por dos motivos que se suman: para recorrer el cuadro había que
   desplazarse en los dos ejes, y como las cinco columnas estaban siempre en el
   DOM visible, la página medía más de 2000px de alto en cualquier teléfono.
   Con una sola columna desaparecen las dos cosas y la columna es tan ancha
   como la pantalla, que es lo que necesitan los nombres de club.
   ========================================================================== */

.pcCuadro__pista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--pcq-gap);
    min-width: 0;
}

/* Fuera de la ronda elegida no se dibuja nada: ni alto ni scroll. */
.pcCol { display: none; }
.pcCol--visible { display: grid; }

.pcCol {
    position: relative;
    min-width: 0;
    gap: 10px;
    align-content: start;
    padding: 12px 12px 14px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
    overflow: hidden;
    /* SIN animación de entrada: se re-dispararía en cada cambio de pestaña
       (js/torneo.js:135-139 fuerza lastHash=null) y sería un flash de pantalla
       completa cada vez que alguien vuelve al cuadro. */
}

.pcCol__cab {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pc-borde-suave);
}

.pcCol__nombre {
    margin: 0;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-texto);
}

.pcCol__meta {
    margin-left: auto;
    font-size: .66rem;
    color: var(--pc-texto-tenue);
    white-space: nowrap;
}

/* Barrido de luz: única señal en bucle de "esto está pasando ahora". */
.pcCol__barrido {
    position: absolute;
    inset: 0 auto auto 0;
    width: 34%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--pc-primario), transparent);
    animation: pcCuadroBarrido 3.4s var(--pc-entrada) infinite;
}

.pcCol__cuerpo { display: grid; gap: 9px; }

/* --- Estados de columna --- */

.pcCol--cerrada { background: var(--pc-superficie-3); border-color: var(--pc-borde-suave); }
.pcCol--cerrada .pcCol__nombre { color: var(--pc-texto-suave); }

.pcCol--activa {
    background: var(--pc-superficie);
    border-color: var(--pc-borde-fuerte);
    box-shadow: var(--pc-sombra-2), 0 0 32px -18px var(--pc-glow);
}

.pcCol--futura { background: transparent; border-style: dashed; }
.pcCol--futura .pcCol__nombre { color: var(--pc-texto-tenue); }

.pcCol--final { border-color: color-mix(in srgb, var(--pc-oro-fondo) 55%, var(--pc-borde)); }
.pcCol--final .pcCol__nombre { color: var(--pc-oro); }

.pcCol--corona {
    background:
        radial-gradient(120% 80% at 50% 0%,
            color-mix(in srgb, var(--pc-oro-fondo) 16%, transparent) 0%,
            transparent 62%),
        var(--pc-superficie);
    border-color: var(--pc-oro-fondo);
    box-shadow: var(--pc-sombra-3), 0 0 44px -20px var(--pc-oro-glow);
}

/* ==========================================================================
   5 · LA LLAVE — dos renglones y un detalle plegado
   --------------------------------------------------------------------------
   La llave anterior apilaba seis bloques: número, equipo local, franja
   "PASA A CUARTOS", equipo visitante, origen y goleadores. 140px de alto × 8
   llaves × 5 columnas. Acá queda la información que se lee de un vistazo —
   quién juega, quién ganó y por cuánto — y todo lo demás vive en el detalle,
   que se abre al tocar.
   ========================================================================== */

.pcLlave {
    position: relative;
    display: grid;
    gap: 0;
    padding: 7px 10px 7px 12px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-sm);
    background: var(--pc-superficie-2);
    min-width: 0;
}

/* Franja de estado del borde izquierdo. */
.pcLlave::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--pc-borde);
    z-index: 1;
}

/* El botón que envuelve a la llave resuelta. Es un botón de verdad —teclado y
   lector de pantalla incluidos— pero no tiene que parecerlo. */
.pcLlave__toque {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pcLlave__toque:focus-visible { outline: 2px solid var(--pc-primario); outline-offset: 3px; border-radius: 6px; }
.pcLlave__toqueTexto { display: block; }

.pcLlave__id {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-right: 14px;                   /* el sitio de la flecha */
    margin-bottom: 2px;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.pcLlave__sembrado,
.pcLlave__deDonde {
    font-style: normal;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--pc-texto-tenue);
    opacity: .9;
}

/* De dónde sale la llave: renglón propio sólo cuando hay sitio, en línea
   cuando no. Antes era un párrafo con borde punteado que sumaba 28px a cada
   una de las 24 llaves. */
.pcLlave__deDonde {
    flex: 1 1 100%;
    font-size: .64rem;
    letter-spacing: 0;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pcLlave__tanda {
    font-style: normal;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-oro-fondo) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-oro-fondo) 45%, transparent);
    color: var(--pc-oro);
    font-size: .55rem;
    letter-spacing: .1em;
}

/* La flecha va al final del renglón y gira al abrir. Es la única señal de que
   la llave esconde algo. */
/* Fuera del flujo: con `margin-left:auto` una cabecera larga —"Llave 4",
   "12º vs 21º", el chip Penales— la empujaba sola a un segundo renglón. */
.pcLlave__flecha {
    position: absolute;
    top: 7px;
    right: 9px;
    font-style: normal;
    font-size: .7rem;
    line-height: 1;
    color: var(--pc-texto-tenue);
    transition: transform var(--pc-rapido) var(--pc-entrada), color var(--pc-rapido);
}
.pcLlave--abrible:hover .pcLlave__flecha { color: var(--pc-texto-suave); }
.pcLlave--abierta .pcLlave__flecha { transform: rotate(180deg); color: var(--pc-primario); }

.pcLlave__lado {
    display: grid;
    grid-template-columns: var(--pcq-escudo) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    min-width: 0;
}

.pcLlave__escudo {
    width: var(--pcq-escudo);
    height: var(--pcq-escudo);
    object-fit: contain;
    transition: filter var(--pc-normal) var(--pc-entrada),
                opacity var(--pc-normal) var(--pc-entrada);
}

/* Hasta DOS líneas, y sólo las que haga falta. Con una sola, en las cinco
   columnas de escritorio se leía "Atlético de…", "Borussia Dor…", "Bayern
   Münc…": el nombre del club es lo primero que hay que poder leer en un
   cuadro. `-webkit-line-clamp: 2` deja los nombres cortos en un renglón, así
   que el alto sólo crece donde el nombre lo pide. El `title` guarda el
   completo y nombreCortoClub (js/torneo.js) ya podó los sufijos que no
   distinguen a nadie. */
.pcLlave__eq {
    min-width: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.22;
    color: var(--pc-texto);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.pcLlave__humano { font-size: .72rem; opacity: .85; }

.pcLlave__media {
    grid-column: 3;
    padding: 1px 5px;
    border: 1px solid var(--pc-borde);
    border-radius: 5px;
    font-size: .62rem;
    font-weight: 700;
    color: var(--pc-texto-tenue);
}

.pcLlave__gol {
    grid-column: 4;
    min-width: 24px;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pc-texto-suave);
}
.pcLlave__gol--vacio { color: var(--pc-texto-tenue); font-weight: 500; }
.pcLlave__gol--asterisco::after {
    content: "*";
    font-size: .7em;
    vertical-align: super;
    opacity: .75;
    cursor: help;
}

/* ==========================================================================
   5b · EL DETALLE
   Se dibuja siempre y el CSS lo colapsa: así abrir y cerrar es una clase, no
   un repintado, y el estado sobrevive al poll de cada 2 s.
   `grid-template-rows: 0fr → 1fr` anima el alto sin conocerlo de antemano.
   ========================================================================== */

.pcLlave__detalle {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows var(--pc-normal) var(--pc-entrada);
}
.pcLlave__detalle > * { min-height: 0; }
.pcLlave--abierta .pcLlave__detalle { grid-template-rows: 1fr; }

/* Ni la caja ni el elemento colapsado llevan aire propio: `0fr` pone el track
   en cero, pero el padding, el borde y el margen del ítem del grid NO se
   comprimen — medido, el detalle cerrado seguía midiendo 17px (7 de margen,
   9 de padding y 1 de borde) por llave. El separador va un nivel más adentro,
   donde su alto ya está dentro de la caja recortada. */
.pcDetalle__caja { margin: 0; padding: 0; border: 0; }
.pcDetalle__caja > :first-child {
    padding-top: 9px;
    margin-top: 7px;
    border-top: 1px solid var(--pc-borde-suave);
}

.pcDetalle__titulo {
    margin: 8px 0 4px;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
    text-align: left;
}

.pcDetalle__origen {
    margin: 0;
    font-size: .68rem;
    line-height: 1.35;
    color: var(--pc-texto-tenue);
    overflow-wrap: anywhere;
}

.pcDetalle__tanda {
    margin: 6px 0 0;
    font-size: .72rem;
    color: var(--pc-oro);
}
.pcDetalle__tanda b { font-weight: 800; }

.pcDetalle__goles {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
    font-size: .74rem;
    color: var(--pc-texto-suave);
}
.pcDetalle__goles li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pcDetalle__min {
    flex: 0 0 auto;
    min-width: 30px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--pc-oro);
}

.pcDetalle__vacio { margin: 0; font-size: .72rem; color: var(--pc-texto-tenue); }

.pcDetalle__stats {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}
.pcDetalle__stats caption { caption-side: top; }
.pcDetalle__stats tr { border-top: 1px solid var(--pc-borde-suave); }
.pcDetalle__stats td,
.pcDetalle__stats th {
    padding: 4px 2px;
    font-weight: 700;
    color: var(--pc-texto);
}
.pcDetalle__stats th {
    width: 55%;
    font-weight: 500;
    font-size: .66rem;
    color: var(--pc-texto-tenue);
    text-align: center;
}
.pcDetalle__stats td:first-child { text-align: left; width: 22.5%; }
.pcDetalle__stats td:last-child { text-align: right; width: 22.5%; }

.pcDetalle__medias {
    margin: 6px 0 0;
    font-size: .72rem;
    color: var(--pc-texto-tenue);
}
.pcDetalle__medias b { color: var(--pc-texto-suave); font-weight: 800; }

.pcDetalle__mvp {
    margin: 7px 0 0;
    font-size: .72rem;
    color: var(--pc-texto-suave);
}
.pcDetalle__mvp b { color: var(--pc-texto); }

/* ==========================================================================
   6 · ESTADO — VACÍA (la promesa del camino)
   ========================================================================== */

.pcLlave--vacia { border-style: dashed; background: transparent; opacity: .78; }
.pcLlave--vacia::before { background: transparent; }
.pcLlave--vacia .pcLlave__lado { grid-template-columns: var(--pcq-escudo) minmax(0, 1fr) auto; }

.pcLlave__silueta {
    display: grid;
    place-items: center;
    width: var(--pcq-escudo);
    height: var(--pcq-escudo);
    border-radius: 50%;
    border: 1px dashed var(--pc-borde-fuerte);
    color: var(--pc-texto-tenue);
    font-size: .66rem;
    font-style: normal;
    font-weight: 700;
}

.pcLlave__guion {
    height: 8px;
    max-width: 108px;
    border-radius: 999px;
    background: var(--pc-superficie-3);
}


/* ==========================================================================
   7 · ESTADO — PENDIENTE (suspenso)
   El sello "VS" y el hilo de luz que cruzaba la franja se fueron con la
   franja: eran dos renglones por llave para decir lo que ya dicen los dos
   guiones del marcador. El suspenso queda en la franja del borde, que respira.
   ========================================================================== */

.pcLlave--pendiente { border-color: var(--pc-borde-fuerte); }
.pcLlave--pendiente::before {
    background: var(--pc-oro-fondo);
    animation: pcCuadroLatir 2.6s var(--pc-entrada) infinite;
}

/* ==========================================================================
   8 · ESTADO — RESUELTA (ganador encendido / perdedor apagado)
   El ganador se calcula con la MISMA regla que el servidor:
   golesLocal > golesVisitante (routes/torneo.js:936, 964, 986, 1006, 1024).
   ========================================================================== */

.pcLlave--resuelta { background: var(--pc-superficie); }
.pcLlave--resuelta::before { background: var(--pc-oro-fondo); }

.pcLlave__lado--gana { position: relative; }
.pcLlave__lado--gana::before {
    content: "";
    position: absolute;
    left: -13px; top: 3px; bottom: 3px;
    width: 3px;
    border-radius: 999px;
    background: var(--pc-oro-fondo);
}
.pcLlave__lado--gana .pcLlave__eq { font-weight: 800; color: var(--pc-texto); }
.pcLlave__lado--gana .pcLlave__gol { color: var(--pc-oro); font-size: 1.16rem; }

/* El estado FINAL del perdedor es el apagado: por eso reduced-motion queda bien. */
.pcLlave__lado--cae { opacity: .45; }
.pcLlave__lado--cae .pcLlave__escudo { filter: grayscale(1); }
.pcLlave__lado--cae .pcLlave__eq { font-weight: 500; }

.pcLlave--penales { border-color: color-mix(in srgb, var(--pc-oro-fondo) 45%, var(--pc-borde)); }

/* --- Escalada de la Gran Final: tamaño, no un borde de 2px --- */

.pcLlave--granFinal {
    --pcq-escudo: 34px;
    padding: 13px 13px 13px 16px;
    border-color: var(--pc-oro-fondo);
}
.pcLlave--granFinal .pcLlave__eq  { font-size: .94rem; }
.pcLlave--granFinal .pcLlave__gol { font-size: 1.38rem; min-width: 32px; }

/* ==========================================================================
   9 · TU LLAVE — clase nueva, ningún !important la pisa
   ========================================================================== */

.pcLlave--mia {
    border-color: var(--pc-primario);
    box-shadow: 0 0 0 1px var(--pc-primario) inset, 0 0 22px -12px var(--pc-glow);
}
.pcLlave--mia::before { background: var(--pc-primario); }

.pcLlave__marca {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--pc-primario-hondo);
    border: 1px solid var(--pc-primario);
}

.pcLlave--miaFuera { border-color: var(--pc-peligro-fondo); box-shadow: none; }
.pcLlave--miaFuera::before { background: var(--pc-peligro-fondo); }
.pcLlave--miaFuera .pcLlave__marca {
    background: var(--pc-peligro-fondo);
    border-color: var(--pc-peligro-fondo);
}

/* ==========================================================================
   10 · TROFEO Y CORONACIÓN
   ========================================================================== */

.pcTrofeo {
    display: grid;
    place-items: center;
    padding: 10px 8px 4px;
}
.pcTrofeo__img {
    width: 68px;
    height: auto;
    filter: grayscale(1) opacity(.3);
    transition: filter var(--pc-lento) var(--pc-salida);
}
.pcTrofeo.esGanado .pcTrofeo__img {
    filter: none;
    drop-shadow: none;
}
.pcTrofeo.esGanado .pcTrofeo__img { filter: drop-shadow(0 4px 14px var(--pc-oro-glow)); }

.pcCoronacion {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 3px;
    margin-top: 4px;
    padding: 20px 14px 18px;
    border: 1px solid var(--pc-oro-fondo);
    border-radius: var(--pc-radio);
    background:
        radial-gradient(90% 70% at 50% 0%,
            color-mix(in srgb, var(--pc-oro-fondo) 20%, transparent) 0%,
            transparent 70%),
        var(--pc-superficie-2);
    overflow: hidden;
    text-align: center;
}

/* Destello diagonal: una sola pasada. */
.pcCoronacion::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(115deg,
        transparent 42%,
        color-mix(in srgb, var(--pc-oro-fondo) 34%, transparent) 50%,
        transparent 58%);
    transform: translateX(-70%);
    animation: pcCuadroDestello 1500ms 320ms var(--pc-salida) both;
    pointer-events: none;
}

.pcCoronacion__aura {
    position: absolute;
    top: 6px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        color-mix(in srgb, var(--pc-oro-fondo) 42%, transparent) 60deg,
        transparent 130deg,
        color-mix(in srgb, var(--pc-oro-fondo) 30%, transparent) 220deg,
        transparent 300deg);
    filter: blur(9px);
    opacity: .75;
    animation: pcCuadroAura 18s linear infinite;
    pointer-events: none;
}

.pcCoronacion__escudo {
    position: relative;
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px var(--pc-oro-glow));
    animation: pcCuadroSube 560ms var(--pc-salida) both;
}

.pcCoronacion__kicker {
    position: relative;
    margin: 6px 0 0;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--pc-oro);
}

.pcCoronacion__club {
    position: relative;
    margin: 0;
    font-size: clamp(1.2rem, 4.4vw, 1.7rem);
    font-weight: 900;
    line-height: 1.1;
    color: var(--pc-texto);
    overflow-wrap: anywhere;
}

.pcCoronacion__manager {
    position: relative;
    margin: 2px 0 0;
    font-size: .76rem;
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   11 · LEYENDA
   ========================================================================== */

.pcCuadro__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font-size: .68rem;
    color: var(--pc-texto-tenue);
}
.pcCuadro__leyenda b { color: var(--pc-texto-suave); }


/* ==========================================================================
   12 · KEYFRAMES
   Los de estado usan sólo `from`: el final es el estado natural.
   ========================================================================== */

@keyframes pcCuadroRevela   { from { opacity: 0; transform: scale(.965); } }
@keyframes pcCuadroGolpe    { from { opacity: 0; transform: rotateX(90deg) translateY(-4px); } }
@keyframes pcCuadroBarraGana{ from { transform: scaleY(0); opacity: 0; } }
@keyframes pcCuadroApaga    { from { opacity: 1; filter: none; } }
@keyframes pcCuadroSube     { from { opacity: 0; transform: translateY(14px) scale(.9); } }

@keyframes pcCuadroDestello {
    from { transform: translateX(-70%); }
    to   { transform: translateX(70%); opacity: 0; }
}
@keyframes pcCuadroLatir {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
@keyframes pcCuadroLatido {
    0%   { box-shadow: 0 0 0 0 var(--pc-oro-glow); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes pcCuadroBarrido {
    0%        { transform: translateX(-110%); opacity: 0; }
    18%       { opacity: 1; }
    72%, 100% { transform: translateX(300%); opacity: 0; }
}
@keyframes pcCuadroAura { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- El revelado SÓLO existe con .pcLlave--revelar, que el JS emite una única
       vez por marca id:marcador. Sin esa clase, nada se anima: por eso un
       cambio de pestaña o un poll no reinician nada. --- */

.pcLlave--revelar {
    animation: pcCuadroRevela 420ms var(--pc-salida) both;
    animation-delay: calc(var(--i, 0) * var(--pcq-stagger));
}
.pcLlave--revelar .pcLlave__gol {
    animation: pcCuadroGolpe 380ms var(--pc-salida) both;
    animation-delay: calc(var(--i, 0) * var(--pcq-stagger) + 120ms);
}
.pcLlave--revelar .pcLlave__lado--gana::before {
    transform-origin: center;
    animation: pcCuadroBarraGana 420ms var(--pc-salida) both;
    animation-delay: calc(var(--i, 0) * var(--pcq-stagger) + 180ms);
}
/* El perdedor se apaga DESPUÉS: primero se lee el marcador, después la caída. */
.pcLlave--revelar .pcLlave__lado--cae {
    animation: pcCuadroApaga 460ms var(--pc-salida) both;
    animation-delay: calc(var(--i, 0) * var(--pcq-stagger) + 340ms);
}

/* ==========================================================================
   13 · RESPONSIVE
   ========================================================================== */

/* --- Escritorio: las cinco rondas a la vista, alineadas como un bracket.
       `align-content: space-around` en el cuerpo de cada columna es lo que
       convierte cinco listas en un camino: la llave de cuartos queda a la
       altura del par de octavos que la alimenta, sin una sola línea
       conectora. Con `align-content: start` —lo que había— las columnas
       cortas se apelotonaban arriba y dejaban un hueco de 900px debajo. --- */
@media (min-width: 1100px) {
    .pcCuadro__pista {
        grid-template-columns: repeat(4, minmax(0, 1fr)) 1.22fr;
        align-items: stretch;
    }
    .pcCol {
        display: grid;                     /* todas visibles: no hay que elegir */
        align-content: stretch;
        grid-template-rows: auto minmax(0, 1fr);
    }
    .pcCol__cuerpo { align-content: space-around; }
    .pcCuadroChips { display: none; }      /* no hay nada que navegar */
    .pcTrofeo__img { width: 84px; }

    /* La columna de la Final no reparte: la coronación quedaría flotando. */
    .pcCol--final .pcCol__cuerpo { align-content: start; }

    /* La media pasa al detalle: son 34px que en cinco columnas le hacen falta
       al nombre del club, y es justo lo que separaba "Atlético de Madrid" de
       "Atlético de…". En una sola columna (móvil y tablet) se sigue viendo. */
    .pcLlave__media { display: none; }
}

/* --- Escritorio ancho de verdad: el panel del torneo se ensancha.
       `.contenidoSocial` mide min(1220px, 100%) y `.torneoAmigosWrapper` topa
       en 1200 (css/style.css:86 y 6346): con cinco columnas eso deja 198px por
       columna, que es la causa directa de "Atlético o de…". La clase la pone
       js/torneo.js:renderCuadroTorneo y sólo en la pestaña del cuadro, así que
       la tabla de 36 equipos y la jornada siguen donde estaban. --- */
@media (min-width: 1280px) {
    .contenidoSocial.esCuadroAncho { width: min(1520px, calc(100vw - 40px)); }
    .contenidoSocial.esCuadroAncho .torneoAmigosWrapper { max-width: 100%; }
}

/* --- Celular y tablet: una ronda a la vez (lo hace la base) y la barra de
       pulso apilada para no comerse el alto. --- */
@media (max-width: 600px) {
    .pcCuadro { --pcq-gap: 10px; }
    .pcCuadro__pulso {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        padding: 9px 12px;
    }
    .pcPulso__medidor { grid-column: 1 / -1; order: 3; }
    .pcPulso__cifras { align-self: center; }
    .pcPulso__suspenso { font-size: .68rem; }
}

/* --- Celular chico: chips deslizables en vez de apilados. --- */
@media (max-width: 400px) {
    .pcCuadro { --pcq-escudo: 24px; }
    .pcCuadroChips {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .pcCuadroChips::-webkit-scrollbar { display: none; }
    .pcChip { flex: 0 0 auto; }
    .pcPulso__eyebrow { display: none; }
    .pcLlave { padding: 7px 8px 7px 11px; }
    .pcLlave__eq { font-size: .8rem; }
    .pcLlave__gol { font-size: .96rem; min-width: 22px; }
    .pcLlave--granFinal { --pcq-escudo: 30px; }
    .pcLlave--granFinal .pcLlave__gol { font-size: 1.2rem; }
    .pcCoronacion__escudo { width: 68px; height: 68px; }
}

/* ==========================================================================
   14 · TEMA CLARO
   Casi todo sale solo por tokens; sólo hay que bajar los glows, calibrados
   para fondo oscuro (css/prime-theme.css:127-160).
   ========================================================================== */

html.modo-claro .pcCol--activa { box-shadow: var(--pc-sombra-2); }
html.modo-claro .pcCol--corona { box-shadow: var(--pc-sombra-2); }
html.modo-claro .pcChip--activa { box-shadow: 0 0 0 1px var(--pc-primario) inset; }
html.modo-claro .pcLlave--mia { box-shadow: 0 0 0 1px var(--pc-primario) inset; }
html.modo-claro .pcCoronacion__aura { opacity: .55; }
html.modo-claro .pcCoronacion__escudo { filter: none; }
html.modo-claro .pcTrofeo.esGanado .pcTrofeo__img { filter: none; }

/* ==========================================================================
   15 · SIN MOVIMIENTO — obligatorio (patrón de la casa, css/prime-ui.css:805-819)
   Todos los keyframes de estado terminan en el estado natural del elemento,
   así que apagarlos deja el cuadro completo y correcto. Sólo desaparece el
   movimiento; ninguna información se pierde.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pcPulso__barra { transition: none; }

    .pcPulso__punto,
    .pcChip--enJuego .pcChip__punto,
    .pcCol__barrido,
    .pcLlave--pendiente::before,
    .pcLlave--revelar,
    .pcLlave--revelar .pcLlave__gol,
    .pcLlave--revelar .pcLlave__lado--gana::before,
    .pcLlave--revelar .pcLlave__lado--cae,
    .pcCoronacion::after,
    .pcCoronacion__aura,
    .pcCoronacion__escudo {
        animation: none !important;
    }

    /* Sin movimiento, el barrido es ruido sin significado. */
    .pcCol__barrido,
    .pcCoronacion::after { display: none; }

    /* El borde de la llave pendiente se queda encendido; el aura, halo quieto. */
    .pcLlave--pendiente::before { opacity: 1; }
    .pcCoronacion__aura { opacity: .5; }

    /* El detalle abre y cierra de golpe, pero abre y cierra. */
    .pcLlave__detalle,
    .pcLlave__flecha,
    .pcChip,
    .pcLlave__escudo,
    .pcTrofeo__img { transition: none !important; }
}

/* ==========================================================================
   16 · ALTO CONTRASTE
   ========================================================================== */

@media (forced-colors: active) {
    .pcLlave,
    .pcCol { border-color: CanvasText; }
    .pcLlave__lado--cae { opacity: 1; }
    .pcLlave__lado--cae .pcLlave__escudo { filter: none; }
}