/**
 * Variables CSS - The Linkers System
 *
 * Definición de todas las variables CSS del Design System.
 * Incluye paletas oficiales de The Linkers (backend) y Mazza (frontend).
 * 
 * PALETAS OFICIALES:
 * - The Linkers: Naranja #FF5C39 (PRIMARY), Azul #0066C4 (SECONDARY), Celeste #00AEEF
 * - Mazza Bureau: Negro #000000, Dorado #C9A43B, Blanco #FFFFFF
 *
 * @package    The_Linkers_System
 * @subpackage Assets/CSS
 * @version    2.0.0 - REFACTORIZACIÓN NARANJA VIBRANTE
 * @since      1.0.0
 * @updated    2025-11-13
 */

/* ============================================================================
   PALETAS DE COLOR OFICIALES
   ============================================================================ */

:root {
  /* ---------------------------------------------------------------------------
     THE LINKERS COLORS (Backend - Panel de Linkers y Supervisor)
     Paleta extraída de: linkers-paleta-oficial.html
     CAMBIO CRÍTICO: Naranja es PRIMARY, Azul es SECONDARY
     --------------------------------------------------------------------------- */
  
  /* 🟠 NARANJA - COLOR PROTAGONISTA (antes era azul) */
  --tls-linkers-primary: #FF5C39;           /* Naranja Radiante - Color PRINCIPAL */
  --tls-linkers-primary-rgb: 255, 92, 57;   /* RGB para transparencias */
  
  --tls-linkers-primary-soft: #FF7043;      /* Rojo Suave - Variante naranja */
  --tls-linkers-primary-soft-rgb: 255, 112, 67;
  
  /* 🔵 AZUL - COLOR SECUNDARIO (antes era primary) */
  --tls-linkers-secondary: #0066C4;         /* Azul Medio - Secundario */
  --tls-linkers-secondary-rgb: 0, 102, 196;
  
  --tls-linkers-secondary-alt: #00AEEF;     /* Celeste Luminoso - Alternado */
  --tls-linkers-secondary-alt-rgb: 0, 174, 239;
  
  --tls-linkers-dark: #002D5A;              /* Azul Profundo - Textos oscuros */
  --tls-linkers-dark-rgb: 0, 45, 90;
  
  --tls-linkers-bg: #EDECEB;                /* Fondo Neutro */
  --tls-linkers-bg-rgb: 237, 236, 235;
  
  /* Alias para mantener compatibilidad (deprecar en futuro) */
  --tls-linkers-accent: var(--tls-linkers-secondary);
  --tls-linkers-soft: var(--tls-linkers-primary-soft);
  
  /* ---------------------------------------------------------------------------
     MARCELO MAZZA COLORS (Frontend - Formulario público)
     Paleta extraída de: mazza-frontend-con-logo.html
     --------------------------------------------------------------------------- */
  
  /* Colores principales Marcelo Mazza */
  --tls-mazza-black: #000000;               /* Negro - Color principal */
  --tls-mazza-black-soft: #1a1a1a;          /* Negro Suave */
  
  --tls-mazza-gold: #C9A43B;                /* Dorado - Detalles premium */
  --tls-mazza-gold-rgb: 201, 164, 59;
  --tls-mazza-gold-light: #D4B456;          /* Dorado Claro */
  
  --tls-mazza-white: #FFFFFF;               /* Blanco - Fondos */
  
  --tls-mazza-gray-dark: #333333;           /* Gris Oscuro */
  --tls-mazza-gray-medium: #666666;         /* Gris Medio */
  
  /* ---------------------------------------------------------------------------
     COLORES NEUTROS (Compartidos)
     --------------------------------------------------------------------------- */
  
  --tls-white: #FFFFFF;
  --tls-black: #000000;
  
  /* Escala de grises */
  --tls-gray-50: #F9FAFB;
  --tls-gray-100: #F3F4F6;
  --tls-gray-200: #E5E7EB;
  --tls-gray-300: #D1D5DB;
  --tls-gray-400: #9CA3AF;
  --tls-gray-500: #6B7280;
  --tls-gray-600: #4B5563;
  --tls-gray-700: #374151;
  --tls-gray-800: #1F2937;
  --tls-gray-900: #111827;
  
  /* ---------------------------------------------------------------------------
     COLORES DE ESTADO (Sistema de alertas y notificaciones)
     --------------------------------------------------------------------------- */
  
  --tls-success: #10B981;                   /* Verde - Éxito */
  --tls-success-rgb: 16, 185, 129;
  --tls-success-light: rgba(16, 185, 129, 0.1);
  --tls-success-dark: #059669;
  
  --tls-warning: #F59E0B;                   /* Amarillo - Advertencia */
  --tls-warning-rgb: 245, 158, 11;
  --tls-warning-light: rgba(245, 158, 11, 0.1);
  --tls-warning-dark: #D97706;
  
  --tls-error: #EF4444;                     /* Rojo - Error */
  --tls-error-rgb: 239, 68, 68;
  --tls-error-light: rgba(239, 68, 68, 0.1);
  --tls-error-dark: #DC2626;
  
  --tls-info: #3B82F6;                      /* Azul - Información */
  --tls-info-rgb: 59, 130, 246;
  --tls-info-light: rgba(59, 130, 246, 0.1);
  
  /* ============================================================================
     TIPOGRAFÍA
     ============================================================================ */
  
  /* Fuentes principales */
  --tls-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tls-font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tls-font-serif: 'Georgia', 'Times New Roman', serif; /* Para Mazza */
  
  /* Tamaños de fuente */
  --tls-text-xs: 0.75rem;     /* 12px */
  --tls-text-sm: 0.875rem;    /* 14px */
  --tls-text-base: 1rem;      /* 16px */
  --tls-text-lg: 1.125rem;    /* 18px */
  --tls-text-xl: 1.25rem;     /* 20px */
  --tls-text-2xl: 1.5rem;     /* 24px */
  --tls-text-3xl: 1.875rem;   /* 30px */
  --tls-text-4xl: 2.25rem;    /* 36px */
  --tls-text-5xl: 2.625rem;   /* 42px */
  
  /* Pesos de fuente */
  --tls-font-normal: 400;
  --tls-font-medium: 500;
  --tls-font-semibold: 600;
  --tls-font-bold: 700;
  --tls-font-extrabold: 800;
  
  /* ============================================================================
     ESPACIADO (Sistema de 8px)
     ============================================================================ */
  
  --tls-space-0: 0;
  --tls-space-1: 0.25rem;   /* 4px */
  --tls-space-2: 0.5rem;    /* 8px */
  --tls-space-3: 0.75rem;   /* 12px */
  --tls-space-4: 1rem;      /* 16px */
  --tls-space-5: 1.25rem;   /* 20px */
  --tls-space-6: 1.5rem;    /* 24px */
  --tls-space-8: 2rem;      /* 32px */
  --tls-space-10: 2.5rem;   /* 40px */
  --tls-space-12: 3rem;     /* 48px */
  --tls-space-16: 4rem;     /* 64px */
  --tls-space-20: 5rem;     /* 80px */
  
  /* ============================================================================
     BORDER RADIUS (Bordes redondeados)
     ============================================================================ */
  
  --tls-radius-none: 0;
  --tls-radius-sm: 0.25rem;    /* 4px */
  --tls-radius-base: 0.5rem;   /* 8px */
  --tls-radius-md: 0.625rem;   /* 10px */
  --tls-radius-lg: 0.75rem;    /* 12px */
  --tls-radius-xl: 1rem;       /* 16px */
  --tls-radius-2xl: 1.5rem;    /* 24px */
  --tls-radius-full: 9999px;   /* Completamente redondo */
  
  /* ============================================================================
     SOMBRAS (Elevación de elementos)
     ============================================================================ */
  
  --tls-shadow-none: none;
  --tls-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --tls-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tls-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tls-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tls-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tls-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tls-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Sombras específicas de marca */
  --tls-shadow-linkers: 0 6px 20px rgba(255, 92, 57, 0.3);      /* Sombra naranja The Linkers */
  --tls-shadow-linkers-hover: 0 10px 30px rgba(255, 92, 57, 0.4); /* Hover */
  --tls-shadow-secondary: 0 4px 12px rgba(0, 102, 196, 0.15);   /* Sombra azul secundaria */
  --tls-shadow-mazza: 0 4px 12px rgba(201, 164, 59, 0.15);      /* Sombra dorada Mazza */
  
  /* ============================================================================
     TRANSICIONES (Animaciones suaves)
     ============================================================================ */
  
  --tls-transition-fast: 150ms ease-in-out;
  --tls-transition-base: 200ms ease-in-out;
  --tls-transition-slow: 300ms ease-in-out;
  --tls-transition-slower: 500ms ease-in-out;
  
  /* Curvas de animación personalizadas */
  --tls-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --tls-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tls-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tls-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Para efectos suaves */
  
  /* ============================================================================
     Z-INDEX (Capas de elementos)
     ============================================================================ */
  
  --tls-z-base: 0;
  --tls-z-dropdown: 1000;
  --tls-z-sticky: 1020;
  --tls-z-fixed: 1030;
  --tls-z-modal-backdrop: 1040;
  --tls-z-modal: 1050;
  --tls-z-popover: 1060;
  --tls-z-tooltip: 1070;
  --tls-z-notification: 1080;
  
  /* ============================================================================
     DIMENSIONES COMUNES
     ============================================================================ */
  
  /* Ancho máximo de contenedores */
  --tls-container-sm: 640px;
  --tls-container-md: 768px;
  --tls-container-lg: 1024px;
  --tls-container-xl: 1280px;
  --tls-container-2xl: 1536px;
  
  /* Alturas de header/navbar */
  --tls-header-height: 60px;
  --tls-admin-header-height: 32px; /* Admin bar de WordPress */
  
  /* ============================================================================
     GRADIENTES PREDEFINIDOS
     ============================================================================ */
  
  /* Gradientes The Linkers (NARANJA PRIMARY) */
  --tls-gradient-primary: linear-gradient(135deg, #FF5C39 0%, #FF7043 100%);
  --tls-gradient-primary-hover: linear-gradient(135deg, #FF7043 0%, #FF5C39 100%);
  --tls-gradient-secondary: linear-gradient(135deg, #0066C4 0%, #002D5A 100%);
  --tls-gradient-hero: linear-gradient(135deg, #FF5C39 0%, #FF7043 50%, #0066C4 100%);
  
  /* Gradientes Mazza */
  --tls-gradient-mazza: linear-gradient(135deg, #C9A43B 0%, #D4B456 100%);
  --tls-gradient-mazza-dark: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

/* ============================================================================
   ANIMACIONES GLOBALES
   Extraídas de linkers-paleta-oficial.html
   ============================================================================ */

/**
 * Float - Logo flotante suave
 * Uso: Logo en header, badges
 */
@keyframes tls-float {
  0%, 100% { 
    transform: translateY(0px); 
  }
  50% { 
    transform: translateY(-8px); 
  }
}

/**
 * Bounce - Rebote suave
 * Uso: Badges, notificaciones
 */
@keyframes tls-bounce {
  0%, 100% { 
    transform: translateY(0); 
  }
  50% { 
    transform: translateY(-5px); 
  }
}

/**
 * FadeInUp - Aparece desde abajo
 * Uso: Cards que entran en pantalla
 */
@keyframes tls-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * FadeInDown - Aparece desde arriba
 * Uso: Headers, notificaciones
 */
@keyframes tls-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Fade In - Aparición simple
 * Uso: Modales, overlays
 */
@keyframes tls-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Slide In - Entrada desde derecha
 * Uso: Notificaciones, sidebars
 */
@keyframes tls-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * Spin - Rotación continua
 * Uso: Loading spinners
 */
@keyframes tls-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * Spin Smooth - Rotación suave
 * Uso: Refresh buttons
 */
@keyframes tls-spin-smooth {
  from { 
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

/**
 * Pulse - Pulso suave
 * Uso: Loading states, notificaciones
 */
@keyframes tls-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/**
 * Pulse Premium - Pulso con scale
 * Uso: Actualizaciones de datos
 */
@keyframes tls-pulse-premium {
  0%, 100% { 
    transform: scale(1);
    box-shadow: none;
  }
  50% { 
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 92, 57, 0.2);
  }
}

/**
 * Shine - Brillo decorativo
 * Uso: Cards premium, frontend Mazza
 */
@keyframes tls-shine {
  0%, 100% { 
    transform: translateX(-100%); 
  }
  50% { 
    transform: translateX(100%); 
  }
}

/**
 * Float Particle - Partículas flotantes
 * Uso: Frontend Mazza decorativo
 */
@keyframes tls-float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.3;
  }
  50% {
    transform: translateY(-100vh) translateX(50px);
  }
}

/* ============================================================================
   CLASES UTILITARIAS DE ANIMACIÓN
   ============================================================================ */

/**
 * Aplicar animaciones rápidamente
 */
.tls-animate-float {
  animation: tls-float 3s ease-in-out infinite;
}

.tls-animate-bounce {
  animation: tls-bounce 2s ease-in-out infinite;
}

.tls-animate-spin {
  animation: tls-spin 1s linear infinite;
}

.tls-animate-pulse {
  animation: tls-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.tls-animate-fadeInUp {
  animation: tls-fadeInUp 0.6s ease;
  animation-fill-mode: backwards;
}

.tls-animate-fadeInDown {
  animation: tls-fadeInDown 0.8s ease;
}

/* ============================================================================
   FIN DE VARIABLES
   ============================================================================ */