/* ===========================================
   ESTILOS PARA LA GALERÍA DE IMÁGENES
   =========================================== */

/* Modal de galería */
#imageModal .modal-content {
  background-color: rgba(0, 0, 0, 0.95) !important;
}

/* Botones de navegación */
#imageNavigation button {
  transition: all 0.2s ease;
}

#imageNavigation button:hover {
  opacity: 1 !important;
  transform: scale(1.1);
}

#imageNavigation button:disabled {
  cursor: not-allowed;
}

/* Estilos para las miniaturas */
#imageThumbnails {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

#imageThumbnails::-webkit-scrollbar {
  height: 6px;
}

#imageThumbnails::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

#imageThumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

#imageThumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Efectos hover para miniaturas */
.img-thumbnail {
  transition: all 0.2s ease;
}

.img-thumbnail:hover {
  opacity: 1 !important;
  transform: scale(1.05);
}

/* Estilos para indicador de múltiples imágenes */
.noticia-imagen-container .badge {
  font-size: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Contador de imágenes */
#imageCounter {
  font-size: 0.9rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Imagen principal del modal */
#modalImage {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
  #imageNavigation button {
    width: 50px;
    height: 50px;
  }
  
  #imageThumbnails {
    max-height: 80px;
  }
  
  .img-thumbnail {
    width: 50px !important;
    height: 50px !important;
  }
  
  #imageCounter {
    font-size: 0.8rem;
    padding: 0.5rem 1rem !important;
  }
}

/* Animaciones suaves */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#modalImage {
  animation: fadeIn 0.3s ease-out;
}

/* Estilo para el cursor pointer en imágenes clickeables */
.noticia-imagen,
.featured-news-image-small {
  transition: all 0.2s ease;
}

.noticia-imagen:hover,
.featured-news-image-small:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Estilo mejorado para el badge de contador */
.noticia-imagen-container .badge {
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===========================================
   ESTILOS PARA FORMULARIOS DE ARCHIVOS
   =========================================== */

/* Estilos para los labels de upload de archivos */
.file-label {
  color: #000000 !important;
}

/* Estilos para el texto de archivos seleccionados */
.selected-files {
  color: #000000 !important;
}

/* Asegurar que el texto dentro de custom-file-upload sea negro */
.custom-file-upload,
.custom-file-upload * {
  color: #000000 !important;
}