/* ==========================================================================
   MODO COPERO COOPERATIVO — estilos propios
   Se carga después de style.css y sólo añade lo nuevo: el panel de equipo, la
   barra de movimiento sin pelota, el scouting, los planteos, la tanda de
   penales y el modal de decisión con probabilidades.
   ========================================================================== */

:root {
    --cop-verde: #26a375;
    --cop-verde-claro: #40c796;
    --cop-violeta: #9346ea;
    --cop-violeta-claro: #a37ece;
    --cop-oro: #f4b82b;
    --cop-rojo: #ef4472;
    --cop-panel: rgba(28, 15, 42, 0.92);
    --cop-panel-borde: rgba(255, 255, 255, 0.1);
}

.coperoSubtexto {
    color: var(--cop-violeta-claro);
    font-size: 0.84rem;
    margin: -4px 0 10px 0;
    line-height: 1.45;
}

.coperoCodigoGrande {
    color: var(--cop-oro);
    font-size: 1.5rem;
    letter-spacing: 5px;
    font-weight: 900;
}

.coperoContador {
    color: var(--cop-violeta-claro);
    font-size: 0.9rem;
    margin-top: 4px;
}

.coperoBadgeOro {
    background: rgba(242, 174, 14, 0.2) !important;
    border-color: #f2ae0e !important;
    color: var(--cop-oro) !important;
}

.coperoAccionesFila {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}

