:root { --fz-hue: 150; /* ===== Tokens de tema (claro, padrão) ===== Tudo no arquivo referencia estas variáveis em vez de oklch() direto -- permite trocar claro/escuro (e o --fz-hue configurável pelo admin) sem duplicar regras. */ --bg: oklch(97% 0.012 var(--fz-hue)); --bg-soft: oklch(95% 0.012 var(--fz-hue)); --surface: oklch(100% 0 0); --surface-2: oklch(97.5% 0.006 var(--fz-hue)); --text: oklch(22% 0.02 var(--fz-hue)); --text-muted: oklch(48% 0.01 var(--fz-hue)); --text-faint: oklch(55% 0.01 var(--fz-hue)); --border: oklch(93% 0.01 var(--fz-hue)); --border-strong: oklch(88% 0.01 var(--fz-hue)); --brand: oklch(45% 0.13 var(--fz-hue)); --brand-hover: oklch(40% 0.14 var(--fz-hue)); --brand-soft: oklch(93% 0.05 var(--fz-hue)); --brand-soft-text: oklch(35% 0.13 var(--fz-hue)); --brand-strong: oklch(60% 0.15 var(--fz-hue)); --danger: oklch(50% 0.18 25); --danger-hover: oklch(45% 0.19 25); --danger-soft: oklch(93% 0.05 25); --danger-soft-text: oklch(45% 0.15 25); --warn-soft: oklch(93% 0.07 90); --warn-soft-text: oklch(45% 0.1 80); /* Verde de "positivo" (badges/KPIs) -- hue FIXO (145), mesmo princípio do --chart-receita abaixo: não pode depender de var(--fz-hue), senão some no meio da cor de marca ou vira idêntico ao --danger quando o admin escolhe uma marca avermelhada. */ --success: oklch(45% 0.14 145); --success-hover: oklch(40% 0.15 145); --success-soft: oklch(93% 0.06 145); --success-soft-text: oklch(35% 0.13 145); --overlay: oklch(20% 0.02 var(--fz-hue) / 0.45); --shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.05); --shadow-md: 0 8px 30px oklch(0% 0 0 / 0.1); --shadow-lg: 0 10px 40px oklch(0% 0 0 / 0.14); /* Verde de "entrada de dinheiro" (gráficos de receita) -- hue FIXO (145), nunca var(--fz-hue). Achado real: quando o admin personaliza a cor da marca pra um tom avermelhado/laranja (personalizar.php), --brand fica com o MESMO hue de --danger (25) e as barras de receita e despesa do relatório ficam visualmente idênticas. Mesmo princípio já usado nos badges "Ativo" (oklch(.. 145)) espalhados pelo resto do sistema -- status de "positivo" não deveria depender da cor de marca escolhida pelo admin. */ --chart-receita: oklch(72% 0.14 145); --chart-receita-forte: oklch(45% 0.14 145); /* Paleta categórica validada (8 matizes, ordem fixa que passa CVD/contraste nos dois temas -- ver skill de dataviz). Usada no gráfico de pizza de gastos por categoria (includes/graficos.php). */ --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #4a3aa7; --serie-8: #e34948; color-scheme: light; } /* ===== Tema escuro ===== Ativa por preferência do sistema (prefers-color-scheme) OU por escolha manual salva pelo usuário (atributo data-tema="escuro" no , ver assets/js/app.js) -- a escolha manual sempre vence a preferência do sistema, por isso as duas regras abaixo repetem as mesmas variáveis (um seletor de atributo não pode ser combinado com uma media query na mesma regra). */ :root[data-tema="escuro"] { --bg: oklch(17% 0.014 var(--fz-hue)); --bg-soft: oklch(20% 0.016 var(--fz-hue)); --surface: oklch(22% 0.016 var(--fz-hue)); --surface-2: oklch(26% 0.018 var(--fz-hue)); --text: oklch(93% 0.006 var(--fz-hue)); --text-muted: oklch(70% 0.012 var(--fz-hue)); --text-faint: oklch(60% 0.012 var(--fz-hue)); --border: oklch(32% 0.017 var(--fz-hue)); --border-strong: oklch(40% 0.02 var(--fz-hue)); --brand: oklch(72% 0.15 var(--fz-hue)); --brand-hover: oklch(78% 0.15 var(--fz-hue)); --brand-soft: oklch(30% 0.06 var(--fz-hue)); --brand-soft-text: oklch(85% 0.1 var(--fz-hue)); --brand-strong: oklch(68% 0.16 var(--fz-hue)); --danger: oklch(70% 0.18 25); --danger-hover: oklch(75% 0.19 25); --danger-soft: oklch(30% 0.09 25); --danger-soft-text: oklch(85% 0.12 25); --warn-soft: oklch(32% 0.08 90); --warn-soft-text: oklch(85% 0.1 90); --success: oklch(72% 0.15 145); --success-hover: oklch(78% 0.15 145); --success-soft: oklch(30% 0.07 145); --success-soft-text: oklch(85% 0.1 145); --overlay: oklch(0% 0 0 / 0.6); --shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.3); --shadow-md: 0 8px 30px oklch(0% 0 0 / 0.4); --shadow-lg: 0 10px 40px oklch(0% 0 0 / 0.5); --chart-receita: oklch(78% 0.15 145); --chart-receita-forte: oklch(52% 0.15 145); --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]):not([data-tema="escuro"]) { --bg: oklch(17% 0.014 var(--fz-hue)); --bg-soft: oklch(20% 0.016 var(--fz-hue)); --surface: oklch(22% 0.016 var(--fz-hue)); --surface-2: oklch(26% 0.018 var(--fz-hue)); --text: oklch(93% 0.006 var(--fz-hue)); --text-muted: oklch(70% 0.012 var(--fz-hue)); --text-faint: oklch(60% 0.012 var(--fz-hue)); --border: oklch(32% 0.017 var(--fz-hue)); --border-strong: oklch(40% 0.02 var(--fz-hue)); --brand: oklch(72% 0.15 var(--fz-hue)); --brand-hover: oklch(78% 0.15 var(--fz-hue)); --brand-soft: oklch(30% 0.06 var(--fz-hue)); --brand-soft-text: oklch(85% 0.1 var(--fz-hue)); --brand-strong: oklch(68% 0.16 var(--fz-hue)); --danger: oklch(70% 0.18 25); --danger-hover: oklch(75% 0.19 25); --danger-soft: oklch(30% 0.09 25); --danger-soft-text: oklch(85% 0.12 25); --warn-soft: oklch(32% 0.08 90); --warn-soft-text: oklch(85% 0.1 90); --success: oklch(72% 0.15 145); --success-hover: oklch(78% 0.15 145); --success-soft: oklch(30% 0.07 145); --success-soft-text: oklch(85% 0.1 145); --overlay: oklch(0% 0 0 / 0.6); --shadow-sm: 0 1px 4px oklch(0% 0 0 / 0.3); --shadow-md: 0 8px 30px oklch(0% 0 0 / 0.4); --shadow-lg: 0 10px 40px oklch(0% 0 0 / 0.5); --chart-receita: oklch(78% 0.15 145); --chart-receita-forte: oklch(52% 0.15 145); --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; --serie-5: #d55181; --serie-6: #008300; --serie-7: #9085e9; --serie-8: #e66767; color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; } h1, h2, h3, .logo, .sidebar-logo { font-family: 'Sora', sans-serif; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } /* ===== Ícones (Lucide SVG inline, ver includes/icones.php) ===== */ .icone { display: inline-block; vertical-align: middle; flex-shrink: 0; stroke: currentColor; } /* ===== Botões ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: var(--brand); color: #fff; padding: 11px 22px; border: none; border-radius: 100px; font-size: 14px; font-weight: 600; cursor: pointer; } .btn:hover { background: var(--brand-hover); color: #fff; } .btn-secundario { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .btn-secundario:hover { background: var(--bg-soft); color: var(--text); } .btn-perigo { background: var(--danger); } .btn-perigo:hover { background: var(--danger-hover); } .btn-pequeno { padding: 6px 14px; font-size: 13px; } .btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; } .btn-icone:hover { background: var(--bg-soft); color: var(--text); } .btn-icone.excluir:hover { background: var(--danger-soft); color: var(--danger); } /* ===== Landing / páginas públicas ===== */ .landing-header { position: sticky; top: 0; z-index: 50; background: oklch(99% 0.002 145 / 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .landing-header .wrap { max-width: 1200px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--text); } .logo span { color: var(--brand-hover); } .hero { max-width: none; margin: 0; padding: 70px 32px 80px; display: grid; grid-template-columns: 1fr; gap: 40px; background: linear-gradient(135deg, oklch(90% 0.07 var(--fz-hue)) 0%, oklch(94% 0.05 calc(var(--fz-hue) + 40)) 55%, var(--bg) 100%); border-bottom: 1px solid oklch(88% 0.03 var(--fz-hue)); } .hero > * { max-width: 1200px; margin-left: auto; margin-right: auto; width: 100%; } .hero h1 { font-size: 42px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px; color: oklch(20% 0.03 var(--fz-hue)); } .hero p { font-size: 18px; line-height: 1.6; color: oklch(35% 0.03 var(--fz-hue)); max-width: 560px; } .pill { display: inline-flex; align-items: center; gap: 8px; background: oklch(55% 0.16 var(--fz-hue)); border: 1px solid oklch(50% 0.17 var(--fz-hue)); color: #fff; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; margin-bottom: 20px; box-shadow: 0 8px 20px -6px oklch(45% 0.15 var(--fz-hue) / 0.5); } .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; } .auth-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-md); padding: 40px; width: 100%; max-width: 420px; } .auth-card h1 { font-size: 24px; margin: 0 0 6px; } .auth-card p.subtitulo { color: var(--text-muted); font-size: 14px; margin: 0 0 26px; } .campo { margin-bottom: 16px; } .campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; } .campo input, .campo select, .campo textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; font-family: 'Inter', sans-serif; background: var(--surface); color: var(--text); } .campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--brand); } .icone-picker { display: grid; grid-template-columns: repeat(3, 40px); gap: 8px; } .icone-picker-opcao { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-muted); } .icone-picker-opcao:hover { border-color: var(--brand); color: var(--brand); } .icone-picker-opcao.selecionado { border-color: var(--brand-strong); background: var(--brand-soft); color: var(--brand-soft-text); } .iti { width: 100%; } .iti__country-list { max-height: 200px; z-index: 999; border-radius: 8px; box-shadow: var(--shadow-md); background: var(--surface); color: var(--text); } .iti input.iti__tel-input, .campo .iti input { border-radius: 8px; } .radio-opcoes { display: flex; flex-direction: column; gap: 10px; } .radio-opcoes label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 13.5px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 12px; cursor: pointer; } .radio-opcoes input { width: auto; margin-top: 3px; } .gateway-opcoes { display: flex; gap: 14px; flex-wrap: wrap; } .gateway-opcao { flex: 1; min-width: 220px; position: relative; display: flex; flex-direction: column; gap: 4px; border: 2px solid var(--border-strong); border-radius: 12px; padding: 16px 18px; cursor: pointer; transition: border-color .15s, background .15s; } .gateway-opcao:hover { border-color: oklch(70% 0.06 var(--fz-hue)); } .gateway-opcao input { position: absolute; opacity: 0; pointer-events: none; } .gateway-opcao-nome { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; } .gateway-opcao-desc { font-size: 12.5px; color: var(--text-muted); } .gateway-opcao-ativa { border-color: var(--brand-strong); background: var(--brand-soft); } .gateway-opcao-ativa .gateway-opcao-nome { color: var(--brand-soft-text); } .gateway-opcao-badge { position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 700; color: var(--brand-soft-text); background: var(--brand-soft); padding: 3px 9px; border-radius: 999px; } .auth-card .btn { width: 100%; text-align: center; padding: 12px; margin-top: 6px; } .auth-links { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-muted); } .alerta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13.5px; margin-bottom: 16px; } .alerta-erro { background: var(--danger-soft); color: var(--danger-soft-text); border: 1px solid oklch(85% 0.08 25); } .alerta-sucesso { background: var(--success-soft); color: var(--success-soft-text); border: 1px solid oklch(85% 0.08 145); } /* ===== Painel logado (app shell) ===== */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: 240px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; } .sidebar-logo { font-size: 20px; font-weight: 700; padding: 0 10px 20px; } .sidebar-logo span { color: var(--brand-hover); } .sidebar-teste { background: var(--brand-soft); color: var(--brand-soft-text); font-size: 12.5px; padding: 10px 12px; border-radius: 8px; margin: 0 6px 16px; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } .sidebar-nav a { display: flex; align-items: center; gap: 11px; color: var(--text-muted); font-size: 14px; font-weight: 500; padding: 10px 12px; border-radius: 8px; } .sidebar-nav a .icone { color: var(--text-faint); } .sidebar-nav a:hover { background: var(--bg-soft); color: var(--text); } .sidebar-nav a.active { background: var(--brand-soft); color: var(--brand-soft-text); font-weight: 700; } .sidebar-nav a.active .icone { color: var(--brand-soft-text); } .sidebar-rodape { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; } .sidebar-usuario { padding: 12px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); cursor: pointer; flex-shrink: 0; } .tema-toggle:hover { color: var(--text); border-color: var(--border-strong); } .tema-toggle .icone-lua { display: none; } :root[data-tema="escuro"] .tema-toggle .icone-sol { display: none; } :root[data-tema="escuro"] .tema-toggle .icone-lua { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .tema-toggle .icone-sol { display: none; } :root:not([data-tema="claro"]) .tema-toggle .icone-lua { display: block; } } .conteudo { flex: 1; min-width: 0; padding: 32px 40px; max-width: 1180px; } .conteudo h1 { font-size: 26px; margin: 0 0 6px; } .conteudo .subtitulo { color: var(--text-muted); font-size: 14px; margin: 0 0 28px; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-bottom: 30px; } .card { background: var(--surface); border-radius: 14px; padding: 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); } .card .rotulo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .card .rotulo .icone { width: 16px; height: 16px; } .card .valor { font-size: 26px; font-weight: 800; font-family: 'Sora', sans-serif; margin-top: 6px; font-variant-numeric: tabular-nums; } .valor.positivo { color: var(--success); } .valor.negativo { color: var(--danger); } .painel-box { background: var(--surface); border-radius: 14px; padding: 24px; margin-bottom: 24px; border: 1px solid var(--border); } .painel-box h2 { font-size: 17px; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; } .painel-box h2 .icone { color: var(--text-faint); width: 19px; height: 19px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { padding: 11px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; } th { background: var(--surface-2); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-muted); } .tabela-acoes a { margin-right: 12px; font-size: 13px; } .tabela-acoes a.excluir { color: var(--danger); } /* ===== Lista de lançamentos estilo extrato bancário (despesas/receitas/extrato, contas a pagar do painel) -- substitui a tabela crua por linhas com ícone da categoria, descrição + metadados, e valor colorido alinhado à direita, como um extrato de banco de verdade. ===== */ .lista-lancamentos { display: flex; flex-direction: column; } .lancamento-item { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--border); } .lancamento-item:last-child { border-bottom: none; } .lancamento-icone { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); } .lancamento-icone.receita { background: var(--success-soft); color: var(--success-soft-text); } .lancamento-icone.despesa { background: var(--danger-soft); color: var(--danger-soft-text); } .lancamento-info { flex: 1; min-width: 0; } .lancamento-titulo { font-weight: 600; font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lancamento-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .lancamento-meta .ponto::before { content: '·'; margin-right: 6px; } .lancamento-valores { text-align: right; flex-shrink: 0; } .lancamento-valor { font-weight: 700; font-family: 'Sora', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; } .lancamento-valor.positivo { color: var(--success); } .lancamento-valor.negativo { color: var(--danger); } .lancamento-acoes { display: flex; gap: 2px; flex-shrink: 0; margin-left: 4px; } .lancamento-vazio { padding: 20px 4px; color: var(--text-muted); font-size: 14px; text-align: center; } @media (max-width: 480px) { /* Em telas estreitas, ícone + descrição já ocupam quase toda a largura -- valor e ações ficando na mesma linha forçava a descrição a truncar cedo demais (ex: "Aluguel do apartamento..." virava só "A..."). Quebra pra uma segunda linha, alinhada sob o texto. */ .lancamento-item { flex-wrap: wrap; } .lancamento-info { flex-basis: calc(100% - 54px); } .lancamento-valores { margin-left: 54px; text-align: left; } .lancamento-acoes { margin-left: auto; } } .filtros { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: end; } .filtros .campo { margin-bottom: 0; min-width: 160px; } .badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; } .badge-verde { background: var(--success-soft); color: var(--success-soft-text); } .badge-vermelho { background: var(--danger-soft); color: var(--danger-soft-text); } .badge-cinza { background: var(--surface-2); color: var(--text-muted); } .badge-amarelo { background: var(--warn-soft); color: var(--warn-soft-text); } .badge-status-ativo { background: oklch(85% 0.12 145); color: oklch(30% 0.1 145); } .badge-status-fixo { display: inline-flex; align-items: center; gap: 4px; background: oklch(85% 0.12 250); color: oklch(30% 0.1 250); } .form-linha { display: flex; gap: 14px; flex-wrap: wrap; } .form-linha .campo { flex: 1; min-width: 180px; } .form-linha .campo label { min-height: 32px; } /* Blocos de exemplo/dica pequenos (ex: hints de campo em whatsapp-config.php, financiamentos.php) -- precisam quebrar linha mesmo com texto/JSON comprido e sem espaços, senão estouram a largura do campo (achado real testando na tela). */ .campo-exemplo { font-size: 12px; line-height: 1.55; color: var(--text-muted); margin: 8px 0 0; background: var(--surface-2); border-left: 3px solid var(--brand-hover); padding: 10px 12px; border-radius: 0 6px 6px 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; } .campo-exemplo code { display: inline-block; color: var(--text); background: var(--border); padding: 1px 5px; border-radius: 4px; font-size: 11.5px; font-family: 'Courier New', monospace; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; max-width: 100%; } /* ===== Dropzone (upload de arquivo com drag & drop) ===== */ .dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; cursor: pointer; border: 2px dashed var(--border-strong); border-radius: 14px; padding: 34px 20px; background: var(--surface-2); transition: border-color .15s, background-color .15s; } .dropzone:hover { border-color: oklch(68% 0.08 var(--fz-hue)); background: var(--bg-soft); } .dropzone:focus-within { outline: none; border-color: var(--brand); } .dropzone.dropzone-arrastando { border-color: var(--brand-strong); background: var(--brand-soft); } .dropzone.dropzone-preenchida { border-style: solid; border-color: var(--brand); background: var(--brand-soft); } .dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .dropzone-icone { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand-hover); flex-shrink: 0; } .dropzone-icone svg { width: 22px; height: 22px; } .dropzone-texto { font-size: 14.5px; font-weight: 600; color: var(--text); } /* Duas variações de texto no mesmo lugar -- qual aparece depende só do estado (parado vs. arrastando um arquivo por cima), trocado via CSS puro (a classe já é alternada pelo app.js). No celular a pessoa nunca vê "arraste": não existe drag de arquivo em touch, só a de "selecionar" aparece, porque a de "arrastando" só liga com a classe .dropzone-arrastando. */ .dropzone-texto-arrastando { display: none; } .dropzone-arrastando .dropzone-texto-padrao { display: none; } .dropzone-arrastando .dropzone-texto-arrastando { display: block; color: var(--brand-hover); } .dropzone-ajuda { font-size: 12.5px; color: var(--text-faint); } .dropzone-arquivo-nome { display: none; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--brand-soft-text); background: oklch(100% 0 0 / 0.6); border-radius: 100px; padding: 5px 8px 5px 14px; margin-top: 2px; max-width: 100%; } .dropzone-preenchida .dropzone-arquivo-nome { display: inline-flex; } .dropzone-preenchida .dropzone-icone { background: var(--brand); color: #fff; } #extrato-dropzone-nome-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropzone-cancelar { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer; background: var(--border-strong); color: var(--text); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .dropzone-cancelar:hover { background: var(--danger); color: #fff; } .filtro-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; } .filtro-tab { display: inline-block; padding: 7px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border-strong); } .filtro-tab.ativo { background: var(--brand-strong); color: #fff; border-color: transparent; } /* ===== Gráficos (relatórios) — modelo definido por Victor em grafio.html ===== */ .finance-card { background: linear-gradient(135deg, var(--surface), var(--brand-soft)); border-radius: 24px; padding: 26px 28px; box-shadow: var(--shadow-lg); color: var(--text); margin-bottom: 20px; } .finance-card .top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; } .finance-card .top > span, .finance-card .top small { color: var(--text-muted); font-size: 14px; } .finance-card .top h2 { font-family: 'Sora', sans-serif; font-size: 38px; margin: 8px 0; } .finance-card .badge { background: var(--brand-soft); color: var(--brand-soft-text); padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; } .finance-card .badge.negativo { background: var(--danger-soft); color: var(--danger-soft-text); } .finance-card-projecao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 340px; text-align: left; } .finance-card-projecao small { display: block; } .progress-box { margin: 22px 0 4px; } .progress-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13.5px; } .progress-info strong { font-variant-numeric: tabular-nums; } .progress { height: 14px; background: var(--brand-soft); border-radius: 20px; overflow: hidden; } .progress > div { height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-strong)); border-radius: 20px; } .progress > div.negativo { background: linear-gradient(90deg, oklch(45% 0.16 25), oklch(60% 0.18 25)); } /* padding-top reserva espaço pro rótulo de valor da barra mais alta (fica 20px ACIMA da barra -- sem essa reserva, uma barra perto de 100% de altura faz o rótulo colidir com o título da caixa acima, achado real testando com dados de verdade). border-bottom dá uma linha de base sutil, mais fácil de comparar a altura das barras do que "flutuando" sem nenhuma referência. */ .days-chart { height: 220px; display: flex; align-items: flex-end; gap: 14px; padding: 24px 4px 30px; border-bottom: 1px solid var(--border); } .days-chart-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; min-width: 0; } .days-chart-bar { width: 100%; max-width: 26px; margin: 0 auto; border-radius: 8px 8px 4px 4px; position: relative; min-height: 6px; background: linear-gradient(180deg, var(--chart-receita), var(--chart-receita-forte)); transition: transform .2s; } .days-chart-bar.despesa { background: linear-gradient(180deg, oklch(70% 0.16 25), oklch(48% 0.17 25)); } .days-chart-item:hover .days-chart-bar { transform: translateY(-6px); } .days-chart-valor { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; } .days-chart-label { position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } /* Variante "compacto": usada quando tem muita barra na tela (ex: 31 dias do mês) -- mostrar o valor de TODAS as barras vira poluição visual e a maioria vira "0" mesmo (ver skill de dataviz, "selective direct labels, never a number on every point"). O valor exato continua acessível passando o mouse (tooltip nativo via title=, já existe) ou no "Ver como tabela" logo abaixo. */ .days-chart.compacto .days-chart-valor { display: none; } .days-chart.compacto .days-chart-item:hover .days-chart-valor { display: block; } .days-chart-titulo { font-size: 13.5px; font-weight: 700; color: var(--text); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; } .days-chart-titulo.despesa { color: oklch(42% 0.16 25); } .kpi-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; } .kpi-card { flex: 1; min-width: 130px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .kpi-card-destaque { background: var(--brand-soft); border-color: var(--brand-strong); } .kpi-card-rotulo { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .kpi-card-valor { font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .kpi-card-valor.kpi-card-vazio { font-size: 13px; font-weight: 400; color: var(--text-faint); } .kpi-card-valor.positivo { color: var(--success); } .kpi-card-valor.negativo { color: var(--danger); } .kpi-card-badge { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; } .kpi-card-badge.positivo { color: var(--success-soft-text); background: var(--success-soft); } .kpi-card-badge.negativo { color: var(--danger-soft-text); background: var(--danger-soft); } .grafico-legenda { display: flex; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; } .grafico-legenda-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); } .grafico-legenda-cor { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .grafico-legenda-linha-mini { width: 14px; height: 3px; border-radius: 2px; display: inline-block; } .grafico-legenda-receita { background: var(--chart-receita); } .grafico-legenda-despesa { background: var(--danger); } .grafico-tabela-toggle { margin-top: 16px; } .grafico-tabela-toggle summary { cursor: pointer; font-size: 13px; color: var(--brand); font-weight: 600; } .grafico-tabela-toggle table { margin-top: 10px; } @media (max-width: 600px) { .grafico-categoria-linha { grid-template-columns: 90px 1fr 74px; gap: 8px; } } .tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tabela-scroll table { min-width: 560px; } /* Base do botão flutuante "Novidades" -- precisa vir ANTES do @media (max-width:860px) logo abaixo (que reposiciona esse mesmo botão no mobile pra não sobrepor o hambúrguer da .topbar-mobile): duas regras com a mesma especificidade resolvem empate pela ordem no arquivo, então se essa base viesse depois ela sempre ganharia da versão mobile, em qualquer tamanho de tela -- bug real encontrado ao testar o carrossel de projeção (o botão cobria o hambúrguer). */ .botao-novidades-flutuante { position: fixed; top: 14px; right: 14px; z-index: 500; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow-sm); } .botao-novidades-flutuante:hover { color: var(--brand); border-color: var(--brand); } .topbar-mobile { display: none; } .overlay-menu { display: none; } @media (max-width: 860px) { .topbar-mobile { display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 16px; } .topbar-mobile .logo-mobile { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; } .topbar-mobile .logo-mobile span { color: var(--brand-hover); } .botao-menu { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px; color: var(--text); display: flex; } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 90; width: 240px; transform: translateX(-100%); transition: transform 0.25s ease; } .sidebar.aberta { transform: translateX(0); } .overlay-menu.ativo { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 85; } .conteudo { padding: 20px; padding-top: 84px; } /* Abaixo da topbar-mobile (que já ocupa o canto superior direito com o botão de menu) em vez de sobrepor o hambúrguer. */ .botao-novidades-flutuante { top: 92px; right: 12px; width: 32px; height: 32px; z-index: 70; } .hero { padding: 40px 20px; } } /* ===== Modal de confirmação (substitui o confirm() nativo do navegador) ===== */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; padding: 20px; background: var(--overlay); display: flex; align-items: center; justify-content: center; } .modal-overlay[hidden] { display: none; } .modal-caixa { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); } .modal-caixa p { margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--text); } .modal-acoes { display: flex; gap: 10px; justify-content: flex-end; } /* ===== Changelog "Novidades" (base do botão flutuante ficou lá em cima, antes do 1º @media) ===== */ .modal-caixa.modal-changelog-caixa { max-width: 480px; max-height: 82vh; display: flex; flex-direction: column; } .modal-changelog-caixa h2 { margin: 0 0 4px; font-size: 19px; } .modal-changelog-caixa .changelog-subtitulo { margin: 0 0 18px; font-size: 13.5px; color: var(--text-muted); } .changelog-lista { display: flex; flex-direction: column; gap: 16px; overflow-y: auto; margin-bottom: 20px; padding-right: 4px; } .changelog-item { display: flex; gap: 12px; align-items: flex-start; } .changelog-item-icone { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-soft-text); display: flex; align-items: center; justify-content: center; } .changelog-item strong { display: block; font-size: 14px; margin-bottom: 2px; } .changelog-item p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); } /* ===== Faixa de sugestão de instalação do PWA ===== */ .pwa-instalar-faixa { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 480px; margin: 0 auto; background: var(--surface); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .pwa-instalar-faixa[hidden] { display: none; } .pwa-instalar-icone img { border-radius: 9px; display: block; } .pwa-instalar-texto { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); } .pwa-instalar-texto strong { display: block; font-size: 14px; color: var(--text); } .pwa-instalar-acoes { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; } .pwa-instalar-acoes .btn { white-space: nowrap; } @media (max-width: 480px) { .pwa-instalar-faixa { flex-wrap: wrap; } .pwa-instalar-acoes { flex-direction: row; width: 100%; } .pwa-instalar-acoes .btn { flex: 1; } } /* ===== Gráfico de pizza (donut, SVG) ===== */ .pizza-grafico-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .pizza-grafico { width: 200px; height: 200px; flex-shrink: 0; } .pizza-grafico circle { transition: opacity .12s; cursor: pointer; } .pizza-grafico:hover circle { opacity: .55; } .pizza-grafico circle:hover { opacity: 1; } .pizza-grafico circle:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 2px; } .pizza-total-valor { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px; fill: var(--text); } .pizza-total-rotulo { font-size: 11px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .pizza-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 180px; } .pizza-legenda li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; transition: opacity .12s; } .pizza-legenda-item { cursor: pointer; border-radius: 6px; padding: 3px 6px; margin: -3px -6px; } .pizza-legenda-item:hover, .pizza-legenda-item:focus-visible { background: var(--surface-2); } .pizza-legenda-item.selecionado .pizza-legenda-nome { color: var(--brand); } .pizza-legenda-cor { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } .pizza-legenda-nome { flex: 1; color: var(--text); font-weight: 600; } .pizza-legenda-valor { color: var(--text-muted); white-space: nowrap; } @media (max-width: 560px) { .pizza-grafico-wrap { justify-content: center; } } /* ===== Interruptor (toggle switch) -- substitui checkbox nativo em opções tipo "ligar/desligar" (ex: marcar despesa como recorrente). .campo label é display:block globalmente (pensado pra rótulo ficar EM CIMA de um campo), então essa variante usa sua própria classe pra ficar em linha (flex) com o texto, em vez de herdar aquele espaçamento pensado pra outro layout. ===== */ .campo .toggle-linha { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 0; cursor: pointer; } .toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; width: 40px; height: 22px; } .toggle-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .toggle-track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 100px; transition: background-color .15s; } .toggle-bola { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px oklch(0% 0 0 / 0.25); transition: transform .15s; } .toggle-switch input:checked ~ .toggle-track { background: var(--brand); } .toggle-switch input:checked ~ .toggle-track .toggle-bola { transform: translateX(18px); } .toggle-switch input:focus-visible ~ .toggle-track { outline: 2px solid var(--brand); outline-offset: 2px; } /* ===== Cor da marca nos controles nativos que continuam nativos (checkbox de seleção em lote, campo de data) -- accent-color só dá uma dica de cor pro navegador desenhar o controle DELE MESMO com o tom certo, não troca o componente por nada customizado (zero risco de compatibilidade: navegador sem suporte simplesmente ignora e mostra a cor padrão). ===== */ input[type="date"], input[type="month"], input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); } /* ===== Saldo positivo/negativo fora do card do painel (ex: tabela de contas bancárias) ===== */ .saldo-positivo { color: var(--success); font-weight: 600; } .saldo-negativo { color: var(--danger); font-weight: 600; } /* ===== Toast (mensagem de sucesso/erro após um redirect, ver includes/flash.php) ===== */ .toast-container { position: fixed; top: 18px; right: 18px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 36px); } .toast { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand); box-shadow: var(--shadow-md); border-radius: 10px; padding: 13px 14px; font-size: 13.5px; color: var(--text); min-width: 260px; max-width: 380px; animation: fz-toast-entrada .25s ease; } .toast.sucesso { border-left-color: var(--success); } .toast.erro { border-left-color: var(--danger); } .toast-icone { flex-shrink: 0; display: flex; } .toast.sucesso .toast-icone { color: var(--success); } .toast.erro .toast-icone { color: var(--danger); } .toast-texto { flex: 1; line-height: 1.4; } .toast-fechar { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 18px; line-height: 1; padding: 0 0 0 4px; } .toast-fechar:hover { color: var(--text); } @keyframes fz-toast-entrada { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes fz-toast-saida { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(24px); } } @media (max-width: 480px) { .toast-container { left: 12px; right: 12px; top: 12px; max-width: none; } .toast { min-width: 0; max-width: none; } } /* ===== Paginação (listas de despesas/receitas) ===== */ .paginacao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; } .paginacao-info { font-size: 13px; color: var(--text-muted); } .paginacao-botoes { display: flex; gap: 8px; } /* ===== Ações rápidas (atalhos no topo do painel) ===== */ .acoes-rapidas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; } .acao-rapida { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; padding: 14px 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); font-size: 12.5px; font-weight: 600; text-align: center; transition: transform .12s, box-shadow .12s; } .acao-rapida:hover { color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow-md); } .acao-rapida-icone { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .acao-rapida-negativo .acao-rapida-icone { background: linear-gradient(135deg, oklch(65% 0.18 25), oklch(48% 0.19 25)); } .acao-rapida-positivo .acao-rapida-icone { background: linear-gradient(135deg, var(--success), var(--success-hover)); } .acao-rapida-neutro .acao-rapida-icone { background: linear-gradient(135deg, oklch(65% 0.1 calc(var(--fz-hue) + 60)), oklch(50% 0.12 calc(var(--fz-hue) + 60))); } /* ===== Cards de KPI com gradiente colorido. --kpi-positivo usa --success (hue fixo 145), NÃO --brand -- mesmo motivo do --chart-receita acima: "Receitas do mês" precisa continuar lendo como positivo mesmo quando o admin escolhe uma cor de marca avermelhada/alaranjada, que senão fica idêntica (ou pior, oposta) ao --danger/--aviso ao lado. ===== */ .kpi-positivo, .kpi-negativo, .kpi-aviso, .kpi-neutro { border: none; } .kpi-positivo { background: linear-gradient(135deg, var(--success), var(--success-hover)); } .kpi-negativo { background: linear-gradient(135deg, oklch(68% 0.18 25), oklch(50% 0.19 25)); } .kpi-aviso { background: linear-gradient(135deg, oklch(78% 0.15 80), oklch(62% 0.17 60)); } .kpi-neutro { background: linear-gradient(135deg, oklch(62% 0.13 calc(var(--fz-hue) + 150)), oklch(46% 0.15 calc(var(--fz-hue) + 150))); } .kpi-positivo .kpi-card-rotulo, .kpi-negativo .kpi-card-rotulo, .kpi-aviso .kpi-card-rotulo, .kpi-neutro .kpi-card-rotulo { color: oklch(100% 0 0 / 0.85); } .kpi-positivo .kpi-card-valor, .kpi-negativo .kpi-card-valor, .kpi-aviso .kpi-card-valor, .kpi-neutro .kpi-card-valor { color: #fff; } /* ===== Toggle mostrar/ocultar saldo (painel) ===== */ #saldo-toggle-botao { display: inline-flex; } #saldo-toggle-botao .icone-saldo-ocultar { display: none; } #saldo-valor-oculto { display: none; } .saldo-oculto #saldo-valor-real { display: none !important; } .saldo-oculto #saldo-valor-oculto { display: inline !important; } .saldo-oculto #saldo-toggle-botao .icone-saldo-mostrar { display: none; } .saldo-oculto #saldo-toggle-botao .icone-saldo-ocultar { display: inline-block; } /* ===== Barra de navegação inferior (mobile, usuário comum) ===== */ .bottom-nav-mobile { display: none; } @media (max-width: 860px) { .bottom-nav-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; color: var(--text-muted); font-size: 10.5px; font-weight: 600; border-radius: 10px; background: none; border: none; font-family: inherit; cursor: pointer; } .bottom-nav-item.active { color: var(--brand); background: var(--brand-soft); } .conteudo { padding-bottom: 78px; } /* O botão flutuante do chat (includes/chat_widget.php) usa bottom:22px fixo -- levanta ele acima da barra inferior nova só quando ela existe (usuário comum), sem mexer no arquivo do widget. Admin não tem .bottom-nav-mobile, então o FAB continua na posição original pra ele. */ body:has(.bottom-nav-mobile) #fz-chat-fab { bottom: 78px; } } /* ===== Conversor de moeda rápido (painel) ===== */ .conversor-moeda { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .conversor-moeda .campo { margin-bottom: 0; min-width: 90px; } .conversor-moeda select { min-width: 80px; } #conversor-trocar-botao { margin-bottom: 1px; } .conversor-resultado { font-family: 'Sora', sans-serif; font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .conversor-atualizado { font-size: 12px; color: var(--text-faint); margin: 0; } /* ===== Financiamentos / parcelamentos ===== */ .lista-financiamentos { display: flex; flex-direction: column; gap: 14px; } .financiamento-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; } .financiamento-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .financiamento-titulo { font-size: 14.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; } .financiamento-valores { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; } .financiamento-acoes { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } /* ===== Avatar de foto de perfil (membros da família / titular) ===== */ .avatar-membro { border-radius: 50%; object-fit: cover; flex-shrink: 0; vertical-align: middle; } .avatar-membro-vazio { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--surface-2); color: var(--text-muted); } .avatar-membro-mini { width: 14px; height: 14px; }