/* t79: Conciliação bancária.
   Só tokens que existem em style.css: --accent, --accent-soft, --accent-ink,
   --ink, --muted, --line, --paper, --surface, --green, --radius.
   Token inexistente em var() vira currentColor e a borda sai preta sem que a
   captura denuncie. */

.cb-tela{display:flex;flex-direction:column;gap:16px;min-block-size:0;min-inline-size:0}

.cb-filtros{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr) auto;
 gap:12px;align-items:end;padding:16px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.cb-filtros label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-inline-size:0}
.cb-filtros select,.cb-filtros input{inline-size:100%;min-inline-size:0}
.cb-filtros .primary{white-space:nowrap}

.cb-cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cb-cartao{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--radius);min-inline-size:0}
.cb-cartao-icone{display:grid;place-items:center;inline-size:38px;block-size:38px;flex:0 0 auto;
 border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font-size:17px}
.cb-cartao-titulo{margin:0;font-size:12px;color:var(--muted)}
.cb-cartao-valor{margin:2px 0 0;font-size:1.5rem;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.cb-cartao-base{margin:2px 0 0;font-size:11px;color:var(--muted);overflow-wrap:anywhere}

.cb-abas{display:flex;gap:4px;border-block-end:1px solid var(--line)}
.cb-abas button{border:0;background:none;padding:10px 14px;font-size:14px;color:var(--muted);cursor:pointer;
 border-block-end:2px solid transparent}
.cb-abas button[aria-selected="true"]{color:var(--accent-ink);border-block-end-color:var(--accent);font-weight:600}

/* ⚠️ flex:1 1 0, não 1 1 auto: com base no CONTEÚDO a região não encolhe e a
   página inteira cresce. */
.cb-area{display:flex;gap:16px;align-items:stretch;min-block-size:0;min-inline-size:0}
.cb-lista{flex:1 1 0;min-inline-size:0;min-block-size:0;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column}

/* ⚠️ O transbordo morre AQUI, não na página: tabela larga rola dentro do
   próprio quadro. Sem isto a tabela empurra o documento em 390px. */
/* ⚠️ NÃO usar flex:1 1 0 aqui. O shell do app rola o documento inteiro, então
   .cb-area e .cb-lista têm altura AUTO: com base 0 e nada para distribuir,
   a tabela colapsa para zero e a tela mostra a paginação sem as linhas.
   Com altura natural limitada por max-block-size, o corpo cresce até o teto e
   só então rola, que é o comportamento pedido. */
.cb-corpo{min-block-size:0;max-block-size:min(58vh,560px);overflow:auto;
 overflow-x:auto;min-inline-size:0;contain:layout paint;position:relative}
.cb-tabela{inline-size:100%;border-collapse:collapse;font-size:13px}
.cb-tabela thead th{position:sticky;inset-block-start:0;background:var(--surface);z-index:1;
 text-align:start;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.3px;
 color:var(--muted);border-block-end:1px solid var(--line);white-space:nowrap}
.cb-tabela td,.cb-tabela tbody th{text-align:start;padding:10px 12px;border-block-end:1px solid var(--line);
 vertical-align:top;font-weight:400}
.cb-tabela tbody tr.cb-selecionada{background:var(--accent-soft)}
.cb-nome{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--ink);
 cursor:pointer;text-align:start;overflow-wrap:anywhere}
