/* src/components/ImageGallery.css */

.image-gallery-container {
  position: relative; /* Necesario para posicionar los botones y puntos */
  width: 100%;
  max-width: 800px; /* Ancho máximo de la galería */
  height: 450px; /* Altura fija de la galería */
  margin: 40px auto; /* Centra la galería y da espacio */
  overflow: hidden; /* Oculta partes de la imagen que se salgan */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0; /* Color de fondo mientras carga la imagen */
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajusta la imagen para cubrir el contenedor sin distorsionarse */
  display: block; /* Elimina espacio extra debajo de la imagen */
  opacity: 1;
  transition: opacity 0.5s ease-in-out; /* Transición suave al cambiar de imagen */
}

/* Opcional: Estilo para una transición de fundido entre imágenes */
/* Esto requiere un poco más de lógica en React (usar una clase para ocultar la imagen anterior)
   Para una transición más simple con el useEffect actual, la opacidad ya funciona bien. */

/* Estilos para los botones de navegación */
.gallery-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  font-size: 2em;
  border-radius: 50%; /* Botones redondos */
  z-index: 10; /* Asegura que estén encima de la imagen */
  transition: background-color 0.3s ease;
}

.gallery-nav-button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

/* Estilos para los indicadores de puntos */
.gallery-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot.active {
  background-color: white;
  transform: scale(1.2);
}

.dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-gallery-container {
    height: 300px; /* Reduce la altura en pantallas pequeñas */
  }

  .gallery-nav-button {
    padding: 10px;
    font-size: 1.5em;
  }

  .gallery-dots {
    bottom: 10px;
    gap: 8px;
  }

  .dot {
    width: 10px;
    height: 10px;
  }
}