/**
 * @file pantalla-carga.css
 * @description Archivo de estilos para el componente web personalizado PantallaCarga.
 *              Proporciona diseño de pantalla completa con posicionamiento fijo,
 *              animaciones de pulso suaves para feedback visual, transiciones fluidas
 *              de visibilidad, tipografía optimizada con Poppins, diseño responsive
 *              para múltiples dispositivos, z-index elevado para overlay correcto,
 *              centrado perfecto de contenido y efectos visuales claymorphism.
 * @author Enri Rego
 * @version 1.0.0
 * @date 30 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/pantalla-carga.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

/* ==========================================================================
   CONFIGURACIÓN BASE DEL COMPONENTE PANTALLA DE CARGA
   ========================================================================== */

/**
 * Contenedor principal de la pantalla de carga
 * Establece overlay a pantalla completa con posicionamiento fijo para mantenerse
 * visible durante toda la carga inicial de la aplicación. Utiliza flexbox para
 * centrado perfecto y z-index elevado para estar sobre cualquier otro contenido
 */
.carga {
  /* Posicionamiento de overlay a pantalla completa */
  position: fixed;
  top: 0;
  left: 0;

  /* Dimensiones completas de viewport */
  width: 100%;
  height: 100%;

  /* Z-index elevado para overlay correcto */
  z-index: 9999;

  /* Configuración de flexbox para centrado */
  display: flex;

  /* Transiciones suaves para animaciones de entrada/salida */
  transition: opacity 0.5s, visibility 0.5s;

  /* Color de fondo usando variable del sistema con fallback */
  background: var(--fondo, #FFF0E5);
}

/* ==========================================================================
   ESTRUCTURA DE CONTENIDO INTERNO
   ========================================================================== */

/**
 * Contenedor del contenido de la pantalla de carga
 * Centra vertical y horizontalmente todos los elementos internos usando flexbox
 * con limitación de ancho máximo para mantener proporciones adecuadas
 */
.carga-contenedor {
  /* Configuración de flexbox para centrado perfecto */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  /* Dimensiones y limitaciones */
  width: 100%;
  max-width: 300px;

  /* Centrado automático dentro del contenedor padre */
  margin: auto;

  /* Alineación de texto para elementos internos */
  text-align: center;
}

/* ==========================================================================
   ELEMENTOS VISUALES DE CARGA
   ========================================================================== */

/**
 * Estilo para la imagen del logotipo en la pantalla de carga
 * Incluye dimensiones optimizadas, espaciado adecuado y animación de pulso
 * continua para proporcionar feedback visual durante el proceso de carga
 */
.carga-imagen {
  /* Dimensiones de imagen optimizadas */
  width: 150px;
  height: auto;

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

  /* Animación de pulso continua para feedback visual */
  animation: pulso 1.5s ease-in-out infinite;
}

/**
 * Estilo para el texto descriptivo de carga
 * Utiliza la tipografía principal Poppins del sistema con tamaño prominente,
 * peso semibold y color del tema naranja para coherencia visual
 */
.carga-texto {
  /* Tipografía principal del sistema */
  font-family: "Poppins", sans-serif;

  /* Tamaño prominente para visibilidad clara */
  font-size: 2.5rem;

  /* Peso semibold para jerarquía visual */
  font-weight: 600;

  /* Color del tema usando variable con fallback */
  color: var(--naranja, #FF6B35);
}

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

/**
 * Animación de pulso para la imagen de carga
 * Crea un efecto sutil de latido usando scale y opacity para indicar
 * que la aplicación está procesando. Utiliza timing ease-in-out para
 * transiciones suaves y naturales
 */
@keyframes pulso {

  /* Estado inicial y final: escala reducida y opacidad baja */
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  /* Estado intermedio: escala ampliada y opacidad completa */
  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  /* Retorno al estado inicial para loop continuo */
  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

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

/**
 * Ajustes para dispositivos móviles y pantallas pequeñas
 * Reduce el tamaño de imagen y texto para adaptarse mejor a pantallas
 * limitadas manteniendo la legibilidad y proporción visual adecuada
 */
@media (max-width: 480px) {

  /**
   * Imagen de carga optimizada para móviles
   * Reduce el ancho para ajustarse a pantallas pequeñas sin perder calidad visual
   */
  .carga-imagen {
    /* Ancho reducido para pantallas pequeñas */
    width: 120px;
  }

  /**
   * Texto de carga optimizado para móviles
   * Reduce el tamaño de fuente para mantener legibilidad sin overflow
   */
  .carga-texto {
    /* Tamaño de fuente reducido para pantallas pequeñas */
    font-size: 2rem;
  }
}