/* Clone do Reservame, grupo financeiro: estilos só das telas deste grupo (cobrança,
   pagamentos, conciliação, reembolsos, vendas diárias e BI). Tokens de cor e fonte vêm
   do :root do estilo.css; tabela, KPIs e ficha vêm do estilo-rm.css. */

/* Abas de filtro da cobrança (A cobrar / Cobradas / Todas) e os links de mês do BI, em linha. */
.fin-abas { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-abas .aba { padding: 0 18px; min-height: 48px; }

/* Lista compacta dentro de uma célula (as reservas de uma venda). */
.fin-lista { display: grid; gap: 4px; }
.fin-lista li { font-size: 14px; }

/* Ações por linha: botões lado a lado num bloco dentro da célula (o td continua célula
   de tabela). Cada formulário de uma ação some como caixa, só o botão fica. */
.fin-acoes { display: flex; gap: 6px; }
.fin-acoes form { display: contents; }
.fin-acoes-ficha { flex-wrap: wrap; margin: 4px 0 8px; }
.fin-acoes-ficha .botao { flex: 1 1 160px; }

/* Formulários do grupo: respiro entre as linhas de campos do .rm-form-2 (que nasce sem). */
.fin-form .rm-form-2 { row-gap: 12px; }

/* Telefone e outros valores que não devem quebrar em três linhas na tabela. */
.rm-tabela .fin-nowrap { white-space: nowrap; }

/* Caixa de conciliar por linha, com área de toque de 44 px. */
.fin-caixa input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 10px; accent-color: var(--azul); cursor: pointer; }
.fin-caixa-campo label { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; }
.fin-caixa-campo input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; accent-color: var(--azul); }
.fin-conciliar { display: grid; gap: 16px; }
.fin-conciliar .botao-principal { justify-self: start; }

/* Barra proporcional do BI: <progress>, porque a política da página não deixa style="". */
.fin-barra {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 10px; border: 0; border-radius: 999px; overflow: hidden;
  background: var(--preenchimento);
}
.fin-barra::-webkit-progress-bar { background: var(--preenchimento); border-radius: 999px; }
.fin-barra::-webkit-progress-value { border-radius: 999px; background: var(--azul); }
.fin-barra::-moz-progress-bar { border-radius: 999px; background: var(--azul); }
.rm-tabela .fin-barra-celula { min-width: 140px; vertical-align: middle; }

/* Seções do BI, uma embaixo da outra. */
.fin-secao { display: grid; gap: 8px; margin-top: 8px; }

/* Campo de mês do BI: o botão "Ir" fica na altura do campo. */
.fin-meses { align-items: end; }

@media (max-width: 767px) {
  /* No cartão, as ações ficam embaixo do rótulo, alinhadas à direita, e quebram se precisar. */
  .rm-tabela.rm-cartoes td.acoes { flex-wrap: wrap; }
  .rm-tabela.rm-cartoes td .fin-acoes { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
  .rm-tabela.rm-cartoes td.fin-caixa { justify-content: flex-end; }
  .rm-tabela.rm-cartoes td.fin-barra-celula { display: block; padding-top: 0; }
  .rm-tabela.rm-cartoes td.fin-nowrap { white-space: normal; }
  .fin-acoes-ficha .botao { flex-basis: 100%; }
}