.gallery-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Asegura que el contenido interno no se desborde */
    background-color: #ffffff; /* Fondo blanco para los ítems */
    border-radius: 0.5rem; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra sutil */
    cursor: pointer;
    aspect-ratio: 16 / 10; /* Mantiene una relación de aspecto consistente para el contenedor del item */
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.gallery-item img, 
.gallery-item .video-poster-container {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen/poster cubra el contenedor */
}

.video-poster-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333; /* Fondo oscuro para posters de video */
}

.play-icon {
    position: absolute;
    font-size: 3rem; /* Tamaño del ícono de reproducción */
    color: rgba(255, 255, 255, 0.8);
    pointer-events: none; /* Para que no interfiera con el clic en el item */
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Sombra para el ícono de play */
}

#modal {
    background-color: rgba(0,0,0,0.85); /* Fondo oscuro semitransparente para el modal */
}

#modal-content-wrapper {
    /* Los estilos de Tailwind ya manejan bien esto, pero se puede añadir más si es necesario */
}

#modal-content {
    max-height: 90vh; /* Limita la altura del contenido del modal */
    max-width: 90vw; /* Limita el ancho del contenido del modal */
}

#modal img, 
#modal video {
    max-height: 75vh; /* Altura máxima para la imagen/video dentro del modal */
    border-radius: 0.5rem; /* Bordes redondeados para el contenido del modal */
    display: block; /* Asegura que no haya espacio extra debajo de la imagen/video */
    margin: auto; /* Centra el contenido si es más pequeño que el contenedor */
}

/* Estilo para el botón de cerrar */
#close-modal {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#close-modal:hover {
    transform: scale(1.1);
    /* El color de hover ya está definido por Tailwind (hover:bg-red-700) */
}

/* Animación de entrada para el modal */
#modal.open {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Animación de entrada para los items de la galería */
.gallery-item-loaded {
    animation: popIn 0.5s ease-out forwards;
    opacity: 0; /* Inicia invisible para la animación */
}

@keyframes popIn {
    0% { opacity: 0; transform: scale(0.8); }
    80% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* Estilos para el mensaje de carga y error */
#loading-message {
    /* Los estilos de Tailwind ya manejan bien esto */
}

#loading-message.text-red-500 {
    /* Tailwind ya define el color rojo */
}