/* ============================================================
   CAPITALL — folha única (a antiga, que as fases do layout esvaziam)
   Paleta neutra de baixa saturação, azul petróleo como primária.
   Sem build: tokens em custom properties.
   ============================================================ */
:root{
  --petroleo-900:#1d3a4f; --petroleo-700:#2f5c7e; --petroleo-600:#3e6e96;
  --petroleo-100:#dde7ee; --petroleo-50:#eef3f7;

  --cinza-900:#1b1f23; --cinza-700:#3d454d; --cinza-600:#5a646e;
  --cinza-500:#7c8791; --cinza-400:#a8b1b9; --cinza-300:#cbd2d8;
  --cinza-200:#e2e7ea; --cinza-100:#eff2f4; --cinza-50:#f7f9fa;
  --branco:#fff;

  --verde:#2f6b4f; --verde-bg:#e7f0eb; --verde-borda:#cfe0d6;
  --vermelho:#9b3535; --vermelho-bg:#f6e8e8;
  --ambar:#8a6412; --ambar-bg:#faf1dd; --ambar-borda:#ecdfc0;

  --borda:1px solid var(--cinza-200);
  --raio:6px;
  --sombra:0 1px 2px rgba(27,31,35,.06), 0 1px 3px rgba(27,31,35,.04);
  --fonte:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",Consolas,"Liberation Mono",monospace;

  /* natureza — filete na borda da linha, não pílula em toda linha */
  --n-essencial:var(--petroleo-600);
  --n-nao_essencial:var(--cinza-300);
  --n-investimento:var(--verde);

  --alt-topo:44px;
  --alt-faixa:44px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--fonte);font-size:13px;color:var(--cinza-900);
     background:var(--cinza-50);-webkit-font-smoothing:antialiased}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ============================================================
   Topo
   ============================================================ */
.topo{height:var(--alt-topo);background:var(--petroleo-900);color:#fff;display:flex;
      align-items:center;gap:16px;padding:0 14px;position:sticky;top:0;z-index:30}
.marca{font-weight:600;font-size:13px;white-space:nowrap}
.marca span{opacity:.5;font-weight:400}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.topo .usuario{font-size:12px;color:rgba(255,255,255,.7)}

.comp{display:flex;align-items:center;background:rgba(255,255,255,.1);border-radius:var(--raio)}
.comp button{background:none;border:0;color:#fff;cursor:pointer;padding:4px 9px;
      border-radius:4px;font-size:14px;line-height:1}
.comp button:hover{background:rgba(255,255,255,.14)}
.comp button:disabled{opacity:.3;cursor:default}
.comp button:disabled:hover{background:none}
.comp .atual{font-weight:600;padding:0 8px;min-width:118px;text-align:center;font-size:12.5px}

.chip{font-size:11px;background:rgba(255,255,255,.1);padding:3px 8px;border-radius:10px;
      color:rgba(255,255,255,.85);white-space:nowrap}
