/**
 * @file modal-imagen.css
 * @description Archivo de estilos para el componente web personalizado ModalImagen.
 *              Proporciona efectos visuales claymorphism con sombras suaves y bordes redondeados,
 *              animaciones de transición para aparición y navegación de imágenes,
 *              controles de navegación con efectos 3D y feedback táctil,
 *              indicadores de carga animados con spinners y transparencias,
 *              diseño responsive optimizado para dispositivos móviles y tablets,
 *              soporte para dispositivos táctiles con animaciones específicas,
 *              variables CSS para personalización y mantenimiento centralizado,
 *              optimizaciones de rendimiento con backdrop-filter y z-index organizados.
 * @author Enri Rego
 * @version 1.0.0
 * @date 01 de Junio 2025
 * @since 1.0.0
 * @requires scripts/components/modal-imagen.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

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

/**
 * Contenedor principal del modal
 * Cubre toda la pantalla con fondo semi-transparente
 */
.modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: none;
  overflow: auto;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  background-color: rgba(0, 0, 0, var(--opacidad-modal, 0.9));
}

/**
 * Contenedor del contenido del modal
 * Centra la imagen y elementos de navegación
 */
.modal-contenido {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--espacio-grande, 2rem);
}

/* ==========================================================================
   IMAGEN PRINCIPAL
   ========================================================================== */

/**
 * Imagen principal del modal con animaciones y efectos visuales
 */
.modal-imagen {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  animation: escalar 0.3s var(--timing-aparecer, cubic-bezier(0.4, 0, 0.2, 1));
  border-radius: var(--radio-borde, 10px);
  box-shadow: var(--sombra-base, 0 4px 6px rgba(0, 0, 0, 0.1));
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* ==========================================================================
   CONTROLES DE NAVEGACIÓN
   ========================================================================== */

/**
 * Botón para cerrar el modal
 * Posicionado en la esquina superior derecha con alta prioridad de z-index
 * para garantizar accesibilidad en todas las situaciones de navegación
 */
.cerrar-modal {
  /* Tipografía grande para alta visibilidad */
  font-size: 50px;
  font-weight: bold;

  /* Posicionamiento absoluto en esquina superior derecha */
  position: absolute;
  top: 20px;
  right: 30px;

  /* Interactividad y accesibilidad */
  cursor: pointer;
  user-select: none;

  /* Transición suave para efectos hover */
  transition: all 0.3s ease;

  /* Color base del sistema de diseño */
  color: var(--blanco);

  /* Z-index elevado para visibilidad sobre imagen */
  z-index: 2;
}

/**
 * Estados interactivos del botón cerrar modal
 * Efectos de escala y cambio de color para feedback visual claro
 */
.cerrar-modal:hover,
.cerrar-modal:focus {
  /* Escala ligeramente mayor para efecto de proximidad */
  transform: scale(1.1);

  /* Color de acento del sistema para resaltar acción */
  color: var(--naranja);
}

/**
 * Botones de navegación anterior/siguiente
 * Implementan efectos claymorphism con sombras múltiples y transiciones fluidas
 * optimizadas para interacción táctil y visual con backdrop-filter avanzado
 */
.nav-btn {
  /* Tipografía robusta para iconos */
  font-weight: 600;
  font-size: 30px;

  /* Posicionamiento absoluto centrado verticalmente */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* Dimensiones circulares estándar */
  width: 60px;
  height: 60px;

  /* Reset de estilos de botón nativo */
  border: none;
  border-radius: 50%;

  /* Colores del sistema de diseño */
  background-color: var(--naranja);
  color: var(--crema);

  /* Layout flexbox para centrado perfecto de contenido */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Interactividad y accesibilidad */
  cursor: pointer;
  opacity: 1;
  overflow: hidden;

  /* Transición suave con timing function personalizada */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index coordinado con el sistema del modal */
  z-index: 2;

  /* Efectos claymorphism con múltiples sombras */
  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);

  /* Efecto de desenfoque de fondo para profundidad */
  backdrop-filter: blur(10px);
}

/**
 * Estado hover de los botones de navegación
 * Incrementa la elevación visual y efectos de sombra para feedback inmediato
 */
.nav-btn:hover {
  /* Mantener opacidad completa */
  opacity: 1;

  /* Escala ligeramente mayor manteniendo centrado vertical */
  transform: translateY(-50%) scale(1.1);

  /* Sombra expandida para mayor elevación visual */
  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.4), inset 0 -2px 5px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 0.2);

  /* Mantener color base sin cambios */
  background-color: var(--naranja);
}

/**
 * Estado activo/pressed de los botones de navegación
 * Simula profundidad física con escala reducida y sombra comprimida
 */
.nav-btn:active {
  /* Escala ligeramente menor para simular presión */
  transform: translateY(-50%) scale(0.95);

  /* Sombra reducida para efecto de presión hacia adentro */
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.3), inset 0 -1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.2);

  /* Transición más rápida para respuesta inmediata */
  transition: all 0.1s ease;
}

/**
 * Posicionamiento específico del botón de navegación anterior
 * Ubicado en el lado izquierdo con espaciado apropiado del borde
 */
.nav-prev {
  left: 20px;
}

/**
 * Posicionamiento específico del botón de navegación siguiente  
 * Ubicado en el lado derecho con espaciado simétrico al anterior
 */
.nav-next {
  right: 20px;
}

