/* ==========================================================================
   PRIME CHAMPIONS · MODO COPERO TORNEO
   Archivo NUEVO: css/prime-copero-torneo.css

   AUTOSUFICIENTE POR DISEÑO. Todos los selectores llevan el prefijo .ct*, que
   no existe en ningún otro archivo de css/: así ningún !important de
   prime-theme.css o prime-claro.css puede pisar nada de acá, y nada de acá
   puede romper el Copero clásico, que comparte el vocabulario del dominio pero
   no una sola clase.

   TODO EL COLOR SALE DE TOKENS --pc-*: funciona en oscuro y en html.modo-claro
   sin duplicar reglas.

   La pantalla se dibuja entera desde js/copero-torneo.js, así que este archivo
   es el único sitio donde vive el aspecto del modo.
   ========================================================================== */

#coperoTorneoScreen {
    --ct-verde: #1f7a4d;
    --ct-verde-oscuro: #14532f;
    --ct-gap: 16px;
}

#ctContenido {
    display: grid;
    gap: var(--ct-gap);
    padding: 20px;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    color: var(--pc-texto);
}

/* ==========================================================================
   1 · MENÚ DE ENTRADA
   ========================================================================== */

.ctHero {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    padding: 24px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-lg);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--pc-glow-suave) 0%, transparent 60%),
        var(--pc-superficie-2);
}

.ctBadge {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--pc-primario-alt);
}

.ctHeroTitulo {
    margin: 4px 0 0;
    font-size: clamp(1.4rem, 4.6vw, 2.1rem);
    font-weight: 900;
    line-height: 1.15;
}

.ctHeroBajada {
    margin: 0;
    max-width: 62ch;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--pc-texto-suave);
}

.ctMenuGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--ct-gap);
}

.ctPanel {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}
.ctPanel h3 { margin: 0; font-size: 1.05rem; }

.ctPanel label {
    font-size: .8rem;
    font-weight: 700;
    color: var(--pc-texto-suave);
}

.ctPanel input,
.ctPanel select,
.ctBarraSala select,
.ctRenombrar input {
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-fondo-elevado);
    color: var(--pc-texto);
    font-family: inherit;
    font-size: .95rem;
}
.ctPanel input:focus-visible,
.ctPanel select:focus-visible { outline: 2px solid var(--pc-primario); outline-offset: 1px; }

.ctNota { margin: 0; font-size: .85rem; color: var(--pc-texto-suave); line-height: 1.45; }
.ctNotaFina { font-size: .76rem; color: var(--pc-texto-tenue); }

/* ==========================================================================
   2 · LOBBY
   ========================================================================== */

.ctBarraSala {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    padding: 14px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}

.ctCodigoCaja { display: flex; align-items: center; gap: 10px; }
.ctCodigoEtiqueta {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}
.ctCodigoValor {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: .22em;
    color: var(--pc-oro);
}
.ctCopiar {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}
.ctCopiar:hover { color: var(--pc-texto); border-color: var(--pc-primario); }

.ctBarraDatos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-left: auto;
    font-size: .82rem;
    color: var(--pc-texto-suave);
}
.ctBarraDatos b { color: var(--pc-texto); }

.ctCampoLinea { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--pc-texto-suave); }
.ctCampoLinea select { width: auto; padding: 7px 10px; }

.ctAvisoElegir {
    margin: 0;
    padding: 12px 16px;
    border-left: 3px solid var(--pc-primario);
    border-radius: var(--pc-radio-sm);
    background: var(--pc-superficie-3);
    font-size: .9rem;
    color: var(--pc-texto-suave);
}

.ctMiEquipo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    padding: 14px 18px;
    border: 1px solid var(--pc-primario);
    border-radius: var(--pc-radio);
    background: color-mix(in srgb, var(--pc-primario) 10%, var(--pc-superficie-2));
}
.ctMiEquipoEscudo { font-size: 2rem; line-height: 1; }
.ctMiEquipoDatos { display: grid; }
.ctMiEquipoEtiqueta {
    font-size: .66rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--pc-primario-alt);
}
.ctMiEquipoNombre { font-size: 1.1rem; }

.ctMiPuesto { display: flex; align-items: center; gap: 8px; }
.ctMiPuestoIcono { font-size: 1.4rem; }
.ctMiPuesto div { display: grid; }
.ctMiPuesto span { font-size: .74rem; color: var(--pc-texto-tenue); }

