/* * design-system.css — MeuBolso * * Piso de disciplina inspirado no Ação (paleta neutra única, cards/badges/alerts * sóbrios, números tabulares) + adições pensadas para controle financeiro pessoal * (não terminal de mercado): hero-number, chips de categoria, empty states, * foco visível, alvos de toque ≥44px, timestamp de sincronização. * * Ativado via: (mesmo mecanismo já usado por dark.css). * Convive com dark.css — páginas ainda não migradas (achievements, ai_assistant, * chat, admin) continuam funcionando normalmente. */ :root { /* ── Fundo e superfícies ── */ --mb-bg: #f5f6f8; --mb-surface: #ffffff; --mb-surface-2: #f0f1f4; --mb-border: #e2e4ea; /* ── Texto ── */ --mb-text: #1a1d29; --mb-text-muted: #667085; --mb-text-faint: #98a2b3; /* ── Marca ── */ --mb-accent: #0f7a6b; --mb-accent-hover: #0b6358; --mb-accent-soft: rgba(15, 122, 107, 0.1); /* ── Financeiro (semântico — nunca decorativo) ── */ --mb-positive: #15803d; --mb-positive-soft: rgba(21, 128, 61, 0.1); --mb-negative: #c0392b; --mb-negative-soft: rgba(192, 57, 43, 0.1); --mb-warning: #b45309; --mb-warning-soft: rgba(180, 83, 9, 0.1); --mb-info: #1d6fa5; --mb-info-soft: rgba(29, 111, 165, 0.1); /* ── Categorias (paleta fixa de 8 — reconhecível de relance) ── */ --mb-cat-1: #2b6cb0; /* azul */ --mb-cat-2: #0f7a6b; /* teal */ --mb-cat-3: #6c4fa1; /* roxo */ --mb-cat-4: #b45309; /* âmbar */ --mb-cat-5: #be3455; /* rosa */ --mb-cat-6: #3b4fa0; /* índigo */ --mb-cat-7: #4d7c0f; /* oliva */ --mb-cat-8: #52606d; /* ardósia */ /* ── Forma ── */ --mb-radius-sm: 8px; --mb-radius: 12px; --mb-radius-lg: 16px; --mb-radius-pill: 100px; --mb-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05); --mb-shadow: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 20px rgba(16, 24, 40, 0.05); --mb-shadow-hover: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 28px rgba(16, 24, 40, 0.08); --mb-transition: 0.2s ease; /* ── Tipografia — fonte de sistema (mesma família Apple/Android usa nativamente) ── */ --mb-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ── Dark mode — reaproveita os hex já validados em dark.css para continuidade visual com páginas ainda não migradas (achievements, ai_assistant, chat) ── */ [data-theme="dark"] { --mb-bg: #0f0f17; --mb-surface: #1a1a2e; --mb-surface-2: #22223a; --mb-border: #2a2a3e; --mb-text: #e2e2ee; --mb-text-muted: #8888bb; --mb-text-faint: #6666aa; --mb-accent: #34c3ad; --mb-accent-hover: #4fd1c0; --mb-accent-soft: rgba(52, 195, 173, 0.14); --mb-positive: #00b386; --mb-positive-soft: rgba(0, 179, 134, 0.14); --mb-negative: #e55039; --mb-negative-soft: rgba(229, 80, 57, 0.14); --mb-warning: #f6c23e; --mb-warning-soft: rgba(246, 194, 62, 0.14); --mb-info: #48cae4; --mb-info-soft: rgba(72, 202, 228, 0.14); --mb-cat-1: #6fa8d8; --mb-cat-2: #34c3ad; --mb-cat-3: #b39ddb; --mb-cat-4: #f0b429; --mb-cat-5: #f27a9b; --mb-cat-6: #8b9ae8; --mb-cat-7: #a3d977; --mb-cat-8: #9aa5b1; --mb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --mb-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); --mb-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ============================================================ BASE ============================================================ */ body { font-family: var(--mb-font-sans); background-color: var(--mb-bg); color: var(--mb-text); } /* Todo digito que representa dinheiro/quantidade alinha em coluna — sem trocar de fonte (evita cara de "terminal"), só a feature tabular. */ .mb-money, .mb-number, .table td.mb-money, .mb-hero-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ============================================================ HERO NUMBER — o valor mais importante da tela (saldo, resultado do mês) precisa ser inequivocamente o maior elemento da página. Ação trata todo número do mesmo tamanho (faz sentido numa tabela de watchlist); controle pessoal precisa de um número "âncora". ============================================================ */ .mb-hero { display: flex; flex-direction: column; gap: 0.35rem; } .mb-hero-label { font-size: 0.8rem; font-weight: 600; color: var(--mb-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .mb-hero-value { font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--mb-text); } .mb-hero-value.positive { color: var(--mb-positive); } .mb-hero-value.negative { color: var(--mb-negative); } .mb-hero-sub { font-size: 0.85rem; color: var(--mb-text-muted); } /* ============================================================ NAVEGAÇÃO — neutra e consistente com o resto do app (era azul saturado fixo, ignorando o tema claro/escuro escolhido). ============================================================ */ .mb-navbar { background-color: var(--mb-surface); border-bottom: 1px solid var(--mb-border); } .mb-navbar .navbar-brand { color: var(--mb-text); font-weight: 700; } .mb-navbar .navbar-brand i { color: var(--mb-accent); } .mb-navbar .nav-link { color: var(--mb-text-muted); font-weight: 500; transition: color var(--mb-transition); } .mb-navbar .nav-link:hover, .mb-navbar .nav-link.active { color: var(--mb-accent); } .mb-navbar .navbar-toggler { border-color: var(--mb-border); } .mb-navbar .dropdown-menu { background-color: var(--mb-surface); border-color: var(--mb-border); } .mb-navbar .dropdown-item { color: var(--mb-text); } .mb-navbar .dropdown-item:hover { background-color: var(--mb-surface-2); } /* dark.css estiliza .dark-toggle assumindo navbar sempre escura (bg-primary antigo); agora que a navbar acompanha o tema, precisa da cor do token. */ .mb-navbar .dark-toggle { color: var(--mb-text-muted); } .mb-navbar .dark-toggle:hover { color: var(--mb-text); background: var(--mb-surface-2); } /* User stats bar — presente em toda página logada; precisa competir menos com dados financeiros (era bg-light + badges saturados). */ .mb-stats-bar { background-color: var(--mb-surface-2); border-bottom: 1px solid var(--mb-border); color: var(--mb-text-muted); font-size: 0.85rem; } .mb-stats-bar .badge-soft-neutral { background: var(--mb-surface); } .mb-stats-bar .progress { background-color: var(--mb-border); } .mb-stats-bar .progress-bar { background-color: var(--mb-accent); } /* Footer — respeita o toggle de tema (era bg-dark fixo). */ .mb-footer { background-color: var(--mb-surface-2); color: var(--mb-text-muted); border-top: 1px solid var(--mb-border); } .mb-footer h6 { color: var(--mb-text); } /* ============================================================ CARDS ============================================================ */ .card, .mb-card { background-color: var(--mb-surface); border: 1px solid var(--mb-border); border-radius: var(--mb-radius); box-shadow: var(--mb-shadow-sm); color: var(--mb-text); transition: box-shadow var(--mb-transition); } .card:hover, .mb-card:hover { box-shadow: var(--mb-shadow); } .card-header { background-color: var(--mb-surface-2); border-bottom: 1px solid var(--mb-border); color: var(--mb-text); font-weight: 600; } .card-body { color: var(--mb-text); } /* ============================================================ BADGES / PILLS — "soft badge": fundo tintado + texto na cor sólida ============================================================ */ .badge-soft-success, .badge-soft-positive { background: var(--mb-positive-soft); color: var(--mb-positive); } .badge-soft-danger, .badge-soft-negative { background: var(--mb-negative-soft); color: var(--mb-negative); } .badge-soft-warning { background: var(--mb-warning-soft); color: var(--mb-warning); } .badge-soft-info { background: var(--mb-info-soft); color: var(--mb-info); } .badge-soft-neutral { background: var(--mb-surface-2); color: var(--mb-text-muted); } [class^="badge-soft-"] { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.65rem; border-radius: var(--mb-radius-pill); font-size: 0.75rem; font-weight: 600; } /* ============================================================ CATEGORIA — ícone + cor fixos por categoria, reconhecível de relance em qualquer lista (dashboard, transações, orçamentos). Uso: ============================================================ */ .mb-cat-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; font-size: 0.85rem; color: #fff; } .mb-cat-icon[data-cat="1"] { background: var(--mb-cat-1); } .mb-cat-icon[data-cat="2"] { background: var(--mb-cat-2); } .mb-cat-icon[data-cat="3"] { background: var(--mb-cat-3); } .mb-cat-icon[data-cat="4"] { background: var(--mb-cat-4); } .mb-cat-icon[data-cat="5"] { background: var(--mb-cat-5); } .mb-cat-icon[data-cat="6"] { background: var(--mb-cat-6); } .mb-cat-icon[data-cat="7"] { background: var(--mb-cat-7); } .mb-cat-icon[data-cat="8"] { background: var(--mb-cat-8); } .mb-cat-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem 0.2rem 0.35rem; border-radius: var(--mb-radius-pill); font-size: 0.78rem; font-weight: 600; background: var(--mb-surface-2); color: var(--mb-text); } .mb-cat-chip .mb-cat-icon { width: 18px; height: 18px; font-size: 0.55rem; } /* ============================================================ REMAPEAMENTO GLOBAL — .text-success/.bg-success etc. do Bootstrap não seguem data-theme (só data-bs-theme, que não usamos), então sempre resolviam pro verde/vermelho claros do Bootstrap mesmo no escuro. Redireciona pros tokens únicos em TODO o app de uma vez, inclusive páginas ainda não migradas (achievements, ai_assistant). ============================================================ */ .text-success { color: var(--mb-positive) !important; } .text-danger { color: var(--mb-negative) !important; } .text-warning { color: var(--mb-warning) !important; } .text-info { color: var(--mb-info) !important; } .text-primary { color: var(--mb-accent) !important; } .text-secondary { color: var(--mb-text-muted) !important; } .badge.bg-success { background-color: var(--mb-positive) !important; } .badge.bg-danger { background-color: var(--mb-negative) !important; } .badge.bg-warning { background-color: var(--mb-warning) !important; color: #1a1d29 !important; } .badge.bg-info { background-color: var(--mb-info) !important; } .progress-bar.bg-success { background-color: var(--mb-positive) !important; } .progress-bar.bg-danger { background-color: var(--mb-negative) !important; } .progress-bar.bg-warning { background-color: var(--mb-warning) !important; } .progress-bar.bg-info { background-color: var(--mb-info) !important; } .progress-bar.bg-gradient-success { background-color: var(--mb-positive) !important; } /* ============================================================ VARIAÇÃO +/- — indicador único reutilizado em dashboard, transações, orçamentos e metas (hoje cada tela faz diferente). ============================================================ */ .mb-delta { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; font-variant-numeric: tabular-nums; } .mb-delta.positive { color: var(--mb-positive); } .mb-delta.negative { color: var(--mb-negative); } .mb-delta.neutral { color: var(--mb-text-muted); } .mb-delta::before { font-size: 0.7em; } .mb-delta.positive::before { content: "▲"; } .mb-delta.negative::before { content: "▼"; } .mb-delta.neutral::before { content: "▬"; } /* ============================================================ ALERTS — fundo tintado + borda de destaque, nunca o alerta saturado padrão do Bootstrap. ============================================================ */ .alert { border: none; border-radius: var(--mb-radius-sm); font-weight: 500; } .alert-success { background-color: var(--mb-positive-soft); color: var(--mb-positive); border-left: 4px solid var(--mb-positive); } .alert-danger { background-color: var(--mb-negative-soft); color: var(--mb-negative); border-left: 4px solid var(--mb-negative); } .alert-warning { background-color: var(--mb-warning-soft); color: var(--mb-warning); border-left: 4px solid var(--mb-warning); } .alert-info { background-color: var(--mb-info-soft); color: var(--mb-info); border-left: 4px solid var(--mb-info); } /* ============================================================ TABELAS ============================================================ */ .table { color: var(--mb-text); } .table thead th { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--mb-text-muted); border-bottom: 2px solid var(--mb-border); font-weight: 700; } .table td { border-bottom-color: var(--mb-border); vertical-align: middle; } .table-hover tbody tr:hover { background-color: var(--mb-surface-2); } /* ============================================================ FORMULÁRIOS ============================================================ */ .form-control, .form-select { background-color: var(--mb-surface); border: 1px solid var(--mb-border); color: var(--mb-text); border-radius: var(--mb-radius-sm); } .form-control:focus, .form-select:focus { background-color: var(--mb-surface); border-color: var(--mb-accent); color: var(--mb-text); box-shadow: 0 0 0 0.2rem var(--mb-accent-soft); } .form-label { font-weight: 600; font-size: 0.88rem; color: var(--mb-text); } /* ============================================================ BOTÕES — leve elevação no hover, exceto colados em grupo ============================================================ */ .btn { font-weight: 600; border-radius: var(--mb-radius-sm); transition: transform var(--mb-transition), box-shadow var(--mb-transition); } .btn:hover { transform: translateY(-1px); box-shadow: var(--mb-shadow-sm); } .btn-group .btn:hover { transform: none; box-shadow: none; } .btn-primary, .btn-mb-accent { background-color: var(--mb-accent); border-color: var(--mb-accent); } .btn-primary:hover, .btn-mb-accent:hover { background-color: var(--mb-accent-hover); border-color: var(--mb-accent-hover); } .btn-success { background-color: var(--mb-positive); border-color: var(--mb-positive); } .btn-warning { background-color: var(--mb-warning); border-color: var(--mb-warning); color: #1a1d29; } .btn-danger { background-color: var(--mb-negative); border-color: var(--mb-negative); } .btn-info { background-color: var(--mb-info); border-color: var(--mb-info); color: #fff; } .btn-outline-primary { color: var(--mb-accent); border-color: var(--mb-accent); } .btn-outline-primary:hover { background-color: var(--mb-accent); border-color: var(--mb-accent); } /* ============================================================ WIDGETS COMPARTILHADOS — chart-container/widget-header e o anel de saúde financeira apareciam duplicados, quase idênticos, em dashboard.html e budgets.html. Centralizados aqui uma vez só. ============================================================ */ .chart-container { background: var(--mb-surface); border: 1px solid var(--mb-border); border-radius: var(--mb-radius); padding: 20px; height: 100%; } .widget-header { border-bottom: 1px solid var(--mb-border); padding-bottom: 15px; margin-bottom: 20px; } .widget-title { color: var(--mb-text); font-weight: 600; font-size: 1.1rem; } .health-score { position: relative; display: inline-block; } .health-score-circle { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; } .health-score-inner { width: 90px; height: 90px; border-radius: 50%; background: var(--mb-surface); display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: inset 0 2px 10px rgba(0,0,0,0.08); } .health-score-value { font-size: 1.8rem; font-weight: 700; color: var(--mb-positive); margin: 0; font-variant-numeric: tabular-nums; } .health-score-label { font-size: 0.7rem; color: var(--mb-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ MÉTRICAS EM DESTAQUE — reutilizado em dashboard.html e budgets.html (linha de Receita/Despesa/Resultado no topo de cada tela). Um card pode levar .hero para virar o número âncora da tela. ============================================================ */ .metric-card { background: var(--mb-surface); border: 1px solid var(--mb-border); border-radius: var(--mb-radius); padding: 1.75rem; box-shadow: var(--mb-shadow-sm); transition: box-shadow 0.2s ease; height: 100%; } .metric-card:hover { box-shadow: var(--mb-shadow); } .metric-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; color: #fff; } .metric-icon.positive { background: var(--mb-positive); } .metric-icon.negative { background: var(--mb-negative); } .metric-icon.accent { background: var(--mb-accent); } .metric-value { font-size: 1.6rem; font-weight: 700; color: var(--mb-text); margin-bottom: 0.4rem; font-variant-numeric: tabular-nums; } .metric-value.positive { color: var(--mb-positive); } .metric-value.negative { color: var(--mb-negative); } .metric-label { font-size: 0.85rem; color: var(--mb-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .metric-card.hero .metric-value { font-size: clamp(2.1rem, 4vw, 2.75rem); } @media (max-width: 768px) { .metric-card { margin-bottom: 15px; } .metric-card.hero .metric-value { font-size: 2rem; } } /* Orçado vs realizado — barra de progresso, usada em dashboard.html e budgets.html. */ .budget-progress { height: 10px; border-radius: 10px; background: var(--mb-border); overflow: hidden; margin: 0.75rem 0; } .budget-progress-bar { height: 100%; border-radius: 10px; transition: width 0.5s ease; background: var(--mb-info); } .budget-progress-bar.warning { background: var(--mb-warning); } .budget-progress-bar.danger { background: var(--mb-negative); } .budget-progress-bar.success { background: var(--mb-positive); } /* Card com faixa lateral colorida por status — usado em dashboard.html (indicadores avançados) e na página de demonstração pública. */ .indicator-card { background: var(--mb-surface); border-left: 4px solid; border-radius: var(--mb-radius-sm); transition: transform 0.2s ease; } .indicator-card:hover { transform: translateY(-2px); } .indicator-excellent { border-left-color: var(--mb-positive); } .indicator-good { border-left-color: var(--mb-info); } .indicator-warning { border-left-color: var(--mb-warning); } .indicator-danger { border-left-color: var(--mb-negative); } /* Cartão com faixa lateral colorida (usado em budgets.html na análise 50-30-20) — classes vinham sem definição nenhuma no projeto. */ .border-left-success { border-left: 4px solid var(--mb-positive); } .border-left-warning { border-left: 4px solid var(--mb-warning); } .border-left-danger { border-left: 4px solid var(--mb-negative); } .border-left-info { border-left: 4px solid var(--mb-info); } .border-left-primary { border-left: 4px solid var(--mb-accent); } /* ============================================================ EMPTY STATES — tratado como parte do produto, não deixado em branco. Uso: div.mb-empty > i.mb-empty-icon + h5 + p + ação ============================================================ */ .mb-empty { text-align: center; padding: 3rem 1.5rem; color: var(--mb-text-muted); } .mb-empty-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--mb-surface-2); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--mb-text-faint); } .mb-empty h5 { color: var(--mb-text); margin-bottom: 0.4rem; } .mb-empty p { margin-bottom: 1.2rem; font-size: 0.92rem; } /* ============================================================ SYNC STATUS — padrão "última atualização" (o Ação já faz isso bem para cotação; aplicamos ao Open Finance e a listas gerais). ============================================================ */ .mb-sync-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--mb-text-faint); } .mb-sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mb-positive); flex-shrink: 0; } .mb-sync-dot.stale { background: var(--mb-text-faint); } /* ============================================================ ACESSIBILIDADE — foco visível e alvo de toque mínimo (HIG Apple: 44×44pt). O tema atual depende só do halo default do Bootstrap, que em alguns componentes customizados não aparece. ============================================================ */ a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 2px; } .mb-tap-target { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 576px) { .btn, .nav-link, .dropdown-item { min-height: 44px; } } /* ============================================================ MOVIMENTO — transição suave de tema, respeitando quem pede menos animação. ============================================================ */ body, .card, .mb-card, .navbar, .footer, .form-control, .form-select, .table, .modal-content { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }