/*
 * 45_montagem.css — ONDA P · a ferramenta de montar curso
 * ═══════════════════════════════════════════════════════════════════════════
 * /admin/cursos/:id/montar, o card da aula (modal) e a prévia como aluno.
 * Depois de 40_catalogo (dona de `.questao`, `.alternativa`, `.ordem-da-aula`,
 * `.impedimento`) e antes de 70_admin. Componentes da onda D como estão;
 * aqui só o que é da ferramenta. Tokens de 01_tokens.css, zero valor cru.
 * Anima só `transform`/`opacity` (MARCA.md §2).
 */

/* ═══ A TELA ═══════════════════════════════════════════════════════════════
   Celular: uma coluna — sobre, publicação (curta), aulas.
   Desktop: as aulas ocupam a coluna principal e o painel de publicação fica
   ao lado, grudado, para que "o que falta" esteja sempre à vista. */
.montagem {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: minmax(0, 1fr);
}
/* Os avisos ("Curso publicado.", "9 questões gravadas") nascem no topo do
   bloco, e a pessoa está no botão, lá embaixo. GRUDADOS ao topo da área de
   rolagem (a página, ou a caixa do modal) eles ficam à vista onde quer que a
   rolagem esteja — e `:empty` some sem ocupar linha. */
.montagem__avisos {
  position: sticky;
  /* Abaixo do que está grudado na tela (folha 20): no celular o cabeçalho
     (3.5rem + padding) E a barra de navegação do admin (2.5rem + padding);
     no desktop a barra vira coluna lateral e sobra só o cabeçalho. Dentro
     do modal a caixa é quem rola e não há cabeçalho — `top` menor. */
  top: 7.5rem;
  z-index: 3;
  align-self: start;
  display: grid;
  gap: var(--esp-2);
}
/* No modal, abaixo do cabeçalho grudado da caixa (título + subtítulo, ~3rem
   medidos a partir da borda do conteúdo) e ATRÁS dele (z-index menor) quando
   os dois se encontram. */
.modal .montagem__avisos { top: 3.25rem; z-index: 1 }
@media (min-width: 64rem) {
  .montagem__avisos { top: 4.5rem }
}
.montagem__avisos:empty { display: none }
.montagem__aviso {
  box-shadow: var(--sombra-2);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-2);
  border: 1px solid var(--borda);
  font-size: var(--texto-sm);
  animation: montagem-entra var(--tempo-normal) var(--curva-entrada) both;
}
.montagem__aviso.aviso--sucesso { border-color: var(--cor-aprovado); background: var(--cor-aprovado-suave); color: var(--texto) }
.montagem__aviso.aviso--atencao { border-color: var(--cor-descanso); background: var(--cor-descanso-suave); color: var(--texto) }
@keyframes montagem-entra {
  from { opacity: 0; transform: translateY(-4px) }
  to   { opacity: 1; transform: none }
}

@media (min-width: 64rem) {
  .montagem {
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas:
      "avisos avisos"
      "sobre publicacao"
      "aulas publicacao";
    align-items: start;
  }
  /* Área própria: sem ela o bloco de avisos caía DEPOIS de tudo, no rodapé.
     Só na grade da TELA (`.montagem >`): no card da aula a mesma classe vive
     numa grade de uma coluna, e um `grid-area` sem área com esse nome
     criaria uma coluna implícita — o card encolhia para a metade. */
  .montagem > .montagem__avisos { grid-area: avisos }
  .montagem:has(.montagem__avisos:empty) {
    grid-template-areas:
      "sobre publicacao"
      "aulas publicacao";
  }
  .montagem__sobre { grid-area: sobre }
  .montagem__aulas { grid-area: aulas }
  .montagem__publicacao { grid-area: publicacao; position: sticky; top: var(--esp-4) }
}

.montagem__secao-titulo {
  margin: 0 0 var(--esp-1);
  font-size: var(--texto-lg);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-titulo);
}
.montagem__ajuda { margin: 0 0 var(--esp-4); color: var(--texto-tenue); font-size: var(--texto-sm) }
.montagem__secao-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.montagem__secao-cabecalho .montagem__ajuda { margin-bottom: 0 }
.montagem__estado-de-salvamento {
  min-height: 1.25rem;
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
}
.montagem__formulario .campo { margin-bottom: var(--esp-4) }
.campo__controle--grande { font-size: var(--texto-lg); font-weight: var(--peso-medio) }

