/* =========================
   Base (Swiper / contenedor)
   ========================= */
.llave-swipe-container {
    position: relative;
}

.swiper {
    width: 100%;
}

.swiper-slide {
    padding: 8px 4px 24px;
}

/* =========================
   Títulos de fase
   ========================= */
.titulo-fase {
    color: #c6ff00;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 800;
}

.swiper-slide .titulo-fase {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #1b1d21;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(198, 255, 0, .12);
}

/* =========================
   GALERÍA: grilla + cards
   ========================= */
/* ===== GALERÍA: grilla centrada y columnas ===== */
.fase-col {
    display: grid;
    gap: 16px;

    /* 1 columna por defecto (mobile) */
    grid-template-columns: 1fr;

    /* centrada dentro del slide */
    max-width: 1140px;
    /* ancho total para 2 columnas + gaps */
    margin: 0 auto;
}

/* desde 900px: 2 columnas */
@media (min-width:900px) {
    .fase-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* en >=1300px seguimos con 2 columnas (antes eran 3) */
@media (min-width:1300px) {
    .fase-col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== Card: llenar la celda (sin max-width ni margin auto) ===== */
.match-card {
    background: #121212;
    border: 1px solid rgba(145, 255, 0, .15);
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, .25);

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;

    min-height: 168px;
    /* puedes ajustar si querés un poco más/menos */
    height: 100%;
    width: 100%;
    /* llenar la celda */
    margin: 0;
    /* quitar centrado interno */
}

/* si querés, mantén tus min-height por breakpoint */
@media (min-width:768px) {
    .match-card {
        min-height: 180px;
    }
}

@media (min-width:1200px) {
    .match-card {
        min-height: 188px;
    }
}

/* Variantes (final / 3er puesto) */
.match-card.match-gold {
    border-color: rgba(255, 215, 0, .5);
    box-shadow: 0 0 10px rgba(255, 215, 0, .25);
}

.match-card.match-bronze {
    border-color: rgba(205, 127, 50, .5);
    box-shadow: 0 0 10px rgba(205, 127, 50, .25);
}

/* Head: chips centrados, # a la izquierda */
.match-head {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    justify-content: center;
    margin: 0;
}

.match-head .badge:first-child {
    position: absolute;
    left: 0;
    top: 0;
}

.chip,
.badge.bg-dark.border {
    background: #0f0f0f;
    border: 1px solid rgba(198, 255, 0, .25) !important;
    color: #cfcfcf;
    font-size: .73rem;
    padding: .18rem .45rem;
    border-radius: 999px;
}

/* Equipos / VS */
.team {
    color: #fff;
    font-size: .95rem;
    line-height: 1.15;
    text-align: center;
}

.vs {
    text-align: center;
    color: #c6ff00;
    font-weight: 800;
    margin: .15rem 0;
    letter-spacing: .5px;
}

/* Ganador destacado */
.team.win {
    color: #eaffb5 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(148, 255, 70, .22);
}

.badge-win {
    background: #1f2a00;
    border: 1px solid rgba(198, 255, 0, .35);
    color: #c6ff00;
    font-size: .65rem;
    padding: .12rem .5rem;
    border-radius: 999px;
    margin-left: .45rem;
}

/* Resultado: SIEMPRE centrado (con 🎾) */
.res-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: .35rem auto 0 !important;
    /* centrado real */
    align-self: center !important;
    /* por si el padre es flex */
    padding: .28rem .7rem;
    font-size: .95rem;
    color: #e9edf3;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(198, 255, 0, .2);
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
}

@media (max-width:480px) {
    .res-line {
        white-space: normal;
    }
}

.res-line::before {
    content: "\1F3BE";
    margin-right: .35rem;
}

/* 🎾 */
.res-line .who {
    display: none !important;
}

/* =========================
   LISTA SIMPLE
   ========================= */
.llave-lista [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.llave-lista .card {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 14px;
}

.llave-lista .card,
.llave-lista .card-body {
    color: #fff;
}

/* Título de fase en lista simple */
.llave-lista .titulo-fase {
    color: #c6ff00;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 800;
    background: #1b1d21;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(198, 255, 0, .12);
    margin: 1rem 0 .5rem;
}

/* Chips centrados con # a la izquierda (lista) */
.llave-lista .card-body .small {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

.llave-lista .card-body .small .badge:first-child {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-2px);
}

/* Mismo look de equipos/VS/resultado en lista */
.llave-lista .team {
    text-align: center;
    display: block;
    font-size: .95rem;
    line-height: 1.15;
}

.llave-lista .team.win {
    color: #eaffb5 !important;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(148, 255, 70, .22);
}

.llave-lista .vs {
    text-align: center;
    color: #c6ff00;
    font-weight: 800;
    margin: .25rem 0;
    letter-spacing: .5px;
}

.llave-lista .res-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: .35rem auto 0 !important;
    padding: .25rem .6rem;
    font-size: .9rem;
    color: #cfd3da;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(198, 255, 0, .18);
    border-radius: 999px;
}

