/* Design system — tokens (paleta neutra provisória, decisão Q11) */ :root { --cor-primaria: #2563eb; --cor-primaria-escura: #1d4ed8; --cor-fundo: #f4f5f7; --cor-superficie: #ffffff; --cor-borda: #e2e4e9; --cor-texto: #1f2430; --cor-texto-suave: #6b7280; --cor-credito: #16a34a; --cor-debito: #dc2626; --cor-estimado: #d97706; --cor-atrasado: #b91c1c; --cor-conciliado: #2563eb; --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 16px; --espaco-4: 24px; --espaco-5: 32px; --raio-sm: 6px; --raio-md: 10px; --largura-sidebar: 240px; --altura-header: 56px; --altura-rodape: 32px; --altura-bottom-nav: 60px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --cor-fundo: #14161c; --cor-superficie: #1c1f27; --cor-borda: #2b2f3a; --cor-texto: #e7e9ee; --cor-texto-suave: #9aa1b1; color-scheme: dark; } } :root[data-tema="escuro"] { --cor-fundo: #14161c; --cor-superficie: #1c1f27; --cor-borda: #2b2f3a; --cor-texto: #e7e9ee; --cor-texto-suave: #9aa1b1; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--cor-fundo); color: var(--cor-texto); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: clamp(14px, 1vw + 12px, 16px); } a { color: var(--cor-primaria); } .app-shell { display: grid; /* Recolhido é o padrão (sem classe no ) — script inline no decide antes do primeiro paint, com base no localStorage, pra não piscar aberto e depois fechar. */ grid-template-columns: 0 1fr; grid-template-rows: var(--altura-header) 1fr var(--altura-rodape); grid-template-areas: "header header" "sidebar conteudo" "rodape rodape"; min-height: 100vh; transition: grid-template-columns 0.18s ease; } :root.menu-aberto .app-shell { grid-template-columns: var(--largura-sidebar) 1fr; } .app-sidebar { overflow: hidden; } .botao-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 1.1rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm); background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; } .app-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); padding: 0 var(--espaco-3); background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); } .app-header__marca { font-weight: 700; } .app-header__acoes { display: flex; align-items: center; gap: var(--espaco-2); } .botao { display: inline-flex; align-items: center; gap: var(--espaco-1); padding: var(--espaco-1) var(--espaco-3); border-radius: var(--raio-sm); border: 1px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; font-size: 0.9rem; text-decoration: none; min-height: 44px; } .botao--primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; } .app-sidebar { grid-area: sidebar; background: var(--cor-superficie); border-right: 1px solid var(--cor-borda); /* Sem padding aqui: com box-sizing:border-box, padding no próprio item de grid impede que ele encolha até 0 (o box nunca fica menor que padding+borda) — quando recolhido, sobrava uma tira de ~17px sempre visível. O respiro fica no