/**
 * @file galeria-fotos.css
 * @description Archivo de estilos para el componente web personalizado GaleriaFotos.
 *              Proporciona un sistema completo de galería de imágenes interactiva con
 *              efectos visuales claymorphism, sistema de filtrado por categorías, animaciones
 *              de scroll optimizadas, soporte táctil avanzado para dispositivos móviles,
 *              modal integrado y diseño responsive con cuadrícula adaptativa.
 * @author Enri Rego
 * @version 1.0.0
 * @date 25 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/galeria-fotos.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ===================================================================
   VARIABLES CSS LOCALES Y CONFIGURACIÓN DEL COMPONENTE
   =================================================================== */

/**
 * Variables CSS específicas para la galería
 * Sistema de z-index organizado y configuraciones de animación optimizadas
 */

.galeria-vista {
  /* Z-index sistemático para la galería */
  --galeria-z-base: 1;
  --galeria-z-contenido: 2;
  --galeria-z-overlay: 3;
  --galeria-z-modal: 10;

  /* Variables de animación configurables */
  --galeria-duracion-entrada: var(--duracion-aparecer, 1s);
  --galeria-duracion-hover: var(--transicion-base, 0.3s);
  --galeria-timing-entrada: var(--timing-aparecer, cubic-bezier(0.4, 0, 0.2, 1));
  --galeria-retraso-base: var(--retraso-base, 0.1s);

  /* Variables de espaciado específicas */
  --galeria-gap: clamp(0.8rem, 2vw, 1.2rem);
  --galeria-padding: clamp(15px, 3vw, 20px);
  --galeria-border-radius: var(--arcilla-radio, var(--radio-borde, 10px));

  /* Variables de sombra con fallbacks */
  --galeria-sombra-suave: var(--arcilla-sombra-externa, 0 4px 12px rgba(0, 0, 0, 0.1));
  --galeria-sombra-elevada: 0 8px 25px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ===================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE
   =================================================================== */

/**
 * Contenedor principal de la galería
 * Establece la estructura base con efectos claymorphism y configuración
 * responsive para mostrar la galería de imágenes con bordes redondeados,
 * sombras suaves y espaciado optimizado
 */

/* Contenedor principal de la galería con efecto claymorphism */
.galeria-vista {
  position: relative;
  overflow: visible;
  width: 100%;
  margin: 10px 0 var(--espacio-grande, 2rem);
  padding: var(--galeria-padding);
  border-radius: var(--galeria-border-radius);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--galeria-sombra-suave);
  border: var(--arcilla-borde);
  /* Optimización de rendimiento para animaciones */
  will-change: box-shadow, transform;
  transition: box-shadow var(--galeria-duracion-hover) var(--galeria-timing-entrada);
}

/* Tema claro para la galería - sombras sutiles */
:root[data-tema="claro"] .galeria-vista {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

:root[data-tema="claro"] .galeria-vista:hover {
  box-shadow: var(--galeria-sombra-elevada);
}

/* Tema oscuro para el contenedor principal */
:root[data-tema="oscuro"] .galeria-vista {
  background-color: var(--arcilla-fondo);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Asegurar que el contenido está por encima del efecto */
.galeria-vista>* {
  position: relative;
  z-index: var(--galeria-z-contenido);
}

/* ===================================================================
   ESTRUCTURA Y CONTENIDO DE LA GALERÍA
   =================================================================== */

/**
 * Título principal de la galería
 * Diseño responsivo con efectos de texto y animaciones de entrada
 * optimizadas para diferentes tamaños de pantalla
 */

/* Título de la galería */
.galeria-vista h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: opacity var(--galeria-duracion-entrada) var(--galeria-timing-entrada),
    transform var(--galeria-duracion-entrada) var(--galeria-timing-entrada);
  transform: translateY(-10px);
  text-align: center;
  opacity: 0;
  color: var(--naranja);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Optimización de rendimiento */
  will-change: opacity, transform;
}

:root[data-tema="oscuro"] .galeria-vista h2 {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Contenedor de categorías con efecto claymorphism */
.galeria-categorias {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1.5rem;
  padding: 0.8rem;
  transition: opacity var(--galeria-duracion-entrada) var(--galeria-timing-entrada),
    transform var(--galeria-duracion-entrada) var(--galeria-timing-entrada);
  transform: translateY(-10px);
  opacity: 0;
  border-radius: calc(var(--galeria-border-radius) - 6px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-elevado-tarjeta);
  gap: var(--galeria-gap);
  border: 1px solid var(--arcilla-borde-color);
  /* Optimización de rendimiento */
  will-change: opacity, transform;
}

:root[data-tema="oscuro"] .galeria-categorias {
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-elevado-tarjeta);
}

/* Botones de categoría con estilo claymorphism */
.categoria-boton {
  font-size: var(--texto-base);
  font-weight: 600;
  position: relative;
  padding: 8px 16px;
  cursor: pointer;
  transition: all var(--galeria-duracion-hover) var(--galeria-timing-entrada);
  color: var(--naranja);
  border: 2px solid var(--naranja);
  border-radius: 20px;
  background-color: transparent;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  /* Optimización de rendimiento para animaciones */
  will-change: transform, background-color, box-shadow;
  /* Mejorar experiencia táctil */
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.2);
  touch-action: manipulation;
}

