/* ================================================================ DIM-DIM'S — DESIGN SYSTEM ------------------------------------------------------------------ Índice: 1. Fontes & tokens base (espaçamento, raio, sombra, tipografia) 2. Paleta — tema escuro (padrão) e tema claro 3. Reset & elementos base 4. Layout (app shell, sidebar, topbar, content) 5. Tipografia de view (headers, seções) 6. Botões 7. Inputs / formulários 8. Cards, KPIs, stat 9. Tabelas 10. Badges / pills 11. Alertas 12. Progresso 13. Segmented control 14. Modal 15. Toast 16. Empty state / skeleton 17. Gráficos (wrapper, legenda, tooltip) 18. Componentes menores (month-card, mini-table, emoji grid, dropdown) 19. Páginas de autenticação 20. Utilitários, impressão, responsivo 21. Landing page (pública, pré-login) ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&display=swap'); /* ============================================================ 0. FONTES — Outfit (fonte principal global, self-hosted) — FASE 018 ------------------------------------------------------------------ Substitui Space Grotesk (display) + Open Runde (corpo), que serviam essa função desde o redesign Acctual anterior — não removidos do disco (`/fonts/space-grotesk/`, `/fonts/open-runde/`), só deixaram de ser referenciados. Outfit é a fonte pedida explicitamente pro novo sistema de identidade (Outfit + Phosphor + mascote): geométrica, arredondada, grotesca contemporânea — mesma família de sensação que Space Grotesk já buscava, mas variable font única cobrindo TODOS os pesos usados (400–800) em vez de duas famílias diferentes pra display/corpo. Google Fonts, licença SIL OFL 1.1 (conferida em github.com/google/fonts/ofl/outfit/OFL.txt), variable font (400–800) baixado do CDN gstatic (subset "latin") e self-hosted — mesmo motivo de sempre: PWA com Service Worker cacheia o shell pra uso offline, uma fonte carregada de fonts.googleapis.com não seria cacheada e quebraria offline. IBM Plex Mono (números tabulares) não muda — não foi pedido. ============================================================ */ @font-face{ font-family:'Outfit';src:url('/fonts/outfit/Outfit-Variable.woff2') format('woff2'); font-weight:400 800;font-style:normal;font-display:swap; } /* ============================================================ 1. TOKENS BASE (independentes de tema) ============================================================ */ :root{ /* Fase 018: Outfit vira a fonte principal — display E corpo, uma família só (antes eram duas: Space Grotesk pro display, Open Runde pro corpo). --font-family-primary é o nome pedido pela Fase 018 §5; --font-display/ --font-body continuam existindo (agora como alias do mesmo valor) pra não quebrar nenhuma das dezenas de regras que já os referenciam. */ --font-family-primary:'Outfit','Inter',-apple-system,BlinkMacSystemFont,sans-serif; --font-display:var(--font-family-primary); --font-body:var(--font-family-primary); --font-mono:'IBM Plex Mono',monospace; /* Pesos (Fase 018 §5) — tokens novos, aditivos. As ~40 declarações `font-weight:NNN` que já existiam no arquivo não foram reescritas pra usar essas variáveis (mudança mecânica de risco alto pra ganho visual zero, já que os valores numéricos são os mesmos); ficam disponíveis pra uso em CSS novo daqui pra frente. */ --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; --font-weight-extrabold:800; --font-xs:12px; --font-sm:13px; --font-md:14px; --font-lg:16px; --font-xl:20px; --font-2xl:24px; --font-3xl:28px; --font-4xl:36px; /* Aliases nomeados como a Fase 018 §5 pediu (--font-size-*) — apontam pra mesma escala acima (--font-xs..--font-4xl), que já é usada em ~19 lugares; --font-size-display não tinha equivalente na escala antiga, entra como um degrau novo acima de --font-4xl. */ --font-size-xs:var(--font-xs); --font-size-sm:var(--font-sm); --font-size-md:var(--font-md); --font-size-lg:var(--font-lg); --font-size-xl:var(--font-xl); --font-size-2xl:var(--font-2xl); --font-size-3xl:var(--font-3xl); --font-size-display:40px; /* escala nomeada por papel (briefing Seção 3) — convive com --font-* acima em vez de substituir; usada nos pontos redesenhados (títulos de view, hero da landing, KPI de destaque). Ver design-tokens.md. */ --fs-display:64px; --fs-display-weight:600; --fs-heading-lg:48px; --fs-heading-lg-weight:600; --fs-heading:40px; --fs-heading-weight:600; --fs-heading-sm:32px; --fs-heading-sm-weight:600; --fs-subheading:24px; --fs-subheading-weight:600; --fs-body-lg:22px; --fs-body-lg-weight:500; --fs-body:16px; --fs-body-weight:500; --fs-small:14px; --fs-small-weight:500; --fs-eyebrow:11px; --fs-eyebrow-weight:600; --ls-heading:-0.03em; --ls-body:-0.02em; --ls-eyebrow:0.02em; --spacing-1:4px; --spacing-2:8px; --spacing-3:12px; --spacing-4:16px; --spacing-5:20px; --spacing-6:24px; --spacing-7:32px; --spacing-8:40px; --spacing-9:48px; --spacing-10:64px; --spacing-11:96px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:32px; --radius-modal:24px; --radius-pill:999px; --radius:var(--radius-md); /* compat: usado em alguns pontos do CSS original */ --transition-fast:150ms cubic-bezier(.4,0,.2,1); --transition-normal:220ms cubic-bezier(.4,0,.2,1); --sidebar-w:224px; --sidebar-w-collapsed:76px; } /* ============================================================ 2. PALETA — a paleta é própria por tema, não é inversão automática. Nomes novos (--color-*) são o sistema oficial; os nomes antigos (--gold, --blue, --border, --text, --muted, --surface3, ...) são mantidos porque public/js/app.js referencia esses 11 nomes diretamente em estilos inline — continuam fazendo parte da paleta de cada tema, não são um "alias solto". ============================================================ */ /* ---------- Tema escuro (padrão) ---------- */ :root, [data-theme="dark"]{ color-scheme: dark; --color-bg:#0A0C12; --color-surface:#12151D; --color-surface-2:#181D29; --color-surface-3:#0D1017; --color-border:#1E2330; --color-border-soft:#171B26; --color-border-strong:#2E3547; /* Mascote Dim-Dim's como sistema de marca (07-mascot-brand-system.md): navy da bandana como accent primário — clareado (#5A8CD2, sampleado do próprio PNG do mascote e clareado) pra manter contraste WCAG AA (5.69:1) sobre fundo escuro; navy puro do mascote teria só 1.74:1 aqui, ilegível. O dourado da moedinha é accent PONTUAL (ver --color-mascot-gold), não o primário — o próprio briefing do usuário pede isso ("dourado como accent, não cor dominante"): dourado em texto/link deu 1.76:1 contra branco, reprova WCAG, por isso não vira --color-primary em nenhum tema. */ --color-primary:#5A8CD2; --color-primary-soft:rgba(90,140,210,.16); --color-primary-contrast:#0A0C12; --color-mascot-gold:#FDB700; --color-mascot-gold-soft:rgba(253,183,0,.16); --color-success:#3FBF8F; --color-success-soft:rgba(63,191,143,.14); --color-warning:#E3B341; --color-warning-soft:rgba(227,179,65,.14); --color-danger:#E5697A; --color-danger-soft:rgba(229,105,122,.14); --color-info:#6C93FF; --color-info-soft:rgba(108,147,255,.14); --color-text:#EDF0F6; --color-text-muted:#8991A6; /* #5A6278 media 3.00:1 contra --color-surface (#12151D, fundo real da sidebar) — abaixo do mínimo AA (4.5:1). Achado da auditoria UX-001 (`axe-core` mediu o equivalente no tema claro; o tema escuro não tinha sido medido ao vivo, mas é o mesmo cálculo de contraste WCAG com os tokens reais do arquivo, não suposição). #757E97 é o mesmo tom, só mais claro o suficiente pra bater 4.5:1 exato contra #12151D. */ --color-text-faint:#757E97; /* Ação primária (botão .btn-gold): voltou a ser dourado de verdade — a cor da moedinha do mascote — em vez do neutro claro/escuro de antes. Pedido explícito do usuário ("cores precisa combinar com o mascote, tipo Duolingo": accent forte reservado pro botão de ação principal, não espalhado pela UI toda). Contraste verificado (não assumido): dourado de fundo + texto quase-preto em cima = 11.12:1 no escuro / 7.49:1 no claro, os dois folgados acima do mínimo AA (4.5:1) — o problema de WCAG de sessões anteriores era dourado como COR DE TEXTO sobre fundo neutro (1.76:1, reprovava), não dourado como preenchimento de botão com texto escuro por cima, que é um par totalmente diferente. */ --color-action:var(--color-mascot-gold); --color-action-contrast:#0A0C12; /* Ação primária (botão .btn-gold): voltou a ser dourado de verdade — a cor da moedinha do mascote — em vez do neutro claro/escuro de antes. Pedido explícito do usuário ("cores precisa combinar com o mascote, tipo Duolingo": accent forte reservado pro botão de ação principal, não espalhado pela UI toda). Contraste verificado (não assumido): dourado de fundo + texto quase-preto em cima = 11.12:1 no escuro / 7.49:1 no claro, os dois folgados acima do mínimo AA (4.5:1) — o problema de WCAG de sessões anteriores era dourado como COR DE TEXTO sobre fundo neutro (1.76:1, reprovava), não dourado como preenchimento de botão com texto escuro por cima, que é um par totalmente diferente. */ --color-action:var(--color-mascot-gold); --color-action-contrast:#0A0C12; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 12px 28px -10px rgba(0,0,0,.55); /* nomes legados usados via var() diretamente em app.js */ --bg:var(--color-bg); --surface1:var(--color-surface); --surface2:var(--color-surface-2); --surface3:var(--color-surface-3); --border:var(--color-border); --border-soft:var(--color-border-soft); --border-strong:var(--color-border-strong); --text:var(--color-text); --muted:var(--color-text-muted); --muted-dim:var(--color-text-faint); --gold:var(--color-primary); --gold-soft:#9FC0E8; --gold-dim:#1B2E4A; --green:var(--color-success); --green-soft:var(--color-success-soft); --red:var(--color-danger); --red-soft:var(--color-danger-soft); --purple:#A695F2; --blue:var(--color-info); --color-decorative-violet:#8C7BFF; --color-decorative-magenta:#F45FDA; --color-decorative-green:#8CC63F; --color-decorative-coral:#FF8A8A; --color-accent-pj:#E5892E; --color-accent-pj-soft:rgba(229,137,46,.14); } /* ---------- Tema claro (referência visual primária do redesign) ---------- */ [data-theme="light"]{ color-scheme: light; /* Canvas branco (Acctual-inspired) — era #F6F7F9, agora #FFFFFF puro; --color-surface-2/3 seguem como "subtle background" pra cards empilhados/inputs ainda se distinguirem do canvas sem virar cinza pesado. Ver design-tokens.md. */ --color-bg:#FFFFFF; --color-surface:#FFFFFF; --color-surface-2:#F7FAFC; --color-surface-3:#F7FAFC; --color-border:#CCD1DA; --color-border-soft:#E4E7ED; --color-border-strong:#A9B0BE; --color-primary:#1E3B64; --color-primary-soft:rgba(30,59,100,.1); --color-primary-contrast:#FFFFFF; --color-mascot-gold:#E5A100; --color-mascot-gold-soft:rgba(229,161,0,.14); /* Auditoria UX-001: `axe-core` mediu ao vivo (Chromium real, tema claro — o que carrega por padrão) 3 combinações abaixo do mínimo WCAG AA (4.5:1): o texto verde de sucesso contra fundo branco puro (3.56:1) e contra seu próprio fundo suave (3.11:1), e o vermelho de perigo contra seu fundo suave (4.29:1, contra branco puro já passava em 4.96:1). Os dois valores abaixo são a MESMA cor, só escurecida o suficiente pra bater 4.5:1 no pior dos dois fundos onde cada uma aparece (texto puro e badge com fundo tintado) — cálculo exato (fórmula de luminância relativa do WCAG), não ajuste no olho. */ --color-success:#187C57; --color-success-soft:rgba(30,154,108,.12); --color-warning:#B4790C; --color-warning-soft:rgba(180,121,12,.12); --color-danger:#C6364E; --color-danger-soft:rgba(201,59,82,.1); --color-info:#3B63D9; --color-info-soft:rgba(59,99,217,.1); --color-text:#1E1E1E; --color-text-muted:#666666; /* #8D8D8D media 3.32:1 contra branco (rótulo dos grupos da sidebar, achado confirmado com axe-core na auditoria UX-001) — abaixo do mínimo AA. #757575 é o mesmo cinza, escurecido até 4.61:1 — folga pequena acima do mínimo (4.5:1) porque o cálculo exato de 4.50 (#777777) ficou tecnicamente abaixo na medição do axe-core (4.47, diferença de arredondamento entre a fórmula manual e a do navegador/axe) quando testado ao vivo — confirmado de novo depois do ajuste. */ --color-text-faint:#757575; /* Ação primária: dourado de verdade (cor da moedinha do mascote), não mais o quase-preto neutro — ver nota gêmea no tema escuro pra contraste verificado (7.49:1 com texto quase-preto em cima, folgado acima de 4.5:1 AA). Pedido explícito: "cores combinando com o mascote". */ --color-action:var(--color-mascot-gold); --color-action-contrast:#1E1E1E; --shadow-sm:0 1px 2px rgba(20,22,30,.05); --shadow-md:0 12px 24px -12px rgba(20,22,30,.12); --bg:var(--color-bg); --surface1:var(--color-surface); --surface2:var(--color-surface-2); --surface3:var(--color-surface-3); --border:var(--color-border); --border-soft:var(--color-border-soft); --border-strong:var(--color-border-strong); --text:var(--color-text); --muted:var(--color-text-muted); --muted-dim:var(--color-text-faint); --gold:var(--color-primary); --gold-soft:#D9E4F2; --gold-dim:#1E3B64; --green:var(--color-success); --green-soft:var(--color-success-soft); --red:var(--color-danger); --red-soft:var(--color-danger-soft); --purple:#6C56FC; --blue:var(--color-info); --color-decorative-violet:#6C56FC; --color-decorative-magenta:#F200CA; --color-decorative-green:#5D9C06; --color-decorative-coral:#FF6363; --color-surface-blue:#CFEAFA; --color-surface-violet:#E1E0FC; --color-surface-pink:#F6D2F4; --color-accent-pj:#B4610E; --color-accent-pj-soft:rgba(180,97,14,.12); } /* ============================================================ 3. RESET & BASE ============================================================ */ *{box-sizing:border-box;} html,body{margin:0;padding:0;} html{-webkit-tap-highlight-color:transparent;} body{ background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:var(--font-md); font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100vh; transition:background var(--transition-normal), color var(--transition-normal); } button{font-family:inherit;cursor:pointer;color:inherit;} input,select,textarea{font-family:inherit;} ::selection{background:var(--color-primary);color:var(--color-primary-contrast);} a{color:var(--color-info);} a.link{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;} a.link:hover{color:var(--color-text);} svg{display:block;} /* foco visível consistente em toda a interface */ :focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px;} /* barra de rolagem discreta */ ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:20px;border:3px solid transparent;background-clip:padding-box;} /* ============================================================ 4. LAYOUT ============================================================ */ .app{display:flex;min-height:100vh;} /* ---------- Sidebar ---------- */ .sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--color-surface); border-right:1px solid var(--color-border); display:flex;flex-direction:column; padding:var(--spacing-5) var(--spacing-3); position:sticky;top:0;height:100vh; overflow-y:auto; transition:background var(--transition-normal), border-color var(--transition-normal); } .brand{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-1) var(--spacing-2) var(--spacing-5);} /* Fundo fixo (não varia por tema, de propósito) — o mascote tem cores próprias (marrom/creme/navy/dourado) que precisam de contraste consistente contra a marca, não contra o que o tema escuro/claro decidir. Mesmo fundo branco já usado nos ícones de PWA (icon-32/192/512.png), pra não criar costura entre os dois. */ .brand-mark{ width:34px;height:34px;border-radius:var(--radius-sm);flex-shrink:0; background:#FFFFFF;overflow:hidden;display:flex;align-items:center;justify-content:center; border:1px solid rgba(20,22,30,.1);box-shadow:0 1px 3px rgba(20,22,30,.08); } .brand-mark img{width:100%;height:100%;object-fit:cover;display:block;} /* white-space:nowrap: sem isso, o navegador quebra linha DEPOIS do hífen de "Dim-Dim's" (hífen é ponto de quebra válido por padrão, mesmo sem espaço), virando "Dim-" / "Dim's" em duas linhas em qualquer coluna estreita — achado real reportado pelo usuário, reproduzia na sidebar em qualquer resolução onde o container ficasse justo. Nome da marca nunca deve quebrar. */ .brand-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-md);line-height:1.2;white-space:nowrap;} .brand-sub{font-size:var(--font-xs);color:var(--color-text-muted);margin-top:2px;transition:color var(--transition-fast);} .brand-sub.saving{color:var(--color-primary);} .brand-sub.err{color:var(--color-danger);} .theme-toggle{ margin-left:auto;flex-shrink:0; width:32px;height:32px;border-radius:var(--radius-sm); border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted); display:flex;align-items:center;justify-content:center; transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .theme-toggle:hover{color:var(--color-text);border-color:var(--color-border-strong);} .theme-toggle:active{transform:scale(.92);} .theme-toggle svg{width:16px;height:16px;} .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-sun{display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:block;} /* Grupo do menu é um
— clica no rótulo e abre/fecha (mesmo padrão de disclosure já usado no FAQ da landing: marker nativo escondido, "+"/"×" via ::after). Só o grupo da view atual abre sozinho (marcado `open` no HTML, e reforçado por switchView() se a navegação vier de um link fora da sidebar). */ .nav-group-label{ display:flex;align-items:center;justify-content:space-between;cursor:pointer; font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em; color:var(--color-text-faint);padding:var(--spacing-4) var(--spacing-3) 6px; list-style:none;user-select:none; } .nav-group-label::-webkit-details-marker{display:none;} .nav-group-label::after{content:"+";font-size:13px;font-weight:400;color:var(--color-text-faint);transition:transform var(--transition-fast);} .nav-group[open] .nav-group-label::after{transform:rotate(45deg);} .nav-group:first-child .nav-group-label{padding-top:var(--spacing-2);} .nav-group{margin-bottom:var(--spacing-1);} .nav-item{ display:flex;align-items:center;gap:var(--spacing-3); background:none;border:none;color:var(--color-text-muted); text-align:left;padding:9px var(--spacing-3);border-radius:var(--radius-sm); font-size:13.5px;font-weight:500;margin-bottom:2px; position:relative; transition:background var(--transition-fast),color var(--transition-fast); width:100%; } .nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:.85;transition:opacity var(--transition-fast);} .nav-item span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .nav-item::before{ content:"";position:absolute;left:-1px;top:50%;translate:0 -50%; width:3px;height:0;border-radius:3px;background:var(--color-primary); transition:height var(--transition-fast); } .nav-item:hover{background:var(--color-surface-2);color:var(--color-text);} .nav-item:hover svg{opacity:1;} .nav-item.active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:600;} .nav-item.active svg{opacity:1;} .nav-item.active::before{height:18px;} .nav-item.active .badge{background:var(--color-primary);color:var(--color-primary-contrast);} /* Impostos/PJ em laranja, Investimento em azul — cor própria por menu, distinta do dourado padrão dos outros itens. Tokenizado (--color-accent-pj) pra respeitar o tema em vez de hex cravado. */ .nav-item[data-view="pj"].active{color:var(--color-accent-pj);background:var(--color-accent-pj-soft);} .nav-item[data-view="pj"].active::before{background:var(--color-accent-pj);} .nav-item[data-view="invest"].active{color:var(--color-info);background:var(--color-info-soft);} .nav-item[data-view="invest"].active::before{background:var(--color-info);} .badge{ background:var(--color-surface-3);color:var(--color-text-muted); font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:20px; transition:background var(--transition-fast), color var(--transition-fast); } .sidebar-footer{margin-top:auto;padding-top:var(--spacing-3);border-top:1px solid var(--color-border-soft);font-size:11px;color:var(--color-text-muted);line-height:1.5;} /* ---------- Barra mobile (só aparece <=900px) + drawer da sidebar ---------- */ .mobile-topbar{ display:none;align-items:center;gap:var(--spacing-3); height:56px;flex-shrink:0;padding:0 var(--spacing-4); background:var(--color-surface);border-bottom:1px solid var(--color-border); position:sticky;top:0;z-index:45; } .nav-alert-dot{ position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%; background:var(--color-danger);border:2px solid var(--color-surface); } .icon-btn{position:relative;} /* Sino de notificações (alertas automáticos) — mesmo peso visual do theme-toggle, que já mora nessa mesma linha da sidebar; duplicado no .mobile-topbar (empurrado pra direita com margin-left:auto) porque a sidebar em si vira drawer fechado por padrão no mobile. */ .notif-btn{ position:relative;flex-shrink:0; width:32px;height:32px;border-radius:var(--radius-sm); border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted); display:flex;align-items:center;justify-content:center; transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); } .notif-btn:hover{color:var(--color-text);border-color:var(--color-border-strong);} .notif-btn:active{transform:scale(.92);} .notif-badge{ position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px; border-radius:20px;background:var(--color-danger);color:#fff; font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center; line-height:1;border:2px solid var(--color-surface); } .sidebar-backdrop{ display:none;position:fixed;inset:0;background:rgba(8,9,14,.5);z-index:65; opacity:0;transition:opacity var(--transition-normal); } [data-theme="light"] .sidebar-backdrop{background:rgba(20,22,30,.35);} /* ---------- Content ---------- */ /* min-width:0 é necessário aqui: .content é item de um flex container (.app{display:flex}), e flex-item tem min-width:auto implícito — sem isso, ele nunca encolhe abaixo do filho mais largo (ex: a tabela do Admin), então o overflow-x:auto que os cards de tabela já têm nunca chega a ativar e a página inteira estoura no mobile/tablet (achado real na Fase 12: tabela de usuários do Admin). */ .content{flex:1;min-width:0;padding:var(--spacing-7) var(--spacing-8);max-width:1180px;} /* Header contextual fixo — mostra onde o usuário está (ícone + nome, os mesmos da sidebar) acima do conteúdo de cada view, sem duplicar dado (lido direto do nav-item correspondente, não hardcoded). Sticky relativo à página inteira (não tem overflow:auto em nenhum ancestral) — fica visível mesmo rolando uma view longa. Fase 3 do redesign deixou isso pendente de propósito pra não precisar tocar as 19 funções render*; essa versão entrega o componente compartilhado sem reescrever o header interno (h1/view-sub/ações) que cada view já tem — os dois convivem, um é o "breadcrumb" persistente, o outro é o título de conteúdo. Não sangra pra fora do padding de .content de propósito (evita ter que casar margem negativa com o padding, que muda no breakpoint mobile — sangrar errado ali reintroduziria o bug de overflow horizontal da Fase 12). */ .context-header{ position:sticky;top:0;z-index:5; display:flex;align-items:center;gap:8px; padding:10px 0;margin-bottom:var(--spacing-6); background:var(--color-bg);border-bottom:1px solid var(--color-border-soft); font-size:13px;font-weight:600;color:var(--color-text-muted); } .context-header svg{width:15px;height:15px;flex-shrink:0;color:var(--color-text-faint);} .context-header .context-header-back{ display:inline-flex;align-items:center;gap:4px;color:var(--color-text-muted); padding-right:8px;margin-right:2px;border-right:1px solid var(--color-border-soft); } .context-header .context-header-back:hover{color:var(--color-text);} @media(max-width:900px){ /* .mobile-topbar também é sticky/top:0 e é IRMÃ de .content (não pai) — sem esse offset os dois sticky disputariam o mesmo top:0 e o header contextual ficaria por baixo da topbar ao rolar. */ .context-header{top:56px;} } .view-header{margin-bottom:var(--spacing-6);} .view-title{font-family:var(--font-display);font-weight:700;font-size:var(--font-2xl);margin:0 0 4px;letter-spacing:-.01em;} .view-sub{color:var(--color-text-muted);font-size:var(--font-sm);margin:0;} .grid{display:grid;gap:var(--spacing-4);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-2{grid-template-columns:1fr 1fr;} @media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-2{grid-template-columns:1fr;}} /* ============================================================ 6. BOTÕES ============================================================ */ .btn{ border-radius:var(--radius-pill);border:1px solid var(--color-border); background:var(--color-surface-2);color:var(--color-text); padding:10px 18px;font-size:var(--font-sm);font-weight:600; display:inline-flex;align-items:center;gap:6px; transition:background var(--transition-fast), border-color var(--transition-fast), transform 130ms cubic-bezier(.34,1.56,.64,1), opacity var(--transition-fast), box-shadow var(--transition-fast); } /* "mais animada, tipo Duolingo" (pedido explícito) — leve levantada + sombra no hover em todo botão do app (cascata via classe compartilhada, não precisa tocar tela por tela); overshoot suave no cubic-bezier acima em vez de ease-out linear, pra sentir "vivo" sem virar desenho animado (a própria Seção 8/26 do usuário pede sutil, não caricato). */ .btn:hover{background:var(--color-border-soft);border-color:var(--color-border-strong);transform:translateY(-1px);box-shadow:var(--shadow-sm);} .btn:active{transform:scale(.96);} /* .btn-gold = ação primária, em TODAS as telas (referenciado em dezenas de lugares no HTML estático e em app.js) — dourado de verdade de novo, ver nota nos tokens --color-action. */ .btn-gold{background:var(--color-action);color:var(--color-action-contrast);border-color:var(--color-action);} /* Achado real: sem reafirmar `background` aqui, a regra genérica `.btn:hover` (que já define `background:var(--color-border-soft)`) "ganhava" no hover porque `.btn-gold:hover` não tocava essa propriedade — o botão de ação principal ficava cinza ao passar o mouse. Reafirmando o dourado + filter de brilho, em vez de depender só do filter. */ .btn-gold:hover{background:var(--color-action);border-color:var(--color-action);filter:brightness(1.08);box-shadow:0 6px 16px -6px var(--color-mascot-gold);} .btn-danger{background:transparent;color:var(--color-danger);border-color:var(--color-danger-soft);} .btn-danger:hover{background:var(--color-danger-soft);} .btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-muted);} .btn-ghost:hover{color:var(--color-text);background:var(--color-surface-2);} .btn-sm{padding:7px 12px;font-size:12px;} .btn[disabled]{opacity:.5;pointer-events:none;} .btn.full{width:100%;justify-content:center;padding:11px 16px;} .btn.is-loading{color:transparent !important;pointer-events:none;position:relative;} .btn.is-loading::after{ content:"";position:absolute;width:14px;height:14px;border-radius:50%; border:2px solid currentColor;border-top-color:transparent;color:var(--color-text); animation:btn-spin .6s linear infinite; } @keyframes btn-spin{to{transform:rotate(360deg);}} .icon-btn{ width:32px;height:32px;padding:0;justify-content:center; background:transparent;border-color:transparent;color:var(--color-text-muted);border-radius:var(--radius-sm); } .icon-btn:hover{background:var(--color-surface-2);color:var(--color-text);} /* ============================================================ 7. FORMULÁRIOS ============================================================ */ .field{margin-bottom:var(--spacing-4);} .field label{display:block;font-size:var(--font-xs);color:var(--color-text-muted);margin-bottom:6px;font-weight:600;} .field input,.field select,.field textarea{ width:100%;background:var(--color-surface-3);border:1px solid var(--color-border); color:var(--color-text);border-radius:var(--radius-md);padding:11px 13px;font-size:var(--font-md); transition:border-color var(--transition-fast), background var(--transition-fast); } .field input::placeholder,.field textarea::placeholder{color:var(--color-text-faint);} .field input:hover,.field select:hover{border-color:var(--color-border-strong);} .field input:focus,.field select:focus,.field textarea:focus,.field input:focus-visible{ outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft); } .field input:disabled,.field select:disabled{opacity:.6;cursor:not-allowed;} .field.has-error input,.field.has-error select{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-soft);} .field.has-success input,.field.has-success select{border-color:var(--color-success);box-shadow:0 0 0 3px var(--color-success-soft);} .field .hint{font-size:11px;color:var(--color-text-muted);margin-top:5px;line-height:1.4;display:block;} /* checkbox/switch simples reutilizável */ .switch{position:relative;display:inline-flex;align-items:center;width:36px;height:20px;flex-shrink:0;} .switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;} .switch .track{position:absolute;inset:0;background:var(--color-border-strong);border-radius:20px;transition:background var(--transition-fast);} .switch .thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast);} .switch input:checked ~ .track{background:var(--color-primary);} .switch input:checked ~ .thumb{transform:translateX(16px);} .switch input:focus-visible ~ .track{outline:2px solid var(--color-primary);outline-offset:2px;} /* ============================================================ 8. CARDS / KPI ============================================================ */ .card{ background:var(--color-surface);border:1px solid var(--color-border); border-radius:var(--radius-lg);padding:var(--spacing-5) var(--spacing-5); box-shadow:var(--shadow-sm); border-left:1px solid var(--color-border); transition:border-color var(--transition-fast), box-shadow var(--transition-fast), transform 150ms cubic-bezier(.34,1.56,.64,1); /* Item de grid/flex tem min-width:auto implícito — sem isso, o card não encolhe abaixo do conteúdo intrínseco (ex: valor em fonte monoespaçada + badge de delta), estourando a página em telas estreitas (achado real na Fase 12: 4 KPI cards em grid de 2 colunas no mobile empurravam a página ~12px além da viewport). min-width:0 deixa o item respeitar o tamanho da coluna/track de verdade. */ min-width:0; } /* levantada leve no hover — mesmo pedido de "mais animada" aplicado a todo card do app (dashboard, cofrinhos, viagens, etc.) via classe compartilhada. */ .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);} .card-accent-income{border-left:3px solid var(--color-success);} .card-accent-expense{border-left:3px solid var(--color-danger);} .card-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);font-weight:600;margin:0 0 10px;} /* Fase 018 §6: números financeiros são os protagonistas do app — peso 800 (extrabold), não só 700, pra se destacar de verdade do rótulo ao lado (.card-title, 600) sem aumentar o tamanho da fonte. */ /* QA-001: valores muito grandes (ex.: soma de vários anos, ou um lançamento isolado com muitos dígitos) estouravam a largura do card mesmo com o min-width:0 da Fase 12 acima — o número quebrava só no espaço entre "R$" e o valor, e o valor em si (sem espaços) transbordava e ficava cortado pela borda do card no mobile. overflow-wrap permite quebrar dentro do próprio número quando não há alternativa, em vez de vazar pra fora do card. */ .stat-value{font-family:var(--font-display);font-size:var(--font-2xl);font-weight:800;letter-spacing:-.01em;overflow-wrap:anywhere;} .stat-value.pos{color:var(--color-success);} .stat-value.neg{color:var(--color-danger);} .stat-note{font-size:12px;color:var(--color-text-muted);margin-top:6px;} .section{margin-bottom:var(--spacing-8);} .section-title{font-family:var(--font-display);font-size:var(--font-lg);font-weight:700;margin:0 0 var(--spacing-4);display:flex;align-items:center;gap:8px;letter-spacing:-.005em;} .kpi-card{display:flex;flex-direction:column;gap:8px;} .kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;} .kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;font-family:var(--font-body);} .kpi-delta.up{color:var(--color-success);background:var(--color-success-soft);} .kpi-delta.down{color:var(--color-danger);background:var(--color-danger-soft);} .kpi-delta.flat{color:var(--color-text-muted);background:var(--color-surface-3);} .kpi-spark{display:block;margin-top:2px;} .divider{height:1px;background:var(--color-border);margin:var(--spacing-5) 0;} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-6);} /* ============================================================ 9. TABELAS ============================================================ */ .table{width:100%;border-collapse:collapse;} .table th{ text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--color-text-muted);padding:8px 10px;border-bottom:1px solid var(--color-border);font-weight:600; } .table td{padding:11px 10px;border-bottom:1px solid var(--color-border-soft);font-size:13.5px;} .table tr:last-child td{border-bottom:none;} .table tbody tr{transition:background var(--transition-fast);} .table tbody tr:hover{background:var(--color-surface-2);} .table td.num{text-align:right;font-variant-numeric:tabular-nums;} .table-row-input input,.table-row-input select{ background:var(--color-surface-3);border:1px solid var(--color-border);color:var(--color-text); border-radius:6px;padding:6px 8px;font-size:13px;width:100%;transition:border-color var(--transition-fast); } .table-row-input input:focus,.table-row-input select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft);} .table-row-input input:disabled,.table-row-input select:disabled{background:transparent;border-color:transparent;color:var(--color-text);opacity:.85;cursor:default;} .remove-btn{ background:none;border:none;color:var(--color-text-muted);font-size:16px;line-height:1;border-radius:6px; min-width:26px;min-height:26px;display:inline-flex;align-items:center;justify-content:center; transition:background var(--transition-fast), color var(--transition-fast); } .remove-btn:hover{color:var(--color-danger);background:var(--color-danger-soft);} /* ============================================================ 10. BADGES / PILLS ============================================================ */ .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;} .pill-green{background:var(--color-success-soft);color:var(--color-success);} .pill-red{background:var(--color-danger-soft);color:var(--color-danger);} .pill-gold{background:var(--color-primary-soft);color:var(--color-primary);} /* ============================================================ 11. ALERTAS ============================================================ */ .alert-box{ display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--radius-sm); font-size:13px;line-height:1.5;margin-bottom:10px;border:1px solid transparent; } .alert-ok{background:var(--color-success-soft);color:var(--color-success);} .alert-warn{background:var(--color-danger-soft);color:var(--color-danger);} /* ============================================================ 12. PROGRESSO ============================================================ */ .progress-card{display:flex;flex-direction:column;gap:10px;} .progress-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;} .progress-track{height:8px;background:var(--color-surface-3);border-radius:var(--radius-pill);overflow:hidden;border:1px solid var(--color-border);} /* Era um gradiente com glow via ::after (blur) — a Seção 26 do briefing pede pra evitar "sombra gigante"/efeito chamativo; cor primária sólida já comunica progresso com clareza suficiente. */ .progress-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-pill);transition:width .7s cubic-bezier(.2,.8,.2,1);} /* Celebração ao bater 100% de uma meta (reserva/investimento/cofrinho) — flash único ao renderizar, não um loop (reforça "aconteceu algo bom" sem virar dashboard barulhento). Pedido explícito de "mais animada, tipo Duolingo". filter:brightness em vez de transform:scale de propósito — o pai `.progress-track` tem overflow:hidden (8px de altura fixa), então qualquer scale/box-shadow do preenchimento seria cortado; brightness pinta dentro da própria caixa, sem esse problema. */ .progress-fill.is-achieved{animation:progress-pop .6s ease-out;} @keyframes progress-pop{0%{filter:brightness(1);}35%{filter:brightness(1.55);}100%{filter:brightness(1);}} /* ============================================================ 13. SEGMENTED CONTROL ============================================================ */ .segmented{display:inline-flex;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:3px;gap:2px;} .segmented button{border:none;background:transparent;color:var(--color-text-muted);font-size:12.5px;font-weight:600;padding:6px 15px;border-radius:var(--radius-pill);font-family:var(--font-body);transition:background var(--transition-fast), color var(--transition-fast);} .segmented button.active{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm);} .segmented button:hover:not(.active){color:var(--color-text);} /* ============================================================ 14. MODAL ============================================================ */ .modal-overlay{ position:fixed;inset:0;background:rgba(8,9,14,.55);display:flex;align-items:center;justify-content:center; z-index:60;padding:20px;backdrop-filter:blur(2px); animation:modal-fade var(--transition-normal) ease; } [data-theme="light"] .modal-overlay{background:rgba(30,32,40,.24);} @keyframes modal-fade{from{opacity:0;}to{opacity:1;}} .modal{ background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-modal); padding:var(--spacing-7);max-width:460px;width:100%;box-shadow:var(--shadow-md); animation:modal-in var(--transition-normal) cubic-bezier(.2,.8,.2,1); } @keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}} .modal h3{font-family:var(--font-display);margin:0 0 var(--spacing-4);font-size:var(--font-lg);} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:var(--spacing-5);} /* ============================================================ 15. TOAST ============================================================ */ .toast{ position:fixed;bottom:22px;right:22px;background:var(--color-surface-2);border:1px solid var(--color-border); color:var(--color-text);padding:12px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600; box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px); transition:opacity var(--transition-normal), transform var(--transition-normal);pointer-events:none;z-index:50; max-width:340px; } .toast.show{opacity:1;transform:translateY(0);} .toast.error{border-color:var(--color-danger-soft);color:var(--color-danger);} /* ============================================================ 16. EMPTY STATE / SKELETON ============================================================ */ .empty-state{ text-align:center;padding:56px 20px;color:var(--color-text-muted); border:1px dashed var(--color-border);border-radius:var(--radius-lg); } .empty-state svg{margin:0 auto 14px;opacity:.7;} .empty-state-mascot{display:block;margin:0 auto 14px;width:96px;height:auto;} /* Mensagem contextual do mascote (item 3 de 07-mascot-brand-system.md) — usado hoje só no Painel quando o mês fecha negativo ("calma, vamos entender onde o dinheiro foi"). Mesma regra de sempre: alt="" decorativo, nunca sozinho como única fonte da informação (o texto ao lado já diz tudo). */ .mascot-note{ display:flex;align-items:center;gap:14px; background:var(--color-surface-2);border:1px solid var(--color-border); border-radius:var(--radius-lg);padding:var(--spacing-4) var(--spacing-5); margin-bottom:var(--spacing-6); } .mascot-note img{width:56px;height:56px;flex-shrink:0;object-fit:contain;} .mascot-note p{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-text-muted);} .mascot-note strong{display:block;font-family:var(--font-display);font-size:14.5px;color:var(--color-text);margin-bottom:2px;} @media(max-width:520px){.mascot-note{gap:10px;padding:var(--spacing-3) var(--spacing-4);}.mascot-note img{width:44px;height:44px;}} /* Ícone pequeno do mascote colado no "68%"/"100%" de uma meta batida — reforço visual do flash de cor já existente (`.progress-fill.is-achieved`), não substitui a informação (o texto "atingida em X" já existe do lado). */ .progress-mascot{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin-left:6px;} .empty-state strong{color:var(--color-text);display:block;margin-bottom:6px;font-family:var(--font-display);font-size:var(--font-lg);} .empty-state .btn{margin-top:16px;} .skeleton{background:linear-gradient(90deg,var(--color-surface-2) 25%,var(--color-border-soft) 37%,var(--color-surface-2) 63%); background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite;border-radius:var(--radius-sm);} @keyframes skeleton-shimmer{0%{background-position:100% 50%;}100%{background-position:0 50%;}} .skeleton-block{height:14px;margin-bottom:10px;} .skeleton-card{height:96px;border-radius:var(--radius-lg);} .skeleton-wrap .grid{margin-bottom:var(--spacing-8);} /* ============================================================ 17. GRÁFICOS ============================================================ */ .chart-wrap{overflow-x:auto;} .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--color-text-muted);} .legend-item{display:flex;align-items:center;gap:6px;} .legend-dot{width:9px;height:9px;border-radius:2px;} .chart-tooltip{position:fixed;pointer-events:none;background:var(--color-surface-2);border:1px solid var(--color-border-strong); border-radius:8px;padding:9px 12px;font-size:12px;z-index:100;opacity:0;transition:opacity .1s; box-shadow:var(--shadow-md);font-family:var(--font-body);min-width:120px;} .chart-tooltip.show{opacity:1;} .chart-tooltip .tt-title{font-weight:700;margin-bottom:5px;color:var(--color-text);font-family:var(--font-display);font-size:12.5px;} .chart-tooltip .tt-row{display:flex;justify-content:space-between;gap:14px;padding:1px 0;} .chart-tooltip .tt-dot{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px;} .chart-hover-line{stroke:var(--color-border-strong);stroke-width:1;pointer-events:none;} /* ============================================================ 18. COMPONENTES MENORES ============================================================ */ .month-card{ background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg); padding:var(--spacing-4) var(--spacing-5);display:flex;justify-content:space-between;align-items:center;margin-bottom:10px; transition:border-color var(--transition-fast); } .month-card:hover{border-color:var(--color-primary);} .month-card-label{font-family:var(--font-display);font-weight:700;font-size:15px;} .month-card-sub{font-size:12px;color:var(--color-text-muted);margin-top:3px;} .month-card-right{display:flex;align-items:center;gap:14px;} .month-card-saldo{font-weight:700;font-size:16px;} /* Fase 030 (v1.4): grupos de categoria — mesmo padrão
/ nativo já usado no accordion da sidebar (.nav-group) e no FAQ, sem JS de toggle. --group-color é setado inline por categoria/grupo (cor própria). */ .category-group{margin-bottom:var(--spacing-3);} .category-group-summary{ display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none; padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg); background:var(--color-surface);border:1px solid var(--color-border); transition:border-color var(--transition-fast); } .category-group-summary:hover{border-color:var(--group-color, var(--color-primary));} .category-group-summary::-webkit-details-marker{display:none;} .category-group-dot{width:10px;height:10px;border-radius:50%;background:var(--group-color, var(--color-primary));flex-shrink:0;} .category-group-name{font-family:var(--font-display);font-weight:700;font-size:14px;flex:1;} .category-group-count{font-size:12px;color:var(--color-text-muted);} .category-group-summary::after{content:"+";font-size:15px;color:var(--color-text-faint);transition:transform var(--transition-fast);margin-left:4px;} .category-group[open] .category-group-summary::after{transform:rotate(45deg);} .category-group-body{padding-top:10px;} .emoji-grid{ display:grid;grid-template-columns:repeat(8,1fr);gap:4px; max-height:180px;overflow-y:auto;padding:8px; background:var(--color-surface-3);border:1px solid var(--color-border);border-radius:var(--radius-sm); } .emoji-choice{ padding:6px 0;border-radius:6px; border:1px solid transparent;background:transparent;color:var(--color-text-muted); display:flex;align-items:center;justify-content:center; transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .emoji-choice:hover{background:var(--color-surface-2);} .emoji-choice.selected{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary);} .mini-table{width:100%;} .mini-table-row{display:grid;grid-template-columns:1.3fr .9fr .9fr .9fr auto;gap:10px;padding:10px 4px; border-bottom:1px solid var(--color-border-soft);align-items:center;} .mini-table-row:last-child{border-bottom:none;} .mini-table-row.head{color:var(--color-text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding-bottom:8px;} .mini-table-row .mono{font-size:13px;} .section-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4);flex-wrap:wrap;gap:10px;} /* ============================================================ 19. PÁGINAS DE AUTENTICAÇÃO ============================================================ */ .auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;} .auth-card{width:100%;max-width:400px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg); box-shadow:var(--shadow-md);padding:36px 32px;} .auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:var(--spacing-6);} .auth-card h1{font-family:var(--font-display);font-size:var(--font-xl);margin:0 0 4px;} .auth-card .subtitle{color:var(--color-text-muted);font-size:var(--font-md);margin:0 0 var(--spacing-6);} .form-error{background:var(--color-danger-soft);color:var(--color-danger);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:16px;display:none;} .form-error.visible{display:block;} .auth-footer{margin-top:20px;text-align:center;font-size:13px;color:var(--color-text-muted);} .auth-theme-toggle{position:absolute;top:20px;right:20px;} .loading-gate{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:14px;} /* ============================================================ 20. UTILITÁRIOS / IMPRESSÃO / RESPONSIVO ============================================================ */ .num, .table td.num, .stat-value, .mono{font-family:var(--font-mono);font-weight:600;} /* Fase 018 §6: achado real — a regra acima (pré-existente, documentada desde a Fase 017) faz TODO .stat-value cair pra IBM Plex Mono 600, inclusive os 4 números principais do Painel (Entradas/Saídas/Saldo/ Patrimônio), o que conflita com o pedido explícito desta fase ("números financeiros são os protagonistas... Outfit 700/800"). Correção deliberadamente cirúrgica: só os KPIs de destaque do Painel (.kpi-card, maior prioridade visual por §11) voltam pra Outfit 800 — o monoespaçado continua em tabelas/relatórios/valores compactos, onde o alinhamento de dígito é uma escolha de legibilidade real, não um acidente (não pedido pra mudar, e mudar quebraria o alinhamento em colunas de tabela densa).*/ .kpi-card .stat-value{font-family:var(--font-display);font-weight:800;} /* Suporte a prefers-reduced-motion (briefing Seção 23) — reduz transição/ animação a quase-instantâneo em vez de removê-las por completo (some navegador ainda depende de opacity:0→1 pra estado final correto do skeleton/spinner, então 1ms com steps(1) troca o estado sem animar). */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } @media print{ body{background:#fff !important;color:#111 !important;} .sidebar, .no-print, .chart-tooltip, .toast{display:none !important;} .app{display:block !important;} .content{padding:0 !important;max-width:none !important;} .print-header{display:block !important;margin-bottom:18px;} .print-header h1{font-family:var(--font-display);font-size:20px;margin:0 0 2px;color:#111;} .print-header p{font-size:11px;color:#555;margin:0;} .card{background:#fff !important;border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid;} .stat-value, .num, .mono{color:#111 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;} .card-title, .view-sub, .stat-note, .hint{color:#555 !important;} .stat-value.pos{color:#1a8a54 !important;} .stat-value.neg{color:#c0324a !important;} .grid-4{grid-template-columns:repeat(4,1fr) !important;} .two-col{grid-template-columns:1fr 1fr !important;} svg text{fill:#333 !important;} svg line{stroke:#ddd !important;} .section{margin-bottom:16px;} } @media(max-width:1080px){ .content{padding:var(--spacing-6) var(--spacing-6);} } @media(max-width:900px){ .two-col{grid-template-columns:1fr;} .content{padding:var(--spacing-5) var(--spacing-4);} .view-title{font-size:var(--font-xl);} } /* Mobile/tablet (<=900px): sidebar vira um drawer off-canvas, aberto por um hamburger fixo no topo. Não é só "sidebar mais fina" — é outro padrão de navegação (seção 25/41 do redesign: mobile não é desktop encolhido). Limite subido de 720 pra 900 (auditoria UX-001, achado confirmado ao vivo com Playwright): o modo ícone-only que existia entre 721-900px escondia o rótulo do grupo (única forma de abrir um
fechado) e a regra que tentava manter os itens visíveis mesmo assim (`display:flex!important` no descendente) não vence o comportamento nativo do
fechado, que suprime a renderização do conteúdo — confirmado com `elementFromPoint` retornando o `