/* ============================================================
   Telas — fase 1
   .lc-  Lançamentos (o extrato)
   ============================================================ */

/* o extrato ocupa a largura; o resumo do mês fica ao lado */
.lc-corpo{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:var(--e6);
  align-items:start}
.lc-lado{display:flex;flex-direction:column;gap:var(--e6);min-width:0}

.lc-filtros{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-bottom:var(--e4)}
.lc-filtros .ui-busca{margin-left:auto}

.lc-prog{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4)}
.lc-prog .ui-trilho{flex:1;max-width:220px}
.lc-prog-txt{font-size:var(--t-apoio);color:var(--tinta-2)}
.lc-prog-txt b{color:var(--tinta);font-weight:500}

.lc-rolagem{overflow-x:auto}

/* ---------- a tabela do extrato ---------- */
.lc-tabela{width:100%;border-collapse:collapse;font-size:var(--t-apoio)}
.lc-tabela th{text-align:left;font-size:var(--t-min);font-weight:500;
  color:var(--tinta-2);padding:0 var(--e2) var(--e2);white-space:nowrap}
.lc-tabela td{padding:var(--e2);vertical-align:middle;
  box-shadow:inset 0 -1px 0 var(--fio)}
.lc-tabela tbody tr{cursor:pointer;
  transition:background var(--dur) var(--ease)}
.lc-tabela tbody tr:hover{background:var(--rebaixado)}
.lc-tabela tbody tr:focus-visible{outline-offset:-2px}

/* a transferência tem fundo próprio: não é entrada nem saída */
.lc-tabela tbody tr.lc-tr{background:var(--transf-fundo)}
.lc-tabela tbody tr.lc-tr:hover{background:var(--transf-hover)}

.lc-tabela tr.lc-abertura td{color:var(--tinta-2);background:none;cursor:default}
.lc-tabela tr.lc-abertura:hover{background:none}

.lc-dia{color:var(--tinta-2);white-space:nowrap;width:46px}
.lc-st{width:22px;padding-inline:0}
.lc-desc{min-width:220px}
.lc-desc-n{display:block;color:var(--tinta)}
.lc-desc small{display:block;color:var(--tinta-2);font-size:var(--t-min);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.lc-itens{display:inline-block;margin-left:var(--e2);font-size:var(--t-min);
  color:var(--tinta-2);background:var(--rebaixado);border-radius:var(--r-pilula);
  padding:1px 8px;vertical-align:1px}
.lc-conta-c{color:var(--tinta-2);white-space:nowrap}
.lc-ent{color:var(--ok)}
.lc-sai{color:var(--tinta)}
.lc-saldo{color:var(--tinta-2);white-space:nowrap}
.lc-sob{display:block;font-size:var(--t-min);color:var(--tinta-2);font-weight:400}

.lc-tabela tfoot td{font-weight:600;box-shadow:none;padding-top:var(--e3)}
.lc-tabela tfoot small{font-weight:400;color:var(--tinta-2)}

/* marcas de situação */
.lc-marca-ok{display:inline-grid;place-items:center;width:16px;height:16px;
  border-radius:var(--r-pilula);background:var(--ok-suave);color:var(--ok)}
.lc-marca-ok svg{width:10px;height:10px;stroke-width:3}
.lc-marca-prev{display:inline-block;width:10px;height:10px;border-radius:var(--r-pilula);
  border:1.5px solid var(--contorno)}
.lc-marca-tr{display:inline-block;width:16px;height:10px;border-radius:3px;
  background:var(--transf-fundo);box-shadow:inset 0 0 0 1px var(--fio)}

/* as ações aparecem no hover e no foco da linha */
.lc-acoes-c{width:94px}
.lc-acoes{display:flex;gap:2px;justify-content:flex-end;opacity:0;
  transition:opacity var(--dur) var(--ease)}
tr:hover .lc-acoes, tr:focus-within .lc-acoes{opacity:1}
.lc-acoes .ui-ic{width:26px;height:26px}
.lc-acoes .ui-ic svg{width:14px;height:14px}

.lc-legenda{display:flex;gap:var(--e5);flex-wrap:wrap;margin-top:var(--e4);
  font-size:var(--t-min);color:var(--tinta-2)}
.lc-legenda span{display:inline-flex;align-items:center;gap:6px}

/* ---------- painel de contas ---------- */
.lc-conta{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  width:100%;border:0;background:none;cursor:pointer;text-align:left;
  padding:var(--e2);margin-inline:calc(var(--e2) * -1);
  width:calc(100% + var(--e4));border-radius:var(--r-controle);
  font-size:var(--t-apoio);transition:background var(--dur) var(--ease)}
.lc-conta:hover{background:var(--rebaixado)}
.lc-conta[aria-pressed="true"]{background:var(--rebaixado);font-weight:500}
.lc-conta small{display:block;font-size:var(--t-min);color:var(--tinta-2);font-weight:400}
.lc-conta-v{text-align:right;white-space:nowrap}
.lc-sobe{color:var(--ok)}
.lc-conta-total{display:flex;justify-content:space-between;gap:var(--e3);
  margin-top:var(--e3);padding-top:var(--e3);font-size:var(--t-apoio);
  font-weight:600;box-shadow:inset 0 1px 0 var(--fio)}

/* ---------- painel por tipo ---------- */
.lc-tipo{display:grid;grid-template-columns:1fr auto;gap:4px var(--e3);
  font-size:var(--t-apoio);margin-bottom:var(--e3)}
.lc-tipo:last-child{margin-bottom:0}
.lc-tipo-n{display:flex;align-items:center;gap:var(--e2)}
.lc-tipo-n i{width:8px;height:8px;border-radius:var(--r-pilula);flex:none}
.lc-tipo small{color:var(--tinta-2);font-size:var(--t-min)}
.lc-tipo .ui-trilho{grid-column:1/-1;height:6px}
.lc-nada{font-size:var(--t-apoio);color:var(--tinta-2)}

/* ---------- gaveta do lançamento ---------- */
.lc-gv-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  gap:var(--e3);margin-bottom:var(--e5)}
.lc-gv-num span{display:block;font-size:var(--t-min);color:var(--tinta-2)}
.lc-gv-num b{display:block;font-size:var(--t-titulo);font-weight:600;margin-top:2px}
.lc-gv-nota{font-size:var(--t-apoio);color:var(--tinta-2);margin:var(--e4) 0 0;
  line-height:1.5}

