@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 {
    cursor: grab;
    cursor: -webkit-grab;
    user-select: none;
    -webkit-user-select: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* Ocultar barra de desplazamiento en IE y Edge */
    scrollbar-width: none; 
    display: flex;
    gap: 16px;
    margin: 14px;
    /* Espacio entre las tarjetas */
    /* Oculta el scroll manual */
    scroll-snap-type: x mandatory;
    padding: 10px;
    /* Opcional: Añade algo de espacio alrededor */
    transition: transform 0.3s ease-in-out;

    /* Suaviza la animación del scroll */
    &>div {
        flex: 1 0 auto;
        /* Ajuste dinámico del tamaño de las tarjetas */
        max-width: 536px;
        min-width: 536px;
        /* Ancho mínimo de 350px */
        scroll-snap-align: start;
    }
}

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

.partidos.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
.btn-prev {
    left: 10px;
    /* Posiciona el botón de "prev" a la izquierda */
}

.btn-next {
    right: 10px;
    /* Posiciona el botón de "next" a la derecha */
}

.btn-navigate:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}