/* Importación del sistema de iconos centralizado */
@import url("./libs/iconos.css");

/* Reset de márgenes y padding, y configuración de box-sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Variables CSS para colores */
:root {
  /* Colores */
  --naranja: #FF6B35;
  --naranja-oscuro: #E55A28;
  --negro: #444040;
  --crema: #FFF0E5;
  --blanco: #FFFFFF;
  --gris-obscuro: #1A1A1A;
  --gris-semi-obscuro: #423D3D;
  --gris-claro: #707070;

  /* Tamaños */
  --tamano-imagen-menu: 100px;
  --tamano-logo: 150px;
  --tamano-boton-tema: 44px;
  --ancho-maximo: 1200px;
  --ancho-redes: 200px;
  --ancho-componente: 1200px;

  /* Espaciado */
  --radio-borde: 10px;
  --espacio-chico: 0.5rem;
  --espacio-medio: 1rem;
  --espacio-grande: 2rem;
  --margen-contenedor: 20px;

  /* Tipografía */
  --texto-chico: 0.875rem;
  --texto-base: 1rem;
  --texto-grande: 1.2rem;
  --texto-xl: 2.5rem;
  --texto-xxl: 3rem;
  --texto-menu: var(--naranja);
  /* Animaciones */
  --transicion-base: 0.3s ease;
  --duracion-aparecer: 1s;
  --duracion-deslizar: 0.5s;
  --timing-aparecer: cubic-bezier(0.4, 0, 0.2, 1);
  --retraso-base: 0.1s;
  /* Sistema de Z-Index Estandarizado */
  --z-negativo: -1;
  --z-base: 1;
  --z-elevado: 10;
  --z-flotante: 50;
  --z-flotantes: 100;
  --z-modal-fondo: 90;
  --z-modal: 100;
  --z-tooltip: 200;
  --z-notificacion: 300;
  --z-maximo: 1000;
  --z-modales: 1000;
  --z-overlays-criticos: 9999;
  --z-notificaciones: 10000;

  /* ==========================================================================
     SISTEMA DE DISEÑO ESTANDARIZADO - VARIABLES GLOBALES
     ========================================================================== */

  /* Dimensiones Estándar del Sistema */
  --tamano-boton-flotante: 44px;
  --tamano-icono-principal: 24px;
  --tamano-icono-secundario: 18px;
  /* Bordes y Radios Estandarizados */
  --borde-radio-estandar: 8px;
  --borde-radio-pequeno: 4px;
  --borde-radio-grande: 16px;
  --borde-radio-completo: 50%;

  /* Sombras y Elevación del Sistema Claymorphism */
  --sombra-elevacion-baja: 0 2px 5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  --sombra-elevacion-media: 0 4px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  --sombra-elevacion-alta: 0 8px 20px rgba(0, 0, 0, 0.2), 0 6px 8px rgba(0, 0, 0, 0.15);
  --sombra-interior-suave: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  --sombra-interior-media: inset 0 2px 5px rgba(0, 0, 0, 0.15);
  --sombra-hover-claymorphism: 0 10px 25px rgba(0, 0, 0, 0.25), 0 8px 10px rgba(0, 0, 0, 0.2);

  /* Espaciados Estandarizados del Sistema */
  --espaciado-xxs: 0.25rem;
  /* 4px */
  --espaciado-xs: 0.5rem;
  /* 8px */
  --espaciado-sm: 0.75rem;
  /* 12px */
  --espaciado-md: 1rem;
  /* 16px */
  --espaciado-lg: 1.5rem;
  /* 24px */
  --espaciado-xl: 2rem;
  /* 32px */
  --espaciado-xxl: 3rem;
  /* 48px */

  /* Transiciones y Animaciones del Sistema */
  --transicion-rapida: 0.15s ease;
  --transicion-normal: 0.3s ease;
  --transicion-lenta: 0.5s ease;

  /* Variables para sistema de iconos */
  --color-circulo: rgba(255, 107, 53, 0.8);
  --padding-circulo: 8px;
  /* Variables para estilo Claymorphism */
  --arcilla-radio: 24px;
  --contraccion-sombra: -5px;
  --elevacion-componente: 15px;
  --arcilla-fondo-oscuro: #2A2A2A;
  --arcilla-sombra-externa: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
  --arcilla-sombra-interna: inset 2px 2px 5px rgba(255, 255, 255, 0.3), inset -2px -2px 5px rgba(0, 0, 0, 0.05);

  /* Nuevas variantes de sombras internas para claymorphism */
  --arcilla-sombra-interna-pronunciada: inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.2);

  --arcilla-sombra-interna-suave: inset 1px 1px 3px rgba(0, 0, 0, 0.05),
    inset -1px -1px 3px rgba(255, 255, 255, 0.1);

  --arcilla-sombra-interna-difusa: inset 0px 2px 8px rgba(0, 0, 0, 0.05),
    inset 0px -2px 8px rgba(255, 255, 255, 0.15);

  --arcilla-sombra-interna-triple: inset 2px 2px 5px rgba(0, 0, 0, 0.05),
    inset -2px -2px 5px rgba(255, 255, 255, 0.2),
    inset 0 0 5px rgba(0, 0, 0, 0.05);

  --arcilla-sombra-interna-2023: inset 1px 1px 5px rgba(0, 0, 0, 0.08),
    inset -1px -1px 5px rgba(255, 255, 255, 0.25),
    inset 0 0 15px rgba(0, 0, 0, 0.02);

  /* Variantes adicionales de sombras claymorphism */
  --arcilla-sombra-bordes-enfocados: inset 3px 0 5px rgba(0, 0, 0, 0.07),
    inset 0 3px 5px rgba(0, 0, 0, 0.07);

  --arcilla-sombra-relieve-profundo: inset 4px 4px 8px rgba(0, 0, 0, 0.15),
    inset -2px -2px 6px rgba(255, 255, 255, 0.2),
    inset 0 0 8px rgba(0, 0, 0, 0.05);

  --arcilla-sombra-bisel-sutil: inset 1px 1px 2px rgba(0, 0, 0, 0.03),
    inset -1px -1px 2px rgba(255, 255, 255, 0.08);

  --arcilla-sombra-estratificada: inset 2px 2px 3px rgba(0, 0, 0, 0.05),
    inset -2px -2px 3px rgba(255, 255, 255, 0.2),
    inset 4px 4px 8px rgba(0, 0, 0, 0.03),
    inset -4px -4px 8px rgba(255, 255, 255, 0.1);

  --arcilla-sombra-gradiente: inset 3px 3px 5px rgba(94, 104, 121, 0.15),
    inset -3px -3px 5px rgba(255, 255, 255, 0.25);

  --arcilla-sombra-interior-brillante: inset 1px 1px 5px rgba(0, 0, 0, 0.05),
    inset -1px -1px 5px rgba(255, 255, 255, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.1);

  --arcilla-sombra-esquinas-dramaticas: inset 3px 3px 5px rgba(0, 0, 0, 0.1),
    inset -1px -1px 3px rgba(255, 255, 255, 0.15);

  --arcilla-sombra-efecto-escarcha: inset 2px 2px 4px rgba(255, 255, 255, 0.4),
    inset -2px -2px 4px rgba(185, 202, 218, 0.3),
    inset 0 0 8px rgba(255, 255, 255, 0.2);

  --arcilla-sombra-suave-almohada: inset 0 0 8px rgba(0, 0, 0, 0.07),
    inset 0 0 3px rgba(0, 0, 0, 0.05);

  --arcilla-sombra-papel-prensado: inset 0 0 3px rgba(0, 0, 0, 0.1),
    inset 0 3px 5px rgba(0, 0, 0, 0.05),
    inset 0 -1px 2px rgba(255, 255, 255, 0.15);

  --arcilla-elevacion: 8px;
  --arcilla-borde: 2px solid rgba(255, 255, 255, 0.2);

  /* Nuevas variantes de sombras elevadas/relieves para claymorphism */
  --arcilla-elevado-suave: 0px 2px 4px rgba(0, 0, 0, 0.06),
    0px 4px 6px rgba(0, 0, 0, 0.1),
    0px 1px 2px rgba(255, 255, 255, 0.3) inset;

  --arcilla-elevado-medio: 0px 4px 6px rgba(0, 0, 0, 0.07),
    0px 8px 10px rgba(0, 0, 0, 0.12),
    0px 1px 3px rgba(255, 255, 255, 0.4) inset;

  --arcilla-elevado-pronunciado: 0px 8px 16px rgba(0, 0, 0, 0.08),
    0px 16px 24px rgba(0, 0, 0, 0.15),
    0px 1px 4px rgba(255, 255, 255, 0.5) inset;

  --arcilla-elevado-flotante: 0px 10px 30px rgba(0, 0, 0, 0.1),
    0px 30px 60px rgba(0, 0, 0, 0.12),
    0px 1px 4px rgba(255, 255, 255, 0.5) inset;

  --arcilla-elevado-boton: 0px 4px 6px rgba(0, 0, 0, 0.1),
    0px 2px 4px rgba(0, 0, 0, 0.06),
    0px 1px 2px rgba(255, 255, 255, 0.4) inset;

  --arcilla-elevado-boton-activo: 0px 2px 4px rgba(0, 0, 0, 0.08),
    0px 1px 2px rgba(0, 0, 0, 0.04),
    0px 1px 2px rgba(255, 255, 255, 0.4) inset;

  --arcilla-elevado-tarjeta: 0px 6px 16px rgba(0, 0, 0, 0.08),
    0px 3px 6px rgba(0, 0, 0, 0.05),
    0px 1px 3px rgba(255, 255, 255, 0.5) inset;

  --arcilla-elevado-gradiente: 0px 6px 12px rgba(0, 0, 0, 0.1),
    0px 10px 20px rgba(0, 0, 0, 0.08),
    0px 2px 6px rgba(255, 255, 255, 0.2) inset,
    0px -2px 6px rgba(0, 0, 0, 0.06) inset;

  --arcilla-elevado-brillante: 0px 6px 12px rgba(255, 107, 53, 0.2),
    0px 10px 20px rgba(0, 0, 0, 0.1),
    0px 1px 4px rgba(255, 255, 255, 0.6) inset;

  --arcilla-elevado-dramatico: 0px 12px 24px rgba(0, 0, 0, 0.18),
    0px 8px 16px rgba(0, 0, 0, 0.12),
    0px 2px 8px rgba(0, 0, 0, 0.1),
    0px 1px 4px rgba(255, 255, 255, 0.6) inset;

  --arcilla-elevado-almohada: 0px 6px 10px rgba(0, 0, 0, 0.05),
    0px 3px 6px rgba(0, 0, 0, 0.04),
    0px 1px 3px rgba(0, 0, 0, 0.03),
    0px 1px 5px rgba(255, 255, 255, 0.5) inset,
    0px -1px 5px rgba(0, 0, 0, 0.04) inset;

  /* Sombras y efectos */
  --sombra-base: 0 4px 6px rgba(0, 0, 0, 0.1);
  --opacidad-modal: 0.9;

  --animacion-orden: 0;
}

