/* Estilos além do Tailwind — itens de menu, cards, tabela e utilitários */
/* ======================================================================
TOKENS — a identidade em um lugar só
A tela de acesso (fim deste arquivo) fixou o registro do app: grafite
quase-preto, dourado champanhe, papel levemente quente e fio de 1px em vez
de sombra pesada. Estas variáveis são esse acordo escrito uma vez, para as
~40 telas herdarem em vez de cada uma escolher o seu cinza.
Por que variáveis e não utilitários do Tailwind: o tema escuro precisa
trocar quinze valores de uma vez. Com `--linha` isso é um bloco; com
`dark:border-...` seriam centenas de `class=` para caçar quando o tom mudar.
====================================================================== */
:root{
--ouro:#bf9b4e; --ouro-claro:#d0ac5c; --ouro-escuro:#a8873c;
--ouro-fraco:rgba(191,155,78,.16);
--fundo:#f5f5f2; /* papel: levemente quente, não o cinza-azul */
--superficie:#ffffff; /* card */
--superficie-2:#faf9f6; /* faixa de filtro, cabeçalho de lista */
--linha:#e5e3dc; /* fio de 1px — a borda de tudo */
--linha-forte:#d5d3cb; /* borda de campo, que precisa se ver */
--tinta:#1f2937;
/* Os dois cinzas de apoio são o mais claro que ainda passa AA (4,5:1) sobre
a superfície — e não um tom "bonitinho" escolhido no olho. Quase tudo que
usa estes tokens é texto PEQUENO (rótulo de coluna em versalete de 11px,
legenda de campo), justamente o que mais sofre com cinza claro. */
--tinta-fraca:#5b6270; /* ~6,4:1 — rótulo, legenda, texto de apoio */
--tinta-tenue:#6f7583; /* 4,6:1 — o degrau mais leve que ainda serve */
--sombra:0 1px 2px rgba(23,20,12,.05), 0 1px 12px rgba(23,20,12,.03);
--raio:.85rem;
/* ====================================================================
ELEVAÇÃO — três degraus, e só três
Antes havia UMA sombra (`--sombra`) para tudo, e ela era quase nada:
card, modal e popover chegavam à tela com o mesmo peso, então nada
parecia estar "acima" de nada. O olho lê profundidade antes de ler
texto — sem degraus, uma tela de doze cards vira um mosaico plano.
Cada degrau tem DUAS camadas de propósito: um contato curto e escuro
(a beirada, que ancora o objeto na página) e um halo longo e diluído
(a sombra distante, que dá o ar). Uma sombra só sempre parece adesivo.
· e1 — o que descansa na página: card, campo, pílula.
· e2 — o que se levanta ao ser tocado: card em hover, popover, chip.
· e3 — o que flutua sobre tudo: modal, gaveta, tooltip.
==================================================================== */
--e1:0 1px 2px rgba(28,22,10,.045), 0 2px 8px -2px rgba(28,22,10,.05);
--e2:0 2px 4px -1px rgba(28,22,10,.06), 0 10px 24px -8px rgba(28,22,10,.13);
--e3:0 10px 20px -8px rgba(28,22,10,.14), 0 28px 56px -20px rgba(28,22,10,.22);
/* Halo dourado — a elevação da MARCA. Só para o que é primário
(botão de ação, tile em destaque): dourado em tudo vira purpurina. */
--e-ouro:0 2px 6px -1px rgba(140,108,32,.22), 0 12px 28px -10px rgba(140,108,32,.35);
/* Escala de raio. Três valores, proporcionais: o card é o meio, o que
vive dentro dele é menor, o que flutua sobre ele é maior. Raio igual
em objeto grande e pequeno faz o pequeno parecer inflado. */
--r-xs:.4rem; --r-sm:.55rem; --r-lg:1.15rem; --r-xl:1.5rem;
/* Realce de topo: o fio branco de 1px no alto de uma superfície clara.
É como material real pega a luz — sem ele o card é um retângulo
recortado; com ele, uma placa. No escuro é o que separa dois grafites
que a borda sozinha não separa. */
--brilho:inset 0 1px 0 rgba(255,255,255,.65);
/* Curvas. `--mola` tem um leve ultrapasse no fim: é o que faz um
painel "assentar" em vez de simplesmente parar. */
--sai:cubic-bezier(.4,0,.2,1);
--mola:cubic-bezier(.34,1.4,.64,1);
/* ====================================================================
COR DE GRÁFICO — quatro paletas, cada uma com UM trabalho
Antes, cada gráfico escolhia o próprio hex no meio do app.js: um usava
#10b981, outro #f43f5e, um terceiro #22c55e. Eram quinze escolhas
independentes, e nenhuma delas pertencia a esta marca — vinham do
paletão padrão do Tailwind.
Aqui elas viram QUATRO paletas nomeadas pelo trabalho que fazem, e
cada valor foi MEDIDO, não escolhido no olho (validador do dataviz:
banda de luminosidade, piso de croma, separação para daltonismo em
TODOS os pares, e contraste contra a superfície).
O tema escuro tem passos PRÓPRIOS — não é o claro invertido. Um verde
que passa sobre papel branco pode sumir sobre grafite.
==================================================================== */
/* 1. IDENTIDADE (rosca, séries de linha). Cinco, e cinco é o limite:
com seis, um par qualquer fica indistinguível para quem tem
daltonismo — foi medido, não suposto. Além de cinco, o app agrupa
o resto em "Outros" (mais legível de todo jeito). Ordem FIXA: a
classe 3 é sempre a mesma cor, mude o filtro que mudar. */
--g-cat-1:#9d9100; --g-cat-2:#007e68; --g-cat-3:#0092f3;
--g-cat-4:#a851bc; --g-cat-5:#bb311a;
/* 2. POLARIDADE (entrou x saiu). Não são "duas cores da lista": são os
dois polos de uma mesma régua, e por isso vivem à parte.
O DEGRAU DE LUMINOSIDADE ENTRE ELAS É OBRIGATÓRIO (ΔL 0,20):
verde e vermelho de mesmo claro são a definição do que o daltônico
NÃO enxerga — quatro pares "elegantes" foram reprovados antes
deste passar. Quem não vê a cor ainda vê qual é o mais escuro. */
--g-entrada:#68b274; --g-saida:#9b4440;
/* 3. MAGNITUDE / ORDEM (Meta -> Realizado -> A vencer). Uma matiz só —
o ouro da marca —, do claro ao escuro. Rampa, nunca arco-íris:
a ordem tem de se ler sem legenda. */
--g-ordem-1:#cbb06a; --g-ordem-2:#a8873c; --g-ordem-3:#68501a;
/* 4. ESTADO (dentro / apertado / estourou). Reservadas: nunca viram
"série 4". Andam sempre com rótulo ou ícone, jamais só a cor. */
--g-bom:#68b274; --g-atencao:#a8873c; --g-critico:#9b4440;
/* A moldura do gráfico é RECESSIVA: a grade orienta, não compete. */
--g-grade:rgba(31,41,55,.10);
--g-eixo:#6f7583;
/* Referência (a coluna "meta" atrás do realizado): cinza, não cor. Uma
meta não é uma categoria — é o pano de fundo contra o qual se lê. */
--g-referencia:#cfcdc4;
}
html.dark{
--fundo:#131418;
--superficie:#191a1f;
--superficie-2:#1e1f25;
--linha:rgba(255,255,255,.08);
--linha-forte:rgba(255,255,255,.14);
--tinta:#e5e7eb;
--tinta-fraca:#a8aeba;
--tinta-tenue:#878d99;
--sombra:none;
/* No escuro a sombra não some — ela ESCURECE. Um card sem sombra sobre
grafite flutua sem peso; o que muda é que o halo precisa ser bem mais
opaco (não há branco de página para ele contrastar) e o realce de topo
vira um fio de luz de 8%, não de 65%. */
--e1:0 1px 2px rgba(0,0,0,.35), 0 2px 8px -2px rgba(0,0,0,.30);
--e2:0 2px 6px -1px rgba(0,0,0,.45), 0 12px 28px -10px rgba(0,0,0,.55);
--e3:0 12px 24px -10px rgba(0,0,0,.6), 0 32px 64px -24px rgba(0,0,0,.75);
--e-ouro:0 2px 8px -2px rgba(191,155,78,.30), 0 14px 32px -12px rgba(191,155,78,.40);
--brilho:inset 0 1px 0 rgba(255,255,255,.06);
/* Passos PRÓPRIOS do tema escuro — revalidados contra a superfície
#191a1f, não derivados dos de cima. As matizes são as mesmas (a
identidade não muda com o tema); o claro e o croma é que sobem, senão
o mesmo verde que canta no papel some no grafite. */
--g-cat-1:#a59800; --g-cat-2:#008e67; --g-cat-3:#0099ff;
--g-cat-4:#bf54be; --g-cat-5:#cd4000;
--g-entrada:#58a365; --g-saida:#a94e49;
--g-ordem-1:#8a6c20; --g-ordem-2:#bf9b4e; --g-ordem-3:#e0c98d;
--g-bom:#58a365; --g-atencao:#bf9b4e; --g-critico:#a94e49;
--g-grade:rgba(255,255,255,.08);
--g-eixo:#878d99;
--g-referencia:#3a3b42;
}
/* Faz o navegador desenhar os controles nativos na versão escura. Sem isto o
ícone do e para o #loader do boot — o instante
entre "abriu" e "montou" não pode piscar num cinza diferente.
O FUNDO É ILUMINADO, não chapado. Era uma cor sólida, e um plano de cor
única não tem direção: os cards flutuavam num vazio sem fonte de luz e a
página inteira lia como um wireframe pintado. São duas camadas presas ao
topo (`background-attachment:fixed`, para a luz não rolar junto com o
conteúdo e denunciar que é textura):
· um bafo dourado no alto à esquerda, pertinho do menu — é de lá que a
marca vem, e é de lá que a luz passa a vir;
· uma queda vertical de ~2% para o pé da tela, que dá o eixo.
A soma é fraquíssima de propósito (o dourado chega a 5% de alfa). Não é
para ser vista; é para ser sentida quando ela some. */
.app-main{
background:
radial-gradient(130% 78% at 6% -8%, rgba(191,155,78,.075) 0%, rgba(191,155,78,.018) 34%, transparent 62%),
linear-gradient(180deg, #fbfaf7 0%, var(--fundo) 46%, #f0efea 100%);
background-attachment:fixed;
}
html.dark .app-main{
background:
radial-gradient(130% 78% at 6% -8%, rgba(191,155,78,.10) 0%, rgba(191,155,78,.025) 34%, transparent 62%),
linear-gradient(180deg, #1a1b21 0%, var(--fundo) 48%, #0f1013 100%);
background-attachment:fixed;
}
/* A sidebar é o mesmo painel de marca da tela de acesso: grafite com brilho
dourado difuso e um fio de ouro na divisa. É o que costura login e app. */
#sidebar{
background:radial-gradient(125% 100% at 10% 0%, #26262e 0%, #191920 45%, #0e0e11 100%);
position:relative;
}
#sidebar::after{
content:''; position:absolute; top:0; right:0; bottom:0; width:1px; pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(191,155,78,.45) 22%, rgba(191,155,78,.45) 78%, transparent);
}
/* Cabeçalho da sidebar: marca + assinatura serifada, igual à tela de acesso. */
.side-mark{
width:2.25rem; height:2.25rem; border-radius:.6rem; background:#fff; flex:0 0 auto;
display:grid; place-items:center; box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.side-word{
font-family:Georgia,'Times New Roman',serif; font-size:1rem; font-weight:700;
letter-spacing:.2em; color:#fff; line-height:1.1;
}
.side-tag{
font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
color:var(--ouro); margin-top:.1rem;
}
/* Rótulo do grupo de itens ("Operação", "Análise", "Configuração"). Divide o
menu por intenção — quem procura o DRE não varre a lista inteira. */
.nav-sec + .nav-sec{ margin-top:.5rem; }
/* ---------------------------------------------------------------------
GRUPOS RECOLHÍVEIS DA BARRA LATERAL
O rótulo do grupo é um BOTÃO: as abas ficam recolhidas dentro dele e
aparecem ao passar o mouse ou ao clicar. Antes eram 11 itens sempre
abertos — uma lista que se varre, não um menu que se navega.
TRÊS DECISÕES que a primeira versão errou, e por quê:
1. ACORDEÃO (um grupo aberto por vez, em `abrirGrupo` no app.js). Abrir
um grupo sem fechar os outros empurrava tudo para baixo: o item que
o usuário estava mirando FUGIA do cursor. Com um por vez a barra
mantém a altura e nada foge.
2. HOVER COM ATRASO (~170ms para abrir, ~380ms para voltar). Sem ele,
atravessar a barra a caminho do conteúdo abria e fechava grupos no
caminho — a barra "piscava" sozinha.
3. ALTURA MEDIDA, não um teto chutado. O `max-height:32rem` fixo fazia
a transição de um grupo de 2 itens parecer instantânea e a de 6
parecer lenta (a duração é a mesma para percursos diferentes). O JS
mede a lista e escreve em `--alt`; a animação passa a ser sempre a
mesma velocidade. O fallback 32rem cobre o caso de o JS não rodar.
A técnica é max-height + overflow:hidden. A "moderna"
(grid-template-rows 0fr->1fr) foi tentada e NÃO interpola aqui: o grupo
ganhava a classe e continuava com 0px de altura.
O clique é o que manda (funciona no toque e no teclado); o hover é
atalho de desktop e vive no JS, atrás de um matchMedia(hover:hover).
--------------------------------------------------------------------- */
.nav-group{
display:flex; align-items:center; gap:.5rem; width:100%;
padding:.5rem 1rem .5rem .7rem; min-height:2.25rem;
font-size:.72rem; font-weight:700; letter-spacing:.11em;
text-transform:uppercase; color:#8f8a82; text-align:left; cursor:pointer;
border-radius:.4rem; transition:color .15s, background .15s;
}
.nav-group:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-group:focus-visible{ outline:2px solid var(--ouro); outline-offset:-2px; }
.nav-group-txt{ flex:1 1 auto; min-width:0; }
/* O chevron ficou à ESQUERDA, apontando para a direita quando fechado: é a
convenção de árvore (▸ pasta), e ela diz "tem coisa aqui dentro" antes de
o usuário clicar. À direita ele era só um enfeite no fim da linha. */
.nav-group-chev{
width:.8rem; height:.8rem; flex:0 0 auto; opacity:.55;
transition:transform .2s ease, opacity .15s;
}
/* Quantas abas o grupo esconde — some quando ele está aberto, porque aí
a resposta está à vista. */
.nav-group-n{
font-size:.65rem; font-weight:600; letter-spacing:0; color:#7d7871;
background:rgba(255,255,255,.07); border-radius:999px;
padding:.05rem .4rem; transition:opacity .15s;
}
/* Ponto dourado: a aba ABERTA está dentro deste grupo fechado. Sem ele o
usuário perde a orientação — o menu inteiro fica cinza e nada diz onde
ele está. Some quando o grupo abre (aí o item ativo aparece marcado). */
.nav-group-dot{
width:.4rem; height:.4rem; flex:0 0 auto; border-radius:999px;
background:var(--ouro); opacity:0; transition:opacity .15s;
}
.nav-sec.tem-ativa:not(.aberta) > .nav-group .nav-group-dot{ opacity:1; }
.nav-sec.tem-ativa > .nav-group{ color:#cfc9be; }
.nav-list{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
.nav-sec.aberta > .nav-list{ max-height:var(--alt, 32rem); }
.nav-sec.aberta > .nav-group{ color:#fff; }
.nav-sec.aberta > .nav-group .nav-group-chev{ transform:rotate(90deg); opacity:.9; }
.nav-sec.aberta > .nav-group .nav-group-n{ opacity:0; }
/* Sem JS nada recolhe: a classe `js-nav` só entra quando o script assume o
menu. Se o app.js falhar, o usuário vê as 11 abas — feio, mas navegável. */
#nav:not(.js-nav) .nav-list{ max-height:none; }
/* Fio de guia ligando as abas ao seu grupo. É o que faz a lista parecer
filha do título em vez de um bloco solto embaixo dele. */
.nav-list-in{ position:relative; }
.nav-list-in::before{
content:''; position:absolute; left:1.15rem; top:.1rem; bottom:.1rem;
width:1px; background:rgba(255,255,255,.09);
}
/* Itens de navegação da sidebar */
.nav-item{
display:flex; align-items:center; gap:.65rem;
width:100%; text-align:left; position:relative;
padding:.5rem 1.25rem .5rem 1.9rem; color:#a8a49c; font-size:.875rem;
transition:background .15s, color .15s;
}
/* Ícone de linha do item de menu: tamanho fixo, não encolhe, herda a cor. */
.nav-ico{ width:1.05rem; height:1.05rem; flex:0 0 auto; opacity:.9; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
/* Ativo: fio dourado à esquerda + tinta clara. A barra é um ::before em vez de
border-left para os itens não "pularem" 3px ao trocar de aba. */
.nav-item.active{ background:var(--ouro-fraco); color:#fff; font-weight:600; }
/* O fio dourado cai EM CIMA do fio de guia do grupo (mesma coluna, 1.15rem):
a linha que liga as abas ao título acende onde o usuário está, em vez de
haver dois traços verticais concorrendo. */
.nav-item.active::before{
content:''; position:absolute; left:1.1rem; top:.25rem; bottom:.25rem; width:2px;
border-radius:2px; background:var(--ouro);
}
.nav-item.active .nav-ico{ color:var(--ouro-claro); opacity:1; }
/* Contador de alertas. `margin-left:auto` o joga para a direita do item (o
.nav-item é flex); min-width + padding lateral mantêm o círculo redondo com
1 dígito e o deixam virar pílula com 2 ou 3, sem espremer o número. */
.nav-badge{
margin-left:auto; min-width:1.25rem; padding:0 .35rem;
border-radius:999px; background:#dc2626; color:#fff;
font-size:.68rem; font-weight:700; line-height:1.25rem; text-align:center;
}
/* Botão de recolher/expandir a barra (modo rail). Chevron aponta para a
esquerda (recolher) e gira 180° quando já está recolhida (expandir). */
.rail-toggle{
margin-left:auto; width:1.75rem; height:1.75rem; flex:0 0 auto;
display:grid; place-items:center; border-radius:.5rem; color:#a8a49c;
transition:background .15s, color .15s;
}
.rail-toggle:hover{ background:rgba(255,255,255,.06); color:#fff; }
.rail-chevron{ width:1.1rem; height:1.1rem; transition:transform .2s; }
/* ---- Barra recolhida: só os ícones (logo, abas e foto do usuário) ----
A regra #sidebar.rail vence o .w-60 do Tailwind (id+classe > classe), então
a largura encolhe sem !important. Tudo que é texto some; o que fica é ícone. */
#sidebar.rail{ width:4.75rem; }
#sidebar.rail .side-head{ flex-direction:column; gap:.75rem; padding-left:0; padding-right:0; }
#sidebar.rail .side-words{ display:none; }
#sidebar.rail .rail-toggle{ margin-left:0; }
#sidebar.rail .rail-chevron{ transform:rotate(180deg); }
#sidebar.rail .nav-group{ display:none; }
/* No modo rail o rótulo do grupo some — e sem ele não há como abrir o
grupo. Então ali os itens ficam SEMPRE visíveis: a barra de ícones é o
próprio menu recolhido, recolher duas vezes não faria sentido. */
#sidebar.rail .nav-list{ max-height:none; }
/* Sem os títulos, o que separa um grupo do outro é um fio. Sem ele os 11
ícones viram uma coluna única e a divisão por intenção se perde. */
#sidebar.rail .nav-list-in::before{ display:none; }
#sidebar.rail .nav-sec + .nav-sec{
margin-top:.45rem; padding-top:.45rem; border-top:1px solid rgba(255,255,255,.08);
}
#sidebar.rail .nav-item{ justify-content:center; padding-left:0; padding-right:0; }
#sidebar.rail .nav-item > span:not(.nav-badge){ display:none; }
#sidebar.rail .nav-item.active::before{ left:0; }
/* O contador de alertas vira um ponto no canto do ícone (o número não cabe). */
#sidebar.rail .nav-badge{
position:absolute; top:.35rem; right:1.05rem; margin:0;
width:.5rem; height:.5rem; min-width:0; padding:0; font-size:0; line-height:0;
}
#sidebar.rail #sidebarProfile{ padding-left:0; padding-right:0; }
#sidebar.rail #sidebarProfile > .flex{ justify-content:center; }
#sidebar.rail .sb-meta,
#sidebar.rail .sb-tip,
#sidebar.rail #pfBackup,
#sidebar.rail #sessaoInfo{ display:none; }
#sidebar.rail .sessao-bar{ justify-content:center; }
/* ---------------------------------------------------------------------
TOPBAR — a régua de contexto
Ela é o único elemento que fica na tela o tempo todo junto com o menu, e
estava resolvida como uma faixa translúcida com um fio embaixo. Duas
coisas mudam:
· o fio ganha um GRADIENTE dourado no trecho da esquerda, encostando na
divisa da sidebar. É a mesma costura que liga a barra ao conteúdo — o
dourado atravessa a quina em vez de parar nela;
· quando a página desce, a faixa ganha sombra (classe `.rolou`, posta
pelo app.js). Uma barra fixa sem sombra sobre conteúdo que passa por
baixo dela parece um pedaço da página que ficou preso.
--------------------------------------------------------------------- */
header.app-top{
position:relative;
background:color-mix(in srgb, var(--superficie) 78%, transparent);
border-bottom:1px solid var(--linha);
transition:box-shadow .2s var(--sai), background-color .2s var(--sai);
}
header.app-top::after{
content:''; position:absolute; left:0; bottom:-1px; height:1px; width:14rem;
pointer-events:none;
background:linear-gradient(90deg, rgba(191,155,78,.55), transparent);
}
header.app-top.rolou{
background:color-mix(in srgb, var(--superficie) 92%, transparent);
box-shadow:0 1px 0 var(--linha), 0 8px 20px -14px rgba(28,22,10,.5);
}
.dark header.app-top.rolou{ box-shadow:0 1px 0 var(--linha), 0 10px 26px -14px rgba(0,0,0,.85); }
/* A linha da barra. Era `h-16` do Tailwind (altura fixa de 4rem) escrito no
HTML; virou classe porque no celular ela precisa de DUAS linhas, e altura
fixa e quebra de linha não convivem. Aqui a altura vira mínima: no desktop
dá exatamente os mesmos 4rem de antes. */
.top-linha{ min-height:4rem; }
.top-title{ font-size:1.05rem; font-weight:600; letter-spacing:-.01em; }
.top-eyebrow{
font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
color:var(--tinta-tenue); line-height:1;
}
.top-btn{
display:grid; place-items:center;
padding:.45rem; border-radius:var(--r-sm); color:var(--tinta-fraca);
border:1px solid transparent;
transition:background .15s var(--sai), color .15s var(--sai), border-color .15s var(--sai);
}
.top-btn:hover{ background:var(--ouro-fraco); color:var(--ouro-escuro); border-color:color-mix(in srgb, var(--ouro) 30%, transparent); }
.top-btn:focus-visible{ outline:2px solid var(--ouro); outline-offset:1px; }
.dark .top-btn:hover{ color:var(--ouro-claro); }
/* ---------------------------------------------------------------------
O CAMPO DE BUSCA DA BARRA — um alvo, não um enigma
Era uma lupa de 20px. Uma lupa não diz o que se pode procurar, não
anuncia que existe um atalho e ocupa a mesma área de um botão de tema —
ou seja, o caminho mais curto para qualquer coisa no app tinha o mesmo
destaque que o interruptor de cor.
Isto é um vestido de campo. Não é um , mas quase toda tabela está dentro de um
`.overflow-x-auto` que rola na horizontal. Um contêiner com overflow em
um eixo vira SCROLLPORT nos dois, e é a ele que o `sticky` obedece —
não ao . Como esse contêiner tem exatamente a altura da tabela,
não há nada de onde o cabeçalho descolar: com `top:0` ele fica parado
(inofensivo, e inútil), e com `top:4rem` — a altura da topbar, posta
para ele não encostar atrás dela — o navegador o EMPURRA 64px para
baixo, porque o deslocamento de um sticky num contêiner não rolado é
`top` puro. O cabeçalho desce e vai cobrir a primeira linha. Foi
exatamente o que apareceu na tela de Lançamentos.
Prender de verdade exigiria dar altura fixa e rolagem vertical própria
ao contêiner de cada tabela — outra decisão, com outros custos (a
página passa a ter dois rolamentos aninhados). Até lá, o cabeçalho é
estático e o que ele ganha é PESO: fundo próprio e um fio firme
embaixo, para se ler como rótulo mesmo sem acompanhar a rolagem. */
table.tbl thead th{
background:var(--superficie);
border-bottom:1px solid var(--linha-forte);
}
/* A faixa de filtro e o cabeçalho de tabela são o mesmo registro visual —
"isto não é dado, é onde o dado se organiza". */
table.tbl.tbl-faixa thead th{ background:var(--superficie-2); }
.dark table.tbl.tbl-faixa thead th{ background:#1e1f25; }
table.tbl td{
padding:.62rem .75rem; border-bottom:1px solid var(--linha); vertical-align:middle;
}
table.tbl tbody tr:last-child td{ border-bottom:0; }
/* ---------------------------------------------------------------------
A LINHA SOB O CURSOR — um trilho, não só um cinza
O realce era um cinza 2% de diferença: em tabela de sete colunas, o olho
perde a linha entre a data (esquerda) e o valor (direita) mesmo com ele
ligado. Agora a linha mirada ganha um FIO DOURADO na margem esquerda,
que é uma âncora — e o cinza continua, mais firme, para o corpo.
O fio é `box-shadow:inset` na primeira célula em vez de `border-left`:
borda muda a largura da coluna e faz a tabela inteira dar um pulo de
3px a cada linha que o mouse atravessa. */
table.tbl tbody tr{ transition:background-color .12s var(--sai); }
table.tbl tbody tr:hover > td:first-child{ box-shadow:inset 2px 0 0 var(--ouro); }
.dark table.tbl tbody tr:hover > td:first-child{ box-shadow:inset 2px 0 0 var(--ouro-claro); }
/* ---------------------------------------------------------------------
LINHA DE TOTAL — o número que fecha a conta não é mais uma linha
Nos relatórios (DRE, balanço, fluxo) o total vinha em , do mesmo
tamanho e no mesmo cinza dos itens: quem varria a coluna passava reto
por ele. Aqui ele ganha fundo, um fio grosso em cima (o traço de soma
do papel quadriculado) e nenhuma borda embaixo — porque não há nada
depois de um total. */
table.tbl tr.tbl-total > td{
background:var(--superficie-2); font-weight:700; color:var(--tinta);
border-bottom:0; border-top:2px solid var(--linha-forte);
padding-top:.72rem; padding-bottom:.72rem;
}
.dark table.tbl tr.tbl-total > td{ background:rgba(255,255,255,.045); }
table.tbl tr.tbl-total:hover > td{ background:var(--superficie-2); }
.dark table.tbl tr.tbl-total:hover > td{ background:rgba(255,255,255,.045); }
/* Subtotal de grupo: o mesmo papel, meio degrau abaixo. */
table.tbl tr.tbl-grupo > td{
background:color-mix(in srgb, var(--superficie-2) 65%, var(--superficie));
font-weight:650;
}
.dark table.tbl tr.tbl-grupo > td{ background:rgba(255,255,255,.025); }
/* `table.tbl th` (0,1,2) vence o `.text-right` do Tailwind (0,1,0) — sem
estas linhas o rótulo de uma coluna numérica fica à esquerda enquanto os
valores vão à direita. Reabilita as utilidades de alinhamento na tabela. */
/* Valor não quebra linha: "R$" numa linha e "1.240,90" na outra é o jeito mais
rápido de uma coluna de dinheiro deixar de ser lida como coluna. */
table.tbl th.text-right, table.tbl td.text-right { text-align:right; white-space:nowrap; }
table.tbl th.text-center, table.tbl td.text-center{ text-align:center; }
table.tbl th.text-left, table.tbl td.text-left { text-align:left; }
table.tbl tbody tr:hover{ background:var(--superficie-2); }
.dark table.tbl tbody tr:hover{ background:rgba(255,255,255,.03); }
/* ---------------------------------------------------------------------
A LINHA DO RAZÃO — densidade é função, não estética
Um razão em que não cabe o mês inteiro obriga a rolar para responder
qualquer pergunta ("quanto gastei com mercado?"), e rolar apaga a
comparação que a pessoa estava fazendo de cabeça. As regras abaixo
servem a uma medida só: quantos lançamentos cabem sem rolar.
Código monoespaçado e nome na MESMA linha; o caminho do grupo virou
`title`. O código fica em versalete-tenue de propósito: ele é a chave,
e quem varre a coluna está lendo o NOME. Quem procura pelo código o
encontra pela forma (é o único monoespaçado da linha).
--------------------------------------------------------------------- */
/* `fixed` é o que dá a última palavra sobre a largura: com `auto` o
navegador mede o conteúdo e devolve a coluna mais larga para quem tem o
texto mais comprido — que aqui era o código da conta, não o histórico. */
/* O PISO DE LARGURA não é detalhe: com `table-layout:fixed`, se as colunas
de medida absoluta somarem mais que a tabela, o que sobra para as
flexíveis é ZERO — e a coluna de Histórico literalmente desaparece.
Foi o que aconteceu num painel de 560px. Sete colunas de razão pedem
~52rem; abaixo disso a tabela ROLA (o contêiner já tem overflow-x),
que é o mesmo trato que ela já faz no celular. */
table.tbl-razao{ table-layout:fixed; min-width:56rem; }
/* As fixas somam ~30rem; o que sobra é repartido entre Histórico e Conta,
com o Histórico levando a maior parte — é a coluna que se lê. */
table.tbl-razao .c-data{ width:5.75rem; }
table.tbl-razao .c-hist{ width:auto; }
table.tbl-razao .c-conta{ width:19%; }
table.tbl-razao .c-cart{ width:7.5rem; }
table.tbl-razao .c-val{ width:6.75rem; }
table.tbl-razao .c-acoes{ width:3.75rem; }
/* A coluna de valor único do celular não existe aqui — e some de verdade
(`display:none`), não só de largura: com `table-layout:fixed` uma coluna
sem largura declarada ainda reparte o que sobra. */
table.tbl-razao .c-mob{ display:none; }
/* O status vive DENTRO do histórico agora — pequeno, e depois do texto. */
.pill-inline{ margin-left:.4rem; font-size:.62rem; vertical-align:.06em; }
/* Texto que não cabe vira reticências, não uma segunda linha: a altura da
linha é o recurso escasso aqui, e o valor inteiro está no `title`. */
table.tbl-razao td.cel-hist, table.tbl-razao td.cel-fraca{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cel-conta{ display:flex; align-items:baseline; gap:.4rem; min-width:0; }
.cel-cod{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.72rem; color:var(--tinta-tenue); flex:0 0 auto;
}
.cel-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cel-data{ color:var(--tinta-fraca); font-variant-numeric:tabular-nums; }
.cel-hist{ font-weight:550; }
.cel-fraca{ color:var(--tinta-fraca); }
/* Os ícones de ação só aparecem na linha sob o cursor. Duas colunas de
✎ e 🗑 repetidas em vinte linhas viram um padrão visual que compete com
o dado — e ninguém procura o lápis antes de escolher a linha.
Em toque não há cursor: lá eles ficam sempre visíveis (ver bloco CELULAR). */
.cel-acoes{ white-space:nowrap; }
.btn-icone{
color:var(--tinta-tenue); background:transparent; border:0; cursor:pointer;
padding:.15rem .3rem; border-radius:.35rem; line-height:1;
opacity:0; transition:opacity .12s, color .12s, background-color .12s;
}
tr:hover .btn-icone, .btn-icone:focus-visible{ opacity:1; }
.btn-icone:hover{ color:var(--ouro-escuro); background:var(--ouro-fraco); }
.btn-icone-perigo:hover{ color:var(--g-critico); background:transparent; }
.btn-icone:focus-visible{ outline:2px solid var(--ouro); outline-offset:1px; }
.dark .btn-icone:hover{ color:var(--ouro-claro); }
/* ---------------------------------------------------------------------
PÍLULAS DE STATUS — a última cor solta do app
Os cinco fundos vinham do paletão do Tailwind (#dcfce7, #fef3c7…) e
eram, depois do trabalho nos gráficos, a última cor do app escolhida
fora do sistema. Na prática isso significava um verde na pílula
"liquidado" e OUTRO verde na barra "Receitas" a 200px de distância, na
mesma tela — ninguém aponta o dedo, todo mundo sente.
Agora as cinco saem dos tokens medidos, por color-mix: fundo é a
própria cor a 14%, o texto é a cor cheia, e o contorno de 1px é o que
segura a forma quando o fundo é fraco assim. Como os tokens já mudam no
tema escuro, as pílulas acertam o escuro sozinhas — as dez linhas de
`.dark .pill-*` que existiam aqui deixaram de ser necessárias.
A ANATOMIA também mudou: `inline-flex` com um ponto na frente. Status é
informação categórica, e categoria transmitida só por matiz é
invisível para uma parte dos leitores; o ponto não resolve sozinho (o
texto é que resolve), mas dá a forma que a cor sozinha não dá. */
.pill{
display:inline-flex; align-items:center; gap:.32rem;
padding:.1rem .5rem .1rem .42rem; border-radius:999px;
font-size:.7rem; font-weight:650; letter-spacing:.01em; line-height:1.5;
border:1px solid transparent;
}
.pill::before{
content:''; width:.36rem; height:.36rem; border-radius:999px;
background:currentColor; flex:0 0 auto; opacity:.9;
}
.pill-green{ color:var(--g-bom); background:color-mix(in srgb, var(--g-bom) 14%, transparent); border-color:color-mix(in srgb, var(--g-bom) 30%, transparent); }
.pill-amber{ color:var(--g-atencao); background:color-mix(in srgb, var(--g-atencao) 14%, transparent); border-color:color-mix(in srgb, var(--g-atencao) 30%, transparent); }
.pill-red { color:var(--g-critico); background:color-mix(in srgb, var(--g-critico) 14%, transparent); border-color:color-mix(in srgb, var(--g-critico) 30%, transparent); }
.pill-blue { color:var(--g-cat-3); background:color-mix(in srgb, var(--g-cat-3) 14%, transparent); border-color:color-mix(in srgb, var(--g-cat-3) 30%, transparent); }
.pill-gray { color:var(--tinta-fraca); background:color-mix(in srgb, var(--tinta-fraca) 12%, transparent); border-color:var(--linha-forte); }
/* No grafite o mesmo 14% quase não se vê: o fundo sobe para 22% e o
contorno para 45%. As MATIZES não mudam aqui — quem já as trocou foi o
bloco html.dark lá em cima, uma vez, para o app inteiro. */
.dark .pill-green{ background:color-mix(in srgb, var(--g-bom) 22%, transparent); border-color:color-mix(in srgb, var(--g-bom) 45%, transparent); }
.dark .pill-amber{ background:color-mix(in srgb, var(--g-atencao) 22%, transparent); border-color:color-mix(in srgb, var(--g-atencao) 45%, transparent); }
.dark .pill-red { background:color-mix(in srgb, var(--g-critico) 22%, transparent); border-color:color-mix(in srgb, var(--g-critico) 45%, transparent); }
.dark .pill-blue { background:color-mix(in srgb, var(--g-cat-3) 22%, transparent); border-color:color-mix(in srgb, var(--g-cat-3) 45%, transparent); }
.dark .pill-gray { background:rgba(255,255,255,.09); color:#cbd5e1; border-color:rgba(255,255,255,.14); }
/* ---------------------------------------------------------------------
TOAST — a confirmação que não interrompe
Era um retângulo escuro com o texto dentro, aparecendo e sumindo sem
transição. Agora: entra deslizando de baixo, traz um fio dourado na
borda esquerda (a marca assina o que ela confirma) e sai sozinho. Os
estados de erro e de acerto trocam esse fio — a única cor da peça.
--------------------------------------------------------------------- */
.toast{
position:fixed; right:1.25rem; bottom:1.25rem; z-index:70;
display:flex; align-items:center; gap:.6rem;
max-width:min(26rem, calc(100vw - 2.5rem));
padding:.7rem .95rem .7rem .85rem;
background:#1c1c22; color:#f1efea;
border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--ouro);
border-radius:var(--r-sm); box-shadow:var(--e3);
font-size:.82rem; line-height:1.4;
animation:toast-entra .26s var(--mola) both;
}
@keyframes toast-entra{
from{ opacity:0; transform:translateY(.75rem) scale(.97); }
to { opacity:1; transform:none; }
}
.toast.erro { border-left-color:var(--g-critico); }
.toast.certo{ border-left-color:var(--g-bom); }
/* Inputs padrão dos formulários — o mesmo campo da tela de acesso: borda de
1px, foco em anel dourado (box-shadow, que acompanha o raio) e rótulo em
versalete. Dois formulários com aparências diferentes no mesmo app é o tipo
de detalhe que faz o conjunto parecer remendado. */
.field{
width:100%; padding:.55rem .75rem; font-size:.875rem;
border:1px solid var(--linha-forte); border-radius:var(--r-sm);
background:var(--superficie); color:var(--tinta); outline:none;
transition:border-color .15s var(--sai), box-shadow .15s var(--sai), background-color .15s var(--sai);
}
.dark .field{ background:#1f2026; }
.field:hover:not(:focus):not(:disabled){ border-color:var(--ouro-escuro); }
.field:focus{ border-color:var(--ouro); box-shadow:0 0 0 3px rgba(191,155,78,.18); }
/* Campo desabilitado tem de PARECER desabilitado antes do clique: fundo
recuado e cursor de barrado, não só o texto pálido. */
.field:disabled{ background:var(--superficie-2); color:var(--tinta-tenue); cursor:not-allowed; }
.dark .field:disabled{ background:rgba(255,255,255,.03); }
/* Campo que o app recusou. O anel vermelho precisa existir junto com a
mensagem — cor sozinha não conta para quem não a distingue. */
.field.invalido{ border-color:var(--g-critico); }
.field.invalido:focus{ box-shadow:0 0 0 3px color-mix(in srgb, var(--g-critico) 22%, transparent); }
.lbl{
font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:var(--tinta-fraca); margin-bottom:.35rem; display:block;
}
/* Combobox com busca (contas e carteiras do lançamento) */
.combo{ position:relative; }
.combo-input{ padding-right:2rem; }
.combo-clear{
position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
color:#94a3b8; font-size:.8rem; line-height:1; padding:.15rem;
}
.combo-clear:hover{ color:#475569; }
.dark .combo-clear:hover{ color:#e2e8f0; }
.combo-pop{
position:absolute; z-index:60; left:0; right:0; top:calc(100% + .3rem);
max-height:16rem; overflow-y:auto;
background:var(--superficie); border:1px solid var(--linha-forte); border-radius:.6rem;
box-shadow:0 12px 32px rgba(17,16,12,.14);
}
.dark .combo-pop{ background:#1f2026; box-shadow:0 12px 32px rgba(0,0,0,.55); }
.combo-head{
padding:.35rem .7rem; font-size:.62rem; font-weight:700; text-transform:uppercase;
letter-spacing:.12em; color:var(--tinta-tenue); background:var(--superficie-2);
position:sticky; top:0;
}
.dark .combo-head{ background:#17171b; }
.combo-opt{
display:flex; align-items:center; justify-content:space-between; gap:.6rem;
padding:.42rem .7rem; font-size:.875rem; cursor:pointer;
}
.combo-opt.is-active{ background:var(--ouro-fraco); }
.dark .combo-opt.is-active{ background:rgba(191,155,78,.20); }
.combo-code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; color:var(--tinta-fraca); }
.combo-sub{ font-size:.72rem; color:var(--tinta-tenue); }
.combo-empty{ padding:.6rem .7rem; font-size:.8rem; color:var(--tinta-tenue); }
/* ---------------------------------------------------------------------
CHIPS DOS FILTROS ATIVOS — o alvo é o ✕, não a pílula inteira
O chip inteiro era clicável e o ✕ era só um desenho de 0,65rem com 60%
de opacidade. Duas consequências: ninguém sabia que dava para remover
(nada parecia botão), e quem passava o mouse para LER o filtro
removia-o sem querer. Agora o ✕ é um alvo redondo de verdade, que
acende ao ser mirado — e o resto do chip continua clicável, porque
quem já aprendeu o gesto antigo não pode perdê-lo.
O corpo também subiu de 0,15rem para 0,3rem de respiro vertical: a
pílula era mais fina que a linha de texto ao lado dela e lia como
etiqueta impressa, não como controle. */
.chip{
display:inline-flex; align-items:center; gap:.4rem;
padding:.28rem .3rem .28rem .65rem; border-radius:999px;
font-size:.72rem; font-weight:550; cursor:pointer; line-height:1.3;
background:linear-gradient(180deg,#fdfaf1,#f7f1e0); color:#7c611f;
border:1px solid #e6d296; box-shadow:0 1px 1px rgba(140,108,32,.06);
transition:border-color .15s var(--sai), box-shadow .15s var(--sai), background .15s var(--sai);
}
.chip:hover{ border-color:var(--ouro); box-shadow:0 1px 3px rgba(140,108,32,.16); }
.dark .chip{
background:rgba(191,155,78,.16); color:#e6cf8f;
border-color:rgba(191,155,78,.42); box-shadow:none;
}
.dark .chip:hover{ background:rgba(191,155,78,.26); border-color:var(--ouro-claro); }
.chip-x{
flex:0 0 auto; display:grid; place-items:center;
width:1.15rem; height:1.15rem; border-radius:999px;
font-size:.66rem; line-height:1; opacity:.55;
transition:opacity .12s, background-color .12s, color .12s;
}
.chip:hover .chip-x{ opacity:.85; background:rgba(140,108,32,.12); }
.chip .chip-x:hover{ opacity:1; background:var(--g-critico); color:#fff; }
.dark .chip:hover .chip-x{ background:rgba(255,255,255,.12); }
/* ----------------------------------------------------------------------
Barra de filtros padronizada. Todo bloco de filtros do app usa `.card
.filterbar`: um fundo levemente destacado do conteúdo, para o olho saber
na hora "aqui eu filtro". A busca ganha `.field-search` (lupa à esquerda) e
os filtros ativos aparecem como `.chip` com um "Limpar" ao lado — mesmo
modelo em Lançamentos, A pagar/receber, Plano de contas, Conciliação e
Operações, para não ter cada tela com um jeito diferente. */
/* A FAIXA DE FILTRO É CÔNCAVA, o card é convexo.
Antes ela era um card levemente mais escuro — e um card mais escuro
continua parecendo que está POR CIMA da página. Só que filtro não é
conteúdo: é a bancada onde o conteúdo é preparado. Invertendo a luz
(sombra para DENTRO, sem realce de topo) ela afunda, e a tabela logo
abaixo passa a ser a única coisa levantada da tela.
É um recurso de meio pixel que ninguém nota conscientemente e que
resolve sozinho a pergunta "onde eu filtro / onde eu leio". */
.filterbar{
background:var(--superficie-2);
border-color:var(--linha);
box-shadow:inset 0 1px 2px rgba(28,22,10,.045);
}
.dark .filterbar{
background:rgba(0,0,0,.22);
box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
/* A faixa de filtro é MEIO: ela existe para chegar na tabela. Aperta o
respiro dela e a tabela ganha três lançamentos a mais sem rolagem. */
.filterbar{ padding:.85rem 1rem; }
.filterbar .lbl{ margin-bottom:.25rem; font-size:.64rem; }
/* Dentro da bancada o campo é o que está por cima: ele volta ao branco
do card e ganha a sombrinha de contato que a faixa perdeu. */
.filterbar .field{ background:var(--superficie); box-shadow:var(--e1); }
.dark .filterbar .field{ background:#1f2026; box-shadow:none; }
/* ---------------------------------------------------------------------
CARTÃO DE PRIMEIROS PASSOS — a primeira tela que alguém vê
O anterior eram três caixas lado a lado de altura desigual, com o passo
já cumprido RISCADO. Riscar diz "cancelado"; o que houve foi o oposto.
Aqui o passo pronto apenas recua (opacidade + tique), a lista é vertical
(rótulo nenhum quebra no meio) e existe uma barra de progresso — que é o
que responde a pergunta que o cartão levanta: falta muito?
--------------------------------------------------------------------- */
.cartao-inicio{ border-color:var(--ouro-fraco); }
.inicio-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.inicio-titulo{ font-size:.95rem; font-weight:650; letter-spacing:-.005em; }
.inicio-sub{ font-size:.78rem; color:var(--tinta-fraca); margin-top:.1rem; }
.inicio-dispensar{
flex:0 0 auto; font-size:.72rem; color:var(--tinta-tenue);
background:none; border:0; cursor:pointer; padding:.15rem .25rem; border-radius:.35rem;
}
.inicio-dispensar:hover{ color:var(--tinta); text-decoration:underline; }
.inicio-barra{
height:4px; border-radius:2px; background:var(--linha);
margin:.75rem 0 .1rem; overflow:hidden;
}
.inicio-barra > span{
display:block; height:100%; border-radius:2px; background:var(--ouro);
transition:width .35s ease;
}
.inicio-passos{ list-style:none; margin:0; padding:0; }
.inicio-passo{
display:flex; align-items:center; gap:.7rem;
padding:.6rem .1rem; border-bottom:1px solid var(--linha);
}
.inicio-passo:last-child{ border-bottom:0; padding-bottom:0; }
/* A marca é o NÚMERO do passo enquanto está pendente e um tique quando
fica pronto: a mesma casa conta a ordem e depois o resultado. */
.inicio-marca{
flex:0 0 auto; width:1.4rem; height:1.4rem; border-radius:50%;
display:grid; place-items:center; font-size:.7rem; font-weight:700;
color:var(--tinta-fraca); border:1px solid var(--linha-forte);
}
.inicio-rotulo{ flex:1; font-size:.875rem; min-width:0; }
.inicio-cta{ flex:0 0 auto; padding:.3rem .7rem; font-size:.75rem; }
.inicio-ok{ flex:0 0 auto; font-size:.72rem; color:var(--tinta-tenue); }
.inicio-passo.feito .inicio-marca{
background:var(--g-bom); border-color:var(--g-bom); color:#fff;
}
/* Recua, não risca. */
.inicio-passo.feito .inicio-rotulo{ color:var(--tinta-tenue); }
.field-search{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:.65rem center; padding-left:2.1rem;
}
/* Cabeçalho/legenda dentro da barra de filtros e o "Limpar filtros" */
.filter-clear{
font-size:.72rem; font-weight:600; color:#7c611f; cursor:pointer;
display:inline-flex; align-items:center; gap:.25rem;
}
.filter-clear:hover{ text-decoration:underline; }
.dark .filter-clear{ color:#e6cf8f; }
/* Realce do trecho buscado no plano de contas */
mark.hl{ background:#fef08a; color:inherit; border-radius:.15rem; padding:0 .05rem; }
.dark mark.hl{ background:rgba(250,204,21,.35); color:#fef9c3; }
/* ======================================================================
CALENDÁRIO DE VENCIMENTOS — trinta e cinco caixas eram trinta e cinco
caixas demais
Cada dia era um retângulo com borda de 1px e canto arredondado. Numa
grade de 5×7 isso são 35 molduras completas — 140 traços — para exibir,
em geral, sete ou oito compromissos. A moldura tinha mais tinta que o
conteúdo, e os dias VAZIOS (a maioria) desenhavam com o mesmo peso dos
dias que tinham conta a pagar.
O desenho novo troca 35 molduras por UMA GRADE: cada célula desenha só
o próprio fio à direita e embaixo (`box-shadow:inset`), de modo que
duas células vizinhas dividem um traço em vez de encostarem dois.
POR QUE `inset` E NÃO `gap:1px` COM FUNDO NO CONTÊINER. O truque do vão
é mais elegante, e foi a primeira tentativa — mas o mês não preenche a
última linha da grade (fevereiro fecha na quarta-feira, e ali não há
célula nenhuma). Sem célula, o que aparece naquele retângulo é o FUNDO
DO CONTÊINER, ou seja, um bloco cinza sólido do tamanho de quatro dias.
Com o fio dentro da célula, o vazio é vazio.
Com a moldura fora do caminho, o PESO passa a significar alguma coisa:
dia sem nada é papel liso; dia com compromisso tem superfície; hoje tem
ouro. O olho encontra o que vence antes de ler qualquer número.
====================================================================== */
.cal{
display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
background:var(--superficie);
border:1px solid var(--linha); border-radius:var(--r-sm); overflow:hidden;
}
.cal > *{ box-shadow:inset -1px -1px 0 var(--linha); }
/* A última coluna não desenha o fio da direita: ali já está a borda do
contêiner, e dois traços de 1px encostados leem como um de 2px. */
.cal > *:nth-child(7n){ box-shadow:inset 0 -1px 0 var(--linha); }
.cal-dow{
text-align:center; font-size:.6rem; font-weight:700; text-transform:uppercase;
letter-spacing:.13em; color:var(--tinta-tenue); padding:.45rem 0;
background:var(--superficie-2);
}
.dark .cal-dow{ background:rgba(255,255,255,.04); }
.cal-cell{
position:relative; min-height:4.75rem; padding:.35rem .4rem;
background:var(--superficie); overflow:hidden;
transition:background-color .15s var(--sai);
}
/* Dia de outro mês: mesmo papel, sem conteúdo. Não é "invisível" — a
grade precisa da célula para não desalinhar a semana. */
.cal-cell.is-blank{ background:var(--superficie-2); min-height:4.75rem; }
.dark .cal-cell.is-blank{ background:rgba(255,255,255,.02); }
.cal-cell.has-ev{ cursor:pointer; }
.cal-cell.has-ev:hover{ background:var(--ouro-fraco); }
/* HOJE: número em disco de ouro. O anel de borda que havia antes competia
com as bordas de todas as outras células (que agora nem existem); marcar
o NÚMERO é mais preciso e sobra para o conteúdo do dia. */
.cal-cell.is-today{ background:color-mix(in srgb, var(--ouro) 8%, var(--superficie)); }
.dark .cal-cell.is-today{ background:color-mix(in srgb, var(--ouro) 14%, var(--superficie)); }
.cal-cell.is-today .cal-day{
background:var(--ouro); color:#1b1608; border-radius:999px;
width:1.35rem; height:1.35rem; display:grid; place-items:center;
margin:-.1rem 0 .1rem -.1rem;
}
.cal-day{ font-size:.72rem; font-weight:650; color:var(--tinta-fraca); }
/* O compromisso é uma FAIXA com fio de cor à esquerda, não uma pastilha
de fundo cheio. Três pastilhas coloridas empilhadas numa célula de 76px
viram um bloco de cor; o fio dá a categoria e devolve o fundo ao texto. */
.cal-ev{
display:block; margin-top:.2rem; padding:.1rem .3rem .1rem .35rem;
border-radius:.15rem .25rem .25rem .15rem;
font-size:.66rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
border-left:2.5px solid transparent;
}
.cal-ev.pay{
background:color-mix(in srgb, var(--g-critico) 12%, transparent);
border-left-color:var(--g-critico); color:var(--g-critico);
}
.cal-ev.rec{
background:color-mix(in srgb, var(--g-bom) 12%, transparent);
border-left-color:var(--g-bom); color:var(--g-bom);
}
/* VENCIDA é o único estado que grita, e deve gritar: fundo cheio. */
.cal-ev.late{ background:var(--g-critico); border-left-color:var(--g-critico); color:#fff; }
.dark .cal-ev.pay{ background:color-mix(in srgb, var(--g-critico) 22%, transparent); }
.dark .cal-ev.rec{ background:color-mix(in srgb, var(--g-bom) 22%, transparent); }
/* Marca sem valor: o vencimento da fatura de um cartão que fechou sem compras.
Tracejado em vez de fundo cheio, para não competir com o que tem dinheiro. */
.cal-ev.nota{
background:transparent; border-left-style:dashed; border-left-color:var(--linha-forte);
color:var(--tinta-tenue); font-weight:500;
}
/* Quadradinhos da legenda — os mesmos tokens das faixas acima. */
.cal-key{ width:.6rem; height:.6rem; border-radius:.15rem; display:inline-block; }
.cal-key.pay { background:color-mix(in srgb, var(--g-critico) 45%, transparent); }
.cal-key.rec { background:color-mix(in srgb, var(--g-bom) 45%, transparent); }
.cal-key.late{ background:var(--g-critico); }
/* Botões */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
padding:.5rem .9rem; border-radius:var(--r-sm); font-size:.85rem; font-weight:600;
cursor:pointer; line-height:1.25; white-space:nowrap;
transition:filter .15s var(--sai), background .15s var(--sai),
border-color .15s var(--sai), box-shadow .15s var(--sai), transform .06s var(--sai);
}
.btn:focus-visible{ outline:2px solid var(--ouro); outline-offset:2px; }
/* Botão primário dourado ESCOVADO com texto grafite — o mesmo da tela de
acesso. O registro "cartão premium" (tinta escura sobre metal) lê melhor que
branco sobre dourado e passa AA com folga.
O QUE ELE GANHOU: um fio de luz no topo (o metal reflete de cima) e o
halo dourado da escala de elevação. Um botão de ação com a MESMA sombra
cinza de um card não parece um botão — parece um retângulo colorido. */
.btn-primary{
position:relative; overflow:hidden;
background:linear-gradient(180deg,var(--ouro-claro) 0%,var(--ouro) 55%,var(--ouro-escuro) 100%);
color:#1b1608; border:1px solid rgba(120,92,26,.35);
box-shadow:var(--e-ouro), inset 0 1px 0 rgba(255,255,255,.4);
}
/* O brilho que atravessa a face ao passar o mouse. Um gesto só, curto, e
por cima do gradiente — é o que separa "metal" de "amarelo chapado". */
.btn-primary::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
transform:translateX(-110%); transition:transform .55s var(--sai);
}
.btn-primary:hover{ filter:brightness(1.05); box-shadow:var(--e-ouro), inset 0 1px 0 rgba(255,255,255,.55); }
.btn-primary:hover::after{ transform:translateX(110%); }
.btn-primary:active{ transform:translateY(1px); box-shadow:var(--e1), inset 0 1px 3px rgba(90,68,14,.35); }
.btn-ghost{
background:var(--superficie); border:1px solid var(--linha-forte); color:var(--tinta);
box-shadow:var(--e1);
}
.btn-ghost:hover{ border-color:var(--ouro); background:var(--ouro-fraco); box-shadow:var(--e2); }
.btn-ghost:active{ transform:translateY(1px); box-shadow:none; }
.dark .btn-ghost{ background:rgba(255,255,255,.045); box-shadow:none; }
.dark .btn-ghost:hover{ background:var(--ouro-fraco); }
/* Ação destrutiva: vinho só na borda e no texto até o cursor chegar. Um
botão vermelho sólido parado na tela lê como alarme permanente. */
.btn-perigo{
background:transparent; border:1px solid color-mix(in srgb, var(--g-critico) 45%, transparent);
color:var(--g-critico);
}
.btn-perigo:hover{ background:var(--g-critico); border-color:var(--g-critico); color:#fff; }
/* Medida menor, para barra de apoio e ações dentro de card. */
.btn-sm{ padding:.32rem .65rem; font-size:.76rem; border-radius:var(--r-xs); }
.btn:disabled{ opacity:.5; cursor:not-allowed; filter:none; box-shadow:none; transform:none; }
.btn:disabled::after{ display:none; }
.pos{ color:#15803d; } .neg{ color:#be123c; }
.dark .pos{ color:#4ade80; } .dark .neg{ color:#f87171; }
/* Botões de resposta (Sim/Não/Neutro) selecionados */
.ansel-green{ background:#16a34a; color:#fff; }
.ansel-red{ background:#dc2626; color:#fff; }
.ansel-gray{ background:#64748b; color:#fff; }
/* Abas laterais das simulações */
.sim-tab{ display:block; width:100%; text-align:left; padding:.45rem .6rem; border-radius:.5rem;
font-size:.875rem; color:var(--tinta-fraca); }
.sim-tab:hover{ background:var(--superficie-2); color:var(--tinta); }
.dark .sim-tab:hover{ background:rgba(255,255,255,.06); }
.sim-tab.active{ background:var(--ouro); color:#1b1608; font-weight:600; }
.dark .sim-tab.active{ background:var(--ouro); color:#1b1608; }
/* ======================================================================
RELATÓRIOS — a árvore de um balanço tem de se ver
Um DRE ou um balanço não é uma lista: é uma ÁRVORE com somas parciais.
O que o leitor procura é onde um bloco começa, o que é somatório e qual
é o número que fecha a conta. As seis classes abaixo são exatamente
esses papéis (ROW_CLASS no app.js), e cada uma tem um desenho — antes
os três casos eram "negrito e um cinza um pouco mais escuro", com os
cinzas vindos do paletão do Tailwind em vez dos tokens daqui.
====================================================================== */
/* ABRE UM BLOCO ("(+) RECEITAS"). Versalete espaçado + fio de ouro na
margem: lê-se como TÍTULO, não como uma linha de valor sem número. */
table.tbl tr.rep-grupo > td{
background:var(--superficie-2);
font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--tinta-fraca);
padding-top:.7rem; padding-bottom:.55rem;
border-bottom:1px solid var(--linha);
box-shadow:inset 3px 0 0 var(--ouro);
}
.dark table.tbl tr.rep-grupo > td{ background:rgba(255,255,255,.05); }
table.tbl tr.rep-grupo:hover > td{ background:var(--superficie-2); }
.dark table.tbl tr.rep-grupo:hover > td{ background:rgba(255,255,255,.05); }
/* Conta SINTÉTICA: tem filhas logo abaixo. Tinta cheia e um fundo de
meio degrau — ela é o pai da indentação seguinte. */
table.tbl tr.rep-sint > td{
background:color-mix(in srgb, var(--superficie-2) 55%, var(--superficie));
font-weight:600; color:var(--tinta);
}
.dark table.tbl tr.rep-sint > td{ background:rgba(255,255,255,.028); }
/* FECHA UM BLOCO. O fio grosso em cima é o traço de soma do papel
quadriculado — é ele que diz "o que vem agora é a conta do que estava
acima", e nenhum negrito faz esse trabalho sozinho. */
table.tbl tr.rep-total > td{
font-weight:700; color:var(--tinta);
border-top:1.5px solid var(--linha-forte); border-bottom:0;
padding-top:.6rem;
}
/* O NÚMERO QUE FECHA O RELATÓRIO. É o único lugar da tabela onde a marca
aparece: fundo de ouro a 7%, fio de ouro em cima e embaixo — a "linha
dupla" com que se encerra uma coluna no razão de papel. Um resultado
apenas em negrito some no meio de vinte outras linhas em negrito. */
table.tbl tr.rep-grand > td{
background:color-mix(in srgb, var(--ouro) 7%, transparent);
font-weight:800; font-size:.9rem; color:var(--tinta);
border-top:2px solid color-mix(in srgb, var(--ouro) 55%, transparent);
border-bottom:1px solid color-mix(in srgb, var(--ouro) 30%, transparent);
padding-top:.8rem; padding-bottom:.8rem;
}
.dark table.tbl tr.rep-grand > td{ background:color-mix(in srgb, var(--ouro) 12%, transparent); }
table.tbl tr.rep-grand:hover > td{ background:color-mix(in srgb, var(--ouro) 7%, transparent); }
.dark table.tbl tr.rep-grand:hover > td{ background:color-mix(in srgb, var(--ouro) 12%, transparent); }
/* O trilho dourado do hover não cabe aqui: a linha inteira já é dourada. */
table.tbl tr.rep-grand:hover > td:first-child,
table.tbl tr.rep-grupo:hover > td:first-child{ box-shadow:none; }
table.tbl tr.rep-grupo:hover > td:first-child{ box-shadow:inset 3px 0 0 var(--ouro); }
/* Ressalva, nota de pé de tabela: presente, recessiva. */
table.tbl tr.rep-fraca > td{ color:var(--tinta-tenue); font-size:.82rem; }
/* ---------------------------------------------------------------------
LISTA DE CARTEIRAS — a proporção mora atrás do texto
Cinco linhas de "nome … R$ valor" respondem quanto tem em cada, mas não
respondem ONDE ESTÁ O DINHEIRO — que é a pergunta que se faz olhando
para uma lista de carteiras. Ler cinco números em reais e ordená-los de
cabeça é trabalho que o desenho pode fazer.
A barra de proporção é um fundo de 3px atrás da linha, alinhado à base.
Não gasta linha nenhuma, não empurra o valor e responde antes da
leitura. Verde quando é saldo, vinho quando é dívida (fatura de cartão),
pelos mesmos tokens de polaridade do resto do app.
--------------------------------------------------------------------- */
.cart-linha{
position:relative; display:flex; align-items:center; gap:.75rem;
padding:.55rem .1rem .6rem; border-bottom:1px solid var(--linha);
}
.cart-linha:last-child{ border-bottom:0; }
.cart-prop{
position:absolute; left:0; bottom:0; height:3px; border-radius:999px;
opacity:.4; transition:opacity .15s var(--sai), width .3s var(--sai);
}
.cart-linha:hover .cart-prop{ opacity:.75; }
.cart-nome{ flex:1 1 auto; min-width:0; font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-tipo{
font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
color:var(--tinta-tenue); margin-left:.4rem;
}
.cart-valor{ flex:0 0 auto; font-weight:650; font-variant-numeric:tabular-nums; }
/* Barra de progresso (orçamento) */
/* `display:flex` porque a barra passou a ter DOIS segmentos lado a lado (o
realizado e o comprometido). Com `block` o segundo caía embaixo do primeiro.
`flex:none` mantém cada um exatamente na largura em % que o JS calculou. */
.bar{ height:.45rem; border-radius:999px; background:var(--linha); overflow:hidden; display:flex; }
.bar > span{ display:block; height:100%; border-radius:999px; flex:none; }
/* Segmento COMPROMETIDO — o que vence no mês e ainda não saiu (parcelas 2..N de
um parcelado, recorrências). Listrado de propósito: é dinheiro já falado, mas
não gasto; pintá-lo sólido diria que já saiu. */
.bar > span.prev{
background-image:repeating-linear-gradient(45deg,
rgba(255,255,255,.6) 0 2px, rgba(255,255,255,0) 2px 5px);
opacity:.75;
}
/* ---------------------------------------------------------------------
MODAL — a mesma moldura dos formulários da tela de acesso
--------------------------------------------------------------------- */
/* O véu escurece E DESFOCA. Só escurecer deixa o formulário atrás legível,
e um formulário legível atrás de outro formulário divide a atenção
exatamente no momento em que o app está pedindo uma decisão. */
.modal-fundo{
background:rgba(17,16,12,.5); backdrop-filter:blur(6px) saturate(.9);
animation:vela-entra .2s var(--sai) both;
}
@keyframes vela-entra{ from{ opacity:0; } to{ opacity:1; } }
/* Fluxo normal + margem automática: centra na horizontal, dá respiro em cima e
embaixo, e — porque o #modal rola — deixa a caixa alta ser percorrida inteira
em vez de vazar para fora da tela. `position:relative` + z-index a poem acima
do fundo. A margem vertical é o que garante que o topo de um modal mais alto
que a tela continue alcançavel (margin:auto sozinho cortaria o topo). */
.modal-caixa{
position:relative; z-index:1; margin:2.5rem auto;
background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r-xl);
box-shadow:var(--e3), var(--brilho);
/* Assenta com um leve ultrapasse (--mola) em vez de simplesmente
aparecer: é o que dá a sensação de um painel que veio de algum lugar. */
animation:modal-entra .28s var(--mola) both;
}
@keyframes modal-entra{
from{ opacity:0; transform:translateY(12px) scale(.985); }
to { opacity:1; transform:none; }
}
/* Cabeçalho preso: num formulário longo, o título e o ✕ acompanham a rolagem em
vez de sumir no topo. O fundo opaco impede o conteúdo de aparecer atrás dele.
O fio dourado no alto é a mesma assinatura do trilho do KPI e da divisa
da sidebar: onde a marca toca a moldura, ela toca em ouro. */
.modal-cab{
background:var(--superficie); border-bottom:1px solid var(--linha);
border-radius:var(--r-xl) var(--r-xl) 0 0;
background-image:linear-gradient(90deg, var(--ouro) 0%, color-mix(in srgb, var(--ouro) 20%, transparent) 55%, transparent 100%);
background-repeat:no-repeat; background-size:100% 2px; background-position:top left;
}
/* Enquanto um modal está aberto, o fundo não rola — senão a roda do mouse
mexeria a página atrás em vez do formulário na frente, e o usuário "perderia"
a tela onde estava. Removido no closeModal, sempre. */
html.modal-aberto{ overflow:hidden; }
/* ---------------------------------------------------------------------
Caixa de "abas liberadas" (cadastro de pessoa). Cada opção é um cartão
clicável: em lista de checkbox nua, o rótulo e a explicação viram um bloco
de texto que ninguém lê antes de marcar.
--------------------------------------------------------------------- */
.abas-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
@media (max-width:520px){ .abas-grid{ grid-template-columns:1fr; } }
.aba-opt{
display:flex; align-items:flex-start; gap:.5rem; cursor:pointer;
padding:.45rem .55rem; border:1px solid var(--linha); border-radius:.5rem;
transition:border-color .15s, background .15s;
}
.aba-opt:hover{ border-color:var(--linha-forte); background:var(--superficie-2); }
.aba-opt input{ margin-top:.15rem; accent-color:var(--ouro); flex:0 0 auto; }
.aba-opt b{ display:block; font-size:.8rem; font-weight:600; }
.aba-opt i{ display:block; font-size:.68rem; font-style:normal; color:var(--tinta-tenue); line-height:1.35; }
.aba-opt:has(input:checked){ border-color:var(--ouro); background:var(--ouro-fraco); }
/* ---------------- Cores do Tailwind no tema escuro ----------------
Os tons -500/-600 são feitos para fundo branco; sobre o card (#0f172a) eles
caem para 2,7–3,9:1 e ficam ilegíveis. Aqui eles viram o -400 equivalente,
que é a convenção do Tailwind para tema escuro.
Por que a regra mora aqui e não em cada `class=`: são ~66 usos espalhados
pelo HTML gerado no app.js/sim.js. Um `dark:` em cada um seria a forma
idiomática, mas espalharia a decisão de cor por 66 lugares — e o arquivo já
resolve tudo (.card, .field, .cal-ev…) neste padrão `.dark X`.
Sobre especificidade: o Play CDN injeta o