/* ===========================================================================
   MÓDULO FINANCEIRO — Financeiro — cobrança e conta corrente
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

/* Cobrança — a vista Conexão (CB7 de COBRANCA_ETAPA2.md; corpo transcrito do mockup aprovado).
   A faixa do ambiente é o tom mais forte da tela de propósito: boleto de teste não se confunde
   com dinheiro de verdade, e em produção ela vira verde pelo mesmo texto-base. */
.cb-grade { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }

@media (max-width: 980px) { .cb-grade { grid-template-columns: minmax(0, 1fr); } }

.cb-coluna { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.cb-cartao { padding: 1rem; }

.cb-cartao-titulo, .cb-secao-titulo { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.95rem; }

.cb-secao-titulo { margin-top: 1.5rem; }

.cb-linha { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; }

.cb-linha > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.cb-celula-titulo { font-weight: 500; }

.cb-celula-sub { font-size: 0.75rem; color: var(--muted-foreground); }

.cb-dir { text-align: right; }

.cb-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.cb-status { margin-top: 0.75rem; }

.cb-num { font-variant-numeric: tabular-nums; }

/* ── CC3 — Contas correntes (Financeiro; docs/specs/CONTA_CORRENTE_LOOP.md). Espelha o vocabulário
   visual do bloco cb-* acima: nada aqui decide nada, só pinta. Nenhuma destas classes declara
   `display` num elemento que o HTML esconde por atributo (o portão `hidden-vence-display`). */
.cc-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.cc-filtro { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted-foreground); }

.cc-entre { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

.cc-celula-titulo { font-weight: 500; }

.cc-celula-sub { font-size: 0.75rem; color: var(--muted-foreground); }

.cc-dir { text-align: right; }

.cc-centro { text-align: center; }

.cc-num { font-variant-numeric: tabular-nums; }

.cc-cartao { padding: 1rem; margin-bottom: 0.9rem; }

.cc-cartao-titulo { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.95rem; }

.cc-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

/* CP6 (item 56) — o bloco "Numeração dos boletos" do modal da carteira (mockup
   `cobranca-producao-mockup.html`, tela 1). Nenhuma classe aqui declara `display` num elemento
   que o HTML esconde por atributo (o portão `hidden-vence-display`). */
.cc-numeracao { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; margin-top: 0.9rem; }

.cc-numeracao-titulo { margin: 0 0 0.6rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; }

.cc-numeracao-proximo { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.15rem; font-size: 0.8rem; }

.cc-numeracao-proximo b { font-size: 1.1rem; }

.cc-numeracao-acoes { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }

.cc-numeracao .zr-alert { margin-top: 0.6rem; }

/* ── PC3 — Plano de contas e centros de custo (Financeiro; docs/specs/CONTA_CORRENTE_LOOP.md).
   A árvore: a hierarquia está na MÁSCARA (lista plana ordenada que o servidor devolve) — o recuo
   daqui é só VISUAL e o `aria-level` da linha é o que o leitor de tela lê. O recuo sai da
   variável `--n` (o nível menos um), como no mockup aprovado. Nenhuma destas classes declara
   `display` num elemento que o HTML esconde por atributo (o portão `hidden-vence-display`). */
.arv-barra { align-items: flex-end; }

.arv-inativas { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; padding-bottom: 0.4rem; }

.arv-rolagem { position: relative; }

.arv-tabela td { vertical-align: middle; }

.arv-tabela th:nth-child(2) { min-width: 21rem; }

.arv-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8rem; white-space: nowrap; }

.arv-no b { font-weight: 700; }

.arv-caret--vazio { display: inline-block; width: 1.6rem; flex: none; }

.arv-fraco { color: var(--muted-foreground); }

.arv-dir { text-align: right; white-space: nowrap; }

/* PC5 — "Movimento por conta financeira" (tela 5 do PC-M1 v2): a barra do filtro, as legendas e
   as quatro tabelas em árvore (o recuo e o recolher reusam os idiomas da `.arv-*` acima). */
.mp-barra { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; padding: 0 1rem 0.75rem; }

.mp-campo { display: flex; flex-direction: column; gap: 0.25rem; }

.mp-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; padding-bottom: 0.55rem; }

