/**
 * @file contenedor-principal.css
 * @description Archivo de estilos para el componente web personalizado ContenedorPrincipal.
 *              Proporciona un sistema completo de diseño adaptativo con soporte para múltiples
 *              estilos visuales (claymorphism, glassmorphism), animaciones de scroll fluidas,
 *              gestión automática de slots semánticos y configuraciones responsive dinámicas
 *              con variables CSS personalizables y estados de visibilidad controlados.
 * @author Enri Rego
 * @version 1.0.0
 * @date 01 de Junio 2025
 * @since 1.0.0
 * @requires scripts/components/contenedor-principal.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

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

/**
 * Contenedor principal base
 * Establece la estructura fundamental del componente con configuración
 * inicial de visibilidad, posicionamiento y espaciado para sombras
 */
contenedor-principal {
  /* Inicialmente oculto, se mostrará vía JavaScript */
  display: none;

  /* Permitir que las sombras sean visibles en todos los lados */
  overflow: visible;

  align-items: center;
  flex-direction: column;
  justify-content: center;

  /* Espacio suficiente para sombras laterales grandes (40px cada lado) */
  width: calc(100% - 80px);

  max-width: var(--ancho-maximo, 1200px);

  /* Optimizado para mejor uso del espacio */
  min-height: calc(100vh - 60px);

  /* Márgenes aumentados para sombras grandes */
  margin: 30px 40px;

  /* Padding optimizado para contenido */
  padding: 20px 20px;
  text-align: center;
  box-sizing: border-box;
}

/* ===================================================================
   ESTADOS DE VISIBILIDAD Y TRANSICIONES
   =================================================================== */

/**
 * Estados de visibilidad del componente
 * Controla la visualización mediante clases dinámicas aplicadas por JavaScript
 */
contenedor-principal.visible {
  display: flex;
}

contenedor-principal.oculto {
  display: none;
}

/**
 * Sistema de transiciones para animaciones fluidas
 * Proporciona efectos de entrada y salida suaves del componente
 */
contenedor-principal.con-transicion {
  transition: opacity 0.5s ease;
}

contenedor-principal.transparente {
  opacity: 0;
}

contenedor-principal.opaco {
  opacity: 1;
}

/* ===================================================================
   CONFIGURACIONES DE ANCHO Y RESPONSIVE
   =================================================================== */

/**
 * Configuración adaptativa (ancho responsive)
 * Utiliza variables CSS dinámicas para control flexible del ancho máximo
 */