@media (max-width:1180px){
  .lc-corpo{grid-template-columns:1fr}
  .lc-lado{flex-direction:row;flex-wrap:wrap}
  .lc-lado > *{flex:1 1 280px}
}
@media (max-width:900px){
  .lc-filtros .ui-busca{margin-left:0;width:100%}
  .lc-filtros .ui-busca input{width:100%}
  .lc-tabela{min-width:760px}
  .lc-acoes{opacity:1}
}

/* ============================================================
   .cd-  Cadastros
   ============================================================ */
.cd-corpo{display:grid;grid-template-columns:208px minmax(0,1fr);gap:var(--e6);
  align-items:start}
.cd-secoes{padding:var(--e3);gap:2px}
.cd-secao{display:block;width:100%;text-align:left;border:0;background:none;
  cursor:pointer;padding:var(--e2) var(--e3);border-radius:var(--r-controle);
  font-size:var(--t-corpo);color:var(--tinta-2);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.cd-secao:hover{background:var(--rebaixado);color:var(--tinta)}
.cd-secao[aria-current="true"]{background:var(--rebaixado);color:var(--tinta);
  font-weight:500}
.cd-conteudo{min-width:0}
/* o miolo de cada lista ainda vem do estilo.css antigo: a fase 1 troca
   a moldura. Estas duas regras só tiram a margem que ele impunha. */
.cd-conteudo .principal{display:block;padding:0;max-width:none}
.cd-conteudo .cartao{border-radius:var(--r-painel)}
@media (max-width:900px){
  .cd-corpo{grid-template-columns:1fr}
  .cd-secoes{display:flex;overflow-x:auto}
  .cd-secao{white-space:nowrap;width:auto}
}

/* linha prevista: o número existe, mas em tom de apoio, porque ainda
   não aconteceu e não entra no saldo corrido */
.lc-previsto{color:var(--tinta-2)}

/* ============================================================
   Defesa contra o estilo.css antigo
   ============================================================
   Enquanto as duas folhas convivem, as regras de elemento nu do
   arquivo antigo (`table`, `th`, `td`) alcançam as tabelas novas
   e trazem junto coisas que o ANTI-PADROES-IA.md proíbe:
   cabeçalho em maiúsculas com entreletra, texto de 9,5 px e um
   `position:sticky` cujo `top` aponta para variáveis que não
   existem mais nesta moldura — era isso que jogava o cabeçalho
   por cima da primeira linha.

   Este bloco morre junto com o estilo.css, na última fase. */
.lc-tabela{min-width:0}
.lc-tabela th{
  position:static;
  text-transform:none;
  letter-spacing:0;
  background:none;
  border-bottom:0;
  z-index:auto;
}
.lc-tabela td{height:auto;border-bottom:0;white-space:nowrap}
.lc-tabela tbody td:first-child{border-left:0}
.lc-tabela tfoot td{height:auto;background:none;border-top:0}
/* o estado vazio ocupa a largura e precisa de texto que quebra */
.lc-tabela .ui-vazio{white-space:normal}
.lc-tabela td:has(.ui-vazio){box-shadow:none}

/* ============================================================
   .cn-  Conciliação
   ============================================================ */
.cn-topo{display:flex;align-items:center;gap:var(--e3);flex-wrap:wrap;
  margin-bottom:var(--e5)}
.cn-acoes{margin-left:auto;display:flex;gap:var(--e2)}

.cn-corpo{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--e6);
  align-items:start}
/* o painel de trabalho acompanha a rolagem: a fila é longa e o
   formulário não pode sumir no alto da página */
.cn-detalhe{position:sticky;top:var(--e5)}

.cn-fila{max-height:calc(100vh - 220px);overflow:hidden}
#cn-lista{overflow-y:auto;flex:1;margin-inline:calc(var(--e2) * -1)}
#cn-lista:focus-visible{outline-offset:-2px}

.cn-linha{display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:baseline;gap:var(--e3);padding:var(--e2);
  border-radius:var(--r-controle);cursor:pointer;font-size:var(--t-apoio);
  transition:background var(--dur) var(--ease)}
.cn-linha:hover{background:var(--rebaixado)}
.cn-linha[aria-selected="true"]{background:var(--rebaixado);
  box-shadow:inset 3px 0 0 var(--acao)}
