/* ==========================================================================
   GESTÃO FINANCEIRA · LANÇAMENTO · FORMA DE PAGAMENTO
   Camada de aparência do módulo — carregada DEPOIS de liquid-glass-erp.css.
   ==========================================================================

   PALETA CORPORATIVA PEDIDA PELO DONO
     fundo    Preto Absoluto   #000000
     detalhe  Dourado Oficial  #FFD700
     detalhe  Amarelo Caramelo #D4A373

   POR QUE ESTES TOKENS SÃO LOCAIS E NÃO ENTRAM NO `:root` DO NÚCLEO
   Mesma razão de insumos.css, folha.css e chat.css, e vale repetir porque é
   um erro que se comete uma vez por módulo: `css/liquid-glass.css` é ESPELHO —
   `assets/embutir-tema.mjs`, no repositório do site, reescreve aquele arquivo
   a cada geração de tema. Token novo posto lá é desfeito no próximo deploy do
   site, sem erro e sem aviso. E mexer em `--lg-acento` (hoje #CBA730)
   repintaria o ERP inteiro, telas que ninguém mediu contra esta paleta
   incluídas.

   MORFOLOGIA: retangular, fina, cantos de 8 a 12px. Sem forma orgânica, sem
   `border-radius` em porcentagem, sem animação de silhueta. Os três degraus
   abaixo cobrem o módulo inteiro; não use valor literal fora deles.
   ========================================================================== */

.fin-modulo {
  --fin-ouro: #FFD700;
  --fin-caramelo: #D4A373;
  --fin-preto: #000000;

  /* Mistura dos dois, para borda e botão. */
  --fin-liga: linear-gradient(135deg, var(--fin-ouro) 0%, var(--fin-caramelo) 100%);
  --fin-liga-suave: linear-gradient(135deg, rgba(255, 215, 0, 0.16) 0%, rgba(212, 163, 115, 0.16) 100%);

  /* Vidro jateado PLANO: película clara e uniforme, sem brilho especular
     rolando pela superfície — é o que separa "jateado" de "líquido". */
  --fin-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  --fin-fosco: blur(18px) saturate(150%);

  --fin-borda: rgba(255, 215, 0, 0.28);
  --fin-borda-forte: rgba(255, 215, 0, 0.55);
  --fin-borda-caramelo: rgba(212, 163, 115, 0.34);

  /* Cantos: 8 · 10 · 12. Nada fora desta escala. */
  --fin-canto-1: 12px;   /* painel do bloco de pagamento */
  --fin-canto-2: 10px;   /* campo, subpainel */
  --fin-canto-3: 8px;    /* botão, selo */

  /* Sombra limpa: uma queda vertical e um fio de contorno. Sem halo colorido
     e sem sombra interna difusa — as duas coisas que fazem a peça "inchar". */
  --fin-sombra: 0 10px 30px rgba(0, 0, 0, 0.62), 0 1px 0 rgba(255, 255, 255, 0.05) inset;

  --fin-texto: #F5F1E6;
  --fin-texto-fraco: rgba(245, 241, 230, 0.62);
}

/* ─────────────────────────── Tipografia ───────────────────────────
   SANS-SERIF DO SISTEMA, e só ela (01/10/2026, organização mensal: "fontes
   sans-serif modernas e limpas do sistema para a listagem de dados
   financeiros, consolidando o abandono da fonte Quiche Sans nas interfaces de
   preenchimento e listagem estrutural"). Até aqui a Urbanist vinha na frente;
   saiu do formulário e das listas do Financeiro — a mesma pilha do painel de
   permissões (--pg-fonte). De quebra, some o "1º" desenhado como "1o" pela
   Urbanist. "Quiche Sans" nunca teve arquivo nem licença no projeto.
   `-apple-system`/BlinkMacSystemFont = SF Pro no Mac/iOS; Segoe UI no
   Windows; Roboto no Android.

   `tabular-nums` não é preferência estética aqui: os quatro últimos dígitos e
   o número da operação são lidos POR COMPARAÇÃO contra o extrato da
   adquirente, e dígito de largura variável desalinha as colunas justamente na
   conferência que o campo existe para permitir. */
.fin-modulo {
  --fin-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* `.btn` e os campos do núcleo pedem var(--lg-fonte) explicitamente: redefinida
     aqui, a variável leva a fonte do sistema até eles sem regra por elemento. */
  --lg-fonte: var(--fin-fonte);
  font-family: var(--fin-fonte);
  font-variant-numeric: tabular-nums;
  color: var(--fin-texto);
}

/* O fundo preto absoluto do pedido. `.modal` do núcleo desenha vidro sobre o
   ambiente; aqui a superfície do formulário é chapada em #000000 e o vidro
   fica por conta dos painéis internos — é o que dá contraste real ao dourado,
   que sobre vidro cinza esmaece. */
.modal:has(.fin-modulo) {
  background-color: var(--fin-preto, #000000);
  background-image: none;
  border-color: rgba(255, 215, 0, 0.30);
  border-radius: 12px;
  /* O rodapé das formas de pagamento gruda no fim do modal (01/10/2026): o foco
     e a rolagem param ACIMA dele, para nada ficar escondido atrás. */
  scroll-padding-bottom: 84px;
}

/* ═══════════════════════ Campos do formulário ═══════════════════════ */

.fin-modulo label,
.fin-modulo .fin-campo {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fin-texto-fraco);
  margin-bottom: 12px;
}

.fin-modulo input,
.fin-modulo select,
.fin-modulo textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--fin-texto);
  background-color: rgba(255, 255, 255, 0.035);
  background-image: var(--fin-vidro);
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-2);
  box-shadow: none;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.fin-modulo input:hover,
.fin-modulo select:hover {
  border-color: var(--fin-borda-caramelo);
}

/* O foco é a única peça que acende de verdade. Um fio de 1px em dourado forte
   mais um anel externo de baixa opacidade: visível sobre preto sem virar
   halo, e sem deslocar o campo (o anel é `box-shadow`, não `outline` com
   espessura que empurraria o layout). */
.fin-modulo input:focus,
.fin-modulo select:focus,
.fin-modulo textarea:focus {
  outline: none;
  border-color: var(--fin-ouro);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.14);
  background-color: rgba(255, 215, 0, 0.045);
}

/* Placeholder em caramelo, não em cinza: o pedido nomeia o caramelo para os
   placeholders, e a 52% ele fica legível sem competir com o valor digitado —
   que é o texto que precisa ganhar a leitura. */
.fin-modulo input::placeholder {
  color: rgba(212, 163, 115, 0.52);
  font-variant-numeric: tabular-nums;
}

/* A seta do <select> desenhada à mão, em dourado. `appearance: none` é o que
   tira a seta cinza do sistema — sem ela o campo fica com um triângulo que
   ignora a paleta inteira e denuncia o controle nativo. */
.fin-modulo select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fin-ouro) 50%),
    linear-gradient(135deg, var(--fin-ouro) 50%, transparent 50%),
    var(--fin-vidro);
  background-position:
    right 15px center,
    right 10px center,
    0 0;
  background-size: 5px 5px, 5px 5px, auto;
  background-repeat: no-repeat, no-repeat, repeat;
}

/* O menu aberto é desenhado pelo sistema operacional e quase nada nele aceita
   CSS. `color-scheme: dark` é o que existe de padrão para pedir a variante
   escura da lista nativa — sem isso, o menu abre branco sobre um formulário
   preto, que é o pior contraste da tela inteira. */
.fin-modulo select { color-scheme: dark; }
.fin-modulo select option { background-color: #0B0B0B; color: var(--fin-texto); }

/* ═════════════════ Bloco da forma de pagamento ═════════════════ */

.fin-modulo .fin-pagamento {
  margin-top: 4px;
  padding: 14px 14px 2px;
  background-image: var(--fin-liga-suave), var(--fin-vidro);
  -webkit-backdrop-filter: var(--fin-fosco);
  backdrop-filter: var(--fin-fosco);
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-1);
  box-shadow: var(--fin-sombra);
}

/* Os subcampos condicionais. A borda à ESQUERDA, e só ela, é o que diz
   "isto pertence à escolha de cima" sem desenhar uma caixa dentro da caixa —
   aninhar painel em painel a 12px de canto engorda a peça e briga com a
   morfologia fina do pedido. */
.fin-modulo .fin-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  margin: 2px 0 6px;
  padding: 12px 0 0 13px;
  border-left: 2px solid var(--fin-borda-caramelo);
  border-radius: 0 var(--fin-canto-3) var(--fin-canto-3) 0;
}