.chip strong{color:#fff;font-family:var(--mono)}

/* ============================================================
   Faixa de indicadores (F03)
   44px no lugar de cinco cartões de 95px — o mês cabe na tela.
   ============================================================ */
.faixa{display:flex;background:var(--branco);border-bottom:var(--borda);
       position:sticky;top:var(--alt-topo);z-index:25;min-height:var(--alt-faixa)}
.kpi{flex:1 1 0;min-width:0;padding:5px 14px;border-right:1px solid var(--cinza-100);
     display:flex;flex-direction:column;gap:1px;white-space:nowrap;overflow:hidden}
.kpi .rot{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;
     color:var(--cinza-500);font-weight:600;display:flex;align-items:center;gap:3px}
.kpi .val{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-.3px;
     line-height:1.15}
.kpi.destaque{background:var(--petroleo-50);border-left:3px solid var(--petroleo-600)}
.kpi.destaque .val{font-size:16.5px;color:var(--petroleo-900)}
.kpi.renda .rot{color:var(--petroleo-600)}
.kpi.renda .val{color:var(--petroleo-700)}
.kpi .val.neg{color:var(--vermelho)}
.faixa .fim{flex:none;display:flex;align-items:center;gap:8px;padding:0 12px}

/* "este número não é o que o nome sugere" */
.aviso-ind{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;
     border-radius:50%;background:var(--ambar-bg);color:var(--ambar);font-size:8.5px;
     font-weight:700;cursor:help;flex:none}

/* ============================================================
   Estrutura
   ============================================================ */
.corpo{display:grid;grid-template-columns:164px 1fr}
.lateral{background:var(--branco);border-right:var(--borda);padding:10px 8px;
     position:sticky;top:calc(var(--alt-topo) + var(--alt-faixa));
     height:calc(100vh - var(--alt-topo) - var(--alt-faixa));overflow-y:auto}
.lateral a{display:block;padding:6px 10px;border-radius:var(--raio);color:var(--cinza-700);
     text-decoration:none;font-size:12.5px;margin-bottom:1px;cursor:pointer}
.lateral a:hover{background:var(--cinza-100)}
.lateral a.on{background:var(--petroleo-50);color:var(--petroleo-700);font-weight:600}
.lateral a.futuro{opacity:.4;pointer-events:none}
.lateral .grupo{font-size:10px;text-transform:uppercase;letter-spacing:.7px;
     color:var(--cinza-400);padding:12px 10px 4px;font-weight:600}

.principal{padding:12px;display:grid;grid-template-columns:minmax(0,1fr) 284px;
     gap:12px;align-items:start}

/* ============================================================
   Cartões
   ============================================================ */
.cartao{background:var(--branco);border:var(--borda);border-radius:var(--raio);
     box-shadow:var(--sombra)}
/* sem overflow:hidden — ele viraria o contêiner do position:sticky do thead */
.cartao > :first-child{border-radius:5px 5px 0 0}
.cartao > :last-child{border-radius:0 0 5px 5px}
.cartao > header{display:flex;align-items:center;gap:8px;padding:0 10px;height:34px;
     border-bottom:var(--borda);background:var(--cinza-50)}
.cartao > header h2{font-size:11.5px;font-weight:600}
.cartao > header .acoes{margin-left:auto;display:flex;gap:5px;align-items:center}

/* ============================================================
   Botões
   ============================================================ */
.btn{border:var(--borda);background:var(--branco);color:var(--cinza-700);padding:4px 10px;
     border-radius:var(--raio);font-size:12.5px;cursor:pointer;font-family:inherit;
     display:inline-flex;align-items:center;gap:5px;white-space:nowrap;line-height:1.5}
.btn:hover{background:var(--cinza-100)}
.btn:focus-visible{outline:2px solid var(--petroleo-600);outline-offset:1px}
.btn:disabled{opacity:.5;cursor:default}
.btn.primario{background:var(--petroleo-700);border-color:var(--petroleo-700);color:#fff}
.btn.primario:hover{background:var(--petroleo-600)}
.btn.perigo{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
.btn.fantasma{border-color:transparent;background:none;color:var(--cinza-600)}
.btn.fantasma:hover{background:var(--cinza-100)}
.btn.pequeno{padding:3px 8px;font-size:11.5px}
.btn .atalho{font-family:var(--mono);font-size:10px;opacity:.6}

/* ============================================================
   Barra de fluxo (abas + ações, num nível só)
   ============================================================ */
.barra-fluxo{display:flex;align-items:center;gap:2px;padding:0 10px;height:36px;
     border-bottom:var(--borda);background:var(--cinza-50)}
.barra-fluxo .aba{background:none;border:0;border-bottom:2px solid transparent;height:36px;
     padding:0 10px;font-size:12.5px;color:var(--cinza-600);cursor:pointer;font-family:inherit}
.barra-fluxo .aba.on{color:var(--petroleo-700);border-bottom-color:var(--petroleo-700);
     font-weight:600}
.barra-fluxo .aba b{font-weight:400;color:var(--cinza-400);margin-left:3px}
.barra-fluxo .acoes{margin-left:auto;display:flex;gap:5px;align-items:center}
.filtro-ativo{font-size:11.5px;color:var(--petroleo-700);background:var(--petroleo-50);
     border:1px solid var(--petroleo-100);padding:2px 6px;border-radius:10px;cursor:pointer;
     font-family:inherit;margin-left:8px}
.filtro-ativo::after{content:" ✕";opacity:.5}

/* progresso do mês — planejar e depois conferir (5.1) */
.progresso{padding:7px 10px;border-bottom:var(--borda);background:var(--branco)}
.progresso .l{display:flex;justify-content:space-between;font-size:11.5px;
     color:var(--cinza-600);margin-bottom:4px;gap:10px}
.progresso .trilho{height:5px;background:var(--cinza-100);border-radius:3px;overflow:hidden;
     display:flex}
.progresso .trilho i{display:block;height:100%}
.progresso .trilho .feito{background:var(--verde)}
.progresso .trilho .falta{background:var(--ambar)}

/* ============================================================
   Tabela — 28px por linha
   ============================================================ */
table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
@media(max-width:900px){ .rolagem{overflow-x:auto} }
th{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza-500);
   font-weight:600;text-align:left;padding:5px 8px;border-bottom:var(--borda);
   background:var(--branco);position:sticky;
   top:calc(var(--alt-topo) + var(--alt-faixa));z-index:10;white-space:nowrap}
td{padding:0 8px;height:28px;border-bottom:1px solid var(--cinza-100);white-space:nowrap}
tbody tr:hover{background:var(--petroleo-50)}
tbody tr.sel{background:var(--petroleo-50);box-shadow:inset 2px 0 0 var(--petroleo-600)}
.r{text-align:right}.c{text-align:center}

tbody td:first-child{border-left:3px solid transparent}
tr.essencial td:first-child{border-left-color:var(--n-essencial)}
tr.nao_essencial td:first-child{border-left-color:var(--n-nao_essencial)}
tr.investimento td:first-child{border-left-color:var(--n-investimento)}

/* td. e não .desc solto: max-width:0 é o truque que faz o ellipsis
   funcionar em célula de tabela, e vazava para a fila de conciliação,
   onde .desc é um bloco — lá ele zerava a largura e sumia com a
   descrição. Terceira colisão desse tipo (ver .principal e .corpo). */
td.desc{max-width:0;width:40%;overflow:hidden;text-overflow:ellipsis}
td.desc .det{color:var(--cinza-500);font-size:11.5px}
.desc .det::before{content:" · "}
.tipo,.conta{color:var(--cinza-600);font-size:12px}
.pgto{color:var(--cinza-500);font-size:11.5px}

/* pago é consequência do valor realizado (5.2), nunca um checkbox */
.pago{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--verde)}
.pendente{display:inline-block;width:6px;height:6px;border-radius:50%;
     border:1.5px solid var(--cinza-400)}
.vazio{color:var(--cinza-300)}

/* previsto × realizado (5.1) — onde a provisão estourou */
.prov{color:var(--cinza-500)}
.dif{font-size:11px}
.dif.acima{color:var(--vermelho)}
.dif.abaixo{color:var(--verde)}

.acoes-linha{width:52px;opacity:0;display:flex;gap:1px;justify-content:flex-end}
tbody tr:hover .acoes-linha,tbody tr:focus-within .acoes-linha{opacity:1}
.ic{width:20px;height:20px;border:0;background:none;border-radius:4px;cursor:pointer;
    color:var(--cinza-500);font-size:11px;line-height:1}
.ic:hover{background:var(--cinza-200);color:var(--cinza-900)}
.itens{font-size:11px;color:var(--petroleo-700);cursor:pointer;border:0;background:none;
     font-family:inherit;padding:0;text-decoration:underline dotted}

tr.nova td{height:30px;background:var(--cinza-50);color:var(--cinza-500);cursor:text}
tr.nova:hover td{background:var(--petroleo-50)}
tr.nova .campo-inline{border:1px dashed var(--cinza-300);border-radius:4px;padding:2px 6px;
     color:var(--cinza-500);font-size:12.5px;background:var(--branco);display:inline-block}
tfoot td{height:30px;background:var(--cinza-50);font-weight:600;border-top:var(--borda)}

/* linha de detalhe (itens de um lançamento, compras de uma fatura) */
tr.detalhe td{background:var(--cinza-50);height:auto;padding:0;white-space:normal}
.subtabela{padding:6px 10px 8px 34px}
.subtabela .sl{display:flex;gap:10px;font-size:12px;padding:3px 0;
     border-bottom:1px solid var(--cinza-200)}
.subtabela .sl:last-child{border-bottom:0}
.subtabela .sl .d{width:44px;font-family:var(--mono);font-size:11.5px;color:var(--cinza-500)}
.subtabela .sl .n{flex:1}
.subtabela .sl .c{width:110px;color:var(--cinza-600)}
.subtabela .sl .v{width:80px;text-align:right;font-family:var(--mono)}

/* ============================================================
   Painéis laterais
   ============================================================ */
.coluna{display:flex;flex-direction:column;gap:10px;
        position:sticky;top:calc(var(--alt-topo) + var(--alt-faixa) + 12px)}
.lin{display:flex;align-items:center;gap:8px;padding:0 10px;height:26px;font-size:12.5px}
.lin:not(:last-child){border-bottom:1px solid var(--cinza-100)}
.lin .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lin .v{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
     text-align:right;width:66px}
.lin.cab{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--cinza-500);
     font-weight:600;height:20px}