.cn-dia{color:var(--tinta-2)}
.cn-desc{min-width:0}
.cn-desc small{display:block;font-size:var(--t-min);color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-desc small.cn-par{color:var(--ok)}
.cn-valor{white-space:nowrap;font-weight:500}
.cn-saida .cn-valor{color:var(--tinta)}
.cn-entrada .cn-valor{color:var(--ok)}
.cn-dica{margin:var(--e3) 0 0;font-size:var(--t-min);color:var(--tinta-2)}

/* ---------- painel de trabalho ---------- */
.cn-cab{display:flex;align-items:flex-start;gap:var(--e3);margin-bottom:var(--e4)}
.cn-cab h2{font-size:var(--t-titulo);font-weight:600;margin:2px 0 0}
.cn-cab-rot{font-size:var(--t-min);color:var(--tinta-2)}
.cn-cab-val{margin-left:auto;font-size:var(--t-kpi);font-weight:500;
  white-space:nowrap;letter-spacing:-.02em}
.cn-neg{color:var(--tinta)}
.cn-pos{color:var(--ok)}

.cn-par-bloco{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--e3);
  align-items:center;background:var(--rebaixado);border-radius:var(--r-controle);
  padding:var(--e3)}
.cn-par-lado{min-width:0}
.cn-par-rot{display:block;font-size:var(--t-min);color:var(--tinta-2)}
.cn-par-lado b{display:block;font-size:var(--t-titulo);font-weight:600}
.cn-par-lado small{display:block;font-size:var(--t-min);color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-par-liga{color:var(--ok)}
.cn-par-liga svg{width:18px;height:18px}
.cn-dif{font-size:var(--t-apoio);color:var(--tinta-2);margin:var(--e3) 0 0;line-height:1.5}
.cn-sem-par{font-size:var(--t-apoio);color:var(--tinta-2);margin:0 0 var(--e3);
  line-height:1.5}

.cn-escolha{display:flex;gap:var(--e2);margin-bottom:var(--e4);flex-wrap:wrap}
.cn-opcao{border:0;background:var(--rebaixado);color:var(--tinta-2);cursor:pointer;
  padding:7px var(--e4);border-radius:var(--r-pilula);font:inherit;
  font-size:var(--t-apoio);transition:background var(--dur) var(--ease),
  color var(--dur) var(--ease)}
.cn-opcao:hover{background:var(--rebaixado-2);color:var(--tinta)}
.cn-opcao[aria-pressed="true"]{background:var(--acao);color:var(--sobre-acao);
  font-weight:500}

.cn-campos{display:grid;gap:var(--e3)}
.cn-campos.oculto{display:none}
.cn-botoes{margin-top:var(--e5)}
.cn-pe{margin-top:var(--e4);padding-top:var(--e3);
  box-shadow:inset 0 1px 0 var(--fio)}

@media (max-width:1180px){
  .cn-corpo{grid-template-columns:1fr}
  .cn-detalhe{position:static}
  .cn-fila{max-height:none}
}

/* As listas de Cadastros ainda são as do estilo.css: a fase 1 trocou a
   casca. Até elas serem reescritas, estas regras tiram do caminho o que
   o ANTI-PADROES-IA.md proíbe — cabeçalho em maiúsculas com entreletra,
   texto de 9,5 px e o sticky preso a variáveis que não existem mais. */
.cd-conteudo th{
  position:static;text-transform:none;letter-spacing:0;
  font-size:var(--t-min);color:var(--tinta-2);font-weight:500;
  background:none;border-bottom:1px solid var(--fio);z-index:auto;
}
.cd-conteudo table{min-width:0}
.cd-conteudo td{height:34px;border-bottom:1px solid var(--fio)}
.cd-conteudo tbody td:first-child{border-left:0}
.cd-conteudo tbody tr:hover{background:var(--rebaixado)}
.cd-conteudo tfoot td{background:none;border-top:1px solid var(--fio)}
.cd-conteudo .cartao > header{padding:var(--e4) var(--e5);border-bottom:0}
.cd-conteudo .cartao > header h2{font-size:var(--t-titulo);font-weight:600}

/* .ic do estilo.css nasceu com 11 px porque era um caractere (✕, ⧉).
   Agora são ícones SVG, e o texto de 11 px viola o piso de 12. */
.cd-conteudo .ic{font-size:var(--t-min)}

/* ============================================================
   .vg-  Visão geral   ·   .gr- gráficos
   ============================================================ */
.gr{width:100%;height:auto;display:block}
.gr-eixo{font-family:inherit;font-size:var(--t-min);fill:var(--tinta-2)}
.gr-ponto{cursor:pointer}
.gr-ponto circle,.gr-ponto rect{transition:r var(--dur) var(--ease)}
.gr-ponto:hover circle{r:6}
.gr-foco circle{r:6;stroke:var(--painel);stroke-width:2}
.gr-ponto:focus-visible{outline:2px solid var(--acao);outline-offset:1px}

.vg-grade{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--e6)}
.vg-fluxo{grid-column:span 8}
.vg-foco{grid-column:span 4}
.vg-tres{grid-column:span 4;min-height:var(--alt-linha3)}

.vg-foco-val{display:block;font-size:var(--t-destaque);font-weight:500;
  letter-spacing:-.02em;line-height:1.1}
.vg-foco-val.neg{color:var(--erro)}
.vg-foco-rot{display:block;font-size:var(--t-apoio);color:var(--tinta-2);margin-top:2px}
.vg-foco-conta{display:grid;grid-template-columns:1fr auto;row-gap:6px;
  font-size:var(--t-apoio);margin:var(--e4) 0;padding:var(--e3) 0;
  box-shadow:inset 0 1px 0 var(--fio),inset 0 -1px 0 var(--fio)}