.mp-visao { display: flex; gap: 0.75rem; align-items: center; border: 0; padding: 0 0 0.4rem; margin: 0; }

.mp-visao .mp-check { padding-bottom: 0; }

.mp-filtrar { margin-bottom: 0.55rem; }

.mp-legenda { padding: 0 1rem 0.4rem; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }

.mp-legenda:first-of-type { margin-top: 0; }

.mp-tabela td { vertical-align: middle; }

.rp-kpis { margin-bottom: 0.75rem; }

.rp-barra-texto { margin: 0 0 0.35rem; }

.rp-barra { height: 0.5rem; background: var(--muted); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; }

.rp-barra-preenchida { height: 100%; background: var(--foreground); }

.rp-filtros { align-items: flex-end; gap: 0.5rem 1rem; padding: 0 0 0.75rem; }

.rp-busca { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 220px; min-width: 0; }

.rp-rolagem { position: relative; margin-top: 0.5rem; }

.rp-tabela td { vertical-align: top; }

.rp-tabela th:nth-child(2) { min-width: 16rem; }

.rp-antes-depois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 0.75rem 0; }

.rp-antes-depois > div { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; font-size: 0.85rem; min-width: 0; }

.rp-antes-depois > div > b:first-child { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); margin-bottom: 0.25rem; }

.rp-antes-depois .rp-depois { background: var(--sidebar); }

@media (max-width: 560px) { .rp-antes-depois { grid-template-columns: minmax(0, 1fr); } }

.arv-radio { border: 0; padding: 0; margin: 0; display: flex; gap: 0.25rem 1rem; flex-wrap: wrap; align-items: center; }

.arv-radio legend { padding: 0; width: 100%; }

.arv-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }

.arv-rodape-esquerda { margin-right: auto; }

.arv-acoes-erro { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

.cr-cel-valor { width: 8rem; text-align: right; }

.cr-classificar-add { margin-top: 0.5rem; }

.cr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }

/* O ícone do boleto (D6): preto; vermelho SÓ com o boleto baixado no banco; em aberto é botão. */
.cr-ico-boleto { display: inline-flex; align-items: center; gap: 0.15rem; margin-left: 0.4rem; font-size: 1.05rem; vertical-align: -0.15em; color: var(--foreground); }

/* Item 62 (D-CP2): a regra do vermelho mora AQUI, logo depois da base — no `styles.css` ela era
   lida ANTES desta folha e, com o mesmo peso, o preto da base vencia (o boleto baixado saía preto). */
.cr-ico-boleto--baixado { color: var(--error-strong); }

/* Item 58 (D14): o boleto que FALHOU ganha o aviso vermelho ao lado do barcode, que segue preto. */
.cr-ico-boleto .cr-ico-falhou { color: var(--error-strong); font-size: 0.95em; }

.cr-ico-boleto--botao { border: 0; background: none; padding: 0.15rem; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 1.05rem; color: var(--foreground); }

.cr-ico-boleto--botao:hover { background: var(--muted); }

.cr-ico-boleto--botao:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

.cr-ico-prev { display: inline-flex; color: var(--foreground); font-size: 1rem; cursor: help; }

/* CR5 (D9) — as cinco ações do cartão "Boleto" quebram em linhas: sem o wrap, a fileira vaza a
   coluna do detalhe e a coluna da direita passa a cobrir os botões (o clique não chega). */
