/* ========================================================================= TEMA ESCURO — nfe-portal ------------------------------------------------------------------------- Ativado por `data-tema="escuro"` no (ver js_system/tema.js). Sem esse atributo nada aqui se aplica e o tema claro de ux.css continua valendo — este arquivo é puramente aditivo. Mesma paleta do webgescomercial, para os dois sistemas parecerem um só: cinza-azulado escuro (NÃO preto), fundo #161d25 e superfícies em degraus (#1e2731 → #26313d → #303c4a). O portal é bem mais simples que o webgescomercial: não tem DataTables, não tem Chart.js e quase não tem cor fixa em atributo `style` — por isso este arquivo é menor que o de lá. Carregar SEMPRE depois de ux.css (e de idx.css, na tela de login). ========================================================================= */ /* ===== TOKENS ===== O ux.css do portal já centraliza tudo em variáveis, então redefini-las resolve a maior parte do tema; o resto são casos em que a variável é usada como FUNDO e não como texto. */ html[data-tema="escuro"] { /* Azuis da marca clareados: em fundo escuro o tom original (#305272) não alcança contraste de leitura. */ --c-primary: #5b8fb0; --c-primary-lt: #6ea3c4; --c-primary-ltr: #8bbcd8; --c-primary-dk: #3d6a8a; --c-primary-dkr: #2c4e70; --c-accent: #1d97a7; --c-accent-hover: #25aebf; --c-hover-text: #93bfc4; --c-bg-body: #161d25; --c-bg-login: #161d25; --c-text: #dce4ee; --c-text-muted: #93a4b8; --c-text-light: #f1f5f9; --c-border: #35455a; --c-row-hover: #2c3947; /* Superfícies (só existem no tema escuro; no claro o branco cumpre o papel) */ --c-surface: #1e2731; /* cards, modais, painéis */ --c-surface-2: #26313d; /* header/footer de card, inputs */ --c-surface-3: #303c4a; /* hover, elementos elevados */ --c-surface-inset: #131920; /* áreas rebaixadas */ /* Sombras precisam ser mais densas para aparecer sobre fundo escuro. */ --shadow-sm: 0 1px 4px rgba(0,0,0,.40); --shadow-md: 0 3px 10px rgba(0,0,0,.50); --shadow-lg: 0 6px 24px rgba(0,0,0,.60); color-scheme: dark; /* controles nativos (scroll, date picker, select) */ } /* ===== BASE ===== */ html[data-tema="escuro"] body { background-color: var(--c-bg-body) !important; /* ux.css usa !important */ color: var(--c-text); } html[data-tema="escuro"] ::-webkit-scrollbar-track { background: #12181f; } html[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #3d4d60; } html[data-tema="escuro"] ::-webkit-scrollbar-thumb:hover { background: var(--c-primary); } html[data-tema="escuro"] hr { border-color: var(--c-border); opacity: 1; } html[data-tema="escuro"] a { color: var(--c-primary-lt); } html[data-tema="escuro"] a:hover { color: var(--c-primary-ltr); } /* ===== TOPBAR / SIDEBAR ===== Já são escuras no tema claro; aqui descem mais um degrau para não ficarem *mais claras* que o conteúdo. */ html[data-tema="escuro"] .portal-navbar, html[data-tema="escuro"] #portalTopbar .navbar, html[data-tema="escuro"] #menuindex { background: linear-gradient(135deg, #1b2733 0%, #2a3f52 100%) !important; border-bottom: 1px solid rgba(255,255,255,.06); } html[data-tema="escuro"] .portal-navbar .user-chip { background: rgba(255,255,255,.10); } html[data-tema="escuro"] .portal-navbar .user-chip:hover { background: rgba(255,255,255,.20); } html[data-tema="escuro"] .portal-navbar #toggleSidebar { background: rgba(255,255,255,.10); } html[data-tema="escuro"] .portal-navbar #toggleSidebar:hover { background: rgba(255,255,255,.22); } html[data-tema="escuro"] .portal-logo { box-shadow: 0 1px 4px rgba(0,0,0,.5); } html[data-tema="escuro"] .sidenav { background: linear-gradient(180deg, #1c2733 0%, #141c25 100%); } html[data-tema="escuro"] .sidenav .dropdown-divider { border-color: rgba(255,255,255,.14); } /* ===== SUPERFÍCIES QUE USAM O AZUL DA MARCA COMO FUNDO ===== Os tokens --c-primary* foram clareados acima para servirem de TEXTO sobre fundo escuro. Onde o ux.css os usa como FUNDO, o resultado ficaria claro demais — estes blocos devolvem o tom escuro. */ html[data-tema="escuro"] .table thead th, html[data-tema="escuro"] .table > thead.table-dark th { background: #263748; color: var(--c-text); } html[data-tema="escuro"] .modal-header { background: #223345; } html[data-tema="escuro"] .btn-primary { background: #3f739a; border-color: #3f739a; color: #fff; } html[data-tema="escuro"] .btn-primary:hover { background: #4b83ad; border-color: #4b83ad; } /* ===== CARDS ===== */ html[data-tema="escuro"] .card { background-color: var(--c-surface); border-color: var(--c-border); color: var(--c-text); } html[data-tema="escuro"] .card-header { background: var(--c-surface-2); border-bottom-color: var(--c-border); color: var(--c-primary-ltr); } html[data-tema="escuro"] .card-footer { background: var(--c-surface-2); border-top-color: var(--c-border); } html[data-tema="escuro"] .card-title { color: var(--c-primary-ltr); } /* ===== FORMULÁRIOS ===== */ html[data-tema="escuro"] .form-control, html[data-tema="escuro"] .form-select, html[data-tema="escuro"] textarea.form-control { background-color: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text); } html[data-tema="escuro"] .form-control:focus, html[data-tema="escuro"] .form-select:focus { background-color: var(--c-surface-2); border-color: var(--c-accent); color: var(--c-text); box-shadow: 0 0 0 3px rgba(29,151,167,.22); } html[data-tema="escuro"] .form-control::placeholder { color: #6d7f93; } html[data-tema="escuro"] .form-control[readonly], html[data-tema="escuro"] .form-control:disabled, html[data-tema="escuro"] .form-select:disabled { background-color: #1a222b; color: var(--c-text-muted); border-color: #2c3846; } /* Seta do