/* ========================================
   VARIABLES CSS - COLORES CENTRALIZADOS
   ======================================== */

:root {
    /* Colores principales */
    --color-primary: #2c5aa0;
    --color-primary-light: #4a90c2;
    --color-secondary: #ff6b6b;
    --color-secondary-light: #ff5252;
    
    /* Colores de fondo */
    --color-bg-primary: #f8fffe;
    --color-bg-secondary: #e8f4f8;
    --color-bg-white: #ffffff;
    --color-bg-light: #f0f7ff;
    --color-bg-gray: #f8f9fa;
    
    /* Colores de texto */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-light: #555;
    --color-text-white: #fff;
    --color-text-muted: #ccc;
    --color-text-muted-dark: #aaa;
    
    /* Colores de bordes */
    --color-border-light: #eee;
    --color-border-gray: #e9ecef;
    --color-border-primary: #4a90c2;
    
    /* Colores de hover */
    --color-hover-light: #e2e8f0;
    
    /* Colores de redes sociales */
    --color-instagram: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    --color-facebook: #1877F2;
    --color-twitter: #1DA1F2;
    --color-linkedin: #0077B5;
    --color-tiktok: linear-gradient(135deg, #ff0050, #000);
    --color-youtube: #FF0000;
    --color-whatsapp: #25D366;
    --color-telegram: #128C7E;
    --color-instagram-solid: #E4405F;
    --color-tiktok-solid: #000000;
    --color-facebook-solid: #1877F2;
    --color-youtube-solid: #FF0000;
    
    /* Colores de certificaciones */
    --color-cert-purple: #8e44ad;
    --color-cert-orange: #e67e22;
    --color-cert-blue: #3498db;
    --color-cert-teal: #1abc9c;
    --color-cert-green: #4caf50;
    
    /* Gradientes de certificaciones */
    --gradient-cert-green: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%);
    --gradient-cert-purple: linear-gradient(135deg, #ab47bc 0%, #9c27b0 100%);
    --gradient-cert-orange: linear-gradient(135deg, #ff7043 0%, #ff5722 100%);
    --gradient-cert-blue: linear-gradient(135deg, #5c6bc0 0%, #3f51b5 100%);
    
    /* Colores de estado */
    --color-success: #28a745;
    --color-danger: #ea4335;
    --color-warning: #f09433;
    
    /* Colores de sombras */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-light: rgba(0, 0, 0, 0.05);
    
    /* Colores de gradientes */
    --gradient-primary: linear-gradient(135deg, #2c5aa0 0%, #4a90c2 100%);
    --gradient-secondary: linear-gradient(135deg, #f8fffe 0%, #e8f4f8 100%);
    --gradient-hero: linear-gradient(rgba(76, 144, 194, 0.9), rgba(44, 90, 160, 0.9));
    --gradient-cta: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    --gradient-cert-teal: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
    
    /* Colores de transparencia */
    --color-transparent-white: rgba(255, 255, 255, 0.3);
    --color-transparent-primary: rgba(255, 107, 107, 0.9);
    --color-transparent-shadow: rgba(255, 107, 107, 0.5);
    --color-transparent-glow: rgba(255, 107, 107, 0.3);
    
    /* Espaciado responsivo */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}