.ctRenombrar { display: flex; gap: 8px; margin-left: auto; }
.ctRenombrar input { width: 180px; padding: 8px 10px; font-size: .85rem; }
.ctRenombrar button {
    padding: 8px 12px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    font-size: .8rem;
    cursor: pointer;
}

/* --- Los equipos --- */

.ctEquiposGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 12px;
    align-items: start;
}

.ctEquipo {
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
    overflow: hidden;
}
.ctEquipo.esMio { border-color: var(--pc-primario); box-shadow: 0 0 0 1px var(--pc-primario) inset; }

.ctEquipoCab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "escudo nombre flecha" "escudo meta flecha";
    align-items: center;
    gap: 0 12px;
    width: 100%;
    padding: 13px 16px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ctEquipoCab:focus-visible { outline: 2px solid var(--pc-primario); outline-offset: -2px; }

.ctEquipoEscudo { grid-area: escudo; font-size: 1.7rem; line-height: 1; }
.ctEquipoNombre { grid-area: nombre; font-weight: 800; font-size: .98rem; }
.ctEquipoMeta { grid-area: meta; font-size: .76rem; color: var(--pc-texto-tenue); }
.ctEquipoMeta b { color: var(--pc-texto-suave); }
.ctEquipoFlecha {
    grid-area: flecha;
    font-style: normal;
    color: var(--pc-texto-tenue);
    transition: transform var(--pc-rapido) var(--pc-entrada);
}
.ctEquipo.esAbierto .ctEquipoFlecha { transform: rotate(180deg); }

/* El detalle de puestos usa el mismo colapso 0fr→1fr del cuadro del torneo:
   anima sin conocer el alto y no necesita medir nada en JS. */
.ctEquipoPuestos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    padding: 0 12px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--pc-normal) var(--pc-entrada), padding var(--pc-normal);
}
.ctEquipo.esAbierto .ctEquipoPuestos { max-height: 420px; padding: 0 12px 14px; }

.ctPuesto {
    display: grid;
    gap: 1px;
    justify-items: center;
    padding: 8px 4px;
    min-height: 62px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--pc-rapido), transform var(--pc-rapido);
}
.ctPuesto.esLibre:hover { border-color: var(--pc-primario); transform: translateY(-2px); }
.ctPuesto.esPersona { background: var(--pc-superficie); border-color: var(--pc-borde-fuerte); cursor: default; }
.ctPuesto.esMio { border-color: var(--pc-oro); box-shadow: 0 0 0 1px var(--pc-oro) inset; }
.ctPuesto:disabled { opacity: .9; }

.ctPuestoIcono { font-size: 1.05rem; line-height: 1; }
.ctPuestoNombre { font-size: .64rem; font-weight: 800; letter-spacing: .06em; color: var(--pc-texto); }
.ctPuestoQuien {
    font-size: .6rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pc-texto-tenue);
}
.ctPuesto.esPersona .ctPuestoQuien { color: var(--pc-primario-alt); }

.ctArranque {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    padding: 18px;
    border: 1px dashed var(--pc-borde-fuerte);
    border-radius: var(--pc-radio);
}

.ctEsperando {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 16px;
    font-size: .9rem;
    color: var(--pc-texto-suave);
}

/* ==========================================================================
   3 · CHARLA TÉCNICA
   ========================================================================== */

.ctCharla { display: grid; gap: 14px; }

.ctCharlaCab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.ctEyebrow {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pc-primario-alt);
}
.ctCharlaTitulo { margin: 2px 0 0; font-size: 1.3rem; }
.ctCharlaReloj {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    font-size: .85rem;
    color: var(--pc-texto-suave);
}
.ctCharlaReloj b { color: var(--pc-oro); font-size: 1rem; }

.ctBye {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--pc-oro-fondo);
    border-radius: var(--pc-radio);
    background: color-mix(in srgb, var(--pc-oro-fondo) 10%, var(--pc-superficie-2));
    color: var(--pc-oro);
    font-weight: 700;
}

