.bracket-container {
    display: flex;
    overflow-x: auto;
    padding: 0px 0;
}
.bracket-round {
    /* Ancho fijo: todas las tarjetas del cuadro miden lo mismo, sin importar
       el largo de los nombres. El valor está ajustado al nombre truncado a 12
       caracteres, para que el nombre quede junto al marcador y no sobre aire. */
    flex: 0 0 210px;
    width: 210px;
    min-width: 210px;
    margin-right: 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 15px;
    padding: 0px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.bracket-header {
    text-align: center;
    padding: 10px;
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    color: white;
    border-radius: 10px;
    margin-bottom: 15px;
}
.bracket-match {
    display: block;
    box-sizing: border-box;
    width: 100%;
    background: white;
    border-radius: 10px;
    /* Aire lateral: los marcadores quedan alineados sin tocar el borde. */
    padding: 0.5rem 0.6rem;
    margin-bottom: 15px;
    border-left: 4px solid #0d6efd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* La tarjeta es un enlace: aspecto de tarjeta, sin subrayado ni color de enlace. */
a.bracket-match,
a.bracket-match:link,
a.bracket-match:visited,
a.bracket-match:hover,
a.bracket-match:focus,
a.bracket-match:active {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

a.bracket-match * {
    text-decoration: none;
}
.bracket-match:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* ===== Equipos y marcador de la tarjeta =====
   Cada equipo es una fila con su propia grilla, así el fondo del ganador
   cubre toda la fila. Las dos filas usan la misma plantilla de columnas, por
   eso los marcadores de local y visitante quedan alineados.
   El tamaño del logo vive en una variable para que la columna y la imagen no
   se desincronicen. */
.bracket-match {
    --bracket-logo-size: 26px;
}

.bracket-teams {
    margin-bottom: 0.25rem;
}

.bracket-team-row {
    display: grid;
    grid-template-columns: var(--bracket-logo-size) minmax(0, 1fr) 1.8rem;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.15rem 0.25rem;
    border-radius: 6px;
}

/* Ganador: fila verde con texto blanco. */
.bracket-team-row.is-winner {
    background: #198754;
    color: #fff;
}

.bracket-team-row.is-winner .bracket-team-name,
.bracket-team-row.is-winner .team-score {
    color: #fff;
    font-weight: 700;
}

/* El bloque "Global" va entre las dos filas, centrado. */
.bracket-teams .marcador-global {
    margin: 0.15rem 0;
}

.bracket-team-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--bracket-logo-size);
    height: var(--bracket-logo-size);
}

/* Logo con clase propia: `.team-logo-small` está definida con otros tamaños en
   `resultados.css`, `goleadores.css` y `catego_detalle.css`, y ganaba según la
   hoja. Con clase exclusiva el tamaño lo decide solo esta tarjeta. */
.bracket-logo-img {
    width: var(--bracket-logo-size);
    height: var(--bracket-logo-size);
    object-fit: contain;
    margin: 0;
}

/* Respaldo con iniciales cuando el equipo no tiene logo. La clase
   `.bracket-logo-img` ya le da el tamaño; aquí solo el centrado interno. */
span.bracket-logo-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    object-fit: unset;
}

.bracket-team-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0.875rem;
}

.bracket-team-score {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Ancho fijo: la columna del marcador no baila entre filas ni tarjetas. */
    min-width: 1.8rem;
    line-height: 1.2;
}

.team-score {
    font-weight: 700;
    font-size: 1rem;
    color: #198754;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Marcador global (ida + vuelta) */
.marcador-global {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 14px;
    margin: 0 auto 10px;
    width: fit-content;
    background: linear-gradient(135deg, #0a2342 0%, #123a63 100%);
    border: 1px solid rgba(8, 247, 254, 0.35);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(10, 35, 66, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.marcador-global-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8fd8ff;
    white-space: nowrap;
}

.marcador-global-etiqueta i {
    font-size: 0.6rem;
    opacity: 0.85;
}

.marcador-global-marcador {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
    border-left: 1px solid rgba(143, 216, 255, 0.3);
    font-variant-numeric: tabular-nums;
}

.marcador-global-numero {
    min-width: 1ch;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    color: #ffffff;
}

.marcador-global-numero.marcador-global-ganador {
    color: #08f7fe;
    text-shadow: 0 0 10px rgba(8, 247, 254, 0.45);
}

.marcador-global-separador {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
}
.team-vs {
    text-align: center;
    color: #6c757d;
    font-weight: bold;
    margin: 5px 0;
}
/* ===== Pie de la tarjeta: fecha, campo y estado =====
   Bloque separado por una línea fina, con iconos en columna fija para que
   fecha y campo queden alineados entre tarjetas. */
.bracket-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid #eef2f7;
}

.bracket-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    color: #334155;
}

.bracket-meta-icon {
    flex: 0 0 0.85rem;
    width: 0.85rem;
    font-size: 0.68rem;
    text-align: center;
    color: #64748b;
}

.bracket-meta-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bracket-meta-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #475569;
}

.bracket-meta-status {
    margin-top: 0.25rem;
    display: flex;
    justify-content: center;
}

/* Estado como pastilla: mismo lenguaje visual en todas las tarjetas. */
.bracket-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.bracket-status i {
    font-size: 0.6rem;
}

.bracket-status--ok {
    background: #d9f0e3;
    color: #0f5132;
}

.bracket-status--pending {
    background: #ffeccd;
    color: #7a4d00;
}
/* Tarjeta con la fecha ya jugada. No depende de quién ganó: el ganador se
   resalta en su fila con `fw-bold text-success`. */
.bracket-match.is-finalizado {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left-color: #198754;
}


@media (max-width: 576px) {
    .bracket-match {
        --bracket-logo-size: 22px;
    }

    .bracket-team-name {
        font-size: 0.8rem;
    }

    .marcador-global {
        padding: 4px 10px;
        gap: 7px;
        margin-bottom: 8px;
    }

    .marcador-global-etiqueta {
        font-size: 0.55rem;
        letter-spacing: 0.1em;
    }

    .marcador-global-numero {
        font-size: 0.9rem;
    }

    .bracket-meta-item {
        font-size: 0.68rem;
    }

    .bracket-status {
        font-size: 0.58rem;
    }
}