/* ─── Módulo Financeiro (Task 12) ─────────────────────────────────────────
   Integra-se no sistema visual já estabelecido (DESIGN.md — "O Consultório
   Editorial"): reutiliza `.card`, `.modal`, `.tabela-admin`, `.btn-*`,
   `.cfg-tabs-nav`/`.cfg-tab-btn`/`.cfg-tab-content`, `.form-grupo` e as
   variáveis de `variaveis.css`. Este ficheiro só acrescenta o vocabulário
   próprio do domínio financeiro: totais em destaque, badges de estado,
   linhas de rateio/parcela dinâmicas e a nota de âmbito da Adenda B. */

.fin-page { max-width: 1180px; }

.fin-vazio {
  text-align: center;
  padding: 40px 20px;
  color: var(--cor-texto-secundario);
  font-size: 13px;
}
.fin-vazio i { display: block; margin-bottom: 10px; }

.fin-carregando, .fin-vazio-linha {
  padding: 24px;
  text-align: center;
  color: var(--cor-texto-secundario);
  font-size: 13px;
}
/* Revisão visual T3G, 2026-08-20: o ícone `ti-loader` não animava sozinho —
   faltava a classe e a keyframe, e ficava parado a fingir carregamento. */
.fin-carregando i { display: inline-block; animation: fin-spin 1s linear infinite; }
@keyframes fin-spin { to { transform: rotate(360deg); } }

.fin-erro {
  color: var(--cor-perigo);
  font-size: 12px;
  margin: 8px 0;
}
/* Erro de secção inteira (troca de aba) — usado só por `paginas/financeiro.js`,
   nunca o `.fin-erro` inline de formulário/tabela acima. */
.fin-erro-secao {
  color: var(--cor-perigo);
  font-size: 13px;
  padding: 24px;
  text-align: center;
}
.fin-erro-secao button { margin-top: 10px; }

/* ─── Barra de filtros/ações ────────────────────────────────────────── */
.fin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fin-filtros {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.fin-filtros .form-grupo { margin-bottom: 0; min-width: 130px; }
.fin-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

.fin-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media (max-width: 560px) { .fin-grid-2 { grid-template-columns: 1fr; } }

/* ─── Valores monetários ────────────────────────────────────────────── */
.fin-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}
.fin-valor-destaque {
  font-family: var(--fonte-serif);
  font-size: 22px;
}

.fin-totais-principais {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding: 16px 0;
}
.fin-totais-principais > div { display: flex; flex-direction: column; gap: 4px; }
.fin-total-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em; /* token Label do DESIGN.md — 10px/700/0.18em */
  text-transform: uppercase;
  color: var(--gold-texto);
}

/* ─── Árvore do plano de contas (DRE e Configuração) ─────────────────────
   `dre.contas` (Task 9) já vem hierárquico do backend; `GET /financeiro/
   contas` (Task 6) devolve uma lista plana que `configuracoes.js`
   reconstrói em árvore por `parent_id`. Os dois casos partilham a mesma
   indentação visual: um degrau de 16px por nível — o valor `md` da escala
   de espaçamento do DESIGN.md (`spacing.md`), não um número novo. */
.fin-arvore-item {
  display: inline-block;
  padding-left: calc(var(--nivel, 0) * 16px);
}

/* Adenda B §B.5 — nota de âmbito permanente sob cada total principal.
   Dense Caption (11px), --cor-texto-secundario, SEM cor de Aviso e SEM
   ícone: não é um alerta, é uma nota de escopo fixa. O literal devolvido
   pela API nunca é reescrito no frontend (ver `relatorios.js:_rodapeAviso`). */
.fin-aviso-escopo {
  font-size: 11px;
  line-height: 1.3;
  color: var(--cor-texto-secundario);
  margin: 4px 0 16px;
}

/* ─── Badges de estado (reaproveita `.badge` de componentes.css) ────── */
.fin-estado-rascunho, .fin-estado-calculado, .fin-estado-a_gerar {
  background: rgba(163,174,185,0.22); color: var(--cor-texto-secundario);
}
.fin-estado-confirmado, .fin-estado-aprovado, .fin-estado-disponivel, .fin-estado-pago {
  background: rgba(61,107,74,0.14); color: var(--cor-sucesso);
}
.fin-estado-cancelado, .fin-estado-falhou, .fin-estado-substituido {
  background: rgba(165,32,32,0.12); color: var(--cor-perigo);
}
.fin-estado-fechado { background: var(--gold-faint); color: var(--gold-texto); }
.fin-tipo-receita { background: rgba(61,107,74,0.14); color: var(--cor-sucesso); }
.fin-tipo-despesa { background: rgba(165,32,32,0.12); color: var(--cor-perigo); }

