/* ========================================================= FINANÇAS — UI KIT / CSS COMPARTILHADO ========================================================= Design tokens e componentes reutilizados em todas as telas do protótipo. Para criar uma tela nova: 1. Copie a estrutura base de index.html (doctype, meta tags, o bloco de símbolos/ícones, o script de tema). 2. No , troque o por: 3. Use as classes já existentes (.transactions, .transaction, .summary-strip, .section, .see-all, .focus-card, .icon-button, .hero, .insights-box, .income-panel, .fab, .bottom-nav, .desktop-sidebar, .desktop-topbar, .desktop-right, etc.) em vez de criar CSS novo — assim toda tela nasce consistente com espaçamento, cor, raio de borda e tipografia iguais. 4. Só escreva CSS novo para o que for realmente exclusivo daquela tela (ex.: um gráfico específico de Relatórios). Índice rápido: - :root / [data-theme="light"] → tokens de cor (dark/light) - Reset base → *, html, body, button, svg - .icon / .icon-sm / .icon-lg → dimensões de ícone - HEADER (mobile) → cabeçalho mobile + ações - MAIN → container de conteúdo - MONTH → seletor de mês - HERO → card de destaque com progresso - SUMMARY → tiras de estatística (3 colunas) - SECTION HEADINGS → títulos de seção + "Ver todas" - ATTENTION → card de destaque + ícone de categoria - TRANSACTIONS → lista de lançamentos (linha padrão) - INSIGHTS BOX → caixa de insights recolhível - INCOME → painel de receitas - FAB → botão flutuante de ação - NAV → navegação inferior (mobile) - DESKTOP → sidebar, topbar, right rail, breakpoints (900px, 1200px, 390px) ========================================================= */ :root{ --bg:#090B0D; --bg-gradient:rgba(200,242,107,.06); --surface:#101316; --surface-2:#15191D; --surface-3:#1A1F24; --line:rgba(255,255,255,.075); --line-strong:rgba(255,255,255,.12); --text:#F5F7F8; --text-2:#B4BAC1; --text-3:#737B84; --accent:#C8F26B; --accent-dark:#9FC541; --accent-soft:rgba(200,242,107,.11); --red:#FF707A; --red-soft:rgba(255,112,122,.11); --orange:#FFB45C; --orange-soft:rgba(255,180,92,.11); --blue:#72A7FF; --blue-soft:rgba(114,167,255,.11); --green:#65D99B; --green-soft:rgba(101,217,155,.11); --purple:#B995FF; --purple-soft:rgba(185,149,255,.11); --hero-1:#191E19; --hero-2:#141814; --hero-3:#101411; --sidebar:#0C0F11; --glass:rgba(20,23,26,.88); --top-glass:rgba(9,11,13,.86); --shadow:0 24px 70px rgba(0,0,0,.30); --mobile-shell-max:720px; --mobile-gutter:16px; } html[data-theme="light"]{ --bg:#F3F4F1; --bg-gradient:rgba(181,220,76,.08); --surface:#FFFFFF; --surface-2:#F8F9F6; --surface-3:#EEF0EB; --line:rgba(25,29,24,.075); --line-strong:rgba(25,29,24,.12); --text:#191C18; --text-2:#5B625A; --text-3:#6D726B; --accent:#B9E95A; --accent-dark:#779826; --accent-soft:rgba(155,198,55,.12); --red:#E05460; --red-soft:rgba(224,84,96,.085); --orange:#DC8E2C; --orange-soft:rgba(220,142,44,.09); --blue:#4A84D8; --blue-soft:rgba(74,132,216,.085); --green:#2EA56A; --green-soft:rgba(46,165,106,.085); --purple:#8A67CF; --purple-soft:rgba(138,103,207,.085); --hero-1:#FBFCF9; --hero-2:#F5F7F1; --hero-3:#EEF2E7; --sidebar:#F7F8F5; --glass:rgba(255,255,255,.92); --top-glass:rgba(247,248,245,.90); --shadow: 0 18px 45px rgba(35,42,31,.07), 0 3px 12px rgba(35,42,31,.035); } *{ box-sizing:border-box; } a{ color:inherit; text-decoration:none; } html{ background:var(--bg); } body{ margin:0; min-height:100vh; color:var(--text); overflow-x:hidden; background: radial-gradient( circle at 50% -320px, var(--bg-gradient), transparent 580px ), var(--bg); font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; } button, input{ font:inherit; } button{ color:inherit; cursor:pointer; } svg{ display:block; } .app{ width:100%; min-height:100vh; padding-bottom:calc(108px + env(safe-area-inset-bottom)); overflow-x:hidden; } .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .icon-sm{ width:17px; height:17px; } .icon-lg{ width:23px; height:23px; } /* HEADER */ .mobile-header{ width:100%; max-width:calc(var(--mobile-shell-max) + (var(--mobile-gutter) * 2)); margin:0 auto; padding: calc(18px + env(safe-area-inset-top)) var(--mobile-gutter) 12px; } .header-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .user-area{ display:flex; align-items:center; gap:11px; } .avatar{ width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--accent); color:#10130A; font-size:13px; font-weight:800; box-shadow:0 0 0 4px var(--accent-soft); } .hello{ margin-bottom:2px; color:var(--text-3); font-size:12px; } .user-name{ font-size:16px; font-weight:700; } .header-actions{ display:flex; gap:6px; } .icon-button{ width:42px; height:42px; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); color:var(--text-2); } html[data-theme="light"] .icon-button{ background:rgba(255,255,255,.76); } .icon-button.desktop-search-toggle{ display:none; } .theme-toggle{ position:relative; } .theme-toggle .sun, .theme-toggle .moon{ position:absolute; transition:.25s ease; } html[data-theme="dark"] .sun{ opacity:0; transform:rotate(-45deg) scale(.6); } html[data-theme="dark"] .moon{ opacity:1; } html[data-theme="light"] .sun{ opacity:1; } html[data-theme="light"] .moon{ opacity:0; transform:rotate(45deg) scale(.6); } /* MAIN */ .main{ width:100%; max-width:var(--mobile-shell-max); margin:0 auto; padding:0 var(--mobile-gutter) 25px; } /* MONTH */ .month-selector{ display:grid; grid-template-columns:42px 1fr 42px; align-items:center; margin:5px 3px 18px; } .month-button{ width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; color:var(--text-3); } .month-button:last-child{ justify-self:end; } .current-month{ text-align:center; } .current-month strong{ display:block; font-size:15px; font-weight:700; } .current-month span{ display:block; margin-top:3px; color:var(--text-3); font-size:11px; } /* HERO */ .hero{ position:relative; overflow:hidden; padding:22px 20px 19px; border-radius:28px; border:1px solid color-mix(in srgb,var(--accent) 18%,transparent); background: linear-gradient( 145deg, var(--hero-1), var(--hero-2) 48%, var(--hero-3) ); box-shadow:var(--shadow); } .hero:before{ content:""; position:absolute; width:280px; height:280px; right:-145px; top:-175px; border-radius:50%; background:var(--accent-soft); } .hero-top, .hero-progress, .hero-bottom{ position:relative; z-index:2; } .hero-label{ display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:11px; } .hero-label-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); } .hero-amount{ margin-top:7px; font-size:clamp(34px,9vw,41px); line-height:1.08; font-weight:760; letter-spacing:-.055em; } .hero-progress{ margin:23px 0 17px; } .progress-heading{ display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; color:var(--text-3); font-size:11px; } .progress-heading strong{ color:var(--text-2); font-weight:650; } .progress{ height:7px; border-radius:99px; overflow:hidden; background:color-mix(in srgb,var(--text) 8%,transparent); } .progress-fill{ width:57%; height:100%; background:var(--accent); } .hero-bottom{ display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:14px; } .hero-small-label{ margin-bottom:4px; color:var(--text-3); font-size:11px; } .hero-small-value{ font-size:13px; font-weight:680; white-space:nowrap; } .hero-small-value.positive{ color:var(--accent-dark); } .hero-pill{ min-height:32px; display:flex; align-items:center; gap:5px; padding:0 10px; border-radius:99px; border:1px solid color-mix(in srgb,var(--accent) 17%,transparent); background:var(--accent-soft); color:var(--accent-dark); font-size:10px; } /* SUMMARY */ .summary-strip{ display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; margin:14px 0 28px; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .summary-item{ position:relative; min-height:92px; display:flex; flex-direction:column; justify-content:center; padding:13px 12px; } .summary-item:not(:last-child):after{ content:""; position:absolute; width:1px; height:36px; right:0; top:50%; transform:translateY(-50%); background:var(--line); } .summary-icon{ width:38px; height:38px; display:grid; place-items:center; margin-bottom:10px; border-radius:12px; } .summary-icon .icon-sm{ width:22px; height:22px; } .summary-icon.red{ color:var(--red); background:var(--red-soft); } .summary-icon.orange{ color:var(--orange); background:var(--orange-soft); } .summary-icon.green{ color:var(--green); background:var(--green-soft); } .summary-label{ color:var(--text-3); font-size:11px; } .summary-value{ margin-top:4px; font-size:13px; font-weight:700; } /* SECTION HEADINGS */ .section{ margin-bottom:29px; } /* FILTER CHIPS (list screens: Lançamentos, Receitas, Cartões...) */ .filter-tabs{ display:flex; gap:8px; margin:0 3px 20px; overflow-x:auto; scrollbar-width:none; } .filter-tabs::-webkit-scrollbar{ display:none; } .filter-chip{ flex:0 0 auto; height:38px; display:flex; align-items:center; gap:7px; padding:0 15px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; white-space:nowrap; } .filter-chip.active{ border-color:transparent; background:var(--accent); color:#111608; } .filter-chip .chip-count{ padding:1px 7px; border-radius:99px; background:color-mix(in srgb,var(--text) 8%,transparent); color:var(--text-3); font-size:10px; font-weight:700; } .filter-chip.active .chip-count{ background:rgba(17,22,8,.16); color:#111608; } /* SEARCH (tela Busca) */ .search-top{ display:flex; align-items:center; gap:10px; margin-bottom:20px; } .search-top input{ flex:1; height:48px; padding:0 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); font-size:14px; outline:none; } .search-top input:focus{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); } /* CALENDAR — works at any width (right rail on desktop, full Agenda screen) */ .calendar{ margin-top:19px; padding:14px; border:1px solid var(--line); border-radius:18px; background:var(--surface); } .calendar-heading{ display:flex; justify-content:space-between; margin-bottom:13px; font-size:11px; } .calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .calendar-day{ aspect-ratio:1; display:grid; place-items:center; border-radius:8px; color:var(--text-3); font-size:11px; } .calendar-day.heading{ aspect-ratio:auto; } .calendar-day.has-event{ background:var(--surface-3); color:var(--text); } .calendar-day.today{ background:var(--accent); color:#111608; font-weight:800; } /* Calendário grande da tela Agenda (mesma base, só maior) */ .calendar-large{ padding:20px; margin-bottom:26px; } .calendar-large .calendar-grid{ gap:8px; } .calendar-large .calendar-day{ font-size:13px; border-radius:12px; } .calendar-large .calendar-day.has-event{ position:relative; } .calendar-large .calendar-day.has-event:after{ content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--accent-dark); } .calendar-large .calendar-day.today.has-event:after{ background:#111608; } @media(min-width:640px){ .calendar-large{ padding:26px; } .calendar-large .calendar-day{ font-size:14px; } } /* GROUPED LIST HEADINGS (date/category group above a .transactions block) */ .list-date-heading{ margin:22px 3px 10px; color:var(--text-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; } .section > .list-date-heading:first-child{ margin-top:0; } .section-heading{ min-height:34px; display:flex; align-items:center; justify-content:space-between; margin:0 3px 12px; gap:12px; } .section-heading-left{ display:flex; align-items:center; gap:8px; } .section-heading h2{ margin:0; font-size:16px; font-weight:730; letter-spacing:-.025em; } .counter{ min-width:22px; height:22px; display:grid; place-items:center; padding:0 6px; border:1px solid var(--line); border-radius:99px; background:var(--surface-2); color:var(--text-3); font-size:11px; } .see-all{ display:flex; align-items:center; gap:2px; border:0; background:transparent; color:var(--text-3); font-size:11px; } a.see-all{ text-decoration:none; } .see-all .icon{ width:12px; height:12px; } /* ATTENTION */ .focus-card{ padding:15px; margin-bottom:10px; border-radius:20px; border:1px solid color-mix(in srgb,var(--orange) 15%,transparent); background: linear-gradient( 135deg, var(--orange-soft), var(--surface) ); } .focus-top{ display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:11px; } .category-icon{ width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:14px; background:var(--surface-3); color:var(--text-2); } .category-icon.orange{ color:var(--orange); background:var(--orange-soft); } .category-icon.red{ color:var(--red); background:var(--red-soft); } .category-icon.blue{ color:var(--blue); background:var(--blue-soft); } .category-icon.green{ color:var(--green); background:var(--green-soft); } .category-icon.purple{ color:var(--purple); background:var(--purple-soft); } .focus-info{ min-width:0; } .focus-info h3{ margin:0 0 4px; font-size:14px; font-weight:700; } .meta{ display:flex; align-items:center; gap:6px; color:var(--text-3); font-size:11px; } .meta-dot{ width:3px; height:3px; border-radius:50%; background:var(--text-3); } .focus-value{ min-width:85px; text-align:right; } .focus-value strong{ display:block; font-size:14px; } .focus-value span{ display:block; margin-top:5px; color:var(--orange); font-size:10px; font-weight:750; } .focus-actions{ display:grid; grid-template-columns:1fr 40px; gap:8px; margin-top:13px; padding-top:12px; border-top:1px solid var(--line); } .pay-button{ height:40px; border:0; border-radius:12px; background:var(--accent); color:#111608; font-size:11px; font-weight:800; } .more-button{ width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } /* TRANSACTIONS */ .transactions{ overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .transaction{ position:relative; min-height:72px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; padding:12px 13px; gap:11px; color:inherit; text-decoration:none; } .transaction + .transaction:before{ content:""; position:absolute; top:0; left:70px; right:13px; height:1px; background:var(--line); } .transaction-main{ min-width:0; } .transaction-name{ overflow:hidden; font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; } .transaction-detail{ display:flex; gap:5px; margin-top:5px; color:var(--text-3); font-size:11px; } .tag{ padding:3px 6px; border-radius:99px; background:color-mix(in srgb,var(--text) 4%,transparent); } .transaction-value{ min-width:82px; text-align:right; } .transaction-value strong{ display:block; font-size:13px; } .transaction-value span{ display:block; margin-top:5px; font-size:10px; } .danger{color:var(--red);} .success{color:var(--green);} .muted{color:var(--text-3);} /* ========================================================= NEW INSIGHTS BOX ========================================================= */ .insights-box{ overflow:hidden; margin-bottom:30px; border:1px solid var(--line); border-radius:23px; background: linear-gradient( 145deg, color-mix(in srgb,var(--surface-2) 78%,transparent), var(--surface) ); box-shadow: 0 10px 35px rgba(0,0,0,.08); } .insights-box-header{ display:flex; align-items:flex-end; justify-content:space-between; padding:18px 18px 15px; border-bottom:1px solid var(--line); } .insight-eyebrow{ margin-bottom:4px; color:var(--accent-dark); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; } .insights-box-header h2{ margin:0; font-size:17px; font-weight:740; letter-spacing:-.03em; } .insights-month{ padding-bottom:2px; color:var(--text-3); font-size:11px; } .insight-row{ position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; min-height:82px; padding:14px 16px; gap:12px; } .insight-row + .insight-row:before{ content:""; position:absolute; top:0; left:70px; right:16px; height:1px; background:var(--line); } .insight-row.alert{ background: linear-gradient( 90deg, var(--red-soft), transparent 60% ); } .insight-icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:var(--surface-3); } .insight-icon.orange{ color:var(--orange); background:var(--orange-soft); } .insight-icon.blue{ color:var(--blue); background:var(--blue-soft); } .insight-icon.red{ color:var(--red); background:var(--red-soft); } .insight-icon.purple{ color:var(--purple); background:var(--purple-soft); } .insight-icon.green{ color:var(--green); background:var(--green-soft); } .insight-copy{ min-width:0; } .insight-label{ margin-bottom:4px; color:var(--text-3); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; } .insight-title{ overflow:hidden; font-size:12px; font-weight:680; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } .insight-row.alert .insight-title{ color:var(--red); } .insight-sub{ margin-top:4px; overflow:hidden; color:var(--text-3); font-size:11px; text-overflow:ellipsis; white-space:nowrap; } .insight-value{ min-width:76px; text-align:right; } .insight-value strong{ display:block; font-size:13px; font-weight:730; } .insight-value span{ display:block; margin-top:4px; color:var(--text-3); font-size:11px; } .insight-value.orange strong{color:var(--orange);} .insight-value.red strong{color:var(--red);} .insight-value.purple strong{color:var(--purple);} .insights-box:not(.expanded) .insight-row:nth-child(n+4){ display:none; } .insights-toggle{ display:flex; width:100%; align-items:center; justify-content:center; gap:6px; height:46px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--text-2); font-size:11px; font-weight:650; } .insights-toggle .icon{ width:14px; height:14px; transform:rotate(90deg); transition:transform .2s ease; } .insights-box.expanded .insights-toggle .icon{ transform:rotate(-90deg); } /* INCOME */ .income-panel{ overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .income-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:16px 15px; border-bottom:1px solid var(--line); } .income-header span{ display:block; margin-bottom:4px; color:var(--text-3); font-size:11px; } .income-header strong{ font-size:19px; } .income-badge{ min-height:28px; display:flex; align-items:center; gap:5px; padding:0 9px; border-radius:99px; background:var(--green-soft); color:var(--green); font-size:10px; } .income-row{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; min-height:61px; padding:12px 15px; gap:11px; color:inherit; text-decoration:none; } .income-row + .income-row{ border-top:1px solid var(--line); } .income-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); } .income-copy strong{ display:block; font-size:11px; } .income-copy span{ display:block; margin-top:3px; color:var(--text-3); font-size:11px; } .income-value{ color:var(--green); font-size:11px; } /* FAB */ .fab{ position:fixed; right:max(18px, calc(((100vw - var(--mobile-shell-max)) / 2) + 18px)); bottom:calc(86px + env(safe-area-inset-bottom)); z-index:70; width:56px; height:56px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); border-radius:18px; background:color-mix(in srgb,var(--accent) 80%,transparent); backdrop-filter:blur(14px) saturate(160%); color:#101608; box-shadow: 0 17px 32px rgba(0,0,0,.20), 0 0 0 5px var(--accent-soft); transition:transform .25s ease, opacity .25s ease; } .fab.fab-hidden{ transform:translateY(160%); opacity:0; pointer-events:none; } /* NAV */ .bottom-nav-shell{ position:fixed; left:50%; width:calc(100% - (var(--mobile-gutter) * 2)); max-width:calc(var(--mobile-shell-max) - 4px); transform:translateX(-50%); bottom:calc(9px + env(safe-area-inset-bottom)); z-index:60; } .bottom-nav{ height:64px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; padding:4px 5px; border:1px solid var(--line-strong); border-radius:21px; background:var(--glass); backdrop-filter:blur(25px) saturate(160%); box-shadow:0 18px 40px rgba(0,0,0,.16); } .nav-button{ height:53px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:var(--text-3); font-size:11px; } .nav-button.active{ color:var(--accent-dark); } .nav-icon-wrap{ width:29px; height:25px; display:grid; place-items:center; border-radius:9px; } .nav-button.active .nav-icon-wrap{ background:var(--accent-soft); } /* DESKTOP */ .desktop-sidebar, .desktop-topbar, .desktop-right{ display:none; } @media(min-width:900px){ .app{ padding:0 288px 50px 248px; } .mobile-header, .bottom-nav-shell{ display:none; } .desktop-sidebar{ display:flex; position:fixed; left:0; top:0; bottom:0; width:248px; flex-direction:column; padding:27px 16px 21px; border-right:1px solid var(--line); background:var(--sidebar); } .desktop-brand{ display:flex; gap:12px; align-items:center; padding:0 10px 29px; } .desktop-logo{ width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:var(--accent); color:#111608; } .desktop-brand-copy strong{ display:block; font-size:16px; font-weight:800; letter-spacing:-.02em; } .desktop-brand-copy span{ display:block; margin-top:3px; color:var(--text-3); font-size:11px; } .side-title{ margin:0 11px 8px; color:var(--text-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .side-nav{ display:flex; flex-direction:column; gap:3px; } .side-link{ min-height:47px; display:flex; align-items:center; gap:11px; padding:0 13px; border:0; border-radius:12px; background:transparent; color:var(--text-2); font-size:13px; font-weight:600; } .side-link.active{ color:var(--text); background:var(--surface-2); font-weight:700; } .side-nav-divider{ height:1px; margin:17px 9px; background:var(--line); } .desktop-profile{ display:flex; align-items:center; gap:10px; margin-top:auto; padding:11px; border:1px solid var(--line); border-radius:15px; background:var(--surface); } .desktop-avatar{ width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--accent); color:#111608; font-size:11px; font-weight:800; } .desktop-profile strong{ display:block; font-size:12px; } .desktop-profile span{ display:block; margin-top:2px; color:var(--text-3); font-size:11px; } .desktop-topbar{ display:flex; position:sticky; top:0; z-index:35; height:74px; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:var(--top-glass); backdrop-filter:blur(22px); } .desktop-heading span{ display:block; margin-bottom:3px; color:var(--text-3); font-size:11px; } .desktop-heading strong{ font-size:18px; } .desktop-actions{ display:flex; align-items:center; gap:7px; } .desktop-search{ width:225px; height:40px; padding:0 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); outline:none; font-size:10px; } .main{ max-width:1180px; padding:25px 28px 54px; } .month-selector{ width:200px; grid-template-columns:38px 120px 38px; margin-bottom:17px; } .hero{ min-height:238px; padding:27px; } .hero-amount{ font-size:44px; } .summary-strip{ margin-bottom:28px; } .content-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .insights-box{ margin-bottom:30px; } .insights-list{ display:grid; grid-template-columns:repeat(2,1fr); } .insight-row{ min-height:88px; } .insight-row + .insight-row:before{ display:none; } .insight-row:nth-child(odd){ border-right:1px solid var(--line); } .insight-row:nth-child(n+3){ border-top:1px solid var(--line); } .insight-row:last-child{ grid-column:1 / -1; border-right:0; } .insights-box:not(.expanded) .insight-row:nth-child(3){ grid-column:1 / -1; border-right:0; } .desktop-right{ display:block; position:fixed; top:0; right:0; bottom:0; width:288px; padding:28px 20px; border-left:1px solid var(--line); background:var(--sidebar); } .right-label{ color:var(--text-3); font-size:11px; } .right-title{ margin-top:5px; font-size:18px; font-weight:730; } .right-section{ margin-top:26px; } .right-section-header{ display:flex; justify-content:space-between; margin-bottom:10px; font-size:11px; } .mini-event{ position:relative; padding:12px 12px 12px 15px; margin-bottom:9px; border:1px solid var(--line); border-radius:13px; background:var(--surface); } .mini-event strong{ display:block; font-size:10px; } .mini-event span{ display:block; margin-top:4px; color:var(--text-3); font-size:11px; } .fab{ right:305px; bottom:27px; } } /* Between the sidebar+right-rail breakpoint and the point where there's enough room for two content columns side by side, stack them instead of squeezing three fixed-width tracks into the viewport. */ @media(min-width:900px) and (max-width:1199px){ .desktop-search{ display:none; } .icon-button.desktop-search-toggle{ display:grid; } .desktop-heading{ min-width:0; overflow:hidden; } .desktop-heading span, .desktop-heading strong{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .hero-bottom{ grid-template-columns:1fr 1fr; } .hero-pill{ grid-column:1 / -1; width:max-content; } .content-grid{ grid-template-columns:1fr; } .insights-list{ grid-template-columns:1fr; } .insight-row{ border-right:0; } .insight-row:nth-child(n+3){ border-top:0; } .insights-box:not(.expanded) .insight-row:nth-child(3){ border-right:0; } } @media(max-width:390px){ :root{ --mobile-gutter:13px; } .hero-bottom{ grid-template-columns:1fr 1fr; } .hero-pill{ grid-column:1 / -1; width:max-content; } .insight-row{ grid-template-columns:38px minmax(0,1fr); } .insight-value{ grid-column:2; text-align:left; margin-top:1px; } .insight-value strong, .insight-value span{ display:inline; } .insight-value span{ margin-left:6px; } } /* ========================================================= CARD TILE (tela Cartões) ========================================================= */ .cards-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:28px; } @media(min-width:640px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } } .card-tile{ position:relative; overflow:hidden; display:block; padding:20px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(145deg, var(--surface-2), var(--surface)); box-shadow:var(--shadow); color:inherit; text-decoration:none; } .card-tile.selected{ border-color:color-mix(in srgb,var(--accent) 30%,transparent); } .card-tile-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; } .card-tile-brand{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--surface-3); color:var(--text-2); } .card-tile-brand.purple{ color:var(--purple); background:var(--purple-soft); } .card-tile-brand.blue{ color:var(--blue); background:var(--blue-soft); } .card-tile-brand.orange{ color:var(--orange); background:var(--orange-soft); } .card-tile-brand.green{ color:var(--green); background:var(--green-soft); } .card-tile-brand.red{ color:var(--red); background:var(--red-soft); } .card-tile-name{ font-size:13px; font-weight:700; } .card-tile-number{ margin-top:2px; color:var(--text-3); font-size:11px; } .card-tile-bill-label{ color:var(--text-3); font-size:10px; } .card-tile-bill-value{ margin-top:4px; font-size:23px; font-weight:750; letter-spacing:-.02em; } .card-tile-due{ display:inline-block; margin-top:6px; padding:3px 9px; border-radius:99px; background:var(--orange-soft); color:var(--orange); font-size:10px; font-weight:700; } .card-tile-due.ok{ background:var(--green-soft); color:var(--green); } .card-tile-limit{ margin-top:18px; } .card-tile-limit-heading{ display:flex; justify-content:space-between; margin-bottom:7px; color:var(--text-3); font-size:10px; } .card-tile-limit-heading strong{ color:var(--text-2); font-weight:650; } /* ========================================================= CHARTS (tela Relatórios) — sem lib, só CSS ========================================================= */ .chart-card{ padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); margin-bottom:20px; } .chart-card-heading{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; } .chart-card-heading h3{ margin:0; font-size:14px; font-weight:730; } .chart-card-heading span{ display:block; margin-top:3px; color:var(--text-3); font-size:11px; } .bar-list{ display:flex; flex-direction:column; gap:16px; } .bar-row-heading{ display:flex; justify-content:space-between; gap:10px; margin-bottom:7px; font-size:12px; } .bar-row-heading strong{ font-weight:650; } .bar-row-heading span{ color:var(--text-3); } .bar-track{ height:9px; border-radius:99px; overflow:hidden; background:color-mix(in srgb,var(--text) 8%,transparent); } .bar-fill{ height:100%; border-radius:99px; background:var(--accent); } .bar-fill.orange{ background:var(--orange); } .bar-fill.blue{ background:var(--blue); } .bar-fill.purple{ background:var(--purple); } .bar-fill.green{ background:var(--green); } .bar-fill.red{ background:var(--red); } .month-bars{ display:flex; align-items:flex-end; gap:10px; height:150px; padding:0 2px; } .month-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:9px; } .month-bar-value{ color:var(--text-3); font-size:9px; white-space:nowrap; } .month-bar{ width:100%; max-width:34px; border-radius:8px 8px 3px 3px; background:var(--surface-3); } .month-bar-col.active .month-bar{ background:var(--accent); } .month-bar-col.active .month-bar-value{ color:var(--accent-dark); font-weight:700; } .month-bar-label{ margin-top:2px; color:var(--text-3); font-size:10px; } /* ========================================================= MANAGE ROW (tela Categorias e tags, listas de gerenciamento) ========================================================= */ .manage-list{ overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .manage-row{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 15px; color:inherit; text-decoration:none; } .manage-row + .manage-row{ border-top:1px solid var(--line); } .manage-row-name{ font-size:13px; font-weight:650; } .manage-row-meta{ margin-top:3px; color:var(--text-3); font-size:11px; } .manage-row-actions{ display:flex; gap:6px; } .manage-row-actions .more-button{ width:36px; height:36px; } .tag-cloud{ display:flex; flex-wrap:wrap; gap:9px; } .tag-chip{ display:flex; align-items:center; gap:7px; height:36px; padding:0 8px 0 14px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; text-decoration:none; } .tag-chip button{ width:22px; height:22px; display:grid; place-items:center; border:0; border-radius:50%; background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--text-3); } .tag-chip button .icon{ width:12px; height:12px; } .tag-chip.add-tag{ border-style:dashed; color:var(--text-3); } /* ========================================================= NOTIFICATIONS (tela Notificações) ========================================================= */ .notification-list{ overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .notification-row{ position:relative; display:grid; grid-template-columns:46px minmax(0,1fr); gap:12px; align-items:flex-start; padding:15px 34px 15px 15px; } .notification-row + .notification-row{ border-top:1px solid var(--line); } .notification-row.unread{ background:color-mix(in srgb,var(--accent) 5%,transparent); } .notification-title{ font-size:13px; font-weight:650; } .notification-row.unread .notification-title{ font-weight:750; } .notification-desc{ margin-top:4px; color:var(--text-2); font-size:12px; line-height:1.4; } .notification-time{ display:block; margin-top:7px; color:var(--text-3); font-size:10px; } .notification-dot{ position:absolute; top:19px; right:15px; width:8px; height:8px; border-radius:50%; background:var(--accent); } /* ========================================================= SETTINGS (tela Configurações) ========================================================= */ .settings-profile-card{ display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); border-radius:20px; background:var(--surface); margin-bottom:24px; } .settings-profile-avatar{ width:56px; height:56px; flex-shrink:0; display:grid; place-items:center; border-radius:16px; background:var(--accent); color:#111608; font-weight:800; font-size:18px; } .settings-profile-name{ font-size:15px; font-weight:730; } .settings-profile-email{ margin-top:3px; color:var(--text-3); font-size:12px; } .settings-group{ margin-bottom:26px; } .settings-group-title{ margin:0 3px 10px; color:var(--text-3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; } .settings-list{ overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); } .settings-row{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:13px; padding:14px 15px; min-height:64px; } .settings-row + .settings-row{ border-top:1px solid var(--line); } button.settings-row{ width:100%; border:0; background:transparent; text-align:left; } a.settings-row{ color:inherit; text-decoration:none; } .settings-row-icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--surface-3); color:var(--text-2); } .settings-row-name{ font-size:13px; font-weight:650; } .settings-row-meta{ margin-top:3px; color:var(--text-3); font-size:11px; } .settings-row-value{ color:var(--text-3); font-size:12px; } .switch{ position:relative; width:44px; height:26px; flex-shrink:0; border-radius:99px; background:var(--surface-3); border:1px solid var(--line); } .switch.on{ background:var(--accent); border-color:transparent; } .switch-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease, background .2s ease; } .switch.on .switch-knob{ transform:translateX(18px); background:#111608; } .danger-button{ width:100%; height:48px; border:1px solid color-mix(in srgb,var(--red) 30%,transparent); border-radius:14px; background:var(--red-soft); color:var(--red); font-weight:700; font-size:12px; } .settings-version{ margin-top:16px; text-align:center; color:var(--text-3); font-size:11px; } /* ========================================================= FORMS (Novo lançamento e outras telas de formulário) ========================================================= */ .form-close-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .form-close-header h1{ margin:0; font-size:19px; font-weight:750; letter-spacing:-.02em; } .segmented{ display:flex; padding:4px; gap:4px; border:1px solid var(--line); border-radius:15px; background:var(--surface); margin-bottom:24px; } .segmented button{ flex:1; height:42px; border:0; border-radius:11px; background:transparent; color:var(--text-2); font-size:12px; font-weight:650; } .segmented button.active{ background:var(--accent); color:#111608; } .field{ margin-bottom:18px; } .field label{ display:block; margin-bottom:8px; color:var(--text-2); font-size:12px; font-weight:650; } .field input, .field select{ width:100%; height:48px; padding:0 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--text); font-size:14px; outline:none; } .field input:focus, .field select:focus{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); } .field-amount input{ height:68px; font-size:30px; font-weight:760; text-align:center; letter-spacing:-.02em; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .chip-select{ display:flex; flex-wrap:wrap; gap:8px; } .chip-select[hidden]{ display:none; } .chip-select button{ height:38px; padding:0 14px; border:1px solid var(--line); border-radius:99px; background:var(--surface); color:var(--text-2); font-size:12px; font-weight:600; display:flex; align-items:center; gap:6px; } .chip-select button.active{ border-color:transparent; background:var(--accent-soft); color:var(--accent-dark); } .chip-select.icon-select button{ width:44px; height:44px; padding:0; justify-content:center; } .chip-select.icon-select button .icon{ width:18px; height:18px; } .color-swatch{ width:34px; height:34px; border-radius:50%; border:2px solid transparent; background:var(--surface-3); } .color-swatch.active{ border-color:var(--text); } /* especificidade igual a ".chip-select button.active" (que também define background) + vêm depois no arquivo, senão o estado :active do chip genérico vence e a cor escolhida não aparece */ button.color-swatch[data-cor="orange"]{ background:var(--orange); } button.color-swatch[data-cor="red"]{ background:var(--red); } button.color-swatch[data-cor="blue"]{ background:var(--blue); } button.color-swatch[data-cor="green"]{ background:var(--green); } button.color-swatch[data-cor="purple"]{ background:var(--purple); } .toggle-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; } .toggle-row-name{ font-size:13px; font-weight:650; } .toggle-row-meta{ margin-top:3px; color:var(--text-3); font-size:11px; } .form-submit{ width:100%; height:52px; border:0; border-radius:16px; background:var(--accent); color:#111608; font-size:13px; font-weight:800; margin-top:10px; text-decoration:none; } .form-cancel{ width:100%; height:48px; margin-top:10px; border:0; background:transparent; color:var(--text-3); font-size:12px; font-weight:650; text-decoration:none; } /* ========================================================= DETAIL HERO (Detalhe de lançamento / cartão) ========================================================= */ .detail-hero{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:28px 20px 26px; margin-bottom:22px; border:1px solid var(--line); border-radius:24px; background:var(--surface); } .detail-hero .category-icon{ width:58px; height:58px; margin-bottom:16px; } .detail-hero .category-icon .icon{ width:27px; height:27px; } .detail-hero-amount{ font-size:34px; font-weight:760; letter-spacing:-.03em; } .detail-hero-name{ margin-top:6px; color:var(--text-2); font-size:14px; font-weight:600; } .status-pill{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; margin-top:14px; border-radius:99px; font-size:11px; font-weight:700; } .status-pill.danger{ background:var(--red-soft); color:var(--red); } .status-pill.warning{ background:var(--orange-soft); color:var(--orange); } .status-pill.success{ background:var(--green-soft); color:var(--green); } .detail-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; width:100%; } .detail-actions .pay-button, .detail-actions .ghost-button{ height:44px; font-size:11px; } .ghost-button{ border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text-2); font-weight:700; display:flex; align-items:center; justify-content:center; text-decoration:none; } .timeline{ position:relative; padding-left:22px; } .timeline-item{ position:relative; padding-bottom:20px; } .timeline-item:last-child{ padding-bottom:0; } .timeline-item:before{ content:""; position:absolute; left:-22px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--text-3); } .timeline-item.done:before{ background:var(--green); } .timeline-item:after{ content:""; position:absolute; left:-18px; top:14px; bottom:-20px; width:1px; background:var(--line); } .timeline-item:last-child:after{ display:none; } .timeline-title{ font-size:12px; font-weight:650; } .timeline-time{ margin-top:2px; color:var(--text-3); font-size:11px; } /* ========================================================= LOCK SCREEN (Login / bloqueio) e ONBOARDING ========================================================= */ .centered-screen{ min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; text-align:center; } .lock-avatar{ width:72px; height:72px; border-radius:22px; background:var(--accent); display:grid; place-items:center; color:#111608; font-weight:800; font-size:24px; margin-bottom:20px; box-shadow:0 0 0 6px var(--accent-soft); } .lock-title{ font-size:19px; font-weight:750; } .lock-subtitle{ margin-top:6px; color:var(--text-3); font-size:13px; } .pin-dots{ display:flex; gap:16px; margin:34px 0; } .pin-dot{ width:14px; height:14px; border-radius:50%; border:1.5px solid var(--line-strong); transition:background .15s ease,border-color .15s ease; } .pin-dot.filled{ background:var(--accent); border-color:var(--accent); } .lock-subtitle.danger{ color:var(--red); } .pin-dots.shake{ animation:pin-shake .4s ease; } @keyframes pin-shake{ 0%, 100%{ transform:translateX(0); } 20%, 60%{ transform:translateX(-8px); } 40%, 80%{ transform:translateX(8px); } } .keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; width:100%; max-width:280px; } .keypad button{ aspect-ratio:1; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:20px; font-weight:600; } .keypad button.action{ border:0; background:transparent; color:var(--text-2); } .lock-forgot{ margin-top:30px; border:0; background:transparent; color:var(--text-3); font-size:12px; font-weight:650; text-decoration:none; } .onboarding-icon{ width:88px; height:88px; display:grid; place-items:center; border-radius:26px; background:var(--accent); color:#111608; margin-bottom:28px; box-shadow:0 0 0 8px var(--accent-soft); } .onboarding-icon .icon{ width:40px; height:40px; } .onboarding-title{ font-size:24px; font-weight:770; letter-spacing:-.02em; max-width:320px; } .onboarding-subtitle{ margin-top:10px; max-width:320px; color:var(--text-2); font-size:14px; line-height:1.5; } .onboarding-features{ display:flex; flex-direction:column; gap:14px; width:100%; max-width:340px; margin:32px 0; text-align:left; } .onboarding-feature{ display:flex; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); } .onboarding-feature-text strong{ display:block; font-size:12.5px; font-weight:700; } .onboarding-feature-text span{ display:block; margin-top:2px; color:var(--text-3); font-size:11px; } .onboarding-dots{ display:flex; gap:6px; margin-bottom:26px; } .onboarding-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line-strong); } .onboarding-dots span.active{ width:18px; border-radius:99px; background:var(--accent); } /* iOS/Safari: evita o zoom automático ao focar inputs com fonte < 16px. Mantemos o campo de valor maior e não bloqueamos pinch-to-zoom do usuário. */ @media (max-width: 767px) { input, select, textarea { font-size: 16px; } .field-amount input { font-size: 30px; } } /* Recorrência mensal: campo aparece somente quando o switch está ligado. */ .recurrence-installments{ padding:0 15px 16px; border-top:1px solid var(--line); } .recurrence-installments[hidden]{ display:none !important; } .recurrence-installments .field{ padding-top:14px; } .recurrence-installments input{ width:100%; } .field-help{ margin-top:7px; color:var(--text-3); font-size:11.5px; line-height:1.45; } .field-help strong{ color:var(--text-2); font-weight:700; }