/* Efecto de hover para botones - con soporte táctil */
.categoria-boton:hover,
.categoria-boton:focus-visible {
  background-color: rgba(255, 107, 53, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  outline: none;
}

/* Efecto específico para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .categoria-boton:hover {
    transform: none;
    background-color: rgba(255, 107, 53, 0.15);
  }

  .categoria-boton:active {
    transform: scale(0.98);
    background-color: rgba(255, 107, 53, 0.2);
  }
}

/* Estados de focus para accesibilidad */
.categoria-boton:focus {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

/* Estado activo para botones */
.categoria-boton.activo {
  color: white;
  background-color: var(--naranja);
  border-color: var(--naranja);
  box-shadow: 0 4px 8px rgba(255, 107, 53, 0.25),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* Tema oscuro para botones normales */
:root[data-tema="oscuro"] .categoria-boton {
  color: var(--naranja);
  border-color: var(--naranja);
  background-color: transparent;
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.3);
}

/* Tema oscuro para botones hover */
:root[data-tema="oscuro"] .categoria-boton:hover,
:root[data-tema="oscuro"] .categoria-boton:focus-visible {
  background-color: rgba(255, 107, 53, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Tema oscuro para botones activos */
:root[data-tema="oscuro"] .categoria-boton.activo {
  color: var(--blanco);
  background-color: var(--naranja);
}

/* ===================================================================
   CUADRÍCULA Y ELEMENTOS DE GALERÍA
   =================================================================== */

/**
 * Contenedor principal de imágenes
 * Cuadrícula CSS responsive que se adapta automáticamente
 * al tamaño de pantalla con espaciado uniforme
 */

/* Contenedor de la cuadrícula de imágenes */
.galeria-contenedor {
  display: grid;
  padding: 5px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--galeria-gap);
  /* Optimización de rendimiento para el grid */
  will-change: auto;
}

/* Elemento individual de la galería con claymorphism */
.galeria-item {
  position: relative;
  overflow: hidden;
  height: 200px;
  transition: all var(--galeria-duracion-hover) var(--galeria-timing-entrada);
  transform: translateY(15px);
  opacity: 0;
  border-radius: calc(var(--galeria-border-radius) - 4px);
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--galeria-sombra-suave);
  border: 2px solid var(--arcilla-borde-color);
  /* Optimización de rendimiento para animaciones */
  will-change: transform, box-shadow, opacity;
  /* Mejorar experiencia táctil */
  -webkit-tap-highlight-color: rgba(255, 107, 53, 0.1);
}

:root[data-tema="oscuro"] .galeria-item {
  background-color: var(--arcilla-fondo-secundario);
  box-shadow: var(--arcilla-sombra-externa);
}

/* Efecto hover mejorado para elementos de la galería */
.galeria-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px -5px var(--arcilla-sombra-color);
  border-color: var(--naranja);
}

/* Soporte específico para dispositivos táctiles */
@media (hover: none) and (pointer: coarse) {
  .galeria-item:hover {
    transform: translateY(-3px);
  }

  .galeria-item:active {
    transform: scale(0.98);
  }

  .galeria-item.touch-device {
    cursor: pointer;
  }
}

:root[data-tema="oscuro"] .galeria-item:hover {
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

/* Contenedor de la imagen */
.galeria-item-contenedor {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: calc(var(--galeria-border-radius) - 6px);
  z-index: var(--galeria-z-base);
}

/* Imagen del elemento */
.galeria-item-img {
  width: 100%;
  height: 100%;
  transition: transform var(--galeria-duracion-entrada) var(--galeria-timing-entrada);
  object-fit: cover;
  border-radius: calc(var(--galeria-border-radius) - 6px);
  /* Optimización de rendimiento */
  will-change: transform;
}

.galeria-item-contenedor:hover .galeria-item-img {
  transform: scale(1.08);
}

/* Overlay con la información */
.galeria-item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  transition: transform var(--galeria-duracion-hover) var(--galeria-timing-entrada),
    opacity var(--galeria-duracion-hover) var(--galeria-timing-entrada);
  transform: translateY(100%);
  opacity: 0;
  color: white;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.6) 70%,
      rgba(0, 0, 0, 0) 100%);
  border-bottom-left-radius: calc(var(--galeria-border-radius) - 6px);
  border-bottom-right-radius: calc(var(--galeria-border-radius) - 6px);
  z-index: var(--galeria-z-overlay);
  /* Optimización de rendimiento */
  will-change: transform, opacity;
}

