/* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --cor-primaria: #6366f1; --cor-secundaria: #8b5cf6; --borda-raio: 8px; /* Cores semânticas (sucesso/perigo/info/alerta) — usadas por .td-verde, .stat-value.*, badges de exportação etc. Centralizadas em variáveis (em vez do hex direto que existia antes) justamente pra permitir os modos de correção de cor abaixo trocarem a paleta inteira de uma vez, sem caçar cor por cor em cada template. */ --cor-sucesso: #22c55e; --cor-perigo: #ef4444; --cor-info: #3b82f6; --cor-alerta: #f59e0b; /* Dark theme */ --bg-base: #0f1117; --bg-card: #1a1d2e; --bg-card2: #1e2235; --bg-hover: #252840; --bg-sidebar: #13162a; --border: #2d3154; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --shadow: 0 4px 24px rgba(0,0,0,0.4); --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); /* Aliases — muita página no app referencia estes dois nomes (não os "oficiais" acima) esperando que existam. Sem eles definidos, todo `var(--border-color)`/`var(--bg-secondary)` falha silenciosamente (a declaração inteira é descartada) — no escuro passava quase despercebido, mas no claro sobra borda/fundo faltando por todo canto (tabelas, dropdown de notificação, mini-player da rádio etc.). Ver auditoria: grep -roh "var(--[a-zA-Z0-9-]\+" templates static | sort | uniq -c */ --border-color: var(--border); --bg-secondary: var(--bg-card2); /* Sem isso o navegador desenha os controles NATIVOS (setas de input type="number", checkbox, scrollbar, date picker) sempre no estilo claro, mesmo com --tema escuro — daí as setinhas brancas destoando de um campo com fundo escuro. color-scheme avisa o navegador de que paleta usar pra esses widgets que o CSS normal não alcança. */ color-scheme: dark; } [data-tema="light"] { color-scheme: light; --bg-base: #f0f2f8; --bg-card: #ffffff; --bg-card2: #f8faff; --bg-hover: #eef0ff; --bg-sidebar: #1a1d2e; --border: #e2e8f0; --text-primary: #1e293b; --text-secondary: #475569; /* Era #94a3b8 — só ~2.7:1 de contraste contra o fundo branco (abaixo do mínimo de 4.5:1 pra texto normal), o que deixava toda legenda/rótulo "cinza claro" quase ilegível no claro (--text-muted é usado em ~700 lugares do app: labels de formulário, datas, contadores...). #64748b é o mesmo slate-500 já usado no --text-muted do escuro — ~4.9:1 no branco, continua lendo como "secundário" mas sem forçar a vista. */ --text-muted: #64748b; --shadow: 0 4px 24px rgba(0,0,0,0.08); --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); --border-color: var(--border); --bg-secondary: var(--bg-card2); } /* ===== TEMA "BLACK" (minimalista) ===== Não é um terceiro tema de auto-serviço como claro/escuro — só existe pra quem um MASTER/ADMIN liberou individualmente (Usuario.tema_black_liberado, ver Configurações > Usuários), igual o esquema de correcao_cor. Preto puro (não o cinza-azulado #0f1117 do escuro padrão), sidebar fundida com o fundo (sem bloco de cor separado) e bordas quase invisíveis — o contraste vem do conteúdo, não do chrome ao redor dele. */ [data-tema="black"] { color-scheme: dark; --bg-base: #000000; --bg-card: #0a0a0a; --bg-card2: #121212; --bg-hover: #1a1a1a; --bg-sidebar: #000000; --border: #1f1f1f; --text-primary: #f2f2f2; --text-secondary: #a1a1aa; --text-muted: #71717a; --shadow: 0 4px 24px rgba(0,0,0,0.7); --shadow-sm: 0 2px 8px rgba(0,0,0,0.6); --border-color: var(--border); --bg-secondary: var(--bg-card2); } /* ===== MODOS DE CORREÇÃO DE COR (daltonismo) ===== Liberado por usuário em Configurações > Usuários (campo `correcao_cor`, só MASTER/ADMIN altera — ver editar_usuario() em app.py). O atributo data-correcao-cor é escrito no a partir do usuário logado (ver inject_usuario() em app.py + base.html), então basta a pessoa logar pra já ver a paleta certa — não precisa configurar nada do lado dela. Em vez de um filtro de pixel sobre a tela inteira (abordagem comum, mas que quebra todo elemento `position:fixed` — modais, drawers, toasts — porque um `filter` no / vira containing block deles e eles passam a rolar com a página em vez de ficar fixos na viewport), a correção troca só as 4 cores "semânticas" (sucesso/perigo/info/alerta) por combinações comprovadamente distinguíveis pro tipo de daltonismo, com base na paleta Okabe-Ito (referência de "Color Universal Design"). Cobre indicadores de status, badges, stat cards e afins — não pixels arbitrários de imagem. */ /* Protanopia/deuteranopia (confusão vermelho↔verde): verde e vermelho são o par que mais colide — trocados por azul × laranja-avermelhado, que continuam nitidamente diferentes pra esse tipo de daltonismo. */ [data-correcao-cor="protanopia"], [data-correcao-cor="deuteranopia"] { --cor-sucesso: #0072B2; --cor-perigo: #D55E00; --cor-info: #56B4E9; --cor-alerta: #F0E442; } /* Tritanopia (confusão azul↔amarelo): verde/vermelho continuam seguros pra esse tipo, então só troca azul e âmbar por roxo × rosa/magenta. */ [data-correcao-cor="tritanopia"] { --cor-info: #8b5cf6; --cor-alerta: #ec4899; } html { font-size: 15px; } body { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); min-height: 100vh; line-height: 1.6; } body.tema-anim, body.tema-anim * { transition: background 0.3s, color 0.3s, border-color 0.3s !important; } /* ===== LAYOUT ===== */ .layout { display: flex; min-height: 100vh; } /* ===== SIDEBAR ===== */ .sidebar { width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; height: 100vh; top: 0; left: 0; z-index: 100; transition: transform 0.3s ease, width 0.3s ease; overflow: hidden; } .sidebar.collapsed { transform: translateX(-260px); } .sidebar-header { padding: 24px 20px 16px; border-bottom: 1px solid var(--border); } .logo-placeholder { display: flex; align-items: center; gap: 10px; } .logo-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--cor-primaria), var(--cor-secundaria)); border-radius: var(--borda-raio); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .logo-text { font-size: 20px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; } .logo-plus { color: var(--cor-primaria); } .empresa-logo { max-height: 48px; max-width: 180px; object-fit: contain; } .empresa-nome { font-size: 11px; color: var(--text-muted); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-nav { flex: 1; padding: 12px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .nav-section { margin-bottom: 8px; } .nav-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; padding: 8px 8px 4px; display: block; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--borda-raio); color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; white-space: nowrap; } .nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .nav-item.active { background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.15)); color: var(--cor-primaria); border: 1px solid rgba(99,102,241,0.25); } .nav-item i { width: 18px; text-align: center; font-size: 15px; } /* ===== MAIN CONTENT ===== */ .main-content { flex: 1; min-width: 0; /* sem isso, o item flex herda o min-content dos filhos (ex.: tabelas com min-width, textos sem quebra) e ultrapassa a viewport em telas entre ~500px e ~1300px, em vez de encolher e deixar o overflow interno (.page-content) cuidar do scroll horizontal. */ margin-left: 260px; display: flex; flex-direction: column; min-height: 100vh; transition: margin-left 0.3s ease; } .main-content.expanded { margin-left: 0; } /* ===== TOPBAR ===== */ .topbar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 16px; min-width: 0; /* mesmo motivo do .main-content acima */ position: sticky; top: 0; z-index: 50; } .sidebar-toggle { background: none; border: 1px solid var(--border); color: var(--text-secondary); width: 36px; height: 36px; border-radius: var(--borda-raio); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .sidebar-toggle:hover { background: var(--bg-hover); color: var(--text-primary); } .topbar-center { flex: 1; min-width: 0; display: flex; justify-content: center; } .data-atual { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; min-width: 0; /* sem isto o span da data força a largura do flex item — ver .data-atual span abaixo */ max-width: 100%; } .data-atual span { /* Antes disto, faltando espaço o texto (ex.: "Quarta-feira, 12 de agosto de 2026") simplesmente quebrava em 2 linhas dentro da topbar de altura fixa (60px), sobrepondo os ícones ao lado. Agora trunca com "..." em vez de quebrar — some por completo só abaixo de 768px (ver media query). */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-right { display: flex; align-items: center; gap: 12px; } .tema-toggle { width: 36px; height: 36px; background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--borda-raio); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all 0.2s; } .tema-toggle:hover { background: var(--bg-hover); color: var(--cor-primaria); } .user-badge { display: flex; align-items: center; gap: 8px; background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--borda-raio); padding: 6px 12px; font-size: 13px; color: var(--text-secondary); } /* ===== PAGE CONTENT ===== */ .page-content { flex: 1; padding: 24px; overflow-x: hidden; min-width: 0; } /* ===== PAGE HEADER ===== */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; } .page-title { font-size: 24px; font-weight: 700; color: var(--text-primary); } .page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; } /* ===== CARDS ===== */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--borda-raio); padding: 20px; box-shadow: var(--shadow-sm); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .card-title i { color: var(--cor-primaria); } /* ===== STAT CARDS ===== */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--borda-raio); padding: 20px; position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cor-primaria), var(--cor-secundaria)); } .stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .stat-value { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .stat-value.verde { color: var(--cor-sucesso); } .stat-value.azul { color: var(--cor-info); } .stat-value.vermelho { color: var(--cor-perigo); } /* ===== REPORT SECTIONS (collapsible, para telas de relatório) ===== */ .report-toolbar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--borda-raio); box-shadow: var(--shadow-sm); padding: 14px 18px; margin-bottom: 16px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .report-toolbar .form-group { margin: 0; } .report-toolbar .form-label { font-size: 11px; margin-bottom: 4px; } details.report-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--borda-raio); box-shadow: var(--shadow-sm); margin-bottom: 16px; overflow: hidden; } details.report-section > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; } details.report-section > summary::-webkit-details-marker { display: none; } details.report-section > summary::marker { content: ""; } details.report-section > summary:hover { background: var(--bg-hover); } details.report-section .report-section-title { font-size: 15px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; min-width: 0; } details.report-section .report-section-title i:first-child { color: var(--cor-primaria); } details.report-section .report-section-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } details.report-section .report-section-badge { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-hover); padding: 3px 9px; border-radius: 999px; } details.report-section .report-section-chevron { color: var(--text-muted); transition: transform 0.2s ease; flex-shrink: 0; } details.report-section[open] > summary .report-section-chevron { transform: rotate(180deg); } details.report-section > summary { border-bottom: 1px solid transparent; } details.report-section[open] > summary { border-bottom: 1px solid var(--border); } details.report-section .report-section-body { padding: 16px 20px 20px; } details.report-section .report-section-body.no-pad { padding: 0; } /* ===== HUB DE RELATÓRIOS (banner + cards de exportação) ===== Componente compartilhado por todas as abas "Relatórios" do sistema (RH, Logística, Cadastros, Faturamento) — antes duplicado em