.lin.total{background:var(--cinza-50);font-weight:600;border-top:var(--borda)}
.lin.aviso-faixa{background:var(--ambar-bg);color:var(--ambar);font-size:11.5px}
.lin .filete{width:3px;height:12px;border-radius:2px;flex:none}

.cat{padding:4px 10px}
.cat:not(:last-child){border-bottom:1px solid var(--cinza-100)}
.cat .l1{display:flex;gap:8px;font-size:12.5px;align-items:baseline}
.cat .l1 .nome{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat .l1 .pct{font-size:11px;color:var(--cinza-500)}
.cat .l1 .v{font-family:var(--mono);font-size:12px}
.barra{height:3px;background:var(--cinza-100);border-radius:2px;overflow:hidden;margin-top:3px}
.barra i{display:block;height:100%;background:var(--petroleo-600)}
.ver-mais{display:block;width:100%;border:0;background:var(--cinza-50);
     border-top:1px solid var(--cinza-100);padding:5px;font-size:11.5px;
     color:var(--petroleo-700);cursor:pointer;font-family:inherit}
.ver-mais:hover{background:var(--cinza-100)}

/* ============================================================
   Estados: vazio, carregando, erro
   ============================================================ */
.vazio-bloco{padding:28px 20px;text-align:center;color:var(--cinza-500);font-size:12.5px;
     line-height:1.6}
.vazio-bloco h3{font-size:13px;color:var(--cinza-700);margin-bottom:4px;font-weight:600}
.vazio-bloco .btn{margin-top:10px}

.esqueleto{background:linear-gradient(90deg,var(--cinza-100) 25%,var(--cinza-50) 50%,
     var(--cinza-100) 75%);background-size:200% 100%;animation:brilho 1.2s infinite;
     border-radius:3px;height:11px}
@keyframes brilho{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}}