.cr-boleto-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* A lista sem rolagem (D17): quem decide é a largura da ÁREA da lista, não da janela. */
.cr-lista-titulos { container-type: inline-size; border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* A barra de seleção ganhou o "Imprimir boletos (N)" (D7); a ajuda ocupa a linha inteira. */
.cr-barra-selecao { margin-top: 0.6rem; }

.cr-barra-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.cr-barra-ajuda { flex-basis: 100%; margin: 0; }

/* 🆕 TA7 (F47) — "Novo título" (o título avulso; mockup titulo-avulso-mockup.html, tela 2): as
   seções à esquerda e o quadro do total à direita; em tela estreita, uma coluna só, o total no fim. */
.ta-grade { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1rem; align-items: start; margin-top: 0.8rem; }
@media (max-width: 900px) { .ta-grade { grid-template-columns: minmax(0, 1fr); } }
.ta-secao { padding: 0.9rem 1rem; margin-bottom: 0.8rem; min-width: 0; }
.ta-secao h4 { margin: 0 0 0.6rem; font-size: 0.95rem; }
.ta-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem 1rem; }
.ta-busca { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.ta-busca .zr-input { flex: 1 1 auto; min-width: 0; }
.ta-parcelas { margin-top: 0.8rem; overflow-x: auto; font-size: 0.85rem; color: var(--muted-foreground); }
.ta-dir { text-align: right; font-variant-numeric: tabular-nums; }
.ta-opcoes { display: grid; gap: 0.5rem; }
.ta-opcao { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.ta-opcao input { margin: 0.2rem 0 0; }
.ta-opcao .zr-help { display: block; margin: 0.1rem 0 0; }
.ta-opcao:has(input:checked) { border-color: var(--primary); }
.ta-opcao:has(input:disabled) { background: var(--muted); cursor: not-allowed; }
.ta-lateral { padding: 1rem; position: sticky; top: 0.5rem; display: grid; gap: 0.5rem; }
.ta-lateral .zr-btn { width: 100%; justify-content: center; }
.ta-total { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 🆕 TP7 (CP6 do contas-pagar-mockup.html): o seletor A receber / A pagar do título avulso — a
   mesma pílula do mockup (`.seg`): o modo atual leva o fundo da ação e o `aria-pressed` diz o
   mesmo ao leitor de tela. É um ALTERNADOR, não uma ação: por isso não é `.zr-btn`. */
.ta-modos { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.ta-modos button { border: 0; background: var(--background); padding: 0.32rem 0.85rem; font: inherit; font-size: 0.83rem; cursor: pointer; color: var(--foreground); }
.ta-modos button + button { border-left: 1px solid var(--border); }
.ta-modos button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.ta-modos button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring) inset; }

/* 🆕 F48 (avisos-sem-boleto-sino-mockup.html, aprovado em 22/10/2026): o sino dos avisos do banco SEM boleto no
   cabeçalho de Contas a receber. O sino em si (.sino, .sino-badge, .sino-dropdown, .sino-item…) é o
   compartilhado de sdk-ui/components.css; aqui só o que é desta lista. */
.cr-aviso .sino-item-linha1 { flex-wrap: wrap; }
.cr-aviso .sino-item-linha2 { overflow-wrap: anywhere; white-space: normal; }
.cr-aviso-cliente { font-weight: 500; overflow-wrap: anywhere; }
.cr-aviso-origem { font-weight: 400; color: var(--muted-foreground); font-size: 0.72rem; }
.cr-aviso-acao { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; flex-wrap: wrap; }
.cr-aviso-casou { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--success-strong); font-size: 0.75rem; }
.cr-aviso-espera { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); font-size: 0.75rem; }
.cr-aviso-conta { font-weight: 400; color: var(--muted-foreground); }
.cr-aviso-status { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--success-bg-soft); color: var(--success-strong); font-size: 0.78rem; }
.cr-aviso-status[role="alert"] { background: var(--error-bg-soft); color: var(--error-strong); }

/* S3 do mockup, no celular: a lista ocupa a largura da tela, com 16 px de margem, sem rolagem lateral. */
@media (max-width: 480px) {
  #cr-sino .sino-dropdown { position: fixed; top: 4rem; left: 1rem; right: 1rem; width: auto; }
}

/* ═══ G65 (item 65) — "Gerar boletos (N)": a confirmação, o andamento e o resultado ══════════
   Mockup `gerar-boletos-lote-mockup.html` (aprovado pelo Eder em 22/10/2026, G1–G7). O quadro do
   lote é uma tabela de modal como as outras; as cores dos desfechos usam os tokens do produto
   (verde de sucesso, vermelho de erro, âmbar de atenção) — nunca cor escrita à mão. */
