/* ================================================================ NEXUS DARK THEME — nexus-dark-theme.css Ativa via: Persiste via localStorage('nexus-tema') ================================================================ */ /* ────────────────────────────────────────────────────────────── 1. RELATORIOS_NEXUS.HTML — override para tema CLARO (esta página tem dark como padrão — invertemos tudo em light) ────────────────────────────────────────────────────────────── */ :root, html[data-theme="light"] { /* Variáveis de Background — light mode */ --nexus-bg-card: white; --nexus-bg-subtle: #f1f5f9; --nexus-bg-border: #e2e8f0; /* Relatorios/portal (dark por padrão → override para light) */ --nexus-bg: #f8fafc; --nexus-card: #ffffff; --nexus-borda: #e2e8f0; --nexus-texto: #1e293b; --nexus-texto-muted: #64748b; --nexus-azul: #1E3A5F; --nexus-azul-claro: #2E5087; --nexus-ouro: #8B6914; /* dourado mais escuro p/ contraste no claro */ } html[data-theme="light"] body { background-color: #f8fafc; color: #1e293b; } /* Topbar do relatorios no claro — mantém institucional escuro com texto legível */ html[data-theme="light"] .nexus-topbar { background: linear-gradient(135deg, #0d2a51 0%, #1E3A5F 100%) !important; border-bottom-color: #8B6914 !important; } html[data-theme="light"] .nexus-topbar .brand { color: #C4972B !important; /* dourado — igual ao dark */ } html[data-theme="light"] .nexus-topbar .subtitle { color: #94a3b8 !important; } html[data-theme="light"] .btn-voltar { color: #94a3b8 !important; border-color: #334155 !important; } /* Page header — fundo escuro, texto legível */ html[data-theme="light"] .page-header { background: #f8fafc !important; } html[data-theme="light"] .page-header h1 { color: #1e293b !important; /* era #fff — invisível no fundo claro */ } html[data-theme="light"] .page-header p { color: #64748b !important; } /* Cards de módulo */ html[data-theme="light"] .modulo-card { background: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; } html[data-theme="light"] .modulo-card:hover { border-color: #8B6914 !important; box-shadow: 0 4px 20px rgba(139,105,20,0.15) !important; } html[data-theme="light"] .modulo-header { background: #f1f5f9 !important; border-bottom: 1px solid #e2e8f0 !important; } html[data-theme="light"] .modulo-header h3 { color: #1e293b !important; /* era #fff — invisível */ } html[data-theme="light"] .modulo-header p { color: #64748b !important; } html[data-theme="light"] .modulo-icon { color: #8B6914 !important; } /* Labels e selects dos módulos */ html[data-theme="light"] .nexus-label { color: #475569 !important; } html[data-theme="light"] .nexus-select, html[data-theme="light"] .nexus-input { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #1e293b !important; } html[data-theme="light"] .nexus-select option { background: #ffffff !important; color: #1e293b !important; } html[data-theme="light"] .nexus-select:focus, html[data-theme="light"] .nexus-input:focus { border-color: #8B6914 !important; box-shadow: 0 0 0 3px rgba(139,105,20,0.15) !important; } /* Botões de export no claro */ html[data-theme="light"] .btn-export { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .btn-csv:hover { background: rgba(16,185,129,0.12) !important; color: #059669 !important; } html[data-theme="light"] .btn-excel:hover { background: rgba(34,197,94,0.12) !important; color: #16a34a !important; } html[data-theme="light"] .btn-pdf:hover { background: rgba(239,68,68,0.12) !important; color: #dc2626 !important; } /* Tags de tipo */ html[data-theme="light"] .tipo-tag { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; } html[data-theme="light"] .tipo-tag.active { background: #8B6914 !important; border-color: #8B6914 !important; color: #ffffff !important; } /* Divider */ html[data-theme="light"] .nexus-divider { border-color: #e2e8f0 !important; } /* ────────────────────────────────────────────────────────────── 2. VARIÁVEIS GLOBAIS DARK — sobrescreve nexus-portal.css ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] { /* Portal CSS (nexus-portal.css) */ --primary: #60a5fa; --primary-dark: #3b82f6; --primary-light: #93c5fd; --secondary: #a78bfa; --accent: #22d3ee; --success: #34d399; --warning: #fbbf24; --error: #f87171; --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #1e293b; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --border-light: #1e293b; --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); /* Analítico / RH / Auditoria / Horas extras */ --nexus-primary: #1e293b; --nexus-secondary: #60a5fa; --cor-azul-institucional: #1e3a5f; --cor-cinza-claro: #1e293b; --cor-branco: #1e293b; --cor-texto-escuro: #f1f5f9; /* Variáveis de Background — dark mode */ --nexus-bg-card: #1e293b; --nexus-bg-subtle: #1a2744; --nexus-bg-border: #0f172a; /* Relatorios nexus (já é dark, manter) */ --nexus-bg: #0A1628; --nexus-card: #0F2040; --nexus-borda: #1E3A5F; --nexus-texto: #E2E8F0; --nexus-texto-muted: #94A3B8; --nexus-azul: #1E3A5F; --nexus-ouro: #C4972B; color-scheme: dark; } /* ────────────────────────────────────────────────────────────── 3. BODY & HTML BASE ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background-color: #0f172a !important; color: #f1f5f9 !important; } /* ────────────────────────────────────────────────────────────── 4. BOOTSTRAP OVERRIDES ────────────────────────────────────────────────────────────── */ /* Cards */ html[data-theme="dark"] .card { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .card-header { background-color: #0f172a !important; border-bottom-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .card-footer { background-color: #0f172a !important; border-top-color: #334155 !important; } html[data-theme="dark"] .card-body { color: #f1f5f9 !important; } /* Modais */ html[data-theme="dark"] .modal-content { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .modal-header { background-color: #0f172a !important; border-bottom-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .modal-header .modal-title { color: #f1f5f9 !important; } html[data-theme="dark"] .modal-body { color: #f1f5f9 !important; } html[data-theme="dark"] .modal-footer { background-color: #0f172a !important; border-top-color: #334155 !important; } html[data-theme="dark"] .btn-close { filter: invert(1); } /* Modais com header colorido não precisam de override de cor */ html[data-theme="dark"] .modal-header.bg-dark { background-color: #030712 !important; } html[data-theme="dark"] .modal-header.bg-warning { /* manter cor de aviso */ } /* Tabelas */ html[data-theme="dark"] .table { color: #f1f5f9 !important; border-color: #334155 !important; } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent !important; border-bottom-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.04) !important; color: #f1f5f9 !important; } html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(96, 165, 250, 0.08) !important; } html[data-theme="dark"] .table-light, html[data-theme="dark"] thead.table-light, html[data-theme="dark"] .table-light th, html[data-theme="dark"] .table-light td { background-color: #0f172a !important; color: #94a3b8 !important; border-color: #334155 !important; } html[data-theme="dark"] .table-dark { background-color: #030712 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td { border-color: #334155 !important; } html[data-theme="dark"] .table-responsive { border-color: #334155 !important; } /* Formulários */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: #0f172a !important; border-color: #3b82f6 !important; box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important; color: #f1f5f9 !important; } html[data-theme="dark"] .form-control::placeholder { color: #64748b !important; } html[data-theme="dark"] .form-label { color: #cbd5e1 !important; } html[data-theme="dark"] .form-text { color: #94a3b8 !important; } html[data-theme="dark"] .form-check-input { background-color: #334155 !important; border-color: #475569 !important; } html[data-theme="dark"] .form-check-input:checked { background-color: #3b82f6 !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .form-check-label { color: #e2e8f0 !important; } html[data-theme="dark"] .input-group-text { background-color: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } /* Dropdowns */ html[data-theme="dark"] .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .dropdown-item { color: #e2e8f0 !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .dropdown-divider { border-color: #334155 !important; } html[data-theme="dark"] .dropdown-header { color: #94a3b8 !important; } /* Badges */ html[data-theme="dark"] .badge.bg-light { background-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .badge.bg-secondary { background-color: #475569 !important; color: #f1f5f9 !important; } /* Botões outline */ html[data-theme="dark"] .btn-outline-secondary { color: #94a3b8 !important; border-color: #475569 !important; } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .btn-outline-primary { color: #60a5fa !important; border-color: #60a5fa !important; } html[data-theme="dark"] .btn-outline-primary:hover { background-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .btn-outline-danger { color: #f87171 !important; border-color: #f87171 !important; } html[data-theme="dark"] .btn-outline-success { color: #34d399 !important; border-color: #34d399 !important; } html[data-theme="dark"] .btn-outline-warning { color: #fbbf24 !important; border-color: #fbbf24 !important; } html[data-theme="dark"] .btn-light { background-color: #334155 !important; border-color: #475569 !important; color: #f1f5f9 !important; } /* Nav / Tabs */ html[data-theme="dark"] .nav-tabs { border-bottom-color: #334155 !important; } html[data-theme="dark"] .nav-tabs .nav-link { color: #94a3b8 !important; } html[data-theme="dark"] .nav-tabs .nav-link:hover { color: #f1f5f9 !important; border-color: #334155 #334155 transparent !important; } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: #1e293b !important; border-color: #334155 #334155 #1e293b !important; color: #60a5fa !important; } html[data-theme="dark"] .nav-pills .nav-link { color: #94a3b8 !important; } html[data-theme="dark"] .nav-pills .nav-link.active { background-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .tab-content { color: #f1f5f9 !important; } /* Alerts */ html[data-theme="dark"] .alert-info { background-color: #1e3a5f !important; border-color: #2563eb !important; color: #93c5fd !important; } html[data-theme="dark"] .alert-warning { background-color: #451a03 !important; border-color: #92400e !important; color: #fbbf24 !important; } html[data-theme="dark"] .alert-danger { background-color: #450a0a !important; border-color: #991b1b !important; color: #fca5a5 !important; } html[data-theme="dark"] .alert-success { background-color: #052e16 !important; border-color: #166534 !important; color: #86efac !important; } html[data-theme="dark"] .alert-secondary { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* Listas */ html[data-theme="dark"] .list-group-item { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .list-group-item:hover { background-color: #334155 !important; } html[data-theme="dark"] .list-group-item.active { background-color: #3b82f6 !important; border-color: #3b82f6 !important; } /* Progress */ html[data-theme="dark"] .progress { background-color: #334155 !important; } /* Text helpers */ html[data-theme="dark"] .text-muted { color: #94a3b8 !important; } html[data-theme="dark"] .text-dark { color: #e2e8f0 !important; } html[data-theme="dark"] .text-secondary { color: #94a3b8 !important; } html[data-theme="dark"] .text-body { color: #f1f5f9 !important; } /* Background helpers */ html[data-theme="dark"] .bg-white { background-color: #1e293b !important; color: #f1f5f9 !important; } html[data-theme="dark"] .bg-light { background-color: #1e293b !important; color: #f1f5f9 !important; } html[data-theme="dark"] .bg-secondary { background-color: #475569 !important; } /* Borders */ html[data-theme="dark"] .border { border-color: #334155 !important; } html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: #334155 !important; } /* Pagination */ html[data-theme="dark"] .page-item .page-link { background-color: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .page-item.active .page-link { background-color: #3b82f6 !important; border-color: #3b82f6 !important; color: #ffffff !important; } html[data-theme="dark"] .page-item.disabled .page-link { background-color: #0f172a !important; color: #475569 !important; } /* Accordion */ html[data-theme="dark"] .accordion-item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .accordion-button { background-color: #1e293b !important; color: #f1f5f9 !important; } html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #0f172a !important; color: #60a5fa !important; } html[data-theme="dark"] .accordion-button::after { filter: invert(1); } html[data-theme="dark"] .accordion-body { color: #e2e8f0 !important; } /* Tooltip */ html[data-theme="dark"] .tooltip-inner { background-color: #334155; } /* Scrollbar */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* hr */ html[data-theme="dark"] hr { border-color: #334155 !important; } /* small / figcaption */ html[data-theme="dark"] small, html[data-theme="dark"] .small { color: #94a3b8 !important; } /* ────────────────────────────────────────────────────────────── 5. HEADER DO PORTAL — portal-header / btn-icon ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .portal-header { background: linear-gradient(135deg, #0c1a2e 0%, #1a2d4a 100%) !important; border-bottom-color: #d1191f !important; } html[data-theme="dark"] .btn-icon { background: rgba(255, 255, 255, 0.05) !important; color: #94a3b8 !important; border-color: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .btn-icon:hover { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; } html[data-theme="dark"] .user-menu .btn-user { background: rgba(255,255,255,0.06) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .user-dropdown { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .user-dropdown a, html[data-theme="dark"] .user-dropdown li { color: #cbd5e1 !important; } html[data-theme="dark"] .user-dropdown a:hover { background: #334155 !important; color: #f1f5f9 !important; } /* Logos e ícones do header já têm cores próprias — não alterar */ /* ────────────────────────────────────────────────────────────── 6. PORTAL SEARCH / KPI-CARD / PAINEL-CARD ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .welcome-header { color: #f1f5f9 !important; } html[data-theme="dark"] .welcome-header h2 { color: #f1f5f9 !important; } html[data-theme="dark"] .welcome-header p { color: #94a3b8 !important; } html[data-theme="dark"] .kpi-card { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .kpi-card .kpi-label { color: #94a3b8 !important; } html[data-theme="dark"] .kpi-card .kpi-value { color: #f1f5f9 !important; } html[data-theme="dark"] .kpi-card:hover { background: #253347 !important; border-color: #3b82f6 !important; } html[data-theme="dark"] .painel-card { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .painel-card:hover { border-color: #3b82f6 !important; } html[data-theme="dark"] .painel-header h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .painel-header p { color: #94a3b8 !important; } html[data-theme="dark"] .painel-badge { background: rgba(59,130,246,0.15) !important; color: #60a5fa !important; } html[data-theme="dark"] .painel-link { color: #60a5fa !important; } /* Search */ html[data-theme="dark"] #search-input-nexus, html[data-theme="dark"] .search-input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; color: #f1f5f9 !important; } html[data-theme="dark"] #search-results, html[data-theme="dark"] .search-results { background: #1e293b !important; border-color: #334155 !important; } /* ────────────────────────────────────────────────────────────── 7. SIDEBAR (sidebar-institucional.css / AdminLTE) ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .main-sidebar { background-color: #0c1a2e !important; } html[data-theme="dark"] .main-sidebar .brand-link { background: rgba(255,255,255,0.04) !important; border-bottom-color: #1e3a5f !important; } html[data-theme="dark"] .main-sidebar .nav-link { color: #94a3b8 !important; } html[data-theme="dark"] .main-sidebar .nav-link:hover, html[data-theme="dark"] .main-sidebar .nav-link.active { background: rgba(59,130,246,0.12) !important; color: #60a5fa !important; } html[data-theme="dark"] .main-sidebar .nav-header { color: #475569 !important; } /* ────────────────────────────────────────────────────────────── 8. HEADERS INTERNOS (page-style headers de cada view) Dourado usado APENAS onde o relatorios usa: topbar brand, borda inferior, botão voltar, hover de card, foco de input. Títulos/textos continuam brancos/cinza como nos outros painéis. ────────────────────────────────────────────────────────────── */ /* ── nexus-topbar (só existe no relatorios — manter idêntico) ── */ html[data-theme="dark"] .nexus-topbar { background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%) !important; border-bottom: 2px solid #C4972B !important; } html[data-theme="dark"] .nexus-topbar .brand { color: #C4972B !important; } html[data-theme="dark"] .nexus-topbar .subtitle { color: #94A3B8 !important; } /* ── Header-section (analise_salarial, horas_extras, projecoes) ── */ /* Fundo escuro institucional — textos em branco/cinza, SEM dourado nos títulos */ html[data-theme="dark"] .header-section { background: linear-gradient(135deg, #0A1628 0%, #1E3A5F 100%) !important; border-bottom: 1px solid #1E3A5F !important; color: #E2E8F0 !important; } html[data-theme="dark"] .header-title, html[data-theme="dark"] .header-section h1, html[data-theme="dark"] .header-section h2, html[data-theme="dark"] .header-section h3, html[data-theme="dark"] .header-section h4, html[data-theme="dark"] .header-section h5, html[data-theme="dark"] .header-section h6 { color: #f1f5f9 !important; /* branco — igual ao original do relatorios (.page-header h1) */ text-shadow: none !important; } html[data-theme="dark"] .header-subtitle, html[data-theme="dark"] .header-section p { color: #94A3B8 !important; opacity: 1 !important; } /* Badges e botões no header — azul claro, não dourado */ html[data-theme="dark"] .header-section .badge { opacity: 0.85 !important; } html[data-theme="dark"] .header-actions .btn-custom { border-color: rgba(255,255,255,0.3) !important; color: #e2e8f0 !important; background: rgba(255,255,255,0.08) !important; } html[data-theme="dark"] .header-actions .btn-custom:hover { background: rgba(255,255,255,0.15) !important; } /* ── Page-header genérico (outros painéis) ── */ html[data-theme="dark"] .page-header { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2, html[data-theme="dark"] .page-header h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .page-header p, html[data-theme="dark"] .page-header .subtitle { color: #94A3B8 !important; } /* ── Seção de controles / filtros ── */ html[data-theme="dark"] .controls-section, html[data-theme="dark"] .filter-section, html[data-theme="dark"] .filtros-section { background: #0f172a !important; border-bottom-color: #1E3A5F !important; } /* ── Section / table headers ── */ html[data-theme="dark"] .section-header, html[data-theme="dark"] .table-section-header { background: #1e293b !important; color: #f1f5f9 !important; border-bottom: 1px solid #334155 !important; } /* ── Card headers (sem bg colorido) — texto branco simples ── */ html[data-theme="dark"] .card-header:not([class*="bg-"]) h3, html[data-theme="dark"] .card-header:not([class*="bg-"]) h4, html[data-theme="dark"] .card-header:not([class*="bg-"]) h5, html[data-theme="dark"] .card-header:not([class*="bg-"]) h6 { color: #f1f5f9 !important; } /* ── KPI cards (fundo escuro, valores em branco, labels em cinza) ── */ html[data-theme="dark"] .kpi-card-nexus, html[data-theme="dark"] .kpi-ativo, html[data-theme="dark"] .stat-card-nexus { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .kpi-value, html[data-theme="dark"] .stat-value, html[data-theme="dark"] .metric-value { color: #f1f5f9 !important; } html[data-theme="dark"] .kpi-title, html[data-theme="dark"] .kpi-label, html[data-theme="dark"] .stat-label, html[data-theme="dark"] .metric-label { color: #94A3B8 !important; } /* ────────────────────────────────────────────────────────────── 8b. BARRA DE ABAS (Auditoria Salarial / Auditoria Fiscal) ────────────────────────────────────────────────────────────── */ /* A barra tem background: #f1f5f9 inline — sobrescreve via classe injetada */ html[data-theme="dark"] .nexus-audit-tabs { background: #0f172a !important; border: 1px solid #1E3A5F !important; } /* Override inline style="#f1f5f9" na barra de abas */ html[data-theme="dark"] [style*="background: #f1f5f9"], html[data-theme="dark"] [style*="background:#f1f5f9"], html[data-theme="dark"] [style*="background-color: #f1f5f9"], html[data-theme="dark"] [style*="background-color:#f1f5f9"] { background: #0f172a !important; background-color: #0f172a !important; } /* Aba inativa */ html[data-theme="dark"] .nexus-audit-tabs .nav-link { color: #94a3b8 !important; background: transparent !important; } html[data-theme="dark"] .nexus-audit-tabs .nav-link:hover { color: #f1f5f9 !important; background: rgba(255, 255, 255, 0.06) !important; } /* Aba ativa — branca sobre escuro, sem dourado */ html[data-theme="dark"] .nexus-audit-tabs .nav-link.active { background: #1E3A5F !important; color: #ffffff !important; border: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; } /* ────────────────────────────────────────────────────────────── 8c. FILTER-CARD / CONTROLS-SECTION (analise_salarial, auditoria) ────────────────────────────────────────────────────────────── */ /* Variáveis CSS usadas por estas páginas */ html[data-theme="dark"] { --light-bg: #0f172a; --cor-branco: #1e293b; --cor-texto-escuro: #f1f5f9; --cor-cinza-claro: #1e293b; --cor-cinza-borda: #334155; } html[data-theme="dark"] .controls-section { background: #0f172a !important; border-bottom-color: #1E3A5F !important; } html[data-theme="dark"] .filter-card { background: #1e293b !important; border-color: #1E3A5F !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .filter-card::before { background: linear-gradient(90deg, #1E3A5F 0%, #0f172a 100%) !important; } html[data-theme="dark"] .filter-card h5, html[data-theme="dark"] .filter-card h5 i { color: #f1f5f9 !important; } html[data-theme="dark"] .filter-card label { color: #cbd5e1 !important; } /* Stats section */ html[data-theme="dark"] .stats-section { background: #0f172a !important; } html[data-theme="dark"] .stat-card { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .stat-card .stat-value { color: #f1f5f9 !important; } html[data-theme="dark"] .stat-card .stat-label { color: #94a3b8 !important; } html[data-theme="dark"] .stat-icon { color: #60a5fa !important; } /* Table section */ html[data-theme="dark"] .table-section { background: #0f172a !important; padding: 20px !important; } /* ────────────────────────────────────────────────────────────── 9. VISÃO GERAL / COMPARATIVO / PAINEL RH (inline styles) ────────────────────────────────────────────────────────────── */ /* Overrides para templates que usam bg-white, border, etc inline */ html[data-theme="dark"] [style*="background-color: white"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"] { background-color: #1e293b !important; color: #f1f5f9 !important; } html[data-theme="dark"] [style*="background-color: #f8f"], html[data-theme="dark"] [style*="background-color:#f8f"], html[data-theme="dark"] [style*="background: #f8f"] { background-color: #0f172a !important; color: #f1f5f9 !important; } html[data-theme="dark"] [style*="color: #333"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color: #2c"], html[data-theme="dark"] [style*="color:#2c"], html[data-theme="dark"] [style*="color: black"], html[data-theme="dark"] [style*="color:black"] { color: #e2e8f0 !important; } /* Headers com background escuro institucional — manter cor original */ html[data-theme="dark"] [style*="background: linear-gradient(135deg, #0d2a51"], html[data-theme="dark"] [style*="background: linear-gradient(135deg, #1E3A5F"], html[data-theme="dark"] [style*="background: linear-gradient(135deg, #1e3a5f"] { /* manter gradiente institucional — apenas garantir texto legível */ color: #ffffff !important; } /* ────────────────────────────────────────────────────────────── 10. AUDITORIA FISCAL — overrides específicos ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .anomalia-card, html[data-theme="dark"] .card-anomalia { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .stat-box, html[data-theme="dark"] .stats-box { background: #1e293b !important; color: #f1f5f9 !important; } /* DataTables */ html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: #0f172a !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_filter label, html[data-theme="dark"] .dataTables_wrapper .dataTables_length label { color: #94a3b8 !important; } /* ────────────────────────────────────────────────────────────── 11. PAINEL RH — overrides específicos ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .metric-card, html[data-theme="dark"] .stat-card { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .metric-value, html[data-theme="dark"] .stat-value { color: #f1f5f9 !important; } html[data-theme="dark"] .metric-label, html[data-theme="dark"] .stat-label { color: #94a3b8 !important; } /* ────────────────────────────────────────────────────────────── 12. MODAL DE CONFIGURAÇÕES (injetado pelo nexus-theme.js) ────────────────────────────────────────────────────────────── */ #nexus-config-modal .modal-content { border: none !important; } html[data-theme="dark"] #nexus-config-modal .modal-content { background: #1e293b !important; color: #f1f5f9 !important; } /* Switch de tema bonito */ .nexus-tema-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border, #e2e8f0); } html[data-theme="dark"] .nexus-tema-switch-row { border-bottom-color: #334155 !important; } .nexus-tema-icone { font-size: 1.4rem; transition: transform 0.4s; } /* ────────────────────────────────────────────────────────────── 13. BOTÃO FLUTUANTE DE CONFIGURAÇÕES (injetado pelo JS nas páginas sem botão próprio) ────────────────────────────────────────────────────────────── */ #nexus-fab-config { position: fixed; bottom: 24px; right: 24px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #0d2a51, #1c3d6e); color: #ffffff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.3); transition: all 0.2s ease; font-size: 18px; } #nexus-fab-config:hover { transform: scale(1.1) rotate(30deg); background: linear-gradient(135deg, #1c3d6e, #3b82f6); box-shadow: 0 6px 20px rgba(59,130,246,0.4); } html[data-theme="dark"] #nexus-fab-config { background: linear-gradient(135deg, #1e3a5f, #3b82f6) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important; } /* ────────────────────────────────────────────────────────────── 14. TRANSIÇÃO SUAVE DE TEMA ────────────────────────────────────────────────────────────── */ html.nexus-transitioning, html.nexus-transitioning *, html.nexus-transitioning *::before, html.nexus-transitioning *::after { transition: background-color 0.25s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; } /* ────────────────────────────────────────────────────────────── 15. TOASTS / NOTIFICAÇÕES ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .toast { background-color: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] .toast-header { background-color: #0f172a !important; border-bottom-color: #334155 !important; color: #f1f5f9 !important; } /* ────────────────────────────────────────────────────────────── 16. OVERRIDE AGRESSIVO — backgrounds brancos hardcoded Cobre seletores de todos os templates que usam background: white ────────────────────────────────────────────────────────────── */ /* Containers principais */ html[data-theme="dark"] .main-container, html[data-theme="dark"] .page-container, html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .dashboard-container, html[data-theme="dark"] .executivo-container, html[data-theme="dark"] .relatorio-container, html[data-theme="dark"] .painel-container { background: #0f172a !important; color: #f1f5f9 !important; } /* Stats / KPIs / Metric cards */ html[data-theme="dark"] .stat-card, html[data-theme="dark"] .stats-card, html[data-theme="dark"] .kpi-box, html[data-theme="dark"] .metric-box, html[data-theme="dark"] .info-card, html[data-theme="dark"] .summary-card, html[data-theme="dark"] .summary-box, html[data-theme="dark"] .resumo-card, html[data-theme="dark"] .detail-card, html[data-theme="dark"] .detalhe-card { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } /* Seções e painéis genéricos */ html[data-theme="dark"] .stats-section, html[data-theme="dark"] .section-panel, html[data-theme="dark"] .chart-section, html[data-theme="dark"] .table-section, html[data-theme="dark"] .data-section, html[data-theme="dark"] .content-section, html[data-theme="dark"] .results-section { background: #0f172a !important; color: #f1f5f9 !important; } /* Chart containers */ html[data-theme="dark"] .chart-container, html[data-theme="dark"] .grafico-container, html[data-theme="dark"] .chart-wrapper, html[data-theme="dark"] .chart-card { background: #1e293b !important; border-color: #334155 !important; } /* User dropdown / popups */ html[data-theme="dark"] .user-dropdown, html[data-theme="dark"] .dropdown-popup, html[data-theme="dark"] .popup-card { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } /* Badges / tags com fundo branco */ html[data-theme="dark"] .tipo-folha-badge, html[data-theme="dark"] .filter-badge, html[data-theme="dark"] .tag-item { background: #1e293b !important; border-color: #3b82f6 !important; color: #94a3b8 !important; } /* Body geral — garante que não fica branco */ html[data-theme="dark"] body { background: #0f172a !important; color: #f1f5f9 !important; } /* Variáveis CSS redefinidas para dark — garante que var(--cor-branco) etc. fiquem escuras */ html[data-theme="dark"] { --nexus-bg-card: #1e293b; --nexus-bg-subtle: #1a2744; --nexus-bg-border: #0f172a; --cor-branco: #1e293b; --cor-cinza-claro: #0f172a; --cor-texto-escuro: #f1f5f9; --light-bg: #0f172a; --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #1a2744; --bg-card: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; } /* Inline style overrides — captura background:white e #fff em style="" */ html[data-theme="dark"] [style*="background: white"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background-color: white"], html[data-theme="dark"] [style*="background-color:white"], html[data-theme="dark"] [style*="background-color: #fff"], html[data-theme="dark"] [style*="background-color:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background-color: #ffffff"], html[data-theme="dark"] [style*="background-color:#ffffff"], html[data-theme="dark"] [style*="background: #ffffff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background-color: #FFF"], html[data-theme="dark"] [style*="background-color:#FFF"], html[data-theme="dark"] [style*="background-color: #FFFFFF"], html[data-theme="dark"] [style*="background-color:#FFFFFF"] { background: #1e293b !important; background-color: #1e293b !important; color: #f1f5f9 !important; } /* Tabelas — linhas e cabeçalhos */ html[data-theme="dark"] table, html[data-theme="dark"] thead, html[data-theme="dark"] tbody, html[data-theme="dark"] tr, html[data-theme="dark"] td, html[data-theme="dark"] th { background-color: transparent !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] thead tr, html[data-theme="dark"] .table-header, html[data-theme="dark"] .thead-dark th, html[data-theme="dark"] .tabela-header { background: #1a2744 !important; color: #f1f5f9 !important; } html[data-theme="dark"] tbody tr:hover { background: #1e3a5f !important; } /* Inputs, selects e textareas */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; } html[data-theme="dark"] select option { background: #1e293b !important; color: #f1f5f9 !important; } /* Modais inline (criados via JS com style hardcoded) */ html[data-theme="dark"] [style*="background: rgba(0,0,0"] > div, html[data-theme="dark"] [style*="background:rgba(0,0,0"] > div { background: #1e293b !important; color: #f1f5f9 !important; } /* Painel RH — card-headers coloridos inline */ html[data-theme="dark"] .card-header[style*="background-color: white"], html[data-theme="dark"] .card-header[style*="background-color:#fff"], html[data-theme="dark"] .card-header[style*="background-color: #fff"] { background: #1a2744 !important; color: #f1f5f9 !important; } /* Textos que ficam pretos em fundo escuro */ html[data-theme="dark"] .text-dark, html[data-theme="dark"] [style*="color: #1e293b"], html[data-theme="dark"] [style*="color: #2c3e50"], html[data-theme="dark"] [style*="color: #333"], html[data-theme="dark"] [style*="color: black"], html[data-theme="dark"] [style*="color:black"], html[data-theme="dark"] [style*="color:#333"], html[data-theme="dark"] [style*="color: #000"], html[data-theme="dark"] [style*="color:#000"] { color: #f1f5f9 !important; } /* ════════════════════════════════════════════════════════════════════ NEXUS HEADER PADRÃO INSTITUCIONAL — _header.html Centralizado aqui para eliminar CSS duplicado nos templates ════════════════════════════════════════════════════════════════════ */ /* ── Estrutura ─────────────────────────────────────────────────── */ .nexus-header { background: rgba(255,255,255,0.98); border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15,23,42,0.08); z-index: 1040; position: sticky; top: 0; } .nexus-header-inner { padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 100%; } /* ── Brand ─────────────────────────────────────────────────────── */ .nexus-brand { display: flex; align-items: center; gap: 0.85rem; } .nexus-btn-back { width: 40px; height: 40px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.25s ease; flex-shrink: 0; } .nexus-btn-back:hover { background: #eff6ff; border-color: #3b82f6; color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,0.15); transform: translateX(-2px); } .nexus-brand-icon { width: 36px; height: 36px; color: #3b82f6; flex-shrink: 0; } .nexus-brand-text { display: flex; flex-direction: column; line-height: 1; } .nexus-brand-name { font-size: 1.35rem; font-weight: 800; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -0.04em; } .nexus-brand-sub { font-size: 0.68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; } /* ── Ações ─────────────────────────────────────────────────────── */ .nexus-header-actions { display: flex; align-items: center; gap: 0.6rem; } .nexus-btn-icon { position: relative; width: 40px; height: 40px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; color: #475569; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; text-decoration: none; flex-shrink: 0; } .nexus-btn-icon:hover { background: #eff6ff; border-color: #3b82f6; color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,0.15); } .nexus-notif-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff; font-size: 0.65rem; font-weight: 700; padding: 2px 5px; border-radius: 10px; border: 2px solid #fff; min-width: 18px; text-align: center; line-height: 1.2; } /* ── Botão usuário ─────────────────────────────────────────────── */ .nexus-user-menu { position: relative; } .nexus-btn-user { display: flex; align-items: center; gap: 0.6rem; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 0.45rem 0.9rem; color: #1e293b; cursor: pointer; transition: all 0.25s ease; font-size: 0.9rem; } .nexus-btn-user:hover { background: #eff6ff; border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59,130,246,0.15); } .nexus-user-avatar { width: 28px; height: 28px; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .nexus-user-name { font-weight: 600; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .nexus-chevron { color: #94a3b8; flex-shrink: 0; transition: transform 0.25s ease; } .nexus-btn-user[aria-expanded="true"] .nexus-chevron { transform: rotate(180deg); } /* ── Dropdown usuário ──────────────────────────────────────────── */ .nexus-user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; min-width: 220px; padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.25s ease; box-shadow: 0 8px 24px rgba(15,23,42,0.14); z-index: 1050; } .nexus-user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .nexus-dropdown-header { padding: 0.6rem 0.9rem; display: flex; flex-direction: column; } .nexus-dropdown-name { font-weight: 700; font-size: 0.9rem; color: #1e293b; } .nexus-dropdown-email { font-size: 0.78rem; color: #94a3b8; margin-top: 2px; } .nexus-dropdown-divider { border-top: 1px solid #f1f5f9; margin: 0.35rem 0; } .nexus-dropdown-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 0.9rem; color: #475569; text-decoration: none; border-radius: 8px; transition: all 0.2s ease; font-size: 0.88rem; } .nexus-dropdown-item:hover { background: #f8fafc; color: #1e293b; } .nexus-dropdown-logout { color: #ef4444 !important; } .nexus-dropdown-logout:hover { background: rgba(239,68,68,0.08) !important; } /* ── Painel de notificações ────────────────────────────────────── */ .nexus-notif-panel { position: fixed; top: 64px; right: 1rem; width: 360px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 12px 32px rgba(15,23,42,0.16); z-index: 1045; overflow: hidden; } .nexus-notif-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem 0.8rem; font-weight: 700; font-size: 0.95rem; color: #1e293b; border-bottom: 1px solid #f1f5f9; } .nexus-notif-close { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; border-radius: 6px; line-height: 1; transition: all 0.2s; } .nexus-notif-close:hover { background: #f1f5f9; color: #ef4444; } .nexus-notif-list { max-height: 340px; overflow-y: auto; } .nexus-notif-loading, .nexus-notif-empty { padding: 2rem; text-align: center; color: #94a3b8; font-size: 0.88rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .nexus-notif-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid #f8fafc; transition: background 0.2s; position: relative; } .nexus-notif-item:hover { background: #fafbff; } .nexus-notif-unread { background: #f0f7ff; } .nexus-notif-unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3b82f6; border-radius: 0 2px 2px 0; } .nexus-notif-tipo-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; } .nexus-notif-body { flex: 1; min-width: 0; } .nexus-notif-msg { margin: 0; font-size: 0.85rem; color: #334155; line-height: 1.4; } .nexus-notif-time { font-size: 0.75rem; color: #94a3b8; } .nexus-notif-ler { background: none; border: 1px solid #e2e8f0; color: #94a3b8; border-radius: 6px; padding: 2px 6px; font-size: 0.75rem; cursor: pointer; flex-shrink: 0; transition: all 0.2s; } .nexus-notif-ler:hover { background: #f0fdf4; border-color: #22c55e; color: #22c55e; } .nexus-notif-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.2rem; border-top: 1px solid #f1f5f9; font-size: 0.82rem; } .nexus-notif-footer a { color: #3b82f6; text-decoration: none; } .nexus-notif-footer a:hover { text-decoration: underline; } .nexus-notif-marcar-btn { background: none; border: none; color: #64748b; cursor: pointer; font-size: 0.82rem; padding: 0; transition: color 0.2s; } .nexus-notif-marcar-btn:hover { color: #3b82f6; } /* ── Responsivo ────────────────────────────────────────────────── */ @media (max-width: 640px) { .nexus-user-name { display: none; } .nexus-brand-sub { display: none; } .nexus-header-inner { padding: 0.6rem 1rem; } .nexus-notif-panel { width: calc(100vw - 2rem); right: 1rem; } } /* ════ DARK THEME ══════════════════════════════════════════════════ */ html[data-theme="dark"] .nexus-header { background: rgba(15,23,42,0.98); border-bottom-color: #1e3a5f; box-shadow: 0 2px 8px rgba(0,0,0,0.4); } html[data-theme="dark"] .nexus-btn-back, html[data-theme="dark"] .nexus-btn-icon, html[data-theme="dark"] .nexus-btn-user { background: #1e293b; border-color: #1e3a5f; color: #94a3b8; } html[data-theme="dark"] .nexus-btn-back:hover, html[data-theme="dark"] .nexus-btn-icon:hover, html[data-theme="dark"] .nexus-btn-user:hover { background: #1e3a5f; border-color: #3b82f6; color: #60a5fa; } html[data-theme="dark"] .nexus-btn-user { color: #e2e8f0; } html[data-theme="dark"] .nexus-notif-badge { border-color: #0f172a; } html[data-theme="dark"] .nexus-user-dropdown { background: #1e293b; border-color: #1e3a5f; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } html[data-theme="dark"] .nexus-dropdown-name { color: #f1f5f9; } html[data-theme="dark"] .nexus-dropdown-divider { border-color: #1e3a5f; } html[data-theme="dark"] .nexus-dropdown-item { color: #94a3b8; } html[data-theme="dark"] .nexus-dropdown-item:hover { background: #0f172a; color: #f1f5f9; } html[data-theme="dark"] .nexus-notif-panel { background: #1e293b; border-color: #1e3a5f; box-shadow: 0 12px 32px rgba(0,0,0,0.5); } html[data-theme="dark"] .nexus-notif-panel-header { color: #f1f5f9; border-color: #1e3a5f; } html[data-theme="dark"] .nexus-notif-item { border-color: #172039; } html[data-theme="dark"] .nexus-notif-item:hover { background: #172039; } html[data-theme="dark"] .nexus-notif-unread { background: #0d2245; } html[data-theme="dark"] .nexus-notif-msg { color: #cbd5e1; } html[data-theme="dark"] .nexus-notif-footer { border-color: #1e3a5f; } html[data-theme="dark"] .nexus-brand-sub { color: #475569; } /* ══════════════════════════════════════════════════════════ NEXUS LOADING OVERLAY — padrão global Uso:
...inner...
JS: show → el.classList.add('ativo') | hide → el.classList.remove('ativo') ou: el.style.display = 'flex' / 'none' ══════════════════════════════════════════════════════════ */ .nexus-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(10, 22, 40, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; flex-direction: column; gap: 1.25rem; } .nexus-overlay.ativo, .nexus-overlay.show { display: flex; } /* ring */ .nexus-overlay-ring { width: 64px; height: 64px; border: 5px solid rgba(96, 165, 250, 0.2); border-top-color: #60a5fa; border-radius: 50%; animation: nexus-overlay-spin 0.8s linear infinite; } @keyframes nexus-overlay-spin { to { transform: rotate(360deg); } } /* dots */ .nexus-overlay-dots { display: flex; gap: 8px; } .nexus-overlay-dots span { width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; animation: nexus-overlay-dot 1.2s ease-in-out infinite; } .nexus-overlay-dots span:nth-child(2) { animation-delay: 0.2s; } .nexus-overlay-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes nexus-overlay-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* text */ .nexus-overlay-text { color: #cbd5e1; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.5px; }