/* Programa de pontos: a régua do admin, o selo no item, o saldo no topo e o
   extrato. Folha própria, como mídia e passeio: o assunto cresce sozinho e não
   tem por que engordar o CSS de todas as telas. */

.lista-simples { margin: 0; padding-left: var(--spacing-16); font-size: var(--text-body-sm); color: var(--text-primary); }
.lista-simples li { margin-bottom: var(--spacing-8); }
.lista-simples li:last-child { margin-bottom: 0; }

/* --- o saldo no topo ---------------------------------------------------- */
.topo-pontos {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px; border-radius: var(--radius-tags);
  background: var(--color-mint-wash); color: #0a5c38; text-decoration: none;
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.topo-pontos:hover { filter: brightness(0.96); }
.topo-pontos__icone { flex: 0 0 auto; }
.topo-pontos__numero { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.topo-pontos--vazio { background: var(--color-peach-wash); color: #a13312; }
@media (max-width: 640px) {
  .topo-pontos__rotulo { display: none; }
}

/* --- o selo no item do pedido ------------------------------------------- */
.linha__pontos { position: relative; display: inline-flex; }
.selo--pontos { background: var(--color-mint-wash); color: #0a5c38; }
.selo--pontos[aria-expanded="true"] { box-shadow: 0 0 0 2px #0a5c38; }
.balao--pontos { right: auto; min-width: min(320px, 90vw); }
.balao__parcelas {
  list-style: none; margin: var(--spacing-8) 0 0; padding: var(--spacing-8) 0 0;
  border-top: 1px solid var(--color-cloud-gray);
  font-size: var(--text-body-sm); display: grid; gap: 4px;
}
.balao__parcela { display: flex; gap: var(--spacing-8); align-items: baseline; }
.balao__parcela-pontos { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); color: #0a5c38; min-width: 4ch; }
.balao__parcela-regua { color: var(--text-meta); font-size: 11px; }

/* --- totais de pontos nos rodapés --------------------------------------- */
.pontos-total { color: #0a5c38; font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra__pontos { color: var(--color-mint-wash); font-variant-numeric: tabular-nums; }

/* --- o extrato ---------------------------------------------------------- */
.extrato__pontos--credito { color: #0a5c38; }
.extrato__pontos--debito { color: #a13312; }
.extrato__vence { font-size: 11px; color: var(--text-meta); white-space: nowrap; }
.paginacao { display: flex; gap: var(--spacing-8); justify-content: flex-end; margin-top: var(--spacing-12); }

/* --- educação ----------------------------------------------------------- */
.aula__resumo { color: var(--text-meta); font-size: var(--text-body-sm); margin: 0 0 var(--spacing-16); max-width: 70ch; }
.aula__video video { width: 100%; max-height: 60vh; border-radius: var(--radius-cards-sm); background: #000; }
.aula__texto { max-width: 76ch; line-height: 1.6; }
.quiz__pergunta { padding: var(--spacing-12) 0; border-top: 1px solid var(--color-cloud-gray); }
.quiz__pergunta--errada .forma__legenda { color: #a13312; }
.quiz__alternativa { display: flex; gap: var(--spacing-8); align-items: flex-start; padding: 6px 0; cursor: pointer; }
.pergunta-do-cadastro { background: var(--color-cloud-gray, #f4f4f4); box-shadow: none; margin-bottom: var(--spacing-12); }