/* ========================================================================= TEMA ESCURO — webgescomercial ------------------------------------------------------------------------- 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. Paleta: cinza-azulado escuro (mesma família do azul da marca), NÃO preto. O fundo mais escuro da tela é #161d25; superfícies sobem em degraus (#1e2731 → #26313d → #303c4a) para dar profundidade sem contraste extremo. Carregar SEMPRE depois de ux.css. ========================================================================= */ /* ===== TOKENS ===== */ 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 do Bootstrap cumpre esse papel). */ --c-surface: #1e2731; /* cards, modais, painéis */ --c-surface-2: #26313d; /* card-header/footer, inputs, dropdowns */ --c-surface-3: #303c4a; /* hover, elementos elevados */ --c-surface-inset: #131920; /* áreas rebaixadas (listas roláveis) */ /* 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); 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); } /* ===== NAVBAR / SIDEBAR ===== Já são escuras no tema claro; aqui só descem mais um degrau para não ficarem *mais claras* que o conteúdo. */ html[data-tema="escuro"] #navbarmenuprincipal, 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"] .sidenav { background: linear-gradient(180deg, #1c2733 0%, #141c25 100%); } /* Painel de submenu dentro da sidebar (claro no tema padrão). */ html[data-tema="escuro"] .sidenav .dropdown-menu { background: var(--c-surface-3); box-shadow: var(--shadow-md); } html[data-tema="escuro"] .sidenav .dropdown-menu a { color: #cfdae6; } html[data-tema="escuro"] .sidenav .dropdown-menu a:hover { background: rgba(255,255,255,.10); color: #fff; } html[data-tema="escuro"] .sidenav .dropdown-header { color: var(--c-primary-ltr); } 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 ux.css os usa como FUNDO, o resultado ficaria claro demais — estes blocos devolvem o tom escuro. */ html[data-tema="escuro"] .table thead th { background: #263748; color: var(--c-text); } html[data-tema="escuro"] .table-bordered thead th { border-color: rgba(255,255,255,.08); } html[data-tema="escuro"] .rec-card-header { background: linear-gradient(90deg, #223345 0%, #2f4a63 100%); } html[data-tema="escuro"] .custom-modal-content { background: linear-gradient(140deg, #1f3044 0%, #33526c 100%); } html[data-tema="escuro"] .custom-close-btn { background: rgba(255,255,255,.14); } html[data-tema="escuro"] .custom-close-btn:hover { background: rgba(255,255,255,.26); } 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; } html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #3f739a; border-color: #3f739a; } html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--c-surface-3); color: var(--c-primary-ltr) !important; } /* Aba ativa: --c-primary-dk como texto ficaria apagado sobre o fundo escuro. */ html[data-tema="escuro"] #tabregister .nav-link.active { color: var(--c-primary-ltr); } html[data-tema="escuro"] #tabregister .nav-link:hover { border-bottom-color: var(--c-border); } /* ===== 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"] #ConteudoCadastro { background-color: var(--c-bg-body); } /* ===== 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