/* ── Sobre o curso: capa + campos ─────────────────────────────────────── */
.montagem__sobre-grade { display: grid; gap: var(--esp-4); grid-template-columns: minmax(0, 1fr) }
@media (min-width: 40rem) {
  .montagem__sobre-grade { grid-template-columns: 11rem minmax(0, 1fr) }
}
.montagem__capa-bloco .campo__ajuda { margin-top: var(--esp-2) }

.capa-do-curso {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-radius: var(--raio-3);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--cor-marca-tenue), transparent 60%),
    linear-gradient(135deg, var(--cor-marca-suave), var(--fundo-fundo));
  border: 1px solid var(--borda);
  overflow: hidden;
}
.capa-do-curso__iniciais {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-titulo);
  color: var(--cor-marca);
}

/* ── A lista de aulas ─────────────────────────────────────────────────── */
.lista-de-aulas {
  list-style: none;
  margin: 0 0 var(--esp-4);
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}
.lista-de-aulas__vazio { padding: var(--esp-6) var(--esp-4) }

.aula-card {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-2);
  transition:
    transform var(--tempo-normal) var(--curva-entrada),
    box-shadow var(--tempo-normal) var(--curva-entrada),
    border-color var(--tempo-rapido) var(--curva-padrao),
    opacity var(--tempo-rapido) var(--curva-padrao);
}
.aula-card--publicada { border-left: 3px solid var(--cor-aprovado) }
.aula-card--arrastando {
  z-index: 2;
  box-shadow: var(--sombra-3);
  border-color: var(--cor-marca);
  transition: box-shadow var(--tempo-rapido), border-color var(--tempo-rapido);
  cursor: grabbing;
}
.aula-card--abrindo-espaco { transition: transform var(--tempo-normal) var(--curva-entrada) }

/* O puxador e as setas ficam ACIMA do gatilho do card (a área inteira
   abre o modal) — mesma regra de `.cartao__acoes` na folha 03. */
.aula-card__puxador {
  position: relative;
  z-index: 1;
  min-width: 2rem;
  min-height: var(--alvo);
  border: 0;
  background: transparent;
  color: var(--texto-tenue);
  font-size: var(--texto-lg);
  letter-spacing: -0.2em;
  cursor: grab;
  touch-action: none;
  border-radius: var(--raio-1);
}
.aula-card__puxador:hover { color: var(--texto) }
.aula-card__puxador:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 2px }

.aula-card__corpo { min-width: 0; display: flex; flex-direction: column; gap: var(--esp-1) }
.aula-card__titulo { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-medio); line-height: var(--altura-apertada) }
.aula-card__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  font-size: var(--texto-sm);
  color: var(--texto-tenue);
}
.aula-card__pendencia {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  font-size: var(--texto-xs);
  color: var(--cor-descanso);
}
.aula-card__pendencia--ok { color: var(--cor-aprovado) }

.aula-card__setas { display: flex; flex-direction: column; gap: 0 }
.aula-card__setas form { display: contents }
.aula-card__seta { min-height: 1.75rem; min-width: 2.25rem; padding: 0 var(--esp-2); font-size: var(--texto-md) }
.aula-card__seta:disabled { opacity: 0.3; cursor: default }
/* No dedo, cada seta vira um alvo de 44px (WCAG 2.5.8): 36×28 era o tamanho
   do mouse. As duas empilhadas dão 88px — o card já tem essa altura. */
@media (pointer: coarse) {
  .aula-card__seta { min-height: var(--alvo); min-width: var(--alvo) }
}

@media (max-width: 30rem) {
  .aula-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .aula-card .ordem-da-aula { display: none }
}

/* A aula nova: um campo e um botão, lado a lado onde couber. */
.montagem__nova-aula {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
}
.campo--em-linha { flex: 1 1 14rem; margin-bottom: 0 }
.campo--em-linha .campo__rotulo { display: block; margin-bottom: var(--esp-1) }