.ctDuelo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}
.ctDueloLado { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.ctDueloLado b { font-size: 1rem; overflow-wrap: anywhere; }
.ctDueloEscudo { font-size: 2.4rem; line-height: 1; }
.ctDueloMedia { font-size: .74rem; color: var(--pc-texto-tenue); }
.ctDueloVs {
    font-size: .8rem;
    font-weight: 900;
    letter-spacing: .16em;
    color: var(--pc-texto-tenue);
}

.ctBloque {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}
.ctBloqueCab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.ctBloqueCab h4 { margin: 0; font-size: 1rem; }

.ctPuntos {
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pc-oro-fondo) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--pc-oro-fondo) 45%, transparent);
    color: var(--pc-oro);
    font-size: .75rem;
    font-weight: 800;
}
.ctPuntos.esVacio { background: var(--pc-superficie-3); border-color: var(--pc-borde); color: var(--pc-texto-tenue); }

.ctStats { display: grid; gap: 7px; }
.ctStat {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 2fr) auto auto;
    align-items: center;
    gap: 10px;
}
.ctStatNombre { font-size: .82rem; color: var(--pc-texto-suave); min-width: 0; }
.ctStatBarra {
    height: 7px;
    border-radius: 999px;
    background: var(--pc-superficie-3);
    overflow: hidden;
}
.ctStatBarra i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pc-primario-hondo), var(--pc-primario-alt));
    transition: width var(--pc-normal) var(--pc-entrada);
}
.ctStatValor { font-size: .88rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.ctStatValor em { color: var(--pc-exito); font-style: normal; font-size: .78em; }
.ctStatBotones { display: flex; gap: 4px; }
.ctStatBotones button {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    color: var(--pc-texto);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.ctStatBotones button:disabled { opacity: .35; cursor: default; }
.ctStatBotones button:hover:not(:disabled) { border-color: var(--pc-primario); }

.ctEsps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.ctEsp {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ctEsp b { color: var(--pc-texto); font-size: .88rem; }
.ctEsp span { font-size: .75rem; line-height: 1.35; }
.ctEsp.esActiva { border-color: var(--pc-primario); background: color-mix(in srgb, var(--pc-primario) 12%, var(--pc-superficie-3)); }

.ctPlanteos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.ctPlanteo {
    position: relative;
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.ctPlanteo b { color: var(--pc-texto); font-size: .9rem; }
.ctPlanteo span { font-size: .76rem; line-height: 1.35; }
.ctPlanteo.esElegido { border-color: var(--pc-oro-fondo); background: color-mix(in srgb, var(--pc-oro-fondo) 10%, var(--pc-superficie-3)); }
.ctVotos {
    position: absolute;
    top: 8px; right: 10px;
    font-style: normal;
    font-size: .66rem;
    font-weight: 800;
    color: var(--pc-oro);
}

.ctListos { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ctListo {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--pc-borde);
    background: var(--pc-superficie-3);
    font-size: .78rem;
    color: var(--pc-texto-tenue);
}
.ctListo.esListo { border-color: var(--pc-exito); color: var(--pc-texto-suave); }
.ctListo em { font-style: normal; opacity: .7; }

.ctAcciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ==========================================================================
   4 · EL PARTIDO
   ========================================================================== */

.ctMarcador {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background:
        radial-gradient(100% 120% at 50% 0%, var(--pc-glow-suave) 0%, transparent 65%),
        var(--pc-superficie-2);
}
.ctMarcador.esFinal { border-color: var(--pc-oro-fondo); }

.ctMarcadorLado {
    display: grid;
    justify-items: center;
    gap: 2px;
    text-align: center;
    min-width: 0;
    padding: 6px;
    border-radius: var(--pc-radio-sm);
    transition: background-color var(--pc-normal);
}
/* Quién tiene la pelota se marca con un borde fino y un rótulo, no con un
   bloque de color: el bloque tapaba media cabecera y hacía parecer que el
   marcador estaba descentrado. */
.ctMarcadorLado.tienePelota {
    box-shadow: 0 0 0 1px var(--pc-primario) inset;
    background: color-mix(in srgb, var(--pc-primario) 8%, transparent);
}
.ctMarcadorLado.tienePelota::after {
    /* El escape unicode se come UN espacio como terminador: hacen falta dos
       para que quede uno de verdad entre la pelota y el texto. */
    content: "\26bd  con la pelota";
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pc-primario-alt);
}
.ctMarcadorEscudo { font-size: 2.2rem; line-height: 1; }
.ctMarcadorNombre { font-size: .95rem; overflow-wrap: anywhere; }
.ctMarcadorTuyo {
    font-style: normal;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pc-primario-alt);
}

/* Una columna: los goles arriba y el minuto debajo. Con `grid-auto-flow:
   column` el minuto se colaba como una cuarta columna al lado del segundo gol
   y el marcador quedaba descentrado. */
.ctMarcadorCifras {
    display: grid;
    justify-items: center;
    gap: 3px;
}
.ctMarcadorGoles {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ctMarcadorGoles span { color: var(--pc-texto-tenue); font-weight: 400; }
.ctMarcadorMinuto,
.ctMarcadorPenales {
    font-style: normal;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
    white-space: nowrap;
}
.ctMarcadorPenales { color: var(--pc-oro); }

.ctMomentum {
    position: relative;
    margin-bottom: 14px;                   /* el sitio de la etiqueta */
    height: 8px;
    border-radius: 999px;
    background: var(--pc-superficie-3);
    /* SIN overflow:hidden: recortaba la etiqueta, que vive debajo de la barra.
       El radio lo pone la propia barra de dominio. */
}
.ctMomentumA {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pc-primario-hondo), var(--pc-primario-alt));
    transition: width var(--pc-lento) var(--pc-entrada);
}
/* La etiqueta va FUERA de la barra. Dentro, con mix-blend-mode: difference,
   el texto cambiaba de color según por dónde iba el dominio y en la mitad del
   recorrido quedaba verde sobre violeta: ilegible justo cuando el partido
   está parejo, que es cuando más se mira. */
.ctMomentumEtiqueta {
    position: absolute;
    left: 0;
    top: 12px;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
    pointer-events: none;
}

.ctPestanas {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    padding: 5px;
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-3);
}
.ctPestanas button {
    padding: 10px 8px;
    border: 0;
    border-radius: var(--pc-radio-sm);
    background: none;
    color: var(--pc-texto-tenue);
    font-family: inherit;
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--pc-rapido), color var(--pc-rapido);
}
.ctPestanas button.esActiva { background: var(--pc-primario-hondo); color: #fff; }

/* --- La cancha: cuatro zonas y una pelota --- */

.ctCancha {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--ct-verde-oscuro) 38%, transparent) 0%,
            color-mix(in srgb, var(--ct-verde) 26%, transparent) 50%,
            color-mix(in srgb, var(--ct-verde-oscuro) 38%, transparent) 100%),
        var(--pc-superficie-2);
}

