/* ============================================
           COLORES DINÁMICOS DEL SISTEMA
           ============================================ */
        :root {
            --primary-color: #0097b2;
            --secondary-color: #00c3cb;
        }
        
        /* ============================================
           NAVEGACIÓN
           ============================================ */
        nav[style*='--primary-color'],
        nav[style*='linear-gradient'] {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
        }
        
        /* ============================================
           CLASES DE FONDO
           ============================================ */
        .bg-blue-600,
        .bg-blue-500,
        .bg-primary {
            background-color: var(--primary-color) !important;
        }
        
        .bg-blue-700,
        .bg-secondary {
            background-color: var(--secondary-color) !important;
        }
        
        .bg-blue-100 {
            background-color: rgba(0, 151, 178, 0.1) !important;
        }
        
        .bg-blue-50 {
            background-color: rgba(0, 151, 178, 0.05) !important;
        }
        
        .bg-indigo-600,
        .bg-indigo-500,
        .bg-indigo-700 {
            background-color: var(--primary-color) !important;
        }
        
        .bg-indigo-100 {
            background-color: rgba(0, 151, 178, 0.1) !important;
        }
        
        .bg-indigo-50 {
            background-color: rgba(0, 151, 178, 0.05) !important;
        }
        
        /* ============================================
           GRADIENTES
           ============================================ */
        .bg-gradient-to-r.from-blue-600.to-blue-700,
        .bg-gradient-to-r.from-blue-600.to-indigo-700,
        .bg-gradient-to-r.from-blue-500.to-blue-600,
        .bg-gradient-to-r.from-indigo-600.to-indigo-700,
        .bg-gradient-to-br.from-blue-50.to-indigo-50 {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color)) !important;
        }
        
        /* ============================================
           CLASES DE TEXTO
           ============================================ */
        .text-blue-600,
        .text-blue-500,
        .text-primary,
        .text-blue-800 {
            color: var(--primary-color) !important;
        }
        
        .text-blue-700,
        .text-secondary {
            color: var(--secondary-color) !important;
        }
        
        .text-indigo-600,
        .text-indigo-500,
        .text-indigo-700,
        .text-indigo-800 {
            color: var(--primary-color) !important;
        }
        
        /* ============================================
           CLASES DE BORDE
           ============================================ */
        .border-blue-500,
        .border-blue-600,
        .border-primary,
        .border-blue-400 {
            border-color: var(--primary-color) !important;
        }
        
        .border-blue-700,
        .border-secondary {
            border-color: var(--secondary-color) !important;
        }
        
        .border-indigo-500,
        .border-indigo-600 {
            border-color: var(--primary-color) !important;
        }
        
        .border-b-2.border-blue-500 {
            border-bottom-color: var(--primary-color) !important;
        }
        
        .border-l-4.border-blue-500 {
            border-left-color: var(--primary-color) !important;
        }
        
        .border-l-4.border-indigo-500 {
            border-left-color: var(--primary-color) !important;
        }
        
        /* ============================================
           ESTADOS DE FOCUS Y HOVER
           ============================================ */
        .focus\:ring-blue-500:focus,
        .focus\:ring-indigo-500:focus {
            --tw-ring-color: var(--primary-color) !important;
        }
        
        .focus\:border-blue-500:focus,
        .focus\:border-indigo-500:focus {
            border-color: var(--primary-color) !important;
        }
        
        .hover\:bg-blue-700:hover,
        .hover\:bg-indigo-700:hover {
            background-color: var(--secondary-color) !important;
        }
        
        .hover\:text-blue-700:hover,
        .hover\:text-blue-800:hover {
            color: var(--secondary-color) !important;
        }
        
        .hover\:from-blue-700:hover,
        .hover\:to-indigo-700:hover {
            background: linear-gradient(to right, var(--secondary-color), var(--secondary-color)) !important;
        }
        
        /* ============================================
           BOTONES
           ============================================ */
        .btn-primary,
        button.bg-blue-600,
        button.bg-indigo-600 {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }
        
        .btn-primary:hover,
        button.bg-blue-600:hover,
        button.bg-indigo-600:hover {
            background-color: var(--secondary-color) !important;
            border-color: var(--secondary-color) !important;
        }
        
        /* ============================================
           BADGES Y ETIQUETAS
           ============================================ */
        .bg-blue-100.text-blue-800,
        .bg-indigo-100.text-indigo-800 {
            background-color: rgba(0, 151, 178, 0.15) !important;
            color: var(--primary-color) !important;
        }
        
        /* ============================================
           CONTAINERS
           ============================================ */
        .login-container {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
        }
        
        /* ============================================
           SWITCHES
           ============================================ */
        .ios-toggle input:checked + .ios-toggle-slider {
            background-color: var(--primary-color) !important;
        }
        
        .ios-toggle input:focus + .ios-toggle-slider {
            box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.3) !important;
        }
        
        /* ============================================
           OVERRIDES ESPECÍFICOS
           ============================================ */
        [style*='--primary-color'],
        [style*='var(--primary-color)'] {
            /* Elementos que ya usan variables CSS */
        }