/* ============================================================ ENFERMAGEM - Temas e Paletas de Cor Aplicado via data-accent (cor) e data-theme (claro/escuro) no elemento ============================================================ */ /* ---- default (azul royal) ---- */ :root { --brand: #1565c0; --brand-dark: #0d47a1; --brand-light: #4484cd; --sidebar-1: #0d47a1; --sidebar-2: #0a3880; --accent-rgb: 21,101,192; } /* ---- azul ---- */ [data-accent="azul"] { --brand: #04b2d9; --brand-dark: #0386a3; --brand-light: #68d1e8; --sidebar-1: #038eb3; --sidebar-2: #016a8b; --accent-rgb: 4,178,217; } /* ---- azul royal ---- */ [data-accent="azul-royal"] { --brand: #1565c0; --brand-dark: #0d47a1; --brand-light: #4484cd; --sidebar-1: #0d47a1; --sidebar-2: #0a3880; --accent-rgb: 21,101,192; } /* ---- preto ---- */ [data-accent="preto"] { --brand: #1a1a2e; --brand-dark: #10101d; --brand-light: #767682; --sidebar-1: #111827; --sidebar-2: #0d121d; --accent-rgb: 26,26,46; } /* ---- grafite ---- */ [data-accent="grafite"] { --brand: #37474f; --brand-dark: #29353b; --brand-light: #879195; --sidebar-1: #263238; --sidebar-2: #1c262b; --accent-rgb: 55,71,79; } /* ---- laranja ---- */ [data-accent="laranja"] { --brand: #e65100; --brand-dark: #ac3d00; --brand-light: #eb7433; --sidebar-1: #bf360c; --sidebar-2: #992b0a; --accent-rgb: 230,81,0; } /* ---- ouro ---- */ [data-accent="ouro"] { --brand: #f5b800; --brand-dark: #9e7200; --brand-light: #fac733; --sidebar-1: #8a6d00; --sidebar-2: #6f5700; --accent-rgb: 245,184,0; } /* ---- vermelho ---- */ [data-accent="vermelho"] { --brand: #c62828; --brand-dark: #941e1e; --brand-light: #d15353; --sidebar-1: #b71c1c; --sidebar-2: #8e1616; --accent-rgb: 198,40,40; } /* ---- roxo ---- */ [data-accent="roxo"] { --brand: #6a1b9a; --brand-dark: #501474; --brand-light: #8849ae; --sidebar-1: #4a148c; --sidebar-2: #381069; --accent-rgb: 106,27,154; } /* ---- teal ---- */ [data-accent="teal"] { --brand: #00695c; --brand-dark: #004f45; --brand-light: #33877d; --sidebar-1: #004d40; --sidebar-2: #003d33; --accent-rgb: 0,105,92; } /* ---- verde ---- */ [data-accent="verde"] { --brand: #2e7d32; --brand-dark: #225e26; --brand-light: #58975b; --sidebar-1: #1b5e20; --sidebar-2: #154b19; --accent-rgb: 46,125,50; } /* ---- rosa ---- */ [data-accent="rosa"] { --brand: #ad1457; --brand-dark: #820f41; --brand-light: #bd4379; --sidebar-1: #880e4f; --sidebar-2: #6d0b3e; --accent-rgb: 173,20,87; } /* ---- cinza ---- */ [data-accent="cinza"] { --brand: #455a64; --brand-dark: #34444b; --brand-light: #6a7b83; --sidebar-1: #37474f; --sidebar-2: #2c393f; --accent-rgb: 69,90,100; } /* ============================================================ APLICAÇÃO DA COR (data-accent) Seletores com especificidade maior que os da página ============================================================ */ [data-accent] body, [data-accent="preto"] body, [data-accent="grafite"] body, [data-accent="cinza"] body { background: #f0f4f8; color: #1a2332; } /* Sidebar */ [data-accent] .sidebar { background: linear-gradient(180deg, var(--sidebar-1), var(--sidebar-2)); } [data-accent] .sidebar-brand .ic, [data-accent] .sidebar-user .avatar { background: linear-gradient(135deg, var(--brand-light), var(--brand-dark)); } [data-accent] .nav-item.active { background: rgba(var(--accent-rgb), 0.35); } /* Botões */ [data-accent] .btn-brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border: none; color: #fff; } [data-accent] .btn-brand:hover { color: #fff; filter: brightness(1.12); } [data-accent] .btn-outline-brand { border: 1.5px solid var(--brand); color: var(--brand); background: #fff; } [data-accent] .btn-outline-brand:hover { background: var(--brand); color: #fff; } /* Página de login */ [data-accent] body:has(.login-card) { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); } [data-accent] .login-brand .icon, [data-accent] .btn-login { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35); } [data-accent] .login-brand .icon { box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35); } [data-accent] .btn-login:hover { box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.42); } [data-accent] .input-group-login input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } [data-accent] .input-group-login input:focus ~ .input-icon { color: var(--brand); } /* Configurações */ [data-accent] .config-menu-btn.active { background: rgba(var(--accent-rgb), 0.12); color: var(--brand); border-left-color: var(--brand); } [data-accent] .card-panel { box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.12); } /* ============================================================ TEMA ESCURO (data-theme="dark") ============================================================ */ [data-theme="dark"] body, [data-accent][data-theme="dark"] body { background: #0f1724; color: #e8edf4; } [data-theme="dark"] .topbar { background: #1a2435; border-bottom-color: #243347; color: #e8edf4; } [data-theme="dark"] .topbar .title { color: #e8edf4; } [data-theme="dark"] .topbar .text-muted, [data-theme="dark"] .topbar .actions { color: #8fa3b8; } [data-theme="dark"] .card-panel { background: #1a2435; border-color: #243347; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } [data-theme="dark"] .kpi { background: #1a2435; border-color: #243347; } [data-theme="dark"] .kpi .v { color: #e8edf4; } [data-theme="dark"] .kpi .k { color: #8fa3b8; } [data-theme="dark"] .kpi.azul .v { color: #90caf9; } [data-theme="dark"] .kpi.verde .v { color: #81c784; } [data-theme="dark"] .kpi.laranja .v { color: #ffb74d; } [data-theme="dark"] .kpi.vermelho .v { color: #e57373; } [data-theme="dark"] .kpi.roxo .v { color: #ce93d8; } [data-theme="dark"] .kpi.ciano .v { color: #80cbc4; } /* Cards de resumo (relatórios) */ [data-theme="dark"] .resumo-card { background: #1a2435; border-color: #243347; } [data-theme="dark"] .resumo-card .v { color: var(--brand-light); } [data-theme="dark"] .resumo-card .k { color: #8fa3b8; } /* Tabelas — Bootstrap usa --bs-table-bg (bg branco) em th/td */ [data-theme="dark"] .table { --bs-table-bg: transparent; color: #e8edf4; } [data-theme="dark"] .table thead th { --bs-table-bg: transparent; background: transparent !important; color: #8fa3b8; } [data-theme="dark"] .table tbody td { --bs-table-bg: transparent; background: transparent !important; color: #e8edf4; } [data-theme="dark"] .table th { --bs-table-bg: transparent; background: transparent !important; color: #e8edf4; } [data-theme="dark"] .table td { --bs-table-bg: transparent; } [data-theme="dark"] .log-mudou { color: #90a4ae; } [data-theme="dark"] .table-hover tbody tr:hover { --bs-table-accent-bg: rgba(255,255,255,0.04); background: rgba(255,255,255,0.04); color: #e8edf4; } /* Formulários e modais */ [data-theme="dark"] .filtros input, [data-theme="dark"] .filtros select, [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .form-label, [data-theme="dark"] label { color: #e8edf4; } [data-theme="dark"] .modal-content { --bs-modal-bg: #1a2435; background: #1a2435; color: #e8edf4; border-color: #243347; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: #243347; } [data-theme="dark"] .modal-header .btn-close, [data-theme="dark"] .modal-title { color: #e8edf4; } /* Textos e utilitários — TODAS as letras brancas no tema escuro, respeitando apenas itens interativos/ativos (que recebem o acento) */ [data-theme="dark"] body, [data-theme="dark"] .topbar, [data-theme="dark"] .card-panel, [data-theme="dark"] .kpi, [data-theme="dark"] .modal-body, [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer, [data-theme="dark"] .config-menu, [data-theme="dark"] .config-menu-btn, [data-theme="dark"] table td, [data-theme="dark"] table th, [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label, [data-theme="dark"] p, [data-theme="dark"] .section-title, [data-theme="dark"] h6, [data-theme="dark"] h5, [data-theme="dark"] h4, [data-theme="dark"] .fw-600, [data-theme="dark"] .fw-700, [data-theme="dark"] .perm-head, [data-theme="dark"] .modal-title { color: #e8edf4 !important; } [data-theme="dark"] .text-muted { color: #8fa3b8 !important; } [data-theme="dark"] .text-secondary { color: #8fa3b8 !important; } [data-theme="dark"] .text-primary { color: var(--brand-light) !important; } [data-theme="dark"] .skeleton { background: #1e2c3d; } /* Cards Sobre e box Backup do configuracoes.html (listras inline claras) */ [data-theme="dark"] .p-3.rounded-3[style*="#f0f4f8"] { background: #1e2c3d !important; } [data-theme="dark"] .p-3.rounded-3[style*="#e1f5fe"] { background: rgba(0,131,143,0.14) !important; border-color: rgba(0,131,143,0.35) !important; } [data-theme="dark"] .perm-head { background: #243347 !important; color: #e8edf4 !important; } [data-theme="dark"] .skeleton { background: #1e2c3d; animation: pulse 1.2s infinite; } /* Elementos de fundo que sobravam brancos no tema escuro */ [data-theme="dark"] .avisoleitura { background: rgba(0,105,92,0.16); border: 1px solid rgba(0,105,92,0.35); color: #80cbc4; } [data-theme="dark"] .badge-perfil.bg-light { background: #243347 !important; color: #e8edf4 !important; } [data-theme="dark"] .config-menu { background: #1a2435; border-color: #243347; } [data-theme="dark"] .config-menu-btn { border-left-color: transparent; color: #b0bec5; } [data-theme="dark"] .config-menu-btn:hover { background: rgba(255,255,255,0.06); color: #e8edf4; } [data-theme="dark"] .alert-light { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .badge.bg-secondary { background: #2d3b4d !important; color: #e8edf4 !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: #1e2c3d; color: #e8edf4; border-color: var(--brand-light); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); } [data-theme="dark"] .form-check-input { background-color: #1e2430; border-color: #3a4b5f; accent-color: var(--brand-light); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { background: #1a2435; } /* Itens clicáveis/ativos no tema escuro recebem a cor do acento */ [data-theme="dark"] .config-menu-btn.active, [data-accent][data-theme="dark"] .config-menu-btn.active { background: rgba(var(--accent-rgb), 0.28); color: var(--brand-light) !important; border-left-color: var(--brand-light); } [data-theme="dark"] .nav-item.active, [data-accent][data-theme="dark"] .nav-item.active { background: rgba(var(--accent-rgb), 0.35); color: #fff !important; } [data-theme="dark"] a, [data-theme="dark"] .link-voltar, [data-theme="dark"] .btn-link { color: var(--brand-light); } [data-theme="dark"] a:hover, [data-theme="dark"] .link-voltar:hover { color: #fff; } [data-theme="dark"] .btn-outline-brand { background: #1a2435; border-color: var(--brand-light); color: var(--brand-light); } [data-theme="dark"] .btn-outline-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; } /* Botões secundários */ [data-theme="dark"] .acao-btn { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .acao-btn:hover { background: rgba(255,255,255,0.08); } /* Badges de status no tema escuro */ [data-theme="dark"] .st-AGENDADO { background: rgba(25,118,210,0.15) !important; color: #90caf9 !important; } [data-theme="dark"] .st-EM_ATENDIMENTO { background: rgba(230,81,0,0.15) !important; color: #ffb74d !important; } [data-theme="dark"] .st-CONCLUIDO { background: rgba(46,125,50,0.15) !important; color: #81c784 !important; } [data-theme="dark"] .st-CANCELADO { background: rgba(198,40,40,0.15) !important; color: #e57373 !important; } [data-theme="dark"] .st-Ativo { background: rgba(46,125,50,0.15) !important; color: #81c784 !important; } [data-theme="dark"] .st-Inativo { background: rgba(255,255,255,0.08) !important; color: #bdbdbd !important; } /* Perfis */ [data-theme="dark"] .badge-perfil { color: #e8edf4 !important; } [data-theme="dark"] .pf-admin { background: rgba(198,40,40,0.15) !important; color: #e57373 !important; } [data-theme="dark"] .pf-diretor { background: rgba(25,118,210,0.15) !important; color: #90caf9 !important; } [data-theme="dark"] .pf-gerente { background: rgba(0,105,92,0.15) !important; color: #80cbc4 !important; } [data-theme="dark"] .pf-tecnico { background: rgba(106,27,154,0.15) !important; color: #ce93d8 !important; } [data-theme="dark"] .pf-assistente { background: rgba(69,90,100,0.15) !important; color: #b0bec5 !important; } /* Painel de configurações */ [data-theme="dark"] .config-menu .grupo { color: #e8edf4; } /* Calendário do dashboard */ [data-theme="dark"] .cal-nav { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .cal-nav:hover { background: #243347; } [data-theme="dark"] .cal-dia { background: #1a2435; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .cal-dia:hover { border-color: var(--brand-light); background: rgba(var(--accent-rgb), 0.14); } [data-theme="dark"] .cal-dia.today { box-shadow: 0 0 0 1px var(--brand-light); } [data-theme="dark"] .cal-actions .btn-novo { border-color: #3a4b5f; color: var(--brand-light); } [data-theme="dark"] .cal-actions .btn-novo:hover { background: rgba(var(--accent-rgb), 0.18); border-color: var(--brand-light); } [data-theme="dark"] .cal-dow { color: #8fa3b8; } [data-theme="dark"] .cal-legend span { color: #8fa3b8; } /* Página de login no tema escuro */ [data-theme="dark"] .login-card { background: rgba(26,36,53,0.96); } [data-theme="dark"] .login-brand .name, [data-theme="dark"] .login-title { color: #e8edf4; } [data-theme="dark"] .login-brand .sub, [data-theme="dark"] .login-subtitle { color: #90a4ae; } [data-theme="dark"] .input-group-login input { background: #1e2c3d; border-color: #243347; color: #e8edf4; } [data-theme="dark"] .input-group-login input:focus { background: #1a2435; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.14); } [data-theme="dark"] .input-group-login .input-icon, [data-theme="dark"] .toggle-pass { color: #8fa3b8; } [data-theme="dark"] .link-voltar { color: #90a4ae; } /* Tail do tema escuro para texto fixo em cards de boas-vindas */ [data-theme="dark"] .table td, [data-theme="dark"] .table th { color: #e8edf4; } /* ============================================================ TRANSIÇÃO SUAVE AO TROCAR DE TEMA ============================================================ */ .sidebar, .topbar, .card-panel, .kpi, body { transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease; }