.galeria-item-contenedor:hover .galeria-item-overlay {
  transform: translateY(0);
  opacity: 1;
}

/* ===================================================================
   SISTEMA DE OVERLAYS E INTERACTIVIDAD
   =================================================================== */

/**
 * Overlays informativos y sistema de hover
 * Gestión de la información superpuesta con gradientes,
 * animaciones y efectos de transición para diferentes dispositivos
 */

/* Soluciones para dispositivos móviles y táctiles */
/* Opción 1: Mostrar overlay siempre en mobile */
@media (max-width: 768px) and (hover: none) {
  .galeria-item-overlay {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0) 100%);
  }

  .galeria-item-titulo,
  .galeria-item-descripcion {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Opción 2: Alternar overlay con tap en mobile */
@media (hover: none) and (pointer: coarse) {
  .galeria-item-contenedor {
    cursor: pointer;
  }

  /* Clase que se puede alternar con JavaScript */
  .galeria-item-contenedor.overlay-activo .galeria-item-overlay {
    transform: translateY(0);
    opacity: 1;
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 70%,
        rgba(0, 0, 0, 0) 100%);
    backdrop-filter: blur(2px);
  }

  .galeria-item-contenedor.overlay-activo .galeria-item-titulo,
  .galeria-item-contenedor.overlay-activo .galeria-item-descripcion {
    transform: translateY(0);
    opacity: 1;
  }

  /* Efecto visual adicional cuando overlay está activo */
  .galeria-item-contenedor.overlay-activo {
    transform: scale(1.02);
    z-index: 10;
  }

  .galeria-item-contenedor.overlay-activo .galeria-item-img {
    transform: scale(1.05);
  }

  /* Animación de pulso para indicar interactividad */
  .galeria-item-contenedor::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 107, 53, 0.8);
    opacity: 0.6;
    animation: pulsoInfo 2s infinite ease-in-out;
    pointer-events: none;
    z-index: 2;
  }

  /* Ocultar el indicador cuando el overlay está activo */
  .galeria-item-contenedor.overlay-activo::after {
    display: none;
  }

  /* Indicador de "tap para ver" cuando overlay está activo */
  .galeria-item-contenedor.overlay-activo::before {
    content: "👆 Tap para ver";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 107, 53, 0.9);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    z-index: 3;
    animation: parpadeo 1.5s infinite ease-in-out;
    text-shadow: none;
  }
}

@keyframes pulsoInfo {

  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.9;
  }
}

@keyframes parpadeo {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }
}

