:root {
    /* ================================================ */
    /* VARIABLES CSS GENÉRICAS - BASADAS EN LOGO  Colores por defecto    */
    /* ================================================ */
    
    /* 🎨 COLORES PRINCIPALES - AMPLIADOS */
    --primary-color: #B91C5C;        /* Rosa/Magenta principal */
    --primary-light: #EC4899;        /* Rosa más claro */
    --primary-dark: #9D174D;         /* Rosa más oscuro */
    --primary-extra-light: #F9A8D4;  /* ✅ NUEVO: Rosa muy claro para gradientes */
    --primary-extra-dark: #831843;   /* ✅ NUEVO: Rosa muy oscuro para gradientes */
    
    --secondary-color: #4B5563;      /* Gris secundario */
    --secondary-light: #6B7280;      /* Gris claro */
    --secondary-dark: #374151;       /* Gris oscuro */
    --secondary-extra-light: #9CA3AF; /* ✅ NUEVO: Gris muy claro */
    --secondary-extra-dark: #1F2937; /* ✅ NUEVO: Gris muy oscuro */
    
    --accent-color: #F472B6;         /* Rosa acento */
    --accent-light: #FBCFE8;         /* ✅ NUEVO: Acento claro */
    --accent-dark: #DB2777;          /* ✅ NUEVO: Acento oscuro */
    
    /* 🌈 COLORES RGB (para transparencias) */
    --primary-rgb: 185, 28, 92;
    --secondary-rgb: 75, 85, 99;
    --accent-rgb: 244, 114, 182;
    
    /* ================================================ */
    /* FONDOS - GRADIENTES MEJORADOS                   */
    /* ================================================ */
    
    /* 🔳 Fondos principales */
    --bg-primary: var(--primary-color);
    --bg-secondary: var(--secondary-color);
    --bg-light: rgba(var(--primary-rgb), 0.05);
    --bg-muted: rgba(var(--secondary-rgb), 0.1);
    
    /* 🌅 Gradientes MEJORADOS - Más contraste y vibrantes */
    --gradient-primary: linear-gradient(135deg, #EC4899 0%, #B91C5C 50%, #9D174D 100%);
    --gradient-secondary: linear-gradient(135deg, #6B7280 0%, #4B5563 50%, #374151 100%);
    --gradient-secondary-light: linear-gradient(135deg, #F3F4F6 0%, #a2a4a8 50%, #6e7074 100%);
    --gradient-accent: linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #DB2777 100%);
    --gradient-accent-light: linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #DB2777 100%);
    --gradient-accent-extra-light: linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #e485b0 100%);
    --gradient-accent-dark: linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #DB2777 100%);
    --gradient-soft: linear-gradient(135deg, #FDF2F8 0%, #FCE7F3 30%, #FBCFE8 70%, #F9A8D4 100%);
    --gradient-warning: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%);
    --gradient-success: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
    --gradient-danger: linear-gradient(135deg, #F87171 0%, #EF4444 50%, #DC2626 100%);
    --gradient-info: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 50%, #0284C7 100%);
    --gradient-info-light: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #BFDBFE 100%);
    --gradient-agendados: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    --gradient-atendidos: linear-gradient(135deg, #50d66d 0%, #319e49 50%, #09a52b 100%);
    --gradient-finalizados: linear-gradient(135deg, #5dada0 0%, #3d948b 50%, #07bbb9 100%);
    
    /* ✅ NUEVOS GRADIENTES VIBRANTES */
    --gradient-hero: linear-gradient(135deg, #EC4899 0%, #B91C5C 25%, #9D174D 50%, #831843 75%, #701A32 100%);
    --gradient-card: linear-gradient(145deg, #FDF2F8 0%, #FCE7F3 30%, rgba(185, 28, 92, 0.1) 100%);
    --gradient-button: linear-gradient(135deg, #F472B6 0%, #EC4899 25%, #B91C5C 75%, #9D174D 100%);
    --gradient-rainbow: linear-gradient(135deg, #F472B6 0%, #EC4899 20%, #B91C5C 40%, #9D174D 60%, #831843 80%, #F472B6 100%);
    
    /* 🎭 Fondos con overlay mejorados */
    --overlay-primary: rgba(var(--primary-rgb), 0.9);
    --overlay-dark: rgba(var(--secondary-rgb), 0.8);
    --overlay-gradient: linear-gradient(135deg, rgba(236, 72, 153, 0.9) 0%, rgba(185, 28, 92, 0.9) 100%);
    
    /* ================================================ */
    /* BOTONES - GRADIENTES MÁS VIBRANTES              */
    /* ================================================ */
    
    /* 🔘 Botón primario - MEJORADO */
    --btn-primary-bg: linear-gradient(135deg, #F472B6 0%, #EC4899 25%, #B91C5C 75%, #9D174D 100%);
    --btn-primary-hover: linear-gradient(135deg, #EC4899 0%, #B91C5C 25%, #9D174D 75%, #831843 100%);
    --btn-primary-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
    --btn-primary-text: white;
    
    /* 🔘 Botón secundario - MEJORADO */
    --btn-secondary-bg: linear-gradient(135deg, #9CA3AF 0%, #6B7280 25%, #4B5563 75%, #374151 100%);
    --btn-secondary-hover: linear-gradient(135deg, #6B7280 0%, #4B5563 25%, #374151 75%, #1F2937 100%);
    --btn-secondary-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.3);
    --btn-secondary-text: white;
    
    /* 🔘 Botón outline - MEJORADO */
    --btn-outline-border: var(--primary-color);
    --btn-outline-text: var(--primary-color);
    --btn-outline-hover-bg: var(--gradient-primary);
    --btn-outline-hover-text: white;
    
    /* 🔘 Botón success - MÁS VIBRANTE */
    --btn-success-bg: linear-gradient(135deg, #34D399 0%, #10B981 25%, #059669 75%, #047857 100%);
    --btn-success-hover: linear-gradient(135deg, #10B981 0%, #059669 25%, #047857 75%, #065F46 100%);
    --btn-success-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    
    /* 🔘 Botón danger - MÁS VIBRANTE */
    --btn-danger-bg: linear-gradient(135deg, #F87171 0%, #EF4444 25%, #DC2626 75%, #B91C1C 100%);
    --btn-danger-hover: linear-gradient(135deg, #EF4444 0%, #DC2626 25%, #B91C1C 75%, #991B1B 100%);
    --btn-danger-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    
    /* 🔘 Botón warning - MÁS VIBRANTE */
    --btn-warning-bg: linear-gradient(135deg, #FBBF24 0%, #F59E0B 25%, #D97706 75%, #B45309 100%);
    --btn-warning-hover: linear-gradient(135deg, #F59E0B 0%, #D97706 25%, #B45309 75%, #92400E 100%);
    --btn-warning-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    
    /* ✅ NUEVO: Botón info - VIBRANTE */
    --btn-info-bg: linear-gradient(135deg, #38BDF8 0%, #0EA5E9 25%, #0284C7 75%, #0369A1 100%);
    --btn-info-hover: linear-gradient(135deg, #0EA5E9 0%, #0284C7 25%, #0369A1 75%, #075985 100%);
    --btn-info-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
    
    /* ================================================ */
    /* BADGES - GRADIENTES MEJORADOS                   */
    /* ================================================ */
    
    /* 🏷️ Badge primario - CON GRADIENTE */
    --badge-primary-bg: linear-gradient(135deg, #F472B6 0%, #B91C5C 100%);
    --badge-primary-text: white;
    
    /* 🏷️ Badge secundario - CON GRADIENTE */
    --badge-secondary-bg: linear-gradient(135deg, #6B7280 0%, #374151 100%);
    --badge-secondary-text: white;
    
    /* 🏷️ Badge success - CON GRADIENTE */
    --badge-success-bg: linear-gradient(135deg, #34D399 0%, #059669 100%);
    --badge-success-text: white;
    
    /* 🏷️ Badge danger - CON GRADIENTE */
    --badge-danger-bg: linear-gradient(135deg, #F87171 0%, #B91C1C 100%);
    --badge-danger-text: white;
    
    /* 🏷️ Badge warning - CON GRADIENTE */
    --badge-warning-bg: linear-gradient(135deg, #FBBF24 0%, #B45309 100%);
    --badge-warning-text: white;
    
    /* 🏷️ Badge info - CON GRADIENTE */
    --badge-info-bg: linear-gradient(135deg, #38BDF8 0%, #0369A1 100%);
    --badge-info-text: white;

    --badge-masculino-bg: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
    --badge-masculino-text: white;

    --badge-femenino-bg: linear-gradient(135deg, #EC4899 0%, #B91C5C 100%);
    --badge-femenino-text: white;

    /* 🏷️ Badge light - MEJORADO */
    --badge-light-bg: linear-gradient(135deg, rgba(244, 114, 182, 0.1) 0%, rgba(185, 28, 92, 0.15) 100%);
    --badge-light-text: var(--primary-color);
    --badge-light-border: rgba(var(--primary-rgb), 0.3);
    
    /* ================================================ */
    /* ALERTS - NUEVOS CON GRADIENTES                  */
    /* ================================================ */
    
    /* ✅ NUEVOS: Alerts con fondos degradados */
    --alert-primary-bg: linear-gradient(135deg, rgba(244, 114, 182, 0.1) 0%, rgba(185, 28, 92, 0.05) 100%);
    --alert-primary-text: var(--primary-dark);
    --alert-primary-border: var(--primary-color);
    
    --alert-success-bg: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    --alert-success-text: #047857;
    --alert-success-border: #10B981;
    
    --alert-danger-bg: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(185, 28, 28, 0.05) 100%);
    --alert-danger-text: #B91C1C;
    --alert-danger-border: #EF4444;
    
    --alert-warning-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(180, 83, 9, 0.05) 100%);
    --alert-warning-text: #B45309;
    --alert-warning-border: #F59E0B;
    
    --alert-info-bg: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(3, 105, 161, 0.05) 100%);
    --alert-info-text: #0369A1;
    --alert-info-border: #0EA5E9;
    
    /* ================================================ */
    /* ICONOS - MEJORADOS                              */
    /* ================================================ */
    
    /* 🎯 Iconos principales */
    --icon-primary: var(--primary-color);
    --icon-secondary: var(--secondary-color);
    --icon-accent: var(--accent-color);
    --icon-success: #10B981;
    --icon-danger: #EF4444;
    --icon-warning: #F59E0B;
    --icon-info: #0EA5E9;
    
    /* 🎯 Iconos con opacidad */
    --icon-muted: rgba(var(--secondary-rgb), 0.6);
    --icon-light: rgba(var(--primary-rgb), 0.7);
    --icon-hover: var(--primary-light);
    
    /* 🎯 Fondos de iconos - CON GRADIENTES */
    --icon-bg-primary: linear-gradient(135deg, rgba(244, 114, 182, 0.1) 0%, rgba(185, 28, 92, 0.05) 100%);
    --icon-bg-success: linear-gradient(135deg, rgba(52, 211, 153, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    --icon-bg-danger: linear-gradient(135deg, rgba(248, 113, 113, 0.1) 0%, rgba(185, 28, 28, 0.05) 100%);
    --icon-bg-warning: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(180, 83, 9, 0.05) 100%);
    --icon-bg-info: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(3, 105, 161, 0.05) 100%);
    
    /* ================================================ */
    /* ELEMENTOS ADICIONALES - MEJORADOS               */
    /* ================================================ */
    
    /* 🔗 Enlaces */
    --link-color: var(--primary-color);
    --link-hover: var(--primary-dark);
    --link-visited: var(--primary-dark);
    
    /* 📋 Formularios */
    --input-border: rgba(var(--secondary-rgb), 0.3);
    --input-focus: var(--primary-color);
    --input-focus-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    
    /* 🎭 Sombras - MÁS VIBRANTES */
    --shadow-sm: 0 2px 4px rgba(var(--primary-rgb), 0.05);
    --shadow-md: 0 4px 12px rgba(var(--primary-rgb), 0.08);
    --shadow-lg: 0 8px 25px rgba(var(--primary-rgb), 0.12);
    --shadow-xl: 0 12px 40px rgba(var(--primary-rgb), 0.15);
    --shadow-primary: 0 4px 20px rgba(var(--primary-rgb), 0.2);
    --shadow-secondary: 0 4px 15px rgba(var(--secondary-rgb), 0.15);
    --shadow-success: 0 4px 15px rgba(16, 185, 129, 0.2);
    --shadow-danger: 0 4px 15px rgba(239, 68, 68, 0.2);
    --shadow-warning: 0 4px 15px rgba(245, 158, 11, 0.2);
    --shadow-info: 0 4px 15px rgba(14, 165, 233, 0.2);
    
    /* 🌊 Transiciones */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 📏 Bordes */
    --border-radius: 8px;
    --border-radius-sm: 5px;
    --border-radius-lg: 10px;
    --border-radius-xl: 15px;
    --border-radius-full: 50%;
    
    /* ✅ NUEVAS VARIABLES COMPLEMENTARIAS */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* 🎨 Tooltip específico - MEJORADO */
    --tooltip-bg: var(--gradient-primary);
    --tooltip-text: white;
    --tooltip-border: rgba(255, 255, 255, 0.2);
    --tooltip-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    
    /* 🎨 COLORES BOOTSTRAP - TEMA POR DEFECTO */
    --bs-primary: #B91C5C;           /* Rosa principal */
    --bs-primary-rgb: 185, 28, 92;
    
    --bs-secondary: #4B5563;         /* Gris secundario */
    --bs-secondary-rgb: 75, 85, 99;
    
    --bs-success: #10B981;           /* Verde éxito */
    --bs-success-rgb: 16, 185, 129;
    
    --bs-info: #0EA5E9;              /* Azul información */
    --bs-info-rgb: 14, 165, 233;
    
    --bs-warning: #F59E0B;           /* Amarillo advertencia */
    --bs-warning-rgb: 245, 158, 11;
    
    --bs-danger: #EF4444;            /* Rojo peligro */
    --bs-danger-rgb: 239, 68, 68;
    
    --bs-dark: #9D174D;              /* Rosa oscuro */
    --bs-dark-rgb: 157, 23, 77;
    
    --bs-light: #F3F4F6;             /* Gris claro */
    --bs-light-rgb: 243, 244, 246;
    
    /* 🎯 COLORES MÉDICOS ESPECÍFICOS */
    --bs-medical: #B91C5C;           /* Rosa médico */
    --bs-medical-rgb: 185, 28, 92;
    
    --bs-analysis: #EC4899;          /* Rosa análisis */
    --bs-analysis-rgb: 236, 72, 153;
    
    --bs-imaging: #7C3AED;           /* Morado imagenología */
    --bs-imaging-rgb: 124, 58, 237;
    
    --bs-cardiac: #DC2626;           /* Rojo cardiaco */
    --bs-cardiac-rgb: 220, 38, 38;
    
    --bs-respiratory: #059669;       /* Verde respiratorio */
    --bs-respiratory-rgb: 5, 150, 105;
    
    --bs-neurological: #7C2D12;      /* Marrón neurológico */
    --bs-neurological-rgb: 124, 45, 18;
    
    --bs-psychological: #BE185D;     /* Rosa psicológico */
    --bs-psychological-rgb: 190, 24, 93;
    
    --bs-occupational: #1F2937;      /* Gris ocupacional */
    --bs-occupational-rgb: 31, 41, 55;
    
    --bs-screening: #F59E0B;         /* Amarillo screening */
    --bs-screening-rgb: 245, 158, 11;
    
    --bs-general: #6B7280;           /* Gris general */
    --bs-general-rgb: 107, 114, 128;
    
    /* ✅ NUEVO: COLORES PURPLE COMPLETOS */
    --bs-purple: #7C3AED;            /* Morado principal */
    --bs-purple-rgb: 124, 58, 237;
    
    /* ================================================ */
    /* VARIABLES BOOTSTRAP EXTENDIDAS                  */
    /* ================================================ */
    
    /* 🎨 VARIANTES DE COLORES */
    --bs-primary-50: #FDF2F8;
    --bs-primary-100: #FCE7F3;
    --bs-primary-200: #FBCFE8;
    --bs-primary-300: #F9A8D4;
    --bs-primary-400: #F472B6;
    --bs-primary-500: #EC4899;
    --bs-primary-600: #DB2777;
    --bs-primary-700: #BE185D;
    --bs-primary-800: #9D174D;
    --bs-primary-900: #831843;
    
    /* ✅ NUEVO: VARIANTES PURPLE COMPLETAS */
    --bs-purple-50: #FAF5FF;
    --bs-purple-100: #F3E8FF;
    --bs-purple-200: #E9D5FF;
    --bs-purple-300: #D8B4FE;
    --bs-purple-400: #C084FC;
    --bs-purple-500: #A855F7;
    --bs-purple-600: #9333EA;
    --bs-purple-700: #7C2D12;
    --bs-purple-800: #6B21A8;
    --bs-purple-900: #581C87;
    
    --bs-success-50: #ECFDF5;
    --bs-success-100: #D1FAE5;
    --bs-success-200: #A7F3D0;
    --bs-success-300: #6EE7B7;
    --bs-success-400: #34D399;
    --bs-success-500: #10B981;
    --bs-success-600: #059669;
    --bs-success-700: #047857;
    --bs-success-800: #065F46;
    --bs-success-900: #064E3B;
    
    --bs-danger-50: #FEF2F2;
    --bs-danger-100: #FEE2E2;
    --bs-danger-200: #FECACA;
    --bs-danger-300: #FCA5A5;
    --bs-danger-400: #F87171;
    --bs-danger-500: #EF4444;
    --bs-danger-600: #DC2626;
    --bs-danger-700: #B91C1C;
    --bs-danger-800: #991B1B;
    --bs-danger-900: #7F1D1D;
    
    --bs-warning-50: #FFFBEB;
    --bs-warning-100: #FEF3C7;
    --bs-warning-200: #FDE68A;
    --bs-warning-300: #FCD34D;
    --bs-warning-400: #FBBF24;
    --bs-warning-500: #F59E0B;
    --bs-warning-600: #D97706;
    --bs-warning-700: #B45309;
    --bs-warning-800: #92400E;
    --bs-warning-900: #78350F;
    
    --bs-info-50: #F0F9FF;
    --bs-info-100: #E0F2FE;
    --bs-info-200: #BAE6FD;
    --bs-info-300: #7DD3FC;
    --bs-info-400: #38BDF8;
    --bs-info-500: #0EA5E9;
    --bs-info-600: #0284C7;
    --bs-info-700: #0369A1;
    --bs-info-800: #075985;
    --bs-info-900: #0C4A6E;
    
    
}

/* ================================================ */
/* MODO OSCURO PARA TEMA POR DEFECTO               */
/* ================================================ */

/* @media (prefers-color-scheme: dark) {
:root { */
/* Fondos oscuros */
/* --bg-primary: #121212;
--bg-secondary: #1E1E1E;
--bg-light: #2D2D2D;
--bg-muted: #3D3D3D; */

/* Textos claros */
/* --text-primary: #FFFFFF;
--text-secondary: #E0E0E0;
--text-muted: #BDBDBD;
*/
/* Inputs adaptados */
/* --input-border: #424242;
--input-bg: #2D2D2D;
*/
/* Rosa/Magenta más claro para modo oscuro */
/* --primary-color: #F9A8D4;
--primary-light: #FBCFE8;
--primary-dark: #F472B6;
--secondary-color: #9CA3AF;
--accent-color: #FBBF24; */

/* Gradientes adaptados para modo oscuro */
/* --gradient-primary: linear-gradient(135deg, #F9A8D4 0%, #F472B6 50%, #EC4899 100%);
--gradient-secondary: linear-gradient(135deg, #9CA3AF 0%, #6B7280 50%, #4B5563 100%);
}
} */