/* Variables para el tema claro */
:root[data-tema="claro"] {
  --fondo: var(--crema);
  --texto: var(--negro);
  --subtexto: var(--gris-obscuro);
  --subtitulo: var(--gris-semi-obscuro);
  --arcilla-fondo: #FFF7F2;
  --arcilla-fondo-secundario: #FFF9F5;
  --arcilla-borde-color: rgba(255, 255, 255, 0.7);
  --arcilla-sombra-color: rgba(255, 107, 53, 0.1);
}

/* Variables para el tema oscuro */
:root[data-tema="oscuro"] {
  --fondo: var(--gris-semi-obscuro);
  --texto: var(--gris-claro);
  --subtexto: var(--blanco);
  --parrafo: var(--negro);
  --subtitulo: var(--blanco);
  --arcilla-fondo: #4E4845;
  --arcilla-fondo-secundario: #534F4C;
  --arcilla-borde-color: rgba(255, 255, 255, 0.1);
  --arcilla-sombra-color: rgba(0, 0, 0, 0.3);

  /* ==========================================================================
     SISTEMA DE DISEÑO - AJUSTES PARA TEMA OSCURO
     ========================================================================== */

  /* Sombras y Elevación ajustadas para tema oscuro */
  --sombra-elevacion-baja: 0 2px 5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --sombra-elevacion-media: 0 4px 10px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
  --sombra-elevacion-alta: 0 8px 20px rgba(0, 0, 0, 0.35), 0 6px 8px rgba(0, 0, 0, 0.25);
  --sombra-interior-suave: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  --sombra-interior-media: inset 0 2px 5px rgba(0, 0, 0, 0.25);
  --sombra-hover-claymorphism: 0 10px 25px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.3);

  /* Ajustes específicos para las sombras internas en tema oscuro */
  --arcilla-sombra-interna-pronunciada: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.05);

  --arcilla-sombra-interna-suave: inset 1px 1px 3px rgba(0, 0, 0, 0.1),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);

  --arcilla-sombra-interna-difusa: inset 0px 2px 8px rgba(0, 0, 0, 0.1),
    inset 0px -2px 8px rgba(255, 255, 255, 0.05);

  --arcilla-sombra-interna-triple: inset 2px 2px 5px rgba(0, 0, 0, 0.1),
    inset -2px -2px 5px rgba(255, 255, 255, 0.05),
    inset 0 0 5px rgba(0, 0, 0, 0.1);

  --arcilla-sombra-interna-2023: inset 1px 1px 5px rgba(0, 0, 0, 0.15),
    inset -1px -1px 5px rgba(255, 255, 255, 0.05),
    inset 0 0 15px rgba(0, 0, 0, 0.05);

  /* Variantes adicionales para tema oscuro */
  --arcilla-sombra-bordes-enfocados: inset 3px 0 5px rgba(0, 0, 0, 0.15),
    inset 0 3px 5px rgba(0, 0, 0, 0.15);

  --arcilla-sombra-relieve-profundo: inset 4px 4px 8px rgba(0, 0, 0, 0.25),
    inset -2px -2px 6px rgba(255, 255, 255, 0.05),
    inset 0 0 8px rgba(0, 0, 0, 0.1);

  --arcilla-sombra-bisel-sutil: inset 1px 1px 2px rgba(0, 0, 0, 0.08),
    inset -1px -1px 2px rgba(255, 255, 255, 0.02);

  --arcilla-sombra-estratificada: inset 2px 2px 3px rgba(0, 0, 0, 0.15),
    inset -2px -2px 3px rgba(255, 255, 255, 0.05),
    inset 4px 4px 8px rgba(0, 0, 0, 0.1),
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);

  --arcilla-sombra-gradiente: inset 3px 3px 5px rgba(0, 0, 0, 0.2),
    inset -3px -3px 5px rgba(255, 255, 255, 0.05);

  --arcilla-sombra-interior-brillante: inset 1px 1px 5px rgba(0, 0, 0, 0.15),
    inset -1px -1px 5px rgba(255, 255, 255, 0.1),
    inset 0 0 10px rgba(255, 255, 255, 0.03);

  --arcilla-sombra-esquinas-dramaticas: inset 3px 3px 5px rgba(0, 0, 0, 0.2),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);

  --arcilla-sombra-efecto-escarcha: inset 2px 2px 4px rgba(255, 255, 255, 0.08),
    inset -2px -2px 4px rgba(0, 0, 0, 0.1),
    inset 0 0 8px rgba(255, 255, 255, 0.03);

  --arcilla-sombra-suave-almohada: inset 0 0 8px rgba(0, 0, 0, 0.15),
    inset 0 0 3px rgba(0, 0, 0, 0.1);

  --arcilla-sombra-papel-prensado: inset 0 0 3px rgba(0, 0, 0, 0.2),
    inset 0 3px 5px rgba(0, 0, 0, 0.15),
    inset 0 -1px 2px rgba(255, 255, 255, 0.03);

  /* Ajustes específicos para las sombras elevadas en tema oscuro */
  --arcilla-elevado-suave: 0px 2px 4px rgba(0, 0, 0, 0.15),
    0px 4px 6px rgba(0, 0, 0, 0.2),
    0px 1px 2px rgba(255, 255, 255, 0.1) inset;

  --arcilla-elevado-medio: 0px 4px 6px rgba(0, 0, 0, 0.2),
    0px 8px 10px rgba(0, 0, 0, 0.3),
    0px 1px 3px rgba(255, 255, 255, 0.15) inset;

  --arcilla-elevado-pronunciado: 0px 8px 16px rgba(0, 0, 0, 0.25),
    0px 16px 24px rgba(0, 0, 0, 0.35),
    0px 1px 4px rgba(255, 255, 255, 0.2) inset;

  --arcilla-elevado-flotante: 0px 10px 30px rgba(0, 0, 0, 0.3),
    0px 30px 60px rgba(0, 0, 0, 0.4),
    0px 1px 4px rgba(255, 255, 255, 0.15) inset;

  --arcilla-elevado-boton: 0px 4px 6px rgba(0, 0, 0, 0.25),
    0px 2px 4px rgba(0, 0, 0, 0.15),
    0px 1px 2px rgba(255, 255, 255, 0.15) inset;

  --arcilla-elevado-boton-activo: 0px 2px 4px rgba(0, 0, 0, 0.2),
    0px 1px 2px rgba(0, 0, 0, 0.15),
    0px 1px 2px rgba(255, 255, 255, 0.1) inset;

  --arcilla-elevado-tarjeta: 0px 6px 16px rgba(0, 0, 0, 0.25),
    0px 3px 6px rgba(0, 0, 0, 0.2),
    0px 1px 3px rgba(255, 255, 255, 0.15) inset;

  --arcilla-elevado-gradiente: 0px 6px 12px rgba(0, 0, 0, 0.25),
    0px 10px 20px rgba(0, 0, 0, 0.2),
    0px 2px 6px rgba(255, 255, 255, 0.1) inset,
    0px -2px 6px rgba(0, 0, 0, 0.15) inset;

  --arcilla-elevado-brillante: 0px 6px 12px rgba(255, 107, 53, 0.3),
    0px 10px 20px rgba(0, 0, 0, 0.25),
    0px 1px 4px rgba(255, 255, 255, 0.25) inset;

  --arcilla-elevado-dramatico: 0px 12px 24px rgba(0, 0, 0, 0.35),
    0px 8px 16px rgba(0, 0, 0, 0.3),
    0px 2px 8px rgba(0, 0, 0, 0.25),
    0px 1px 4px rgba(255, 255, 255, 0.2) inset;

  --arcilla-elevado-almohada: 0px 6px 10px rgba(0, 0, 0, 0.2),
    0px 3px 6px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.1),
    0px 1px 5px rgba(255, 255, 255, 0.15) inset,
    0px -1px 5px rgba(0, 0, 0, 0.12) inset;
}

