/* V1433 — Efetuar baixa (Contas a Pagar): modal compacto, sem barra de rolagem, rodapé sempre visível.
   Substitui financeiro-v1431-baixa-pagar.css. Aplicação restrita ao modal que contém .fin-baixa. */
.fin-modal:has(.fin-baixa) {
  width: min(860px, calc(100vw - 24px)) !important;
  max-width: 860px !important;
  max-height: calc(100vh - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box;
}
.fin-modal:has(.fin-baixa) .fin-modal-head { flex: 0 0 auto; padding: 10px 18px !important; }
.fin-modal:has(.fin-baixa) .fin-modal-heading h2 { margin: 0; font-size: 19px; line-height: 1.2; }
.fin-modal:has(.fin-baixa) #finModalForm { display: flex !important; flex-direction: column !important; flex: 1 1 auto; min-height: 0; overflow: hidden !important; }
.fin-modal:has(.fin-baixa) .fin-modal-body {
  flex: 1 1 auto; min-height: 0; padding: 12px 18px !important; box-sizing: border-box;
  overflow-x: hidden !important; overflow-y: auto !important;
  scrollbar-width: none;            /* sem barra visível; em telas muito baixas o conteúdo ainda rola com a roda/toque */
  -ms-overflow-style: none;
}
.fin-modal:has(.fin-baixa) .fin-modal-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.fin-modal:has(.fin-baixa) .fin-modal-foot { flex: 0 0 auto; padding: 10px 18px !important; }

.fin-baixa { display: flex; flex-direction: column; gap: 12px; }

/* Resumo da conta: uma faixa compacta em duas linhas */
.fin-baixa-resumo { border: 1px solid #dbe3ee; border-radius: 10px; background: #f6f8fb; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.fin-baixa-resumo-topo,
.fin-baixa-resumo-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fin-baixa-resumo-valores { border-top: 1px solid #dbe3ee; padding-top: 8px; }
.fin-baixa-resumo strong { display: block; font-size: 13.5px; font-weight: 600; color: #1b2433; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-baixa-resumo-valores strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.fin-baixa-rotulo { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #5b6676; margin-bottom: 2px; }
.fin-baixa-saldo strong { color: #b4321f; font-size: 17px; }
.fin-baixa-vencido { color: #b4321f !important; }

/* Campos: 3 colunas — valor ocupa a 1ª coluna em duas linhas; observações na linha inteira */
.fin-baixa-grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; align-items: start; }
.fin-baixa-grade .fin-field { margin: 0 !important; gap: 3px !important; min-width: 0; }
.fin-baixa-grade .fin-field > span { font-size: 11px; font-weight: 600; color: #66758b; line-height: 1.15; }
.fin-baixa-grade .fin-field .input { min-height: 36px; height: 36px; padding: 6px 10px; font-size: 13.5px; box-sizing: border-box; width: 100%; }
.fin-baixa-valor { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 6px; }
.fin-baixa-valor input[name="valor"] { height: 46px !important; min-height: 46px !important; font-size: 20px !important; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-baixa-grade > label:has([name="data"]) { grid-column: 2; grid-row: 1; }
.fin-baixa-grade > label:has([name="conta_id"]) { grid-column: 3; grid-row: 1; }
.fin-baixa-grade > label:has([name="forma_pagamento"]) { grid-column: 2; grid-row: 2; }
.fin-baixa-grade > label:has([name="comprovante"]) { grid-column: 3; grid-row: 2; }
.fin-baixa-grade > label:has([name="observacoes"]) { grid-column: 1 / -1; grid-row: 3; }

.fin-baixa-atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-baixa-atalhos .btn { font-size: 12px; min-height: 30px; padding: 4px 10px; }
.fin-baixa-atalhos .btn.is-ativo { border-color: #1d5fbf; background: #eaf1fc; color: #1d4f9c; }
.fin-baixa-aviso { margin: 0; font-size: 12.5px; line-height: 1.3; color: #5b6676; }
.fin-baixa-aviso.is-ok { color: #1e6b40; font-weight: 600; }
.fin-baixa-aviso.is-parcial { color: #8a5a00; font-weight: 600; }
.fin-baixa-aviso.is-erro { color: #b4321f; font-weight: 600; }

/* Telas estreitas: uma coluna, na ordem natural dos campos */
@media (max-width: 720px) {
  .fin-baixa-resumo-topo, .fin-baixa-resumo-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-baixa-grade { grid-template-columns: minmax(0, 1fr); }
  .fin-baixa-grade > *, .fin-baixa-valor { grid-column: 1 !important; grid-row: auto !important; }
}