/*
 * A janela do recebimento e o painel do recibo.
 *
 * O desenho tem um trabalho só: deixar a soma das formas visível o tempo todo.
 * Quem digita valores numa conta de R$ 5.000 precisa saber, a cada tecla, se
 * fechou, se faltou ou se passou — e é por isso que o placar é a única peça
 * colorida da janela.
 */

.rec-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
}
.rec-descricao { font-weight: 500; }

/* ── As formas ────────────────────────────────────────────────────────────── */

/*
 * A legenda fica fora das linhas, alinhada às mesmas colunas. Rótulo em cada
 * linha repetiria "Forma / Valor / Conta" quatro vezes numa janela que tem
 * duas linhas na maioria das vezes.
 */
.rec-legenda,
.rec-forma-campos {
  display: grid;
  /* O valor é a coluna que não pode cortar: "28.372,09" cabendo pela metade
     transforma a única conta desta janela numa adivinhação. */
  grid-template-columns: 1fr 1.15fr 1.5fr 1.35fr;
  gap: 8px;
}
.rec-legenda {
  font-size: var(--t-xs);
  color: var(--texto-3);
  padding: 0 2px 4px;
}

.rec-formas { display: flex; flex-direction: column; gap: 6px; }

.rec-forma {
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  gap: 6px;
}
/* O espaço do botão de remover continua ocupado na primeira linha: sem ele as
   colunas dançariam ao acrescentar a segunda forma. */
.rec-sem-botao { display: block; width: 30px; }

.rec-forma input,
.rec-forma select { min-width: 0; }

/*
 * Qual cartão. Ocupa uma linha própria, abaixo dos campos, e só existe quando
 * a forma é cartão.
 *
 * Embaixo e não ao lado porque a fileira de cima já tem quatro colunas: enfiar
 * uma quinta espremeria o valor, que é a única coluna desta janela que não
 * pode cortar — "28.372,09" pela metade transforma a conta numa adivinhação.
 */
.rec-forma-cartao {
  grid-column: 1;
  margin-top: 2px;
}
.rec-forma-cartao select { width: 100%; }

/* ── O placar ─────────────────────────────────────────────────────────────── */

.rec-placar {
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-size: var(--t-md);
  font-weight: 500;
  border: 1px solid transparent;
}
.rec-placar[data-estado='fecha'] {
  background: var(--verde-suave);
  border-color: var(--verde-claro);
  color: var(--verde-escuro);
}
.rec-placar[data-estado='falta'] {
  background: var(--ambar-suave);
  border-color: var(--ambar);
  color: var(--ambar);
}
.rec-placar[data-estado='passa'] {
  background: var(--tijolo-suave);
  border-color: var(--tijolo);
  color: var(--tijolo);
}

/* [hidden] perde para display:flex — a mesma armadilha do período
   personalizado, e aqui ela mostrava "falta receber" numa baixa que fecha. */
.rec-saldo[hidden] { display: none; }

.rec-saldo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--cartao-2);
}
.rec-saldo-texto { font-size: var(--t-sm); color: var(--texto-2); line-height: 1.5; }
.rec-saldo .campo { max-width: 220px; }

/* ── O painel do recibo ───────────────────────────────────────────────────── */

.rec-ok {
  text-align: center;
  padding: 16px 12px 18px;
  background: var(--verde-suave);
  border: 1px solid var(--verde-claro);
  border-radius: var(--r-md);
}
.rec-ok-valor {
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -.5px;
}
.rec-ok-texto { font-size: var(--t-sm); color: var(--verde-escuro); margin-top: 3px; }

/* Saldo com o mesmo peso do valor recebido: quem recebeu três de cinco não
   pode sair da janela achando que a conta acabou. */
.rec-saldo-gerado {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--ambar-suave);
  border: 1px solid var(--ambar);
  color: var(--ambar);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.rec-selo-enviado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--verde-escuro);
  background: var(--verde-suave);
  border-radius: var(--r-pill);
  padding: 4px 11px;
}

@media (max-width: 620px) {
  .rec-legenda { display: none; }
  .rec-forma-campos { grid-template-columns: 1fr 1fr; }
}

/* ── A faixa da nota fiscal ─────────────────────────────────────────────────
 *
 * O recibo aponta para a nota em vez de gerá-la, e esta faixa é esse ponteiro.
 * Fica discreta quando a nota existe e âmbar quando falta — mas nunca
 * vermelha: o recibo é documento legítimo, e alarmar o painel inteiro no
 * momento em que a pessoa vai mandar o papel ao cliente seria dizer que ela
 * fez algo errado ao receber.
 */
.rec-nota {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cartao-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  line-height: 1.45;
}
.rec-nota[data-pendente='1'] {
  background: var(--ambar-suave);
  border-color: var(--ambar);
}
.rec-nota > span { flex: 1; min-width: 0; }
.rec-nota button { flex: none; }

@media (max-width: 560px) {
  .rec-nota { flex-direction: column; align-items: stretch; }
}