/* ========================================================
   ARCHIVO DE COLORES - PALETA DE COLORES DEL SISTEMA
   ======================================================== */

/* ==================== VARIABLES DE COLOR ==================== */
:root {
    /* Colores de fondo */
    --bg-primary: #f5f5f5;          /* Fondo principal (gris suave) */
    --bg-secondary: #ffffff;         /* Fondo secundario (blanco) */
    --bg-tertiary: #e8e8e8;         /* Fondo terciario (gris más oscuro) */
    
    /* Colores principales */
    --color-primary: #1a1a1a;       /* Negro elegante para texto */
    --color-secondary: #d4af37;     /* Dorado clásico para acentos */
    --color-accent: #2c5f8d;        /* Azul académico */
    --color-highlight: #8b7355;     /* Bronce/Café elegante */
    
    /* Colores vibrantes adicionales */
    --color-cyan: #06b6d4;          /* Cyan vibrante */
    --color-purple: #8b5cf6;        /* Púrpura moderno */
    --color-pink: #ec4899;          /* Rosa vibrante */
    --color-orange: #f97316;        /* Naranja energético */
    --color-teal: #14b8a6;          /* Verde azulado */
    --color-indigo: #6366f1;        /* Índigo profundo */
    
    /* Colores de texto */
    --text-primary: #1a1a1a;        /* Texto principal */
    --text-secondary: #6b7280;      /* Texto secundario */
    --text-light: #ffffff;          /* Texto claro */
    --text-muted: #9ca3af;          /* Texto atenuado */
    
    /* Colores de estado */
    --color-success: #10b981;       /* Verde para éxito */
    --color-error: #ef4444;         /* Rojo para errores */
    --color-warning: #f59e0b;       /* Amarillo para advertencias */
    --color-info: #3b82f6;          /* Azul para información */
    
    /* Colores de borde */
    --border-light: #e5e7eb;        /* Borde claro */
    --border-medium: #d1d5db;       /* Borde medio */
    --border-dark: #9ca3af;         /* Borde oscuro */
    
    /* Sombras */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
    
    /* Sombras de color vibrantes */
    --shadow-gold: 0 8px 24px rgba(212, 175, 55, 0.3);
    --shadow-gold-hover: 0 12px 32px rgba(212, 175, 55, 0.5);
    --shadow-blue: 0 8px 24px rgba(44, 95, 141, 0.3);
    --shadow-cyan: 0 8px 24px rgba(6, 182, 212, 0.4);
    --shadow-purple: 0 8px 24px rgba(139, 92, 246, 0.4);
    --shadow-pink: 0 8px 24px rgba(236, 72, 153, 0.4);
    --shadow-orange: 0 8px 24px rgba(249, 115, 22, 0.4);
    
    /* Gradientes vibrantes */
    --gradient-gold: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
    --gradient-blue: linear-gradient(135deg, #2c5f8d 0%, #4a90e2 100%);
    --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    --gradient-pink: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    --gradient-sunset: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
    --gradient-ocean: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%);
    --gradient-fire: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #fbbf24 100%);
}

/* ==================== CLASES DE COLOR UTILITARIAS ==================== */

/* Clases de texto con brillo mejorado */
.cyan-glow { 
    color: var(--color-cyan); 
    text-shadow: 0 2px 12px rgba(6, 182, 212, 0.5); 
}

.magenta-glow { 
    color: var(--color-pink); 
    text-shadow: 0 2px 12px rgba(236, 72, 153, 0.5); 
}

.lime-glow { 
    color: var(--color-teal); 
    text-shadow: 0 2px 12px rgba(20, 184, 166, 0.5); 
}

.orange-glow { 
    color: var(--color-orange); 
    text-shadow: 0 2px 12px rgba(249, 115, 22, 0.5); 
}

.gold-glow {
    color: var(--color-secondary);
    text-shadow: 0 2px 12px rgba(212, 175, 55, 0.5);
}

.purple-glow {
    color: var(--color-purple);
    text-shadow: 0 2px 12px rgba(139, 92, 246, 0.5);
}

/* Clases de fondo */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }

/* Clases de texto */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-muted { color: var(--text-muted); }

/* Clases de gradiente */
.gradient-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-ocean {
    background: var(--gradient-ocean);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}