.vg-foco-conta span:nth-child(odd){color:var(--tinta-2)}
.vg-foco-conta span:nth-child(even){text-align:right}
.vg-foco-conta .vg-tot{font-weight:600;color:var(--tinta)}
.vg-pos{color:var(--ok)}
.vg-neg{color:var(--erro)}
.vg-foco-nota{font-size:var(--t-apoio);color:var(--tinta-2);margin:var(--e3) 0 0;
  line-height:1.5}
.vg-falta{display:flex;gap:var(--e2);align-items:flex-start;margin-top:auto;
  padding-top:var(--e3)}
.vg-falta svg{width:15px;height:15px;flex:none;margin-top:2px}

.vg-teto{margin-bottom:var(--e4)}
.vg-teto:last-child{margin-bottom:0}
.vg-teto-l1{display:flex;align-items:center;gap:var(--e2);font-size:var(--t-apoio);
  margin-bottom:6px;flex-wrap:wrap}
.vg-teto-l1 b{font-weight:500}
.vg-teto-v{margin-left:auto;color:var(--tinta-2);white-space:nowrap}
.vg-teto-l2{font-size:var(--t-min);color:var(--tinta-2);margin-top:5px}

.vg-cat{display:grid;grid-template-columns:96px 1fr 76px;align-items:center;
  gap:var(--e3);font-size:var(--t-apoio);padding:4px 0}
.vg-cat-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vg-cat-v{text-align:right;white-space:nowrap}
.vg-nada{font-size:var(--t-apoio);color:var(--tinta-2)}

@media (max-width:1320px){
  .vg-fluxo{grid-column:span 7}
  .vg-foco{grid-column:span 5}
  .vg-cat{grid-template-columns:84px 1fr 68px}
}
@media (max-width:1024px){
  .vg-fluxo,.vg-foco,.vg-tres{grid-column:span 12}
}

/* ============================================================
   .pt-  Patrimônio
   ============================================================ */
.col-12{grid-column:span 12}
.pt-topo{grid-column:span 5}
.pt-donos{grid-column:span 7}

.pt-barra{display:flex;height:12px;border-radius:var(--r-pilula);overflow:hidden;
  gap:2px;margin-bottom:var(--e4)}
.pt-barra i{display:block;height:100%}
.pt-dono{display:grid;grid-template-columns:1fr auto 56px;gap:var(--e3);
  align-items:baseline;font-size:var(--t-apoio);padding:6px 0}
.pt-dono + .pt-dono{box-shadow:inset 0 1px 0 var(--fio)}
.pt-dono i{display:inline-block;width:8px;height:8px;border-radius:var(--r-pilula);
  margin-right:var(--e2)}
.pt-dono small{color:var(--tinta-2);text-align:right;font-size:var(--t-min)}

.pt-rolagem{overflow-x:auto}
.pt-tabela{width:100%;border-collapse:collapse;font-size:var(--t-apoio);min-width:0}
.pt-tabela th{text-align:left;font-size:var(--t-min);font-weight:500;
  color:var(--tinta-2);padding:0 var(--e2) var(--e2);white-space:nowrap;
  position:static;text-transform:none;letter-spacing:0;background:none;border-bottom:0}
.pt-tabela td{padding:var(--e2);height:auto;white-space:nowrap;border-bottom:0;
  box-shadow:inset 0 -1px 0 var(--fio)}
.pt-tabela tbody td:first-child{border-left:0}
.pt-tabela tbody tr:hover{background:var(--rebaixado)}
.pt-ap{color:var(--tinta-2)}
.pt-pct{display:block;font-size:var(--t-min);font-weight:400}
.pt-selo-dono{display:inline-block;width:8px;height:8px;border-radius:var(--r-pilula);
  margin-right:6px}

.pt-linha{display:flex;justify-content:space-between;gap:var(--e3);
  font-size:var(--t-apoio);padding:6px 0}
.pt-linha + .pt-linha{box-shadow:inset 0 1px 0 var(--fio)}
.pt-total{font-weight:600;margin-top:var(--e2);padding-top:var(--e3)}
.pt-divida{display:flex;justify-content:space-between;gap:var(--e3);
  font-size:var(--t-apoio);padding:var(--e2) 0}
.pt-divida b{font-size:var(--t-titulo)}

@media (max-width:1024px){ .pt-topo,.pt-donos{grid-column:span 12} }

/* .rd- Renda */
.rd-aviso{display:flex;gap:var(--e2);align-items:flex-start;margin:var(--e4) 0 0;
  font-size:var(--t-apoio);color:var(--tinta-2);line-height:1.5}
.rd-aviso svg{width:16px;height:16px;flex:none;margin-top:2px}
.pt-tabela tfoot td{font-weight:600;box-shadow:none;padding-top:var(--e3);
  border-top:1px solid var(--fio);background:none;height:auto}
code{font-family:ui-monospace,monospace;font-size:var(--t-min);
  background:var(--rebaixado);border-radius:4px;padding:1px 5px}

/* Cabeçalho de coluna de número acompanha o número: alinhado à direita.
   `.pt-tabela th` e `.lc-tabela th` fixam text-align:left e venciam o
   `.ui-r` por especificidade, deixando o rótulo longe do seu valor. */
.pt-tabela th.ui-r,
.lc-tabela th.ui-r{text-align:right}

/* ============================================================
   .cc-  Cartões (fase 3)
   ============================================================ */
.cc-fat{grid-column:span 12}