/* `display: grid` acima VENCE o `display: none` que o atributo `hidden` aplica
   pela folha do navegador — regra de autor ganha da folha do agente, sempre.
   Sem esta linha o bloco continua desenhado depois de `el.hidden = true`, e o
   formulário mostra "Tipo de link criado" dentro de um Cartão de Crédito.
   Pior: o JS e o DOM ficam CORRETOS (a propriedade `hidden` é true), então
   nem o console nem um teste que leia `el.hidden` denunciam — só o pixel. */
.fin-modulo .fin-sub[hidden] { display: none; }

.fin-modulo .fin-sub .col-full { grid-column: 1 / -1; }

/* Um subcampo só ocupa a linha inteira: dois selects de uma coluna cada
   deixariam o bloco do link com um buraco à direita. */
.fin-modulo #fin-sub-link,
.fin-modulo #fin-sub-parcelas,
.fin-modulo .fin-pag-sub-link,
.fin-modulo .fin-pag-sub-parcelas { grid-template-columns: 1fr; }

/* O aviso do lançamento herdado. Caramelo e não vermelho: não é erro, é
   história — o texto antigo continua válido até alguém escolher outra coisa.
   Vermelho aqui treinaria a equipe a "consertar" lançamentos que não têm
   nada de errado. */
.fin-modulo .fin-herdado {
  margin: 0 0 12px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fin-texto-fraco);
  background-color: rgba(212, 163, 115, 0.07);
  border: 1px solid var(--fin-borda-caramelo);
  border-radius: var(--fin-canto-3);
}

.fin-modulo .fin-herdado strong { color: var(--fin-caramelo); font-weight: 600; }

/* ═══════════════════════════ Botões ═══════════════════════════ */

.fin-modulo .form-actions { margin-top: 14px; }

.fin-modulo .btn {
  border-radius: var(--fin-canto-3);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border: 1px solid var(--fin-borda);
  background-color: transparent;
  background-image: var(--fin-vidro);
  color: var(--fin-texto);
}

.fin-modulo .btn:hover { border-color: var(--fin-borda-forte); }

/* O único elemento preenchido com a liga dourada é o botão que confirma —
   tinta cheia é o que hierarquiza, e ela vale uma vez por tela. Texto preto
   sobre o dourado: #FFD700 tem luminância alta demais para texto claro. */
.fin-modulo .btn-primary {
  background-image: var(--fin-liga);
  border-color: transparent;
  color: var(--fin-preto);
}

.fin-modulo .btn-primary:hover { filter: brightness(1.06); }