.cr-tabela-rolagem { overflow-x: auto; }
.cr-gerar-tabela { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cr-gerar-tabela th {
  text-align: left;
  font-weight: 500;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.cr-gerar-tabela td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.cr-gerar-tabela tbody tr:last-child td { border-bottom: 0; }
.cr-gerar-selos { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cr-selo-ok { background: var(--success-bg-soft); color: var(--success-strong); }
.cr-selo-erro { background: var(--error-bg-soft); color: var(--error-strong); }
.cr-selo-atencao { background: var(--warning-bg-soft); color: var(--warning-strong); }
.cr-estado { display: inline-flex; align-items: center; gap: 0.35rem; }
.cr-estado--ok { color: var(--success-strong); }
.cr-estado--erro { color: var(--error-strong); }
.cr-estado--atencao { color: var(--warning-strong); }
.cr-estado--espera { color: var(--muted-foreground); }

/* ── Item 69: o assistente de cópia de título (mockup copia-titulo-mockup.html) ──────────────
   A grade é larga (10 colunas, as do Vexta) e rola DENTRO de si (`.os-rolagem` do modal), nunca
   empurrando a página. A C/C mostra só a conta corrente herdada — ver o cabeçalho do
   `modal-copia.js`. */
.cr-copia-modal { max-width: 1080px; }
.cr-copia-linha { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* 🆕 VM10 (itens 92 e 93; Eder, 28/10/2026: *"posicionando os 3 campos numa linha"*): o 1º passo da
   CÓPIA e da RENEGOCIAÇÃO põe o número de cópias/parcelas e a periodicidade ("a cada", o número e
   a unidade) na MESMA linha. 🔴 Modificador só do 1º passo — o `.os-grade` é usado em 11 arquivos
   e não muda. Vale acima do ponto de quebra dele (600 px, o `@media` do `styles.css`); abaixo, a
   grade já empilha tudo, como as outras grades do projeto. O 1º campo pede ~10 rem, o número da
   periodicidade ~6 rem e o seletor fica com o resto (o `.zr-input`/`.zr-select` nascem `width:
   100%` — por isso as larguras são declaradas aqui). */
@media (min-width: 601px) {
  .os-grade--passo1 { grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr); }
  .os-grade--passo1 .cr-copia-linha { flex-wrap: nowrap; }
  .os-grade--passo1 .cr-copia-linha .zr-input { flex: 0 0 6rem; width: 6rem; min-width: 0; }
  .os-grade--passo1 .cr-copia-linha .zr-select { flex: 1 1 0; width: auto; min-width: 0; }
}
.cr-copia-regras { display: grid; gap: 0.15rem; }
.cr-copia-regra,
.cr-copia-opcao { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.85rem; margin: 0.25rem 0; }
.cr-copia-regra .zr-help,
.cr-copia-opcao .zr-help { display: block; margin: 0; }
.cr-copia-pessoa {
  display: flex; gap: 0.5rem; align-items: center; padding: 0.5rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); font-size: 0.85rem;
}
.cr-copia-nao-muda { margin-left: auto; }
.cr-copia-controles { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cr-copia-grade { min-width: 64rem; }
.cr-copia-grade th { white-space: nowrap; }
.cr-copia-grade td { padding: 0.35rem 0.4rem; vertical-align: middle; }
.cr-copia-grade .zr-input { height: 2rem; font-size: 0.8rem; padding: 0 0.45rem; }
.cr-copia-sel { width: 2rem; }
.cr-copia-doc { width: 6rem; }
.cr-copia-parc { width: 4rem; }
.cr-copia-data { width: 9.5rem; }
.cr-copia-valor { width: 7rem; text-align: right; }

/* ── RN7 (item 71): as DUAS posições derivadas da renegociação ────────────────────────────────
   As cores do mockup aprovado (`renegociacao-mockup.html` §4): fundo azul-claro (a família --info)
   nas duas, e a "Substituído c/ bx parcial" com a borda TRACEJADA âmbar — ela é a que tinha
   recebimento antes de ser renegociada. A posição é derivada no SERVIDOR (D-CR5); a tela pinta. */
.zr-badge.pos-subst {
  background: var(--info-bg-soft);
  color: var(--info-strong);
  border-color: color-mix(in oklch, var(--info-strong) 30%, transparent);
}
.zr-badge.pos-subst-parcial {
  background: var(--info-bg-soft);
  color: var(--info-strong);
  border-color: color-mix(in oklch, var(--warning-strong) 45%, transparent);
  border-style: dashed;
}

/* ── Item 71: o assistente de RENEGOCIAÇÃO e o QUADRO (mockup renegociacao-mockup.html) ──────────
   O assistente reusa a grade e a pessoa da cópia (mesmo desenho aprovado); o que entra novo é a
   tabela dos originais (as taxas editáveis por título), o quadro de "soma × total" e o quadro da
   renegociação (origem, destino, cadeia e desfazer). Nenhuma regra aqui declara `display` num
   elemento escondido por atributo (a armadilha do `[hidden]`, ver `HELPDESK.md`). */
.cr-reneg-controles { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0.6rem 0; }
.cr-reneg-data { width: 10rem; }
.cr-reneg-taxa { width: 5.5rem; text-align: right; }
.cr-reneg-originais-tabela { min-width: 52rem; }
.cr-reneg-consistir { font-size: 0.9rem; }
.cr-reneg-totais {
  display: flex; gap: 0.5rem 1.5rem; flex-wrap: wrap; align-items: baseline;
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md);
  margin: 0.7rem 0; font-size: 0.85rem;
}
.cr-reneg-totais b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.cr-dif-ok { color: var(--success-strong); }
.cr-dif-erro { color: var(--error-strong); }
.cr-reneg-motivo-rotulo { margin-top: 0.8rem; }
.cr-reneg-motivo { min-height: 4rem; width: 100%; resize: vertical; }
.obr { color: var(--error-strong); }

/* O quadro da renegociação (o mergulho e o desfazer). */
.cr-quadro-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem 1rem; flex-wrap: wrap; }
.cr-quadro-cliente { font-size: 1.25rem; font-weight: 600; margin: 0.1rem 0 0.35rem; }
.cr-quadro-meta { display: flex; gap: 0.35rem 0.75rem; flex-wrap: wrap; align-items: center; font-size: 0.83rem; color: var(--muted-foreground); }
.zr-badge.cr-reneg-ativa { background: var(--success-bg-soft); color: var(--success-strong); border-color: var(--success-bg-soft); }
.zr-badge.cr-reneg-desfeita { background: var(--muted); color: var(--muted-foreground); }
.cr-cadeia { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.85rem; margin: 0.8rem 0; }
.cr-cadeia-no { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.2rem 0.55rem; }
.cr-cadeia-no--atual { border-color: var(--primary); font-weight: 600; }
.cr-quadro-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
@media (max-width: 1000px) { .cr-quadro-cartoes { grid-template-columns: minmax(0, 1fr); } }
.cr-quadro-cartao { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; min-width: 0; }
.cr-quadro-cartao h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.cr-quadro-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 0.83rem; color: var(--foreground);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.cr-quadro-link:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }
.cr-quadro-travas { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.cr-quadro-lista { margin: 0.4rem 0; padding-left: 1.2rem; font-size: 0.88rem; }
.cr-quadro-titulo-desfazer { margin: 0.8rem 0 0.2rem; font-size: 0.88rem; }
.cr-quadro-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; margin-top: 0.7rem; }