/* ─── Linhas dinâmicas de rateio/parcela ─────────────────────────────── */
.fin-linha-dinamica {
  display: grid;
  grid-template-columns: 1fr 1fr 120px 44px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.fin-linha-dinamica input, .fin-linha-dinamica select { margin-bottom: 0; }
@media (max-width: 640px) {
  .fin-linha-dinamica { grid-template-columns: 1fr; }
}

/* ─── Sub-abas de relatório (DRE/Fluxo/Aging) ────────────────────────── */
.fin-subtabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.fin-subtab.activo { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.fin-relatorio-corpo { margin-top: 12px; }

.fin-evolucao { padding: 12px; margin: 12px 0; }
.fin-evolucao-svg svg { width: 100%; display: block; }
.fin-aging-barra svg { width: 100%; max-width: 260px; display: block; margin: 8px 0 4px; }
.fin-sparkline-cel { width: 96px; }
.fin-linha-realcada { background: var(--gold-faint); }

/* ─── Caixa ───────────────────────────────────────────────────────────── */
.fin-caixa-card { margin-bottom: 20px; }
.fin-liquidar { margin-bottom: 24px; }
.fin-fechar-periodo { margin-top: 12px; }
.fin-nota { font-size: 12px; color: var(--cor-texto-secundario); margin: -6px 0 12px; }

/* ─── Detalhe de lançamento ──────────────────────────────────────────── */
.fin-modal-detalhe { width: 640px; }
.fin-modal-lancamento { width: 640px; }
.fin-detalhe-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  font-size: 15px;
}
@media (max-width: 640px) { .fin-detalhe-grid { grid-template-columns: 1fr 1fr; } }

/* ─── Acessibilidade e alvo táctil (DESIGN.md + brief) ───────────────── */
.fin-page .btn,
.fin-subtab,
.cfg-tab-btn {
  min-height: 44px;
}
.fin-page button:focus-visible,
.fin-page input:focus-visible,
.fin-page select:focus-visible,
.fin-page a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ─── Responsivo: 360px / 768px / desktop ────────────────────────────── */
@media (max-width: 768px) {
  .fin-detalhe-grid { grid-template-columns: 1fr 1fr; }
  .fin-totais-principais { gap: 18px; }
}
@media (max-width: 400px) {
  .fin-detalhe-grid { grid-template-columns: 1fr; }
  .fin-filtros .form-grupo { min-width: 100%; }
  .fin-toolbar, .fin-acoes { flex-direction: column; align-items: stretch; }
}

/* ─── Busca de parcela no Caixa (Task 5, UX-melhorias) ────────────────── */
.fin-busca-parcela { position: relative; }
.fin-sugestoes {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--cream); border: 1px solid var(--cor-borda); border-top: none;
  max-height: 220px; overflow-y: auto; list-style: none; margin: 0; padding: 0;
}
.fin-sugestoes li { padding: 8px 12px; cursor: pointer; font-size: 13px; }
.fin-sugestoes li:hover { background: var(--gold-faint); }
.fin-sugestoes .fin-sem-resultado { color: var(--cor-texto-secundario); cursor: default; }

/* ─── Materiais/Estoque/Margem (Tarefas 9 e 11) ─────────────────────────
   Plano previa um `assets/css/financeiro_materiais.css` próprio, mas
   `index.html` está na lista de ficheiros intocáveis desta ronda — sem uma
   nova `<link>`, um ficheiro à parte nunca carregaria no browser real. As
   regras entram aqui, no stylesheet do módulo já ligado, com o mesmo
   vocabulário `.fin-*`/`.modal-*`/`.tabela-admin` já em uso. Consolidação:
   ver `docs/superpowers/pendentes-integracao-C2.md`. Toque mínimo 44×44px e
   foco visível em toda a superfície nova (Restrições globais do plano). */

