/* ==========================================================================
   Copa Libertadores
   El torneo continental tiene identidad propia: el dorado de la Conmebol
   marca a los clasificados y el cuadro final se lee de izquierda a derecha.
   ========================================================================== */

/* --- Filas de tabla: clasificado y club propio --------------------------- */

.tabla tbody tr.es-clasificado td:first-child {
    box-shadow: inset 3px 0 0 var(--dorado);
}

/*
 * El pais es una acotacion al lado del nombre, no una chapa: va sin fondo.
 *
 * Compartia el fondo crema de .chapa y encima se pintaba con el color tenue
 * -crema al 50%-, asi que la letra desaparecia adentro del bloquecito.
 */
.chapa--pais {
    min-width: 0;
    margin-left: var(--e2);
    padding: 0;
    background: none;
    font-size: var(--t-etiqueta, 0.7rem);
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* En que grupo esta el club, al lado del titulo de la grilla. */
.chapa--grupo {
    margin-left: auto;
    background: rgba(232, 178, 63, 0.16);
    color: var(--dorado);
    text-transform: none;
    letter-spacing: 0.02em;
}

/* --- Fixture del grupo --------------------------------------------------- */

.fixture-copa {
    display: grid;
    gap: var(--e2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fixture-copa__fila {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
    background: var(--panel-hueco);
}

.fixture-copa__fila.es-jugado {
    border-color: var(--borde-fuerte);
}

.fixture-copa__fecha {
    font-family: var(--mono);
    font-size: var(--t-dato, 0.82rem);
    color: var(--texto-tenue);
}

.fixture-copa__rival {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-width: 0;
}

.fixture-copa__marcador {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Los ocho grupos ----------------------------------------------------- */

/*
 * La tabla del grupo vive dentro de la tarjeta, asi que no repite su
 * material: sin fondo, sin borde y sin sombra, para que no se vea una caja
 * dentro de otra.
 *
 * Son diez columnas en media pantalla: la tipografia baja un punto y las
 * celdas se aprietan. Si aun asi no entra, el envoltorio scrollea.
 */
.grupo-copa {
    /* Manda el ancho de la columna, no el de la tabla que lleva adentro. */
    min-width: 0;
}

.grupo-copa .tabla-envoltorio {
    margin-top: var(--e2);
    overflow-x: auto;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.grupo-copa .tabla {
    min-width: 26rem;
    font-size: 0.78rem;
}

.grupo-copa .tabla th,
.grupo-copa .tabla td {
    padding: 0.35rem 0.4rem;
}

/* El nombre del club se lleva el ancho que sobra. */
.grupo-copa .celda-equipo { min-width: 8rem; }


.grupo-copa__lista {
    display: grid;
    gap: var(--e1);
    margin: var(--e2) 0 0;
    padding: 0;
    list-style: none;
}

.grupo-copa__equipo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--e2);
    padding: var(--e1) var(--e2);
    border-radius: var(--r1);
    font-size: var(--t-dato, 0.82rem);
}

.grupo-copa__equipo.es-clasificado {
    background: rgba(232, 178, 63, 0.12);
}

/* El club propio se lee en dorado, igual que en el sorteo de zonas. */
.grupo-copa__equipo.es-propio {
    color: var(--dorado);
    font-weight: 800;
}

.grupo-copa__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grupo-copa__pts {
    font-family: var(--mono);
    font-weight: 600;
}

/* --- Cupos para la edicion siguiente ------------------------------------- */

.cupos-copa {
    display: grid;
    gap: var(--e2);
    margin: var(--e3) 0 0;
    padding: 0;
    list-style: none;
}

.cupos-copa__fila {
    display: grid;
    grid-template-columns: 1.6rem auto 1fr auto;
    align-items: center;
    gap: var(--e3);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
    background: var(--panel-hueco);
}

.cupos-copa__fila.es-propio {
    border-color: var(--dorado);
    background: rgba(232, 178, 63, 0.1);
}

.cupos-copa__puesto {
    font-family: var(--mono);
    color: var(--texto-tenue);
}

.cupos-copa__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sorteo: la bolilla que acaba de caer -------------------------------- */

.grupo-copa__equipo.es-entrando {
    animation: copa-bolilla 420ms ease-out;
}

@keyframes copa-bolilla {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grupo-copa__equipo.es-entrando {
        animation: none;
    }
}

/* --- Cuadro final -------------------------------------------------------- */

.cuadro-copa {
    display: grid;
    gap: var(--e4);
    overflow-x: auto;
}

.cuadro-copa__titulo {
    margin: 0 0 var(--e2);
    font-size: var(--t-seccion, 0.86rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-suave);
}

.llave-copa {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e2);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--borde);
    border-radius: var(--r2);
    background: var(--panel-hueco);
}

.llave-copa__lado {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-width: 0;
    color: var(--texto-suave);
    justify-content: flex-end;
    text-align: right;
}

/* Los dos lados miran al marcador: nombre, escudo, cifras, escudo, nombre.
   El visitante es el tercero, detras del marcador. */
.llave-copa__lado:nth-child(3) {
    justify-content: flex-start;
    text-align: left;
}

/* El nombre cede antes que nada: se recorta con puntos suspensivos. */
.llave-copa__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La llave del club dirigido se encuentra de un vistazo entre las ocho. */
.llave-copa.es-propio {
    border-color: var(--dorado);
    background: rgba(232, 178, 63, 0.12);
}

.llave-copa__lado.es-ganador {
    color: var(--texto);
    font-weight: 600;
}

.llave-copa__marcador {
    font-family: var(--mono);
    font-weight: 600;
    white-space: nowrap;
    /* Centrado sobre los penales, que son mas anchos que el resultado. */
    text-align: center;
}

.llave-copa__marcador small {
    display: block;
    font-size: var(--t-etiqueta, 0.7rem);
    font-weight: 400;
    color: var(--texto-tenue);
}

.cuadro-copa__campeon {
    display: flex;
    align-items: center;
    gap: var(--e3);
    margin: var(--e4) 0 0;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--dorado-oscuro);
    border-radius: var(--r2);
    background: rgba(232, 178, 63, 0.1);
}