/* ── Painel de publicação e checklist ─────────────────────────────────── */
.painel-de-publicacao { transition: border-color var(--tempo-normal) var(--curva-padrao) }
.painel-de-publicacao--pronto { border-color: var(--cor-aprovado) }
.painel-de-publicacao--aula {
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-fundo);
}
.painel-de-publicacao__titulo {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.painel-de-publicacao__pronto { margin: var(--esp-3) 0; color: var(--cor-aprovado); font-weight: var(--peso-medio) }
.painel-de-publicacao__publicado {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 0;
  color: var(--cor-aprovado);
  font-weight: var(--peso-medio);
}
.painel-de-publicacao__botao { animation: pulso-confirma var(--tempo-lento) var(--curva-elastica) both }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2) }
.checklist__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
}
.checklist__marca { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: var(--raio-redondo) }
.checklist__item--ok .checklist__marca { background: var(--cor-aprovado-suave); color: var(--cor-aprovado) }
.checklist__item--falta .checklist__marca { background: var(--cor-descanso-suave); color: var(--cor-descanso) }
.checklist__item--ok .checklist__texto { color: var(--texto-suave) }
/* Item INFORMATIVO: não trava o botão, mas conta uma coisa que a pessoa
   precisa saber ("2 aulas ainda em rascunho, não aparecem para o aluno"). */
.checklist__item--aviso .checklist__marca { background: var(--cor-marca-suave); color: var(--cor-marca) }
.checklist__item--aviso .checklist__texto { color: var(--texto-suave) }
.checklist__detalhe { display: block; color: var(--texto-tenue); font-size: var(--texto-xs) }
.checklist__resolver { font-size: var(--texto-xs); white-space: nowrap; align-self: center }

/* ═══ O CARD DA AULA (modal) ══════════════════════════════════════════════ */
.montagem-aula { display: grid; gap: var(--esp-6) }
.montagem-aula__bloco { position: relative; scroll-margin-top: var(--esp-4) }
.montagem-aula__rodape { margin: var(--esp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center }
.montagem-aula__link { color: var(--cor-marca) }
/* "SALVO" no canto do bloco, e não numa linha própria: a linha reservava
   ~60 px vazios entre "Obrigatória" e "Vídeo". */
.montagem-aula .montagem__estado-de-salvamento { position: absolute; top: 0; right: 0; min-height: 0 }

/* O card é um workbench (vídeo + 10–30 questões + checklist): a caixa de
   34rem do modal padrão é estreita para ele no desktop. Só o card da aula —
   a prévia e os outros modais continuam com a largura de sempre. */
@media (min-width: 48rem) {
  .modal__caixa:has(.montagem-aula) { width: min(48rem, calc(100vw - 3rem)) }
}

.campo--opcao .campo__ajuda { display: block; margin-top: var(--esp-1) }

/* O contador "x de 15 · mínimo 10 · teto 30" com o medidor da meta. */
.contador-de-questoes { display: grid; gap: var(--esp-1); min-width: 12rem }
.contador-de-questoes__numero { margin: 0; display: flex; flex-direction: column; font-variant-numeric: tabular-nums }
.contador-de-questoes__numero strong { font-size: var(--texto-lg) }
.contador-de-questoes__numero small { color: var(--texto-tenue); font-size: var(--texto-xs) }
.contador-de-questoes__medidor {
  width: 100%;
  height: 0.375rem;
  border: 0;
  border-radius: var(--raio-redondo);
  overflow: hidden;
  background: var(--fundo-fundo);
  accent-color: var(--cor-descanso);
}
.contador-de-questoes__medidor::-webkit-progress-bar { background: var(--fundo-fundo); border-radius: var(--raio-redondo) }
.contador-de-questoes__medidor::-webkit-progress-value { background: var(--cor-descanso); border-radius: var(--raio-redondo); transition: width var(--tempo-normal) var(--curva-padrao) }
.contador-de-questoes__medidor::-moz-progress-bar { background: var(--cor-descanso); border-radius: var(--raio-redondo) }
.contador-de-questoes--ok .contador-de-questoes__medidor { accent-color: var(--cor-aprovado) }
.contador-de-questoes--ok .contador-de-questoes__medidor::-webkit-progress-value { background: var(--cor-aprovado) }
.contador-de-questoes--ok .contador-de-questoes__medidor::-moz-progress-bar { background: var(--cor-aprovado) }

.banco__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-3) }
.banco__acoes .colar-questoes { flex-basis: 100% }
.banco__vazio { margin: 0; padding: var(--esp-4); border: 1px dashed var(--borda-forte); border-radius: var(--raio-3); color: var(--texto-tenue); font-size: var(--texto-sm); text-align: center }

.banco-de-questoes--montagem { display: grid; gap: var(--esp-3) }
.questao--montagem { animation: montagem-entra var(--tempo-normal) var(--curva-entrada) both }
/* Editando: a moldura da questão com o formulário dentro. A classe da
   `<turbo-frame>` da resposta não chega ao DOM (o Turbo troca só o conteúdo),
   então quem diz "editando" é o conteúdo. */
