@import url('calendario-global.css');

.content-body {
    padding: 15px 17px;
}

.jornadas-content {
    position: relative;
    border-radius: 16px;
    background: #F9F9F9;
    margin: 24px 0;

    &>.nombre-jornada {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        background: linear-gradient(33deg,
                var(--componet-tertiary-color) 0%,
                var(--componet-tertiary-color) 33.33%,
                var(--componet-secondary-color) 33.33%,
                var(--componet-secondary-color) 66.66%,
                var(--componet-primary-color-trasparent) 66.66%,
                var(--componet-primary-color) 100%) !important;

        &>div:nth-child(1) {
            grid-area: 1 / 2 / 2 / 3;
            display: flex;
            justify-content: center;

            &>h4 {
                display: inline-flex;
                padding: 10px 16px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 12px;
                background: #FFF;
                backdrop-filter: blur(2px);
            }
        }

        &>div:nth-child(2) {
            grid-area: 1 / 3 / 2 / 4;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: end;
            padding-right: 14px;

            &>.btn-navigate {
                margin: 3.5px;
                display: flex;
                width: 38px;
                height: 38px;
                padding: 9.952px;
                justify-content: center;
                align-items: center;
                gap: 4.976px;
                flex-shrink: 0;
                border-radius: 82.937px;
                background: #FFF;
                border: none;
            }
        }
    }

}

.partidos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(482px, 1fr));
    padding: 16px;
    gap: 16px;
    /* Espacio entre las tarjetas */
    overflow-x: auto;
    /* Habilita el scroll horizontal si es necesario */
    scroll-snap-type: x mandatory;
    /* Para activar el comportamiento de scroll snapping */
    scroll-behavior: smooth;
    /* Para hacer que el scroll sea suave */
}

.partidos::-webkit-scrollbar {
    display: none;
    /* Oculta la barra de scroll para un diseño más limpio */
}

.partido-card {
    scroll-snap-align: start;
    /* Alinea las tarjetas al inicio del contenedor */
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;

    &>div {
        padding: 20px;
    }

    &>.datos-equipos {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        border-right: 2px solid #F9F9F9;

        &>div {
            padding: 0 21px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;

            &>div {
                padding: 15px 0;
            }
        }

        &>.resultados {
            &>div {
                width: 54px;
                height: 54px;
                display: flex;
                padding: 10px;
                justify-content: center;
                color: #050505;
                font-variant-numeric: lining-nums proportional-nums;
                font-family: Syne;
                font-size: 28px;
                font-style: normal;
                font-weight: 600;
                letter-spacing: -1.176px;
                text-transform: uppercase;
                justify-content: center;
                align-items: center;
                &>.ganador {
                    max-width: 54px;
                    max-height: 54px;
                    border-radius: 14px;
                    padding: 10px;
                    border: 1px solid var(--componet-primary-color);
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    flex-wrap: wrap;
                }
            }

           
        }

        &>div>div {
            flex-grow: 1;
            align-content: center;

            &>img {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                border-radius: 36px;
                border: 1px solid #F9F9F9;
            }
        }
    }

    &>.datos-partido {
        display: flex;
        align-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;

        &>div:nth-child(1) {
            color: #666;
            text-align: center;
            font-family: "DM Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            /* 166.667% */
            letter-spacing: -0.024px;
        }
    }
}