/**
 * Variables CSS Globales Optimizadas - eSaico Theme
 * Centraliza todas las variables para mejor mantenimiento
 * 
 * @package eSaico
 * @version 1.0.0
 */

:root {
    /* ===== COLORES PRINCIPALES (Customizer) ===== */
    /* Estas variables son sobrescritas por el Customizer */
    --color-primary: #007cba;
    --color-secondary: #666666;
    --color-accent: #ff6b35;
    --color-text: #333333;
    --color-background: #ffffff;
    --color-link: #007cba;
    
    /* ===== COLORES DERIVADOS ===== */
    --color-primary-light: color-mix(in srgb, var(--color-primary) 80%, white);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, black);
    --color-secondary-light: color-mix(in srgb, var(--color-secondary) 80%, white);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary) 80%, black);
    --color-text-light: color-mix(in srgb, var(--color-text) 60%, white);
    --color-bg-light: color-mix(in srgb, var(--color-background) 95%, var(--color-text));
    --color-bg-hero: color-mix(in srgb, var(--color-primary) 5%, var(--color-background));
    
    /* ===== VARIABLES DE COMPATIBILIDAD ===== */
    /* Mantienen compatibilidad con código existente */
    --esaico-primary: var(--color-primary);
    --esaico-primary-light: var(--color-primary-light);
    --esaico-primary-dark: var(--color-primary-dark);
    
    --esaico-secondary: var(--color-secondary);
    --esaico-secondary-light: var(--color-secondary-light);
    --esaico-secondary-dark: var(--color-secondary-dark);
    
    /* ===== COLORES DE TEXTO ===== */
    --esaico-text-primary: var(--color-text);
    --esaico-text-secondary: var(--color-text-light);
    --esaico-text-muted: color-mix(in srgb, var(--color-text) 50%, white);
    --esaico-text-light: color-mix(in srgb, var(--color-text) 40%, white);
    --esaico-text-white: #ffffff;
    
    /* ===== VARIABLES GLOBALES PARA TÍTULOS DE PRODUCTOS ===== */
    --esaico-product-title-color: var(--color-text);
    --esaico-product-title-color-hover: var(--color-primary);
    --esaico-product-title-font-family: var(--font-headings, var(--esaico-font-family-primary));
    --esaico-product-title-font-weight: var(--font-weight-headings, var(--esaico-font-weight-semibold));
    --esaico-product-title-font-size: var(--font-size-base, var(--esaico-font-size-base));
    --esaico-product-title-line-height: var(--esaico-line-height-tight);
    
    /* Variables de compatibilidad para títulos */
    --text-primary: var(--esaico-product-title-color);
    --text-secondary: var(--esaico-text-secondary);
    --text-muted: var(--esaico-text-muted);
    
    /* ===== COLORES DE FONDO ===== */
    --esaico-bg-primary: var(--color-background);
    --esaico-bg-secondary: var(--color-bg-light);
    --esaico-bg-muted: color-mix(in srgb, var(--color-background) 97%, var(--color-text));
    --esaico-bg-dark: #1a1a1a;
    --esaico-bg-hero: var(--color-bg-hero);
    
    /* ===== COLORES DE ENLACES ===== */
    --esaico-link: var(--color-link);
    --esaico-link-hover: var(--color-accent);
    
    /* ===== COLORES DE BADGES ===== */
    --color-new: #F2C4DE;
    --color-new-text: #9E366E;
    --color-popular: #C7D2FE;
    --color-popular-text: #4338CA;
    --color-featured: #FEF3C7;
    --color-featured-text: #92400E;
    --color-free: #D1FAE5;
    --color-free-text: var(--color-primary);
    --color-premium: #E0E7FF;
    --color-premium-text: #3730A3;
    
    /* Variables de compatibilidad para badges */
    --esaico-badge-new-bg: var(--color-new);
    --esaico-badge-new-text: var(--color-new-text);
    --esaico-badge-popular-bg: var(--color-popular);
    --esaico-badge-popular-text: var(--color-popular-text);
    --esaico-badge-featured-bg: var(--color-featured);
    --esaico-badge-featured-text: var(--color-featured-text);
    --esaico-badge-pro-bg: #222222;
    --esaico-badge-pro-text: #ffffff;
    --esaico-badge-free-bg: var(--color-free);
    --esaico-badge-free-text: var(--color-free-text);
    --esaico-badge-premium-bg: var(--color-premium);
    --esaico-badge-premium-text: var(--color-premium-text);
    
    /* ===== COLORES DE CATEGORÍAS ===== */
    --esaico-category-music: #FF6B6B;
    --esaico-category-sfx: #4ECDC4;
    --esaico-category-voice: #45B7D1;
    --esaico-category-ambient: #96CEB4;
    --esaico-category-electronic: #FFEAA7;
    --esaico-category-classical: #DDA0DD;
    
    --esaico-category-default-bg: #ECFCCB;
    --esaico-category-default-text: #3F6212;
    --esaico-category-music-bg: #DBEAFE;
    --esaico-category-music-text: #1E40AF;
    --esaico-category-sfx-bg: #FEE2E2;
    --esaico-category-sfx-text: #DC2626;
    --esaico-category-voice-bg: #F3E8FF;
    --esaico-category-voice-text: #7C3AED;
    
    /* ===== COLORES DE ESTADO ===== */
    --esaico-success: #10B981;
    --esaico-warning: #F59E0B;
    --esaico-error: #EF4444;
    --esaico-info: #3B82F6;
    
    /* ===== SOMBRAS ===== */
    --esaico-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --esaico-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.03);
    --esaico-shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.06);
    --esaico-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.12), 0 12px 30px rgba(0, 0, 0, 0.08);
    
    /* ===== BORDES ===== */
    --esaico-border-radius-sm: 6px;
    --esaico-border-radius-md: 8px;
    --esaico-border-radius-lg: 12px;
    --esaico-border-radius-xl: 16px;
    --esaico-border-radius-2xl: 20px;
    
    --esaico-border-width: 1px;
    --esaico-border-color: #e5e7eb;
    --esaico-border-color-light: #f3f4f6;
    
    /* ===== ESPACIADO ===== */
    --esaico-spacing-xs: 4px;
    --esaico-spacing-sm: 8px;
    --esaico-spacing-md: 12px;
    --esaico-spacing-lg: 16px;
    --esaico-spacing-xl: 20px;
    --esaico-spacing-2xl: 24px;
    --esaico-spacing-3xl: 32px;
    --esaico-spacing-4xl: 40px;
    
    /* ===== TIPOGRAFÍA ===== */
    --esaico-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --esaico-font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    --esaico-font-size-xs: 0.75rem;   /* 12px */
    --esaico-font-size-sm: 0.875rem;  /* 14px */
    --esaico-font-size-base: 1rem;    /* 16px */
    --esaico-font-size-lg: 1.125rem;  /* 18px */
    --esaico-font-size-xl: 1.25rem;   /* 20px */
    --esaico-font-size-2xl: 1.5rem;   /* 24px */
    --esaico-font-size-3xl: 1.875rem; /* 30px */
    --esaico-font-size-4xl: 2.25rem;  /* 36px */
    
    --esaico-font-weight-light: 300;
    --esaico-font-weight-normal: 400;
    --esaico-font-weight-medium: 500;
    --esaico-font-weight-semibold: 600;
    --esaico-font-weight-bold: 700;
    
    --esaico-line-height-tight: 1.25;
    --esaico-line-height-normal: 1.5;
    --esaico-line-height-relaxed: 1.75;
    
    /* ===== TRANSICIONES ===== */
    --esaico-transition-fast: 150ms ease;
    --esaico-transition-normal: 250ms ease;
    --esaico-transition-slow: 350ms ease;
    
    --esaico-transition-all: all var(--esaico-transition-normal);
    --esaico-transition-colors: color var(--esaico-transition-fast), background-color var(--esaico-transition-fast), border-color var(--esaico-transition-fast);
    --esaico-transition-transform: transform var(--esaico-transition-normal);
    --esaico-transition-opacity: opacity var(--esaico-transition-fast);
    
    /* ===== VARIABLES PARA GRID DE PRODUCTOS ===== */
    --animation-duration: 0.3s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --desktop-columns: 3;
    --tablet-columns: 2;
    --mobile-columns: 1;
    --card-gap: 20px;
    --tablet-gap: 15px;
    --mobile-gap: 10px;
    
    /* ===== DIMENSIONES DE PRODUCTOS ===== */
    --esaico-product-card-height: 120px;
    --esaico-product-card-height-mobile: 100px;
    --esaico-product-image-width: 110px;
    --esaico-product-image-width-mobile: 90px;
    
    /* ===== GRID Y LAYOUT ===== */
    --esaico-grid-columns-mobile: 1;
    --esaico-grid-columns-tablet: 2;
    --esaico-grid-columns-desktop: 3;
    --esaico-grid-columns-wide: 4;
    
    --esaico-grid-gap: var(--esaico-spacing-xl);
    --esaico-grid-gap-mobile: var(--esaico-spacing-md);
    
    --esaico-container-max-width: 1200px;
    --esaico-container-padding: var(--esaico-spacing-lg);
    
    /* ===== BREAKPOINTS (para uso en JavaScript) ===== */
    --esaico-breakpoint-sm: 640px;
    --esaico-breakpoint-md: 768px;
    --esaico-breakpoint-lg: 1024px;
    --esaico-breakpoint-xl: 1280px;
    
    /* ===== Z-INDEX ===== */
    --esaico-z-dropdown: 1000;
    --esaico-z-sticky: 1020;
    --esaico-z-fixed: 1030;
    --esaico-z-modal-backdrop: 1040;
    --esaico-z-modal: 1050;
    --esaico-z-popover: 1060;
    --esaico-z-tooltip: 1070;
    
    /* ===== AUDIO PLAYER ===== */
    --esaico-audio-button-size: 32px;
    --esaico-audio-button-size-large: 40px;
    --esaico-audio-progress-height: 4px;
    --esaico-audio-volume-width: 80px;
    
    /* ===== ANIMACIONES ===== */
    --esaico-animation-bounce: bounce 1s infinite;
    --esaico-animation-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --esaico-animation-spin: spin 1s linear infinite;
    --esaico-animation-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    
    /* ===== VARIABLES DE COMPATIBILIDAD PARA HEADER PERSONALIZADO ===== */
    /* Mapeo de variables --ch-* a variables --esaico-* existentes */
    --ch-primary: var(--esaico-secondary);
    --ch-primary-dark: var(--esaico-secondary-dark);
    --ch-secondary: var(--esaico-primary);
    --ch-background: var(--esaico-bg-primary);
    --ch-surface: var(--esaico-bg-secondary);
    --ch-border: var(--esaico-border-color);
    --ch-text: var(--esaico-text-primary);
    --ch-text-light: var(--esaico-text-secondary);
    --ch-shadow: var(--esaico-shadow-md);
    --ch-shadow-lg: var(--esaico-shadow-lg);
    --ch-radius: var(--esaico-border-radius-md);
    --ch-transition: var(--esaico-transition-all);
    
    /* ===== FILTROS Y EFECTOS ===== */
    --esaico-blur-sm: blur(4px);
    --esaico-blur-md: blur(8px);
    --esaico-blur-lg: blur(16px);
    
    --esaico-brightness-hover: brightness(1.1);
    --esaico-brightness-active: brightness(0.95);
    
    /* ===== GRADIENTES ===== */
    --esaico-gradient-primary: linear-gradient(135deg, var(--esaico-primary) 0%, var(--esaico-primary-light) 100%);
    --esaico-gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --esaico-gradient-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    --esaico-gradient-warning: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --esaico-gradient-error: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    
    /* ===== PLACEHOLDER GRADIENTE ===== */
    --esaico-placeholder-gradient: linear-gradient(135deg, rgba(140, 82, 255, 0.7) 0%, rgba(35, 247, 183, 0.7) 100%);
}