/* La franja de sentido: sin ella, cuatro cajas en fila no dicen hacia dónde se
   va. Con ella se lee "tal equipo ataca -> arco del otro". */
.ctCanchaSentido {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    color: color-mix(in srgb, #fff 78%, transparent);
}
.ctCanchaAtaca b { color: #fff; }
.ctCanchaFlecha { color: var(--pc-oro); font-weight: 900; }
.ctCanchaArco { margin-left: auto; color: color-mix(in srgb, #fff 62%, transparent); }

.ctCanchaZonas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

/* Las zonas ya recorridas quedan encendidas: se ve el avance de la jugada. */
.ctZona.esPasada { border-style: solid; background: color-mix(in srgb, #fff 6%, transparent); }

.ctZona {
    position: relative;
    display: grid;
    align-content: space-between;
    justify-items: center;
    min-height: 74px;
    padding: 8px 4px;
    border-radius: var(--pc-radio-sm);
    border: 1px dashed color-mix(in srgb, #fff 14%, transparent);
    background: color-mix(in srgb, #000 18%, transparent);
}
.ctZona.esActiva {
    border-style: solid;
    border-color: var(--pc-oro-fondo);
    background: color-mix(in srgb, var(--pc-oro-fondo) 14%, transparent);
}
.ctZonaNombre {
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, #fff 72%, transparent);
    text-align: center;
}
.ctZonaPelota { font-size: 1.6rem; line-height: 1; animation: ctPulso 1.6s ease-in-out infinite; }
.ctCanchaPie { margin: 0; font-size: .84rem; color: var(--pc-texto); text-align: center; }
.ctCanchaPie b { color: var(--pc-oro); }

/* --- El panel de decisión: el corazón del modo --- */

.ctDecision {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border: 2px solid var(--pc-primario);
    border-radius: var(--pc-radio);
    background:
        radial-gradient(120% 100% at 50% 0%, var(--pc-glow-suave) 0%, transparent 62%),
        var(--pc-superficie);
    box-shadow: 0 0 34px -14px var(--pc-glow);
}
.ctDecision.esDefensa { border-color: var(--pc-info); box-shadow: none; }
.ctDecision.esOcasion { border-color: var(--pc-oro-fondo); box-shadow: 0 0 34px -12px var(--pc-oro-glow); }

.ctDecisionCab { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ctDecisionCab h4 { margin: 2px 0 0; font-size: 1.1rem; }
.ctDecisionSub { margin: 3px 0 0; font-size: .84rem; color: var(--pc-texto-suave); }
.ctDecisionSub b { color: var(--pc-texto); }

.ctReloj { display: grid; gap: 5px; justify-items: end; min-width: 90px; }
.ctReloj > span { font-size: 1.2rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--pc-oro); }
.ctRelojPista { width: 90px; height: 6px; border-radius: 999px; background: var(--pc-superficie-3); overflow: hidden; }
.ctRelojPista i { display: block; height: 100%; background: var(--pc-oro); transition: width 200ms linear; }
.ctRelojPista i.esUrgente { background: var(--pc-peligro); }

.ctOpciones { display: grid; gap: 8px; }

.ctOpcion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: var(--pc-radio-sm);
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-2);
    color: var(--pc-texto);
    font-family: inherit;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--pc-rapido), transform var(--pc-rapido), background-color var(--pc-rapido);
}
.ctOpcion:hover:not(:disabled) { border-color: var(--pc-primario); transform: translateX(3px); }
.ctOpcion:focus-visible { outline: 2px solid var(--pc-primario); outline-offset: 2px; }
.ctOpcion:disabled { opacity: .55; cursor: default; transform: none; }
.ctOpcion.esElegida {
    opacity: 1;
    border-color: var(--pc-exito);
    background: color-mix(in srgb, var(--pc-exito) 14%, var(--pc-superficie-2));
}
.ctOpcionTexto { min-width: 0; }

.ctOpcionProb {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.ctOpcionProb.esAlta  { background: color-mix(in srgb, var(--pc-exito) 22%, transparent); color: var(--pc-exito); }
.ctOpcionProb.esMedia { background: color-mix(in srgb, var(--pc-aviso) 22%, transparent); color: var(--pc-aviso); }
.ctOpcionProb.esBaja  { background: color-mix(in srgb, var(--pc-peligro) 22%, transparent); color: var(--pc-peligro); }

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

.ctPanelEspera,
.ctPanelFin,
.ctSinPartido {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
    font-size: .9rem;
    color: var(--pc-texto-suave);
}
.ctPanelEspera div { display: grid; }
.ctPanelEspera b { color: var(--pc-texto); }
.ctPanelFin { display: grid; gap: 4px; border-color: var(--pc-oro-fondo); text-align: center; }
.ctPanelFin b { font-size: 1.05rem; color: var(--pc-oro); }
.ctSinPartido { justify-content: center; text-align: center; }
.ctSinPartido p { margin: 0; }

/* --- Penales --- */

.ctPenales {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
    border: 1px solid var(--pc-oro-fondo);
    border-radius: var(--pc-radio);
    background: color-mix(in srgb, var(--pc-oro-fondo) 8%, var(--pc-superficie-2));
}
.ctPenales h4 { margin: 0; font-size: .95rem; color: var(--pc-oro); }
.ctPenalFila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
}
.ctPenalEquipo { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctPenalMarcas { display: flex; gap: 4px; }
.ctPenalMarcas em { font-size: .74rem; color: var(--pc-texto-tenue); }
.ctPenal { font-style: normal; font-size: .95rem; }
.ctPenal.esAfuera, .ctPenal.esAtajado { opacity: .55; }
.ctPenalFila b { font-size: 1.1rem; font-weight: 900; font-variant-numeric: tabular-nums; }

/* --- Relato --- */

.ctRelato {
    padding: 14px 18px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}
.ctRelato h4 { margin: 0 0 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-texto-tenue); }
.ctRelato ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }

.ctRelatoLinea {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    border-left: 2px solid transparent;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--pc-texto-suave);
}
.ctRelatoMin { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--pc-texto-tenue); }
.ctRelatoTexto { min-width: 0; overflow-wrap: anywhere; }

.ctRelatoLinea.es-gol      { border-left-color: var(--pc-oro); background: color-mix(in srgb, var(--pc-oro-fondo) 10%, transparent); color: var(--pc-texto); font-weight: 600; }
.ctRelatoLinea.es-atajada  { border-left-color: var(--pc-info); }
.ctRelatoLinea.es-exito    { border-left-color: var(--pc-exito); }
.ctRelatoLinea.es-quite    { border-left-color: var(--pc-primario); }
.ctRelatoLinea.es-fallo    { border-left-color: var(--pc-peligro); }
.ctRelatoLinea.es-peligro  { border-left-color: var(--pc-peligro); }
.ctRelatoLinea.es-aviso    { border-left-color: var(--pc-aviso); }
.ctRelatoLinea.es-ambientacion { opacity: .65; }

/* --- Planteles --- */

.ctPlanteles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.ctPlantel {
    padding: 14px 16px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-2);
}
.ctPlantel.esMio { border-color: var(--pc-primario); }
.ctPlantel h4 { margin: 0 0 10px; font-size: .95rem; }
.ctPlantel h4 em { font-style: normal; font-size: .76rem; color: var(--pc-texto-tenue); }
.ctPlantel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ctPlantel li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 7px;
    font-size: .82rem;
}
.ctPlantel li.esYo { background: color-mix(in srgb, var(--pc-primario) 14%, transparent); }
.ctPlantel li.esExpulsado { opacity: .45; text-decoration: line-through; }
.ctPlantelPos { font-size: .66rem; font-weight: 800; color: var(--pc-texto-tenue); }
.ctPlantelNombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctPlantelOvr { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pc-texto); }
.ctPlantelEnergia { width: 34px; height: 5px; border-radius: 999px; background: var(--pc-superficie-3); overflow: hidden; }
.ctPlantelEnergia i { display: block; height: 100%; background: var(--pc-exito); }
.ctPlantelGol { font-size: .74rem; color: var(--pc-oro); }

