/* Archivo CSS principal para Laravel Blade */

/* Importar estilos del visor de imágenes */

/* Estilos personalizados para react-image-gallery */

.image-gallery {
  background: #000;
}

.image-gallery-content .image-gallery-slide .image-gallery-image {
  max-height: 70vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.image-gallery-fullscreen-button,
.image-gallery-play-button {
  color: #fff !important;
}

.image-gallery-fullscreen-button:hover,
.image-gallery-play-button:hover {
  color: #005fab !important;
}

.image-gallery-left-nav,
.image-gallery-right-nav {
  color: #fff !important;
  font-size: 60px !important;
}

.image-gallery-left-nav:hover,
.image-gallery-right-nav:hover {
  color: #005fab !important;
}

.image-gallery-bullets .image-gallery-bullet {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
}

.image-gallery-bullets .image-gallery-bullet.active {
  background-color: #005fab;
}

.image-gallery-thumbnails-wrapper {
  background: rgba(0, 0, 0, 0.8);
}

.image-gallery-thumbnail {
  border: 2px solid transparent;
}

.image-gallery-thumbnail.active,
.image-gallery-thumbnail:hover {
  border: 2px solid #005fab;
}

/* Responsive para móviles */

@media (max-width: 768px) {
  .image-gallery-content .image-gallery-slide .image-gallery-image {
    max-height: 60vh;
  }
  
  .image-gallery-thumbnails {
    padding: 5px;
  }
  
  .image-gallery-thumbnail {
    width: 60px !important;
    height: 60px !important;
    margin: 0 2px;
  }
  
  .image-gallery-left-nav,
  .image-gallery-right-nav {
    font-size: 40px !important;
  }
}

/* Habilitar gestos táctiles en móviles */

.image-gallery {
  touch-action: pan-x pan-y pinch-zoom;
}

.image-gallery-content {
  touch-action: pan-x pan-y pinch-zoom;
}

.image-gallery-slide {
  touch-action: pan-x pan-y pinch-zoom;
}

.image-gallery-image {
  touch-action: pan-x pan-y pinch-zoom;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Mejoras para el modal */

.image-gallery-modal .image-gallery {
  height: 100%;
  touch-action: pan-x pan-y pinch-zoom;
}

.image-gallery-modal .image-gallery-content {
  height: calc(100% - 100px);
  touch-action: pan-x pan-y pinch-zoom;
}