/*
 * Painel · estilos de portal ADM: pagamentos, reconciliação e devoluções — pacote B4a.
 * Mesmas regras do painel.css: só layout, tudo com var(--token); nada de cor escrita à mão, de @font-face ou de @import.
 * Este arquivo é só do pacote: o painel.css fica para o que é de todos.
 */

/* ---------- Pagamentos (portal ADM) ---------- */

/* Título de seção em rótulo pequeno, como no protótipo (Pagos sem partida entregue, Divergências abertas...). */
.pg-secao { margin: 0; font: 600 13px/16px var(--font-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }

/* Cada bloco (título e tabela) com o espaço do protótipo. */
.pg-bloco { display: flex; flex-direction: column; gap: var(--espaco-3); }

/* O cartão de resumo que pede atenção (o protótipo o destaca pela borda e pelo fundo). */
.pg-resumo--atencao { border-color: var(--atencao-ponto); background: var(--atencao-suave); }

/* "Mostrando 20 de 57" e o botão para ver mais. */
.pg-mais { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; }

/* Anterior, "Página 2 de 5" e próxima. */
.pg-paginas { display: flex; flex-wrap: wrap; gap: var(--espaco-3); align-items: center; justify-content: space-between; }

/* Uma célula com o selo e, embaixo, uma linha de apoio (motivo da recusa, motivo da falha, dia da conferência). */
.pg-pilha { display: flex; flex-direction: column; gap: var(--espaco-1); align-items: flex-start; }
.pg-pilha .ui-tabela__sub { max-width: 32ch; }

/* Aprovar e Recusar lado a lado na linha, como no protótipo; no celular podem quebrar. */
.pg-acoes { display: flex; flex-wrap: nowrap; gap: var(--espaco-2); align-items: center; }
.pg-nowrap { white-space: nowrap; }
@media (max-width: 719.98px) {
  .pg-pilha { align-items: flex-end; }
  .pg-pilha .ui-tabela__sub { text-align: right; max-width: none; }
  .pg-acoes { flex-wrap: wrap; }
}

/* Texto do que vai ser feito, no alto do diálogo de motivo. */
.pg-dialogo-texto { margin: 0; color: var(--texto); }

/* As três abas (com os dois selos) cabem inteiras em 390 px: menos espaço de lado e letra um ponto menor. */
@media (max-width: 479.98px) {
  .pg-abas { gap: 0; }
  .pg-abas a { padding: 0 var(--espaco-3); font-size: 14px; gap: var(--espaco-1); }
}