/* ========================================================================= WebClinic — TEMA ESCURO ------------------------------------------------------------------------- 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 puxado para o verde-água da marca, NÃO preto. O fundo mais escuro da tela é #151d21; as superfícies sobem em degraus (#1d2830 → #24333a → #2e3f47) para dar profundidade sem contraste extremo. Carregar SEMPRE depois de ux.css. ========================================================================= */ /* ===== TOKENS ===== */ html[data-tema="escuro"] { /* Teal da marca clareado: em fundo escuro o tom original (#1a7385) não alcança contraste de leitura. */ --c-primary: #4fa3b8; --c-primary-lt: #63b6ca; --c-primary-ltr: #86ccdc; --c-primary-dk: #2f7a8e; --c-primary-dkr: #1d5b6b; --c-accent: #16a8c0; --c-accent-hover: #22bcd4; --c-hover-text: #93bfc4; --c-bg-body: #151d21; --c-bg-login: #151d21; --c-text: #dbe7ea; --c-text-muted: #91a7ad; --c-text-light: #f1f7f8; --c-border: #32474e; --c-row-hover: #2a3a40; /* Superfícies (só existem no tema escuro; no claro o branco do Bootstrap cumpre esse papel). */ --c-surface: #1d2830; /* cards, modais, painéis */ --c-surface-2: #24333a; /* card-header/footer, inputs, dropdowns */ --c-surface-3: #2e3f47; /* hover, elementos elevados */ --c-surface-inset: #121a1e; /* á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); /* Apelidos legados (ver ux.css): os fragmentos os usam como FUNDO em style inline, então aqui recebem os tons escuros — e não os --c-primary* clareados, que só servem como texto sobre fundo escuro. */ --clr-primary: #1e353d; --clr-primary-dk: #16272d; --clr-primary-lt: #2b4d58; --clr-surface: var(--c-surface-2); --clr-surface-dk: var(--c-border); 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: #101619; } html[data-tema="escuro"] ::-webkit-scrollbar-thumb { background: #3a4d55; } 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 / SIDENAV ===== 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 { background: linear-gradient(90deg, #14242a 0%, #1b333b 60%, #22414b 100%) !important; border-bottom: 1px solid rgba(255,255,255,.06); } html[data-tema="escuro"] #menuindex { background: linear-gradient(90deg, #14242a 0%, #1e4048 100%); } html[data-tema="escuro"] .rodape-site { background: #14242a; } html[data-tema="escuro"] .sidenav { background: linear-gradient(180deg, #1a2c33 0%, #131e23 100%); } /* `html[data-tema=escuro] a` (regra genérica acima) é mais específica que o `.sidenav a` do ux.css e pintava os itens de primeiro nível de teal claro — só os que NÃO abrem submenu, porque .nav-link.dropdown-toggle escapava. O resultado era metade do menu numa cor e metade noutra. */ html[data-tema="escuro"] .sidenav a { color: rgba(255,255,255,.88); } html[data-tema="escuro"] .sidenav a:hover { color: var(--c-text-light); } /* Painel de submenu dentro da barra lateral (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: var(--c-text-light); } html[data-tema="escuro"] .sidenav .dropdown-header { color: var(--c-primary-ltr); } html[data-tema="escuro"] .sidenav .dropdown-menu .dropdown-divider { border-color: rgba(255,255,255,.14); } html[data-tema="escuro"] .sidenav .dropdown-divider { border-color: rgba(255,255,255,.14); } /* ===== SUPERFÍCIES QUE USAM O TEAL 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: #24383f; 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, #1e353d 0%, #2b4d58 100%); } html[data-tema="escuro"] .custom-modal-content { background: linear-gradient(140deg, #1c3138 0%, #2d525e 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: #35798c; border-color: #35798c; color: #fff; } html[data-tema="escuro"] .btn-primary:hover { background: #3f8b9f; border-color: #3f8b9f; } html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-tema="escuro"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #35798c; border-color: #35798c; } 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(22,168,192,.22); } html[data-tema="escuro"] .form-control::placeholder { color: #6c848c; } html[data-tema="escuro"] .form-control[readonly], html[data-tema="escuro"] .form-control:disabled, html[data-tema="escuro"] .form-select:disabled { background-color: #192226; color: var(--c-text-muted); border-color: #2a3a41; } /* Seta do