/* ==========================================================================
   5 · EL CUADRO
   ========================================================================== */

.ctCuadro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px;
    align-items: start;
}

.ctRonda {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio);
    background: var(--pc-superficie-3);
}
.ctRonda.esActiva { background: var(--pc-superficie-2); border-color: var(--pc-borde-fuerte); }
.ctRonda.esCerrada { opacity: .82; }

.ctRondaCab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ctRondaCab h4 { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ctRondaCab span { font-size: .7rem; color: var(--pc-texto-tenue); font-variant-numeric: tabular-nums; }

.ctRondaDuelos { display: grid; gap: 7px; }

.ctTarjetaDuelo {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--pc-borde);
    border-radius: var(--pc-radio-sm);
    background: var(--pc-superficie-2);
}
.ctTarjetaDuelo.esMio { border-color: var(--pc-primario); box-shadow: 0 0 0 1px var(--pc-primario) inset; }
.ctTarjetaDuelo.esVivo { border-color: var(--pc-oro-fondo); }
.ctTarjetaDuelo.esBye { border-style: dashed; opacity: .85; }

.ctDueloEtiqueta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}
.ctVivoPunto {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pc-peligro);
    animation: ctLatido 1.4s ease-out infinite;
}
.ctDueloMio {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pc-primario-hondo);
    color: #fff;
    font-size: .55rem;
}