.cm-btn-abrir {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: none; border-radius: var(--raio-borda);
  background: var(--gold); color: var(--navy);
  font-weight: 700; font-size: 14px; cursor: pointer; font-family: var(--fonte);
}
.cm-btn-abrir:hover { background: var(--gold-2); }
.cm-btn-abrir:focus-visible, .cm-qty-btn:focus-visible, .cm-btn-detalhar:focus-visible,
.cm-btn-gold:focus-visible, .cm-busca-item:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
.cm-badge, .cm-badge-cabecalho {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 2px 8px; border-radius: 999px;
  background: var(--navy); color: var(--gold-2); font-size: 12px; font-weight: 800;
}
.cm-badge-cabecalho { background: rgba(255,255,255,.14); color: #fff; }

.cm-carregando, .cm-vazio {
  padding: 24px; text-align: center; color: var(--cor-texto-secundario); font-size: 13px;
}
.cm-erro { color: var(--cor-perigo); font-size: 13px; padding: 12px 0; }

.cm-resumo {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-borda);
}
.cm-resumo-item small { display: block; color: var(--cor-texto-secundario); font-size: 11px; margin-bottom: 3px; }
.cm-resumo-item strong { font-size: 13px; color: var(--navy); }

.cm-pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800;
}
.cm-pill-info { color: var(--cor-info); background: rgba(26,95,168,.12); }

.cm-banner {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 14px; padding: 11px 13px;
  border-radius: var(--raio-borda); border-left: 4px solid var(--cor-aviso);
  background: rgba(181,137,58,.14); color: var(--cor-aviso-texto); font-size: 13px;
}

.cm-secao-label {
  margin: 16px 0 8px; color: var(--gold-texto);
  font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.cm-secao-label:first-of-type { margin-top: 0; }

.cm-btn-gold {
  border: none; border-radius: var(--raio-borda); min-height: 44px;
  padding: 11px 16px; font-weight: 800; font-size: 14px;
  color: var(--navy); background: var(--gold); cursor: pointer; font-family: var(--fonte);
}
.cm-btn-gold:hover { background: var(--gold-2); }
.cm-full { display: block; width: 100%; margin-bottom: 14px; }

.cm-lista {
  border: 1px solid var(--cor-borda); border-radius: var(--raio-borda);
  background: var(--cor-superficie); overflow: hidden; margin-bottom: 4px;
}
.cm-row { border-bottom: 1px solid var(--cor-borda); padding: 11px 13px; }
.cm-row:last-child { border-bottom: none; }
.cm-row-principal {
  display: grid; grid-template-columns: minmax(0,1.6fr) auto auto auto;
  align-items: center; gap: 12px;
}
.cm-row-nome strong { color: var(--navy); font-size: 14px; }
.cm-subtle { color: var(--cor-texto-secundario); font-size: 12px; }

.cm-disp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cm-disp-ok { color: var(--cor-sucesso); }
.cm-disp-bad { color: var(--cor-perigo); }
.cm-disp-neutro { color: var(--cor-texto-secundario); }

.cm-qty { display: flex; align-items: center; gap: 6px; }
.cm-qty-btn {
  width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-borda);
  background: var(--cor-superficie); color: var(--navy);
  font-size: 18px; font-weight: 900; cursor: pointer;
}
.cm-qty-btn:hover { background: var(--gold-faint); }
.cm-qty output { min-width: 34px; text-align: center; font-weight: 900; color: var(--navy); }

.cm-btn-detalhar {
  min-height: 44px; padding: 0 12px; border: none; background: none;
  color: var(--gold-texto); font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--fonte);
}
.cm-btn-detalhar:hover { text-decoration: underline; }

.cm-row-detalhe {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cor-borda);
  display: grid; gap: 10px;
}
.cm-row-detalhe .form-grupo { margin-bottom: 0; }
.cm-row-detalhe input {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-borda); font-family: var(--fonte);
}

.cm-row-historico { background: var(--cor-fundo); }

