/* Financeiro — topo, cartões, meses e navegação.
   As folhas (formulário e conta) estão no estilo-folhas.css e os gráficos
   no estilo-graficos.css. As cores e a moldura .app vêm do <style> do
   index.html. */

/* ---------- topo ---------- */
.topo{background:var(--cor);color:#fff;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
border-radius:0 0 20px 20px;position:relative}
.topo-linha{display:flex;align-items:center;gap:12px}
.topo-nome{min-width:0}
.topo-tit{font-size:22px;font-weight:700;letter-spacing:-.3px;line-height:1.2}
.topo-dia{font-size:12px;text-transform:uppercase;letter-spacing:.8px;opacity:.78;font-weight:600}
.topo-acoes{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-instalar,.btn-topo{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);
border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.btn-topo svg{width:16px;height:16px}
.topo-eu{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:none;
overflow:hidden;padding:0}
.eu-ini{font-size:16px;font-weight:700;color:#fff;letter-spacing:.5px}
.eu-ini img{display:block;width:100%;height:100%;object-fit:cover}

/* O seletor de ano: ‹ 2026 ›. Vale para o Painel e para os Meses juntos. */
.anos{margin-top:12px;display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:3px}
.anos button{width:34px;height:30px;border-radius:999px;display:grid;place-items:center;color:#fff}
.anos button:hover{background:rgba(255,255,255,.14)}
.anos button svg{width:18px;height:18px}
.anos-txt{min-width:52px;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}

/* A foto na folha da conta */
.conta-foto{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.conta-foto-ver{width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;
background:var(--cor);color:#fff;display:grid;place-items:center;font-weight:700;font-size:22px}
.conta-foto-ver img{display:block;width:100%;height:100%;object-fit:cover}
.conta-foto-acoes{display:flex;flex-direction:column;gap:6px;min-width:0}

/* ---------- corpo ---------- */
.corpo{padding:16px}
.bloco{margin-top:22px}
.bloco-tit{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
color:var(--tinta-2);margin-bottom:10px}
.resumo{font-size:13.5px;color:var(--tinta-2);margin-bottom:12px;min-height:18px}
.resumo b{color:var(--tinta);font-weight:700}
.nota{font-size:12.5px;color:var(--tinta-3);margin-top:18px;line-height:1.5}

/* ---------- o cartão do gráfico de cima do painel ----------
   Desde 22/10/2026 é um gráfico (app-grafico-resultado.js, pedido do
   Covais): entradas, saídas e resultado no YTD, no mês e no dia, com o
   número em cada barra. A tabela que existia aqui saiu, e a meta e o
   disponível estão no gráfico Meta e disponível (app-grafico-meta.js).
   Desde 23/10/2026 o cartão não tem título próprio: o título é a legenda
   do gráfico (.g-titulo, no estilo-graficos.css). */
.topicos{display:grid;gap:12px}
.topico{background:var(--cartao);border:1px solid var(--linha);border-radius:16px;
padding:13px 14px 12px;box-shadow:var(--sombra);min-width:0}
/* Número negativo em vermelho (o resultado do mês nos Meses, o atingido nos
   Ajustes). */
.neg-txt{color:var(--neg)}
/* Celular estreito (até 420px): menos margem no cartão. */
@media (max-width:420px){
.topico{padding:12px 11px 11px}
}

/* ---------- cartão genérico ---------- */
.cartao{background:var(--cartao);border:1px solid var(--linha);border-radius:14px;
box-shadow:var(--sombra);padding:14px}

/* ---------- lista dos meses ---------- */
.item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;
background:var(--cartao);border:1px solid var(--linha);border-radius:14px;padding:11px 13px;
box-shadow:var(--sombra);margin-bottom:8px}
.item:active{transform:scale(.995)}
.item.vazio-mes{background:transparent;border-style:dashed;box-shadow:none}
.mes-bola{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
font-size:13px;font-weight:700;background:var(--cor-claro);color:var(--cor);letter-spacing:.3px}
.item.vazio-mes .mes-bola{background:var(--grade);color:var(--tinta-3)}
.item-meio{flex:1;min-width:0;display:block}
.item-nome{display:block;font-size:15px;font-weight:700;letter-spacing:-.2px}
.item-sub{display:block;font-size:12.5px;color:var(--tinta-2);margin-top:2px;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.item.vazio-mes .item-sub{color:var(--tinta-3)}
.item-dir{text-align:right;flex:none}
.item-val{display:block;font-size:15px;font-weight:700;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.item-val.pos{color:var(--pos)}
.item-val.neg{color:var(--neg)}
.item-rot{display:block;font-size:11px;color:var(--tinta-3);font-weight:600}
.item-mais{width:26px;height:26px;color:var(--tinta-3)}
.item-mais svg{width:100%;height:100%}

/* ---------- metas (a aba que até 23/10/2026 era Ajustes) ----------
   Só a porcentagem de retenção: os quadros de meta e atingido, os tickets
   e as regras saíram (app-ajustes.js). */
.aj-tit{font-size:16px;font-weight:700;letter-spacing:-.2px}
.aj-sub{font-size:13px;color:var(--tinta-2);margin-top:2px}
.explica{font-size:12.5px;color:var(--tinta-2);margin-top:8px;line-height:1.5}
.explica b{color:var(--tinta)}
.btn-cheio{margin-top:14px;width:100%;background:var(--cor);color:#fff;border-radius:12px;padding:12px;
font-size:15px;font-weight:700;box-shadow:var(--sombra)}
.btn-cheio[disabled]{opacity:.6}
/* O cartão Independência financeira (23/10/2026, app-independencia-form.js):
   o CDI com o "ao mês | ao ano" do lado, que um toque troca. */
.cdi-linha{display:flex;gap:8px;align-items:stretch}
.cdi-linha input{flex:1;min-width:0}
.periodo{display:flex;flex:none;gap:2px;padding:3px;background:var(--papel);border:1px solid var(--linha);
border-radius:11px}
.periodo button{border-radius:8px;padding:0 11px;font-size:13.5px;font-weight:700;color:var(--tinta-2);
white-space:nowrap}
.periodo button[aria-pressed="true"]{background:var(--cor);color:#fff;box-shadow:var(--sombra)}
/* O valor da frase não quebra no meio ("R$" numa linha, o número na outra). */
#ind-previa b{white-space:nowrap}

/* ---------- vazio, erro e carregando ---------- */
.vazio{text-align:center;padding:26px 18px;color:var(--tinta-2);background:var(--cartao);
border:1px dashed var(--linha);border-radius:14px;margin-top:16px}
.vazio h3{font-size:15px;font-weight:700;color:var(--tinta)}
.vazio p{font-size:13.5px;margin-top:4px}
.btn-vazio{margin-top:14px;background:var(--cor);color:#fff;border-radius:11px;
padding:10px 18px;font-weight:700;font-size:14px}
.esqueleto{height:88px;border-radius:14px;background:linear-gradient(90deg,#ECEFF3,#F7F8FA,#ECEFF3);
background-size:200% 100%;animation:brilho 1.2s infinite}
.esqueleto.alto{height:210px;border-radius:16px}
@keyframes brilho{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}}

/* ---------- navegação de baixo ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.96);
backdrop-filter:saturate(1.6) blur(10px);border-top:1px solid var(--linha);display:flex;
padding-bottom:env(safe-area-inset-bottom)}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
font-size:11px;font-weight:600;color:var(--tinta-3)}
.nav button svg{width:22px;height:22px}
.nav button[aria-current]{color:var(--cor)}
@media (min-width:560px){.nav{max-width:520px;margin:0 auto}}

/* ---------- faixa de instalação ---------- */
.faixa{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:31;
max-width:500px;margin:0 auto;background:var(--tinta);color:#fff;border-radius:14px;
padding:12px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--sombra-alta)}
.faixa p{font-size:13px;flex:1}
.faixa-ok{background:#fff;color:var(--tinta);border-radius:9px;padding:7px 12px;font-weight:700;font-size:13px}
.faixa-x{color:rgba(255,255,255,.7);padding:4px}
.faixa-x svg{width:18px;height:18px}

/* ---------- aviso (toast) ---------- */
.aviso{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translate(-50%,14px);
z-index:60;background:var(--tinta);color:#fff;border-radius:11px;padding:10px 16px;font-size:14px;
font-weight:600;box-shadow:var(--sombra-alta);opacity:0;pointer-events:none;transition:.18s;
max-width:calc(100% - 32px);text-align:center}
.aviso.ver{opacity:1;transform:translate(-50%,0)}
.aviso.ruim{background:var(--vermelho)}

/* ---------- balão do assistente ----------
   Quem põe o balão no fim da página é a fábrica (tela_propria._com_balao),
   e só para quem entrou: este app é de uso interno. Aqui fica só onde a
   bolha mora: acima da barra de baixo e da faixa de instalar, na borda
   da coluna do app, e EMBAIXO das folhas (z 50), para não cobrir botão
   de folha aberta. Sem balão, nada aqui muda a tela. */
:root{--as-z:45;--as-sobe:74px;--as-direita:max(16px,calc(50% - 244px))}
body:has(#faixa:not([hidden])){--as-sobe:146px}
body:has(#as-raiz) .app{padding-bottom:calc(144px + env(safe-area-inset-bottom))}
body:has(#as-raiz):has(#faixa:not([hidden])) .app{padding-bottom:calc(216px + env(safe-area-inset-bottom))}

/* ---------- PDF (imprimir) ----------
   O botão PDF chama a impressão do navegador, que tem "Salvar como PDF" no
   celular e no computador. Sai só o painel, sem os botões e a navegação. */
@media print{
@page{margin:12mm}
body{background:#fff}
.app{max-width:none;margin:0;padding:0;box-shadow:none;background:#fff}
.nav,.faixa,.aviso,.dica,.topo-acoes,.topo-eu,.anos,.veu,.nota,.btn-vazio{display:none!important}
.topo{background:#fff;color:var(--tinta);padding:0 0 8px;border-radius:0;border-bottom:2px solid var(--cor)}
.topo-dia{opacity:1;color:var(--tinta-2)}
.corpo{padding:10px 0}
.cartao,.topico{box-shadow:none;break-inside:avoid}
.topico{border:2px solid var(--cor)}
.bloco{break-inside:avoid}
*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}