/* ============================================================
   Formulários
   ============================================================ */
.grade{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.cp{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp.largo{grid-column:1/-1}
.cp > label{font-size:11px;font-weight:600;color:var(--cinza-600)}
.cp > label .opc{font-weight:400;color:var(--cinza-400)}
.cp input,.cp select,.cp textarea{border:var(--borda);border-radius:var(--raio);
     padding:6px 8px;font-size:13px;font-family:inherit;background:var(--branco);
     color:var(--cinza-900);width:100%}
.cp input:focus,.cp select:focus,.cp textarea:focus{outline:0;
     border-color:var(--petroleo-600);box-shadow:0 0 0 2px var(--petroleo-100)}
.cp input.moeda{font-family:var(--mono);text-align:right}
.cp input:disabled,.cp select:disabled{background:var(--cinza-100);color:var(--cinza-600)}
.cp .ajuda{font-size:10.5px;color:var(--cinza-500)}
.cp.erro input,.cp.erro select{border-color:var(--vermelho)}
.cp .msg-erro{font-size:10.5px;color:var(--vermelho)}

.seletor{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.seletor label{border:var(--borda);border-radius:var(--raio);padding:6px;text-align:center;
     font-size:12.5px;cursor:pointer;color:var(--cinza-600);background:var(--branco)}
.seletor label.on{border-color:var(--petroleo-600);background:var(--petroleo-50);
     color:var(--petroleo-700);font-weight:600;box-shadow:inset 0 0 0 1px var(--petroleo-600)}
.seletor input{position:absolute;opacity:0;pointer-events:none}

/* bloco de prosa: display:block, não flex — em flex cada <b> vira um
   item e o texto quebra em pedaços soltos */
.derivado{font-size:12px;color:var(--cinza-600);line-height:1.55;
     background:var(--cinza-50);border:var(--borda);border-radius:var(--raio);padding:7px 9px}
.derivado b{color:var(--cinza-900);font-weight:600}
.derivado .dif{white-space:nowrap;float:right}

/* ============================================================
   Modal
   ============================================================ */
/* margin:auto é o que centraliza um <dialog> aberto com showModal() —
   quem centraliza é a folha do navegador, e o reset `*{margin:0}` da
   linha 34 a apagava. Sem esta linha todo modal nasce no canto superior
   esquerdo, por cima do cabeçalho. */
dialog.modal{border:0;padding:0;border-radius:8px;width:calc(100% - 32px);margin:auto;
     box-shadow:0 12px 32px rgba(27,31,35,.2);color:var(--cinza-900);
     font-family:var(--fonte);font-size:13px;background:var(--branco)}
dialog.modal::backdrop{background:rgba(27,31,35,.4)}
dialog.modal > header{padding:12px 15px;border-bottom:var(--borda);display:flex;
     align-items:center}
dialog.modal > header h2{font-size:13.5px;font-weight:600}
dialog.modal > header .x{margin-left:auto;background:none;border:0;cursor:pointer;
     color:var(--cinza-500);font-size:15px;line-height:1}
dialog.modal > .modal-corpo{padding:14px 15px;max-height:70vh;overflow-y:auto}
dialog.modal > footer{padding:10px 15px;border-top:var(--borda);background:var(--cinza-50);
     display:flex;gap:7px;justify-content:flex-end;align-items:center}
dialog.modal > footer .dica{margin-right:auto;font-size:11px;color:var(--cinza-500);
     font-family:var(--mono)}
.texto-confirma{font-size:13px;line-height:1.6;color:var(--cinza-700)}

/* ============================================================
   Avisos
   ============================================================ */
.toasts{position:fixed;bottom:16px;right:16px;z-index:100;display:flex;
     flex-direction:column;gap:8px;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;background:var(--cinza-900);color:#fff;
     padding:9px 12px;border-radius:var(--raio);font-size:12.5px;
     box-shadow:0 4px 14px rgba(27,31,35,.22);min-width:260px;
     animation:entra .16s ease-out}
.toast.saindo{opacity:0;transform:translateY(4px);transition:.16s}
.toast .txt{flex:1;line-height:1.45}
.toast .acao{background:rgba(255,255,255,.16);border:0;color:#fff;padding:3px 9px;
     border-radius:4px;font-size:11.5px;cursor:pointer;font-family:inherit}
.toast .x{background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;font-size:12px}
.toast.erro{background:var(--vermelho)}
.toast.alerta{background:var(--ambar)}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ============================================================
   Login
   ============================================================ */
.tela-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
     padding:20px;background:var(--cinza-50)}
.caixa-login{background:var(--branco);border:var(--borda);border-radius:8px;
     box-shadow:var(--sombra);padding:24px;width:100%;max-width:340px}
.caixa-login h1{font-size:15px;font-weight:600;margin-bottom:2px}
.caixa-login .sub{font-size:12px;color:var(--cinza-500);margin-bottom:18px}
.caixa-login .grade{grid-template-columns:1fr;gap:11px}
.caixa-login .btn{width:100%;justify-content:center;margin-top:4px}

/* ============================================================
   Responsivo
   ============================================================ */
@media(max-width:1180px){
  .principal{grid-template-columns:1fr}
  .coluna{position:static;display:grid;grid-template-columns:repeat(2,1fr)}
}
@media(max-width:820px){
  .corpo{grid-template-columns:1fr}
  .lateral{display:none}
  .coluna{grid-template-columns:1fr}
  .faixa{overflow-x:auto}
  .kpi{flex:0 0 auto;min-width:120px}
  .topo .chip{display:none}
}

/* ============================================================
   Conciliação (U04)
   ============================================================ */
.conc-topo{display:flex;align-items:center;gap:10px;padding:10px 14px;
     border-bottom:var(--borda);background:var(--cinza-50);flex-wrap:wrap}
.conc-topo .dir{margin-left:auto;display:flex;gap:7px;align-items:center}

.troca-conta{display:flex;align-items:center;gap:7px;background:var(--branco);
     border:var(--borda);border-radius:var(--raio);padding:6px 11px;cursor:pointer;
     font-family:inherit;font-size:13.5px;color:var(--cinza-900)}
.troca-conta:hover{border-color:var(--petroleo-600);background:var(--petroleo-50)}
.troca-conta .rot{font-size:11px;color:var(--cinza-500)}
.troca-conta b{font-weight:600}
.troca-conta .seta{color:var(--cinza-400);font-size:10px}
.troca-conta .badge{background:var(--ambar);color:#fff;font-size:10.5px;font-weight:700;
     min-width:17px;height:17px;border-radius:9px;display:inline-flex;align-items:center;
     justify-content:center;padding:0 5px}
.outras{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--cinza-500);
     flex-wrap:wrap}
.outras span{white-space:nowrap;cursor:pointer}
.outras span:hover{color:var(--petroleo-700)}
.outras b{color:var(--ambar);font-weight:700}
.outras .zero{color:var(--cinza-400)}

.cab-colunas{display:grid;grid-template-columns:270px 1fr;background:var(--cinza-100);
     border-bottom:var(--borda);font-size:10px;text-transform:uppercase;letter-spacing:.6px;
     font-weight:600;color:var(--cinza-500)}
.cab-colunas div{padding:5px 14px}
.cab-colunas div + div{border-left:var(--borda)}

.fila{display:flex;flex-direction:column}
.mov{display:grid;grid-template-columns:270px 1fr;border-bottom:var(--borda)}
.mov:last-child{border-bottom:0}

.crua{padding:11px 14px;border-left:3px solid transparent;background:var(--cinza-50)}
.crua.saida{border-left-color:var(--vermelho)}
.crua.entrada{border-left-color:var(--verde)}
.crua .l1{display:flex;align-items:baseline;gap:8px}
.crua .data{font-family:var(--mono);font-size:11.5px;color:var(--cinza-500)}
.crua .val{margin-left:auto;font-family:var(--mono);font-size:14px;font-weight:600;
     font-variant-numeric:tabular-nums}
.crua.saida .val{color:var(--vermelho)}
.crua.entrada .val{color:var(--verde)}
.crua .desc{font-size:13px;margin-top:4px;word-break:break-word}
.crua .lixo{margin-top:8px}

.classif{padding:9px 14px;border-left:var(--borda);min-width:0}
.classif .abas{display:flex;gap:1px;margin-bottom:9px;border-bottom:var(--borda)}
.classif .abas button{background:none;border:0;border-bottom:2px solid transparent;
     padding:5px 10px;font-size:12px;color:var(--cinza-600);cursor:pointer;font-family:inherit}
.classif .abas button.on{color:var(--petroleo-700);border-bottom-color:var(--petroleo-700);
     font-weight:600}

.natureza-mov{display:flex;gap:6px;margin-bottom:10px;align-items:center;flex-wrap:wrap}
.natureza-mov label{border:var(--borda);border-radius:var(--raio);padding:6px 13px;
     font-size:12.5px;color:var(--cinza-600);cursor:pointer;background:var(--branco);
     white-space:nowrap;flex:none}
.natureza-mov label.on{border-color:var(--petroleo-600);background:var(--petroleo-50);
     color:var(--petroleo-700);font-weight:600;box-shadow:inset 0 0 0 1px var(--petroleo-600)}
.natureza-mov .nota{margin-left:auto;font-size:11px;color:var(--cinza-500);
     max-width:340px;text-align:right;line-height:1.4}

.campos{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:end}
.campos.tres{grid-template-columns:1fr 1fr auto}
.campos .cp > label{font-size:10.5px}
.campos .marca-sug{font-size:9px;text-transform:uppercase;letter-spacing:.5px;
     color:var(--verde);font-weight:700}
.campos .cp.sug select,.campos .cp.sug input{border-color:var(--verde);background:var(--verde-bg)}
.ok{background:var(--petroleo-700);color:#fff;border:0;border-radius:var(--raio);
     padding:7px 18px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
     height:31px}
.ok:hover{background:var(--petroleo-600)}

.sugestao{background:var(--verde-bg);border:1px solid var(--verde-borda);
     border-radius:var(--raio);padding:10px 12px;display:flex;align-items:center;gap:12px}
.sugestao .txt{flex:1;min-width:0}
.sugestao .t1{font-size:12.5px;font-weight:600;color:#1f4a37}
.sugestao .t2{font-size:11.5px;color:#3d6b55;margin-top:2px}

.par-detectado{background:var(--petroleo-50);border:1px solid var(--petroleo-100);
     border-radius:var(--raio);padding:9px 12px;font-size:12px;color:var(--petroleo-900);
     display:flex;align-items:center;gap:10px;margin-bottom:9px}
.par-detectado .txt{flex:1}

/* ---------- importação ---------- */
.conta-alvo{display:flex;align-items:center;gap:8px;background:var(--petroleo-50);
     border:1px solid var(--petroleo-100);border-radius:var(--raio);padding:8px 11px;
     margin-bottom:14px;font-size:12.5px}
.mapa{border:var(--borda);border-radius:var(--raio);overflow:hidden}
.mapa table{min-width:auto}
.mapa th{position:static;background:var(--petroleo-700)}
.mapa th + th{border-left:1px solid rgba(255,255,255,.2)}
.mapa td{padding:6px 10px;font-size:12.5px}
.aviso-sinal{margin-top:11px;background:var(--ambar-bg);border:1px solid var(--ambar-borda);
     border-radius:var(--raio);padding:9px 11px;font-size:11.5px;color:var(--ambar);
     line-height:1.55}
.aviso-sinal b{color:#6b4d0a}

/* ============================================================
   Botão Lançamento — três modos
   ============================================================ */
.modos{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:15px}
.modos label{border:var(--borda);border-radius:var(--raio);padding:9px 10px;cursor:pointer;
     background:var(--branco)}
.modos label.on{border-color:var(--petroleo-600);background:var(--petroleo-50);
     box-shadow:inset 0 0 0 1px var(--petroleo-600)}
.modos .t{font-size:12.5px;font-weight:600;color:var(--cinza-700)}
.modos label.on .t{color:var(--petroleo-700)}
.modos .d{font-size:10.5px;color:var(--cinza-500);margin-top:2px;line-height:1.35}

.continuidade{display:flex;gap:6px;margin-bottom:12px}
.continuidade label{flex:1;border:var(--borda);border-radius:var(--raio);padding:7px 10px;
     cursor:pointer;background:var(--branco);font-size:12.5px;color:var(--cinza-600)}
.continuidade label.on{border-color:var(--petroleo-600);background:var(--petroleo-50);
     color:var(--petroleo-700);font-weight:600;box-shadow:inset 0 0 0 1px var(--petroleo-600)}
.continuidade label small{display:block;font-weight:400;color:var(--cinza-500);
     font-size:10.5px;margin-top:1px}

.destino{display:flex;align-items:center;gap:10px;background:var(--verde-bg);
     border:1px solid var(--verde-borda);border-radius:var(--raio);padding:10px 12px}
.destino .txt{flex:1;font-size:12.5px;color:#1f4a37;line-height:1.5}
.destino .tot{font-family:var(--mono);font-size:15px;font-weight:600;color:#1f4a37}

/* ============================================================
   Cartões e faturas
   ============================================================ */
.cartoes-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.fatura-cab{display:flex;align-items:baseline;gap:8px;padding:9px 12px;
     border-bottom:var(--borda)}
.fatura-cab .nome{font-weight:600;font-size:13px}
.fatura-cab .venc{font-size:11.5px;color:var(--cinza-500)}
.fatura-cab .tot{margin-left:auto;font-family:var(--mono);font-size:15px;font-weight:600}
.limite{padding:7px 12px;border-bottom:var(--borda)}
.limite .l{display:flex;justify-content:space-between;font-size:11px;
     color:var(--cinza-500);margin-bottom:4px}
.limite .trilho{height:4px;background:var(--cinza-100);border-radius:2px;overflow:hidden}
.limite .trilho i{display:block;height:100%;background:var(--petroleo-600)}
.limite .trilho i.alto{background:var(--ambar)}
.limite .trilho i.estourado{background:var(--vermelho)}

@media(max-width:820px){
  .mov{grid-template-columns:1fr}
  .cab-colunas{display:none}
  .classif{border-left:0;border-top:var(--borda)}
  .campos{grid-template-columns:1fr}
  .natureza-mov .nota{display:none}
  .modos{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   Aplicações — saldo digitável e rendimento derivado
   ------------------------------------------------------------ */
/* O campo de saldo mora dentro da célula e não parece um formulário:
   é a tabela que se edita, não um modal por cima dela. A borda só
   aparece no foco, senão nove campos viram nove caixas gritando. */
input.saldo-aplic{width:100%;text-align:right;font-family:var(--mono);font-size:12.5px;
     padding:3px 6px;border:1px solid transparent;border-radius:4px;background:none;
     color:var(--cinza-900)}
input.saldo-aplic::placeholder{color:var(--cinza-400);font-family:var(--fonte);
     font-size:11.5px;font-style:italic}
input.saldo-aplic:hover{border-color:var(--cinza-200)}
input.saldo-aplic:focus{border-color:var(--petroleo-600);background:var(--branco);
     outline:none;box-shadow:0 0 0 2px var(--petroleo-50)}
input.saldo-aplic:disabled{opacity:.5}

/* Verde e vermelho aqui querem dizer ganhou e perdeu — o oposto do
   resto do sistema, onde vermelho é saída. Por isso as classes têm
   nome próprio em vez de reusar .dif. */
td .det{display:block;font-size:10.5px;color:var(--cinza-500);font-weight:400}
.ganho{color:var(--verde)}
.perda{color:var(--vermelho)}
.sec{color:var(--cinza-400)}
tr.soma td{background:var(--cinza-50);border-top:1px solid var(--cinza-200)}
.chip-aviso{font-size:11px;color:var(--ambar);background:var(--ambar-bg);
     border:1px solid var(--ambar-borda);border-radius:99px;padding:2px 9px}