/* ========================================
   GALERÍA - INDICADORES (PUNTOS) HORIZONTALES
   Fix agresivo para asegurar fila horizontal en FOTOS y VIDEOS.
   ======================================== */

/* Asegura que los contenedores de puntos SIEMPRE sean una fila */
#indicadoresFotos,
#indicadoresVideos{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-top: 0.85rem !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0.15rem 0.25rem;
}

/* Puntos: consistentes (pill/round) y con buen tap-target */
#indicadoresFotos .indicador-foto,
#indicadoresVideos .indicador-video{
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  outline: none;
  opacity: 0.75;
}

/* Pequeño “premium”: el activo parece una píldora */
#indicadoresFotos .indicador-foto[style*="#D4AF37"],
#indicadoresVideos .indicador-video[style*="#D4AF37"]{
  width: 8px;
  height: 4px;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
}

/* Hover ya existe en galeria-carrusel.css, esto lo suaviza */
#indicadoresFotos .indicador-foto:hover,
#indicadoresVideos .indicador-video:hover{
  transform: scale(1.15);
}

@media (max-width: 480px){
  #indicadoresFotos,
  #indicadoresVideos{
    gap: 0.4rem !important;
    margin-top: 0.75rem !important;
  }
  #indicadoresFotos .indicador-foto,
  #indicadoresVideos .indicador-video{
    width: 3px;
    height: 3px;
  }
  #indicadoresFotos .indicador-foto[style*="#D4AF37"],
  #indicadoresVideos .indicador-video[style*="#D4AF37"]{
    width: 6px;
    height: 3px;
    box-shadow: 0 0 0 2px rgba(212,175,55,0.08);
  }
}