/* ── TE2/D-TE1 — a FOLHA DE RATEIO (rateio-misto-mockup.html, aprovado em 24/10/2026) ─────────
   O componente é public/js/folha-rateio.js (o título avulso hoje; o Novo lançamento da Tesouraria
   na TE10). Prefixo `fr-` para não colidir com o resto do módulo; só tokens do DESIGN — os
   `*-borda` do mockup não existem no tokens.css, então a borda sai do `*-strong` como nos alerts. */
.fr-modal { max-width: 52rem; }
.fr-abas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0 0 0.8rem; }
.fr-abas button { border: 0; background: none; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.85rem; cursor: pointer; color: var(--muted-foreground); border-bottom: 2px solid transparent; display: inline-flex; gap: 0.4rem; align-items: center; }
.fr-abas button[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); font-weight: 600; }
.fr-abas button:focus-visible, .fr-chip:focus-visible, .fr-remover:focus-visible, .fr-link:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }
.fr-linha-nova { display: grid; grid-template-columns: minmax(0, 1fr) auto 8rem auto; gap: 0.5rem; align-items: end; margin-bottom: 0.7rem; }
@media (max-width: 700px) { .fr-linha-nova { grid-template-columns: minmax(0, 1fr) auto; } }
.fr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.fr-seg button { border: 0; background: var(--background); padding: 0.4rem 0.7rem; font: inherit; font-size: 0.83rem; cursor: pointer; color: var(--foreground); }
.fr-seg button + button { border-left: 1px solid var(--border); }
.fr-seg button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.fr-campo-num { min-width: 0; }
.fr-rolagem { overflow-x: auto; }
.fr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fr-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fr-fraco { color: var(--muted-foreground); }
.fr-neg { color: var(--error-strong); }
.fr-residual { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); margin-top: 0.6rem; font-size: 0.88rem; border: 1px solid var(--border); flex-wrap: wrap; }
.fr-residual b { font-variant-numeric: tabular-nums; font-size: 1rem; }
.fr-residual--zero { background: var(--success-bg-soft); color: var(--success-strong); border-color: color-mix(in srgb, var(--success-strong) 35%, transparent); }
.fr-residual--falta { background: var(--warning-bg-soft); color: var(--warning-strong); border-color: color-mix(in srgb, var(--warning-strong) 35%, transparent); }
.fr-residual--passou { background: var(--error-bg-soft); color: var(--error-strong); border-color: color-mix(in srgb, var(--error-strong) 35%, transparent); }
.fr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.fr-chip { border: 1px solid var(--border); background: var(--background); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.8rem; cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: center; color: var(--foreground); }
.fr-chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.fr-bolinha { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--success-strong); flex: none; }
.fr-bolinha--falta { background: var(--warning-strong); }
.fr-remover { border: 0; background: none; padding: 0.2rem; cursor: pointer; color: var(--muted-foreground); border-radius: var(--radius-sm); }
.fr-remover:hover { background: var(--muted); color: var(--error-strong); }
.fr-erro { color: var(--error-strong); font-size: 0.75rem; margin: 0 0 0.5rem; }
.fr-ajuda-topo { margin-top: 0; }
.fr-resumo { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; font-size: 0.85rem; margin-top: 0.6rem; }
.fr-resumo ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.fr-link { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* RT10 (mockup aprovado): o botão "Ratear a despesa/receita…" é AÇÃO (preta, padrão do DESIGN) COM a
   moldura de IA. A moldura do projeto pinta o miolo com --card; aqui o miolo é o --primary — senão o
   texto branco da ação sumiria no fundo branco. */
.zr-btn.zr-btn--default.zr-moldura-ia { background: linear-gradient(var(--primary), var(--primary)) padding-box, conic-gradient(from var(--ia-angulo), var(--ia-1), var(--ia-2), var(--ia-3), var(--ia-4), var(--ia-1)) border-box; }
/* A armadilha do [hidden]: `.ta-campos` declara display e a seção o esconde com o atributo. */
.ta-campos[hidden] { display: none; }

/* ── TE5/D-TE5 — a TESOURARIA (tesouraria-mockup.html, TS1–TS3 e TS11) ────────────────────────
   A faixa de filtros numa linha só, com a moldura de IA (o padrão do projeto), e o extrato: o
   sentido com ícone e cor, a linha do saldo anterior, o lote que abre nos filhos e o estornado
   riscado. Os utilitários de número/mono/sub são os `.os-*` compartilhados do styles.css. */
.tx-filtros { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0.6rem 1rem; padding: 0.75rem 0.85rem; margin-bottom: 0.9rem; }
.tx-filtros > div { min-width: 0; }
.tx-filtros .zr-select, .tx-filtros .zr-input { width: 100%; }
.tx-f-conta { flex: 1.3 1 0; }
.tx-f-periodo { flex: 0 0 auto; }
.tx-f-visao { flex: 1 1 0; }
.tx-f-sentido { flex: 1.1 1 0; }
.tx-f-evento { flex: 1.2 1 0; }
.tx-f-limpar { flex: 0 0 auto; padding-bottom: 0.55rem; white-space: nowrap; }
.tx-datas { display: flex; gap: 0.4rem; align-items: center; }
.tx-datas .zr-input { width: 8.6rem; }
@media (max-width: 1100px) { .tx-filtros { flex-wrap: wrap; } .tx-filtros > div { flex: 1 1 12rem; } }
.tx-legenda { margin: 0 0 0.4rem; }
.tx-sentido { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.tx-sentido--e { color: var(--success-strong); }
.tx-sentido--s { color: var(--error-strong); }
.tx-estornado td:not(:last-child) { color: var(--muted-foreground); text-decoration: line-through; text-decoration-color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); }
.tx-filho td { background: color-mix(in oklch, var(--muted) 50%, transparent); font-size: 0.8rem; }
.tx-saldo-anterior td { background: var(--muted); font-weight: 500; }
.tx-caret { border: 1px solid var(--border); background: var(--background); border-radius: var(--radius-sm); padding: 0.05rem 0.25rem; cursor: pointer; margin-right: 0.3rem; vertical-align: middle; color: var(--foreground); }
.tx-caret[aria-expanded="true"] .zr-icone { transform: rotate(180deg); }
.tx-caret:focus-visible { outline: 3px solid color-mix(in oklch, var(--ring) 50%, transparent); outline-offset: 1px; }

/* ---------- Eventos financeiros: o histórico com variáveis (TE6; TS8; mockup §5) ---------- */
/* As variáveis são botões-texto (`.fr-link`, acima) com a fonte mono, para ler como o modelo. */
.ef-variaveis code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; }
.ef-variaveis .fr-link { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; }
.ef-previa-rotulo { margin-top: 0.5rem; margin-bottom: 0; }
/* A prévia é a caixa do mockup: mono, fundo `--muted`; `anywhere` porque um modelo longo (200
   caracteres) não pode empurrar a largura do diálogo — ele quebra dentro da caixa. */