.btnPrincipalCopero {
    background: linear-gradient(135deg, #26a375, #1d7e5a);
    font-size: 1.02rem;
}

.btnSecundarioCopero {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.coperoEsperaCapitan {
    text-align: center;
    color: var(--cop-violeta-claro);
    font-size: 0.9rem;
    margin-top: 12px;
}

.btnCampeonVolver {
    margin-top: 24px;
    display: block;
    margin-inline: auto;
    background: linear-gradient(135deg, #f2ae0e, #d4980b);
}

/* --------------------------------------------------------------------------
   LOBBY: camino de la copa y tarjetas de puesto
   -------------------------------------------------------------------------- */

.coperoCaminoBox {
    background: rgba(17, 10, 25, 0.6);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.coperoCaminoTitulo {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: var(--cop-verde-claro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coperoCamino {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.coperoRondaChip {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 150px;
}

.coperoRondaChip .rondaNombre {
    font-size: 0.68rem;
    color: var(--cop-violeta-claro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.coperoRondaChip strong {
    font-size: 0.86rem;
    color: #fff;
    line-height: 1.25;
}

.coperoRondaChip .rondaMedia {
    font-size: 0.7rem;
    color: var(--cop-oro);
    font-weight: 800;
}

.coperoRondaFlecha {
    color: var(--cop-violeta);
    font-weight: 900;
    flex: 0 0 auto;
}

.coperoSlotCard.slotBot {
    border-color: rgba(255, 255, 255, 0.14);
    opacity: 0.85;
}

.coperoSlotCard .slotLibre { color: var(--cop-violeta-claro); }

.coperoSlotCard .slotDesc {
    font-size: 0.72rem;
    color: rgba(212, 196, 232, 0.75);
    margin: 0;
    line-height: 1.35;
}

.btnCoperoElegirPos:disabled {
    opacity: 0.45;
    cursor: default;
}

/* --------------------------------------------------------------------------
   CHARLA TÉCNICA
   -------------------------------------------------------------------------- */

.coperoCharlaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

#coperoTimerEntrenamiento { color: var(--cop-verde-claro); font-size: 1.2rem; }
#coperoTimerEntrenamiento.coperoTimerUrgente { color: var(--cop-rojo); animation: copPulso 0.6s infinite alternate; }

@keyframes copPulso { from { opacity: 1; } to { opacity: 0.45; } }

/* Scouting del rival */
.scoutCabecera h4 {
    margin: 6px 0 2px 0;
    font-size: 1.02rem;
    color: #fff;
    line-height: 1.3;
}

.scoutBadge {
    display: inline-block;
    background: rgba(239, 68, 114, 0.18);
    border: 1px solid rgba(239, 68, 114, 0.45);
    color: #f8a9be;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.scoutEstrella { margin: 0; font-size: 0.82rem; color: var(--cop-oro); }

.scoutPlan {
    background: rgba(0, 0, 0, 0.28);
    border-left: 3px solid var(--cop-violeta);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: #ded2ef;
    margin: 12px 0;
}

.scoutBarras { display: flex; flex-direction: column; gap: 7px; }

.scoutBarra {
    display: grid;
    grid-template-columns: 92px 1fr 32px;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    color: #d5c4e8;
}

.scoutBarraTrack {
    height: 7px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.scoutBarraFill { height: 100%; border-radius: 4px; }
.scoutBarraFill.nivel-bajo  { background: linear-gradient(90deg, #26a375, #40c796); }
.scoutBarraFill.nivel-medio { background: linear-gradient(90deg, #d19b20, #f4b82b); }
.scoutBarraFill.nivel-alto  { background: linear-gradient(90deg, #c0355c, #ef4472); }

.scoutBarra b { text-align: right; font-weight: 800; color: #fff; }

/* Planteos votables */
.coperoPlanteosGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
}

.coperoPlanteoCard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 14px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.coperoPlanteoCard:hover { transform: translateY(-2px); border-color: var(--cop-verde); }
.coperoPlanteoCard.planteoVotado { background: rgba(38, 163, 117, 0.18); border-color: var(--cop-verde); }
.coperoPlanteoCard.planteoGanador { box-shadow: 0 0 0 2px var(--cop-oro) inset; }

.planteoIcono { font-size: 1.4rem; }
.planteoNombre { font-size: 0.92rem; }
.planteoDesc { font-size: 0.73rem; color: #c8b8dd; line-height: 1.4; }

.planteoVotos {
    font-size: 0.7rem;
    color: var(--cop-violeta-claro);
    font-weight: 700;
    margin-top: 2px;
}

.planteoElegidoTag {
    background: var(--cop-oro);
    color: #2b1841;
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
}

.coperoPlanteoResumen {
    font-size: 0.8rem;
    color: #d5c4e8;
    margin: 10px 0 0 0;
    text-align: center;
}

/* Atributos con glosario */
.statRowEntrenamiento {
    display: grid;
    grid-template-columns: minmax(120px, 1.5fr) 1fr auto auto auto;
    align-items: center;
    gap: 10px;
}

.statTexto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.statTexto .statNombre { width: auto; font-size: 0.84rem; }

.statDesc {
    font-size: 0.68rem;
    color: rgba(200, 184, 221, 0.8);
    line-height: 1.3;
}

.statBarWrapper { position: relative; }

.statBarPlus {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--cop-oro);
    border-radius: 4px;
}

.statPlus { color: var(--cop-verde-claro); }

.btnMinusStat {
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
}

.btnMinusStat:hover { background: var(--cop-rojo); }
.btnMinusHueco { display: inline-block; width: 30px; }

/* Especialidades */
.coperoEspGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 10px;
}

.coperoEspCard {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 14px;
    padding: 12px 10px;
    cursor: pointer;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.coperoEspCard:hover { transform: translateY(-2px); border-color: var(--cop-violeta); }
.coperoEspCard.espActiva { background: rgba(147, 70, 234, 0.2); border-color: var(--cop-violeta); }

.espIcono { font-size: 1.4rem; }
.espNombre { font-size: 0.9rem; }
.espDesc { font-size: 0.72rem; color: #c8b8dd; line-height: 1.4; }

/* Listos */
.coperoListoBox { align-items: center; }

.coperoListosFila {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 6px;
}

.chipListo {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.78rem;
    color: #d5c4e8;
}

.chipListo em { color: var(--cop-violeta-claro); font-style: normal; font-weight: 800; }
.chipListo.chipListoOk { background: rgba(38, 163, 117, 0.2); border-color: var(--cop-verde); color: #aeecd5; }
.btnListoActivo { background: linear-gradient(135deg, #1d7e5a, #145c41) !important; opacity: 0.9; }

/* --------------------------------------------------------------------------
   PARTIDO
   -------------------------------------------------------------------------- */

.coperoRondaEtiqueta {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--cop-verde-claro);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

#coperoMarcador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.coperoMinutoFila { margin-top: 8px; }

.coperoMinutoBadge {
    background: var(--cop-rojo);
    color: #fff;
    padding: 3px 12px;
    border-radius: 12px;
    font-weight: 900;
    font-size: 0.85rem;
}

.coperoMinutoBadge.minutoPenales { background: var(--cop-oro); color: #2b1841; }

.coperoMomentumBox { margin-top: 14px; }

.coperoMomentumTrack {
    height: 9px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
}

.coperoMomentumFill { height: 100%; border-radius: 5px; transition: width 0.6s ease, background 0.6s ease; }
.coperoMomentumFill.momAlto  { background: linear-gradient(90deg, #26a375, #40c796); }
.coperoMomentumFill.momMedio { background: linear-gradient(90deg, #7442ad, #9346ea); }
.coperoMomentumFill.momBajo  { background: linear-gradient(90deg, #c0355c, #ef4472); }

.coperoMomentumTexto {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #d5c4e8;
    font-weight: 700;
}

.coperoPartidoLayout {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 300px);
    gap: 16px;
    margin-top: 16px;
    align-items: start;
}

.coperoColumnaFeed { min-width: 0; }

/* Alto estable: el relato scrollea adentro y la página no se alarga sola. */
.coperoFeedContainer {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.feedItemRelato {
    display: grid;
    grid-template-columns: 34px 22px 1fr;
    align-items: start;
    gap: 6px;
}

.feedItemRelato.gol_rival {
    background: rgba(239, 68, 114, 0.14);
    border-left-color: var(--cop-rojo);
    color: #f8a9be;
}

.feedItemRelato.peligro {
    background: rgba(244, 184, 43, 0.12);
    border-left-color: var(--cop-oro);
    color: #f7dfa8;
}

.feedItemRelato.amarilla { border-left-color: var(--cop-oro); }
.feedItemRelato.roja { border-left-color: var(--cop-rojo); font-weight: 800; }
.feedItemRelato.ambientacion { opacity: 0.68; font-size: 0.85rem; }
.feedItemRelato.feedNuevo { animation: copEntradaFeed 0.35s ease; }

@keyframes copEntradaFeed {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.feedIcono { text-align: center; }

.coperoEspera {
    margin-top: 12px;
    padding: 10px 16px;
    background: rgba(147, 71, 234, 0.15);
    border: 1px solid rgba(147, 71, 234, 0.35);
    border-radius: 10px;
    color: #c59cf4;
    font-size: 0.9rem;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.esperaPulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cop-violeta);
    animation: copPulso 0.7s infinite alternate;
    flex: 0 0 auto;
}

/* Panel del equipo en vivo */
.coperoColumnaEquipo {
    background: var(--cop-panel);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 16px;
    padding: 12px;
}

.coperoPanelTitulo {
    margin: 0 0 10px 0;
    font-size: 0.82rem;
    color: var(--cop-verde-claro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coperoPanelEquipo { display: flex; flex-direction: column; gap: 4px; }

.coperoJugadorFila {
    display: grid;
    grid-template-columns: 24px 1fr 48px 30px auto auto;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.78rem;
    transition: background 0.2s;
}

.coperoJugadorFila.filaYo { background: rgba(38, 163, 117, 0.18); border-left: 3px solid var(--cop-verde); }
.coperoJugadorFila.filaConPelota { background: rgba(244, 184, 43, 0.18); box-shadow: 0 0 0 1px rgba(244, 184, 43, 0.5) inset; }
.coperoJugadorFila.filaExpulsado { opacity: 0.4; text-decoration: line-through; }

.filaDorsal { font-weight: 900; color: var(--cop-violeta); text-align: center; }
.filaDatos { display: flex; flex-direction: column; min-width: 0; }

/* El nombre se parte en varias líneas en vez de cortarse con '…': con
   'Cristiano Ronaldo da Silva' se perdía la mitad del texto en pantallas chicas. */
.filaNombre {
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.filaNombre em { color: var(--cop-verde-claro); font-style: normal; font-size: 0.72rem; }
.filaPos { color: var(--cop-violeta-claro); font-size: 0.68rem; }
.filaMov { font-size: 0.8rem; }

.filaEnergia {
    height: 5px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.filaEnergiaFill { height: 100%; border-radius: 3px; transition: width 0.5s; }
.filaEnergiaFill.enAlta  { background: var(--cop-verde); }
.filaEnergiaFill.enMedia { background: var(--cop-oro); }
.filaEnergiaFill.enBaja  { background: var(--cop-rojo); }

.filaNota { font-weight: 900; text-align: right; }
.filaNota.nota-buena  { color: var(--cop-verde-claro); }
.filaNota.nota-normal { color: #d5c4e8; }
.filaNota.nota-mala   { color: var(--cop-rojo); }
.filaPelota { animation: copPulso 0.8s infinite alternate; }

/* Barra de movimiento sin pelota */
.coperoBarraApoyo {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(28, 15, 42, 0.95), rgba(43, 24, 65, 0.9));
    border: 1px solid rgba(147, 70, 234, 0.35);
    border-radius: 16px;
    padding: 14px 16px;
}

.apoyoCabecera {
    font-size: 0.88rem;
    color: #d5c4e8;
    margin-bottom: 10px;
    text-align: center;
}

.apoyoCabecera.apoyoVivo { color: #fff; }
.apoyoCabecera strong { color: var(--cop-oro); }

.coperoApoyoBotones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 45%), 1fr));
    gap: 9px;
}

.coperoApoyoBtn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 12px;
    padding: 10px 8px;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}

.coperoApoyoBtn:hover { transform: translateY(-2px); border-color: var(--cop-violeta); }

.coperoApoyoBtn.apoyoActivo {
    background: rgba(147, 70, 234, 0.28);
    border-color: var(--cop-violeta);
    box-shadow: 0 0 12px rgba(147, 70, 234, 0.35);
}

.apoyoIcono { font-size: 1.35rem; }
.apoyoLabel { font-size: 0.76rem; font-weight: 700; text-align: center; line-height: 1.25; }

.apoyoAyuda {
    margin: 10px 0 0 0;
    font-size: 0.72rem;
    color: rgba(200, 184, 221, 0.75);
    text-align: center;
}

/* Gritos de cancha */
.coperoGritosBox { margin-top: 12px; }

.coperoGritosFeed {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 8px;
    min-height: 4px;
}

.coperoGritoBurbuja {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 14px;
    padding: 5px 11px;
    font-size: 0.78rem;
    color: #d5c4e8;
    animation: copEntradaFeed 0.3s ease;
}

.coperoGritoBurbuja.gritoMio { background: rgba(38, 163, 117, 0.2); border-color: var(--cop-verde); }
.coperoGritoBurbuja b { color: #fff; }

.coperoGritosBotones { display: flex; flex-wrap: wrap; gap: 6px; }

.coperoGritoBtn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 0.76rem;
    color: #c8b8dd;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.coperoGritoBtn:hover { background: var(--cop-violeta); color: #fff; }

/* Entretiempo */
.coperoEntretiempoBox {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(16, 68, 49, 0.55), rgba(28, 15, 42, 0.9));
    border: 2px solid var(--cop-verde);
    border-radius: 18px;
    padding: 18px;
}

.coperoEntretiempoBox h3 { margin: 0 0 4px 0; color: var(--cop-verde-claro); font-size: 1.15rem; }

/* Tanda de penales */
.coperoPenalesBox {
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(60, 40, 8, 0.6), rgba(28, 15, 42, 0.92));
    border: 2px solid var(--cop-oro);
    border-radius: 18px;
    padding: 16px;
}

.coperoPenalesBox h3 { margin: 0 0 10px 0; color: var(--cop-oro); font-size: 1.1rem; }
.coperoPenalesBox h3 b { font-size: 1.5rem; }

.penMuerteSubita {
    background: var(--cop-rojo);
    color: #fff;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 0.68rem;
    letter-spacing: 1px;
    margin-left: 6px;
}

.coperoPenalesTanda { display: flex; flex-direction: column; gap: 7px; }

.penFila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.penEtiqueta {
    min-width: 130px;
    font-size: 0.78rem;
    color: #d5c4e8;
    font-weight: 700;
}

.penMarca {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.penMarca.penGol { background: rgba(38, 163, 117, 0.35); border: 1px solid var(--cop-verde); }
.penMarca.penFallo { background: rgba(239, 68, 114, 0.28); border: 1px solid var(--cop-rojo); }

/* --------------------------------------------------------------------------
   MODAL DE DECISIÓN
   -------------------------------------------------------------------------- */

.modalDecisionCard { max-width: 560px; max-height: 92vh; overflow-y: auto; }

.decisionCabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.decisionMinutoBadge {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 3px 11px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.8rem;
}

.decisionTimerBadge { margin-bottom: 0; }
.decisionTimerBadge.timerUrgente { animation: copPulso 0.45s infinite alternate; }

.modalDecisionCard h3 { color: var(--cop-verde-claro); margin: 4px 0 8px 0; font-size: 1.3rem; }

.decisionDesc {
    color: #ded2ef;
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.coperoDecisionApoyos {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 9px;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
}

.apoyosTitulo {
    width: 100%;
    font-size: 0.7rem;
    color: var(--cop-violeta-claro);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.apoyoChip {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 3px 9px;
    font-size: 0.74rem;
    color: #d5c4e8;
}

.apoyoChip em { color: var(--cop-violeta); font-style: normal; font-weight: 800; font-size: 0.66rem; }
.apoyoChip.apoyo-PICAR_ESPACIO { background: rgba(38, 163, 117, 0.25); }
.apoyoChip.apoyo-RESGUARDO { background: rgba(147, 70, 234, 0.22); }

.btnOpcionDecision { gap: 7px; text-align: left; }

.opcionCabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.opcionLabel { font-size: 0.98rem; line-height: 1.3; }

.opcionProb {
    flex: 0 0 auto;
    font-weight: 900;
    font-size: 1.15rem;
    padding: 2px 9px;
    border-radius: 10px;
}

.opcionProb.probAlta  { background: rgba(38, 163, 117, 0.3); color: #6fe0b3; }
.opcionProb.probMedia { background: rgba(244, 184, 43, 0.25); color: #f7d17a; }
.opcionProb.probBaja  { background: rgba(239, 68, 114, 0.25); color: #f8a9be; }

.btnOpcionDecision.probAlta:hover  { background: rgba(38, 163, 117, 0.6); border-color: var(--cop-verde); }
.btnOpcionDecision.probMedia:hover { background: rgba(212, 152, 11, 0.5); border-color: var(--cop-oro); }
.btnOpcionDecision.probBaja:hover  { background: rgba(192, 53, 92, 0.5); border-color: var(--cop-rojo); }

.opcionFactores { display: flex; flex-wrap: wrap; gap: 4px; }

.factorChip {
    font-size: 0.67rem;
    padding: 2px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.09);
    color: #c8b8dd;
    white-space: nowrap;
}

.factorChip.factor-stat   { background: rgba(147, 70, 234, 0.28); color: #d9bcff; font-weight: 800; }
.factorChip.factor-bono   { background: rgba(38, 163, 117, 0.25); color: #8fe6c2; }
.factorChip.factor-apoyo  { background: rgba(38, 163, 117, 0.35); color: #aeecd5; font-weight: 700; }
.factorChip.factor-malus  { background: rgba(239, 68, 114, 0.22); color: #f8a9be; }
.factorChip.factor-rival  { background: rgba(0, 0, 0, 0.4); color: #b9a6cf; }
.factorChip.factor-tarjeta{ background: rgba(244, 184, 43, 0.25); color: #f7d17a; }

/* --------------------------------------------------------------------------
   POST PARTIDO Y CAMPEÓN
   -------------------------------------------------------------------------- */

.coperoPostMarcador { font-size: 1.15rem; color: #fff; margin: 4px 0; }
.coperoPostMarcador b { font-size: 1.9rem; color: var(--cop-oro); margin: 0 8px; }
.postPenales { font-size: 0.85rem; color: var(--cop-violeta-claro); }

.tablaCoperoScroll { overflow-x: auto; }
.tablaCoperoCalif { min-width: 720px; }

/* --------------------------------------------------------------------------
   En celular la tabla se convierte en tarjetas, una por jugador.
   Con 12 columnas y un min-width de 720 px, en un telefono de 360 hay que
   arrastrar la tabla para ver la mitad de los datos: la nota, que es lo que
   todo el mundo mira primero, quedaba fuera de pantalla.
   Cada celda lleva su rotulo en `data-col` (lo pone js/copero.js).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
    .tablaCoperoScroll { overflow-x: visible; }

    .tablaCoperoCalif,
    .tablaCoperoCalif tbody,
    .tablaCoperoCalif tr,
    .tablaCoperoCalif td {
        display: block;
        min-width: 0;
        width: auto;
    }

    /* La cabecera sobra: cada celda ya dice lo suyo. */
    .tablaCoperoCalif thead { display: none; }

    .tablaCoperoCalif tr {
        margin-bottom: 10px;
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(10, 8, 19, 0.42);
        border: 1px solid var(--cop-borde, rgba(255, 255, 255, 0.12));
    }

    .tablaCoperoCalif td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 5px 0;
        white-space: normal;
        border: 0;
        text-align: right;
    }

    .tablaCoperoCalif td::before {
        content: attr(data-col);
        flex: 0 0 auto;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--cop-violeta-claro, #a37ece);
        text-align: left;
    }

    /* El nombre encabeza la tarjeta, sin rotulo y a ancho completo. */
    .tablaCoperoCalif .celdaNombre {
        justify-content: flex-start;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 1rem;
        text-align: left;
    }

    .tablaCoperoCalif .celdaNombre::before { content: none; }

    /* El dorsal se pega al nombre en vez de ocupar su propia linea. */
    .tablaCoperoCalif .celdaDorsal {
        justify-content: flex-start;
        padding: 0;
        font-size: 0.7rem;
        color: var(--cop-violeta-claro, #a37ece);
    }

    .tablaCoperoCalif .miniEnergia { width: 70px; }
}
.tablaCoperoCalif td { white-space: nowrap; }
.tablaCoperoCalif .celdaNombre { text-align: left; }
.tablaCoperoCalif .filaRoja { opacity: 0.55; }
.tablaCoperoCalif .pctPases { font-size: 0.72rem; color: var(--cop-violeta-claro); font-style: normal; }
.tablaCoperoCalif em { font-size: 0.72rem; color: var(--cop-violeta-claro); font-style: normal; }

.miniEnergia {
    width: 46px;
    height: 5px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 3px;
    overflow: hidden;
    margin: 0 auto;
}

.miniEnergia > div { height: 100%; background: linear-gradient(90deg, #26a375, #40c796); }

.notaFinal.nota-buena  { color: var(--cop-verde-claro); }
.notaFinal.nota-normal { color: #d5c4e8; }
.notaFinal.nota-mala   { color: var(--cop-rojo); }

.bonoPuntos {
    font-size: 0.68rem;
    background: rgba(244, 184, 43, 0.25);
    color: var(--cop-oro);
    border-radius: 6px;
    padding: 1px 5px;
    font-weight: 800;
}

.tablaLeyenda {
    font-size: 0.76rem;
    color: rgba(200, 184, 221, 0.8);
    margin: 12px 0 0 0;
    text-align: center;
}

/* Química */
.coperoQuimicaGrid { display: flex; flex-direction: column; gap: 8px; }

.coperoQuimicaCard {
    display: grid;
    grid-template-columns: minmax(140px, 1.6fr) 1fr 34px;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 12px;
}

.quimicaDupla { font-size: 0.84rem; color: #fff; font-weight: 700; }
.quimicaFlecha { color: var(--cop-violeta); }

.quimicaBarra {
    height: 7px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

.quimicaBarra > div { height: 100%; background: linear-gradient(90deg, #7442ad, #40c796); }
.quimicaValor { font-weight: 900; color: var(--cop-verde-claro); text-align: right; font-size: 0.9rem; }

.quimicaVacia { font-size: 0.82rem; color: rgba(200, 184, 221, 0.8); margin: 0; }

/* Camino del campeón */
.coperoCampeonCamino { display: flex; flex-wrap: wrap; gap: 9px; }

.campeonPartidoChip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--cop-panel-borde);
    border-radius: 12px;
    padding: 9px 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 170px;
}

.chipRonda { font-size: 0.68rem; color: var(--cop-violeta-claro); text-transform: uppercase; letter-spacing: 0.5px; }
.chipResultado { font-size: 1.15rem; color: var(--cop-oro); }
.chipResultado em { font-size: 0.72rem; color: #d5c4e8; font-style: normal; }
.chipRival { font-size: 0.76rem; color: #d5c4e8; }

.coperoPremiosCabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.coperoPremiosHint { color: var(--cop-violeta-claro); font-size: 0.78rem; }

.premioCardHorizontal.premioMotor { background: linear-gradient(160deg, rgba(116, 66, 173, 0.45), rgba(28, 15, 42, 0.95)); }
.premioCardHorizontal.premioCompanero { background: linear-gradient(160deg, rgba(38, 163, 117, 0.4), rgba(28, 15, 42, 0.95)); }

.premioDetalle {
    font-size: 0.72rem;
    color: rgba(213, 196, 232, 0.85);
    margin: 8px 0 0 0;
    line-height: 1.4;
    text-align: center;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .coperoPartidoLayout { grid-template-columns: 1fr; }
    .coperoColumnaEquipo { order: -1; }
    .coperoPanelEquipo { max-height: 210px; overflow-y: auto; }
}

@media (max-width: 620px) {
    .coperoContainer { padding: 12px; }
    .score { font-size: 1.9rem; margin: 0 8px; }
    .clubLocal, .clubVisit { font-size: 0.95rem; }

    .statRowEntrenamiento {
        grid-template-columns: 1fr auto auto;
        grid-template-areas: "texto val mas" "barra barra menos";
        gap: 7px 9px;
    }
    .statTexto { grid-area: texto; }
    .statBarWrapper { grid-area: barra; }
    .statVal { grid-area: val; width: auto; }
    .btnPlusStat { grid-area: mas; }
    .btnMinusStat, .btnMinusHueco { grid-area: menos; justify-self: end; }

    .coperoApoyoBotones { grid-template-columns: repeat(2, 1fr); }
    .coperoJugadorFila { grid-template-columns: 20px 1fr 38px 26px auto auto; font-size: 0.72rem; }
    .modalDecisionCard { padding: 18px 14px; border-radius: 18px; }
    .opcionLabel { font-size: 0.88rem; }
    .opcionProb { font-size: 1rem; }
    .coperoQuimicaCard { grid-template-columns: 1fr 60px 30px; }
    .penEtiqueta { min-width: 100px; font-size: 0.72rem; }
    .coperoCharlaGrid { gap: 12px; }
}

/* --------------------------------------------------------------------------
   MODO CLARO
   -------------------------------------------------------------------------- */

html.modo-claro .coperoColumnaEquipo,
html.modo-claro .coperoBarraApoyo,
html.modo-claro .coperoCaminoBox,
html.modo-claro .coperoPenalesBox,
html.modo-claro .coperoEntretiempoBox {
    background: rgba(249, 248, 250, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

html.modo-claro .coperoJugadorFila,
html.modo-claro .coperoRondaChip,
html.modo-claro .coperoPlanteoCard,
html.modo-claro .coperoEspCard,
html.modo-claro .coperoApoyoBtn,
html.modo-claro .coperoGritoBtn,
html.modo-claro .coperoGritoBurbuja,
html.modo-claro .campeonPartidoChip,
html.modo-claro .coperoQuimicaCard,
html.modo-claro .chipListo {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: var(--pc-texto) !important;
}

html.modo-claro .filaNombre,
html.modo-claro .quimicaDupla,
html.modo-claro .coperoRondaChip strong,
html.modo-claro .planteoNombre,
html.modo-claro .espNombre,
html.modo-claro .apoyoLabel,
html.modo-claro .scoutCabecera h4 { color: var(--pc-texto) !important; }

html.modo-claro .planteoDesc,
html.modo-claro .espDesc,
html.modo-claro .statDesc,
html.modo-claro .apoyoAyuda,
html.modo-claro .scoutPlan,
html.modo-claro .coperoSubtexto,
html.modo-claro .tablaLeyenda,
html.modo-claro .chipRival { color: #5c4a72 !important; }

html.modo-claro .coperoMomentumTrack,
html.modo-claro .scoutBarraTrack,
html.modo-claro .quimicaBarra,
html.modo-claro .filaEnergia,
html.modo-claro .miniEnergia { background: rgba(0, 0, 0, 0.1) !important; }

html.modo-claro .factorChip { background: rgba(0, 0, 0, 0.07); color: #4a3a5e; }

/* Grids de 2 columnas parejas: con auto-fit quedaban 3+1 y las tarjetas
   desalineadas dentro de la columna de la charla técnica. */
.coperoPlanteosGrid,
.coperoEspGrid {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

/* Galardón sin ganador */
.premioCardHorizontal.premioDesierto { opacity: 0.55; filter: saturate(0.4); }
.premioSinGanador { color: #b9a6cf !important; font-style: italic; }

/* Leyenda de columnas de la tabla, para el celular donde no hay hover */
.leyendaCols {
    display: block;
    margin-bottom: 6px;
    color: var(--cop-violeta-claro);
    font-size: 0.73rem;
}

/* --------------------------------------------------------------------------
   Desbordamiento horizontal
   Un item de grid/flex no encoge por debajo del ancho de su contenido salvo
   que se le baje el min-width. Sin esto, los nombres con `nowrap` del panel
   de equipo empujaban toda la pantalla de partido fuera del viewport en el
   celular.
   -------------------------------------------------------------------------- */
.coperoPartidoLayout > *,
.coperoColumnaFeed,
.coperoColumnaEquipo,
.coperoJugadorFila,
.coperoJugadorFila > *,
.feedItemRelato,
.coperoQuimicaCard,
.statRowEntrenamiento,
.statRowEntrenamiento > * {
    min-width: 0;
}

/* Los relatos y los nombres largos parten en vez de estirar el contenedor. */
.feedTexto,
.decisionDesc,
.opcionLabel,
.scoutPlan,
.planteoDesc,
.espDesc,
.quimicaDupla {
    overflow-wrap: anywhere;
}

/* El feed acompaña la altura del panel de equipo en escritorio (antes dejaba un
   hueco muerto cuando el relato era corto), pero con tope: sin max-height crecía
   con cada jugada y empujaba toda la página hacia abajo. */
@media (min-width: 901px) {
    .coperoPartidoLayout { align-items: stretch; }
    .coperoColumnaFeed { display: flex; flex-direction: column; }
    .coperoFeedContainer { flex: 1; min-height: 260px; max-height: 460px; }
}

/* Aviso visual de que el feed continúa hacia abajo. */
.coperoColumnaFeed { position: relative; }
.coperoColumnaFeed::after {
    content: "";
    position: absolute;
    left: 1px; right: 1px; bottom: 0;
    height: 34px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(to bottom, rgba(17, 10, 25, 0), rgba(17, 10, 25, 0.92));
    pointer-events: none;
}
.coperoColumnaFeed:has(#coperoEsperaTeammateDecision[style*="flex"])::after { display: none; }

html.modo-claro .coperoColumnaFeed::after {
    background: linear-gradient(to bottom, rgba(250, 250, 251, 0), rgba(250, 250, 251, 0.95));
}

/* --------------------------------------------------------------------------
   Contraste en modo claro
   Los colores del relato y de los textos secundarios estaban pensados para
   fondo oscuro: sobre blanco quedaban casi ilegibles (verde claro sobre verde
   claro, violeta pastel sobre blanco).
   -------------------------------------------------------------------------- */
html.modo-claro .feedItemRelato { color: #2c2338; }

html.modo-claro .feedItemRelato.pase_exito,
html.modo-claro .feedItemRelato.atajada_exito,
html.modo-claro .feedItemRelato.defensa_exito {
    background: rgba(38, 163, 117, 0.12) !important;
    color: #10583c !important;
}

html.modo-claro .feedItemRelato.gol {
    background: rgba(239, 68, 114, 0.12) !important;
    color: #8c1436 !important;
}

html.modo-claro .feedItemRelato.gol_rival {
    background: rgba(239, 68, 114, 0.1) !important;
    color: #8c1436 !important;
}

html.modo-claro .feedItemRelato.peligro {
    background: rgba(214, 152, 12, 0.14) !important;
    color: #6b4a05 !important;
}

html.modo-claro .feedItemRelato.ambientacion { color: #5c4a72; opacity: 0.9; }

html.modo-claro .coperoMomentumTexto,
html.modo-claro .apoyoCabecera,
html.modo-claro .coperoGritoBurbuja,
html.modo-claro .filaNota.nota-normal,
html.modo-claro .coperoPlanteoResumen,
html.modo-claro .penEtiqueta,
html.modo-claro .quimicaVacia,
html.modo-claro .decisionDesc,
html.modo-claro .apoyoChip,
html.modo-claro .scoutBarra {
    color: #3d2f52 !important;
}

html.modo-claro .coperoGritoBurbuja b,
html.modo-claro .scoutBarra b { color: #1f1830 !important; }

html.modo-claro .coperoPanelTitulo,
html.modo-claro .coperoCaminoTitulo { color: #1a6b4c !important; }

html.modo-claro .filaPos,
html.modo-claro .rondaNombre,
html.modo-claro .planteoVotos,
html.modo-claro .apoyoAyuda,
html.modo-claro .leyendaCols,
html.modo-claro .premioDetalle,
html.modo-claro .slotDesc { color: #6b5988 !important; }

html.modo-claro .feedMinuto { color: #6b3fa8 !important; }
html.modo-claro .filaDorsal { color: #6b3fa8 !important; }

/* La cabecera de la tabla de rendimiento y sus celdas */
html.modo-claro .tablaCoperoCalif th { background: rgba(0, 0, 0, 0.06) !important; color: #4a3a5e !important; }
html.modo-claro .tablaCoperoCalif td { color: #2c2338; }
html.modo-claro .tablaCoperoCalif em,
html.modo-claro .tablaCoperoCalif .pctPases { color: #6b5988 !important; }
html.modo-claro .notaFinal.nota-normal { color: #3d2f52 !important; }

/* Modal de decisión: el fondo es oscuro incluso en modo claro, así que sus
   textos se dejan como están; sólo se corrigen los chips de factores. */
html.modo-claro .modalDecisionCard .factorChip { background: rgba(255, 255, 255, 0.12); color: #e6dcf5; }
html.modo-claro .modalDecisionCard .decisionDesc { color: #ded2ef !important; }
html.modo-claro .modalDecisionCard .apoyoChip { color: #d5c4e8 !important; }

/* ==========================================================================
   MODAL DE DECISIÓN · bloqueante
   --------------------------------------------------------------------------
   Mientras hay una jugada para resolver, el modal es lo único con lo que se
   puede interactuar: no se cierra solo, no se cierra tocando afuera y la
   página de atrás queda quieta. Si se agota el reloj, el servidor elige una
   de las opciones ofrecidas al azar.
   ========================================================================== */
html.pcDecisionAbierta,
body.pcDecisionAbierta {
    overflow: hidden;
    /* En iOS 'overflow:hidden' en body no siempre alcanza para frenar el
       arrastre; fijar la altura sí. */
    height: 100%;
    touch-action: none;
}

/* El modal se hace cargo de su propio desborde: si la jugada trae muchas
   opciones y no entran en pantalla, se scrollea el modal —nunca la página— y
   así no queda ninguna opción cortada fuera de la vista. */
.modalDecisionContainer {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.modalDecisionCard {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: auto;
}

/* En pantallas bajas el modal necesita todo el alto disponible. */
@media (max-height: 620px) {
    .modalDecisionContainer { padding: 10px; align-items: flex-start; }
    .modalDecisionCard { max-height: calc(100dvh - 20px); padding: 18px; }
}

/* En pantallas bajas —un celular apaisado, o una ventana chica— el modal se
   compacta para que las opciones entren enteras sin tener que arrastrar. El
   scroll interno sigue existiendo como red de seguridad, pero la idea es que
   no haga falta: con el reloj corriendo, una opción que quedó abajo y no se ve
   es una opción que nadie elige. */
@media (max-height: 800px) {
    .modalDecisionCard { padding: 14px 16px; }
    .modalDecisionCard h3 { font-size: 1.05rem; margin: 4px 0; }
    .decisionDesc { font-size: 0.82rem; line-height: 1.35; margin: 4px 0 0; }
    .decisionCabecera { margin-bottom: 4px; }
    .decisionTimerBadge { margin-bottom: 4px; padding: 2px 10px; font-size: 0.9rem; }

    .coperoDecisionApoyos { margin: 6px 0; }
    .opcionesDecisionGrid { gap: 6px; margin-top: 10px; }
    .btnOpcionDecision { padding: 8px 12px; border-radius: 10px; gap: 2px; }
    .opcionLabel { font-size: 0.9rem; }
    .opcionFactores { gap: 3px; }
    .factorChip { font-size: 0.6rem; padding: 1px 5px; }
}

/* Muy bajas: además se recortan los factores, que son ayuda contextual y no
   hacen falta para decidir. */
@media (max-height: 560px) {
    .modalDecisionCard { padding: 10px 12px; }
    .modalDecisionCard h3 { font-size: 0.95rem; }
    .decisionDesc { display: none; }
    .opcionFactores { display: none; }
    .btnOpcionDecision { padding: 7px 10px; }
}