.cm-acoes-add { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.cm-busca { margin-top: 6px; padding: 12px; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); background: var(--cor-superficie); }
.cm-busca .control, .cm-busca input {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-borda); font-family: var(--fonte);
}
.cm-busca-resultados { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.cm-busca-item {
  display: block; width: 100%; text-align: left; min-height: 44px;
  padding: 9px 11px; border: none; border-bottom: 1px solid var(--cor-borda);
  background: none; cursor: pointer; font-family: var(--fonte);
}
.cm-busca-item:hover { background: var(--gold-faint); }

.cm-rodape-acoes { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 767px) {
  .modal-overlay:has(.cm-ficha) { align-items: stretch; }
  .modal.cm-ficha { width: 100% !important; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .cm-resumo { grid-template-columns: 1fr 1fr; }
  .cm-row-principal { grid-template-columns: 1fr auto; row-gap: 8px; }
  .cm-row-principal .cm-disp { grid-column: 1 / -1; }
  .modal-rodape:has(#cm-btn-salvar) { flex-direction: column; align-items: stretch; }
  .cm-rodape-acoes { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ─── Compra de materiais no lançamento (Tarefa 11) ─────────────────────── */
.lm-toggle-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 0; padding: 13px; border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--gold); border-radius: var(--raio-borda); background: var(--cor-superficie);
}
.lm-toggle-line strong { color: var(--navy); font-size: 14px; }
.lm-toggle {
  position: relative; width: 46px; height: 26px; min-width: 46px;
  border: none; border-radius: 999px; background: var(--cor-borda-forte); cursor: pointer; padding: 0;
}
.lm-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.lm-toggle[aria-checked="true"] { background: var(--navy); }
.lm-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.lm-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.lm-tabela { border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); background: var(--cor-superficie); overflow: hidden; margin-top: 10px; }
.lm-linha { padding: 11px 12px; border-bottom: 1px solid var(--cor-borda); }
.lm-linha:last-child { border-bottom: none; }
.lm-linha-campos {
  display: grid; grid-template-columns: minmax(0,1.6fr) .6fr .7fr .7fr auto;
  align-items: center; gap: 10px;
}
.lm-linha-campos select, .lm-linha-campos input {
  width: 100%; min-height: 44px; padding: 9px 11px;
  border: 1px solid var(--cor-borda-forte); border-radius: var(--raio-borda); font-family: var(--fonte);
}
.lm-total-item { font-weight: 800; color: var(--navy); }
.lm-conversao {
  grid-column: 1 / -1; margin-top: 8px; padding: 8px 10px;
  border-radius: var(--raio-borda); background: var(--cor-fundo); color: var(--cor-texto-secundario); font-size: 12px;
}
.lm-rodape-tabela {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px; background: var(--cor-fundo); font-weight: 800; color: var(--navy);
}
.lm-callout {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--raio-borda);
  background: rgba(181,137,58,.14); color: var(--cor-aviso-texto); font-size: 13px;
}
.lm-erro-item { color: var(--cor-perigo); font-size: 12px; margin-top: 4px; }

@media (max-width: 767px) {
  .lm-linha-campos { grid-template-columns: 1fr 1fr; }
  .lm-linha-campos > :first-child, .lm-conversao { grid-column: 1 / -1; }
  .lm-linha-campos > :last-child { justify-self: end; }
  .lm-rodape-tabela { flex-direction: column; align-items: stretch; }

/* --- Entregas a confirmar (Caixa) e painel de Estoque --- 
   Bloco de outro agente da mesma ronda. Uniao no merge: os dois lados
   acrescentaram ao fim do ficheiro e nao partilham uma unica classe
   (prefixos distintos, verificado no merge). --- */
/* ─── Estoque e Entregas a confirmar (Materiais/Estoque, Tarefa 13/14) ───
   `assets/css/financeiro_materiais.css` está no mapa de arquivos do plano,
   mas nunca foi ligado a `index.html` (ficheiro intocável nesta ronda) —
   fica registado como pendência de integração
   (`docs/superpowers/pendentes-integracao-C3.md`). Este ficheiro já está
   ligado e é o dono de todo o vocabulário `fin-` — acrescentar aqui evita
   uma folha de estilo fantasma sem `<link>`. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.fin-est-appbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.fin-est-titulo {
  font-family: var(--fonte-serif); font-size: 20px; color: var(--navy);
}

.fin-est-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px;
}
.fin-est-kpi {
  background: var(--cor-superficie); border-top: 3px solid var(--gold);
  border-radius: var(--raio-borda); box-shadow: var(--sombra); padding: 14px 16px;
}
.fin-est-kpi small {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold-texto); margin-bottom: 6px;
}
.fin-est-kpi b {
  font-family: var(--fonte-serif); font-size: 22px; font-weight: 800; color: var(--navy);
}
.fin-est-kpi-perigo b { color: var(--cor-perigo); }

.fin-est-toolbar { margin-bottom: 14px; }
.fin-est-busca { flex: 1 1 260px; margin-bottom: 0; }
.fin-est-busca input { width: 100%; }
.fin-est-toolbar select { min-height: 44px; }
.fin-est-alerta-activo { background: var(--gold-faint); border-color: var(--gold); color: var(--navy); }

.fin-est-status {
  display: inline-flex; align-items: center; gap: 4px;
}
.fin-est-status-normal   { background: rgba(61,107,74,0.14); color: var(--cor-sucesso); }
.fin-est-status-minimo   { background: rgba(181,137,58,0.16); color: var(--cor-aviso); }
.fin-est-status-negativo { background: rgba(165,32,32,0.14); color: var(--cor-perigo); }
/* Vocabulario completo de `_status_linha` (spec Sec13.5) -- so as tres
   linhas acima existiam, e um material zerado (comum: e o estado de
   tudo recem-importado, antes do primeiro ajuste) caia sem regra propria,
   com a mesma cor de fundo do badge `.fin-est-status` base mas nenhuma
   cor de texto definida. */
.fin-est-status-zerado           { background: rgba(165,32,32,0.14); color: var(--cor-perigo); }
.fin-est-status-vencido          { background: rgba(165,32,32,0.14); color: var(--cor-perigo); }
.fin-est-status-validade_proxima { background: rgba(181,137,58,0.16); color: var(--cor-aviso); }
.fin-est-status-custo_pendente   { background: rgba(181,137,58,0.16); color: var(--cor-aviso); }
.fin-est-pendente { color: var(--cor-aviso); font-style: italic; }

.fin-est-config-resumo {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-top: 18px;
}
.fin-est-legenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fin-est-swatch {
  display: inline-block; width: 12px; height: 12px; border-radius: 2px;
  border: 1px solid var(--cor-borda-forte); vertical-align: -1px;
}

.fin-est-painel { width: 560px; }
.fin-est-painel-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fin-est-painel-grid { grid-template-columns: repeat(4, 1fr); font-size: 13px; margin-bottom: 14px; }

/* Tabela do Estoque → cartões abaixo de 768px (mockup 2): cada `<tr>` vira
   um bloco e cada `<td>` mostra o próprio rótulo via `data-label`, sem
   duplicar markup entre versão desktop e mobile. */
@media (max-width: 768px) {
  .fin-est-tabela thead { display: none; }
  .fin-est-tabela, .fin-est-tabela tbody, .fin-est-tabela tr, .fin-est-tabela td { display: block; width: 100%; }
  .fin-est-tabela tr {
    border-top: 3px solid var(--gold); border-radius: var(--raio-borda);
    box-shadow: var(--sombra); margin-bottom: 12px; padding: 10px 14px; background: var(--cor-superficie);
  }
  .fin-est-tabela td {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 6px 0; border: none; text-align: right;
  }
  .fin-est-tabela td::before {
    content: attr(data-label); font-weight: 700; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cor-texto-secundario); text-align: left;
  }
  .fin-est-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .fin-est-kpis { grid-template-columns: 1fr; } }

/* ─── Entregas a confirmar (Caixa, Tarefa 13) ───────────────────────────── */
.fin-rec-card { margin-bottom: 16px; }
.fin-rec-cabecalho {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 12px;
}
.fin-rec-itens { display: flex; flex-direction: column; gap: 14px; }
.fin-rec-item-linha {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
}
.fin-rec-item-info { min-width: 0; }
.fin-rec-progresso {
  width: 100%; max-width: 220px; height: 6px; border-radius: 3px;
  background: rgba(9,16,38,0.08); margin: 6px 0; overflow: hidden;
}
.fin-rec-progresso span { display: block; height: 100%; background: var(--gold); }
.fin-rec-pendente { font-weight: 700; color: var(--navy); white-space: nowrap; }
.fin-rec-form { margin-top: 10px; padding: 12px; background: rgba(9,16,38,0.03); border-radius: var(--raio-borda); }
@media (max-width: 640px) {
  .fin-rec-item-linha { grid-template-columns: 1fr; align-items: stretch; }
  .fin-rec-pendente { text-align: left; }
}