/* =========================
   Ocultar vistas inactivas
   ========================= */
#vistaGaleria.d-none,
#vistaGaleria[hidden],
#vistaLista.d-none,
#vistaLista[hidden] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Comportamiento de scroll (opcional) */
html {
    scroll-behavior: auto;
}

/* Layout uniforme dentro de cada slide (dos columnas en desktop) */
.fase-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .fase-col {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }
}

/* Card con alto mínimo coherente */
.match-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 180px;
    /* ajusta si querés un poco más alta */
}

/* Chips centrados visualmente */
.match-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* centrado */
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
}

/* Resultado centrado tipo “(6-4) / (6-3)” */
.res-line {
    align-self: center;
    text-align: center;
    margin-top: .35rem;
    font-size: .95rem;
    color: #e9edf3;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(198, 255, 0, .2);
    padding: .28rem .7rem;
    border-radius: 999px;
}

/* Ganador */
.team.win {
    color: #d7ff62;
    font-weight: 700;
}

.badge-win {
    margin-left: .4rem;
    background: #caff2f;
    color: #111;
    border-radius: 999px;
    padding: .1rem .45rem;
    font-size: .65rem;
}

/* Layout uniforme dentro de cada slide (dos columnas en desktop) */
.fase-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .fase-col {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }
}

/* Card con alto mínimo coherente */
.match-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 180px;
    /* ajusta si querés un poco más alta */
}

/* Chips centrados visualmente */
.match-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* centrado */
    align-items: center;
    gap: .35rem;
    margin-bottom: .4rem;
}

/* Resultado centrado tipo “(6-4) / (6-3)” */
.res-line {
    align-self: center;
    text-align: center;
    margin-top: .35rem;
    font-size: .95rem;
    color: #e9edf3;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(198, 255, 0, .2);
    padding: .28rem .7rem;
    border-radius: 999px;
}

/* Ganador */
.team.win {
    color: #d7ff62;
    font-weight: 700;
}

.badge-win {
    margin-left: .4rem;
    background: #caff2f;
    color: #111;
    border-radius: 999px;
    padding: .1rem .45rem;
    font-size: .65rem;
}

/* =========================
   GALERÍA – Desktop (ancho doble por card)
   ========================= */

/* Centrado del header de cada card,
   dejando el # de partido a la izquierda */
.llave-swipe-container .match-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* centra fecha/hora/cancha */
    gap: .4rem;
}

.llave-swipe-container .match-head .badge {
    /* # partido */
    order: -1;
    /* siempre primero a la izquierda */
    margin-right: auto;
    /* empuja el resto al centro */
    transform: translateY(-1px);
}

/* Dos columnas bien anchas en desktop */
@media (min-width: 1200px) {
    .llave-swipe-container .swiper-slide {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* La grilla de cada fase (slide) */
    .llave-swipe-container .fase-col {
        /* 2 columnas, cada una ancho “grande” */
        grid-template-columns: repeat(2, minmax(520px, 1fr));
        gap: 16px 22px;
        width: 100%;
        max-width: 1280px;
        /* limita la fila y la centra */
        margin: 0 auto;
    }

    /* Asegura que la card no encoja más de lo previsto */
    .llave-swipe-container .match-card {
        min-width: 520px;
    }
}

/* Un poco más ancho en muy grandes */
@media (min-width: 1600px) {
    .llave-swipe-container .fase-col {
        grid-template-columns: repeat(2, minmax(560px, 1fr));
        max-width: 1360px;
    }

    .llave-swipe-container .match-card {
        min-width: 560px;
    }
}

/* ==== Evitar superposición: que el slide crezca con su contenido ==== */
.llave-swipe-container .swiper,
.llave-swipe-container .swiper-wrapper,
.llave-swipe-container .swiper-slide {
    height: auto !important;
    /* no altura fija */
}

/* La grilla debe crear filas según el contenido */
.llave-swipe-container .fase-col {
    grid-auto-rows: minmax(min-content, auto);
    row-gap: 18px;
    /* separación vertical suficiente */
}

/* Las cards no deben imponer alturas fijas */
.llave-swipe-container .match-card {
    height: auto;
}

/* (Opcional) si algún estilo anterior cortaba contenido */
.llave-swipe-container .swiper-slide {
    overflow: visible;
}