/**
 * @file redes-sociales.css
 * @description Archivo de estilos para el componente web personalizado RedesSociales.
 *              Proporciona diseño responsive con sistema de grid adaptativo,
 *              animaciones de hover optimizadas, soporte completo para temas claro/oscuro,
 *              iconos SVG con filtros dinámicos, layouts horizontal/vertical configurables,
 *              breakpoints móviles específicos, efectos de elevación sutiles,
 *              tipografía escalable con clamp() y integración con variables CSS del sistema.
 * @author Enri Rego
 * @version 1.0.0 * @date 30 de Mayo 2025
 * @since 1.0.0
 * @requires scripts/components/redes-sociales.js
 * @copyright YEYU 2025 - Todos los derechos reservados
 * @license Proprietary - All Rights Reserved
 */

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

/**
 * Contenedor principal del componente RedesSociales
 * Establece la estructura base con layout flexible, espaciado responsive
 * y configuración adaptativa para mostrar redes sociales con disposición
 * horizontal centrada y separación optimizada para múltiples dispositivos
 */
.redes-sociales {
  /* Dimensiones y posicionamiento */
  width: 100%;

  /* Layout flexible responsive */
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;

  /* Espaciado usando variables del sistema */
  margin-top: var(--espaciado-md, 1rem);
  margin-bottom: var(--espaciado-xl, 2rem);
  padding: var(--espaciado-lg, 1.5rem) var(--espaciado-md, 1rem);

  /* Separación entre elementos */
  gap: var(--espaciado-xs, 0.5rem);
}

/* ==========================================================================
   VARIANTES DE DISPOSICIÓN DEL COMPONENTE
   ========================================================================== */

/**
 * Variante vertical del componente
 * Modifica el layout para disposición vertical con alineación izquierda
 * optimizada para sidebars o contenedores estrechos
 */
.redes-sociales-vertical {
  /* Alineación vertical específica */
  align-items: flex-start;
  flex-direction: column;
}