/* Títulos y textos mejorados */
.galeria-item-titulo {
  font-size: var(--texto-base);
  font-weight: 600;
  position: relative;
  margin: 0 0 5px;
  transition: transform 0.3s ease 0.1s, opacity 0.3s ease 0.1s;
  transform: translateY(5px);
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.galeria-item-descripcion {
  font-size: var(--texto-chico);
  position: relative;
  margin: 0;
  transition: transform 0.3s ease 0.2s, opacity 0.3s ease 0.2s;
  transform: translateY(5px);
  opacity: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.galeria-item-contenedor:hover .galeria-item-titulo,
.galeria-item-contenedor:hover .galeria-item-descripcion {
  transform: translateY(0);
  opacity: 1;
}

/* ===================================================================
   ANIMACIONES Y TRANSICIONES
   =================================================================== */

/**
 * Sistema de animaciones de scroll
 * Configuración de animaciones de entrada escalonadas para elementos
 * de la galería con soporte para animaciones rápidas y optimizadas
 */

/* Animaciones para elementos al hacer scroll */
.galeria-vista h2.animar {
  transform: translateY(0);
  opacity: 1;
}

.galeria-categorias.animar {
  transform: translateY(0);
  opacity: 1;
}

.galeria-item.animar {
  transition-delay: calc(var(--retraso-base, 0.05s) * var(--animacion-orden, 0));
  transform: translateY(0);
  opacity: 1;
}

/* Animación ultra-rápida para elementos ya vistos */
.galeria-item.ultra-rapida {
  transition: all 0.1s ease-out;
  transition-delay: calc(0.01s * var(--animacion-orden, 0));
  transform: translateY(0);
  opacity: 1;
}

/* ===================================================================
   RESPONSIVE DESIGN Y MEDIA QUERIES
   =================================================================== */

/**
 * Adaptaciones para pantallas pequeñas
 * Configuraciones específicas para dispositivos móviles con
 * ajustes de tamaños, espaciados y comportamientos táctiles
 */

/* Media queries para dispositivos pequeños */
@media (max-width: 480px) {
  .galeria-vista {
    padding: 15px 10px;
    border-radius: calc(var(--arcilla-radio) * 0.7);
  }

  .galeria-contenedor {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
  }

  .galeria-item {
    height: 150px;
    border-radius: calc(var(--arcilla-radio) * 0.5);
  }

  .galeria-item-overlay {
    padding: 10px;
  }

  .categoria-boton {
    font-size: var(--texto-chico);
    padding: 6px 12px;
  }

  .galeria-categorias {
    padding: 0.3rem;
    gap: 0.5rem;
    border-radius: calc(var(--arcilla-radio) * 0.5);
  }

  .galeria-item-contenedor,
  .galeria-item-img,
  .galeria-item-overlay {
    border-radius: calc(var(--arcilla-radio) * 0.5 - 2px);
  }

  /* Ajustes para indicadores móviles en pantallas pequeñas */
  .galeria-item-contenedor::after {
    width: 20px;
    height: 20px;
    top: 8px;
    right: 8px;
  }

  .galeria-item-contenedor.overlay-activo::before {
    font-size: 9px;
    padding: 3px 6px;
    top: 8px;
    right: 8px;
  }
}

/* ===================================================================
   OPTIMIZACIONES DE RENDIMIENTO Y ACCESIBILIDAD
   =================================================================== */

/**
 * Optimizaciones específicas para animaciones y preferencias de accesibilidad
 * Incluye configuraciones para usuarios con preferencias de movimiento reducido
 * y optimizaciones de rendimiento para dispositivos de gama baja
 */

/* Optimizaciones para dispositivos con GPU limitada */
@media screen and (max-device-width: 768px) and (-webkit-max-device-pixel-ratio: 1) {

  .galeria-item,
  .galeria-item-img,
  .galeria-item-overlay {
    will-change: auto;
  }

  .categoria-boton {
    will-change: auto;
  }
}

/* Configuraciones para modo de alto contraste */
@media (prefers-contrast: more) {
  .categoria-boton {
    border-width: 3px;
  }

  .galeria-item {
    border-width: 3px;
  }

  .galeria-item-overlay {
    background: linear-gradient(0deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.8) 70%,
        rgba(0, 0, 0, 0.3) 100%);
  }
}

/* Mejoras para usuarios de tecnologías asistivas */
.galeria-item:focus-within {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

.categoria-boton:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
}

/* Estados de carga y skeleton loading */
.galeria-item.loading {
  background: linear-gradient(90deg,
      var(--arcilla-fondo-secundario) 25%,
      rgba(255, 255, 255, 0.1) 50%,
      var(--arcilla-fondo-secundario) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite ease-in-out;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ===================================================================
   ESTILOS DE TEMA Y VARIACIONES VISUALES
   =================================================================== */

/**
 * Variaciones de tema claro
 * Configuración específica para el tema claro con sombras suaves
 * y efectos de hover optimizados para mejor legibilidad
 */

/**
 * Variaciones de tema oscuro
 * Configuración específica para el tema oscuro con sombras más profundas
 * y colores de fondo adaptados para mejor contraste nocturno
 */

/* ===================================================================
   SISTEMA DE CATEGORÍAS Y FILTROS
   =================================================================== */

/**
 * Contenedor y botones para el sistema de filtrado con efectos
 * claymorphism y transiciones suaves entre estados
 */

/* ===================================================================
   ELEMENTOS INDIVIDUALES DE GALERÍA
   =================================================================== */

/**
 * Tarjetas con efecto claymorphism, animaciones de hover
 * y sistema de overlays informativos
 */

/* ===================================================================
   SOPORTE PARA DISPOSITIVOS MÓVILES Y TÁCTILES
   =================================================================== */

/**
 * Adaptaciones para dispositivos táctiles
 * Configuraciones específicas para mejorar la experiencia en dispositivos
 * móviles con gestos táctiles, indicadores visuales y overlays adaptativos
 */

/**
 * Indicadores visuales para interactividad táctil
 * Sistema de pulsos y animaciones para guiar al usuario
 * en dispositivos táctiles sobre las acciones disponibles
 */

/* ===================================================================
   MODAL TEMPORAL Y UTILIDADES GLOBALES
   =================================================================== */

/**
 * Estilos para modal temporal y prevención de scroll
 * Configuración de modal de respaldo y clases globales para
 * gestión de scroll del body cuando se abre el modal
 */