/* ─── VARIABLES DE DISEÑO (TEMA aCLARO - POR DEFECTO / FORZADO) ─── */
        :root, :root.theme-light {
            --bg-color: #f6f8fc;
            --accent-color: #A1D200;
            --accent-glow: rgba(161, 210, 0, 0.15);
            --success-color: #A1D200;
            --text-color: #1e293b;
            --text-muted: #475569;
            --card-bg: rgba(255, 255, 255, 0.78);
            --card-border: rgba(161, 210, 0, 0.12);
            --glass-blur: blur(30px);
            --grid-line-color: rgba(161, 210, 0, 0.02);
            --glow-opacity-1: 0.22;
            --glow-opacity-2: 0.16;
            --h1-gradient: linear-gradient(135deg, #1e293b 25%, #0f172a 100%);
            --info-card-bg: rgba(161, 210, 0, 0.03);
            --info-card-border: rgba(161, 210, 0, 0.1);
            --status-secure-border: rgba(161, 210, 0, 0.2);
            --status-secure-bg: rgba(161, 210, 0, 0.02);
            --status-secure-text: #76ad00;
            --status-secure-badge-bg: rgba(161, 210, 0, 0.06);
            --status-secure-badge-border: rgba(161, 210, 0, 0.12);
            --bg-gradient-1: radial-gradient(at 15% 15%, rgba(161, 210, 0, 0.24) 0px, transparent 55%);
            --bg-gradient-2: radial-gradient(at 85% 85%, rgba(99, 102, 241, 0.16) 0px, transparent 55%);
            --bg-gradient-3: radial-gradient(at 80% 20%, rgba(6, 182, 212, 0.14) 0px, transparent 40%);

            /* ── PALETA DE COLORES COMPATIBLES CON VERDE (TEMA CLARO) ── */
            --primary-color: #76ad00;
            --primary-dark-color: #5d8c00;
            --primary-light-color: #8ebf00;
            --accent-chatbot-color: #76ad00;

            /* ── VARIABLES DEL CHATBOT EN MODO CLARO ── */
            --cw-bg-chat:    rgba(255, 255, 255, 0.88);
            --cw-bg-bot:     rgba(161, 210, 0, 0.04);
            --cw-bg-user:    #76ad00;
            --cw-bg-ticket:  rgba(161, 210, 0, 0.05);
            --cw-bg-input-bg: rgba(255, 255, 255, 0.9);
            --cw-bg-card:    rgba(161, 210, 0, 0.015);

            --cw-border-main:    rgba(161, 210, 0, 0.15);
            --cw-border-ticket:  rgba(161, 210, 0, 0.25);
            --cw-border-input:   rgba(161, 210, 0, 0.2);
            --cw-border-divider: rgba(161, 210, 0, 0.08);

            --cw-text-main:          #1e293b;
            --cw-text-bot:           #334155;
            --cw-text-user:          #ffffff;
            --cw-text-muted:         #475569;
            --cw-text-ticket:        #1d2d00;
            --cw-text-ticket-sub:    #76ad00;
            --cw-text-ticket-id:     #557f00;
            --cw-text-link:          #76ad00;
            
            --cw-shadow-flat: 0 10px 40px rgba(161, 210, 0, 0.05);
            --cw-shadow-glow: 0 0 20px rgba(161, 210, 0, 0.15);
            
            --cw-primary-surface: rgba(161, 210, 0, 0.1);
            --cw-primary-glow:    rgba(161, 210, 0, 0.25);

            --cw-bg-header: rgba(255, 255, 255, 0.95);
            --cw-border-header: rgba(161, 210, 0, 0.15);
            --cw-avatar-shadow: 0 0 12px rgba(161, 210, 0, 0.35);
            --cw-avatar-border: rgba(161, 210, 0, 0.3);
            --cw-status-color: #A1D200;
            --cw-status-shadow: 0 0 8px rgba(161, 210, 0, 0.6);
            --cw-border-bot-bubble: rgba(161, 210, 0, 0.05);
            --cw-text-bot-strong: #76ad00;
            --cw-text-header-title: #1e293b;
            --cw-text-header-status: #475569;
            --cw-header-action-btn-bg: rgba(161, 210, 0, 0.08);
            --cw-header-action-btn-color: #475569;
            --cw-header-action-btn-bg-hover: rgba(161, 210, 0, 0.15);
            --cw-header-action-btn-color-hover: #1e293b;
            
            --cw-bg-input-area: rgba(255, 255, 255, 0.95);
            --cw-border-input-area: rgba(161, 210, 0, 0.1);
            --cw-bg-input: #f8fafc;
            --cw-border-input: rgba(161, 210, 0, 0.15);
            --cw-text-input: #1e293b;
            --cw-placeholder-input: #94a3b8;
            
            --cw-bg-action-btn: #ffffff;
            --cw-border-action-btn: rgba(161, 210, 0, 0.15);
            --cw-text-action-btn: #76ad00;
            --cw-shadow-action-btn: 0 2px 6px rgba(161, 210, 0, 0.05);
            
            --cw-bg-action-btn-hover: rgba(161, 210, 0, 0.08);
            --cw-border-action-btn-hover: rgba(161, 210, 0, 0.3);
            --cw-text-action-btn-hover: #76ad00;
            --cw-shadow-action-btn-hover: 0 4px 12px rgba(161, 210, 0, 0.1);
            
            --cw-bg-chip-icon: rgba(161, 210, 0, 0.08);
            --cw-bg-chip-icon-hover: rgba(161, 210, 0, 0.15);
            
            --cw-bg-ticket-history-item: rgba(161, 210, 0, 0.02);
            --cw-border-ticket-history-item: rgba(161, 210, 0, 0.08);
            --cw-bg-ticket-history-item-hover: rgba(161, 210, 0, 0.06);
            --cw-border-ticket-history-item-hover: rgba(161, 210, 0, 0.2);
            
            --cw-bg-status-nuevo: rgba(161, 210, 0, 0.08);
            --cw-text-status-nuevo: #76ad00;
            --cw-border-status-nuevo: rgba(161, 210, 0, 0.15);
            
            --cw-bg-quick-reply: #ffffff;
            --cw-border-quick-reply: rgba(161, 210, 0, 0.2);
            --cw-text-quick-reply: #76ad00;
            
            --cw-bg-admin-back: rgba(0, 0, 0, 0.02);
            --cw-border-admin-back: rgba(0, 0, 0, 0.08);
            --cw-text-admin-back: #475569;
            --cw-bg-admin-back-hover: rgba(0, 0, 0, 0.04);
            --cw-border-admin-back-hover: rgba(0, 0, 0, 0.15);
            --cw-text-admin-back-hover: #1e293b;
            
            --cw-bg-footer: rgba(244, 246, 250, 0.95);
            --cw-border-footer: rgba(161, 210, 0, 0.08);
            --cw-text-footer: #64748b;
            
            --cw-bg-reunion-wrap: #ffffff;
            --cw-border-reunion-wrap: rgba(161, 210, 0, 0.15);
            --cw-shadow-reunion-wrap: 0 8px 32px rgba(161, 210, 0, 0.08);
            
            --cw-bg-reunion-head: #f8fafc;
            --cw-border-reunion-head: rgba(161, 210, 0, 0.1);
            --cw-bg-reunion-head-icon: rgba(161, 210, 0, 0.08);
            --cw-text-reunion-head-icon: #76ad00;
            --cw-text-reunion-head-title: #1e293b;
            --cw-text-reunion-head-badge: #64748b;
            
            --cw-bg-reunion-body: #ffffff;
            --cw-border-reunion-body: 1.5px solid rgba(161, 210, 0, 0.15);
            --cw-text-reunion-label: #76ad00;
            
            --cw-bg-cal-nav: #f1f5f9;
            --cw-border-cal-nav: rgba(161, 210, 0, 0.1);
            --cw-text-cal-nav: #1e293b;
            --cw-bg-cal-nav-hover: rgba(161, 210, 0, 0.08);
            --cw-border-cal-nav-hover: rgba(161, 210, 0, 0.3);
            --cw-text-cal-title: #1e293b;
            --cw-text-cal-dow: #64748b;
            
            --cw-text-day: #334155;
            --cw-bg-day-hover: rgba(161, 210, 0, 0.08);
            --cw-border-day-hover: rgba(161, 210, 0, 0.2);
            --cw-text-day-off: #cbd5e1;
            --cw-text-day-today: #76ad00;
            
            --cw-bg-slot: #f8fafc;
            --cw-border-slot: 1.5px solid rgba(161, 210, 0, 0.15);
            --cw-text-slot: #334155;
            --cw-border-slot-hover: #76ad00;
            --cw-bg-slot-hover: rgba(161, 210, 0, 0.08);
            --cw-text-slot-hover: #76ad00;
            
            --cw-bg-imf-input: #ffffff;
            --cw-border-imf-input: 1.5px solid rgba(161, 210, 0, 0.15);
            --cw-text-imf-input: #1e293b;
            --cw-placeholder-imf-input: #94a3b8;
            
            --cw-bg-imf-cancel: #f1f5f9;
            --cw-border-imf-cancel: rgba(0, 0, 0, 0.06);
            --cw-text-imf-cancel: #475569;
            --cw-bg-imf-cancel-hover: #e2e8f0;
            --cw-border-imf-cancel-hover: rgba(0, 0, 0, 0.15);
            --cw-text-imf-cancel-hover: #1e293b;
        }

        /* ─── VARIABLES DE DISEÑO (TEMA OSCURO - DETECTADO POR EL SISTEMA) ─── */
        @media (prefers-color-scheme: dark) {
            :root:not(.theme-light) {
                --bg-color: #080b11;
                --accent-color: #A1D200;
                --accent-glow: rgba(161, 210, 0, 0.25);
                --success-color: #A1D200;
                --text-color: #f3f4f6;
                --text-muted: #9ca3af;
                --card-bg: rgba(17, 24, 39, 0.45);
                --card-border: rgba(255, 255, 255, 0.07);
                --grid-line-color: rgba(255, 255, 255, 0.015);
                --glow-opacity-1: 0.18;
                --glow-opacity-2: 0.12;
                --h1-gradient: linear-gradient(to bottom, #ffffff, #cbd5e1);
                --info-card-bg: rgba(255, 255, 255, 0.015);
                --info-card-border: rgba(255, 255, 255, 0.04);
                --status-secure-border: rgba(161, 210, 0, 0.25);
                --status-secure-bg: rgba(161, 210, 0, 0.02);
                --status-secure-text: #d4ff80;
                --status-secure-badge-bg: rgba(161, 210, 0, 0.1);
                --status-secure-badge-border: rgba(161, 210, 0, 0.15);
                --bg-gradient-1: radial-gradient(at 10% 10%, rgba(161, 210, 0, 0.14) 0px, transparent 50%);
                --bg-gradient-2: radial-gradient(at 90% 90%, rgba(161, 210, 0, 0.15) 0px, transparent 50%);
                --bg-gradient-3: radial-gradient(at 75% 25%, rgba(6, 182, 212, 0.06) 0px, transparent 40%);

                /* Chatbot variables for Dark mode */
                --primary-color: #A1D200;
                --primary-dark-color: #76ad00;
                --primary-light-color: #b4e600;
                --accent-chatbot-color: #A1D200;

                /* ── VARIABLES DEL CHATBOT EN MODO OSCURO ── */
                --cw-bg-chat:    #0b0f19;
                --cw-bg-bot:     rgba(255, 255, 255, 0.03);
                --cw-bg-user:    #76ad00;
                --cw-bg-ticket:  rgba(161, 210, 0, 0.1);
                --cw-bg-input-bg: rgba(255, 255, 255, 0.03);
                --cw-bg-card:    rgba(255, 255, 255, 0.02);

                --cw-border-main:    rgba(255, 255, 255, 0.08);
                --cw-border-ticket:  rgba(161, 210, 0, 0.3);
                --cw-border-input:   rgba(255, 255, 255, 0.12);
                --cw-border-divider: rgba(255, 255, 255, 0.05);

                --cw-text-main:          #f3f4f6;
                --cw-text-bot:           #e5e7eb;
                --cw-text-user:          #ffffff;
                --cw-text-muted:         #9ca3af;
                --cw-text-ticket:        #eaffcc;
                --cw-text-ticket-sub:    #d4ff80;
                --cw-text-ticket-id:     #b4e600;
                --cw-text-link:          #b4e600;
                
                --cw-shadow-flat: 0 10px 40px rgba(0, 0, 0, 0.6);
                --cw-shadow-glow: 0 0 20px rgba(161, 210, 0, 0.3);
                
                --cw-primary-surface: rgba(161, 210, 0, 0.15);
                --cw-primary-glow:    rgba(161, 210, 0, 0.35);

                --cw-bg-header: rgba(17, 24, 39, 0.75);
                --cw-border-header: rgba(255, 255, 255, 0.08);
                --cw-avatar-shadow: 0 0 15px rgba(161, 210, 0, 0.45);
                --cw-avatar-border: rgba(161, 210, 0, 0.4);
                --cw-status-color: #A1D200;
                --cw-status-shadow: 0 0 8px rgba(161, 210, 0, 0.7);
                --cw-border-bot-bubble: rgba(255, 255, 255, 0.06);
                --cw-text-bot-strong: #b4e600;
                --cw-text-header-title: #ffffff;
                --cw-text-header-status: #9ca3af;
                --cw-header-action-btn-bg: rgba(255, 255, 255, 0.1);
                --cw-header-action-btn-color: rgba(255, 255, 255, 0.65);
                --cw-header-action-btn-bg-hover: rgba(255, 255, 255, 0.2);
                --cw-header-action-btn-color-hover: #ffffff;
                
                --cw-bg-input-area: rgba(17, 24, 39, 0.75);
                --cw-border-input-area: rgba(255, 255, 255, 0.08);
                --cw-bg-input: rgba(255, 255, 255, 0.03);
                --cw-border-input: rgba(255, 255, 255, 0.1);
                --cw-text-input: #ffffff;
                --cw-placeholder-input: #6b7280;
                
                --cw-bg-action-btn: rgba(255, 255, 255, 0.03);
                --cw-border-action-btn: rgba(255, 255, 255, 0.08);
                --cw-text-action-btn: #e5e7eb;
                --cw-shadow-action-btn: 0 2px 8px rgba(0, 0, 0, 0.2);
                
                --cw-bg-action-btn-hover: rgba(161, 210, 0, 0.2);
                --cw-border-action-btn-hover: rgba(161, 210, 0, 0.5);
                --cw-text-action-btn-hover: #ffffff;
                --cw-shadow-action-btn-hover: 0 6px 20px rgba(161, 210, 0, 0.35);
                
                --cw-bg-chip-icon: rgba(161, 210, 0, 0.15);
                --cw-bg-chip-icon-hover: rgba(161, 210, 0, 0.25);
                
                --cw-bg-ticket-history-item: rgba(255, 255, 255, 0.02);
                --cw-border-ticket-history-item: rgba(255, 255, 255, 0.06);
                --cw-bg-ticket-history-item-hover: rgba(161, 210, 0, 0.1);
                --cw-border-ticket-history-item-hover: rgba(161, 210, 0, 0.3);
                
                --cw-bg-status-nuevo: rgba(161, 210, 0, 0.2);
                --cw-text-status-nuevo: #d4ff80;
                --cw-border-status-nuevo: rgba(161, 210, 0, 0.3);
                
                --cw-bg-quick-reply: rgba(255, 255, 255, 0.03);
                --cw-border-quick-reply: rgba(255, 255, 255, 0.1);
                --cw-text-quick-reply: #b4e600;
                
                --cw-bg-admin-back: rgba(255, 255, 255, 0.02);
                --cw-border-admin-back: rgba(255, 255, 255, 0.08);
                --cw-text-admin-back: #9ca3af;
                --cw-bg-admin-back-hover: rgba(161, 210, 0, 0.15);
                --cw-border-admin-back-hover: rgba(161, 210, 0, 0.4);
                --cw-text-admin-back-hover: #ffffff;
                
                --cw-bg-footer: rgba(17, 24, 39, 0.8);
                --cw-border-footer: rgba(255, 255, 255, 0.05);
                --cw-text-footer: #4b5563;
                
                --cw-bg-reunion-wrap: rgba(11, 15, 25, 0.8);
                --cw-border-reunion-wrap: rgba(255, 255, 255, 0.08);
                --cw-shadow-reunion-wrap: 0 8px 32px rgba(0, 0, 0, 0.5);
                
                --cw-bg-reunion-head: rgba(17, 24, 39, 0.9);
                --cw-border-reunion-head: rgba(255, 255, 255, 0.08);
                --cw-bg-reunion-head-icon: rgba(161, 210, 0, 0.25);
                --cw-text-reunion-head-icon: #b4e600;
                --cw-text-reunion-head-title: #ffffff;
                --cw-text-reunion-head-badge: #9ca3af;
                
                --cw-bg-reunion-body: rgba(11, 15, 25, 0.4);
                --cw-border-reunion-body: 1.5px solid rgba(255, 255, 255, 0.08);
                --cw-text-reunion-label: #b4e600;
                
                --cw-bg-cal-nav: rgba(255, 255, 255, 0.03);
                --cw-border-cal-nav: rgba(255, 255, 255, 0.08);
                --cw-text-cal-nav: #ffffff;
                --cw-bg-cal-nav-hover: rgba(161, 210, 0, 0.2);
                --cw-border-cal-nav-hover: rgba(161, 210, 0, 0.5);
                --cw-text-cal-title: #ffffff;
                --cw-text-cal-dow: #6b7280;
                
                --cw-text-day: #e5e7eb;
                --cw-bg-day-hover: rgba(161, 210, 0, 0.2);
                --cw-border-day-hover: rgba(161, 210, 0, 0.4);
                --cw-text-day-off: #374151;
                --cw-text-day-today: #b4e600;
                
                --cw-bg-slot: rgba(255, 255, 255, 0.02);
                --cw-border-slot: 1.5px solid rgba(255, 255, 255, 0.08);
                --cw-text-slot: #e5e7eb;
                --cw-border-slot-hover: #A1D200;
                --cw-bg-slot-hover: rgba(161, 210, 0, 0.15);
                --cw-text-slot-hover: #ffffff;
                
                --cw-bg-imf-input: rgba(255, 255, 255, 0.03);
                --cw-border-imf-input: 1.5px solid rgba(255, 255, 255, 0.08);
                --cw-text-imf-input: #ffffff;
                --cw-placeholder-imf-input: #4b5563;
                
                --cw-bg-imf-cancel: rgba(255, 255, 255, 0.02);
                --cw-border-imf-cancel: rgba(255, 255, 255, 0.08);
                --cw-text-imf-cancel: #9ca3af;
                --cw-bg-imf-cancel-hover: rgba(255, 255, 255, 0.05);
                --cw-border-imf-cancel-hover: rgba(255, 255, 255, 0.15);
                --cw-text-imf-cancel-hover: #ffffff;
            }
        }

        /* ─── VARIABLES DE DISEÑO (TEMA OSCURO - FORZADO POR EL USUARIO) ─── */
        :root.theme-dark {
            --bg-color: #080b11;
            --accent-color: #A1D200;
            --accent-glow: rgba(161, 210, 0, 0.25);
            --success-color: #A1D200;
            --text-color: #f3f4f6;
            --text-muted: #9ca3af;
            --card-bg: rgba(17, 24, 39, 0.45);
            --card-border: rgba(255, 255, 255, 0.07);
            --grid-line-color: rgba(255, 255, 255, 0.015);
            --glow-opacity-1: 0.18;
            --glow-opacity-2: 0.12;
            --h1-gradient: linear-gradient(to bottom, #ffffff, #cbd5e1);
            --info-card-bg: rgba(255, 255, 255, 0.015);
            --info-card-border: rgba(255, 255, 255, 0.04);
            --status-secure-border: rgba(161, 210, 0, 0.25);
            --status-secure-bg: rgba(161, 210, 0, 0.02);
            --status-secure-text: #d4ff80;
            --status-secure-badge-bg: rgba(161, 210, 0, 0.1);
            --status-secure-badge-border: rgba(161, 210, 0, 0.15);
            --bg-gradient-1: radial-gradient(at 10% 10%, rgba(161, 210, 0, 0.14) 0px, transparent 50%);
            --bg-gradient-2: radial-gradient(at 90% 90%, rgba(161, 210, 0, 0.15) 0px, transparent 50%);
            --bg-gradient-3: radial-gradient(at 75% 25%, rgba(6, 182, 212, 0.06) 0px, transparent 40%);

            /* Chatbot variables for Dark mode */
            --primary-color: #A1D200;
            --primary-dark-color: #76ad00;
            --primary-light-color: #b4e600;
            --accent-chatbot-color: #A1D200;

            /* ── VARIABLES DEL CHATBOT EN MODO OSCURO ── */
            --cw-bg-chat:    #0b0f19;
            --cw-bg-bot:     rgba(255, 255, 255, 0.03);
            --cw-bg-user:    #76ad00;
            --cw-bg-ticket:  rgba(161, 210, 0, 0.1);
            --cw-bg-input-bg: rgba(255, 255, 255, 0.03);
            --cw-bg-card:    rgba(255, 255, 255, 0.02);

            --cw-border-main:    rgba(255, 255, 255, 0.08);
            --cw-border-ticket:  rgba(161, 210, 0, 0.3);
            --cw-border-input:   rgba(255, 255, 255, 0.12);
            --cw-border-divider: rgba(255, 255, 255, 0.05);

            --cw-text-main:          #f3f4f6;
            --cw-text-bot:           #e5e7eb;
            --cw-text-user:          #ffffff;
            --cw-text-muted:         #9ca3af;
            --cw-text-ticket:        #eaffcc;
            --cw-text-ticket-sub:    #d4ff80;
            --cw-text-ticket-id:     #b4e600;
            --cw-text-link:          #b4e600;
            
            --cw-shadow-flat: 0 10px 40px rgba(0, 0, 0, 0.6);
            --cw-shadow-glow: 0 0 20px rgba(161, 210, 0, 0.3);
            
            --cw-primary-surface: rgba(161, 210, 0, 0.15);
            --cw-primary-glow:    rgba(161, 210, 0, 0.35);

            --cw-bg-header: rgba(17, 24, 39, 0.75);
            --cw-border-header: rgba(255, 255, 255, 0.08);
            --cw-avatar-shadow: 0 0 15px rgba(161, 210, 0, 0.45);
            --cw-avatar-border: rgba(161, 210, 0, 0.4);
            --cw-status-color: #A1D200;
            --cw-status-shadow: 0 0 8px rgba(161, 210, 0, 0.7);
            --cw-border-bot-bubble: rgba(255, 255, 255, 0.06);
            --cw-text-bot-strong: #b4e600;
            --cw-text-header-title: #ffffff;
            --cw-text-header-status: #9ca3af;
            --cw-header-action-btn-bg: rgba(255, 255, 255, 0.1);
            --cw-header-action-btn-color: rgba(255, 255, 255, 0.65);
            --cw-header-action-btn-bg-hover: rgba(255, 255, 255, 0.2);
            --cw-header-action-btn-color-hover: #ffffff;
            
            --cw-bg-input-area: rgba(17, 24, 39, 0.75);
            --cw-border-input-area: rgba(255, 255, 255, 0.08);
            --cw-bg-input: rgba(255, 255, 255, 0.03);
            --cw-border-input: rgba(255, 255, 255, 0.1);
            --cw-text-input: #ffffff;
            --cw-placeholder-input: #6b7280;
            
            --cw-bg-action-btn: rgba(255, 255, 255, 0.03);
            --cw-border-action-btn: rgba(255, 255, 255, 0.08);
            --cw-text-action-btn: #e5e7eb;
            --cw-shadow-action-btn: 0 2px 8px rgba(0, 0, 0, 0.2);
            
            --cw-bg-action-btn-hover: rgba(161, 210, 0, 0.2);
            --cw-border-action-btn-hover: rgba(161, 210, 0, 0.5);
            --cw-text-action-btn-hover: #ffffff;
            --cw-shadow-action-btn-hover: 0 6px 20px rgba(161, 210, 0, 0.35);
            
            --cw-bg-chip-icon: rgba(161, 210, 0, 0.15);
            --cw-bg-chip-icon-hover: rgba(161, 210, 0, 0.25);
            
            --cw-bg-ticket-history-item: rgba(255, 255, 255, 0.02);
            --cw-border-ticket-history-item: rgba(255, 255, 255, 0.06);
            --cw-bg-ticket-history-item-hover: rgba(161, 210, 0, 0.1);
            --cw-border-ticket-history-item-hover: rgba(161, 210, 0, 0.3);
            
            --cw-bg-status-nuevo: rgba(161, 210, 0, 0.2);
            --cw-text-status-nuevo: #d4ff80;
            --cw-border-status-nuevo: rgba(161, 210, 0, 0.3);
            
            --cw-bg-quick-reply: rgba(255, 255, 255, 0.03);
            --cw-border-quick-reply: rgba(255, 255, 255, 0.1);
            --cw-text-quick-reply: #b4e600;
            
            --cw-bg-admin-back: rgba(255, 255, 255, 0.02);
            --cw-border-admin-back: rgba(255, 255, 255, 0.08);
            --cw-text-admin-back: #9ca3af;
            --cw-bg-admin-back-hover: rgba(161, 210, 0, 0.15);
            --cw-border-admin-back-hover: rgba(161, 210, 0, 0.4);
            --cw-text-admin-back-hover: #ffffff;
            
            --cw-bg-footer: rgba(17, 24, 39, 0.8);
            --cw-border-footer: rgba(255, 255, 255, 0.05);
            --cw-text-footer: #4b5563;
            
            --cw-bg-reunion-wrap: rgba(11, 15, 25, 0.8);
            --cw-border-reunion-wrap: rgba(255, 255, 255, 0.08);
            --cw-shadow-reunion-wrap: 0 8px 32px rgba(0, 0, 0, 0.5);
            
            --cw-bg-reunion-head: rgba(17, 24, 39, 0.9);
            --cw-border-reunion-head: rgba(255, 255, 255, 0.08);
            --cw-bg-reunion-head-icon: rgba(161, 210, 0, 0.25);
            --cw-text-reunion-head-icon: #b4e600;
            --cw-text-reunion-head-title: #ffffff;
            --cw-text-reunion-head-badge: #9ca3af;
            
            --cw-bg-reunion-body: rgba(11, 15, 25, 0.4);
            --cw-border-reunion-body: 1.5px solid rgba(255, 255, 255, 0.08);
            --cw-text-reunion-label: #b4e600;
            
            --cw-bg-cal-nav: rgba(255, 255, 255, 0.03);
            --cw-border-cal-nav: rgba(255, 255, 255, 0.08);
            --cw-text-cal-nav: #ffffff;
            --cw-bg-cal-nav-hover: rgba(161, 210, 0, 0.2);
            --cw-border-cal-nav-hover: rgba(161, 210, 0, 0.5);
            --cw-text-cal-title: #ffffff;
            --cw-text-cal-dow: #6b7280;
            
            --cw-text-day: #e5e7eb;
            --cw-bg-day-hover: rgba(161, 210, 0, 0.2);
            --cw-border-day-hover: rgba(161, 210, 0, 0.4);
            --cw-text-day-off: #374151;
            --cw-text-day-today: #b4e600;
            
            --cw-bg-slot: rgba(255, 255, 255, 0.02);
            --cw-border-slot: 1.5px solid rgba(255, 255, 255, 0.08);
            --cw-text-slot: #e5e7eb;
            --cw-border-slot-hover: #A1D200;
            --cw-bg-slot-hover: rgba(161, 210, 0, 0.15);
            --cw-text-slot-hover: #ffffff;
            
            --cw-bg-imf-input: rgba(255, 255, 255, 0.03);
            --cw-border-imf-input: 1.5px solid rgba(255, 255, 255, 0.08);
            --cw-text-imf-input: #ffffff;
            --cw-placeholder-imf-input: #4b5563;
            
            --cw-bg-imf-cancel: rgba(255, 255, 255, 0.02);
            --cw-border-imf-cancel: rgba(255, 255, 255, 0.08);
            --cw-text-imf-cancel: #9ca3af;
            --cw-bg-imf-cancel-hover: rgba(255, 255, 255, 0.05);
            --cw-border-imf-cancel-hover: rgba(255, 255, 255, 0.15);
            --cw-text-imf-cancel-hover: #ffffff;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
            background-image: 
                linear-gradient(var(--grid-line-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px),
                var(--bg-gradient-1),
                var(--bg-gradient-2),
                var(--bg-gradient-3);
            background-size: 50px 50px, 50px 50px, 100% 100%, 100% 100%;
        }

        /* Background blur glows animate - breathing effect */
        .glow-sphere {
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(161, 210, 0, var(--glow-opacity-1)) 0%, transparent 70%);
            filter: blur(80px);
            pointer-events: none;
            z-index: 1;
            animation: floatGlow 18s ease-in-out infinite alternate;
        }
        
        .glow-sphere-2 {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(161, 210, 0, var(--glow-opacity-2)) 0%, transparent 70%);
            filter: blur(70px);
            pointer-events: none;
            z-index: 1;
            animation: floatGlow2 22s ease-in-out infinite alternate;
        }

        .glow-sphere-3 {
            position: absolute;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(6, 182, 212, var(--glow-opacity-2)) 0%, transparent 70%);
            filter: blur(65px);
            pointer-events: none;
            z-index: 1;
            animation: floatGlow3 20s ease-in-out infinite alternate;
        }

        @keyframes floatGlow {
            0% { transform: translate(-25%, -25%) scale(1); opacity: 0.7; }
            50% { transform: translate(10%, -10%) scale(1.2); opacity: 1; }
            100% { transform: translate(25%, 25%) scale(1); opacity: 0.7; }
        }

        @keyframes floatGlow2 {
            0% { transform: translate(25%, 15%) scale(1.1); opacity: 0.8; }
            50% { transform: translate(-10%, 25%) scale(0.9); opacity: 0.6; }
            100% { transform: translate(-20%, -20%) scale(1.1); opacity: 0.8; }
        }

        @keyframes floatGlow3 {
            0% { transform: translate(-15%, 15%) scale(0.95); opacity: 0.6; }
            50% { transform: translate(15%, -10%) scale(1.05); opacity: 0.85; }
            100% { transform: translate(-5%, -5%) scale(0.95); opacity: 0.6; }
        }

        .showcase-container {
            width: 90%;
            max-width: 540px;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-top: 3px solid rgba(161, 210, 0, 0.45); /* Highlight superior con verde Resérvame */
            border-radius: 32px;
            padding: 45px 40px;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            text-align: center;
            z-index: 10;
            position: relative;
        }

        .showcase-container.status-connected {
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 
                        0 0 20px rgba(161, 210, 0, 0.05),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
            animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
                       connectedGlow 5s ease-in-out infinite alternate;
        }

        .showcase-container.status-secure {
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 
                        0 0 20px rgba(161, 210, 0, 0.05),
                        inset 0 1px 0 rgba(255, 255, 255, 0.05);
            animation: cardAppear 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards,
                       secureGlow 5s ease-in-out infinite alternate;
        }

        @keyframes cardAppear {
            0% { transform: translateY(40px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        @keyframes connectedGlow {
            0% { box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(161, 210, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-color: rgba(161, 210, 0, 0.15); }
            100% { box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(161, 210, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-color: rgba(161, 210, 0, 0.35); }
        }

        @keyframes secureGlow {
            0% { box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 10px rgba(161, 210, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-color: rgba(161, 210, 0, 0.15); }
            100% { box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(161, 210, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); border-color: rgba(161, 210, 0, 0.35); }
        }

        /* Pulsing Hologram Bot */
        .avatar-hologram {
            width: 105px;
            height: 105px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(161, 210, 0, 0.15) 0%, rgba(161, 210, 0, 0.08) 100%);
            border: 2px solid rgba(161, 210, 0, 0.4);
            margin: 0 auto 25px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0 0 40px rgba(161, 210, 0, 0.3), 
                        inset 0 0 20px rgba(161, 210, 0, 0.15);
            animation: hologramFloat 4s ease-in-out infinite alternate;
        }

        .avatar-hologram::before {
            content: '';
            position: absolute;
            top: -8px; left: -8px; right: -8px; bottom: -8px;
            border-radius: 50%;
            border: 1px dashed rgba(161, 210, 0, 0.35);
            animation: spin 25s linear infinite;
        }

        .avatar-hologram::after {
            content: '';
            position: absolute;
            top: -3px; left: -3px; right: -3px; bottom: -3px;
            border-radius: 50%;
            box-shadow: 0 0 25px rgba(161, 210, 0, 0.55);
            animation: pulseGlow 2.5s ease-in-out infinite alternate;
            pointer-events: none;
        }

        .avatar-hologram .scanner-line {
            position: absolute;
            left: 5%;
            width: 90%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #A1D200, #ffffff, #A1D200, transparent);
            box-shadow: 0 0 8px #A1D200, 0 0 15px #A1D200;
            border-radius: 50%;
            opacity: 0;
            z-index: 10;
            pointer-events: none;
        }
        
        body.is-scanning .avatar-hologram .scanner-line {
            opacity: 1;
            animation: scanLaser 1.5s ease-in-out infinite;
        }

        @keyframes scanLaser {
            0% { top: 0%; }
            50% { top: 100%; }
            100% { top: 0%; }
        }

        /* Targets to fade in after scanning */
        .scan-target {
            opacity: 0;
            filter: blur(8px);
            transform: translateY(10px);
            transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                        filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body.scan-completed .scan-target {
            opacity: 1;
            filter: blur(0);
            transform: translateY(0);
        }

        @keyframes hologramFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        @keyframes pulseGlow {
            0% { opacity: 0.3; }
            100% { opacity: 0.8; }
        }

        @keyframes spin {
            100% { transform: rotate(360deg); }
        }

        .bot-icon {
            width: 48px;
            height: 48px;
            color: #A1D200;
            filter: drop-shadow(0 0 10px rgba(161, 210, 0, 0.6));
        }

        h1 {
            font-size: 30px;
            font-weight: 800;
            background: var(--h1-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            letter-spacing: -0.03em;
        }

        .assistant-tag {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #A1D200;
            background: rgba(161, 210, 0, 0.1);
            padding: 5px 14px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 25px;
            border: 1px solid rgba(161, 210, 0, 0.25);
        }

        .info-card {
            background: var(--info-card-bg);
            border: 1px solid var(--info-card-border);
            border-radius: 20px;
            padding: 24px;
            margin-bottom: 25px;
            text-align: left;
            position: relative;
        }

        .greeting {
            font-size: 18px;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .message-body {
            font-size: 14.5px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .badge-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #34d399;
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.15);
            padding: 4px 12px;
            border-radius: 20px;
            text-transform: uppercase;
            margin-top: 15px;
        }

        .btn-pulse {
            background: linear-gradient(135deg, var(--accent-color) 0%, #76ad00 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #ffffff;
            padding: 16px 32px;
            border-radius: 18px;
            font-family: inherit;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            box-shadow: 0 10px 25px var(--accent-glow);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .btn-pulse:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(161, 210, 0, 0.45);
            background: linear-gradient(135deg, #76ad00 0%, #5d8c00 100%);
        }

        .btn-pulse:active {
            transform: translateY(0);
        }

        .pulse-ring {
            width: 7px;
            height: 7px;
            background-color: #34d399;
            border-radius: 50%;
            box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
            animation: pulseRing 1.8s infinite;
        }

        @keyframes pulseRing {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
        }

        .pulse-ring.warning {
            background-color: #ef4444;
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            animation: pulseRingWarning 1.8s infinite;
        }

        @keyframes pulseRingWarning {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        .pulse-ring.secure {
            background-color: #A1D200;
            box-shadow: 0 0 0 0 rgba(161, 210, 0, 0.7);
            animation: pulseRingSecure 1.8s infinite;
        }

        @keyframes pulseRingSecure {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(161, 210, 0, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(161, 210, 0, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(161, 210, 0, 0); }
        }

        .footer-note {
            margin-top: 25px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .footer-note a {
            color: #b4e600;
            text-decoration: none;
            transition: color 0.2s;
            font-weight: 600;
        }

        .footer-note a:hover {
            color: #d4ff80;
        }

        /* Botón de cambio de tema flotante premium */
        .theme-toggle-btn {
            position: fixed;
            top: 25px;
            right: 25px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            color: var(--text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            z-index: 999;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .theme-toggle-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px var(--accent-glow);
            border-color: rgba(161, 210, 0, 0.3);
        }

        .theme-toggle-btn svg {
            width: 22px;
            height: 22px;
            position: absolute;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* En tema claro, mostramos la luna (para cambiar a oscuro) y ocultamos el sol */
        .theme-toggle-btn .sun-icon {
            opacity: 0;
            transform: rotate(90deg) scale(0.5);
        }

        .theme-toggle-btn .moon-icon {
            opacity: 1;
            transform: rotate(0) scale(1);
        }

        /* En tema oscuro, mostramos el sol (para cambiar a claro) y ocultamos la luna */

        /* ─── PORTAL ACTIVE: SIDE-BY-SIDE RESPONSIVE LAYOUT (30/70 Split) ─── */
        body.portal-active {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: center !important;
            padding: 40px !important;
            gap: 40px !important;
            overflow: hidden !important;
            height: 100vh !important;
        }

        /* 30% Column: Compact Left Sidebar Showcase Container */
        body.portal-active .showcase-container {
            margin: 0 !important;
            text-align: left !important;
            flex-shrink: 0 !important;
            width: 100% !important;
            max-width: 360px !important; /* Compacted width */
            padding: 35px 28px !important; /* Reduced padding */
            border-radius: 24px !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
        }

        /* Scaled Down Hologram for Portal-Active layout */
        body.portal-active .avatar-hologram {
            width: 80px !important;
            height: 80px !important;
            margin: 0 0 18px 0 !important; /* Alinear a la izquierda */
            box-shadow: 0 0 30px rgba(161, 210, 0, 0.3), 
                        inset 0 0 15px rgba(161, 210, 0, 0.15) !important;
        }

        body.portal-active .avatar-hologram::before {
            top: -6px !important; left: -6px !important; right: -6px !important; bottom: -6px !important;
        }

        body.portal-active .avatar-hologram::after {
            top: -2px !important; left: -2px !important; right: -2px !important; bottom: -2px !important;
            box-shadow: 0 0 15px rgba(161, 210, 0, 0.45) !important;
        }

        body.portal-active .bot-icon {
            width: 36px !important;
            height: 36px !important;
        }

        /* Compacted Typography inside Showcase */
        body.portal-active h1 {
            font-size: 24px !important;
            margin-bottom: 6px !important;
        }

        body.portal-active .assistant-tag {
            font-size: 9.5px !important;
            padding: 4px 11px !important;
            margin-bottom: 18px !important;
        }

        body.portal-active .info-card {
            padding: 18px !important;
            margin-bottom: 18px !important;
            border-radius: 16px !important;
        }

        body.portal-active .greeting {
            font-size: 16px !important;
            margin-bottom: 6px !important;
        }

        body.portal-active .message-body {
            font-size: 13.5px !important;
            line-height: 1.55 !important;
        }

        body.portal-active .footer-note {
            margin-top: 18px !important;
            font-size: 11px !important;
        }

        /* 70% Column: Hero Main Workspace Chatbot */
        body.portal-active #chatbot-wrapper {
            position: relative !important;
            bottom: auto !important;
            right: auto !important;
            z-index: 100 !important;
            pointer-events: auto !important;
            width: 850px !important; /* Large desktop workspace width */
            max-width: 100% !important;
            height: 780px !important; /* Expanded height */
            max-height: 85vh !important;
            display: flex !important;
            flex-shrink: 1 !important;
            animation: chatbotSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        @keyframes chatbotSlideIn {
            0% {
                opacity: 0;
                transform: translateX(30px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        body.portal-active .chat-widget {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
        }

        body.portal-active .chat-window-container {
            position: relative !important;
            bottom: auto !important;
            right: auto !important;
            width: 100% !important;
            height: 100% !important;
            max-height: none !important;
            border-radius: 28px !important;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
            display: flex !important;
            flex-direction: column !important;
            opacity: 1 !important;
            visibility: visible !important;
            transform: none !important;
        }

        /* Ocultar botón de expandir en layout de pantalla dividida */
        body.portal-active .chat-widget #expandChat {
            display: none !important;
        }

        /* Ajustes responsivos para tablets y portátiles pequeños */
        @media (max-width: 1200px) {
            body.portal-active {
                gap: 30px !important;
                padding: 30px !important;
            }
            body.portal-active #chatbot-wrapper {
                width: 650px !important; /* Ajuste para portátiles */
            }
        }

        /* Ajustes responsivos para dispositivos móviles (Modern App Layout) */
        @media (max-width: 991px) {
            body.portal-active {
                flex-direction: column !important;
                justify-content: flex-start !important;
                align-items: stretch !important;
                gap: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
                height: var(--viewport-height, 100dvh) !important;
                min-height: auto !important;
            }

            body.portal-active .showcase-container {
                display: none !important;
            }

            body.portal-active #chatbot-wrapper {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: var(--viewport-height, 100dvh) !important;
                max-height: none !important;
                margin: 0 !important;
                z-index: 2147483647 !important;
            }

            body.portal-active .chat-widget {
                border-radius: 0 !important;
                width: 100% !important;
                height: 100% !important;
            }

            body.portal-active .chat-window-container {
                border-radius: 0 !important;
                box-shadow: none !important;
                height: 100% !important;
                max-height: 100% !important;
            }
        }

        @media (max-width: 480px) {
            body.portal-active .showcase-container {
                padding: 8px 12px !important;
            }
            body.portal-active h1 {
                font-size: 13px !important;
            }
            body.portal-active .brand-logo {
                height: 28px !important;
                max-width: 95px !important;
            }
            body.portal-active .avatar-hologram {
                width: 38px !important;
                height: 38px !important;
            }
            body.portal-active .bot-icon {
                width: 18px !important;
                height: 18px !important;
            }
        }

        /* ─── BRAND LOGO & HOLOGRAM INTEGRATION ─── */
        .brand-hologram-wrapper {
            display: flex !important;
            flex-direction: row !important;     /* Side-by-side layout */
            align-items: center !important;     /* Center vertically */
            justify-content: center !important; /* Center horizontally together */
            gap: 16px !important;              /* Spacing between hologram and logo */
            margin: 0 auto 25px auto !important;
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .brand-hologram-wrapper .avatar-hologram {
            margin: 0 !important;
            flex-shrink: 0 !important;
            animation: hologramFloat 4s ease-in-out infinite alternate !important; /* Float synced */
        }

        .brand-logo-container {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-shrink: 0 !important;
            width: auto !important;
            animation: hologramFloat 4s ease-in-out infinite alternate !important; /* Float synced */
        }

        .brand-logo {
            display: block !important;
            height: 72px !important;            /* Larger and more prominent size */
            width: auto !important;
            max-width: 240px !important;
            object-fit: contain !important;
            flex-shrink: 0 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        /* Responsive adjustments when portal is active */
        body.portal-active .brand-hologram-wrapper {
            align-items: center !important;
            justify-content: flex-start !important; /* Left-aligned side-by-side layout in desktop sidebar */
            margin: 0 0 20px 0 !important;
            gap: 12px !important;
        }

        body.portal-active .brand-logo {
            height: 52px !important;            /* Proportional size in sidebar */
            max-width: 180px !important;
        }

        body.portal-active .brand-logo-container {
            justify-content: flex-start !important;
        }

        /* Mobile overrides when portal is active */
        @media (max-width: 991px) {
            body.portal-active .brand-hologram-wrapper {
                align-items: center !important;
                justify-content: center !important; /* Center on mobile split-screen */
                margin: 0 auto 20px auto !important;
                gap: 12px !important;
            }
            body.portal-active .brand-logo-container {
                justify-content: center !important;
            }
            body.portal-active .brand-logo {
                height: 52px !important;
                max-width: 180px !important;
            }
        }

        /* Logo visibility switching based on root theme */
        .logo-white-ver { display: block !important; }
        .logo-dark-ver { display: none !important; }

        .theme-light .logo-white-ver { display: none !important; }
        .theme-light .logo-dark-ver { display: block !important; }

        .theme-dark .logo-white-ver { display: block !important; }
        .theme-dark .logo-dark-ver { display: none !important; }

        /* Highlighted Company Name text */
        .empresa-destacada {
            background: linear-gradient(135deg, #A1D200 0%, #76ad00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
        }

        .chat-widget {
            /* ── Re-definición de paletas (Verde/Indigo) dinámica por tema ── */
            --primary:       var(--primary-color) !important;
            --primary-dark:  var(--primary-dark-color) !important;
            --primary-light: var(--primary-light-color) !important;
            --accent:        var(--accent-chatbot-color) !important;

            /* Superficies */
            --bg-chat:    var(--cw-bg-chat) !important; /* Fondo de ventana de chat */
            --bg-bot:     var(--cw-bg-bot) !important; /* Burbuja bot */
            --bg-user:    var(--cw-bg-user) !important; /* Burbuja usuario */
            --bg-ticket:  var(--cw-bg-ticket) !important; /* Tarjetas de tickets */
            --bg-input:   var(--cw-bg-input-bg) !important; /* Fondo input/footer */
            --bg-card:    var(--cw-bg-card) !important; 

            /* Bordes */
            --border-main:    var(--cw-border-main) !important;
            --border-ticket:  var(--cw-border-ticket) !important;
            --border-input:   var(--cw-border-input) !important;
            --border-divider: var(--cw-border-divider) !important;

            /* Textos */
            --text-main:          var(--cw-text-main) !important;
            --text-bot:           var(--cw-text-bot) !important;
            --text-user:          var(--cw-text-user) !important;
            --text-muted:         var(--cw-text-muted) !important;
            --text-ticket:        var(--cw-text-ticket) !important;
            --text-ticket-sub:    var(--cw-text-ticket-sub) !important;
            --text-ticket-id:     var(--cw-text-ticket-id) !important;
            --text-link:          var(--cw-text-link) !important;
            
            /* Sombras */
            --shadow-flat: var(--cw-shadow-flat) !important;
            --shadow-glow: var(--cw-shadow-glow) !important;
        }

        /* Ventana de chata Glassmorphic */
        .chat-widget .chat-window-container {
            background: var(--bg-chat) !important;
            backdrop-filter: blur(25px) !important;
            -webkit-backdrop-filter: blur(25px) !important;
            border: 1px solid var(--border-main) !important;
            box-shadow: var(--shadow-flat) !important;
        }

        /* Cabecera del chat */
        .chat-widget .chat-header {
            background: var(--cw-bg-header) !important;
            border-bottom: 1px solid var(--cw-border-header) !important;
        }

        .chat-widget .avatar,
        .chat-widget .chat-header .avatar,
        .theme-dark .chat-widget .avatar,
        .theme-dark .chat-widget .chat-header .avatar {
            background: #ffffff !important;
            background-color: #ffffff !important;
            opacity: 1 !important;
            filter: none !important;
            backdrop-filter: none !important;
            box-shadow: none !important;
            border: none !important;
        }

        .chat-widget .avatar-ring {
            display: none !important;
        }

        .chat-widget .chat-header .title h3 {
            color: var(--cw-text-header-title) !important;
        }

        .chat-widget .chat-header .status {
            color: var(--cw-text-header-status) !important;
        }

        .chat-widget .chat-header .action-btn {
            background: var(--cw-header-action-btn-bg) !important;
            color: var(--cw-header-action-btn-color) !important;
        }

        .chat-widget .chat-header .action-btn:hover {
            background: var(--cw-header-action-btn-bg-hover) !important;
            color: var(--cw-header-action-btn-color-hover) !important;
        }

        .chat-widget .chat-header .status::before {
            background: var(--cw-status-color) !important;
            box-shadow: var(--cw-status-shadow) !important;
        }

        /* Área de mensajes */
        .chat-widget .chat-messages {
            background: transparent !important;
        }

        /* Burbujas del Bot */
        .chat-widget .message.bot {
            background: var(--bg-bot) !important;
            border: 1px solid var(--cw-border-bot-bubble) !important;
            color: var(--text-bot) !important;
        }

        .chat-widget .message.bot strong {
            color: var(--cw-text-bot-strong) !important;
        }

        /* Burbujas del Usuario */
        .chat-widget .message.user {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
            color: var(--text-user) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            box-shadow: 0 4px 15px var(--primary-glow) !important;
        }

        /* Área de entrada y footer */
        .chat-widget .chat-input-area {
            background: var(--cw-bg-input-area) !important;
            border-top: 1px solid var(--cw-border-input-area) !important;
            padding: 10px 14px !important;
            gap: 10px !important;
        }

        .chat-widget #chatInput {
            background: var(--cw-bg-input) !important;
            border: 1.5px solid var(--cw-border-input) !important;
            color: var(--cw-text-input) !important;
            border-radius: 24px !important;
            padding: 10px 18px !important;
            font-size: 14px !important;
        }

        .chat-widget #chatInput:focus {
            background: var(--cw-bg-chat) !important;
            border-color: var(--primary) !important;
            box-shadow: 0 0 0 3px var(--primary-glow) !important;
        }

        .chat-widget #chatInput::placeholder {
            color: var(--cw-placeholder-input) !important;
        }

        /* Botón Enviar */
        .chat-widget #sendBtn {
            width: 38px !important;
            height: 38px !important;
            border-radius: 50% !important;
            background: var(--primary) !important;
            box-shadow: 0 4px 12px var(--primary-glow) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        }

        .chat-widget #sendBtn:hover {
            background: var(--primary-dark) !important;
            box-shadow: 0 6px 16px var(--primary-glow) !important;
            transform: scale(1.08) translateY(-1px) !important;
        }

        .chat-widget #sendBtn:active {
            transform: scale(0.95) !important;
        }

        /* Estado inactivo cuando el input está vacío al estilo Instagram */
        .chat-widget #chatInput:placeholder-shown ~ #sendBtn {
            opacity: 0.35 !important;
            transform: scale(0.85) !important;
            pointer-events: none !important;
            box-shadow: none !important;
        }

        .chat-widget #sendBtn:disabled {
            opacity: 0.35 !important;
            cursor: not-allowed !important;
            transform: none !important;
        }

/* Solicitud: mismo slot que chatbot-wrapper */
body.portal-active #solicitud-wrapper {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 100 !important;
    pointer-events: auto !important;
    width: 850px !important;
    max-width: 100% !important;
    height: 780px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-shrink: 1 !important;
    animation: chatbotSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

body.portal-active #solicitud-wrapper .solicitud-panel-host {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

body.portal-active #solicitud-wrapper .chat-window-container.solicitud-panel {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 28px !important;
}
@media (max-width: 1200px) {
    body.portal-active #solicitud-wrapper { width: 650px !important; }
}
@media (max-width: 991px) {
    body.portal-active #solicitud-wrapper {
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important;
        height: var(--viewport-height, 100dvh) !important;
        max-height: none !important;
        margin: 0 !important;
        z-index: 2147483647 !important;
    }
}

.portal-form-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 22px 12px;
    background: transparent;
}
.portal-form-scroll .form-label {
    color: var(--cw-text-main);
    font-weight: 600;
    font-size: 13px;
}
.portal-form-scroll .form-control,
.portal-form-scroll textarea.form-control {
    background: var(--cw-bg-input);
    border: 1px solid var(--cw-border-input);
    color: var(--cw-text-input);
    border-radius: 14px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
}
.portal-form-scroll .form-control:focus,
.portal-form-scroll textarea.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}
.portal-form-scroll .form-text {
    color: var(--cw-text-muted);
    font-size: 12px;
}
.portal-form-scroll .alert {
    border-radius: 14px;
    font-size: 14px;
}
.portal-form-scroll .portal-client-logo {
    max-height: 36px;
    max-width: 140px;
    object-fit: contain;
}
.portal-success-panel .success-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}
.portal-error-panel { text-align: center; padding: 2rem 1rem; }
.portal-error-panel .error-icon { font-size: 2.5rem; color: #ef4444; margin-bottom: 1rem; }
.btn-portal-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--cw-bg-admin-back);
    border: 1px solid var(--cw-border-admin-back);
    color: var(--cw-text-admin-back);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-portal-back:hover {
    background: var(--cw-bg-admin-back-hover);
    border-color: var(--cw-border-admin-back-hover);
    color: var(--cw-text-admin-back-hover);
}

.d-none { display: none !important; }
.portal-form-scroll .alert-danger {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fecaca;
}
.portal-form-scroll .alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #fde68a;
}
.theme-light .portal-form-scroll .alert-danger { color: #b91c1c; }
.theme-light .portal-form-scroll .alert-warning { color: #b45309; }

/* ─── Paneal solicitud (columna derecha) ─── */
#solicitud-wrapper .solicitud-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

#solicitud-wrapper .solicitud-panel__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--cw-border-header);
    background: var(--cw-bg-header);
}

#solicitud-wrapper .solicitud-panel__logo-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--cw-border-header);
}

#solicitud-wrapper .solicitud-panel__logo-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#solicitud-wrapper .solicitud-panel__logo-wrap--fallback {
    background: rgba(161, 210, 0, 0.15);
    color: var(--accent-color);
    font-size: 18px;
}

#solicitud-wrapper .solicitud-panel__title {
    flex: 1;
    min-width: 0;
}

#solicitud-wrapper .solicitud-panel__title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cw-text-header-title);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#solicitud-wrapper .solicitud-panel__title .status {
    font-size: 12px;
    color: var(--cw-text-header-status);
    margin-top: 2px;
}

#solicitud-wrapper .solicitud-panel__back {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
}