.cc-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--e3);margin-bottom:var(--e4)}
.cc-ct{border:0;background:var(--rebaixado);border-radius:var(--r-controle);
  padding:var(--e3) var(--e4);text-align:left;cursor:pointer;font:inherit;color:var(--tinta);
  display:grid;grid-template-columns:1fr auto;gap:2px var(--e2);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.cc-ct:hover{background:var(--rebaixado-2)}
.cc-ct[aria-pressed="true"]{background:var(--elevado);box-shadow:var(--sombra-elevacao)}
.cc-ct-n{display:flex;align-items:center;gap:var(--e2);font-weight:500;font-size:var(--t-corpo)}
.cc-ct-n i{width:10px;height:10px;border-radius:3px;flex:none}
.cc-ct-st{justify-self:end}
.cc-ct-v{grid-column:1/-1;font-size:var(--t-titulo);font-weight:500;letter-spacing:-.01em}
.cc-ct small{grid-column:1/-1;color:var(--tinta-2);font-size:var(--t-min)}

.cc-rolagem{overflow:auto;max-height:340px}
.cc-rolagem thead th{position:sticky;top:0;background:var(--painel);z-index:1}
.cc-tabela tbody tr{cursor:pointer}
.cc-tabela tbody tr:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
.cc-sub{display:block;font-size:var(--t-min);color:var(--tinta-2)}
.cc-dono{display:inline-block;font-size:var(--t-min);color:var(--tinta-2);
  background:var(--rebaixado);border-radius:var(--r-pilula);padding:1px 8px}
.cc-dono-terc{color:var(--quem-mamae-forte);background:var(--rebaixado)}
.cc-origem{font-size:var(--t-min);color:var(--tinta-2);margin:var(--e3) 0 0;line-height:1.5}

.cc-sobra{color:var(--ok)}
.cc-barra{display:flex;height:10px;border-radius:var(--r-pilula);overflow:hidden;gap:2px;
  margin:var(--e3) 0 6px;background:var(--rebaixado)}
.cc-barra i{display:block;height:100%}
.cc-leg{display:flex;gap:var(--e4);font-size:var(--t-min);color:var(--tinta-2);flex-wrap:wrap}
.cc-leg span{display:inline-flex;align-items:center;gap:5px}
.cc-leg i{width:8px;height:8px;border-radius:2px}

.cc-lin{display:grid;grid-template-columns:1fr auto;gap:2px var(--e3);align-items:center;
  font-size:var(--t-apoio);padding:8px 0;box-shadow:inset 0 -1px 0 var(--fio)}
.cc-lin small{display:block;color:var(--tinta-2);font-size:var(--t-min)}
.cc-lin > span:last-child{text-align:right;white-space:nowrap}
.cc-nm{display:flex;align-items:center;gap:var(--e2);min-width:0}
.cc-nm i{width:8px;height:8px;border-radius:2px;flex:none}
.cc-st{color:var(--tinta-2)}
.cc-rod{margin-top:auto;padding-top:var(--e3);display:flex;justify-content:space-between;
  font-size:var(--t-apoio);font-weight:600}
.cc-dica{font-size:var(--t-min);color:var(--tinta-2);line-height:1.5;margin:var(--e3) 0}
.cc-link{border:0;background:none;padding:0;font:inherit;color:var(--acao);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

.cc-gv-pe{display:flex;justify-content:space-between;gap:var(--e3);width:100%}
.cc-mov-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--e3)}
.cc-mov-form .ui-campo{width:100%}
.cc-mov-largo{grid-column:1/-1}
.cc-mov-btn{display:flex;align-items:flex-end}




/* ============================================================
   .fl-  Fluxo projetado (fase 3)
   ============================================================ */
.fl-graf{grid-column:span 8}
.fl-foco{grid-column:span 4}
#fl-cen{margin-bottom:var(--e3)}
#fl-cen:empty{display:none}
.fl-svg{width:100%;overflow:hidden}
.fl-svg-el{max-width:100%;height:auto}
.fl-leg{display:flex;gap:var(--e5);flex-wrap:wrap;font-size:var(--t-min);color:var(--tinta-2);
  margin-top:var(--e2)}
.fl-leg span{display:inline-flex;align-items:center;gap:6px}
.fl-leg i{display:inline-block;width:16px;border-top:2px solid var(--acao)}
.fl-leg .fl-l-trac{border-top-style:dashed}
.fl-leg .fl-l-faixa{height:8px;border:0;background:var(--acao);opacity:.12;border-radius:2px}
.fl-leg-dir{margin-left:auto}

.fl-foco-cab{display:flex;align-items:center;gap:var(--e2);margin-bottom:var(--e3)}
.fl-foco-cab h2{font-size:var(--t-titulo);font-weight:600;margin:0}
.fl-foco-nav{margin-left:auto;display:flex;gap:2px}
.fl-mot h3{font-size:var(--t-apoio);font-weight:500;color:var(--tinta-2);margin:0 0 var(--e2)}
.fl-mot-l{display:grid;grid-template-columns:1fr auto;gap:2px var(--e3);align-items:center;
  font-size:var(--t-apoio);padding:4px 0}
.fl-mot-l small{display:block;color:var(--tinta-2);font-size:var(--t-min)}
.fl-mot-l > span:last-child{white-space:nowrap;display:flex;align-items:center;gap:var(--e1)}
.fl-sugestao{font-size:var(--t-apoio);background:var(--acao-suave);border-radius:var(--r-controle);
  padding:var(--e3);line-height:1.5;margin-top:auto}
