/* ══════════════════════════════════════════════════════════════ MODO NOTURNO — overrides aplicados quando Abordagem pragmática: o sistema não usa variáveis CSS em lugar nenhum, então em vez de reescrever ~20 arquivos CSS, este arquivo sobrescreve só as áreas de maior tráfego visual (estrutura do layout, cards, tabelas, formulários, alertas, modais, hovers). Carregado por último (offsetSetStylesheet index 20, com cache busting), então as regras aqui já vencem por ordem — o seletor de atributo [data-theme="dark"] garante especificidade extra como reforço. PALETA: os tokens abaixo (--dk-*) são a fonte única de verdade das cores do modo escuro. Qualquer ajuste de tom deve mudar o token, não os valores individuais espalhados pelo arquivo. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* Superfícies, do fundo da página à mais elevada */ --dk-bg: #16171a; --dk-surface: #1c1e21; --dk-card: #232529; --dk-card-hi: #2b2e33; --dk-card-hi-2: #33363c; --dk-border: #34373f; --dk-border-hi: #464a54; /* Texto */ --dk-text: #edeef0; --dk-text-2: #c6c9d1; --dk-text-muted: #93979f; --dk-text-faint: #5e626c; /* Acento (mesmo vermelho da marca, ajustado pra ler bem no escuro) */ --dk-accent: #ff6b60; --dk-accent-soft: rgba(230,51,41,.16); --dk-accent-bord: #5a3330; } [data-theme="dark"] body { background: var(--dk-bg); color: var(--dk-text); } /* #topo já é escuro (#111) por padrão — não precisa de override. #menu (sidebar) é branco por padrão — precisa escurecer. */ [data-theme="dark"] #menu { background: var(--dk-surface); border-right-color: var(--dk-border); } [data-theme="dark"] #menu .menu-section-title { color: var(--dk-text-faint); } [data-theme="dark"] #menu a, [data-theme="dark"] #menu .menu-link { color: var(--dk-text-2); } [data-theme="dark"] #menu ul li a:hover, [data-theme="dark"] #menu a:hover, [data-theme="dark"] #menu .menu-link:hover { background: var(--dk-accent-soft); color: var(--dk-accent); border-left-color: var(--dk-accent-bord); } [data-theme="dark"] #menu ul li a:hover i, [data-theme="dark"] #menu a:hover i { color: var(--dk-accent); } [data-theme="dark"] #menu ul li a i { color: var(--dk-text-faint); } [data-theme="dark"] #menu ul li.ativo a { background: var(--dk-accent-soft); color: var(--dk-accent); border-left-color: var(--dk-accent); } [data-theme="dark"] #menu ul li.ativo a i { color: var(--dk-accent); } [data-theme="dark"] #menu .menu-divider { background: var(--dk-border-hi); } [data-theme="dark"] #btn-suporte, [data-theme="dark"] #btn-tema-menu { background: var(--dk-card); border-color: var(--dk-border); color: var(--dk-text-2); } [data-theme="dark"] #btn-tema-menu:hover { background: var(--dk-accent-soft); color: var(--dk-accent); border-color: var(--dk-accent-bord); } [data-theme="dark"] #btn-tema-menu:hover i { color: var(--dk-accent); } [data-theme="dark"] #menu-versao { background: var(--dk-card); border-color: var(--dk-border); color: var(--dk-text-muted); } [data-theme="dark"] #menu-versao:hover { background: var(--dk-accent-soft); color: var(--dk-accent); border-color: var(--dk-accent-bord); } [data-theme="dark"] #menu-footer { border-top-color: var(--dk-border); } [data-theme="dark"] .logo-inova-light { display: none !important; } /* A logo clara (inovaccio-black.png) tem margem transparente generosa em volta da marca — na prática ocupa só ~53px de largura visível a 22px de altura de canvas. A logo branca já vem recortada sem essa margem, então para ficar do mesmo tamanho aparente ela precisa ser fixada pela LARGURA (não altura). */ [data-theme="dark"] .logo-inova-dark { display: inline-block !important; width: 52px !important; height: auto !important; } /* Sub-barra mobile */ [data-theme="dark"] #topo-sub { background: var(--dk-surface); border-bottom-color: var(--dk-border); } [data-theme="dark"] .ts-nome { color: var(--dk-text); } [data-theme="dark"] #topo-sub .ts-sair:hover { background: var(--dk-card-hi); } /* Cabeçalho do menu mobile (drawer) */ [data-theme="dark"] #menu-user-header { background: var(--dk-surface); border-bottom-color: var(--dk-border); } [data-theme="dark"] #menu-user-header .muh-nome { color: var(--dk-text); } [data-theme="dark"] #menu-user-header .muh-role { color: var(--dk-text-muted); } /* ── Cards / painéis genéricos (admin.css, dashboard.css) ── */ [data-theme="dark"] .card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .chart-card, [data-theme="dark"] .com-detalhe, [data-theme="dark"] .com-chat, [data-theme="dark"] .com-status-panel, [data-theme="dark"] .modal-box { background: var(--dk-card); border-color: var(--dk-border); box-shadow: 0 1px 4px rgba(0,0,0,.4); } /* .card recebe !important: várias telas (dashboard) têm style="border:1px solid #f0f0f0;background:#fff" inline no próprio elemento .card, que sempre vence sobre uma classe externa sem !important. */ [data-theme="dark"] .card { background: var(--dk-card) !important; border-color: var(--dk-border) !important; } [data-theme="dark"] .card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.5); } [data-theme="dark"] .kpi-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.55); } [data-theme="dark"] .com-descricao { background: var(--dk-card-hi); color: var(--dk-text-2); } [data-theme="dark"] .card-header, [data-theme="dark"] .card-header-clean, [data-theme="dark"] .com-status-panel .panel-title { border-bottom-color: var(--dk-border-hi); } /* Seletor de franquias (pills) em comunicados/ver — cor via style inline, sem classe própria. Distingue pill ativa (borda/texto #e63329 no inline) da inativa pelo próprio valor que já vem no style. */ [data-theme="dark"] .com-status-panel a[style*="border-radius:999px"] { background: var(--dk-card-hi) !important; border-color: var(--dk-border-hi) !important; color: var(--dk-text-2) !important; } [data-theme="dark"] .com-status-panel a[style*="border-radius:999px"][style*="#e63329"] { background: var(--dk-accent-soft) !important; border-color: var(--dk-accent-bord) !important; color: var(--dk-accent) !important; } [data-theme="dark"] .pill-pendente-dot { border-color: var(--dk-card-hi) !important; } [data-theme="dark"] .kpi-number, [data-theme="dark"] .card-title, [data-theme="dark"] .card-title-sm, [data-theme="dark"] .chart-title { color: var(--dk-text); } [data-theme="dark"] .kpi-label, [data-theme="dark"] .kpi-desc { color: var(--dk-text-muted); } [data-theme="dark"] .kpi-divider { background: var(--dk-border-hi); } [data-theme="dark"] .dash-item { border-color: var(--dk-border-hi); } [data-theme="dark"] .dash-item-title, [data-theme="dark"] .dash-item-title a { color: var(--dk-text-2); } [data-theme="dark"] .dash-item-title a:hover { color: var(--dk-accent); } [data-theme="dark"] .dash-item-sub { color: var(--dk-text-muted); } [data-theme="dark"] .kpi-link:hover, [data-theme="dark"] .card-link-sm:hover { color: var(--dk-accent); } [data-theme="dark"] .prog-wrap { background: var(--dk-border); } /* Trilhos de barra de progresso com estilo inline (mensagem, materiais- apoio, dashboards — mesmo papel do .prog-wrap acima, só que sem classe) */ [data-theme="dark"] [style*="background:#f2f2f2;border-radius"], [data-theme="dark"] [style*="background:#f0f0f0;border-radius"], [data-theme="dark"] [style*="background:#e8f5e9;border-radius"] { background: var(--dk-border) !important; } /* ── Título de página (todas as telas — Comunicados, Boletos, Materiais, Usuários, Franqueados, Logs, Perfil, etc.) ── */ [data-theme="dark"] .page-header .page-title h1 { color: var(--dk-text); } [data-theme="dark"] .page-header .page-title span { color: var(--dk-text-muted); } /* Dashboard tem um