/**
 * Iconos SVG dentro de los botones de navegación
 * Dimensiones optimizadas para legibilidad y proporción visual dentro del botón circular
 */
.nav-btn svg {
  /* Dimensiones específicas para iconos de navegación */
  width: 36px;
  height: 36px;
}

/* ==========================================================================
   INDICADOR DE CARGA
   ========================================================================== */

/**
 * Contenedor del indicador de carga
 * Posicionado absolutamente al centro con overlay semi-transparente
 * y alta prioridad de z-index para visibilidad durante transiciones de imagen
 */
.modal-indicador-carga {
  /* Posicionamiento centrado absoluto */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* Layout flexbox para organización vertical de elementos */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* Z-index superior para visibilidad sobre imagen y controles */
  z-index: 3;

  /* Espaciado interno para contenido */
  padding: 20px;

  /* Fondo semi-transparente para contraste con contenido */
  background-color: rgba(0, 0, 0, 0.7);

  /* Bordes redondeados coherentes con el sistema de diseño */
  border-radius: 12px;

  /* Color de texto para contraste óptimo sobre fondo oscuro */
  color: white;
}

/**
 * Spinner animado para indicar carga de imagen
 * Implementa animación de rotación continua con colores del sistema
 */
.cargador-spinner {
  /* Dimensiones del spinner optimizadas para visibilidad */
  width: 40px;
  height: 40px;

  /* Borde circular con transparencia para efecto de carga */
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  /* Segmento superior sólido que crea el efecto de rotación */
  border-top-color: white;

  /* Animación continua de rotación */
  animation: girar 1s linear infinite;

  /* Espaciado inferior para separación del texto */
  margin-bottom: 10px;
}

/* ==========================================================================
   ANIMACIONES Y EFECTOS
   ========================================================================== */

/**
 * Animación de rotación continua para el spinner de carga
 * Implementa rotación completa de 360 grados con timing linear
 * para crear efecto visual fluido de progreso indeterminado
 */
@keyframes girar {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/**
 * Animación de aparición con escala para las imágenes del modal
 * Transición suave desde escala reducida y transparente hasta estado final
 * con timing function optimizada para efecto natural de aparición
 */
@keyframes escalar {
  from {
    /* Estado inicial: escala reducida y transparente */
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    /* Estado final: escala completa y opaco */
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * Efecto de pulso especial para dispositivos táctiles
 * Animación de feedback táctil que simula respuesta física al toque
 * con escalas progresivas y efectos de sombra sincronizados
 */
@keyframes pulsoTouch {
  0% {
    /* Estado inicial: tamaño normal con sombra base */
    transform: translateY(-50%) scale(1);
    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);
  }

  50% {
    /* Punto medio: máxima expansión con sombra intensa */
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6), inset 0 -2px 5px rgba(0, 0, 0, 0.1), inset 0 2px 5px rgba(255, 255, 255, 0.2);
  }

  100% {
    /* Estado final: retorno a tamaño normal */
    transform: translateY(-50%) scale(1);
    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);
  }
}

/* ==========================================================================
   OPTIMIZACIONES PARA DISPOSITIVOS TÁCTILES
   ========================================================================== */

/**
 * Efectos especiales para dispositivos táctiles sin capacidad hover
 * Detecta dispositivos táctiles puros y aplica animación de pulso
 * en lugar de efectos hover para feedback visual apropiado al contexto
 */
@media (hover: none) and (pointer: coarse) {
  .nav-btn:active {
    /* Animación de pulso específica para dispositivos táctiles */
    animation: pulsoTouch 0.3s ease-out;
  }
}

/* ==========================================================================
   DISEÑO RESPONSIVO PARA DISPOSITIVOS MÓVILES
   ========================================================================== */

/**
 * Ajustes responsive para pantallas pequeñas (tablets y dispositivos móviles)
 * Optimiza dimensiones y espaciado para interfaces táctiles en espacios reducidos
 * manteniendo accesibilidad y usabilidad en dispositivos de menor tamaño
 */
@media (max-width: 768px) {

  /**
   * Reducción del tamaño del botón cerrar para pantallas pequeñas
   * Mantiene visibilidad mientras optimiza el espacio disponible
   */
  .cerrar-modal {
    /* Tamaño de fuente reducido pero aún legible */
    font-size: 40px;

    /* Espaciado ajustado para márgenes más compactos */
    top: 15px;
    right: 20px;
  }

  /**
   * Dimensiones reducidas de botones de navegación para dispositivos móviles
   * Optimiza para interfaces táctiles en espacios limitados
   */
  .nav-btn {
    /* Dimensiones más compactas manteniendo área de toque mínima */
    width: 40px;
    height: 40px;
  }

  /**
   * Iconos SVG proporcionalmente reducidos para botones más pequeños
   * Mantiene legibilidad visual en dispositivos de menor resolución
   */
  .nav-btn svg {
    /* Dimensiones reducidas pero proporcionales */
    width: 24px;
    height: 24px;
  }

  /**
   * Posicionamiento ajustado del botón anterior para pantallas pequeñas
   * Reduce espaciado lateral para optimizar área de contenido
   */
  .nav-prev {
    left: 10px;
  }

  /**
   * Posicionamiento ajustado del botón siguiente para simetría
   * Mantiene espaciado consistente con el botón anterior
   */
  .nav-next {
    right: 10px;
  }
}