.fl-sugestao .ui-btn{display:flex;margin-top:var(--e2);background:var(--painel)}

.fl-rolagem{overflow-x:auto}
.fl-tabela{width:100%;border-collapse:collapse;min-width:1000px;font-size:var(--t-apoio)}
.fl-tabela th{font-size:var(--t-min);font-weight:500;color:var(--tinta-2);text-align:right;
  padding:0 var(--e2) var(--e2);white-space:nowrap;position:static;text-transform:none;
  letter-spacing:0;background:none;border-bottom:0}
.fl-tabela th:first-child{text-align:left;padding-left:0}
.fl-tabela td{height:34px;padding:0 var(--e2);text-align:right;white-space:nowrap;
  border-bottom:0;box-shadow:inset 0 -1px 0 var(--fio)}
.fl-tabela td:first-child{text-align:left;padding-left:0}
.fl-tabela tbody td:first-child{border-left:0}
.fl-tabela td small{display:block;color:var(--tinta-2);font-size:var(--t-min);font-weight:400;line-height:1.2}
.fl-tabela .fl-sel{background:var(--acao-suave)}
.fl-tabela th.fl-sel{color:var(--acao);border-radius:8px 8px 0 0}
.fl-tabela .fl-zero{color:var(--tinta-2)}
.fl-tabela tr.fl-grp td{font-weight:600;font-size:var(--t-min);color:var(--tinta-2);box-shadow:none;
  padding-top:var(--e3)}
.fl-tabela tr.fl-sub td{font-weight:600;box-shadow:inset 0 -1px 0 var(--tinta-2)}
.fl-tabela tr.fl-fim td{font-weight:600;height:42px;box-shadow:none}

.fl-sim-nova{margin-bottom:var(--e5)}
.fl-sim-linha{display:flex;gap:var(--e2)}
.fl-sim-linha .ui-campo{flex:1}
.fl-sim{padding:var(--e4) 0;box-shadow:inset 0 1px 0 var(--fio)}
.fl-sim-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--e2)}
.fl-sim-cab h3{font-size:var(--t-corpo);font-weight:600;margin:0}
.fl-aj{display:grid;grid-template-columns:96px 1fr;gap:var(--e2);margin-top:var(--e3)}
.fl-aj .ui-campo{width:100%;min-width:0}
.fl-aj .fl-aj-erro{grid-column:1/-1}
.fl-x{width:24px;height:24px}
.fl-x svg{width:12px;height:12px}

@media (max-width:1320px){ .fl-graf{grid-column:span 7} .fl-foco{grid-column:span 5} }
@media (max-width:1024px){ .fl-graf,.fl-foco{grid-column:span 12} }

/* ============================================================
   .mt-  Metas (fase 3)
   ============================================================ */
.mt-kpi{border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-radius:var(--r-controle);transition:background var(--dur) var(--ease)}
.mt-kpi:hover{background:var(--rebaixado)}
.mt-kpi-l{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.mt-secao{font-size:var(--t-apoio);font-weight:500;color:var(--tinta-2);margin:var(--e2) 0 calc(var(--e4) * -1)}
.mt-rp{grid-column:span 8}
.mt-rs{grid-column:span 4}
.mt-rp-topo{display:flex;align-items:flex-end;gap:var(--e6);margin-bottom:var(--e3);flex-wrap:wrap}
.mt-rp-lado{font-size:var(--t-apoio);color:var(--tinta-2);line-height:1.5}
.mt-rp-lado b{color:var(--tinta);font-weight:500}
#mt-cen{margin-left:auto}
.mt-rod{font-size:var(--t-min);color:var(--tinta-2);margin:var(--e2) 0 0;line-height:1.5}
.mt-rod b{color:var(--tinta);font-weight:500}

.mt-meses{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:var(--e4) 0 6px}
.mt-mes{height:44px;border-radius:var(--r-controle);background:var(--rebaixado);position:relative;overflow:hidden}
.mt-mes i{position:absolute;left:0;top:0;bottom:0;background:var(--dado-investimento)}
.mt-meses-rot{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;font-size:var(--t-min);
  color:var(--tinta-2);text-align:center;margin-bottom:var(--e3)}
.mt-simula{margin-top:var(--e4)}
.mt-simula .ui-campo{width:140px}

.mt-teto-l{display:flex;align-items:baseline;gap:var(--e3);flex-wrap:wrap}
.mt-teto-v{font-size:var(--t-kpi)}
.mt-hist{margin-top:var(--e4)}
.mt-barra{cursor:default}
.mt-barra:focus-visible{outline:2px solid var(--acao);outline-offset:1px}

.mt-base-topo{display:flex;gap:var(--e6);align-items:center;margin-bottom:var(--e4);flex-wrap:wrap;
  font-size:var(--t-apoio);color:var(--tinta-2)}
.mt-base-topo b{display:block;font-size:var(--t-titulo);color:var(--tinta);font-weight:500}
.mt-base-txt{max-width:540px;line-height:1.5}
.mt-teto h2:focus,.mt-rs h2:focus{outline:none}

@media (max-width:1320px){ .mt-rp{grid-column:span 7} .mt-rs{grid-column:span 5} }
@media (max-width:1024px){ .mt-rp,.mt-rs{grid-column:span 12} }

/* ============================================================
   .pc-  Plano de compras (fase 3)
   ============================================================ */
.pc-itens{grid-column:span 8}
.pc-quem{grid-column:span 4}
.pc-rolagem{overflow-x:auto}
.pc-tabela td{vertical-align:middle}
.pc-feito td{color:var(--tinta-2)}
.pc-check{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--contorno);background:none;
  cursor:pointer;display:grid;place-items:center;padding:0;color:var(--ok)}