.fin-modulo .form-erro { color: #FF8A8A; }

/* ═══════════════════════════ Telas estreitas ═══════════════════════════ */

@media (max-width: 720px) {
  .fin-modulo .fin-sub { grid-template-columns: 1fr; }
}

/* Mesmas duas concessões de acessibilidade que o núcleo faz. Sem elas o
   módulo fica ilegível para quem pediu menos transparência no sistema — e
   `prefers-contrast` sobe a borda ao dourado cheio, porque a 28% ela some
   num monitor calibrado para alto contraste. */
@media (prefers-reduced-transparency: reduce) {
  .fin-modulo .fin-pagamento {
    background-image: none;
    background-color: #141414;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .fin-modulo { --fin-borda: rgba(255, 215, 0, 0.62); }
  .fin-modulo .fin-herdado { color: var(--fin-texto); }
}

/* ═══════════════ Busca de paciente no lançamento (25/09/2026) ═══════════════ */
/* O campo "Paciente" do lançamento deixou de ser um <select> com todos os
   pacientes e virou busca por nome/CPF (BuscaPaciente, js/app.js). A CSP do
   ERP não aceita <style> criado por script, por isso as regras vivem aqui,
   com os mesmos tokens do módulo. A lista fica NO FLUXO (o modal rola; uma
   lista absoluta seria cortada pela caixa) e rola por dentro acima de 240px. */
.fin-modulo .fin-busca > label { margin-bottom: 0; }
.fin-modulo .fin-busca-entrada { margin-top: 6px; }
.fin-modulo .fin-busca-entrada::-webkit-search-cancel-button { filter: invert(1) opacity(0.6); }

.fin-modulo .fin-busca-lista {
  margin: 6px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background-color: #0B0B0B;
  background-image: var(--fin-vidro);
  border: 1px solid var(--fin-borda-forte);
  border-radius: var(--fin-canto-2);
  box-shadow: var(--fin-sombra);
}
.fin-modulo .fin-busca-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--fin-canto-3);
  cursor: pointer;
  color: var(--fin-texto);
  font-size: 14px;
}
.fin-modulo .fin-busca-item:hover,
.fin-modulo .fin-busca-item[aria-selected="true"] {
  background-image: var(--fin-liga-suave);
  box-shadow: inset 0 0 0 1px var(--fin-borda);
}
.fin-modulo .fin-busca-item .fin-busca-nome { font-weight: 600; }
.fin-modulo .fin-busca-meta,
.fin-modulo .fin-busca-dica { color: var(--fin-texto-fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.fin-modulo .fin-busca-dica { display: block; margin-top: 6px; }
.fin-modulo .fin-busca-vazio,
.fin-modulo .fin-busca-mais { padding: 8px 10px; color: var(--fin-texto-fraco); font-size: 13px; }

/* O paciente escolhido: um chip com nome, CPF e o "×" que desvincula. */
.fin-modulo .fin-busca-escolhido {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--fin-borda-forte);
  border-radius: var(--fin-canto-2);
  background-color: rgba(255, 255, 255, 0.035);
  background-image: var(--fin-liga-suave);
  color: var(--fin-texto);
  font-size: 14px;
}
.fin-modulo .fin-busca-escolhido .fin-busca-nome { font-weight: 600; flex: 1 1 auto; }
.fin-modulo .fin-busca-escolhido .fin-busca-cpf { color: var(--fin-texto-fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.fin-modulo .fin-busca-limpar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-3);
  background: transparent;
  color: var(--fin-texto);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fin-modulo .fin-busca-limpar:hover,
.fin-modulo .fin-busca-limpar:focus-visible { border-color: var(--fin-ouro); background-image: var(--fin-liga-suave); outline: none; }

/* ═══════════ LANÇAMENTOS: busca por data e exclusão em lote (27/09/2026) ═══════════
   O painel de Lançamentos NÃO é `.fin-modulo` (o `.fin-modulo input {width:100%}`
   daqui de cima desmontaria a barra de filtros): ele usa o tema do ERP em volta
   (--lg-*, o mesmo ouro do calendário do RegesDatePicker). Só o resumo da
   assinatura, que abre em cima de tudo, entra em `.fin-modulo` e usa --fin-*.
   Tudo em arquivo: a CSP do ERP recusa <style> criado por script.               */

/* O nome do campo de data, só para leitor de tela — o RegesDatePicker usa o
   texto do <label for> como aria-label do grupo DD/MM/AAAA. Label SEPARADO, e
   não envolvendo o campo: um <label> em volta mandaria todo clique na borda
   para o segmento do dia, por cima do "primeiro segmento vazio" do componente. */
.fin-lanc .fin-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* O RegesDatePicker nasce com largura e altura de formulário; na barra ele
   fica com a medida dos <select> vizinhos (mesmo cuidado de insumos.css). */
.fin-lanc .fin-filtro-data { display: block; width: 172px; margin: 0; }
.fin-lanc .fin-filtro-data .redp > .redp-campo {
  padding: 3px 4px 3px 10px;
  font-size: 13px;
}

/* `.barra-filtros input` (style.css e liquid-glass-erp.css) pinta caixa, borda
   e recuo em TODO input da barra — e os segmentos DD/MM/AAAA são inputs. Sem
   isto cada segmento vira uma caixinha dentro da caixa. */
.fin-lanc .fin-filtro-data .redp-seg,
.fin-lanc .fin-filtro-data .redp-seg:focus {
  padding: 2px 3px;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  font-size: inherit;
}
.fin-lanc .fin-filtro-data .redp-seg { background: transparent; color: inherit; }
.fin-lanc .fin-filtro-data .redp-seg:focus {
  background: rgba(203, 167, 48, 0.16);
  color: var(--lg-acento-claro, #F3E5AB);
}

/* Linha de resultado da busca: "7 lançamentos em 15/08/2026 · × Limpar data". */
.fin-lanc .fin-filtro-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding: 8px 18px;
  border-bottom: 1px solid var(--linha);
  background: linear-gradient(90deg, rgba(203, 167, 48, 0.12), rgba(203, 167, 48, 0.02));
  font-size: 13px;
  color: var(--lg-tinta-media, var(--lg-tinta));
}
.fin-lanc .fin-filtro-aviso strong { color: var(--lg-acento-claro, #F3E5AB); font-weight: 600; }
.fin-lanc .fin-filtro-aviso small { color: var(--lg-tinta-fraca); font-size: 12px; }

/* Por qual data a linha entrou, quando não foi pelo vencimento. */
.fin-lanc .fin-data-motivo {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--lg-acento-claro, #F3E5AB);
  opacity: 0.85;
}

/* Caixas de seleção. */
.fin-lanc th:has(> .fin-sel-todos),
.fin-lanc td.fin-sel-cel { width: 1%; padding-right: 2px; }
.fin-lanc input.fin-sel,
.fin-lanc input.fin-sel-todos {
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--lg-acento, #CBA730);
  cursor: pointer;
}
.fin-lanc tr.fin-sel-linha > td { background: rgba(203, 167, 48, 0.09); }
.fin-lanc tr.fin-sel-linha > td:first-child { box-shadow: inset 3px 0 0 var(--lg-acento, #CBA730); }

/* Barra do lote: aparece com a primeira caixa marcada. Vermelho de aviso,
   porque o que ela oferece é apagar. */
.fin-lanc .fin-lote {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(248, 113, 113, 0.38);
  background:
    linear-gradient(90deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.04)),
    rgba(8, 8, 8, 0.92);
  font-size: 13px;
  color: var(--lg-tinta);
}
.fin-lanc .fin-lote-info { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.fin-lanc .fin-lote-info strong { color: var(--lg-acento-claro, #F3E5AB); font-weight: 700; }
.fin-lanc .fin-lote-meta { color: var(--lg-tinta-fraca); font-variant-numeric: tabular-nums; }
.fin-lanc .fin-lote-alerta { color: var(--vermelho); font-weight: 600; }
.fin-lanc .fin-lote-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-lanc .fin-lote .btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Resumo da Assinatura Digital do lote: a lista inteira do que vai sair. */
.fin-lote-resumo .fin-lote-itens {
  list-style: none;
  margin: 10px 0 12px;
  padding: 0;
  max-height: 216px;
  overflow-y: auto;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-3);
  background: rgba(0, 0, 0, 0.35);
}
.fin-lote-resumo .fin-lote-itens li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.10);
  font-size: 12.5px;
  line-height: 1.35;
}
.fin-lote-resumo .fin-lote-itens li:last-child { border-bottom: 0; }
.fin-lote-resumo .fin-lote-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-lote-resumo .fin-lote-data { color: var(--fin-texto-fraco); font-size: 11.5px; white-space: nowrap; }
.fin-lote-resumo .fin-lote-valor { color: var(--fin-ouro); font-weight: 600; white-space: nowrap; }

/* ═══════════════ MULTI-PACIENTE (29/09/2026): até 5 pacientes no lançamento ═══════════════ */
/* O grupo "Pacientes" do Novo Lançamento: o 1º campo (o de sempre), os
   adicionais num cartão fino cada um, com o vínculo e o Remover na cabeça, e
   o "+ Adicionar paciente" embaixo. Mesmos tokens do módulo; sem <style> por
   script (CSP). A lista de resultados de cada campo continua NO FLUXO. */
.fin-modulo .fin-pacientes { margin-bottom: 12px; }
.fin-modulo .fin-pacientes-lista { display: flex; flex-direction: column; gap: 10px; }
.fin-modulo .fin-pacientes .fin-busca { margin-bottom: 0; }
.fin-modulo .fin-pacientes .fin-busca > .fin-busca-rotulo { margin-bottom: 0; }
.fin-modulo .fin-busca-extra {
  padding: 10px 12px;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-2);
  background-image: var(--fin-vidro);
}
.fin-modulo .fin-busca-cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.fin-modulo .fin-busca-cabeca .fin-busca-rotulo {
  flex: 1 1 auto;
  margin: 0;
  color: var(--fin-texto-fraco);
  font-size: 12.5px;
  font-weight: 500;
}
.fin-modulo .fin-busca-cabeca .fin-busca-vinculo {
  display: inline-block;
  width: auto;
  min-width: 200px;
  margin-top: 0;
  padding: 6px 10px;
  font-size: 13px;
}
.fin-modulo .fin-busca-remover {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid var(--fin-borda-caramelo);
  border-radius: var(--fin-canto-3);
  background: transparent;
  color: var(--fin-texto);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.fin-modulo .fin-busca-remover:hover,
.fin-modulo .fin-busca-remover:focus-visible { border-color: var(--fin-ouro); background-image: var(--fin-liga-suave); outline: none; }
.fin-modulo .fin-pacientes-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.fin-modulo .fin-pacientes-conta { color: var(--fin-texto-fraco); font-size: 12px; font-variant-numeric: tabular-nums; }
.fin-modulo .fin-pacientes-adicionar:disabled { opacity: 0.5; cursor: not-allowed; }
.fin-modulo .fin-busca-item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.fin-pac-nomes .fin-pac-vinc { opacity: 0.85; }
/* Somente leitura (perfil sem o cadastro de pacientes, ex. 09 - Contador(a)). */
.fin-modulo .fin-busca-leitura > .fin-busca-rotulo {
  display: block;
  color: var(--fin-texto-fraco);
  font-size: 12.5px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .fin-modulo .fin-busca-cabeca .fin-busca-vinculo { min-width: 0; flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUAS JANELAS: RECEITAS | DESPESAS (30/09/2026, pedido do dono)
   A barra de cima (data, Status, CSV/PDF de tudo) vale para as duas; cada
   janela tem cabeçalho, totais, lote e tabela próprios. Lado a lado a partir
   de 1300 px de tela (medido: a tabela de 4 colunas cabe inteira na janela
   até 1366 px), uma embaixo da outra abaixo disso. Cores = as dos selos do tema
   (verde-água das receitas, vermelho-claro das despesas; liquid-glass-erp.css,
   .badge.verde / .badge.vermelho), só como acento: o vidro é o do .painel.
   Tudo em arquivo — a CSP do ERP recusa <style> criado por script.
   ═══════════════════════════════════════════════════════════════════════════ */
.fin-barra-geral { margin-bottom: 18px; }
.fin-barra-geral .fin-filtro-aviso { border-top: 1px solid var(--linha); border-bottom: 0; }
.fin-barra-geral .fin-aviso-partes { color: var(--lg-tinta-media, var(--lg-tinta)); font-size: 12px; margin-left: 4px; }
.fin-barra-geral .fin-barra-titulo { display: flex; flex-direction: column; gap: 2px; }
.fin-barra-geral .fin-barra-titulo small { font-size: 12px; color: var(--lg-tinta-media, var(--lg-tinta)); }
/* "↓ Receitas / ↓ Despesas": só quando as janelas estão empilhadas (abaixo de 1300 px). */
.fin-barra-geral .fin-atalhos { display: none; gap: 8px; flex-wrap: wrap; }

/* A barra do lote gruda embaixo do topo da página ao rolar (--fin-topo vem de
   finAjustarTopo, em app.js). Para o sticky enxergar a rolagem da página,
   nem a janela nem a área da tela podem ser caixa de rolagem: `clip` recorta
   os cantos do vidro como o `hidden` fazia, sem virar caixa de rolagem. */
.view:has(> .fin-janelas) { overflow-x: clip; }

.fin-janelas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
@media (max-width: 1299px) {
  .fin-janelas { grid-template-columns: minmax(0, 1fr); }
}

.fin-janela {
  --fin-janela-cor: rgba(45, 212, 191, 0.7);
  --fin-janela-tinta: #7ff0dc;
  min-width: 0;
  overflow: clip;
}
.fin-janela .fin-lote { top: var(--fin-topo, 96px); }
.fin-janela--despesa {
  --fin-janela-cor: rgba(248, 113, 113, 0.7);
  --fin-janela-tinta: #fca5a5;
}
.fin-janela > .painel-head { box-shadow: inset 0 3px 0 var(--fin-janela-cor); }
.fin-janela .fin-janela-titulo { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.fin-janela .fin-janela-titulo h2 {
  color: var(--fin-janela-tinta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fin-janela .fin-janela-conta {
  font-size: 12.5px;
  color: var(--lg-tinta-media, var(--lg-tinta));
  font-variant-numeric: tabular-nums;
}
.fin-janela .fin-janela-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.fin-janela .fin-janela-totais {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
  color: var(--lg-tinta-media, var(--lg-tinta));
  font-variant-numeric: tabular-nums;
}
.fin-janela .fin-janela-totais strong { color: var(--fin-janela-tinta); font-weight: 600; }
.fin-janela .fin-janela-totais .fin-total-rotulo { color: var(--lg-acento-claro, #F3E5AB); font-weight: 600; }
.fin-janela .fin-janela-totais .fin-total--cancelado { color: var(--lg-tinta-media, var(--lg-tinta)); }
.fin-janela .fin-lote-meta { color: var(--lg-tinta-media, var(--lg-tinta)); }

/* Meia tela: 4 colunas (Descrição · Vencimento · Valor · Status). A descrição
   quebra linha e leva embaixo a categoria/pacientes e os botões; as outras
   colunas não quebram. Recuo lateral menor que o das tabelas largas. */
.fin-janela th,
.fin-janela td { padding-left: 10px; padding-right: 10px; vertical-align: top; }
.fin-janela th:has(> .fin-sel-todos),
.fin-janela td.fin-sel-cel { padding-right: 0; }
.fin-janela td.fin-desc { white-space: normal; min-width: 150px; width: 100%; }
.fin-janela .fin-desc-titulo { color: var(--lg-tinta); overflow-wrap: anywhere; }
.fin-janela .fin-desc-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--lg-tinta-media, var(--lg-tinta));
  overflow-wrap: anywhere;
}
/* Linha só do celular: vencimento · valor · status embaixo da descrição. */
.fin-janela .fin-movel { display: none; }
.fin-janela .fin-desc-meta .fin-pac-nomes { color: inherit !important; font-size: inherit; }
.fin-janela .fin-acoes-linha { flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.fin-janela .fin-acoes-linha .btn-sm { padding: 3px 10px; font-size: 12px; }
.fin-janela td.fin-valor { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.fin-janela th:has(> .fin-th-valor) { text-align: right; }
/* "lançado em 15/08/2026" pode quebrar: em 1300–1366 px é o que faltava para caber. */
.fin-janela td.fin-venc { white-space: normal; }
.fin-janela td.fin-venc .fin-data-motivo { min-width: 76px; }
.fin-janela .vazio { padding: 24px 18px; }

@media (max-width: 1299px) {
  .fin-barra-geral .fin-atalhos { display: flex; }
}

/* Celular: só a coluna Descrição (e a caixa), com a linha "venc. · valor · status" dentro.
   `thead` (01/10/2026): o cabeçalho do mês é um <th> único na linha dele — sem o
   `thead`, `:nth-last-child` o esconderia junto com as colunas. */
@media (max-width: 640px) {
  .fin-janela thead th:nth-last-child(-n+3),
  .fin-janela td.fin-venc,
  .fin-janela td.fin-valor,
  .fin-janela td.fin-status { display: none; }
  .fin-janela .fin-movel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--lg-tinta-media, var(--lg-tinta));
    font-variant-numeric: tabular-nums;
  }
  .fin-janela .fin-movel strong { color: var(--lg-tinta); }
}

@media (prefers-contrast: more) {
  .fin-janela > .painel-head { box-shadow: inset 0 4px 0 var(--fin-janela-tinta); }
  .fin-janela .fin-janela-conta,
  .fin-janela .fin-desc-meta,
  .fin-janela .fin-lote-meta,
  .fin-janela .fin-movel,
  .fin-barra-geral .fin-aviso-partes,
  .fin-barra-geral .fin-barra-titulo small { color: var(--lg-tinta); }
}
/* Alto contraste do Windows: a faixa colorida é sombra e some; vira borda. */
@media (forced-colors: active) {
  .fin-janela > .painel-head { border-top: 3px solid CanvasText; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DUAS OU MAIS FORMAS DE PAGAMENTO (01/10/2026, pedido do dono)
   Cada forma é uma linha dentro do bloco de pagamento; com 2+ aparecem o
   cabeçalho "Forma N" (com "× Remover"), o valor de cada uma e a conta da
   soma. Mesmo cuidado do .fin-sub: regra de autor com `display` vence o
   atributo `hidden`, então cada peça escondível tem o seu [hidden].
   ═══════════════════════════════════════════════════════════════════════════ */
.fin-modulo .fin-pag-linha + .fin-pag-linha {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--fin-borda-caramelo);
}
.fin-modulo .fin-pag-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fin-modulo .fin-pag-rotulo {
  color: var(--fin-caramelo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fin-modulo .fin-pag-remover {
  min-height: 28px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--fin-texto-fraco);
  background: transparent;
  border: 1px solid var(--fin-borda-caramelo);
  border-radius: var(--fin-canto-3);
  cursor: pointer;
}
.fin-modulo .fin-pag-remover:hover,
.fin-modulo .fin-pag-remover:focus-visible { color: var(--fin-texto); border-color: var(--fin-borda-forte); outline: none; }
.fin-modulo .fin-pag-auto {
  display: block;
  margin: -6px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fin-texto-fraco);
}
/* A soma acompanha quem digita: o rodapé gruda no fim da área visível do modal
   (com Pix + Crédito o bloco passa da altura da tela no celular). */
.fin-modulo .fin-pag-rodape {
  position: sticky;
  bottom: -28px;   /* o recuo do .modal (style.css): encosta na borda, sem conteúdo rolando por baixo */
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 6px -14px 0;
  padding: 10px 14px 12px;
  background: #080808;   /* opaco: o que rola por baixo não aparece através */
  border-top: 1px solid var(--fin-borda-caramelo);
  border-radius: 0 0 var(--fin-canto-1) var(--fin-canto-1);
}
.fin-modulo .fin-pag-adicionar:disabled { opacity: 0.5; cursor: not-allowed; }
.fin-modulo .fin-pag-soma {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.fin-modulo .fin-pag-soma--ok { color: #7ff0dc; }
.fin-modulo .fin-pag-soma--erro { color: #FF8A8A; }
.fin-modulo .fin-pag-soma--neutro { color: var(--fin-texto); }
/* Só para leitor de tela: o anúncio da soma, depois que a pessoa para de digitar. */
.fin-modulo .fin-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (pointer: coarse) {
  .fin-modulo .fin-pag-remover { min-height: 36px; }
}
@media (prefers-contrast: more) {
  .fin-modulo .fin-pag-auto,
  .fin-modulo .fin-pag-remover { color: var(--fin-texto); }
}
.fin-modulo .fin-pag-cabeca[hidden],
.fin-modulo .fin-pag-remover[hidden],
.fin-modulo .fin-pag-valor-campo[hidden],
.fin-modulo .fin-pag-auto[hidden],
.fin-modulo .fin-pag-soma[hidden] { display: none; }

/* Na lista: "2 formas: Pix R$ 100,00 + Cartão de Crédito R$ 200,00", embaixo da descrição. */
.fin-janela .fin-pag-resumo { color: var(--lg-acento-claro, #F3E5AB); }


/* ═══════════════════════════════════════════════════════════════════════════
   ORGANIZAÇÃO MENSAL + DIRETRIZES CORPORATIVAS NAS JANELAS (01/10/2026, pedido do dono)
   Cada janela (Receitas | Despesas) vira uma lista SECCIONADA por mês do
   vencimento: um <tbody class="fin-mes"> por mês, aberto pela linha
   `.fin-mes-cabeca` (<th scope="rowgroup">: "Outubro 2026", contagem, totais),
   e cada lançamento é um CARTÃO fino (`tr.fin-linha`).
     · fundo PRETO ABSOLUTO (#000000) nas janelas, na barra de cima e nos cartões
       do resumo; divisórias dos meses, bordas, valores de destaque e botões
       mesclam o DOURADO #FFD700 e o AMARELO CARAMELO #D4A373 — Receitas em
       dourado, Despesas em caramelo (as cores do pedido distinguem as janelas;
       os selos de status continuam semânticos: pago verde, pendente âmbar);
     · cartões retangulares, cantos 10 (escala 8 · 10 · 12 do módulo), vidro
       jateado PLANO — película clara + fio dourado + brilho interno de 1 px.
       SEM backdrop-filter por linha: sobre preto absoluto não há o que
       desfocar, e vidro por linha é exatamente o engasgo medido na Lista de
       pacientes em 25/09/2026 (liquid-glass-erp.css, seção 11). As janelas
       também saem da refração do .painel (preto chapado, como o pedido);
     · sans-serif DO SISTEMA em toda a tela do Financeiro (ver Tipografia, acima).
   A tabela continua <table>: leitor de tela, teclado, Shift+clique e lote
   seguem iguais — o cartão é só pintura das células (border-collapse:
   separate + border-spacing). Tudo em arquivo: a CSP recusa <style> por script.
   ═══════════════════════════════════════════════════════════════════════════ */
.view:has(> .fin-janelas),
#fin-cards,
.fin-barra-geral,
.fin-janelas {
  --fin-ouro: #FFD700;
  --fin-caramelo: #D4A373;
  --fin-preto: #000000;
  --fin-liga: linear-gradient(135deg, var(--fin-ouro) 0%, var(--fin-caramelo) 100%);
  --fin-fio: rgba(255, 215, 0, 0.24);          /* borda fina em repouso */
  --fin-fio-forte: rgba(255, 215, 0, 0.55);
  --fin-fio-cartao: rgba(255, 215, 0, 0.14);
  --fin-cartao: rgba(255, 255, 255, 0.035);
  --fin-cartao-vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016));
  --fin-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --lg-fonte: var(--fin-fonte);
  font-family: var(--fin-fonte);
}
/* O calendário suspenso é portal no <body>: com o Financeiro na tela (inclusive
   no Vencimento do formulário), ele também usa a fonte do sistema. */
body:has(.fin-janelas) .redp-pop {
  --lg-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-family: var(--lg-fonte);
}

/* Superfícies: preto absoluto chapado, fio dourado, cantos 12, sombra limpa. */
.fin-barra-geral,
.fin-janela {
  background: var(--fin-preto);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--fin-fio);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fin-barra-geral::before,
.fin-janela::before { display: none; }

/* OS 7 BALÕES — VIDRO LÍQUIDO (aditivo do dono, 06/10/2026: "substitua o fundo
   sólido/fosco e aplique a estética vidro líquido iOS 27, de forma leve, com
   backdrop-filter"). Translúcido e refratando o que está atrás (blur + saturação),
   película clara em diagonal, fio interno de 1 px, um reflexo largo que atravessa
   o balão (::after) e a luz especular do tema que segue o cursor (::before, que
   volta a valer aqui). FORMA continua quadrada com cantos de 12 px (decisão do
   dono de 02/10/2026: nada de gota). Bordas e títulos em DOURADO (#FFD700, o do
   ecossistema). Vale para os 7 de #fin-cards e para os 5 cartões do financeiro no
   Painel (os 2 balões + Saldo (pago), A Receber e A Pagar — o Painel "integrado a
   estas modificações", pedido de 05/10/2026). São peças de vidro contadas — nada a
   ver com o engasgo de milhares de .btn-ghost. */
#fin-cards .card,
.cards > .card.fin-balao,
.cards > #dash-card-saldo,
.cards > #dash-card-a-receber,
.cards > #dash-card-a-pagar {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: rgba(10, 10, 12, 0.40);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.035) 35%,
                            rgba(255, 255, 255, 0.012) 62%, rgba(255, 215, 0, 0.06) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
  backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
  border: 1px solid #FFD700;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22),
              inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 28px rgba(255, 255, 255, 0.03);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
#fin-cards .card::after,
.cards > .card.fin-balao::after,
.cards > #dash-card-saldo::after,
.cards > #dash-card-a-receber::after,
.cards > #dash-card-a-pagar::after {
  content: "";
  position: absolute;
  left: -25%;
  top: -55%;
  width: 70%;
  height: 170%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.10) 42%,
                              rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0.10) 58%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(10deg);
}
/* O texto fica ACIMA da película e do reflexo (o ::before do tema tem z-index 2). */
#fin-cards .card > *,
.cards > .card.fin-balao > *,
.cards > #dash-card-saldo > *,
.cards > #dash-card-a-receber > *,
.cards > #dash-card-a-pagar > * { position: relative; z-index: 3; }
#fin-cards .card:hover,
.cards > .card.fin-balao:hover,
.cards > #dash-card-saldo:hover,
.cards > #dash-card-a-receber:hover,
.cards > #dash-card-a-pagar:hover {
  border-color: #FFD700;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(255, 215, 0, 0.30);
}
/* Títulos dos 7 — "Receitas (pagas)", "Receitas do mês / Outubro 2026", "Despesas
   (pagas)", "Despesas do mês / Outubro 2026", "Saldo", "A Receber", "A Pagar" —
   em DOURADO (aditivo de 06/10/2026). */
#fin-cards .card .rotulo,
.cards > .card.fin-balao .rotulo,
.cards > #dash-card-saldo .rotulo,
.cards > #dash-card-a-receber .rotulo,
.cards > #dash-card-a-pagar .rotulo,
.card.fin-balao .fin-balao-mes { color: #FFD700; }
/* O número fica numa linha e nunca vaza: app.js (finAjustarValores) encolhe a fonte
   até caber — quanto mais algarismos, menor a fonte (aditivo de 06/10/2026). */
#fin-cards .card .valor { font-size: clamp(18px, 1.45vw, 26px); white-space: nowrap; overflow: hidden; }
@media (prefers-reduced-transparency: reduce) {
  #fin-cards .card, .cards > .card.fin-balao,
  .cards > #dash-card-saldo, .cards > #dash-card-a-receber, .cards > #dash-card-a-pagar { background-color: #141414; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  #fin-cards .card::after, .cards > .card.fin-balao::after,
  .cards > #dash-card-saldo::after, .cards > #dash-card-a-receber::after, .cards > #dash-card-a-pagar::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #fin-cards .card, .cards > .card.fin-balao,
  .cards > #dash-card-saldo, .cards > #dash-card-a-receber, .cards > #dash-card-a-pagar { background-color: rgba(14, 14, 14, 0.94); }
}
/* Ctrl+P da tela: o tema imprime os cartões em branco; título dourado sobre branco
   não se lê (1,3:1) — no papel os títulos saem pretos, como os números. */
@media print {
  #fin-cards .card::after, .cards > .card.fin-balao::after,
  .cards > #dash-card-saldo::after, .cards > #dash-card-a-receber::after, .cards > #dash-card-a-pagar::after { display: none; }
  #fin-cards .card .rotulo, .cards > .card.fin-balao .rotulo, .card.fin-balao .fin-balao-mes,
  .cards > #dash-card-saldo .rotulo, .cards > #dash-card-a-receber .rotulo, .cards > #dash-card-a-pagar .rotulo { color: #000; }
  #fin-cards .card, .cards > .card.fin-balao,
  .cards > #dash-card-saldo, .cards > #dash-card-a-receber, .cards > #dash-card-a-pagar,
  #fin-cards .card:hover, .cards > .card.fin-balao:hover,
  .cards > #dash-card-saldo:hover, .cards > #dash-card-a-receber:hover, .cards > #dash-card-a-pagar:hover {
    border-color: #999; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
.fin-barra-geral .painel-head,
.fin-barra-geral .fin-filtro-aviso,
.fin-janela .painel-head,
.fin-janela .fin-janela-totais { border-color: var(--fin-fio); }

/* Receitas em dourado, Despesas em caramelo; a faixa do topo mescla os dois. */
.fin-janela {
  --fin-janela-cor: var(--fin-ouro);
  --fin-janela-tinta: var(--fin-ouro);
}
.fin-janela--despesa {
  --fin-janela-cor: var(--fin-caramelo);
  --fin-janela-tinta: var(--fin-caramelo);
}
.fin-janela > .painel-head {
  box-shadow: none;
  background: var(--fin-liga) left top / 100% 3px no-repeat;
}

/* A tabela: cartões separados por 6 px; recuo lateral para o cartão não
   encostar na borda da janela. Medido em 1300 px (as duas janelas lado a lado,
   ~490 px cada, com "R$ 112.345,67" e "lançado em"): recuo de 6 px e a
   descrição com mínimo de 120 px (era 150) — a fonte do sistema é mais larga
   que a Urbanist nos valores, e sem isto a tabela rolava de lado. */
.fin-janela .fin-tabela > div { padding: 0 6px 10px; }
.fin-janela td.fin-desc { min-width: 120px; }
/* Com um <tbody> por mês o Chrome passou a ANCORAR a rolagem sozinho quando a
   barra do lote aparece — e finAtualizarSelecao (app.js) já compensa: somadas,
   a linha clicada subia 76 px e o Shift+clique seguinte caía noutra linha. A
   compensação manual fica (o Safari não ancora); a nativa sai daqui. */
.fin-janela .fin-tabela { overflow-anchor: none; }
/* "↓ Receitas / ↓ Despesas" (scrollIntoView no título): para logo abaixo do
   topo grudado, e não por baixo dele. */
.fin-janela .fin-janela-titulo h2 { scroll-margin-top: var(--fin-topo, 96px); }
.fin-janela table.fin-tabela-mensal {
  border-collapse: separate;
  border-spacing: 0 6px;
}
.fin-janela .fin-tabela-mensal thead th {
  padding-top: 12px;
  padding-bottom: 8px;
  background: transparent;
  border-bottom: 1px solid var(--fin-fio);
  color: rgba(212, 163, 115, 0.88);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Cabeçalho do mês: nome em dourado (caramelo nas Despesas) e a divisória em
   degradê dourado → caramelo, por baixo de "Outubro 2026 · 3 lançamentos · …". */
.fin-janela tr.fin-mes-cabeca > th {
  padding: 18px 4px 8px;
  background: linear-gradient(90deg, var(--fin-ouro) 0%, var(--fin-caramelo) 55%, rgba(212, 163, 115, 0) 100%)
              left bottom / 100% 1px no-repeat;
  border-bottom: 0;
  color: var(--lg-tinta-media, var(--lg-tinta));
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
.fin-janela tbody.fin-mes:first-of-type tr.fin-mes-cabeca > th { padding-top: 10px; }
.fin-janela .fin-mes-nome {
  display: inline-block;
  margin-right: 12px;
  color: var(--fin-janela-tinta);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.fin-janela .fin-mes-resumo { font-variant-numeric: tabular-nums; }
/* Quebra só ENTRE os itens ("· A receber R$ 0,00"), nunca no meio de um deles. */
.fin-janela .fin-mes-resumo > span:not(.fin-sep) { white-space: nowrap; }
.fin-janela .fin-mes-resumo strong { color: var(--fin-janela-tinta); font-weight: 600; }
.fin-janela .fin-mes-cancelados { color: var(--lg-tinta-media, var(--lg-tinta)); }   /* a fraca dava 4,49:1 */

/* O cartão do lançamento. As células pintam o cartão (vidro plano + fio); a
   primeira e a última fecham os cantos. */
.fin-janela tbody tr.fin-linha:hover,
.fin-janela tbody tr.fin-mes-cabeca:hover { background: transparent; }   /* o cabeçalho do mês não é clicável */
.fin-janela tr.fin-linha > td {
  background-color: var(--fin-cartao);
  background-image: var(--fin-cartao-vidro);
  border-top: 1px solid var(--fin-fio-cartao);
  border-bottom: 1px solid rgba(255, 215, 0, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.fin-janela tr.fin-linha > td:first-child {
  border-left: 1px solid var(--fin-fio-cartao);
  border-radius: 10px 0 0 10px;
}
.fin-janela tr.fin-linha > td:last-child {
  border-right: 1px solid var(--fin-fio-cartao);
  border-radius: 0 10px 10px 0;
}
.fin-janela tr.fin-linha:hover > td {
  background-color: rgba(255, 255, 255, 0.055);
  border-color: rgba(212, 163, 115, 0.42);
}
/* Selecionado para o lote: véu dourado e a barra à esquerda (vence o cartão). */
.fin-janela tr.fin-linha.fin-sel-linha > td {
  background-color: rgba(255, 215, 0, 0.085);
  background-image: none;
  border-color: rgba(255, 215, 0, 0.45);
}
.fin-janela tr.fin-linha.fin-sel-linha > td:first-child {
  box-shadow: inset 3px 0 0 var(--fin-ouro), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.fin-janela .fin-desc-titulo { font-weight: 600; }

/* Valores de destaque na cor da janela. */
.fin-janela td.fin-valor strong,
.fin-janela .fin-movel strong { color: var(--fin-janela-tinta); font-weight: 650; }

/* Selos retangulares (canto 8), como o resto do módulo. */
.fin-janela .badge { border-radius: 8px; }

/* Botões: o "+ Nova …" é o único cheio (liga dourado → caramelo, texto preto);
   os fantasmas ganham o fio dourado; "Baixar" é afirmativo em caramelo, de
   contorno (há um por linha pendente — cheio, gritaria na lista). Excluir
   segue vermelho: é ação destrutiva, e a cor é informação. */
.fin-barra-geral .btn-ghost,
.fin-janela .btn-ghost {
  color: var(--lg-tinta);
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--fin-fio);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.fin-barra-geral .btn-ghost:hover,
.fin-janela .btn-ghost:hover {
  color: #fff;
  background-color: rgba(255, 215, 0, 0.07);
  border-color: var(--fin-fio-forte);
}
.fin-janela .btn-primary,
.fin-janela .btn-primary:hover {
  color: #000;
  background: var(--fin-liga);
  border: 1px solid transparent;
  box-shadow: 0 8px 22px -12px rgba(255, 215, 0, 0.55);
}
.fin-janela .btn-primary:hover { filter: brightness(1.06); }
/* O "+ Novo Lançamento" do topo é do mesmo módulo: com o Financeiro na tela,
   ele também é a liga dourado → caramelo (fora dela, o botão do tema). */
body:has(.fin-janelas) #topbar-acoes .btn-primary {
  color: #000;
  background: linear-gradient(135deg, #FFD700 0%, #D4A373 100%);
  border: 1px solid transparent;
  box-shadow: 0 8px 22px -12px rgba(255, 215, 0, 0.55);
}
body:has(.fin-janelas) #topbar-acoes .btn-primary:hover { filter: brightness(1.06); }

/* FOCO DO TECLADO. As regras de botão acima zeram o box-shadow — e o anel de
   foco do tema (`.lg-ambiente :focus-visible`, liquid-glass.css) É um box-shadow
   de mesma especificidade, carregado antes: sem isto, Tab andava pelos botões
   do Financeiro sem mostrar onde estava. Anel dourado com fresta preta, que lê
   sobre o preto e sobre o próprio botão dourado. */
.fin-barra-geral .btn:focus-visible,
.fin-janela .btn:focus-visible,
#fin-cards .card:focus-visible,
body:has(.fin-janelas) #topbar-acoes .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #000000, 0 0 0 4px #FFD700;
}
@media (forced-colors: active) {
  .fin-barra-geral .btn:focus-visible,
  .fin-janela .btn:focus-visible,
  body:has(.fin-janelas) #topbar-acoes .btn:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Fonte do sistema também no que abre POR CIMA do Financeiro: o título e o fecho
   do formulário (fora do .fin-modulo), o "+ Novo Lançamento" do topo e a
   Assinatura Digital da exclusão. */
.modal:has(.fin-modulo),
body:has(.fin-janelas) #topbar-acoes,
body:has(.fin-janelas) #assinatura-overlay {
  --lg-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  font-family: var(--lg-fonte);
}
.fin-janela .btn-success {
  color: var(--fin-caramelo);
  background: rgba(212, 163, 115, 0.08);
  border: 1px solid rgba(212, 163, 115, 0.62);
  box-shadow: none;
}
.fin-janela .btn-success:hover {
  color: #000;
  background: var(--fin-caramelo);
  border-color: var(--fin-caramelo);
}

@media (max-width: 640px) {
  /* No celular a última célula visível é a Descrição: ela fecha o cartão. */
  .fin-janela tr.fin-linha > td.fin-desc {
    border-right: 1px solid var(--fin-fio-cartao);
    border-radius: 0 10px 10px 0;
  }
  .fin-janela tr.fin-linha > td.fin-desc:first-child { border-radius: 10px; }
  .fin-janela .fin-tabela > div { padding: 0 6px 8px; }
}

@media (prefers-contrast: more) {
  .view:has(> .fin-janelas),
  #fin-cards,
  .fin-barra-geral,
  .fin-janelas { --fin-fio: rgba(255, 215, 0, 0.62); --fin-fio-cartao: rgba(255, 215, 0, 0.5); }
  .fin-janela tr.fin-mes-cabeca > th { color: var(--lg-tinta); }
}
@media (forced-colors: active) {
  .fin-janela tr.fin-mes-cabeca > th { border-bottom: 1px solid CanvasText; }
  .fin-janela tr.fin-linha > td { border-color: CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BALANÇO DO MÊS VIGENTE + BUSCA POR PACIENTE/TIPO (05/10/2026, pedido do dono)
   ─────────────────────────────────────────────────────────────────────────
   Dois balões novos — "RECEITAS DO MÊS" em AZUL e "DESPESAS DO MÊS" em LARANJA
   FORTE — ao lado de "Receitas (pagas)" e "Despesas (pagas)" na Gestão
   Financeira, e também no Painel (dashboard). Como vivem FORA de `#fin-cards`
   também, os tokens ficam no próprio `.fin-balao` (o Painel não tem a casca
   `.view:has(> .fin-janelas)`), e cada regra vem em DOIS seletores: um para o
   Painel (`.cards > .card.fin-balao`, que vence o `.cards > .card:nth-child()`
   do tema) e um para a Gestão Financeira (`#fin-cards .card.fin-balao`, que
   vence o `#fin-cards .card` desta folha).
     · retângulo fino, os quatro cantos com 12 px (nada de gota), vidro jateado
       PLANO: preto absoluto + película clara de 5,5 % + fio na cor do balão +
       brilho interno de 1 px; sombra limpa (preta, difusa). Sem backdrop-filter:
       sobre preto não há o que desfocar (a mesma razão da seção acima);
     · TODAS as letras (título, nome do mês, linha de apoio) e o NÚMERO na cor
       do balão — azul #4DA3FF (8,0:1 sobre #000) e laranja #FF6A00 (7,3:1):
       contraste nível AAA de texto; o resto da tela segue dourado/caramelo;
     · sans-serif do sistema e algarismos tabulares — o número não "dança"
       quando o balão é repintado ao vivo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ADITIVO DE 06/10/2026: a superfície (vidro líquido) e a borda (dourada) dos
   balões são as mesmas dos outros 5 cartões (regra "OS 7 BALÕES", acima); os
   títulos também viraram dourados. O que continua EXCLUSIVO do balão é a cor do
   NÚMERO e da linha de apoio: azul nas receitas, laranja forte nas despesas. */
.card.fin-balao {
  --fin-balao-cor: #4DA3FF;
  --fin-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}
.card.fin-balao--despesa { --fin-balao-cor: #FF6A00; }
.cards > .card.fin-balao,
#fin-cards .card.fin-balao {
  font-family: var(--fin-fonte);
  color: var(--fin-balao-cor);
}
.card.fin-balao .fin-balao-mes {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.95;
}
.cards > .card.fin-balao .valor,
#fin-cards .card.fin-balao .valor {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--fin-balao-cor);
  color: var(--fin-balao-cor);
  filter: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
/* O tamanho do número acompanha os VIZINHOS de cada tela: no Painel os outros cartões
   têm 26 px fixos (style.css); na Gestão Financeira todos usam o clamp fluido de
   `#fin-cards .card .valor`. Em qualquer dos dois, finAjustarValores (app.js) encolhe
   a partir desse teto quando o número não cabe. */
.cards > .card.fin-balao .valor { font-size: 26px; }
#fin-cards .card.fin-balao .valor { font-size: clamp(18px, 1.45vw, 26px); }
.card.fin-balao .fin-balao-apoio {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--fin-balao-cor);
  opacity: 0.85;
}
@media (prefers-contrast: more) {
  .card.fin-balao .fin-balao-mes,
  .card.fin-balao .fin-balao-apoio { opacity: 1; }
}
@media (forced-colors: active) {
  .cards > .card.fin-balao,
  #fin-cards .card.fin-balao { border: 1px solid CanvasText; }
}
@media print {
  .cards > .card.fin-balao, #fin-cards .card.fin-balao,
  .cards > .card.fin-balao .rotulo, #fin-cards .card.fin-balao .rotulo,
  .cards > .card.fin-balao .valor, #fin-cards .card.fin-balao .valor,
  .card.fin-balao .fin-balao-apoio {
    color: #000;
    -webkit-text-fill-color: #000;
    background: #fff;
    background-image: none;
    border-color: #999;
    box-shadow: none;
  }
}

/* A BUSCA: um campo de texto no começo da barra ("Nome do paciente" e "Tipo de
   lançamento"), filtrando as duas janelas enquanto se digita. `type=search`
   para o leitor de tela anunciar "campo de busca"; o × nativo do WebKit sai —
   o botão próprio tem 28 px de alvo e o mesmo desenho em todo navegador. A
   largura é flexível e fecha a linha sozinha no celular. (A outra `.fin-busca*`
   desta folha é o seletor de paciente do FORMULÁRIO, dentro de .fin-modulo.) */
.fin-lanc .fin-pesquisa {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 420px;
}
.fin-lanc .fin-pesquisa input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  padding-right: 34px;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--fin-fonte);
}
.fin-lanc .fin-pesquisa input[type="search"]::-webkit-search-cancel-button,
.fin-lanc .fin-pesquisa input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.fin-lanc .fin-pesquisa-limpar {
  position: absolute;
  right: 4px;
  top: 50%;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--fin-caramelo);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fin-lanc .fin-pesquisa-limpar:hover { color: #000; background: var(--fin-caramelo); }
.fin-lanc .fin-pesquisa-limpar:focus-visible { outline: none; box-shadow: 0 0 0 2px #000000, 0 0 0 4px #FFD700; }
.fin-lanc .fin-pesquisa-limpar.hidden { display: none; }
.fin-lanc .fin-filtro-aviso .fin-aviso-acoes { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fin-lanc .fin-filtro-aviso .fin-aviso-termo { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .fin-lanc .fin-pesquisa { flex-basis: 100%; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINHA ÚNICA (aditivo do dono, 06/10/2026): os 7 balões lado a lado numa só
   linha no tamanho padrão de tela, e a barra "Lançamentos · busca e filtros
   das duas janelas" também numa linha. Abaixo de 1100 px os balões vão a 4 + 3,
   depois 2 por linha e 1 no celular; a barra volta a quebrar abaixo de 1300 px
   (onde as janelas se empilham e os atalhos "↓ Receitas / ↓ Despesas" aparecem).
   O número não quebra nem vaza: encolhe (finAjustarValores, app.js).
   ═══════════════════════════════════════════════════════════════════════════ */
#fin-cards { gap: 12px; margin-bottom: 18px; }
@media (min-width: 1100px) {
  #fin-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #fin-cards .card { padding: 14px 12px 12px; min-width: 0; }
  #fin-cards .card .rotulo { font-size: 11.5px; letter-spacing: 0.03em; }
}
@media (min-width: 700px) and (max-width: 1099px) { #fin-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) { #fin-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { #fin-cards { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1300px) {
  .fin-barra-geral .painel-head { flex-wrap: nowrap; gap: 10px; padding: 12px 16px; }
  .fin-barra-geral .fin-barra-titulo { flex: 0 0 auto; }
  .fin-barra-geral .fin-barra-titulo small { white-space: nowrap; }
  /* `wrap` e não `nowrap`: com a data vazia tudo cabe numa linha (a partir de 1300 px); quando
     "Qual data" aparece numa janela estreita (1300–~1350 px), os filtros quebram DENTRO do
     bloco da direita em vez de vazar por cima do título (revisão de 06/10/2026). */
  .fin-barra-geral .barra-filtros { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .fin-barra-geral .barra-filtros .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; flex: 0 0 auto; }
  .fin-barra-geral .barra-filtros select { flex: 0 0 auto; }
  .fin-lanc .fin-pesquisa { flex: 1 1 140px; min-width: 130px; max-width: 320px; }
}
/* Os três cartões financeiros do Painel também encolhem o número em vez de quebrar. */
#dash-card-saldo .valor,
#dash-card-a-receber .valor,
#dash-card-a-pagar .valor { white-space: nowrap; overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINAÇÃO POR 22 DIAS CORRIDOS (aditivo de 06/10/2026): um paginador no topo e
   outro no rodapé da tabela de cada janela — "Página 2 de 7 · 15/09/2026 a
   06/10/2026 (22 dias) · 48 lançamentos", ‹ 1 … 5 6 7 › e "Ir para [ ] / 7".
   Mesmo desenho dos botões da janela (fio dourado); a página atual é a liga
   dourado → caramelo, como o "+ Nova Receita".
   ═══════════════════════════════════════════════════════════════════════════ */
.fin-janela .fin-paginas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--lg-tinta-media, var(--lg-tinta));
}
.fin-janela .fin-paginas--topo { border-bottom: 1px solid var(--fin-fio); }
.fin-janela .fin-paginas--rodape { border-top: 1px solid var(--fin-fio); }
.fin-janela .fin-paginas strong { color: var(--fin-ouro); font-weight: 600; }
.fin-janela .fin-paginas small { font-size: 12px; color: var(--lg-tinta-media, var(--lg-tinta)); }
.fin-janela .fin-paginas-nav { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fin-janela .fin-pag-num,
.fin-janela .fin-pag-seta { min-width: 30px; padding: 3px 7px; font-variant-numeric: tabular-nums; }
.fin-janela .fin-pag-atual,
.fin-janela .fin-pag-atual:hover { color: #000; background: var(--fin-liga); border-color: transparent; font-weight: 700; }
.fin-janela .fin-pag-seta[disabled] { opacity: 0.35; cursor: default; }
.fin-janela .fin-pag-reticencias { padding: 0 2px; color: var(--lg-tinta-media, var(--lg-tinta)); }
.fin-janela .fin-pag-ir { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; white-space: nowrap; }
.fin-janela .fin-pag-ir input {
  width: 58px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid var(--fin-fio);
  background: rgba(255, 255, 255, 0.04);
  color: var(--lg-tinta);
  font-family: var(--fin-fonte);
  font-size: 12.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.fin-janela .fin-pag-ir input::-webkit-outer-spin-button,
.fin-janela .fin-pag-ir input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fin-janela .fin-pag-ir input:focus-visible { outline: none; box-shadow: 0 0 0 2px #000000, 0 0 0 4px #FFD700; }
.fin-janela .fin-mes-pagina { color: var(--lg-tinta-media, var(--lg-tinta)); }
.fin-janela .fin-lote-fora { font-weight: 400; color: var(--lg-tinta-media, var(--lg-tinta)); }
/* Mudanças de outras pessoas em espera enquanto há seleção (app.js: finPintarSelecao). */
.fin-janela .fin-lote-espera { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fin-ouro, #FFD700); font-size: 12.5px; }
/* A linha salva (e qualquer linha levada à vista) não para atrás da topbar sticky. */
.fin-janela tr.fin-linha { scroll-margin-top: calc(var(--fin-topo, 96px) + 8px); scroll-margin-bottom: 16px; }
/* O lançamento recém-salvo, por 2,5 s (app.js: desenharFinanceiro → finFocoId). */
.fin-janela tr.fin-linha.fin-linha-salva > td { box-shadow: inset 0 1px 0 #FFD700, inset 0 -1px 0 #FFD700; background-color: rgba(255, 215, 0, 0.08); }
@media (pointer: coarse) {
  .fin-janela .fin-pag-num,
  .fin-janela .fin-pag-seta { min-width: 36px; min-height: 36px; }
  .fin-janela .fin-pag-ir input { min-height: 36px; }
}
@media (max-width: 640px) {
  .fin-janela .fin-paginas { padding: 8px 10px; }
  .fin-janela .fin-pag-ir { margin-left: 0; }
}
/* O gráfico do Painel diz a régua dele (pagas, pela data do pagamento) — o balão do mês, ao lado, é por vencimento. */
.painel-grafico .painel-head h2 .dash-grafico-regra { font-size: 12px; font-weight: 400; color: var(--lg-tinta-media, var(--cinza)); margin-left: 6px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RELATÓRIOS POR PERÍODO — o diálogo "Relatório financeiro" (15/10/2026, pedido do dono)
   Aberto pelos botões CSV/PDF das janelas e da barra de cima (app.js:
   finAbrirRelatorio). Conteúdo (Receitas | Despesas | as duas), os nove
   períodos em botões-rádio, data de início e de fim, data de referência,
   status, a prévia que o servidor devolve e os dois downloads. Vive dentro de
   `.fin-modulo`: campos, selects e botões já vêm do formulário do lançamento
   (preto absoluto, fio dourado, cantos 8 · 10 · 12); aqui só o que é dele.
   ═══════════════════════════════════════════════════════════════════════════ */
.modal:has(.fin-rel) { max-width: 680px; }
.fin-rel .fin-rel-intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--fin-texto-fraco); text-align: justify; hyphens: auto; }
.fin-rel .fin-rel-intro strong { color: var(--fin-texto); }
.fin-rel .fin-rel-grupo { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.fin-rel legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fin-ouro);
}
.fin-rel .fin-rel-opcoes { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* O botão-rádio: o <input> fica no DOM (Tab, setas e leitor de tela o tratam como
   rádio de verdade) e o <span> ao lado é o que se vê. */
.fin-rel .fin-rel-chip { position: relative; display: block; margin: 0; cursor: pointer; }
.fin-rel .fin-rel-chip input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.fin-rel .fin-rel-chip span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--fin-borda);
  border-radius: var(--fin-canto-3);
  background-color: rgba(255, 255, 255, 0.035);
  background-image: var(--fin-vidro);
  color: var(--fin-texto);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
.fin-rel .fin-rel-chip small { font-size: 11px; font-weight: 400; color: var(--fin-texto-fraco); }
.fin-rel .fin-rel-chip:hover span { border-color: var(--fin-borda-caramelo); }
.fin-rel .fin-rel-chip input:checked + span {
  border-color: var(--fin-ouro);
  background-image: var(--fin-liga-suave);
  box-shadow: inset 0 0 0 1px var(--fin-ouro);
}
.fin-rel .fin-rel-chip input:checked + span small { color: var(--fin-caramelo); }
.fin-rel .fin-rel-chip input:focus-visible + span { box-shadow: 0 0 0 2px #000000, 0 0 0 4px var(--fin-ouro); }
.fin-rel .fin-rel-datas,
.fin-rel .fin-rel-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fin-rel .fin-rel-datas { margin-top: 12px; }
.fin-rel .fin-rel-datas label,
.fin-rel .fin-rel-linha label { margin-bottom: 0; }
/* Os campos do diálogo com o contorno no tom forte: com o fio de 28% do formulário
   do lançamento, o campo de data vazio e os selects ficavam a ~2:1 sobre o preto
   (WCAG 1.4.11 pede 3:1 para o limite de um controle). */
/* `.redp > .redp-campo` e não `.redp-campo`: vidro-escuro-dourado.css pinta o
   campo de data com `html .redp > .redp-campo` (0,2,1), carregado depois. Fora do
   foco: o anel dourado do foco (`:focus-within`) continua o da folha dele. */
.fin-rel .redp > .redp-campo:not(:focus-within),
.fin-rel select:not(:focus) { border-color: var(--fin-borda-forte); }
.fin-rel .fin-rel-linha { margin-bottom: 12px; }
/* Cor LITERAL, e não var(--fin-caramelo): o gerador do tema claro decide o papel de cada
   variável pela contagem dos usos, e um uso a mais como texto virava o papel dela —
   repintando no claro regras que já estão no ar (gerar.py recusou, 15/10/2026). */
.fin-rel .fin-rel-nota { margin: -4px 0 12px; font-size: 12.5px; line-height: 1.45; color: #D4A373; text-align: justify; }
.fin-rel .fin-rel-check { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; font-size: 13px; color: var(--fin-texto); cursor: pointer; }
.fin-rel .fin-rel-check input { display: inline-block; flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #FFD700; }
.fin-rel .fin-rel-check strong { color: var(--fin-ouro); font-weight: 600; }

/* A prévia: o período que o SERVIDOR resolveu, contagens e totais. */
.fin-rel .fin-rel-previa {
  min-height: 64px;
  margin: 4px 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--fin-borda);
  border-left: 3px solid var(--fin-ouro);
  border-radius: var(--fin-canto-2);
  background-color: rgba(255, 255, 255, 0.03);
  font-size: 13px;
  color: var(--fin-texto);
  transition: opacity 140ms ease;
}
.fin-rel .fin-rel-previa--atualizando { opacity: 0.55; }
.fin-rel .fin-rel-previa-periodo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 8px; }
.fin-rel .fin-rel-previa-periodo > span {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fin-texto-fraco);
}
.fin-rel .fin-rel-previa-periodo strong { font-size: 14px; color: var(--fin-ouro); }
.fin-rel .fin-rel-previa-periodo small { color: var(--fin-texto-fraco); }
.fin-rel .fin-rel-previa-linha {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 215, 0, 0.14);
  line-height: 1.45;
}
.fin-rel .fin-rel-previa-nome { font-weight: 700; }
.fin-rel .fin-rel-previa-linha--receita .fin-rel-previa-nome { color: var(--fin-ouro); }
.fin-rel .fin-rel-previa-linha--despesa .fin-rel-previa-nome { color: var(--fin-caramelo); }
.fin-rel .fin-rel-previa-linha small { color: var(--fin-texto-fraco); }
.fin-rel .fin-sep { color: var(--fin-texto-fraco); }
.fin-rel .fin-rel-positivo { color: #6EE7A0; }
.fin-rel .fin-rel-negativo { color: #FF8A8A; }
.fin-rel .fin-rel-carregando { margin: 0; color: var(--fin-texto-fraco); }
.fin-rel .fin-rel-vazio { margin: 8px 0 0; font-size: 12.5px; color: var(--fin-caramelo); }
.fin-rel .fin-rel-vazio--erro { color: #FF8A8A; }
.fin-rel .fin-rel-acoes-tela { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fin-rel .fin-rel-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fin-rel .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; }

@media (max-width: 560px) {
  .fin-rel .fin-rel-opcoes--periodo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-rel .fin-rel-opcoes--tipo,
  .fin-rel .fin-rel-datas,
  .fin-rel .fin-rel-linha { grid-template-columns: minmax(0, 1fr); }
  .fin-rel .fin-rel-previa-linha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fin-rel .fin-rel-acoes .btn { flex: 1 1 auto; }
}
@media (pointer: coarse) {
  .fin-rel .fin-rel-check input { width: 22px; height: 22px; }
}