/*
 * ONDA B — catálogo: curso, aula, avaliação e banco de questões.
 *
 * PEDIDO AO INTEGRADOR: `application.css` (dele) precisa de
 * `@import "40_catalogo.css";` DEPOIS de `10_componentes.css`. Enquanto esse
 * @import não entrar, as telas renderizam sem estas regras.
 *
 * O que este arquivo NÃO faz, de propósito: redefinir componente da ONDA D.
 * `.botao`, `.campo`, `.tabela`, `.selo`, `.lista`, `.cartao`, `.aviso`,
 * `.vazio`, `.secao` e `.tela-cabecalho` são dela, e as telas desta onda usam
 * as classes dela. Aqui mora só o que é do catálogo e não existe lá: a grade
 * do catálogo do aluno, o par de pré-condições da publicação da aula (§3.6) e
 * o banco de questões (§3.8).
 *
 * Tokens da ONDA D (01_tokens.css). Nenhum valor cru: se o tenant trocar a
 * marca ou o tema virar claro, estas telas acompanham sem tocar neste arquivo.
 */

/* ── Catálogo do aluno: grade de cartões `.curso` (componente da onda D) ── */
.catalogo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.curso__resumo {
  margin: 0;
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

.pagina-de-curso__para-quem {
  margin: 0 0 var(--esp-5);
  color: var(--texto-suave);
  font-size: var(--texto-sm);
}

/* O número da aula na lista. Tabular para a coluna não dançar entre 9 e 10. */
.ordem-da-aula {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--raio-redondo);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
  font-size: var(--texto-sm);
  font-variant-numeric: tabular-nums;
}

/* ── §3.6, invariante (a): as duas pré-condições da publicação ───────────
   Lado a lado porque a pergunta do admin nunca é "posso publicar?", e sim
   "qual das duas está faltando?". */
.pre-condicoes {
  list-style: none;
  margin: 0 0 var(--esp-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
}
.pre-condicao {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
  font-size: var(--texto-sm);
}
.pre-condicao--cumprida { border-color: var(--cor-aprovado) }
.pre-condicao--pendente { border-color: var(--cor-descanso) }
.pre-condicao__nome { color: var(--texto-suave) }

/* O motivo pelo qual o botão de publicar está apagado. Âmbar, nunca vermelho
   (§15.3): não é erro do admin, é uma etapa que ainda falta. */
.impedimento {
  margin: var(--esp-3) 0 0;
  color: var(--cor-descanso);
  font-size: var(--texto-sm);
}

/* ── §3.8 — banco de questões ────────────────────────────────────────────
   O único lugar do produto em que `alternativas.correta` aparece em HTML. */
.banco-de-questoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-4);
}
.questao {
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
}
.questao__enunciado {
  margin: 0 0 var(--esp-3);
  font-weight: var(--peso-forte);
}
.questao__alternativas {
  list-style: none;
  margin: 0 0 var(--esp-3);
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}
.alternativa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
  font-size: var(--texto-sm);
}
.alternativa--correta {
  background: var(--cor-aprovado-suave);
  color: var(--cor-aprovado);
}

.conjunto {
  margin: 0 0 var(--esp-5);
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
}
.conjunto .campo:last-child { margin-bottom: 0 }

.alternativa-editavel {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.alternativa-editavel .campo__controle { flex: 1 }
.alternativa-editavel__gabarito {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  white-space: nowrap;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  min-height: var(--alvo);
}

@media (max-width: 30rem) {
  .alternativa-editavel { flex-direction: column; align-items: stretch }
}