.questao--montagem:has(> .questao__formulario) { border-color: var(--cor-marca) }
.questao__numero { color: var(--texto-tenue); font-weight: var(--peso-normal) }
.questao__explicacao { margin: 0 0 var(--esp-3); font-size: var(--texto-sm); color: var(--texto-suave) }
.questao__sem-explicacao { color: var(--texto-tenue); font-style: italic }
.questao__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-2) }
.questao__acoes form { display: contents }
.questao__apagar { margin-left: auto; color: var(--cor-reprovado) }
.alternativa__letra-pequena { color: var(--texto-tenue); font-variant-numeric: tabular-nums; flex: none }
.questao--montagem .alternativa { justify-content: flex-start }
.questao--montagem .alternativa .selo { margin-left: auto }

.questao-nova:empty { display: none }
.questao-nova .questao__formulario { padding: var(--esp-4); border: 1px solid var(--cor-marca); border-radius: var(--raio-3); background: var(--fundo-cartao); margin-bottom: var(--esp-3) }

.questao__alternativas-editaveis { margin: 0 0 var(--esp-4); padding: 0; border: 0 }
.questao__alternativas-editaveis legend { margin-bottom: var(--esp-2) }
.questao--montagem .alternativa-editavel,
.questao-nova .alternativa-editavel { flex-direction: row; align-items: center; margin-bottom: var(--esp-2) }
.alternativa-editavel__letra { min-width: 1.5rem; color: var(--texto-tenue) }
.questao--montagem .alternativa-editavel__gabarito,
.questao-nova .alternativa-editavel__gabarito { min-height: var(--alvo); gap: var(--esp-1) }

/* Colar questões em texto: a caixa, a prévia, os erros. */
.colar-questoes__caixa {
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
  animation: montagem-entra var(--tempo-normal) var(--curva-entrada) both;
}
.colar-questoes__titulo { margin: 0 0 var(--esp-1); font-size: var(--texto-md); font-weight: var(--peso-forte) }
.colar-questoes__texto { font-family: var(--fonte-mono); font-size: var(--texto-sm); line-height: var(--altura-normal) }
.colar-questoes__previa { margin: var(--esp-3) 0; display: grid; gap: var(--esp-3) }
.colar-questoes__resumo { margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2) }
.colar-questoes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3) }
.colar-questoes__questao { padding: var(--esp-3); border: 1px solid var(--borda); border-radius: var(--raio-2); background: var(--fundo-fundo) }
.colar-questoes__questao .questao__alternativas { margin-bottom: var(--esp-2) }
.colar-questoes__erros { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-2) }
.colar-questoes__erros li { padding: var(--esp-2) var(--esp-3); border-left: 3px solid var(--cor-descanso); background: var(--cor-descanso-suave); border-radius: var(--raio-1); font-size: var(--texto-sm) }
.colar-questoes__motivo { display: block; color: var(--cor-descanso); font-weight: var(--peso-medio) }
.colar-questoes__trecho { color: var(--texto-suave) }
.colar-questoes__dica { align-self: center; font-size: var(--texto-xs); color: var(--texto-tenue) }
.botoes--em-linha { flex-direction: row; flex-wrap: wrap }

/* ═══ PRÉVIA COMO ALUNO ═══════════════════════════════════════════════════ */
/* `minmax(0, 1fr)` e `min-width: 0` nos filhos: sem isso o item de grade tem
   largura mínima automática, a capa e a linha da aula passavam da borda da
   folha no celular (R-5). A capa tem proporção fixa: nunca 700px de altura. */
.previa-do-curso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-4) }
.previa-do-curso > * { min-width: 0; max-width: 100% }
.previa-do-curso .lista__texto { min-width: 0 }
.previa-do-curso .lista__meta { overflow-wrap: anywhere }
.numeros-do-curso__nota { display: block; font-size: var(--texto-xs); color: var(--texto-tenue) }
/* O "novo curso" da lista: um título e um botão, como a aula nova. */
.montagem__novo-curso { margin-bottom: var(--esp-5) }
.previa-do-curso__capa { border: 0; border-radius: var(--raio-3); overflow: hidden; aspect-ratio: 16 / 9; max-height: 14rem; width: 100% }
.previa-do-curso__capa .capa-do-curso { width: 100%; height: 100%; border: 0; border-radius: 0 }

