/*
 * 85_recompensas.css — LEVA 2309 (docs/GUSTAVO-2309.md) · dono: pacote P5 recompensas.
 *
 * Benefícios por marco, o voucher com QR e a página do parceiro — sem nenhum
 * valor em reais em lugar nenhum desta folha.
 *
 * Criado VAZIO pelo P0 `fundacao-2309` para que o pacote dono só precise
 * escrever aqui dentro. Não precisa de @import: o layout usa
 * `stylesheet_link_tag :app` e o Propshaft emite um <link> por folha, em
 * ordem alfabética — o número no nome é a posição na cascata.
 *
 * Os tokens (`--esp-*`, `--cor-marca`, `--raio-*`, `--texto-*`…) são os de
 * `01_tokens.css`; nenhum valor literal novo entra aqui além do que os
 * componentes de `10_componentes.css`/`12_modal.css` já não resolvem sozinhos
 * (`.cartao`, `.selo`, `.campo`, `.dados`, `.vazio`, `.aviso`, `.botao`).
 */

/* ═══ O CARD, no admin e no perfil do aluno ════════════════════════════════
   `.recompensa-card` só ajusta o que `.cartao`/`.cartao--acionavel` não
   cobrem: a pilha vertical do corpo e a régua de respiro entre as metas. */
.recompensa-card .cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.recompensas-grade {
  margin-top: var(--esp-4);
}

.recompensas-lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  margin-top: var(--esp-4);
  padding: 0;
  list-style: none;
}

/* ═══ O VOUCHER DO ALUNO (dentro do modal/detalhe) ═════════════════════════
   QR centrado, código em fonte monoespaçada (é o que a pessoa lê em voz alta
   no balcão do parceiro, ou digita se o QR não escanear). */
.voucher-do-aluno {
  align-items: center;
  text-align: center;
}

.voucher-do-aluno__qr {
  width: 11rem;
  height: 11rem;
  border-radius: var(--raio-2);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}

.voucher-do-aluno__codigo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
}

/* A celebração é leve, de propósito (o "+N"/confete é do P4): o selo do QR
   assenta no lugar em vez de simplesmente aparecer. Só com preferência
   explícita por movimento — o padrão é sem animação nenhuma. */
@media (prefers-reduced-motion: no-preference) {
  .voucher-do-aluno__qr {
    animation: recompensa-assenta var(--tempo-normal) var(--curva-saida) both;
  }

  @keyframes recompensa-assenta {
    from {
      opacity: 0;
      transform: scale(0.85) translateY(6px);
    }
  }
}

/* ═══ A TELA DO PARCEIRO (/voucher/:codigo — pública, sem chrome do app) ═══
   Lida no balcão, muitas vezes no celular, sob pressa: um bloco vertical
   centrado, com o estado antes de qualquer outra coisa. */
.voucher {
  max-width: var(--largura-leitura);
  margin: var(--esp-10) auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  text-align: center;
}

.voucher__titulo {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-titulo);
}

.voucher__parceiro {
  color: var(--texto-suave);
  margin-top: calc(var(--esp-2) * -1);
}

.voucher__codigo {
  font-family: var(--fonte-mono);
  font-size: var(--texto-md);
  color: var(--texto-suave);
}

.voucher__formulario {
  width: 100%;
  max-width: 20rem;
  margin-top: var(--esp-2);
}

.voucher__ajuda {
  color: var(--texto-tenue);
  font-size: var(--texto-sm);
}