/* Contas a Pagar (mod-contas-pagar). Prefixo cpg-.

   A MOLDURA É DO DESIGN SYSTEM, não daqui: `.ds-lst` + `.ds-lst-cab` +
   `.ds-lst-cab-acoes` (cabeçalho), `.ds-chips`/`.ds-chip` (filtros de estado),
   `.ds-table` com `.ds-td-hero`/`.ds-td-actions`/`.ds-cell-muted`/`.ds-cell-num`
   (tabela em desktop, cartões abaixo dos 768 px) e `.ds-empty` (vazio e erro).

   A `.cpg-cab-acoes` que aqui estava era uma cópia da `.ds-lst-cab-acoes` com duas
   propriedades de FLEX (`margin-left:auto`, `flex-shrink:0`) dentro de um contentor
   que é GRID — não faziam nada — e sem o `grid-column: 1 / -1` que em mobile manda os
   botões para a linha de baixo. Era por isso que a 390 px o título ficava com 0 px de
   largura e os botões saíam assimétricos. Saíram pela mesma razão a
   `.cpg-chips`/`.cpg-chip` (clone da `.ds-chip`), a `.cpg-loading` (substituída pelo
   skeleton do MOD.ui) e as `.cpg-sub`/`.cpg-num`/`.cpg-acoes`/`.cpg-vazio`, todas com
   equivalente `ds-*` já existente.

   Aqui fica só o que é MESMO deste ecrã. */

/* Anfitrião das modais. Vazio continuava a ser um item de flex da `.ds-lst` e o `gap`
   dela deixava um vão morto no fim da página. */
.cpg-modal:empty {
    display: none;
}

/* O IBAN é o segundo nível da célula-título. Em `display: block` fica por baixo do nome
   em desktop; abaixo dos 768 px a célula-título é flex e o `block` não a altera — o
   IBAN fica à direita do nome, que é como todas as `.ds-td-hero` da app se comportam. */
.cpg-iban {
    display: block;
}

/* Um fornecedor sem IBAN não entra no ficheiro de pagamentos do banco — tem de se ver
   na lista, e não só quando o ficheiro sai mais curto do que se esperava. */
.cpg-sem-iban {
    color: var(--error-600, #DA0A0D);
    font-weight: 600;
}