.previa-da-aula { display: grid; gap: var(--esp-5) }
.previa-da-aula__player { border-radius: var(--raio-3); overflow: hidden; background: var(--elevo-tinta) }
.previa-da-aula__player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--elevo-tinta) }
.previa-da-aula__sem-video {
  display: grid;
  place-items: center;
  gap: var(--esp-2);
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-3);
  color: var(--texto-tenue);
  text-align: center;
  padding: var(--esp-4);
}
.previa-da-aula__sem-video p { margin: 0; font-size: var(--texto-sm); max-width: 24rem }
.prova__enunciado--previa { font-size: var(--texto-lg); margin: 0 0 var(--esp-3) }
.previa-da-aula__nota { margin: var(--esp-3) 0 0; display: flex; gap: var(--esp-2); align-items: flex-start; font-size: var(--texto-xs); color: var(--texto-tenue) }

/* Movimento reduzido: sem entrada animada, sem pulso. */
@media (prefers-reduced-motion: reduce) {
  .montagem__aviso, .questao--montagem, .colar-questoes__caixa, .painel-de-publicacao__botao { animation: none }
}

/* ═══ O ENVIO DE VÍDEO DENTRO DO CARD ═════════════════════════════════════
   O partial `admin/videos/_envio` (onda C) nunca tinha entrado numa tela: a
   folha 50 dá `display: flex` à barra de progresso e ao erro, e isso vence o
   atributo `hidden` — a barra vazia e o "Cancelar" apareciam antes de
   qualquer arquivo ser escolhido. Especificidade (0,2,0) contra (0,1,0), sem
   depender da ordem das folhas. E o campo de arquivo vira um botão de verdade
   (o input continua lá, só leitor de tela e teclado o alcançam direto). */
.envio-de-video__progresso[hidden],
.envio-de-video__erro[hidden] { display: none }

.montagem-aula .envio-de-video__campo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--esp-2);
  align-self: flex-start;
  min-height: var(--alvo);
  padding: var(--esp-2) var(--esp-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--fundo-cartao);
  cursor: pointer;
  transition: border-color var(--tempo-rapido) var(--curva-padrao), transform var(--tempo-rapido) var(--curva-padrao);
}
.montagem-aula .envio-de-video__campo:hover { border-color: var(--cor-marca) }
.montagem-aula .envio-de-video__campo:active { transform: translateY(1px) }
.montagem-aula .envio-de-video__campo:focus-within { outline: 2px solid var(--cor-marca); outline-offset: 2px }
.montagem-aula .envio-de-video__campo input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.montagem-aula .envio-de-video__rotulo::before { content: "⬆ "; color: var(--cor-marca) }
.montagem-aula .video-do-admin { background: var(--fundo-fundo); border: 1px solid var(--borda); border-radius: var(--raio-3); padding: var(--esp-4) }
.montagem-aula .video-do-admin__estado { margin-bottom: var(--esp-3) }

/* As alternativas do BANCO (leitura do admin) não são as da PROVA: a folha
   60 desenha `.alternativa` como o alvo de 56 px do aluno — certo lá, pesado
   aqui, onde há 15 questões × 4 linhas para varrer com o olho. Compactas,
   sem borda, com a certa em verde. Especificidade (0,2,0) > (0,1,0). */
.questao--montagem .alternativa,
.colar-questoes__questao .alternativa {
  min-height: 0;
  padding: var(--esp-1) var(--esp-2);
  border: 0;
  border-radius: var(--raio-1);
  background: transparent;
  font-size: var(--texto-sm);
  cursor: default;
  gap: var(--esp-2);
}
.questao--montagem .alternativa--correta,
.colar-questoes__questao .alternativa--correta { background: var(--cor-aprovado-suave); color: var(--cor-aprovado) }
.questao--montagem .alternativa:hover,
.colar-questoes__questao .alternativa:hover { border-color: transparent }
.questao--montagem .alternativa__texto,
.colar-questoes__questao .alternativa__texto { font-size: inherit; line-height: var(--altura-normal) }
.questao--montagem .questao__alternativas,
.colar-questoes__questao .questao__alternativas { gap: 2px }
.questao--montagem .selo { font-size: var(--texto-xs); padding: 2px var(--esp-2) }
.previa-da-aula__titulo { margin: 0; font-weight: var(--peso-forte); color: var(--texto-suave) }
.previa-do-curso__aula { display: block; padding-top: var(--esp-4); border-top: 1px solid var(--borda) }
.montagem-aula__previa:empty { display: none }
.montagem-aula__previa { display: block; margin-top: var(--esp-4); padding: var(--esp-4); border: 1px solid var(--cor-marca-tenue); border-radius: var(--raio-3); background: var(--fundo-fundo) }