#solicitud-wrapper .solicitud-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 24px 16px;
}

#solicitud-wrapper .solicitud-panel__intro {
    color: var(--cw-text-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 20px;
}

#solicitud-wrapper .solicitud-panel__intro strong {
    color: var(--cw-text-main);
}

#solicitud-wrapper .solicitud-field {
    margin-bottom: 18px;
}

#solicitud-wrapper .solicitud-field label {
    display: block;
    color: var(--cw-text-main);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

#solicitud-wrapper .solicitud-field .req {
    color: #ef4444;
}

#solicitud-wrapper .solicitud-field .opt {
    font-weight: 400;
    color: var(--cw-text-muted);
}

#solicitud-wrapper .solicitud-field textarea,
#solicitud-wrapper .solicitud-field input[type="file"] {
    width: 100%;
    box-sizing: border-box;
}

#solicitud-wrapper .solicitud-field textarea {
    min-height: 140px;
    resize: vertical;
    background: var(--cw-bg-input);
    border: 1px solid var(--cw-border-input);
    color: var(--cw-text-input);
    border-radius: 14px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}

#solicitud-wrapper .solicitud-field textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
    outline: none;
}/* aa */

#solicitud-wrapper .solicitud-field .hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--cw-text-muted);
}

#solicitud-wrapper .solicitud-input {
    width: 100%;
    box-sizing: border-box;
    background: var(--cw-bg-input);
    border: 1px solid var(--cw-border-input);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--cw-text-header-title);
    font-family: inherit;
}

