:root {
            /* Tema Claro (Padrão) */
            --color-rotha-bg: #f1f5f9;
            --color-rotha-card: #ffffff;
            --color-rotha-sidebar: #ffffff;
            --color-text-primary: #0f172a;
            --color-text-secondary: #334155;
            --color-text-muted: #64748b;
            --color-text-dim: #94a3b8;
            --color-gray-600: #94a3b8;
            --color-border-light: #cbd5e1;
            --color-border-dark: #e2e8f0;
            --color-bg-dark: #f8fafc;
            /* Variantes com transparência (Tailwind não gera /opacidade para cores baseadas em var()) */
            --color-surface-overlay: rgba(241, 245, 249, 0.6);
            --color-header-overlay: rgba(248, 250, 252, 0.6);
        }
        .dark {
            /* Tema Escuro — alinhado à paleta "tech escuro premium" do index.html */
            --color-rotha-bg: #0a0c12;
            --color-rotha-card: #12151e;
            --color-rotha-sidebar: #07080d;
            --color-text-primary: #eef0f5;
            --color-text-secondary: #d1d5db;
            --color-text-muted: #9ca3af;
            --color-text-dim: #6b7280;
            --color-gray-600: #4b5563;
            --color-border-light: #2a2f3d;
            --color-border-dark: #1e222c;
            --color-bg-dark: #171b26;
            --color-surface-overlay: rgba(10, 12, 18, 0.6);
            --color-header-overlay: rgba(23, 27, 38, 0.6);
        }

        h1, h2, h3, h4 { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; }
        body { font-family: 'Inter', sans-serif; background-color: var(--color-rotha-bg); color: var(--color-text-primary); transition: background-color 0.3s, color 0.3s; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--color-rotha-bg); }
        ::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 3px; }
        .modal-overlay { background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
        .bg-surface-overlay { background-color: var(--color-surface-overlay); }
        .bg-header-overlay { background-color: var(--color-header-overlay); }
        /* Tailwind (via CDN) só gera variantes hover: para utilities que ele reconhece.
           bg-header-overlay/bg-surface-overlay são classes nossas, então a variante
           precisa ser escrita à mão para que "hover:bg-header-overlay" funcione. */
        .hover\:bg-header-overlay:hover { background-color: var(--color-header-overlay); }
        .hover\:bg-surface-overlay:hover { background-color: var(--color-surface-overlay); }
        .apexcharts-tooltip { background: var(--color-rotha-card) !important; border-color: var(--color-border-light) !important; color: var(--color-text-primary) !important; }
        .apexcharts-text { fill: var(--color-text-dim) !important; }
        .timeline-line { position: absolute; left: 24px; top: 40px; bottom: 0; width: 2px; background: var(--color-border-light); z-index: 0; }
        
        /* MODO ABA CHATWOOT: Força o widget a ocupar a área principal */
        body.chat-active .chatwoot-widget-frame {
            position: fixed !important;
            top: 5rem !important; /* Altura do Header (h-20 = 5rem) */
            bottom: 0 !important;
            right: 0 !important;
            left: 16rem !important; /* Largura do Sidebar (w-64 = 16rem) */
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            z-index: 50 !important;
        }
        @media (max-width: 768px) { body.chat-active .chatwoot-widget-frame { left: 0 !important; } }