.pc-check[aria-pressed="true"]{background:var(--ok-suave);border-color:var(--ok);cursor:default}
.pc-check svg{width:12px;height:12px}
.pc-quem-sel{display:inline-flex;align-items:center;gap:var(--e2)}
.pc-quem-sel i{width:8px;height:8px;border-radius:2px;flex:none}
.pc-sel{padding:4px var(--e2);font-size:var(--t-apoio)}
.pc-vezes{display:inline-flex;background:var(--rebaixado);border-radius:var(--r-pilula);padding:2px}
.pc-vezes button{border:0;background:none;font:inherit;font-size:var(--t-apoio);color:var(--tinta-2);
  padding:3px 10px;border-radius:var(--r-pilula);cursor:pointer;
  transition:background var(--dur-2) var(--ease),color var(--dur) var(--ease)}
.pc-vezes button[aria-pressed="true"]{background:var(--elevado);color:var(--tinta);font-weight:500;
  box-shadow:var(--sombra-pilula)}
.pc-vezes button:disabled{cursor:default}
.pc-novo{display:grid;grid-template-columns:1.4fr 1.2fr 110px 120px auto;gap:var(--e2);
  margin-top:var(--e4);align-items:center}
.pc-novo .ui-campo{width:100%;min-width:0}
.pc-novo .ui-campo-erro{grid-column:1/-1}
@media (max-width:900px){
  /* nome e detalhe em linha cheia; valor e quem paga lado a lado */
  .pc-novo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pc-novo #pc-n-item,.pc-novo #pc-n-det,.pc-novo .ui-btn{grid-column:1/-1}
}
.pc-nome{font-weight:500}
.pc-largo{width:100%}
.pc-espaco{margin-top:var(--e4)}

.pc-cen{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}
.pc-cen .ui-rot{margin:0}
.pc-meses{display:grid;grid-template-columns:repeat(12,1fr);gap:6px}
.pc-mes{border:0;border-radius:var(--r-controle);padding:var(--e2);text-align:left;cursor:pointer;
  font:inherit;font-size:var(--t-min);display:flex;flex-direction:column;gap:2px;min-width:0;
  background:var(--rebaixado);color:var(--tinta);
  transition:box-shadow var(--dur) var(--ease)}
.pc-mes b{font-size:var(--t-apoio);font-weight:600}
.pc-mes small{font-size:var(--t-min);color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis}
.pc-mes.pc-cabe{background:var(--ok-suave)} .pc-mes.pc-cabe span{color:var(--ok)}
.pc-mes.pc-apertado{background:var(--atencao-suave)} .pc-mes.pc-apertado span{color:var(--atencao)}
.pc-mes.pc-nao{background:var(--erro-suave)} .pc-mes.pc-nao span{color:var(--erro)}
.pc-mes.pc-fora span{color:var(--tinta-2)}
.pc-mes[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--acao)}
.pc-leg{display:flex;gap:var(--e5);flex-wrap:wrap;font-size:var(--t-min);color:var(--tinta-2);margin-top:var(--e3)}
.pc-leg span{display:inline-flex;align-items:center;gap:6px}
.pc-leg i{width:10px;height:10px;border-radius:3px}
.pc-leg .pc-cabe{background:var(--ok)} .pc-leg .pc-apertado{background:var(--atencao)}
.pc-leg .pc-nao{background:var(--erro)}

@media (max-width:1320px){ .pc-itens{grid-column:span 7} .pc-quem{grid-column:span 5}
  .pc-meses{grid-template-columns:repeat(6,1fr)} }
@media (max-width:1024px){ .pc-itens,.pc-quem{grid-column:span 12} }

/* link dentro de nota: a cor de ação, nunca o roxo de visitado */
.vg-foco-nota a{color:var(--acao);text-underline-offset:3px}

/* ============================================================
   .fi-  Financiamento (fase 4, subpágina de Patrimônio)
   ============================================================ */
.fi-topo{display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e4);flex-wrap:wrap}
.fi-acoes{margin-left:auto;display:flex;gap:var(--e2)}
.fi-kpis{grid-template-columns:1.2fr 1fr 1fr 1fr 1fr}
.fi-kpis .val.fi-destaque{color:var(--acao)}
.fi-kpis .val.fi-pos{color:var(--ok)}
.fi-prog{display:block;height:6px;border-radius:var(--r-pilula);background:var(--rebaixado);
  overflow:hidden;max-width:200px}
.fi-prog i{display:block;height:100%;background:var(--ok);border-radius:inherit}

.fi-graf{grid-column:span 8}
.fi-parc{grid-column:span 4}
.fl-leg .fi-l-contrato{border-top:2px dashed var(--dado-contrato)}
.fl-leg .fi-l-juros{width:10px;height:10px;border:0;border-radius:3px;background:var(--dado-juros)}
.fl-leg .fl-l-cheia{border-top:2px solid var(--acao)}
.fi-marca{font-weight:600;fill:var(--tinta)}
.fi-ok{fill:var(--ok)}