#solicitud-wrapper .solicitud-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

#solicitud-wrapper .solicitud-panel__email-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--cw-primary-surface);
    border: 1px solid rgba(161, 210, 0, 0.2);
    font-size: 13px;
    line-height: 1.45;
    color: var(--cw-text-muted);
}

#solicitud-wrapper .solicitud-panel__email-note-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(161, 210, 0, 0.15);
    color: var(--accent-color);
    font-size: 14px;
}

#solicitud-wrapper .solicitud-panel__email-note-text strong {
    color: var(--cw-text-header-title);
    word-break: break-all;
}

#solicitud-wrapper .solicitud-panel__email-note--success {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#solicitud-wrapper .solicitud-panel__email-note.d-none {
    display: none !important;
}

#solicitud-wrapper .solicitud-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cw-text-header-title);
}

#solicitud-wrapper .solicitud-file-zone {
    border: 1px dashed var(--cw-border-input);
    border-radius: 14px;
    padding: 14px;
    background: var(--cw-bg-input);
    text-align: center;
}

#solicitud-wrapper .solicitud-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#solicitud-wrapper .solicitud-file-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 10px 18px;
    border-radius: 12px;
    border: none;
    background: var(--cw-primary-surface);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#solicitud-wrapper .solicitud-file-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

#solicitud-wrapper .solicitud-file-zone__hint {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cw-text-muted);
}