.ctDueloEq {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.ctDueloEqEscudo { font-size: 1.05rem; line-height: 1; }
.ctDueloEqNombre { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctDueloEqGol { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--pc-texto-suave); }
.ctDueloEq.esGana .ctDueloEqNombre { font-weight: 800; color: var(--pc-texto); }
.ctDueloEq.esGana .ctDueloEqGol { color: var(--pc-oro); }
.ctDueloEq.esCae { opacity: .5; }

.ctMirar {
    margin-top: 4px;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid var(--pc-borde-fuerte);
    background: var(--pc-superficie-3);
    color: var(--pc-texto-suave);
    font-family: inherit;
    font-size: .74rem;
    cursor: pointer;
}
.ctMirar:hover { border-color: var(--pc-primario); color: var(--pc-texto); }

.ctCabeceraRonda { margin-left: auto; font-size: .78rem; color: var(--pc-texto-tenue); }

/* ==========================================================================
   6 · CORONACIÓN
   ========================================================================== */

.ctCoronacion {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 32px 20px 26px;
    border: 1px solid var(--pc-oro-fondo);
    border-radius: var(--pc-radio-lg);
    background:
        radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--pc-oro-fondo) 18%, transparent) 0%, transparent 70%),
        var(--pc-superficie-2);
    overflow: hidden;
    text-align: center;
}
.ctCoronacionAura {
    position: absolute;
    top: 10px;
    width: 150px; height: 150px;
    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(10px);
    opacity: .7;
    animation: ctAura 18s linear infinite;
    pointer-events: none;
}
.ctCoronacionEscudo { position: relative; font-size: 4rem; line-height: 1; }
.ctCoronacionKicker {
    position: relative;
    margin: 8px 0 0;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--pc-oro);
}
.ctCoronacionNombre {
    position: relative;
    margin: 0;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    font-weight: 900;
    overflow-wrap: anywhere;
}
.ctCoronacionCamino { position: relative; margin: 4px 0 0; font-size: .82rem; color: var(--pc-texto-suave); }