próprio fora do padrão .page-header */ [data-theme="dark"] h1[style*="color:#111"] { color: var(--dk-text) !important; } /* ── Tabelas ── */ [data-theme="dark"] .data-table thead th { color: var(--dk-text-muted); border-bottom-color: var(--dk-border-hi); background: transparent; } [data-theme="dark"] .data-table tbody td { border-bottom-color: var(--dk-border-hi); color: var(--dk-text-2); } [data-theme="dark"] .data-table tbody tr:hover td { background: var(--dk-card-hi); } [data-theme="dark"] .data-table td code { background: var(--dk-card-hi) !important; color: var(--dk-text); } [data-theme="dark"] .table-footer { color: var(--dk-text-muted); } /* ── Botões / formulários ── */ [data-theme="dark"] .btn-secondary { background: var(--dk-card-hi); color: var(--dk-text-2); border-color: var(--dk-border-hi); } [data-theme="dark"] .btn-secondary:hover { background: var(--dk-card-hi-2); } [data-theme="dark"] .btn-danger { background: var(--dk-accent-soft); color: #ff8a80; } [data-theme="dark"] .btn-danger:hover { background: rgba(230,51,41,.26); } [data-theme="dark"] .form-group label { color: var(--dk-text-muted); } [data-theme="dark"] .form-group .hint { color: var(--dk-text-faint); } [data-theme="dark"] .form-card { background: var(--dk-card) !important; } [data-theme="dark"] .form-divider { background: var(--dk-border); } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--dk-surface); border-color: var(--dk-border-hi); color: var(--dk-text); /* Sem isso, o navegador continua desenhando os ícones nativos do campo (calendário de type="date"/"month", relógio de type="time", setas de type="number", seta do