/* --- Escritorio: proximo compromiso de Copa ------------------------------ */

.aviso-copa {
    display: flex;
    align-items: center;
    gap: var(--e3);
    padding: var(--e3) var(--e4);
    border: 1px solid var(--dorado-oscuro);
    border-radius: var(--r2);
    background: rgba(232, 178, 63, 0.08);
}

/*
 * Cuando la semana trae copa por jugar y ademas el proximo compromiso, los
 * dos avisos caen uno debajo del otro: sin aire se leen como un solo bloque
 * partido al medio.
 */
.aviso-copa + .aviso-copa { margin-top: var(--e3); }

.aviso-copa__icono {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: rgba(232, 178, 63, 0.18);
    color: var(--dorado-claro);
}

/* --- Fixture y llaves en pantallas chicas -------------------------------- */

@media (max-width: 640px) {
    .fixture-copa__fila {
        grid-template-columns: 2.2rem 1fr auto;
        gap: var(--e2);
    }

    /*
     * La llave se lee de una: local, marcador y visitante en el mismo
     * renglon, tambien en el telefono. Antes se apilaba en tres lineas y un
     * cuadro de treintaidos cruces se hacia larguisimo. Lo que cede es el
     * tamanio: letra mas chica, menos aire y el nombre recortado.
     */
    .llave-copa {
        gap: var(--e1);
        padding: var(--e2);
        font-size: 0.78rem;
    }

    .llave-copa__lado { gap: var(--e1); }

    .llave-copa__marcador {
        padding: 0;
        font-size: 0.78rem;
    }
}