/* Estilos generales del cuerpo del documento */
body {
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 60px 20px;
  /* Añadir padding horizontal y vertical al body */
  transition: background-color var(--transicion-base), color var(--transicion-base);
  color: var(--texto);
  background-color: var(--fondo);
}


@keyframes entradaElementos {
  0% {
    transform: translateY(-20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animación de aparición */
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

@keyframes escalar {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Animación de deslizamiento hacia arriba */
@keyframes deslizarArriba {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

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

/* Estilos del título del menú */
h2 {
  transition: color 0.3s ease;
  color: var(--texto-menu);
}

/* ELIMINADO: Estilos del botón para cambiar el tema */
/* Se eliminaron los estilos para #cambiarTema ya que ahora usamos el componente selector-tema */

.redes-sociales a,
.cerrar-modal {
  -webkit-user-select: none;
  user-select: none;
}

/* Media queries para ajustar el padding del body en dispositivos móviles */
@media (max-width: 768px) {
  body {
    padding: 60px 0;
  }
}

@media (max-width: 480px) {
  body {
    padding: 60px 0;
  }
}

/* Orientación paisaje en dispositivos móviles */
@media (max-width: 768px) and (orientation: landscape) {
  body {
    padding: 60px 0;
  }
}

/* Media query específica para dispositivos móviles en landscape con pantallas más anchas */
@media (max-width: 960px) and (orientation: landscape) {
  body {
    padding: 60px 0;
  }
}

/* Media query para iPhone 14 Pro Max y similares en landscape */
@media (max-width: 940px) and (max-height: 440px) and (orientation: landscape) {
  body {
    padding: 60px 0;
  }
}

/* Media query adicional para dispositivos móviles en landscape por altura */
@media (max-height: 500px) and (orientation: landscape) {
  body {
    padding: 60px 0;
  }
}