.fi-regua{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:var(--e3)}
.fi-pc{height:44px;border-radius:var(--r-controle);display:flex;flex-direction:column;align-items:center;
  justify-content:center;font-size:var(--t-min);line-height:1.2;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.fi-pc b{font-size:var(--t-apoio);font-weight:600}
.fi-paga{background:var(--ok-suave);color:var(--ok)}
.fi-pend{background:var(--rebaixado);color:var(--tinta)}
.fi-extra{background:var(--acao-suave);color:var(--acao)}
.fi-elim{background:none;box-shadow:inset 0 0 0 1.5px var(--fio);color:var(--tinta-2);text-decoration:line-through}
.fi-leg2{display:flex;flex-wrap:wrap;gap:var(--e3);font-size:var(--t-min);color:var(--tinta-2);margin-bottom:var(--e4)}
.fi-leg2 span{display:inline-flex;align-items:center;gap:5px}
.fi-leg2 i{width:10px;height:10px;border-radius:3px;text-decoration:none}
.fi-leg2 .fi-paga{box-shadow:inset 0 0 0 1px var(--ok)}
.fi-leg2 .fi-extra{box-shadow:inset 0 0 0 1px var(--acao)}
.fi-sub{font-size:var(--t-apoio);color:var(--tinta-2);margin:0}
.fi-contrato{margin-top:auto;padding-top:var(--e3)}
.fi-contrato h3{font-size:var(--t-apoio);font-weight:500;color:var(--tinta-2);margin:0 0 4px}
.fi-parc .pt-linha span:first-child{color:var(--tinta-2)}

.fi-tabela tbody tr{height:42px}
.fi-tabela .fi-l{text-align:left}
.fi-tabela tr.fi-atual{background:var(--acao-suave)}
.fi-tabela tr.fi-quitado td{color:var(--tinta-2)}
.fi-forte{font-weight:500}
.fi-campo{width:110px;height:32px;padding:0 var(--e2);text-align:right;font-size:var(--t-apoio)}
.fi-campo:disabled{background:var(--rebaixado);border-color:transparent;color:var(--tinta-2)}
.fi-campo.fi-tem{border-color:var(--acao);box-shadow:inset 0 0 0 1px var(--acao)}
.fi-selo-acao{background:var(--acao-suave);color:var(--acao)}
.fi-selo-vazio{background:none;box-shadow:inset 0 0 0 1px var(--fio);color:var(--tinta-2)}
.fi-nota{font-size:var(--t-min);color:var(--tinta-2);margin:var(--e3) 0 0;line-height:1.5;
  display:flex;gap:var(--e5);flex-wrap:wrap}
.fi-nota b{color:var(--tinta);font-weight:500}
.fi-largo{width:100%}
.fi-espaco{margin-top:var(--e4)}

@media (max-width:1320px){ .fi-graf{grid-column:span 7} .fi-parc{grid-column:span 5} }
@media (max-width:1024px){ .fi-graf,.fi-parc{grid-column:span 12} .fi-kpis{grid-template-columns:repeat(2,1fr)} }

/* subitem do menu (Financiamento, dentro de Patrimônio): recuado até
   o texto do item pai, sem ícone */
.fx-item.fx-sub{padding-left:calc(var(--e2) + 18px + var(--e3));font-size:var(--t-apoio)}
/* extra já pago: travado e sem o destaque de "tem valor" */
.fi-campo.fi-tem:disabled{border-color:transparent;box-shadow:none}

/* ============================================================
   .fm-  Família (mockup-familia.html)
   ============================================================ */
.fm-tres{grid-column:span 4}
.fm-pessoa{display:flex;align-items:center;gap:var(--e2)}
.fm-pessoa i{width:10px;height:10px;border-radius:3px;flex:none}
.ui-painel-cab .fm-tipo{margin-left:auto;font-size:var(--t-min)}
.fm-val{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:var(--e2) 0 2px}
.fm-rot{display:block;font-size:var(--t-apoio);color:var(--tinta-2)}
.fm-espaco{height:var(--e3)}
.fm-linha{display:grid;grid-template-columns:1fr auto;gap:2px var(--e3);align-items:center;
  font-size:var(--t-apoio);padding:8px 0;box-shadow:inset 0 -1px 0 var(--fio)}
.fm-linha small{display:block;color:var(--tinta-2);font-size:var(--t-min)}
.fm-campo-c{text-align:right}
.fm-campo{width:120px;text-align:right;padding:5px var(--e2);font-size:var(--t-apoio)}
.fm-erro{text-align:right}
.fm-tot{display:flex;justify-content:space-between;font-size:var(--t-apoio);font-weight:600;padding-top:var(--e3)}
.fm-regra{font-size:var(--t-apoio);background:var(--acao-suave);border-radius:var(--r-controle);
  padding:var(--e3);line-height:1.5;margin-top:auto}
.fm-regra b{font-weight:600}
.fm-conta{display:grid;grid-template-columns:1fr auto;row-gap:6px;font-size:var(--t-apoio);
  margin:var(--e4) 0;padding:var(--e3) 0;box-shadow:inset 0 1px 0 var(--fio),inset 0 -1px 0 var(--fio)}
.fm-conta span:nth-child(odd){color:var(--tinta-2)}
.fm-conta span:nth-child(even){text-align:right;white-space:nowrap}
.fm-conta .fm-t{font-weight:600;color:var(--tinta)}
.fm-acoes{display:flex;gap:var(--e2);margin-top:var(--e4)}
.fm-ok{color:var(--ok)}
.fm-salvo{font-size:var(--t-min);color:var(--ok)}
.fm-vazio{padding:var(--e5) 0}
@media (max-width:1100px){ .fm-tres{grid-column:span 12} }