/* Título de las redes sociales - ahora responsive */
.redes-sociales-titulo {
  /* Tamaño de fuente responsivo usando clamp */
  font-size: clamp(1.8rem, 5vw, 2.5rem);

  /* Ancho completo del contenedor */
  width: 100%;

  /* Espaciado inferior responsivo */
  margin-bottom: clamp(var(--espaciado-md, 1rem), 4vw, var(--espaciado-xl, 2rem));

  /* Espaciado interno horizontal */
  padding: 0 var(--espaciado-xs, 0.5rem);

  /* Alineación central del texto */
  text-align: center;

  /* Color principal del sistema */
  color: var(--naranja, #FF6B35);

  /* Sombra de texto sutil */
  text-shadow: var(--sombra-elevacion-baja, 0 2px 4px rgba(0, 0, 0, 0.2));
}

/* ==========================================================================
   ELEMENTOS RED-SOCIAL PERSONALIZADOS
   ========================================================================== */

/**
 * Elementos red-social como Web Components
 * Configuración base para elementos HTML personalizados de redes sociales
 */

/* Configuración base del elemento personalizado */
red-social {
  /* Mostrar como bloque para permitir márgenes verticales */
  display: block;

  /* Espaciado inferior entre elementos */
  margin-bottom: var(--espaciado-xxs, 0.25rem);

  /* Altura mínima para consistencia visual */
  min-height: 1.5em;
}

/* ==========================================================================
   ENLACES DE REDES SOCIALES - CONFIGURACIÓN UNIFICADA
   ========================================================================== */

/**
 * Estilos unificados para enlaces de redes sociales
 * Funciona tanto para elementos web components como clases tradicionales
 * con diseño responsive y accesibilidad mejorada
 */

/* Configuración base para todos los enlaces */
red-social a,
.redes-sociales a {
  /* Tamaño de fuente responsivo */
  font-size: clamp(var(--texto-base, 1rem), 3.5vw, var(--texto-grande, 1.2rem));

  /* Layout flex para alineación de contenido */
  display: flex;
  align-items: center;

  /* Dimensiones del contenedor */
  width: 100%;
  max-width: clamp(150px, 90%, var(--ancho-redes, 200px));

  /* Espaciado interno usando variables del sistema */
  padding: var(--espaciado-xs, 0.5rem) var(--espaciado-sm, 0.75rem);

  /* Transición suave para efectos hover */
  transition: transform var(--transicion-base, 0.3s ease);

  /* Remover decoración de enlace por defecto */
  text-decoration: none;

  /* Color de texto del sistema */
  color: var(--gris-obscuro, #1A1A1A);

  /* Espaciado entre icono y texto */
  gap: var(--espaciado-xs, 0.5rem);
}

/* ==========================================================================
   TEMA OSCURO - ADAPTACIONES DE COLOR
   ========================================================================== */

/**
 * Adaptaciones de color para tema oscuro
 * Mejora la legibilidad y contraste en modo oscuro
 */

/* Color adaptado para tema oscuro */
:root[data-tema="oscuro"] red-social a,
:root[data-tema="oscuro"] .redes-sociales a {
  /* Color claro para mejor contraste en fondo oscuro */
  color: var(--crema, #FFF0E5);
}

/* ==========================================================================
   EFECTOS INTERACTIVOS Y HOVER
   ========================================================================== */

/**
 * Efectos de hover y interacciones
 * Proporciona feedback visual al usuario durante la navegación
 */

/* Efecto de elevación al pasar el cursor */
red-social a:hover,
.redes-sociales a:hover {
  /* Elevación sutil hacia arriba */
  transform: translateY(-2px);
}

/* ==========================================================================
   VARIACIONES DE LAYOUT - DISPOSICIÓN VERTICAL
   ========================================================================== */

/**
 * Ajustes específicos para disposición vertical
 * Optimiza la alineación cuando las redes se muestran en columna
 */

/* Alineación específica para layout vertical */
.redes-sociales-vertical a {
  /* Justificar contenido al inicio para mejor alineación */
  justify-content: flex-start;
}

/* ==========================================================================
   ICONOS SVG - CONFIGURACIÓN RESPONSIVE
   ========================================================================== */

/**
 * Configuración de iconos SVG para redes sociales
 * Tamaños responsivos con filtros dinámicos para adaptarse al tema
 * y maintain consistencia visual en todos los dispositivos
 */

/* Configuración base para iconos SVG */
.red-social-icono {
  /* Mostrar como bloque en línea para alineación */
  display: inline-block;

  /* Dimensiones responsivas usando variables del sistema */
  width: clamp(var(--tamano-icono-secundario, 18px), 5vw, var(--tamano-icono-principal, 24px));
  height: clamp(var(--tamano-icono-secundario, 18px), 5vw, var(--tamano-icono-principal, 24px));

  /* Alineación vertical para consistencia con texto */
  vertical-align: middle;

  /* Filtro SVG para color naranja del sistema */
  filter: invert(47%) sepia(95%) saturate(2151%) hue-rotate(344deg) brightness(101%) contrast(101%);
}

/* ==========================================================================
   MEDIA QUERIES RESPONSIVE - ADAPTACIONES ESPECÍFICAS
   ========================================================================== */

/**
 * Adaptaciones para dispositivos muy pequeños
 * Optimización específica para pantallas como iPhone SE (375px y menor)
 */

/* Configuración para dispositivos muy pequeños */
@media (max-width: 375px) {

  /* Título más compacto */
  .redes-sociales-titulo {
    /* Tamaño de fuente reducido para pantallas pequeñas */
    font-size: 1.3rem;

    /* Espaciado inferior reducido */
    margin-bottom: var(--espaciado-sm, 0.75rem);
  }

  /* Enlaces más compactos */
  red-social a,
  .redes-sociales a {
    /* Fuente más pequeña para mejor aprovechamiento */
    font-size: var(--texto-chico, 0.875rem);

    /* Espaciado interno reducido */
    padding: var(--espaciado-xxs, 0.25rem) var(--espaciado-xs, 0.5rem);
  }

  /* Iconos más pequeños para dispositivos compactos */
  .red-social-icono {
    /* Dimensiones fijas mínimas para mantener legibilidad */
    width: 16px;
    height: 16px;
  }
}

/**
 * Adaptaciones para dispositivos móviles estándar
 * Configuración consistente con otros componentes como eventos-privados
 */

/* Configuración para móviles estándar */
@media (max-width: 480px) {

  /* Contenedor principal más compacto */
  .redes-sociales {
    /* Espaciado exterior reducido para móviles */
    margin: var(--espaciado-xs, 0.5rem) var(--espaciado-xs, 0.5rem) var(--espaciado-xl, 2rem);

    /* Espaciado interno optimizado para pantallas pequeñas */
    padding: var(--espaciado-md, 1rem) var(--espaciado-xs, 0.5rem);
  }
}