/*======= ESTILOS IMGS INTEGRACION ========= */
/* --- DEFAULT STYLES (para Escritorio y tablets) --- */
.galeria-eventos-abonoteatro {
    /* Por defecto, el contenedor principal no necesita ser flex/grid,
       el track manejará el layout. Añadimos padding para el botón 'Ver más'. */
    padding-bottom: 30px; /* Espacio para el botón */
}

.galeria-eventos-abonoteatro .slider-track {
    display: flex; /* Usamos flexbox para crear una cuadrícula flexible */
    flex-wrap: wrap; /* Permitimos que los elementos se envuelvan a la siguiente fila */
    gap: 20px; /* Añadimos espacio entre los elementos */
    /* Removemos estilos de slider que solo aplican en móvil */
    transition: none; /* No hay transición en escritorio */
    width: 100%; /* El track ocupa todo el ancho disponible */
}

.galeria-eventos-abonoteatro .evento-item {
    /* Calculamos el ancho para 4 columnas (ejemplo), ajustando por el gap */
    /* flex-basis: Ancho inicial antes de crecer o encoger */
    /* flex-grow: 0 - No crece */
    /* flex-shrink: 0 - No encoge más allá de flex-basis */
    flex: 0 0 calc(25% - 15px); /* Aproximadamente 4 columnas (4*20px = 80px gap total, /4 = 20px, pero distribuido son 15px a cada lado de cada item si no es el primero/último) */
    max-width: calc(25% - 15px); /* Limita el ancho máximo */
    box-sizing: border-box; /* Asegura que padding y borde se incluyan en el ancho */
    /* margin-bottom: 20px; */ /* El gap ya maneja el espacio vertical */
    transition: none; /* No hay transición en los items */
}

/* Estilo base para las imágenes dentro de los items */
.galeria-eventos-abonoteatro .evento-item img {
    display: block; /* Elimina el espacio extra debajo de la imagen */
    max-width: 100%; /* Asegura que la imagen no se salga de su contenedor */
    height: auto; /* Mantiene la relación de aspecto */
    object-fit: cover; /* Cubre el área del item si la imagen tiene otra relación de aspecto */
}


/* Oculta los items con la clase 'evento-oculto' en escritorio por defecto */
.galeria-eventos-abonoteatro .evento-item.evento-oculto {
    display: none;
}

/* Oculta las flechas de slider en escritorio */
.slider-arrow {
    display: none;
}

/* Muestra el botón "Ver más" en escritorio por defecto */
.boton-ver-mas-contenedor {
    display: block;
    text-align: center; /* Centra el botón */
    margin-top: 20px; /* Espacio encima del botón */
}

.boton-ver-mas {
    display: inline-block;
    padding: 12px 30px; /* Un poco más grande */
    background-color: #009AD8;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1em; /* Un poco más grande */
    transition: background-color 0.2s ease;
}

.boton-ver-mas:hover{
    background-color: #009AD8;
}


/* --- SOLO PARA MÓVILES PEQUEÑOS --- */
@media (max-width: 479.98px) {
    .galeria-eventos-abonoteatro {
        overflow: hidden; /* Necesario para enmascarar los items fuera de vista */
        position: relative; /* Necesario para posicionar las flechas absolutamente */
        /* display: block; por defecto es block */
         padding-bottom: 0; /* No hay botón 'Ver más' en móvil, no se necesita espacio */
    }

    .galeria-eventos-abonoteatro .slider-track {
        display: flex; /* ¡Importante! Pone los items en una fila */
        flex-wrap: nowrap; /* Evita que los items se envuelvan */
        width: fit-content; /* Permite que el track sea más ancho que el contenedor */
        transition: transform 0.2s ease; /* Añade la transición al track */
        gap: 0; /* No hay espacio entre los items en el slider */
         will-change: transform; /* Sugerencia de rendimiento para animaciones */
    }

    .galeria-eventos-abonoteatro .evento-item {
        flex: 0 0 52%; /* Cada item ocupa el 100% del ancho del track */
        max-width: 52%;
        margin-bottom: 0; /* Elimina el margen inferior en móvil */
        transition: none; /* La transición la hace el track */
    }

     /* Asegura que los items ocultos por PHP se muestren en móvil para el slider */
    .galeria-eventos-abonoteatro .evento-item.evento-oculto {
        display: block; /* O 'initial', 'flex', etc., dependiendo del display base */
    }


    /* Muestra las flechas de slider en móvil */
    .slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        font-size: 24px;
        padding: 10px;
        z-index: 10;
        cursor: pointer;
        display: flex; /* Muestra las flechas */
        align-items: center; /* Centra verticalmente el contenido de la flecha */
        justify-content: center; /* Centra horizontalmente el contenido de la flecha */
        border-radius: 50%; /* Hace las flechas redondas */
        width: 40px; /* Ancho fijo */
        height: 40px; /* Alto fijo */
        line-height: 1; /* Ajusta la altura de línea */
    }
    .slider-arrow:focus,
    .slider-arrow:active {
        background: rgba(0,0,0,0.5); /* o el mismo fondo que uses normalmente */
        outline: none; /* Quita el contorno predeterminado del navegador */
        box-shadow: none; /* Quita cualquier sombra externa si aparece */
    }

    .slider-prev {
		left: 10px;
	}
	
	.slider-next {
		right: 10px;
	}
	

    /* Oculta "Ver más" en móviles */
    .boton-ver-mas-contenedor {
        display: none;
    }
}