.cb-nome:hover{color:var(--accent-ink)}
.cb-motivo{display:block;font-size:11px;color:var(--muted);margin-block-start:2px;
 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.cb-motivo-celula{margin:0;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.cb-etapa{display:inline-block;padding:3px 8px;border-radius:999px;background:var(--paper);
 border:1px solid var(--line);font-size:11px;white-space:nowrap}
.cb-versao{white-space:nowrap;font-variant-numeric:tabular-nums}
.cb-autor{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cb-avatar{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:999px;
 background:var(--accent-soft);color:var(--accent-ink);font-size:10px;font-weight:700;flex:0 0 auto}

.cb-selo{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.cb-selo-ativo{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.cb-selo-publicado{background:var(--accent-soft);color:var(--accent-ink)}
.cb-selo-arquivado{background:var(--paper);color:var(--muted);border:1px dashed var(--line)}
.cb-selo-atencao{background:var(--accent);color:#fff}

.cb-vazio{padding:40px 20px;text-align:center}
.cb-vazio p{margin:0 0 6px}

/* Painel acoplado no desktop amplo; virou gaveta abaixo de 1280px. */
.cb-painel{flex:0 0 380px;min-inline-size:0;background:var(--surface);border:1px solid var(--line);
 border-radius:var(--radius);padding:16px 18px;overflow:auto;max-block-size:min(72vh,720px)}
.cb-tela.cb-com-gaveta .cb-painel{position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(420px,100vw);
 max-block-size:none;border-radius:0;z-index:40;box-shadow:-8px 0 24px rgba(0,0,0,.12)}
/* ⚠️ O topo do painel é um <header>, e o style.css global dá a todo header
   altura fixa (76px, 48px no celular) e 42px de recuo lateral. Com título,
   valor e data, o conteúdo passava da altura e a data caía em cima do
   "Identificador no arquivo". */
.cb-painel .cb-painel-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
 block-size:auto;padding:0 0 10px;background:none}
.cb-painel-topo h2{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.cb-fechar{border:0;background:none;font-size:16px;cursor:pointer;color:var(--muted);padding:2px 6px}
.cb-painel-abas{display:flex;gap:4px;margin:12px 0;border-block-end:1px solid var(--line)}
.cb-painel-abas button{border:0;background:none;padding:8px 10px;font-size:13px;color:var(--muted);
 cursor:pointer;border-block-end:2px solid transparent}
.cb-painel-abas button[aria-selected="true"]{color:var(--accent-ink);border-block-end-color:var(--accent);font-weight:600}
.cb-campos{margin:0;display:flex;flex-direction:column;gap:10px}
.cb-campo{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:8px;align-items:baseline}
.cb-campo dt{font-size:12px;color:var(--muted)}
.cb-campo dd{margin:0;font-size:13px;overflow-wrap:anywhere}
.cb-observacao{margin-block-start:14px;padding:10px 12px;background:var(--paper);
 border:1px solid var(--line);border-radius:10px}
.cb-observacao-titulo{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.cb-observacao p{margin:0;font-size:13px;overflow-wrap:anywhere}
.cb-aviso{margin:12px 0 0;font-size:11px;color:var(--muted);line-height:1.5}
.cb-aviso-rodape{margin:0;padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}
.cb-acoes{display:flex;flex-direction:column;gap:8px;margin-block-start:14px}
.cb-acao-principal{display:block;text-align:center;padding:9px 14px;border-radius:10px;
 background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px}
.cb-acao-arquivar{color:var(--accent-ink)}
.cb-historico{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cb-historico li{padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:12px}
.cb-historico p{margin:4px 0 0}
.cb-erro{color:var(--accent-ink);font-size:13px;margin:8px 0 0}

.cb-modal-fundo{position:fixed;inset:0;background:rgba(17,17,17,.45);display:grid;place-items:center;
 padding:16px;z-index:60;overflow:auto}
.cb-modal{background:var(--surface);border-radius:var(--radius);inline-size:min(680px,100%);
 max-block-size:92vh;overflow:auto;padding:20px 24px}
.cb-modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-block-end:12px}
.cb-modal header h2{margin:0;font-size:1.15rem}
.cb-modal form{display:flex;flex-direction:column;gap:12px}
.cb-modal label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.cb-modal input,.cb-modal select,.cb-modal textarea{inline-size:100%;min-inline-size:0;font-size:14px;color:var(--ink)}
.cb-modal-acoes{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

@media (max-width:1279px){
 /* ⚠️ Ao virar COLUNA, o flex:1 1 0 da lista deixa de valer na largura e passa
    a valer na ALTURA: base 0 sem nada para distribuir colapsa a tabela inteira,
    e sobra só a paginação na tela. O eixo muda, o valor precisa mudar junto. */
 .cb-area{flex-direction:column}
 .cb-lista{flex:0 1 auto}
 .cb-corpo{max-block-size:none}
}
@media (max-width:900px){
 .cb-filtros{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .cb-filtros .primary{grid-column:1/-1}
}
@media (max-width:640px){
 .cb-filtros{grid-template-columns:minmax(0,1fr)}
 .cb-cartoes{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .cb-tabela{font-size:12px}
 .cb-tabela td,.cb-tabela tbody th,.cb-tabela thead th{padding:8px}
 /* ⚠️ t87, medido em 390px: a tabela pedia 131px a mais do que a tela tem, e
    a pessoa precisava arrastar de lado para ver o valor. Em celular ela vira
    lista: cada linha é um bloco e cada célula leva o rótulo da coluna, que é
    o mesmo padrão já usado em Despesas. Nenhuma coluna sai. */
 .cb-tabela thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
 .cb-tabela,.cb-tabela tbody,.cb-tabela tr,.cb-tabela td,.cb-tabela tbody th{display:block;inline-size:100%;box-sizing:border-box}
 .cb-tabela tr{border-block-end:1px solid var(--line);padding:10px 12px}
 .cb-tabela tr:last-child{border-block-end:0}
 .cb-tabela td,.cb-tabela tbody th{border:0;padding:2px 0;text-align:start}
 .cb-tabela td::before{content:attr(data-rotulo) ": ";color:var(--muted);font-size:11px}
 .cb-tela.cb-com-gaveta .cb-painel{inline-size:100vw}
 .cb-campo{grid-template-columns:minmax(0,1fr)}
 .cb-modal{padding:16px}
}

/* ── próprio da t79 ──────────────────────────────────────────────────── */
.cb-numero{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-entrada{color:var(--green);font-weight:600}
.cb-saida{color:var(--accent-ink);font-weight:600}
.cb-sub{display:block;font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.cb-nao-calculavel{font-style:italic;color:var(--muted);font-size:1rem}
.cb-valor-grande{margin:4px 0;font-size:1.5rem;font-weight:700}
.cb-selo-conciliado{background:var(--green);color:#fff}
.cb-selo-pendente{background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.cb-selo-divergencia{background:var(--accent);color:#fff}
.cb-selo-ignorado{background:var(--paper);color:var(--muted);border:1px dashed var(--line)}
.cb-alerta{margin:0 0 10px;padding:10px 14px;background:var(--accent-soft);color:var(--accent-ink);border-radius:10px;font-size:13px}
.cb-candidatos{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.cb-candidatos li{padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:10px;font-size:12px}
.cb-candidatos li.cb-exato{border-color:var(--accent);background:var(--accent-soft)}
.cb-candidato-valor{font-variant-numeric:tabular-nums;font-weight:700;margin-block-start:4px}
.cb-criterios{list-style:none;margin:6px 0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.cb-criterios li{padding:2px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:11px}
.cb-criterio-valor-igual,.cb-criterio-data-igual{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-soft)}
.cb-acoes{display:flex;gap:8px;flex-wrap:wrap;margin-block-start:10px}
.cb-acoes button{flex:1 1 auto}
.cb-resumo-previa{display:flex;gap:16px;flex-wrap:wrap;padding:12px 14px;background:var(--accent-soft);
 border-radius:10px;margin-block-end:12px;font-size:13px}
.cb-motivo{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
.cb-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.cb-ignoradas{margin:10px 0;font-size:12px}
.cb-ignoradas ul{margin:6px 0 0;padding-inline-start:18px}
.cb-modal-larga{inline-size:min(1000px,100%)}
.cb-modal label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-block-end:10px}
.cb-modal select,.cb-modal input{inline-size:100%;min-inline-size:0}
@media (max-width:900px){.cb-resumo-previa{flex-direction:column;gap:6px}}
/* Parecer do Codex (tela banking): parcial, recorte, vínculos, conta nova e prévia paginada. */
.cb-selo-parcial{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent)}
.cb-recorte{margin:0 0 10px;font-size:12px;color:var(--muted)}
.cb-vinculos{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.cb-vinculos li{padding:10px 12px;background:var(--surface);border:1px solid var(--green);border-radius:10px;font-size:12px;min-width:0;overflow-wrap:anywhere}
.cb-vinculos button{margin-block-start:8px}
.cb-nova-conta{max-inline-size:640px}
.cb-nova-conta label{display:flex;flex-direction:column;gap:4px}
.cb-sem-conta .cb-modal-acoes{justify-content:flex-start}
.cb-previa-paginas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.cb-previa-paginas p{margin:0}
.cb-previa-paginas div{display:flex;gap:8px}
.cb-modal .checkbox{flex-direction:row;align-items:center;gap:8px}
.cb-modal .checkbox input{inline-size:16px}

/* Achado 12: janela e busca dos candidatos, no próprio painel. Duas colunas
   no desktop; em painel estreito (gaveta de 390px) a busca desce. */
.cb-cand-filtros{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:8px;margin-block-end:10px}
.cb-cand-filtros label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-inline-size:0}
.cb-cand-filtros select,.cb-cand-filtros input{inline-size:100%;min-inline-size:0;min-block-size:40px}
.cb-cand-paginas{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;color:var(--muted)}
.cb-cand-paginas button{min-block-size:40px}
.cb-cand-total{margin:0 0 10px;font-size:12px}
/* Achado 9: duplicata antiga marcada pela migração 098, nunca apagada. */
.cb-selo-dup{margin-block-start:4px}
.cb-alerta-dup{margin:10px 0;padding:10px 12px;background:var(--accent-soft);color:var(--accent-ink);border-radius:10px;font-size:12px}
@media (max-width:360px){.cb-cand-filtros{grid-template-columns:minmax(0,1fr)}}
/* 23/09: a regra global `header{height:76px;padding:0 42px}` (style.css) é do topo
   do app e vazava para este cabeçalho interno, sobrepondo o conteúdo em 390 px. */
.cb-modal header{height:auto;min-height:0;padding:0;border:0;background:none}