contenedor-principal.adaptativo {
  width: calc(100% - 9px);
  margin-left: 0;
  margin-right: 0;
  max-width: var(--ancho-maximo, 1200px);
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Configuración de ancho fijo
 * Establece dimensiones constantes independientes del viewport
 */
contenedor-principal.ancho-fijo {
  width: var(--ancho-componente, 1200px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* ===================================================================
   ESTILOS VISUALES: CLAYMORPHISM
   =================================================================== */

/**
 * Variables base para estilo claymorphism
 * Define elevación y contracción de sombras para efectos tridimensionales
 */
contenedor-principal.estilo-arcilla {
  --elevacion-componente: 15px;
  --contraccion-sombra: -5px;
}

/**
 * Aplicación de estilo claymorphism a componentes hijos
 * Proporciona efectos de profundidad con bordes redondeados y sombras dinámicas
 */
contenedor-principal.estilo-arcilla>* {
  border-radius: var(--arcilla-radio);
  background-color: var(--arcilla-fondo);
  box-shadow: var(--arcilla-sombra-externa);
  border: var(--arcilla-borde);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * Efectos de hover para estilo claymorphism
 * Animaciones de elevación al interactuar con elementos
 */
contenedor-principal.estilo-arcilla>*:hover {
  transform: translateY(-5px);
  box-shadow: 0 var(--elevacion-componente) 25px var(--contraccion-sombra) var(--arcilla-sombra-color);
}

/* ===================================================================
   SOPORTE PARA TEMAS: CLARO Y OSCURO
   =================================================================== */

/**
 * Tema claro - Estilo claymorphism
 * Sombras suaves y colores claros para modo día
 */
:root[data-tema="claro"] contenedor-principal.estilo-arcilla>* {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
}

:root[data-tema="claro"] contenedor-principal.estilo-arcilla>*:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/**
 * Tema oscuro - Estilo claymorphism
 * Sombras intensas y mayor contraste para modo nocturno
 */
:root[data-tema="oscuro"] contenedor-principal.estilo-arcilla>* {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3);
}

:root[data-tema="oscuro"] contenedor-principal.estilo-arcilla>*:hover {
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* ===================================================================
   ESTRUCTURA DE SLOTS SEMÁNTICOS
   =================================================================== */

/**
 * Secciones internas del componente
 * Estructura semántica para encabezado, contenido principal y pie
 */
.contenedor-encabezado,
.contenedor-principal-seccion,
.contenedor-pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/**
 * Estados de visibilidad para secciones internas
 * Control dinámico de visualización basado en contenido presente
 */
.contenedor-encabezado.visible,
.contenedor-principal-seccion.visible,
.contenedor-pie.visible {
  display: flex;
}

.contenedor-encabezado.oculto,
.contenedor-principal-seccion.oculto,
.contenedor-pie.oculto {
  display: none;
}

/* ===================================================================
   ESPACIADO Y POSICIONAMIENTO DE SECCIONES
   =================================================================== */

/**
 * Sección de encabezado
 * Espacio inferior y padding superior para separación visual
 */
.contenedor-encabezado {
  margin-bottom: var(--espacio-grande, 2rem);

  /* Añadir un poco de espacio en la parte superior */
  padding-top: 10px;
}

/**
 * Sección principal de contenido
 * Ocupa el espacio flexible disponible con ancho completo
 */
.contenedor-principal-seccion {
  flex: 1;
  width: 100%;
}

/**
 * Sección de pie de página
 * Espacio superior y padding inferior para separación visual
 */
.contenedor-pie {
  margin-top: var(--espacio-grande, 2rem);

  /* Añadir un poco de espacio en la parte inferior */
  padding-bottom: 10px;
}

/* ===================================================================
   CONFIGURACIÓN DE SLOTS Y COMPONENTES HIJOS
   =================================================================== */

/**
 * Configuración de slots para respetar estructura
 * Los slots se comportan como contenedores transparentes
 */
contenedor-principal slot {
  display: contents;
}

/**
 * Ancho completo para componentes hijos con espacio para sombras
 * Asegura que los elementos ocupen todo el ancho disponible
 */
contenedor-principal>*>slot>* {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/**
 * Espacio vertical entre componentes
 * Separación consistente entre elementos hijos consecutivos
 */
contenedor-principal>*>slot>*:not(:last-child) {
  margin-bottom: var(--espacio-grande, 2rem);
}

/* ===================================================================
   SISTEMA DE ANIMACIONES DE SCROLL
   =================================================================== */

/**
 * Estado inicial para elementos animables
 * Oculta elementos que serán animados al entrar en viewport
 */
contenedor-principal .animar-scroll:not(.animar):not(red-social) {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/**
 * Animación específica para elementos red-social
 * Configuración especial para componentes de redes sociales
 */
contenedor-principal red-social.animar-scroll {
  /* Inicialmente invisible */
  opacity: 0;

  transform: translateY(20px);
  animation: redesSocialesEntrada 0.5s ease forwards;
  animation-delay: calc(0.1s * var(--animacion-orden, 0) + 0.3s);
}

/**
 * Estados de animación activa
 * Elementos visibles con transiciones suaves escalonadas
 */
contenedor-principal .animar-scroll.animar[is="red-social"],
contenedor-principal red-social.animar-scroll.animar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(0.1s * var(--animacion-orden, 0));
}

contenedor-principal .animar-scroll.animar {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(0.1s * var(--animacion-orden, 0));
}

/* ===================================================================
   KEYFRAMES Y ANIMACIONES PERSONALIZADAS
   =================================================================== */

/**
 * Keyframes específicos para redes sociales
 * Animación de entrada con desplazamiento vertical
 */
@keyframes redesSocialesEntrada {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Keyframes de compatibilidad con animaciones existentes
 * Animación fadeInUp para transiciones universales
 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}