/* ===== VARIABLES PARA MODO OSCURO ===== */
/* Forzar modo claro en móviles para evitar problemas de visibilidad */
@media (prefers-color-scheme: dark) and (min-width: 769px) {
    :root {
        --esaico-text-primary: #ffffff;
        --esaico-text-secondary: #e5e7eb;
        --esaico-text-muted: #9ca3af;
        --esaico-text-light: #6b7280;

        --esaico-bg-primary: #1a1a1a;
        --esaico-bg-secondary: #2d2d2d;
        --esaico-bg-muted: #404040;

        --esaico-border-color: #374151;
        --esaico-border-color-light: #4b5563;
    }
}

/* =============================================================================
   ESTILOS GLOBALES BASE
   ============================================================================= */

/* Reset básico para enlaces y botones */
a, button {
    -webkit-tap-highlight-color: transparent;
    outline-offset: 2px;
}

/* Remover outline solo en mouse, mantenerlo para teclado (accesibilidad) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* Estilos globales para enlaces de texto - Solo contenido */
.entry-content a,
.post-content a,
.page-content a,
.content a,
.main-content a,
.article-content a,
.widget-content a {
    color: var(--color-primary, #007cba);
    text-decoration: none;
    transition: color 0.2s ease;
}

.entry-content a:hover,
.post-content a:hover,
.page-content a:hover,
.content a:hover,
.main-content a:hover,
.article-content a:hover,
.widget-content a:hover {
    color: var(--color-accent, #ff6b35);
    text-decoration: none;
}

/* Excluir botones y elementos UI del estilo de enlace global */
a.btn,
a.button,
a[class*="btn-"],
a[class*="esaico-button"],
a[class*="action-btn"],
a[class*="social-btn"],
a[class*="nav-"],
a[class*="menu-"] {
    color: inherit;
}

/* ===== CLASES DE UTILIDAD PARA VARIABLES ===== */
.esaico-primary { color: var(--esaico-primary) !important; }
.esaico-primary-bg { background-color: var(--esaico-primary) !important; }

.esaico-text-primary { color: var(--esaico-text-primary) !important; }
.esaico-text-secondary { color: var(--esaico-text-secondary) !important; }
.esaico-text-muted { color: var(--esaico-text-muted) !important; }

.esaico-bg-primary { background-color: var(--esaico-bg-primary) !important; }
.esaico-bg-secondary { background-color: var(--esaico-bg-secondary) !important; }

.esaico-shadow-sm { box-shadow: var(--esaico-shadow-sm) !important; }
.esaico-shadow-md { box-shadow: var(--esaico-shadow-md) !important; }
.esaico-shadow-lg { box-shadow: var(--esaico-shadow-lg) !important; }

.esaico-rounded-sm { border-radius: var(--esaico-border-radius-sm) !important; }
.esaico-rounded-md { border-radius: var(--esaico-border-radius-md) !important; }
.esaico-rounded-lg { border-radius: var(--esaico-border-radius-lg) !important; }

.esaico-transition { transition: var(--esaico-transition-all) !important; }
.esaico-transition-colors { transition: var(--esaico-transition-colors) !important; }
.esaico-transition-transform { transition: var(--esaico-transition-transform) !important; }

/* ===== KEYFRAMES PARA ANIMACIONES ===== */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -8px, 0);
    }
    70% {
        transform: translate3d(0, -4px, 0);
    }
    90% {
        transform: translate3d(0, -2px, 0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =============================================================================
   ESTILOS GLOBALES DE BOTONES
   Sistema de botones reutilizable con buenas prácticas
   ============================================================================= */

/* Clase base para todos los botones */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    line-height: 1.5;
    text-align: center;
}

/* Botón primario - Verde */
.btn.btn-primary {
    background: linear-gradient(135deg, var(--esaico-success, #10b981) 0%, #059669 100%);
    color: var(--esaico-text-white, #ffffff);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.btn.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

/* Botón secundario - Gris */
.btn.btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: var(--esaico-text-white, #ffffff);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.25);
}

.btn.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107, 114, 128, 0.35);
}