| faz esse cabeçalho grudar no topo enquanto se rola AQUELE mês, e sair de cena assim que o cabeçalho do mês seguinte o empurra por trás (mesmo mecanismo de "cabeçalho de seção fixo" de qualquer lista longa agrupada). --------------------------------------------------------------------------- */ .tx-table { table-layout: fixed; width: 100%; } .tx-table thead th { position: sticky; top: var(--tx-sticky-top, 56px); z-index: 8; background: var(--surface); padding: 10px 8px; /* Sem `nowrap`. Ele fazia o cabeçalho — em especial a última célula, com "Editar todos" mais dois ícones — exigir mais largura do que a tabela tinha, e a tabela inteira transbordava. Isso ficou escondido enquanto o invólucro rolava de lado; sem a rolagem, virava barra de rolagem horizontal na PÁGINA em telas menores. Deixando quebrar linha, cada rótulo se acomoda na coluna que tem — e os botões, que não podem partir no meio, mantêm o `nowrap` deles próprios (.bulk-edit-btn-th / .bulk-cancel-btn-th). */ border-bottom: 2px solid var(--border); } .tx-table th.sortable { cursor: pointer; user-select: none; } .tx-table th.sortable:hover { color: var(--text); } .tx-table .th-label { margin-right: 2px; } .tx-table .sort-arrow { opacity: 0.45; font-size: var(--fs-xs); } .tx-table th.sortable.sorted .sort-arrow { opacity: 1; color: var(--primary); } /* Era o menor texto do sistema inteiro (10px) e ainda por cima a meia opacidade: o botão que abre o filtro de uma coluna. Justamente o que precisa ser encontrado sem saber que existe. A altura do cabeçalho grudado é medida em tempo de execução (lancamentos.js), então crescer 2px aqui não desalinha nada. */ .th-filter-btn { background: transparent; border: none; padding: 2px 4px; font-size: var(--fs-xs); cursor: pointer; opacity: 0.65; vertical-align: middle; } .th-filter-btn:hover, .th-filter-btn.ativo { opacity: 1; } .th-filter-btn.ativo { background: color-mix(in srgb, var(--primary) 18%, transparent); border-radius: 4px; } .tx-th-actions-header { text-align: right; white-space: nowrap; } .th-icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 4px 7px; font-size: var(--fs-xs); cursor: pointer; margin-left: 4px; } .th-icon-btn:hover { background: var(--bg); } /* Painel do filtro: sobe do ícone clicado, não faz parte do fluxo da tabela (position:fixed calculado em JS), então nunca desalinha nada. */ .th-filter-popover { position: fixed; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; min-width: 210px; font-size: var(--fs-sm); } .th-filter-popover label { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 4px; } .th-filter-popover input, .th-filter-popover select { width: 100%; margin-bottom: 4px; } .th-filter-popover .pop-ou { font-size: var(--fs-xs); color: var(--text-muted); margin: 8px 0 6px; text-align: center; } .th-filter-popover .pop-limpar { width: 100%; margin-top: 6px; } /* No card do celular o cabeçalho por coluna não faz sentido (cada campo já vem rotulado no próprio cartão) — some, e quem filtra/ordena usa a barra simples de #tx-mobile-filters em vez de ícone por coluna. */ #tx-mobile-filters { display: none; } @media (max-width: 640px) { /* Previstos entrou no mesmo molde: onze colunas num telefone é rolagem lateral sem fim, e cada linha vira cartão pelos mesmos `data-label`. */ .tx-table thead, .tabela-editavel thead { display: none; } #tx-mobile-filters { display: block; } .tx-bulk-mobile { display: flex; } #tx-filters-panel { display: none; } } /* AS TRÊS PORTAS DE LANÇAMENTOS, LADO A LADO. Empilhadas, "A vencer", "Novo lançamento" e as orientações ocupavam a altura inteira antes da primeira linha de dado — e as orientações eram cinco parágrafos SEMPRE abertos, que quem já sabe usar a tela relia todo dia. Agora são três botões numa fileira, e o texto só aparece se for pedido. Aberto, o painel atravessa a fileira inteira e desce para baixo dos outros dois (`order: 1`): a tabela de "Novo lançamento" tem sete colunas e a de "A vencer" tem cinco — nenhuma cabe num terço da largura. Assim os botões fechados continuam alinhados em cima, no mesmo lugar de sempre, e o conteúdo aberto ganha a tela toda. */ .acoes-topo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 18px; } /* Flex, e não grid de colunas fixas, porque a fileira tem DOIS ou TRÊS painéis: "A vencer" só aparece quando existe conta vencendo. Numa grade de auto-fit os dois sobrariam encolhidos à esquerda, com metade da linha vazia; aqui eles dividem a largura que houver, sejam dois ou três. */ .acoes-topo > .panel { flex: 1 1 210px; min-width: 0; margin: 0; } .acoes-topo > .panel.aberto { flex-basis: 100%; order: 1; } /* O link "Faturas" na linha da conta carregava oito declarações em `style=` — borda, raio, cor, tamanho — escritas à mão dentro do JS, fora do alcance de qualquer troca de identidade. */ .badge-link { display: inline-block; padding: 5px 10px; border: 1px solid var(--primary); border-radius: var(--radius-sm); color: var(--primary-dark); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; } .badge-link:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } /* Os três campos de cartão dividem uma célula só na edição de Contas. O seletor repete `.tabela-editavel td` porque o piso de 128px lá de cima vale para todo campo de texto da tabela, e aqui são três caixas de dois dígitos lado a lado — 128px cada estouraria a célula. */ .ed-cartao { display: flex; gap: 4px; flex-wrap: wrap; } .tabela-editavel td .ed-cartao input { width: 78px; min-width: 0; } /* Força a coluna a caber os três lado a lado. Sem o piso eles empilham em três linhas e a linha da conta fica três vezes mais alta que as vizinhas. */ .tabela-editavel td .ed-cartao { min-width: 250px; } /* Título do painel com ações do lado. Existe porque o botão de editar PRECISA ficar fora da tabela: com onze colunas de campo, a tabela rola de lado, e um botão dentro do | some da tela junto com a rolagem — some o
Salvar de quem está no meio da edição. Fora dela, ele fica sempre no mesmo
lugar, no computador e no celular. */
.panel-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px 16px;
margin-bottom: 14px;
}
.panel-head h2 {
margin: 0;
}
.panel-head-acoes {
display: flex;
align-items: center;
gap: 8px;
}
/* Campo de edição dentro de tabela larga: sem um piso, "Moradia" vira
"Mora…" e "A definir ao pagar" vira uma caixa de três letras. */
.tabela-editavel td input[type="text"],
.tabela-editavel td input[type="date"] {
min-width: 128px;
}
/* Um pouco mais que os campos de texto porque o rótulo mais longo em jogo é
"Cartão de Crédito": em 128px ele sai como "Cartão c…" e as duas opções de
cartão ficam indistinguíveis fechadas. */
.tabela-editavel td select {
min-width: 152px;
}
.tabela-editavel td input[type="number"] {
min-width: 92px;
}
/* Badges de origem na linha do tempo de "A pagar". */
.badge.origem-recorrente { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.badge.origem-cartao { background: color-mix(in srgb, var(--violet) 18%, transparent); color: var(--violet); }
.badge.origem-emprestimo { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
:root[data-theme="dark"] .badge.origem-cartao {
background: color-mix(in srgb, var(--violet) 12%, transparent);
}
a.badge { text-decoration: none; }
a.badge:hover { filter: brightness(0.92); }
/* ---------------------------------------------------------------------------
Avisos (toast) e confirmações (dialog) no visual do sistema — js/ui.js.
--------------------------------------------------------------------------- */
.toast-container {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 100;
display: flex;
flex-direction: column-reverse;
gap: 8px;
width: min(420px, calc(100vw - 32px));
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
padding: 12px 14px;
font-size: var(--fs-sm);
line-height: 1.45;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: auto;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast-success { border-left-color: var(--receita); }
.toast-error { border-left-color: var(--despesa); }
.toast-close {
margin-left: auto;
background: none;
border: none;
padding: 0 0 0 6px;
font-size: var(--fs-xs);
font-weight: 400;
color: var(--text-muted);
flex-shrink: 0;
}
.toast-close:hover { background: none; color: var(--text); }
.dialog-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 101;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.dialog-box {
background: var(--surface);
border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
padding: 22px 24px;
max-width: 420px;
width: 100%;
}
.dialog-title {
margin: 0 0 8px;
font-size: var(--fs-lg);
color: var(--text);
}
.dialog-message {
margin: 0;
font-size: var(--fs-sm);
line-height: 1.55;
color: var(--text-muted);
white-space: pre-line;
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 20px;
}
.dialog-confirm-danger {
background: var(--despesa);
}
.dialog-confirm-danger:hover {
background: color-mix(in srgb, var(--despesa) 85%, black);
}
@media (prefers-reduced-motion: reduce) {
.toast { transition: none; }
}
/* ---------------------------------------------------------------------------
Lista de Lançamentos em tela estreita: cada linha vira um cartão de duas
colunas (rótulo · valor) em vez de obrigar a rolar a tabela de lado — é a
tela que mais faz sentido conferir no celular, parado na fila do mercado.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
/* As tabelas de mês não têm mais próprio (o cabeçalho — títulos,
ordenação, filtros e "Editar todos" — é o único, fixo, fora delas), então
não há mais nada aqui pra esconder. */
table.mobile-cards,
table.mobile-cards tbody {
display: block;
width: 100%;
}
table.mobile-cards tr {
display: block;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px 12px;
margin-bottom: 10px;
}
/* A linha oculta do "pode ser pagamento de..." não deve virar um cartão
vazio quando fechada — só quando aberta (.open), como no layout normal. */
table.mobile-cards tr.provisioned-match-row {
display: none;
border: none;
padding: 0;
margin: -6px 0 10px;
}
table.mobile-cards tr.provisioned-match-row.open {
display: block;
}
table.mobile-cards tr.split-row {
display: none;
border: none;
padding: 0;
margin: -6px 0 10px;
}
table.mobile-cards tr.split-row.open {
display: block;
}
table.mobile-cards td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding: 7px 0;
border-bottom: 1px solid var(--border);
text-align: right;
}
table.mobile-cards td:last-child {
border-bottom: none;
}
table.mobile-cards td.tx-actions-cell {
justify-content: flex-end;
}
/* Na edição em massa a célula de ações fica vazia (o Salvar é um só, lá em
cima). Vazia e visível, ela vira uma faixa em branco no pé de cada cartão. */
table.mobile-cards td.tx-actions-cell:empty {
display: none;
}
table.mobile-cards td.tx-actions-cell .row-actions {
justify-content: flex-end;
flex-wrap: wrap;
}
table.mobile-cards td::before {
content: attr(data-label);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--text-muted);
text-align: left;
flex-shrink: 0;
}
table.mobile-cards td[data-label="Descrição"] {
text-align: right;
flex-wrap: wrap;
}
/* Cartão em modo de edição. O `min-width` que os campos carregam no inline
style existe para a TABELA do computador (impedir que a coluna encolha até
o campo virar um risco); dentro do cartão ele faz o contrário — 180px de
largura mínima empurram o campo para fora de uma tela de 360px, e a linha
"rótulo · campo" quebra. Aqui o campo ocupa o espaço que sobra depois do
rótulo, e nada mais. */
table.mobile-cards td input,
table.mobile-cards td select {
min-width: 0;
width: auto;
flex: 1 1 auto;
max-width: 62%;
}
/* Checkbox e afins não devem esticar junto: um quadrado de seleção com 62%
da largura do cartão. */
table.mobile-cards td input[type="checkbox"],
table.mobile-cards td input[type="radio"] {
flex: 0 0 auto;
width: auto;
max-width: none;
}
}
/* Primeiros passos: estado vazio do Dashboard para quem ainda não cadastrou
nenhuma conta. Some sozinho assim que a primeira conta é criada. */
ol.passos-iniciais {
list-style: none;
counter-reset: passo;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
ol.passos-iniciais li {
counter-increment: passo;
position: relative;
padding: 14px 0 14px 40px;
border-top: 1px solid var(--border);
}
ol.passos-iniciais li:first-child { border-top: none; }
ol.passos-iniciais li::before {
content: counter(passo);
position: absolute;
left: 0;
top: 14px;
width: 26px;
height: 26px;
border-radius: 50%;
background: color-mix(in srgb, var(--primary) 15%, transparent);
color: var(--primary);
font-weight: 700;
font-size: var(--fs-sm);
display: flex;
align-items: center;
justify-content: center;
}
.passo-titulo {
font-weight: 600;
font-size: var(--fs-base);
margin-bottom: 2px;
}
.passo-texto {
font-size: var(--fs-sm);
color: var(--text-muted);
margin-bottom: 6px;
}
/* Edição de empréstimo na própria linha: como são onze campos, a linha vira
uma célula única com formulário em grade, no lugar onde a linha estava. */
tr.debt-edit-row > td {
background: var(--bg);
padding: 16px;
}
.debt-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
}
.debt-edit-grid label {
font-size: var(--fs-xs);
margin-bottom: 3px;
}
.debt-edit-grid input,
.debt-edit-grid select {
font-size: var(--fs-sm);
padding: 6px 9px;
}
.debt-edit-actions {
display: flex;
gap: 8px;
margin-top: 14px;
}
/* ---------------------------------------------------------------------------
Empréstimos: um cartão por contrato, em três faixas.
Substitui a tabela de 14 colunas que a tela tinha. A tabela não dava conta de
dois motivos ao mesmo tempo: (1) já rolava na horizontal, e número de dinheiro
que sai da vista é número que não é lido; (2) os dados do contrato e os
números CALCULADOS HOJE são coisas de natureza diferente — um é o que o
usuário digitou e não muda, o outro anda sozinho todo dia — e uma linha de
tabela mistura os dois sem hierarquia nenhuma.
As faixas, e o que cada cor quer dizer:
neutra → o contrato, o que foi digitado;
verde → o cálculo de hoje, com a data carimbada ao lado do título;
violeta → a simulação de antecipação, sempre aberta e já calculada.
A de antecipação não tem botão "Simular": ela chega calculada e recalcula
sozinha quando o usuário mexe em qualquer controle. Era um clique obrigatório
para ver o número mais útil da tela.
--------------------------------------------------------------------------- */
.debt-list {
display: grid;
gap: 18px;
}
.debt-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.debt-card-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.debt-card-title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-lg);
margin-right: 2px;
}
.debt-card-head .row-actions {
margin-left: auto;
}
.badge.sistema {
background: color-mix(in srgb, var(--violet) 16%, transparent);
color: var(--violet);
}
.badge.andamento {
background: color-mix(in srgb, var(--primary) 15%, transparent);
color: var(--primary);
}
.badge.quitado {
background: color-mix(in srgb, var(--receita) 18%, transparent);
color: var(--receita);
}
.debt-band {
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.debt-band:last-child {
border-bottom: none;
}
/* O cálculo de hoje. A borda à esquerda é o que separa de relance o que o
sistema calculou do que o usuário digitou. */
.debt-band.calculo {
background: color-mix(in srgb, var(--primary) 8%, transparent);
border-left: 3px solid var(--primary);
}
.debt-band.antecipar {
background: color-mix(in srgb, var(--violet) 9%, transparent);
border-left: 3px solid var(--violet);
}
.debt-band-title {
display: flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
font-size: var(--fs-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
margin-bottom: 12px;
}
/* O carimbo da data em que a conta foi feita. Sem ele, não há como o usuário
saber que o número é de hoje e não de quando ele cadastrou o empréstimo. */
.debt-band-title .stamp {
text-transform: none;
letter-spacing: 0;
font-weight: 500;
}
.debt-figures {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 14px 18px;
}
.debt-figure .label {
font-size: var(--fs-sm);
color: var(--text-muted);
margin-bottom: 3px;
}
.debt-figure .value {
font-weight: 700;
font-size: var(--fs-lg);
font-variant-numeric: tabular-nums;
}
/* O número que a pessoa abriu a tela para ver. */
.debt-figure .value.destaque {
font-size: var(--fs-xl);
line-height: 1.2;
}
.debt-figure .hint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 3px;
}
.debt-sim-controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: end;
margin-bottom: 14px;
}
.debt-sim-controls > div {
min-width: 150px;
}
.debt-sim-controls label {
font-size: var(--fs-xs);
margin-bottom: 3px;
}
.debt-sim-controls input,
.debt-sim-controls select {
font-size: var(--fs-sm);
padding: 6px 9px;
}
.debt-sim-resumo {
font-size: var(--fs-sm);
line-height: 1.55;
margin-bottom: 12px;
}
.debt-sim-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.debt-sim-option {
flex: 1;
min-width: 258px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.debt-sim-option h4 {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-base);
font-weight: 700;
}
.debt-sim-option .explica {
color: var(--text-muted);
font-size: var(--fs-xs);
margin: 4px 0 10px;
}
.debt-sim-total {
border-top: 1px solid var(--border);
padding-top: 9px;
margin-top: 4px;
grid-column: 1 / -1;
}
.debt-nota {
color: var(--text-muted);
font-size: var(--fs-xs);
margin: 10px 0 0;
}
.debt-aviso {
background: color-mix(in srgb, var(--warning) 12%, transparent);
border-left: 3px solid color-mix(in srgb, var(--warning) 55%, var(--border));
font-size: var(--fs-sm);
padding: 10px 14px;
}
.debt-erro {
background: color-mix(in srgb, var(--despesa) 12%, transparent);
border-left: 3px solid var(--despesa);
font-size: var(--fs-sm);
padding: 10px 14px;
}
.debt-edit-box {
padding: 16px 18px;
}
/* ---------------------------------------------------------------------------
Busca global (js/nav-index.js + js/nav-search.js).
z-index 95: acima da sidebar/nav-toggle (30) e de todo conteúdo, mas
abaixo de toast (100) e do confirmDialog (101) — um diálogo de exclusão
nunca pode ficar atrás da busca.
--------------------------------------------------------------------------- */
.palette-trigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
margin: 10px 0 4px;
padding: 8px 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg);
color: var(--text-muted);
font-size: var(--fs-sm);
font-family: inherit;
cursor: pointer;
text-align: left;
/* Com a base em 15px o rótulo passou a quebrar em duas linhas e o atalho
junto com ele. O rótulo encolhe, o atalho nunca. */
min-width: 0;
white-space: nowrap;
overflow: hidden;
}
.palette-trigger kbd {
flex-shrink: 0;
}
.palette-trigger:hover {
border-color: var(--primary);
color: var(--text);
}
.palette-trigger kbd {
margin-left: auto;
font-family: inherit;
font-size: var(--fs-xs);
padding: 1px 6px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface);
color: var(--text-muted);
}
/* Botão da barra fixa do celular: só o ícone, ao lado do ☰. */
.palette-trigger--mobile {
width: auto;
margin: 0 0 0 auto;
padding: 6px 11px;
border-color: var(--border);
font-size: var(--fs-lg);
}
.palette-trigger--sidebar {
margin-left: 18px;
margin-right: 18px;
width: calc(100% - 36px);
}
/* Alternar modo claro/escuro (js/theme-toggle.js). Base sem posição nem
variante nenhuma — cada lugar onde o botão aparece (sidebar, barra do
celular, topo do consultor, telas de login) define a própria, sempre com
o nome do componente na frente (.theme-toggle--X), nunca uma classe solta:
foi exatamente uma classe solta reaproveitada de outro componente que fez
o botão de busca cobrir a tela inteira, ver commit "Conserta a tela
vazia". */
.theme-toggle {
cursor: pointer;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text-muted);
font-family: inherit;
}
.theme-toggle:hover {
border-color: var(--primary);
color: var(--text);
}
/* Linha completa com rótulo visível, logo abaixo do gatilho de busca — a
mesma razão de sempre: ícone sozinho não diz o que faz. */
.theme-toggle--sidebar {
display: flex;
align-items: center;
gap: 8px;
margin: 0 18px 10px;
width: calc(100% - 36px);
padding: 8px 10px;
font-size: var(--fs-sm);
text-align: left;
}
@media (max-width: 900px) {
.theme-toggle--sidebar {
display: none; /* a sidebar some atrás da gaveta no celular */
}
}
.theme-toggle--mobile {
width: auto;
margin: 0 0 0 8px;
padding: 6px 11px;
font-size: var(--fs-lg);
display: flex;
align-items: center;
justify-content: center;
}
.theme-toggle--topbar {
margin-right: 10px;
padding: 6px 11px;
font-size: var(--fs-lg);
}
/* Telas de login/cadastro/trocar senha não têm sidebar nem barra fixa —
canto da tela é o único lugar disponível. */
.theme-toggle--auth {
position: fixed;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
padding: 0;
font-size: var(--fs-lg);
display: flex;
align-items: center;
justify-content: center;
background: var(--surface);
z-index: 10;
}
.palette-overlay {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 8vh;
background: rgba(0, 0, 0, 0.35);
}
.palette {
width: min(560px, calc(100vw - 32px));
max-height: min(70dvh, 560px);
margin-top: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
#palette-input {
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
padding: 16px 18px;
/* 16px É OBRIGATÓRIO: abaixo disso o Safari do iPhone dá zoom automático
ao focar o campo, e a página inteira se desloca. */
font-size: 16px;
background: var(--surface);
}
/* O contorno do navegador some porque o campo ocupa a largura toda da caixa
de busca e um retângulo colado nas bordas fica feio — mas some SÓ depois
de existir substituto. Antes, o único sinal de que o campo estava focado
era a linha de baixo trocando de cinza para verde: 1px, no rodapé de um
campo que já é o único da caixa. */
#palette-input:focus {
outline: none;
border-bottom-color: var(--primary);
box-shadow: inset 0 -3px 0 var(--primary);
}
#palette-list {
list-style: none;
margin: 0;
padding: 6px;
overflow-y: auto;
overscroll-behavior: contain;
}
.palette-opt {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 10px;
border-radius: var(--radius-sm);
color: var(--text);
}
.palette-opt.active,
.palette-opt:hover {
background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.palette-opt-icon {
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.6;
}
.palette-opt-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.palette-opt-label {
font-size: var(--fs-base);
font-weight: 600;
}
.palette-opt-sub {
font-size: var(--fs-xs);
color: var(--text-muted);
}
.palette-opt-hint {
font-size: var(--fs-xs);
color: var(--text-muted);
margin-top: 2px;
font-style: italic;
}
.palette-hint {
margin: 0;
padding: 8px 14px;
border-top: 1px solid var(--border);
font-size: var(--fs-xs);
color: var(--text-muted);
text-align: center;
}
@media (max-width: 900px) {
.palette-trigger--sidebar {
display: none; /* a sidebar some atrás da gaveta; o gatilho é o da barra fixa */
}
}
/* ---------------------------------------------------------------------------
"O que precisa de você hoje" (js/dashboard.js renderHoje). Fica no topo
do painel do mês, antes até do filtro de conta/mês — é a resposta a
"abro o sistema e não sei por onde começar". Reaproveita o padrão de
faixa com borda colorida que já existe em Empréstimos (.debt-band), para
o app inteiro falar a mesma língua visual de "isto é o que importa agora".
--------------------------------------------------------------------------- */
/* ————— O PAINEL DO MÊS —————
Uma coluna, blocos na ordem da urgência. A grade de dez cartões saiu:
dez números do mesmo tamanho é o mesmo que nenhum. */
body.page-painel main {
max-width: 820px;
}
/* No Painel, a faixa de saldo fica fechada e MUDA: a referência rápida
aparece inteira dentro da própria tela, logo abaixo. O aviso de "modo
consultor, somente leitura" continua visível — ele não é parte da faixa
que abre. */
body.page-painel .balance-strip,
body.page-painel .balance-strip-detail {
display: none;
}
/* Com a faixa escondida sobra o vazio dela, e o fundo mais a borda de
baixo desenhavam um risco de 1px atravessado no alto do Painel. O aviso de
modo consultor, quando aparece ali dentro, tem fundo próprio. */
body.page-painel #balance-banner {
background: none;
border-bottom: none;
}
.painel-topo {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px 20px;
margin-bottom: 28px;
}
.painel-topo h1 {
margin: 0;
font-size: var(--fs-md);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.painel-contexto {
margin: 2px 0 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.painel-controles {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
/* Trocar de mês era escolher no calendário do sistema. Uma seta de cada lado
resolve o caso de longe mais comum — "e no mês passado?" — sem abrir nada. */
.mes-stepper {
display: flex;
align-items: center;
gap: 2px;
}
.mes-stepper button {
padding: 6px 11px;
font-size: var(--fs-lg);
line-height: 1;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.mes-stepper button:hover {
background: var(--surface);
color: var(--text);
}
.mes-stepper input {
width: auto;
}
/* A FRASE. O único lugar da tela onde o tipo é grande. */
.frase-do-mes {
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-display);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.015em;
text-wrap: balance;
}
/* Monoespacada aqui, NAO. Ela existe para uma coluna de valores alinhar
virgula com virgula — numa frase nao ha coluna nenhuma, e a 34px o "R$"
ganhava a largura de tres digitos: o numero saia esticado, com um buraco no
meio. `tabular-nums` sozinho ja garante que os digitos tenham a mesma
largura, que e a parte que importa quando o valor muda. */
.frase-do-mes strong {
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
/* De onde sai o número. Cada parcela na cor do seu tipo — é a mesma conta que
a faixa das outras telas mostra por extenso. */
.frase-conta {
margin: 10px 0 0;
font-size: var(--fs-sm);
color: var(--text-muted);
line-height: 1.7;
}
/* Sem `color` aqui: cada span já carrega a classe do seu tipo (.banco,
.despesa, .receita) e este seletor tem especificidade maior — declarar a
cor aqui apagava as três de uma vez, que é exatamente o contrário do que a
linha existe para fazer. */
.frase-conta span {
font-variant-numeric: tabular-nums;
font-weight: 700;
white-space: nowrap;
}
/* Blocos sem caixa: no Painel a separação é o espaço e o título, não mais uma
borda dentro de outra. */
.bloco {
margin-top: 36px;
}
.bloco > h2 {
margin: 0 0 12px;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.bloco-mais {
margin: 10px 0 0;
font-size: var(--fs-sm);
}
.bloco-mais a {
color: var(--primary-dark);
text-decoration: underline;
}
/* Os três números do mês. */
.mes-numeros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px 24px;
}
.mes-num {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.mes-num-k {
font-size: var(--fs-sm);
color: var(--text-muted);
}
.mes-num-v {
font-family: var(--font-display);
font-variant-numeric: tabular-nums;
font-size: var(--fs-2xl);
font-weight: 700;
line-height: 1.15;
}
.mes-num-nota {
margin-top: 2px;
font-size: var(--fs-xs);
color: var(--text-muted);
text-decoration: underline;
}
.mais-numeros {
margin-top: 18px;
}
.mes-extras {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px 24px;
padding-top: 10px;
}
.mes-extra {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
.mes-extra-k {
min-width: 0;
font-size: var(--fs-sm);
color: var(--text-muted);
}
.mes-extra-v {
flex-shrink: 0;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--fs-sm);
font-weight: 700;
}
#hoje-lista {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Cada item carrega a cor do que ele é: vermelho o que já venceu ou já está
negativo, âmbar o que ainda vai vencer. A barra na lateral existe para o
tipo ser reconhecível antes de ler a frase. */
.hoje-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
border-radius: var(--radius-sm);
color: var(--text);
font-size: var(--fs-base);
font-weight: 600;
}
.hoje-item-warning {
background: color-mix(in srgb, var(--warning-fill) 16%, transparent);
box-shadow: inset 3px 0 0 var(--warning);
}
.hoje-item-warning:hover {
background: color-mix(in srgb, var(--warning-fill) 28%, transparent);
}
.hoje-item-despesa {
background: color-mix(in srgb, var(--despesa) 10%, transparent);
box-shadow: inset 3px 0 0 var(--despesa);
}
.hoje-item-despesa:hover {
background: color-mix(in srgb, var(--despesa) 18%, transparent);
}
/* No Painel a referência não fica dentro da faixa: é um bloco da tela. */
#referencia .ref-grid {
max-width: none;
padding: 0;
}
.panel h3 {
margin: 0 0 12px;
font-family: var(--font-display);
font-size: var(--fs-base);
font-weight: 700;
color: var(--text);
text-wrap: balance;
}
/* O gráfico de linha conta uma história ao longo do tempo: espremido em meia
largura ele vira um risco. */
@media (min-width: 700px) {
.charts-grid .chart-wide {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.frase-do-mes {
font-size: var(--fs-2xl);
}
.painel-topo {
margin-bottom: 22px;
}
/* No celular o seletor de mês já ocupa a linha quase inteira; deixar a
conta ao lado dele espremia "Todas as contas" em "Toc". Cada um na sua
linha. */
.painel-controles {
width: 100%;
}
.mes-stepper {
flex: 1 1 100%;
}
.mes-stepper input {
flex: 1;
min-width: 0;
}
.painel-controles select {
flex: 1 1 100%;
width: 100%;
}
/* ⚠️ 16px NO CELULAR NÃO É ESCOLHA DE DESIGN.
Abaixo disso o Safari do iPhone dá zoom automático ao focar o campo, e a
página inteira se desloca — o mesmo motivo pelo qual o campo da busca é
16px fixo. Como a escala base caiu para 15px, todo campo do sistema
passaria a disparar isso. */
input,
select,
textarea {
font-size: 16px;
}
}
.hoje-item-seta {
color: var(--text-muted);
flex-shrink: 0;
}
.hoje-vazio {
margin: 0;
color: var(--text-muted);
font-size: var(--fs-base);
}
/* Os dois cards de resumo que são links (Guardado, Gastos fora do normal)
ficavam idênticos aos oito que não são clicáveis — a única pista era a
palavra "ver metas"/"ver lista" dentro do .hint, em letra miúda. Uma seta
sempre visível (não só no :hover, que não existe em toque) avisa de
longe que o cartão leva a algum lugar. */
a.card {
position: relative;
}
a.card::after {
content: "→";
position: absolute;
top: 14px;
right: 16px;
color: var(--text-muted);
font-size: var(--fs-base);
}
/* De onde sai o Saldo real, por extenso. Era um title= — duas frases que
nem teclado nem toque alcançavam — e virou texto de verdade, dentro do
que a faixa abre. */
.balance-explicacao {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 14px;
font-size: var(--fs-xs);
color: var(--text-muted);
line-height: 1.5;
}
/* Texto de instrução longo (Empréstimos tinha ~250 palavras em 4
parágrafos, sempre visíveis, antes de qualquer dado da tela). Mostra só
a frase-resumo de cada parágrafo; o resto mora atrás de "Entender
melhor" — nativo ( ), então funciona com teclado e leitor de
tela sem nenhum JS. */
.resumo-rapido {
margin: 0 0 10px;
padding-left: 20px;
font-size: var(--fs-base);
line-height: 1.6;
}
.resumo-rapido li {
margin-bottom: 2px;
}
details summary {
cursor: pointer;
color: var(--primary);
font-size: var(--fs-sm);
font-weight: 600;
padding: 4px 0;
}
details[open] summary {
margin-bottom: 4px;
}
/* Detalhe de uma fatura, aberto embaixo da linha dela. Ele é uma tabela dentro
de outra: sem um fundo próprio, as duas se confundem e não dá para dizer onde
a fatura termina e o item começa. */
.invoice-detail > td {
background: var(--bg-subtle, rgba(127, 127, 127, .06));
padding: 14px 12px;
}
.invoice-detail table {
font-size: var(--fs-sm);
}
/* ---------------------------------------------------------------------------
CONEXÃO CONSULTOR / CLIENTE — a carteira do consultor
(consultor-dashboard.html), o painel que ele abre de um cliente
(consultor-cliente.html) e a tela onde o cliente autoriza
(meus-consultores.html).
Tudo aqui é reaproveitamento: as três telas usam .panel, .table-wrap,
.badge, .toggle-switch, .bloco, .mes-num, .budget-card e os gráficos das
telas do cliente. O que sobra são estas peças que não existiam.
--------------------------------------------------------------------------- */
/* Parágrafo de abertura de tela: o que esta tela é, antes da primeira tabela.
Existia como style="..." repetido no de cada tela. */ .tela-intro { margin: -8px 0 22px; max-width: 68ch; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.55; } /* Nome e usuário empilhados numa célula só. O usuário é o que identifica a pessoa sem ambiguidade (dois clientes podem se chamar "João"), então ele aparece sempre, em segundo plano. */ .consultor-nome { font-weight: 600; } .consultor-usuario { font-size: var(--fs-xs); color: var(--text-muted); } /* O que a autorização significa, escrito, ao lado do selo. Um selo ("Painel + sistema") diz o estado; a frase diz a consequência. */ .consultor-estado { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); max-width: 40ch; } /* Link que age como botão pequeno numa fileira de ações — mesma medida do `button.small`, para "Ver painel" (um link, porque navega) não ficar do tamanho errado ao lado de "Abrir o sistema" (um botão, porque troca a sessão antes de navegar). */ a.small { display: inline-block; padding: 5px 10px; font-size: var(--fs-xs); color: var(--primary); border: 1px solid var(--primary); border-radius: 6px; font-weight: 600; } a.small:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); } /* Os dois níveis explicados antes da tabela de interruptores. Duas colunas de toggle com cabeçalho de uma palavra é o desenho de consentimento em que a pessoa liga para descobrir o que ligou. */ .niveis-lista { margin: 0; display: grid; gap: 4px 16px; } .niveis-lista dt { font-weight: 700; color: var(--text); } .niveis-lista dd { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-muted); max-width: 72ch; line-height: 1.55; } .niveis-nota { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); max-width: 72ch; line-height: 1.55; } /* O aviso de somente leitura, quando ele é um bloco DENTRO da tela em vez da faixa grudada no topo (que é como ele aparece no modo de visualização das telas do cliente). */ .read-only-banner.solto { margin: 0 0 22px; border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; } /* Cabeçalho do painel de um cliente: quem é, o que autorizou, e a única ação da tela. */ .cliente-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .cliente-topo h1 { margin-bottom: 4px; } .cliente-sub { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cliente-desde, .cliente-nota { font-size: var(--fs-xs); color: var(--text-muted); } .cliente-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .cliente-nota { margin: 0; max-width: 24ch; text-align: right; } /* Rodapé de uma barra de progresso (orçamento, meta) no painel do consultor. A tela de Metas do cliente tem o `.meta-rodape` dela, com o mesmo desenho, porque ali o rodapé também abriga os controles de aporte — aqui não há controle nenhum, e é essa a diferença entre as duas. */ .budget-foot { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--text-muted); } /* A nota embaixo de um número do mês é um LINK nas telas do cliente (leva à lista filtrada) e texto puro no painel do consultor, que não navega para as telas dele. Sublinhado sem link é a promessa de um clique que não existe. */ span.mes-num-nota { text-decoration: none; } /* --------------------------------------------------------------------------- ADMINISTRADOR CENTRAL (admin-usuarios.html). O login dele e a porta unica do sistema, /login.html, como o de todo mundo. A tela reaproveita quase tudo do resto do sistema — nav.topbar, .panel, .table-wrap, .badge, .row-actions, .form-grid, os diálogos de ui.js. O que está aqui são as três peças que não existiam: a caixa da senha que aparece uma vez, o campo de confirmação de apagar, e a frase que substituiu o botão "Criar conta" na tela de login. --------------------------------------------------------------------------- */ .rotulo-opcional { font-weight: 400; color: var(--text-muted); } /* A SENHA PROVISÓRIA, dentro do diálogo modal de `mostrarCredencial` (js/admin-usuarios.js). Ela existe em texto uma vez só: o banco guarda o hash. A moldura própria (`.senha-nova-dados`, `.senha-nova-aviso`) já não é a de uma caixa fixa na página — isso agora é `.dialog-box`, a mesma do diálogo de apagar conta — mas o conteúdo continua precisando se destacar dentro dela: um bloco com fundo, borda e a senha em fonte monoespaçada é o que faz a pessoa PARAR e copiar, em vez de a informação passar num relance. */ .senha-nova-dados { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0 0 10px; align-items: baseline; } .senha-nova-dados dt { font-size: var(--fs-sm); color: var(--text-muted); } .senha-nova-dados dd { margin: 0; font-weight: 600; } /* Monoespaçada e grande: esta senha vai ser LIDA em voz alta ou copiada à mão. O alfabeto dela já evita 0/O e 1/l (ver `_senha_provisoria`, no backend); a fonte é a outra metade do mesmo cuidado. */ .senha-nova-dados code { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.04em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; user-select: all; } .senha-nova-aviso { margin: 0 0 12px; font-size: var(--fs-sm); color: var(--text-muted); max-width: 68ch; line-height: 1.55; } /* O campo que destrava "Apagar para sempre". Fica acima do botão e com folga dos dois lados: é o único lugar da interface em que se pede para a pessoa DIGITAR antes de uma ação irreversível, e apertado contra o botão ele passa a parecer parte dele. */ .apagar-confirma { display: block; margin: 14px 0 6px; font-size: var(--fs-sm); color: var(--text); } .apagar-confirma code { font-family: var(--font-mono); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; } .dialog-box #apagar-usuario { width: 100%; margin-bottom: 4px; } /* A frase que ficou no lugar do "Criar conta" nas telas de login. */ .auth-sem-cadastro { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border); line-height: 1.55; } /* O "Sair" da BARRA DE TOPO (consultor e administrador). `.logout-btn` nasceu no rodapé da barra lateral, onde ele é uma linha inteira e o `width: 100%` faz sentido. Na barra de topo esse mesmo 100% fazia o botão engolir todo o espaço que sobrava: medido em produção, 897px de "Sair" numa barra de 1266px, um retângulo gigante ao lado de dois links pequenos. Aqui ele volta ao tamanho do próprio texto e encosta à direita — longe dos links de navegação, porque "Sair" colado no que se clica toda hora é clique errado esperando acontecer. */ nav.topbar .logout-btn { width: auto; margin-left: auto; } /* Comando dentro de uma frase de ajuda (a recuperação de senha do administrador). Monoespaçado porque é para ser copiado literalmente, e não parafraseado. */ .auth-sem-cadastro code { font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--surface); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; white-space: nowrap; } /* A LINHA DE SAÍDA da tela de trocar senha. Ela é a única tela do sistema por onde passam os três tipos de logado, e a única cuja falha conhecida é PRENDER a pessoa: quando a troca é obrigatória, o middleware desvia todo GET de volta para ela. O "Sair" fica no topo, à direita, sempre visível sem rolar — não no rodapé, onde num celular ele aparece depois de três campos de senha e de um botão. */ .auth-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-height: 28px; } /* Sem o `margin-bottom` do `.auth-back` solto: quem espaça agora é a linha. */ .auth-topo .auth-back { margin-bottom: 0; } /* Discreto de propósito. É uma saída de emergência, não a ação principal da tela — mas tem de ser reconhecível como botão à primeira vista, porque quem procura por ela está travado. */ .auth-sair { margin-left: auto; padding: 5px 12px; font-size: var(--fs-xs); background: transparent; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; } .auth-sair:hover { color: var(--despesa); border-color: var(--despesa); } /* A ESCOLHA, na tela de login: o caso raro em que a mesma senha serve para mais de uma conta da mesma pessoa (o mesmo e-mail como cliente e como consultor). O servidor devolve a lista em vez de escolher por ordem de tabela, e a pessoa diz onde quer entrar. Botões em coluna e de largura cheia, como o "Entrar" logo acima: aqui eles são a pergunta pendente da tela, não uma fileira de opções secundárias. */ .escolha-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .escolha-botoes button { width: 100%; } |
|---|