/* ==========================================================================
   7 · MOVIMIENTO
   ========================================================================== */

@keyframes ctPulso {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
}
@keyframes ctLatido {
    0%   { box-shadow: 0 0 0 0 var(--pc-peligro); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ctAura { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Sin movimiento no se pierde ninguna información: la pelota sigue en su zona,
   el punto rojo sigue siendo rojo y el aura sigue siendo dorada. */
@media (prefers-reduced-motion: reduce) {
    .ctZonaPelota,
    .ctVivoPunto,
    .ctCoronacionAura { animation: none !important; }
    .ctOpcion,
    .ctPuesto,
    .ctEquipoFlecha,
    .ctStatBarra i,
    .ctMomentumA { transition: none !important; }
    .ctEquipoPuestos { transition: none !important; }
}

/* ==========================================================================
   8 · RESPONSIVE
   ========================================================================== */

@media (max-width: 720px) {
    #ctContenido { padding: 14px; --ct-gap: 12px; }
    .ctBarraDatos { margin-left: 0; }
    .ctRenombrar { margin-left: 0; width: 100%; }
    .ctRenombrar input { flex: 1; width: auto; }
    .ctStat { grid-template-columns: minmax(80px, 1fr) auto auto; }
    .ctStatBarra { display: none; }          /* el número ya dice todo */
    .ctDecisionCab { flex-direction: column; }
    .ctReloj { justify-items: start; }
    .ctPestanas button { font-size: .76rem; padding: 9px 4px; }
    .ctZona { min-height: 62px; }
    .ctZonaNombre { font-size: .54rem; }
    .ctPlantel li { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
    .ctPlantelEnergia { display: none; }
}

@media (max-width: 420px) {
    .ctMarcador { grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 12px; }
    .ctMarcadorEscudo { font-size: 1.7rem; }
    .ctMarcadorNombre { font-size: .78rem; }
    .ctEquipoPuestos { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .ctCodigoValor { font-size: 1.1rem; letter-spacing: .16em; }
}

/* ==========================================================================
   9 · TEMA CLARO
   Casi todo sale por tokens; sólo hay que bajar los glows, calibrados para
   fondo oscuro.
   ========================================================================== */

html.modo-claro .ctDecision { box-shadow: 0 0 0 1px var(--pc-primario) inset; }
html.modo-claro .ctDecision.esOcasion { box-shadow: 0 0 0 1px var(--pc-oro-fondo) inset; }
html.modo-claro .ctCoronacionAura { opacity: .45; }
html.modo-claro .ctZonaNombre { color: color-mix(in srgb, #000 62%, transparent); }
html.modo-claro .ctCanchaSentido { color: color-mix(in srgb, #000 74%, transparent); }
html.modo-claro .ctCanchaAtaca b { color: #000; }
html.modo-claro .ctCanchaArco { color: color-mix(in srgb, #000 58%, transparent); }


/* ==========================================================================
   MINIJUEGO DE PUNTERÍA, JUEGO SUCIO Y CRUCES SIN PELOTA
   --------------------------------------------------------------------------
   El cursor de la barra se posiciona con `left` y se centra con `margin-left`
   negativo, NO con `transform: translateX(-50%)`: prime-ui.css pisa `transform`
   con !important y el cursor quedaba corrido medio ancho respecto de donde
   realmente estaba.
   ========================================================================== */

.ctMini {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(167, 139, 250, 0.30);
}
.ctMini.esArquero {
    background: rgba(56, 189, 248, 0.10);
    border-color: rgba(125, 211, 252, 0.32);
}

.ctMiniCab { display: flex; flex-direction: column; gap: 2px; }
.ctMiniCab b { font-size: 15px; color: #f4f2ff; }
.ctMiniCab span { font-size: 12px; color: #a8a2c8; }

/* El arco: tres por tres, siempre cuadrado y siempre tocable. */
.ctArco {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 8px);
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-bottom-width: 4px;
}

.ctArcoZona {
    min-height: 46px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 12, 32, 0.55);
    color: #cfc9ea;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.ctArcoZona:hover:not(:disabled) { background: rgba(124, 58, 237, 0.28); }
.ctArcoZona.esElegida {
    background: rgba(124, 58, 237, 0.55);
    border-color: #a78bfa;
    color: #fff;
}
.ctArcoZona.esBloqueada {
    opacity: .28;
    cursor: not-allowed;
    background: repeating-linear-gradient(45deg,
        rgba(255,255,255,0.05) 0 4px, transparent 4px 8px);
}

/* La barra de puntería. */
.ctBarra {
    position: relative;
    height: 26px;
    border-radius: 13px;
    background: rgba(10, 8, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}
/* El ancho de la zona verde sale de los atributos del jugador, asi que el
   left tambien se calcula en el cliente: 50% menos la mitad del ancho. Fijarlo
   aca dejaba el verde corrido y el jugador frenaba mirando el lugar equivocado. */
.ctBarraVerde {
    position: absolute;
    top: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(74, 222, 128, 0.55), rgba(34, 197, 94, 0.35));
    border-left: 1px solid rgba(134, 239, 172, 0.8);
    border-right: 1px solid rgba(134, 239, 172, 0.8);
}
.ctBarraCursor {
    position: absolute;
    top: -2px; bottom: -2px;
    width: 4px;
    margin-left: -2px;
    border-radius: 2px;
    background: #fde047;
    box-shadow: 0 0 10px rgba(253, 224, 71, 0.9);
}
.ctBarraCursor.esFrenado { background: #f472b6; box-shadow: 0 0 12px rgba(244, 114, 182, 0.9); }

.ctFrenar {
    min-height: 48px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: #1a1030;
    background: linear-gradient(180deg, #fde047, #f59e0b);
    cursor: pointer;
}
.ctFrenar:disabled {
    background: rgba(255, 255, 255, 0.10);
    color: #8b85a8;
    cursor: not-allowed;
}

/* Las sucias: se ven distinto porque son otra cosa. */
.ctSucias {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed rgba(248, 113, 113, 0.35);
}
.ctSuciasTitulo {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fca5a5;
}
.ctOpcion.esSucia {
    background: rgba(127, 29, 29, 0.30);
    border-color: rgba(248, 113, 113, 0.45);
}
.ctOpcion.esSucia:hover:not(:disabled) { background: rgba(153, 27, 27, 0.45); }
.ctOpcion.esSucia .ctOpcionTexto em {
    display: block;
    font-size: 11px;
    font-style: normal;
    color: #d8b4b4;
    margin-top: 2px;
}
.ctRiesgo {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: #fca5a5;
    white-space: nowrap;
}

/* Cómo llega el jugador: caliente, sentido, roto. */
.ctEstados { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ctEstado {
    font-style: normal;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fcd34d;
}

/* El cruce sin pelota. Amarillo porque no es la jugada: pasa en otro lado. */
.ctCruce {
    margin-bottom: 12px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(120, 53, 15, 0.28);
    border: 1px solid rgba(251, 191, 36, 0.40);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ctCruce.esMirando { opacity: .75; }
.ctCruceCab { display: flex; flex-direction: column; gap: 3px; }
.ctCruceCab b { font-size: 15px; color: #fde68a; }
.ctCruceCab span { font-size: 12.5px; color: #d6c7a8; }
.ctCruceCab em { font-size: 12px; font-style: normal; color: #fbbf24; }
.ctCruceOpciones { display: flex; flex-direction: column; gap: 8px; }
.ctCruceAviso { margin: 0; font-size: 11px; color: #b9a888; }

@media (max-width: 430px) {
    .ctArcoZona { min-height: 42px; font-size: 16px; }
    .ctMiniCab b { font-size: 14px; }
    .ctFrenar { min-height: 46px; font-size: 15px; }
}