/* ================================================================
PersonalFinanceApp — UI System
Dark mode · Mobile-first · Themeable via --primary
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap');
/* ----------------------------------------------------------------
Anti-FOUC — adicionar no ANTES do do CSS:
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
Tema Dark (padrão)
---------------------------------------------------------------- */
:root {
/* Backgrounds */
--bg-base: #0a0a0a;
--bg-surface: #111111;
--bg-raised: #181818;
--bg-overlay: #1f1f1f;
--bg-hover: #242424;
/* Nav (hardcoded → variável) */
--bg-top-nav: rgba(10, 10, 10, .92);
--bg-bottom-nav: rgba(10, 10, 10, .96);
/* Bordas */
--border: #1e1e1e;
--border-light: #2a2a2a;
--border-focus: var(--primary);
/* Texto */
--text-primary: #f0f0f0;
--text-secondary: #9a9a9a;
--text-muted: #5a5a5a;
--text-inverse: #080f0a;
/* Cor primária */
--primary: #3ddc6a;
--primary-dim: #2aad4f;
--primary-glow: rgba(61, 220, 106, 0.15);
--primary-subtle: rgba(61, 220, 106, 0.08);
/* Semântica */
--income: #3ddc6a;
--expense: #ff5c5c;
--amber: #ffb830;
--blue: #4da6ff;
--purple: #b47fff;
--success: var(--income);
--danger: var(--expense);
--warning: var(--amber);
--info: var(--blue);
/* Categorias */
--cat-casa: #4da6ff;
--cat-carro: #ffb830;
--cat-pet: #3ddc6a;
--cat-saude: #ff5c5c;
--cat-alimentacao: #ff8c42;
--cat-lazer: #b47fff;
--cat-educacao: #40d9c0;
--cat-receitas: #3ddc6a;
/* Tipografia */
--font-ui: 'Syne', sans-serif;
--font-mono: 'Space Mono', monospace;
/* Espaçamento (base 4px) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
/* Raios */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Sombras */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
--shadow: 0 4px 16px rgba(0, 0, 0, .5);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);
--shadow-primary: 0 0 20px var(--primary-glow);
/* Transições */
--transition: 150ms ease;
--transition-slow: 300ms ease;
/* Layout */
--nav-height: 60px;
--bottom-nav-h: 64px;
--max-width: 480px;
}
/* ================================================================
SISTEMA DE TEMAS
Dois eixos independentes:
BASE: html.theme-dark (padrão) | html.theme-light
PALETA: html.green (padrão) | .blue | .red | .orange
.purple | .cyan | .yellow | .dark-blue
Combinam livremente:
================================================================ */
/* ── Base: Light ── */
html.theme-light {
--bg-base: #f5f5f5;
--bg-surface: #ffffff;
--bg-raised: #efefef;
--bg-overlay: #e8e8e8;
--bg-hover: #e2e2e2;
--bg-top-nav: rgba(245, 245, 245, .92);
--bg-bottom-nav: rgba(255, 255, 255, .96);
--border: #e0e0e0;
--border-light: #d0d0d0;
--text-primary: #0f0f0f;
--text-secondary: #555555;
--text-muted: #999999;
--text-inverse: #ffffff;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
--shadow: 0 4px 16px rgba(0, 0, 0, .12);
--shadow-lg: 0 8px 32px rgba(0, 0, 0, .16);
}
/* ── Paletas de cor ─────────────────────────────────────────────
Cada paleta define: --primary, --primary-dim,
--primary-subtle, --primary-glow
O tema light sobrescreve o --primary para versão
mais escura que contraste bem em fundo claro.
─────────────────────────────────────────────────────────────── */
/* Green (padrão — já definido no :root, mas explícito aqui) */
html.green,
:root {
--primary: #3ddc6a;
--primary-dim: #2aad4f;
--primary-subtle: rgba(61, 220, 106, 0.08);
--primary-glow: rgba(61, 220, 106, 0.15);
}
html.theme-light.green,
html.theme-light:not([class*="blue"]):not(.red):not(.orange):not(.purple):not(.cyan):not(.yellow) {
--primary: #1f9945;
--primary-dim: #177a36;
--primary-subtle: rgba(31, 153, 69, 0.10);
--primary-glow: rgba(31, 153, 69, 0.12);
}
/* Blue */
html.blue {
--primary: #4da6ff;
--primary-dim: #2e8fe0;
--primary-subtle: rgba(77, 166, 255, 0.08);
--primary-glow: rgba(77, 166, 255, 0.15);
}
html.theme-light.blue {
--primary: #1a72cc;
--primary-dim: #145aa3;
--primary-subtle: rgba(26, 114, 204, 0.10);
--primary-glow: rgba(26, 114, 204, 0.12);
}
/* Red */
html.red {
--primary: #ff5c5c;
--primary-dim: #e03c3c;
--primary-subtle: rgba(255, 92, 92, 0.08);
--primary-glow: rgba(255, 92, 92, 0.15);
}
html.theme-light.red {
--primary: #cc2222;
--primary-dim: #a81a1a;
--primary-subtle: rgba(204, 34, 34, 0.10);
--primary-glow: rgba(204, 34, 34, 0.12);
}
/* Orange */
html.orange {
--primary: #ff8c42;
--primary-dim: #e06c22;
--primary-subtle: rgba(255, 140, 66, 0.08);
--primary-glow: rgba(255, 140, 66, 0.15);
}
html.theme-light.orange {
--primary: #cc5a0f;
--primary-dim: #a3470b;
--primary-subtle: rgba(204, 90, 15, 0.10);
--primary-glow: rgba(204, 90, 15, 0.12);
}
/* Purple */
html.purple {
--primary: #b47fff;
--primary-dim: #9460e0;
--primary-subtle: rgba(180, 127, 255, 0.08);
--primary-glow: rgba(180, 127, 255, 0.15);
}
html.theme-light.purple {
--primary: #7c3dd6;
--primary-dim: #6230b0;
--primary-subtle: rgba(124, 61, 214, 0.10);
--primary-glow: rgba(124, 61, 214, 0.12);
}
/* Cyan */
html.cyan {
--primary: #40d9c0;
--primary-dim: #28b8a0;
--primary-subtle: rgba(64, 217, 192, 0.08);
--primary-glow: rgba(64, 217, 192, 0.15);
}
html.theme-light.cyan {
--primary: #0e9e88;
--primary-dim: #0a7d6c;
--primary-subtle: rgba(14, 158, 136, 0.10);
--primary-glow: rgba(14, 158, 136, 0.12);
}
/* Yellow */
html.yellow {
--primary: #ffb830;
--primary-dim: #e09810;
--primary-subtle: rgba(255, 184, 48, 0.08);
--primary-glow: rgba(255, 184, 48, 0.15);
}
html.theme-light.yellow {
--primary: #b87d00;
--primary-dim: #946400;
--primary-subtle: rgba(184, 125, 0, 0.10);
--primary-glow: rgba(184, 125, 0, 0.12);
}
/* Dark Blue */
html.dark-blue {
--primary: #7eb8ff;
--primary-dim: #5a9ae0;
--primary-subtle: rgba(126, 184, 255, 0.08);
--primary-glow: rgba(126, 184, 255, 0.15);
/* Também muda os backgrounds para azul escuro */
--bg-base: #080c14;
--bg-surface: #0d1420;
--bg-raised: #121c2c;
--bg-overlay: #182438;
--bg-hover: #1e2e44;
--bg-top-nav: rgba(8, 12, 20, .92);
--bg-bottom-nav: rgba(8, 12, 20, .96);
--border: #1a2438;
--border-light: #243248;
}
/* Dark Green */
html.dark-green {
--primary: #3ddc6a;
--primary-dim: #2aad4f;
--primary-subtle: rgba(61, 220, 106, 0.08);
--primary-glow: rgba(61, 220, 106, 0.15);
--bg-base: #050e08;
--bg-surface: #091410;
--bg-raised: #0e1c14;
--bg-overlay: #12251a;
--bg-hover: #172e20;
--bg-top-nav: rgba(5, 14, 8, .92);
--bg-bottom-nav: rgba(5, 14, 8, .96);
--border: #142010;
--border-light: #1e301a;
}
/* ----------------------------------------------------------------
Reset & Base
---------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-ui);
background-color: var(--bg-base);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
background-image: radial-gradient(ellipse 80% 50% at 50% -20%, var(--primary-subtle) 0%, transparent 60%);
padding-bottom: calc(var(--bottom-nav-h) + var(--sp-4));
}
a {
color: var(--blue);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--primary);
}
img {
max-width: 100%;
display: block;
}
/* ----------------------------------------------------------------
Tipografia
---------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-ui);
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
}
h1 {
font-size: 1.75rem;
font-weight: 800;
}
h2 {
font-size: 1.375rem;
}
h3 {
font-size: 1.125rem;
}
h4 {
font-size: 1rem;
}
p {
color: var(--text-secondary);
}
.mono {
font-family: var(--font-mono);
}
.text-income {
color: var(--income);
}
.text-expense {
color: var(--expense);
}
.text-amber {
color: var(--amber);
}
.text-blue {
color: var(--blue);
}
.text-muted {
color: var(--text-muted);
}
.text-secondary {
color: var(--text-secondary);
}
.text-sm {
font-size: .813rem;
}
.text-xs {
font-size: .75rem;
}
.text-lg {
font-size: 1.125rem;
}
.text-xl {
font-size: 1.25rem;
}
.text-2xl {
font-size: 1.5rem;
}
.text-3xl {
font-size: 1.875rem;
}
.font-bold {
font-weight: 700;
}
.font-medium {
font-weight: 600;
}
/* ----------------------------------------------------------------
Layout
---------------------------------------------------------------- */
.app-wrapper {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--sp-4);
}
.page {
padding-top: calc(var(--nav-height) + var(--sp-4));
padding-bottom: var(--sp-8);
}
/* ----------------------------------------------------------------
Top Nav
---------------------------------------------------------------- */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: var(--bg-top-nav);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 var(--sp-4);
}
.top-nav__logo {
font-family: var(--font-mono);
font-size: .875rem;
font-weight: 700;
color: var(--primary);
letter-spacing: -.5px;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.top-nav__logo span {
color: var(--text-secondary);
font-weight: 400;
}
.top-nav__actions {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-overlay);
border: 1.5px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 700;
color: var(--primary);
cursor: pointer;
transition: border-color var(--transition);
overflow: hidden;
}
.avatar:hover {
border-color: var(--primary);
}
/* ----------------------------------------------------------------
Bottom Navigation
---------------------------------------------------------------- */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: var(--bottom-nav-h);
background: var(--bg-bottom-nav);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--border);
z-index: 100;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 var(--sp-2);
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: var(--sp-2) 0;
color: var(--text-muted);
font-size: .65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .5px;
text-decoration: none;
transition: color var(--transition);
border-radius: var(--radius);
cursor: pointer;
}
.bottom-nav__item svg {
width: 22px;
height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.bottom-nav__item:hover,
.bottom-nav__item.active {
color: var(--primary);
}
.bottom-nav__item.active svg {
filter: drop-shadow(0 0 4px var(--primary));
}
.bottom-nav__fab {
flex: 0 0 56px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 0 0 4px var(--bg-surface), var(--shadow-primary);
transition: transform var(--transition), box-shadow var(--transition);
margin-bottom: 8px;
}
.bottom-nav__fab:hover {
transform: scale(1.08);
color: var(--text-inverse);
box-shadow: 0 0 0 4px var(--bg-surface), 0 0 30px var(--primary-glow);
}
.bottom-nav__fab svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
}
/* ----------------------------------------------------------------
Cards
---------------------------------------------------------------- */
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
.card:hover {
border-color: var(--border-light);
}
.card-hover:hover {
border-color: var(--border-focus);
box-shadow: var(--shadow-primary);
}
.card-body {
padding: var(--sp-4);
}
.card-header {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-footer {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border);
}
.stat-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--sp-4);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
}
.stat-card.income::before {
background: var(--income);
}
.stat-card.expense::before {
background: var(--expense);
}
.stat-card.balance::before {
background: var(--amber);
}
.stat-card.neutral::before {
background: var(--blue);
}
.stat-card__label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: var(--sp-2);
}
.stat-card__value {
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
}
.stat-card__sub {
font-size: .75rem;
color: var(--text-muted);
margin-top: var(--sp-1);
}
/* ----------------------------------------------------------------
Grid & Flex
---------------------------------------------------------------- */
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-3);
}
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-3);
}
.d-flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.justify-between {
justify-content: space-between;
}
.justify-center {
justify-content: center;
}
.gap-1 {
gap: var(--sp-1);
}
.gap-2 {
gap: var(--sp-2);
}
.gap-3 {
gap: var(--sp-3);
}
.gap-4 {
gap: var(--sp-4);
}
.flex-1 {
flex: 1;
}
/* ----------------------------------------------------------------
Espaçamento
---------------------------------------------------------------- */
.mt-1 {
margin-top: var(--sp-1)
}
.mt-2 {
margin-top: var(--sp-2)
}
.mt-3 {
margin-top: var(--sp-3)
}
.mt-4 {
margin-top: var(--sp-4)
}
.mt-6 {
margin-top: var(--sp-6)
}
.mt-8 {
margin-top: var(--sp-8)
}
.mb-1 {
margin-bottom: var(--sp-1)
}
.mb-2 {
margin-bottom: var(--sp-2)
}
.mb-3 {
margin-bottom: var(--sp-3)
}
.mb-4 {
margin-bottom: var(--sp-4)
}
.mb-6 {
margin-bottom: var(--sp-6)
}
.mb-8 {
margin-bottom: var(--sp-8)
}
.p-2 {
padding: var(--sp-2)
}
.p-3 {
padding: var(--sp-3)
}
.p-4 {
padding: var(--sp-4)
}
.px-3 {
padding-left: var(--sp-3);
padding-right: var(--sp-3)
}
.px-4 {
padding-left: var(--sp-4);
padding-right: var(--sp-4)
}
.py-2 {
padding-top: var(--sp-2);
padding-bottom: var(--sp-2)
}
.py-3 {
padding-top: var(--sp-3);
padding-bottom: var(--sp-3)
}
/* ----------------------------------------------------------------
Botões
---------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
font-family: var(--font-ui);
font-size: .875rem;
font-weight: 700;
letter-spacing: .3px;
padding: var(--sp-3) var(--sp-5);
border-radius: var(--radius);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all var(--transition);
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.btn-primary {
background: var(--primary);
color: var(--text-inverse);
border-color: var(--primary);
}
.btn-primary:hover {
background: var(--primary-dim);
border-color: var(--primary-dim);
color: var(--text-inverse);
box-shadow: 0 0 16px var(--primary-glow);
}
.btn-danger {
background: transparent;
color: var(--expense);
border-color: var(--expense);
}
.btn-danger:hover {
background: var(--expense);
color: #fff;
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border-color: var(--border-light);
}
.btn-outline:hover {
border-color: var(--primary);
color: var(--primary);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border-color: transparent;
padding-left: var(--sp-2);
padding-right: var(--sp-2);
}
.btn-ghost:hover {
color: var(--primary);
background: var(--primary-subtle);
}
.btn-sm {
padding: var(--sp-2) var(--sp-3);
font-size: .8rem;
}
.btn-lg {
padding: var(--sp-4) var(--sp-6);
font-size: 1rem;
}
.btn-full {
width: 100%;
}
.btn svg {
width: 16px;
height: 16px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
}
/* ----------------------------------------------------------------
Formulários
---------------------------------------------------------------- */
.form-group {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--sp-4);
}
label {
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--text-muted);
}
input,
select,
textarea {
font-family: var(--font-ui);
font-size: .9375rem;
color: var(--text-primary);
background: var(--bg-raised);
border: 1.5px solid var(--border-light);
border-radius: var(--radius);
padding: var(--sp-3) var(--sp-4);
width: 100%;
transition: border-color var(--transition), box-shadow var(--transition);
outline: none;
-webkit-appearance: none;
}
input:focus,
select:focus,
textarea:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px var(--primary-subtle);
}
input::placeholder,
textarea::placeholder {
color: var(--text-muted);
}
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a7057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--sp-3) center;
padding-right: var(--sp-8);
cursor: pointer;
}
.input-money {
font-family: var(--font-mono);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -.5px;
}
.input-error {
border-color: var(--expense) !important;
}
.field-error {
font-size: .75rem;
color: var(--expense);
display: flex;
align-items: center;
gap: var(--sp-1);
}
.type-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-2);
background: var(--bg-raised);
border-radius: var(--radius);
padding: var(--sp-1);
}
.type-toggle input[type="radio"] {
display: none;
}
.type-toggle label {
text-align: center;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: .8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
color: var(--text-muted);
border: 1px solid transparent;
transition: all var(--transition);
}
.type-toggle input[value="expense"]:checked+label {
background: rgba(255, 92, 92, .15);
color: var(--expense);
border-color: rgba(255, 92, 92, .3);
}
.type-toggle input[value="income"]:checked+label {
background: var(--primary-subtle);
color: var(--income);
border-color: var(--primary-glow);
}
/* ----------------------------------------------------------------
Transações
---------------------------------------------------------------- */
.transaction-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.transaction-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius);
text-decoration: none;
transition: border-color var(--transition), background var(--transition);
}
.transaction-item:hover {
border-color: var(--border-light);
background: var(--bg-raised);
}
.transaction-item__icon {
width: 40px;
height: 40px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.125rem;
flex-shrink: 0;
}
.transaction-item__info {
flex: 1;
min-width: 0;
}
.transaction-item__desc {
font-size: .875rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.transaction-item__meta {
font-size: .75rem;
color: var(--text-muted);
margin-top: 2px;
}
.transaction-item__amount {
font-family: var(--font-mono);
font-size: .9rem;
font-weight: 700;
flex-shrink: 0;
}
.transaction-item__amount.income {
color: var(--income);
}
.transaction-item__amount.expense {
color: var(--expense);
}
/* ----------------------------------------------------------------
Categorias
---------------------------------------------------------------- */
.category-list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.category-root {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.category-root__header {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
}
.category-root__icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
}
.category-root__name {
flex: 1;
font-weight: 700;
font-size: .9375rem;
}
.category-children {
border-top: 1px solid var(--border);
padding: var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-4) + 36px + var(--sp-3));
display: flex;
flex-direction: column;
gap: var(--sp-1);
}
.category-child {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
font-size: .875rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
}
.category-child:last-child {
border-bottom: none;
}
/* ----------------------------------------------------------------
Badges
---------------------------------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px var(--sp-2);
border-radius: 20px;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
}
.badge-income {
background: rgba(61, 220, 106, .15);
color: var(--income);
}
.badge-expense {
background: rgba(255, 92, 92, .15);
color: var(--expense);
}
.badge-amber {
background: rgba(255, 184, 48, .15);
color: var(--amber);
}
.badge-blue {
background: rgba(77, 166, 255, .15);
color: var(--blue);
}
.badge-purple {
background: rgba(180, 127, 255, .15);
color: var(--purple);
}
/* ----------------------------------------------------------------
Flash & Toast
---------------------------------------------------------------- */
.flash {
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius);
border: 1px solid;
font-size: .875rem;
font-weight: 600;
margin-bottom: var(--sp-4);
display: flex;
align-items: center;
gap: var(--sp-2);
animation: slideDown .3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.flash-success {
background: rgba(61, 220, 106, .1);
border-color: rgba(61, 220, 106, .3);
color: var(--income);
}
.flash-error {
background: rgba(255, 92, 92, .1);
border-color: rgba(255, 92, 92, .3);
color: var(--expense);
}
.flash-warning {
background: rgba(255, 184, 48, .1);
border-color: rgba(255, 184, 48, .3);
color: var(--amber);
}
.flash-info {
background: rgba(77, 166, 255, .1);
border-color: rgba(77, 166, 255, .3);
color: var(--blue);
}
#toast-container {
position: fixed;
bottom: calc(var(--bottom-nav-h) + var(--sp-4));
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: flex;
flex-direction: column;
gap: var(--sp-2);
width: calc(100% - var(--sp-8));
max-width: calc(var(--max-width) - var(--sp-8));
}
.toast {
padding: var(--sp-3) var(--sp-4);
border-radius: var(--radius);
font-size: .875rem;
font-weight: 600;
box-shadow: var(--shadow-lg);
animation: toastIn .25s ease;
border: 1px solid;
}
@keyframes toastIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.toast.success {
background: var(--bg-overlay);
border-color: var(--income);
color: var(--income);
}
.toast.error {
background: var(--bg-overlay);
border-color: var(--expense);
color: var(--expense);
}
.toast.warning {
background: var(--bg-overlay);
border-color: var(--amber);
color: var(--amber);
}
.toast.info {
background: var(--bg-overlay);
border-color: var(--blue);
color: var(--blue);
}
/* ----------------------------------------------------------------
Modal
---------------------------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .7);
backdrop-filter: blur(4px);
z-index: 150;
display: none;
align-items: flex-end;
justify-content: center;
padding: 0;
}
.modal-overlay.modal-open {
display: flex;
animation: fadeIn .2s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
width: 100%;
max-width: var(--max-width);
max-height: 90vh;
overflow-y: auto;
animation: slideUp .3s ease;
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.modal-handle {
width: 40px;
height: 4px;
background: var(--border-light);
border-radius: 2px;
margin: var(--sp-3) auto var(--sp-4);
}
.modal-header {
padding: 0 var(--sp-4) var(--sp-3);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-body {
padding: var(--sp-4);
}
.modal-footer {
padding: var(--sp-4);
border-top: 1px solid var(--border);
}
/* ----------------------------------------------------------------
Seção, Page header, Empty state
---------------------------------------------------------------- */
.section-title {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--text-muted);
margin-bottom: var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-2);
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-5);
}
.page-header h1 {
font-size: 1.375rem;
}
.empty-state {
text-align: center;
padding: var(--sp-12) var(--sp-4);
color: var(--text-muted);
}
.empty-state__icon {
font-size: 2.5rem;
margin-bottom: var(--sp-3);
opacity: .5;
}
.empty-state__title {
font-size: 1rem;
font-weight: 700;
color: var(--text-secondary);
margin-bottom: var(--sp-2);
}
.empty-state__subtitle {
font-size: .875rem;
color: var(--text-muted);
}
/* ----------------------------------------------------------------
Chips & Filter bar
---------------------------------------------------------------- */
.filter-bar {
display: flex;
gap: var(--sp-2);
overflow-x: auto;
padding-bottom: var(--sp-2);
scrollbar-width: none;
-ms-overflow-style: none;
margin-bottom: var(--sp-4);
}
.filter-bar::-webkit-scrollbar {
display: none;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-3);
border-radius: 20px;
font-size: .75rem;
font-weight: 700;
white-space: nowrap;
background: var(--bg-raised);
border: 1.5px solid var(--border-light);
color: var(--text-secondary);
cursor: pointer;
text-decoration: none;
transition: all var(--transition);
}
.chip:hover,
.chip.active {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-subtle);
}
/* ----------------------------------------------------------------
Barras
---------------------------------------------------------------- */
.bar-chart {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.bar-item__label {
display: flex;
justify-content: space-between;
font-size: .8rem;
margin-bottom: 6px;
}
.bar-item__label span:first-child {
color: var(--text-secondary);
}
.bar-item__label span:last-child {
font-family: var(--font-mono);
font-size: .75rem;
font-weight: 700;
}
.bar-track {
height: 6px;
background: var(--bg-overlay);
border-radius: 3px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 3px;
transition: width .6s cubic-bezier(.4, 0, .2, 1);
}
/* ----------------------------------------------------------------
Paginação
---------------------------------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
margin-top: var(--sp-6);
}
.pagination a,
.pagination span {
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
font-size: .875rem;
font-weight: 600;
border: 1px solid var(--border);
color: var(--text-secondary);
transition: all var(--transition);
text-decoration: none;
}
.pagination a:hover {
border-color: var(--primary);
color: var(--primary);
}
.pagination .current {
background: var(--primary);
border-color: var(--primary);
color: var(--text-inverse);
}
/* ----------------------------------------------------------------
Color picker
---------------------------------------------------------------- */
.color-options {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
}
.color-option {
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
border: 2.5px solid transparent;
transition: transform var(--transition), border-color var(--transition);
}
.color-option:hover {
transform: scale(1.15);
}
.color-option.selected {
border-color: var(--text-primary);
transform: scale(1.15);
}
/* ----------------------------------------------------------------
Utilitários
---------------------------------------------------------------- */
.hidden {
display: none !important;
}
.w-full {
width: 100%;
}
.relative {
position: relative;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rounded {
border-radius: var(--radius);
}
.rounded-full {
border-radius: 9999px;
}
.divider {
height: 1px;
background: var(--border);
margin: var(--sp-4) 0;
}
.color-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
display: inline-block;
}
/* ----------------------------------------------------------------
Scrollbar
---------------------------------------------------------------- */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
background: var(--border-light);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ----------------------------------------------------------------
Desktop
---------------------------------------------------------------- */
@media (min-width: 520px) {
.top-nav {
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 100%;
}
.bottom-nav {
left: 50%;
transform: translateX(-50%);
max-width: var(--max-width);
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
}