/*
 * Crédito com fornecedor.
 *
 * Uma coisa governa este desenho: **o saldo tem de ser lido antes do resto.**
 * Quem abre esta janela tem uma pergunta só — "quanto ainda tenho aqui?" — e a
 * resposta é um número que decide se vale pedir abatimento na próxima nota.
 *
 * Por isso o saldo é o que está grande em cada linha, e o valor original fica
 * ao lado, menor, como contexto. O contrário — original grande, saldo pequeno —
 * faria alguém cobrar o que já foi consumido.
 */

.cred-janela {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cred-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cred-linha {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
}

.cred-linha-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cred-linha-topo strong {
  font-size: var(--t-lg);
  font-variant-numeric: tabular-nums;
}

/* O valor original, quando o crédito já foi usado em parte: contexto, não destaque. */
.cred-usado {
  font-size: var(--t-sm);
  color: var(--texto-3);
}

/*
 * O motivo fica sempre visível, nunca num balão de ajuda.
 *
 * Foi o que a construtora pediu — "justificando o porquê desse crédito" — e é
 * a frase que responde "de onde veio isso?" daqui a seis meses. Escondê-la
 * atrás de um ícone economizaria espaço na única linha que faz o número servir
 * para alguma coisa.
 */
.cred-motivo {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--texto-2);
}

.cred-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--t-xs);
  color: var(--texto-3);
}

@media (max-width: 720px) {
  .cred-rodape { flex-direction: column; align-items: flex-start; gap: 6px; }
}