.ef-previa {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.78rem;
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.5rem;
  margin-top: 0.3rem;
  min-height: 1.6rem;
  overflow-wrap: anywhere;
}

/* ---------- Tesouraria: o Novo lançamento e o estorno (TE10; telas 2–4 do mockup, 24/10/2026) ---------- */
/* O modal da TS4 abre na LARGURA INTEGRAL (o mockup): os campos de cima numa linha só. */
.tx-modal-integral { width: min(96vw, 72rem); max-width: min(96vw, 72rem); }
.txl-linha { display: grid; grid-template-columns: 1.3fr 0.9fr 1.4fr 0.8fr; gap: 0.75rem; }
.txl-classificacao { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.txl-outros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.txl-destino { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.txl-adiant-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.6rem; }
.txl-linha > div, .txl-classificacao > div, .txl-outros > div, .txl-destino > div, .txl-adiant-campos > div { min-width: 0; }
.txl-evento-info { font-size: 0.78rem; color: var(--muted-foreground); margin-top: 0.25rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
/* A coluna do Mais Ações do extrato (TS3) e o menu dele — o desenho das listas migradas. */
.tx-col-acoes { white-space: nowrap; }
.tx-acoes-menu { position: fixed; z-index: 40; max-width: min(24rem, calc(100vw - 1rem)); }
/* O realce de "Ver o estorno" / "Ver o lançamento original": some sozinho (o bloco global de
   prefers-reduced-motion já neutraliza a animação — piso do DESIGN). */
.tx-realce { animation: tx-realce 2.4s ease-out; }
@keyframes tx-realce {
  from { background: color-mix(in oklch, var(--ring) 18%, transparent); }
  to { background: transparent; }
}
/* O estorno (tela 4): o "O que acontece", a data e o motivo. */
.txe-rotulo { margin: 0 0 0.4rem; font-size: 0.85rem; }
.txe-lista { margin: 0 0 0.8rem; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.txe-motivo { min-height: 5rem; resize: vertical; }
@media (max-width: 700px) {
  .txl-linha, .txl-classificacao, .txl-outros, .txl-destino, .txl-adiant-campos { grid-template-columns: 1fr; }
  .tx-modal-integral { width: 96vw; }
}
/* 🔴 A armadilha do `[hidden]`: as classes novas fixam `display` (grid), e a regra de autor vence
   o `[hidden]` do navegador — sem este override o painel "escondido" segue visível. */
.txl-classificacao[hidden], .txl-destino[hidden], .txl-outros[hidden], .txl-adiant-campos[hidden] { display: none; }