#solicitud-wrapper .solicitud-file-zone__status {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
}

#solicitud-wrapper .portal-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

#solicitud-wrapper .portal-preview-item {
    position: relative;
    border: 1px solid var(--cw-border-input);
    border-radius: 12px;
    padding: 8px;
    background: var(--cw-bg-card);
}

#solicitud-wrapper .portal-preview-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: var(--cw-bg-input);
    color: var(--accent-color);
    font-size: 1.5rem;
}

#solicitud-wrapper .portal-preview-item__size {
    font-size: 10px;
    color: var(--cw-text-muted);
    margin-top: 2px;
}

#solicitud-wrapper .portal-preview-item__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#solicitud-wrapper .portal-preview-item img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
}

#solicitud-wrapper .portal-preview-item .name {
    font-size: 11px;
    color: var(--cw-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#solicitud-wrapper .solicitud-panel__footer {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 16px;
    font-size: 11px;
    color: var(--cw-text-footer);
    border-top: 1px solid var(--cw-border-footer);
    background: var(--cw-bg-footer);
}

#solicitud-wrapper .portal-success-panel {
    display: none;
    text-align: center;
    padding: 3rem 1.5rem;
}

#solicitud-wrapper .portal-success-panel.is-visible {
    display: block;
}

#solicitud-wrapper #solicitudForm.is-hidden {
    display: none !important;
}

#solicitud-wrapper .portal-form-scroll .alert {
    margin-bottom: 16px;
    padding: 12px 14px;
}