/*
 * 60_avaliacao.css — ONDA F · §6 e §12.3: a prova, o resultado e os temas no
 * admin.
 *
 * NÃO PRECISA DE @import: o layout usa `stylesheet_link_tag :app` e o Propshaft
 * emite um <link> para CADA folha de app/assets/stylesheets, em ordem
 * alfabética. O NÚMERO no nome É a ordem da cascata — 60 entra depois do palco
 * (55) e antes do admin (70), que é onde ele deve estar.
 *
 * O QUE NÃO ESTÁ AQUI, E É DE PROPÓSITO: botão, cartão, campo, selo, medidor,
 * tabela, lista, estado vazio, filtros e o componente `.acao` com os seis
 * modificadores da §12.3 são todos da ONDA D (10_componentes.css e
 * 70_admin.css, catálogo em /estilo). Reescrever qualquer um deles aqui seria
 * criar uma segunda verdade visual para a mesma coisa.
 *
 * Esta folha só tem o que é genuinamente novo: a TELA DE PROVA (que não se
 * parece com nenhuma outra do produto, e não deve se parecer), o placar do
 * resultado, e o cartão de tema do admin.
 *
 * ─── A RÉGUA DESTA TELA: UMA MÃO, NO PÁTIO, COM PRESSA ─────────────────────
 *
 * O aluno é motorista, no celular, com 12 minutos correndo. Três decisões
 * saem disso e valem para o arquivo inteiro:
 *
 *   · **Alvo de toque grande.** A alternativa INTEIRA é clicável, com
 *     `--alvo-grande` de altura mínima (o piso do design system é `--alvo`,
 *     48 px; aqui é maior de propósito, porque errar o toque custa a questão).
 *     NADA nesta folha fica abaixo de `--alvo`: nem os pontos da trilha, nem
 *     os links da revisão — que são justamente o caminho de recuperação das
 *     questões em branco, na tela mais cara do produto.
 *   · **Nada pisca.** O contador vive fora do turbo-frame e o número é
 *     tabular: sem `font-variant-numeric: tabular-nums`, "09:59" vira "10:00"
 *     e a linha inteira dança a cada segundo.
 *   · **Sem vermelho no veredito.** Reprovar com chance restante é informação,
 *     não erro; ficar sem chances é ÂMBAR e se chama descanso (§15.3). O único
 *     vermelho desta folha está no que de fato não tem volta.
 */

/* ── A prova ─────────────────────────────────────────────────────────────── */
/*
 * O `padding-bottom` não é respiro: é o espaço da BARRA DE NAVEGAÇÃO DO ALUNO,
 * que é `position: fixed` no rodapé do celular (layout da onda D/E). Sem ele a
 * barra cobria a última alternativa da tela — e a zona do polegar, numa prova
 * cronometrada, tinha cinco saídas e nenhum alvo da prova.
 */
.prova {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  max-width: 44rem;
  margin: 0 auto;
  padding-bottom: calc(var(--esp-10) + 3.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 48rem) {
  .prova { padding-bottom: var(--esp-10) }
}

.prova__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--borda);
}

.prova__etiqueta {
  margin: 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/*
 * O RELÓGIO. Ele é a única coisa da tela que muda sozinha, então é a única que
 * pode se dar ao luxo de chamar atenção — e só chama de verdade no último
 * minuto, quando `--acabando` entra.
 */
.prova__relogio {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-2);
  background: var(--fundo-elevado);
  transition: border-color var(--transicao), color var(--transicao);
}

.prova__relogio-rotulo {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: var(--espacamento-etiqueta);
  color: var(--texto-tenue);
}

.prova__relogio-valor {
  font-size: var(--texto-xl);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--espacamento-titulo);
}

.prova__relogio--acabando {
  border-color: var(--cor-descanso);
  color: var(--cor-descanso);
}

.prova__aviso-tempo {
  margin: 0;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-2);
  background: var(--cor-descanso-suave);
  color: var(--cor-descanso);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

.prova__envio-oculto { display: contents }

.prova__rodape {
  margin: 0;
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

/* O atalho de teclado não existe no celular, e anunciá-lo lá é ruído. */
.prova__rodape-teclado { display: none }
@media (hover: hover) and (pointer: fine) {
  .prova__rodape-teclado { display: inline }
}

/* ── A questão ───────────────────────────────────────────────────────────── */
.prova__questao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.prova__passo { display: flex; flex-direction: column; gap: var(--esp-2) }

.prova__passo-texto {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}

/*
 * O ENUNCIADO é o `h1` da tela. Grande, com altura de linha apertada e largura
 * de leitura limitada: quem lê está com pressa e o texto não pode obrigar o
 * olho a atravessar a tela inteira.
 */
.prova__enunciado {
  margin: 0;
  font-size: var(--texto-xl);
  line-height: var(--altura-apertada);
  max-width: var(--largura-leitura);
}

/*
 * No desktop o enunciado NÃO cresce junto com a tela. Ele crescia
 * (`--texto-2xl`) e continuava preso a `--largura-leitura` dentro de uma coluna
 * bem mais larga: três linhas a mais de altura, e o único botão de avançar
 * nascia 12 px abaixo da dobra em 1440×900. Seis questões, seis rolagens
 * obrigatórias com o relógio correndo. Aqui a linha de leitura acompanha a
 * coluna e o tamanho sobe só um degrau.
 */
@media (min-width: 40rem) {
  .prova__enunciado { font-size: var(--texto-xl); max-width: none }
}

.prova__formulario { display: flex; flex-direction: column; gap: var(--esp-5) }

.prova__alternativas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.prova__legenda {
  padding: 0;
  margin-bottom: var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
}

.prova__legenda-ajuda {
  display: block;
  font-weight: var(--peso-normal);
  font-size: var(--texto-xs);
  color: var(--texto-tenue);
}

/*
 * A ALTERNATIVA. O `<label>` embrulha o `<input>`, então a área inteira é o
 * alvo — `--alvo-grande` (56 px) de altura mínima, um degrau acima do `--alvo`
 * (48 px) que é o piso do design system. O valor vem do TOKEN e não escrito à
 * mão: 3.5rem repetido aqui é o mesmo número em dois lugares, e no dia em que a
 * onda D mexer no piso esta tela fica para trás sem ninguém perceber.
 *
 * O rádio nativo é escondido com `appearance: none` mas continua NO DOM e
 * focável: é ele que o leitor de tela anuncia, que o teclado percorre e que o
 * `:has(:checked)` consulta. Escondê-lo com `display: none` tiraria a
 * alternativa da navegação por teclado — e o aluno do escritório faz a prova
 * com 1–4 e Enter.
 */
.alternativa {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--alvo-grande);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
  -webkit-tap-highlight-color: transparent;
}

.alternativa:hover { border-color: var(--cor-marca-tenue) }

.alternativa__controle {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.alternativa__letra {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-cheio);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  color: var(--texto-suave);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.alternativa__texto {
  flex: 1;
  font-size: var(--texto-md);
  line-height: var(--altura-normal);
  overflow-wrap: anywhere;
}

/* O "salvo" — e ele é a ÚNICA confirmação que esta tela dá. Nada de verde de
   acerto: §12.3 proíbe dizer se acertou, e um check verde por alternativa
   escolhida seria lido exatamente como isso. Por isso ele é da cor da MARCA. */
.alternativa__marca {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  color: var(--cor-marca);
  opacity: 0;
  transition: opacity var(--transicao);
}

.alternativa:has(.alternativa__controle:checked) {
  border-color: var(--cor-marca);
  background: var(--cor-marca-suave);
}

.alternativa:has(.alternativa__controle:checked) .alternativa__letra {
  background: var(--cor-marca-forte);
  border-color: transparent;
  color: var(--cor-marca-contraste);
}

.alternativa:has(.alternativa__controle:checked) .alternativa__marca { opacity: 1 }

.alternativa:has(.alternativa__controle:focus-visible) {
  outline: 2px solid var(--cor-marca);
  outline-offset: 2px;
}

.prova__navegacao {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--esp-3);
}

@media (min-width: 40rem) {
  .prova__navegacao { flex-direction: row; align-items: center; justify-content: space-between }
  .prova__navegacao .botao--largo { width: auto; min-width: 16rem; margin-left: auto }
}

/* ── A trilha da prova ───────────────────────────────────────────────────── */
/*
 * Um ponto por questão. Ela QUEBRA em vez de rolar: com `overflow-x: auto` e
 * `scrollbar-width: none`, as dez questões da §6 em 390 px escondiam as
 * últimas sem nenhuma pista de que havia mais — e a trilha existe justamente
 * para responder "deixei alguma em branco?". Duas linhas de pontos custam
 * menos que uma pergunta sem resposta.
 */
.trilha-da-prova {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  padding-bottom: 2px;
}

/* `--alvo` (48 px) é o PISO do design system, e seis pontos lado a lado com
   8 px de intervalo a 36 px era uma máquina de errar o toque. */
.trilha-da-prova__ponto {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--alvo);
  height: var(--alvo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  color: var(--texto-tenue);
  text-decoration: none;
  transition: border-color var(--transicao), color var(--transicao), background var(--transicao);
}

.trilha-da-prova__ponto:hover { border-color: var(--borda-forte); color: var(--texto) }

.trilha-da-prova__ponto--respondida {
  border-color: var(--cor-marca-tenue);
  background: var(--cor-marca-suave);
  color: var(--cor-marca);
}

.trilha-da-prova__ponto--atual {
  border-color: var(--cor-marca);
  background: var(--cor-marca-forte);
  color: var(--cor-marca-contraste);
}

/* ── A revisão antes de enviar ───────────────────────────────────────────── */
.prova__revisao {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-5);
  border: 1px solid var(--cor-aprovado);
  border-radius: var(--raio-3);
  background: var(--cor-aprovado-suave);
}

/* Âmbar, não vermelho: ter deixado questão em branco é um aviso, não um erro
   cometido — e o aluno ainda está a tempo de resolver. */
.prova__revisao--incompleta {
  border-color: var(--cor-descanso);
  background: var(--cor-descanso-suave);
}

.prova__revisao-titulo { margin: 0; font-size: var(--texto-lg) }

.prova__revisao-texto {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  flex-wrap: wrap;
}

.prova__revisao-icone { flex: none; margin-top: 2px }

.prova__revisao-aviso {
  flex-basis: 100%;
  font-weight: var(--peso-forte);
}

.prova__revisao-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* O caminho de recuperação das questões em branco — o link mais importante da
   tela mais cara. Ele estava com 40 px de altura, abaixo do piso de `--alvo`. */
.prova__revisao-lista .botao { min-height: var(--alvo) }

.prova__revisao-ajuda { margin: 0; font-size: var(--texto-xs); color: var(--texto-tenue) }

/* A gravação de segundo plano falhou. Âmbar, não vermelho: nada se perdeu
   ainda — o botão grande reenvia. */
.prova__falha-ao-salvar {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-descanso);
  border-radius: var(--raio-2);
  background: var(--cor-descanso-suave);
  font-size: var(--texto-sm);
  color: var(--texto);
}

.prova__falha-ao-salvar svg { flex: none; margin-top: 2px }

/* ── O resultado ─────────────────────────────────────────────────────────── */
/*
 * Dois modificadores NOVOS do componente `.acao` da onda D. Eles não existiam
 * porque o palco não tem esses estados: o bloco de ação da aula nunca diz
 * "reprovado" — ele diz "liberado com 1 chance". Quem emite veredito é esta
 * tela, e só ela.
 *
 * `--reprovado` é NEUTRO de propósito (a borda forte do tema, não vermelho):
 * reprovar com chance restante é informação, e pintar de vermelho três vezes
 * seguidas é o que faz o motorista desistir do treinamento (§15.3).
 * `--expirado` é âmbar, do mesmo jeito que o descanso: o tempo acabar não é
 * culpa moral de ninguém.
 */
.acao--reprovado { border-color: var(--borda-forte); background: var(--fundo-elevado) }
.acao--expirado { border-color: var(--cor-descanso); background: var(--cor-descanso-suave) }

.resultado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  max-width: 40rem;
  margin: 0 auto;
  padding-block: var(--esp-4) var(--esp-10);
}

.resultado__veredito { gap: var(--esp-4) }

/*
 * O PLACAR. "6 de 10" é a frase que o aluno repete para o colega no pátio;
 * "60%" não se repete em conversa nenhuma. Por isso o número de acertos é o
 * grande e o percentual é o de apoio — e não o contrário.
 */
.resultado__placar {
  display: flex;
  align-items: baseline;
  gap: var(--esp-3);
  margin: 0;
  flex-wrap: wrap;
}

.resultado__acertos {
  font-size: var(--texto-3xl);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-titulo);
  line-height: 1;
}

.resultado__percentual {
  font-size: var(--texto-lg);
  color: var(--texto-suave);
}

.resultado__corte {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.resultado__corte-meta { font-size: var(--texto-xs); color: var(--texto-tenue) }

.resultado__extra {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.resultado__extra--bonus { color: var(--cor-pontos); font-weight: var(--peso-forte) }

.resultado__acoes { gap: var(--esp-3) }
.resultado__revisao { margin: 0 }

@media (min-width: 40rem) {
  .resultado__acoes { flex-direction: row; flex-wrap: wrap; align-items: center }
  .resultado__acoes .botao { width: auto }
}

/* ── Admin: matrículas e temas ───────────────────────────────────────────── */
/* ESCOPADO às telas desta onda de propósito. `60` carrega depois de `10`, então
   um `.secao__titulo h3` solto valeria para o produto inteiro — um bloco da
   onda D redefinido no arquivo da onda F, que é exatamente como um design
   system se desfaz. O pedido para promover isto ao `10_componentes.css` está no
   relatório. */
.pessoa-matriculas .secao__titulo h3,
.pessoa-matriculas .secao__titulo h4,
.temas .secao__titulo h3,
.temas .secao__titulo h4 { margin: 0 }

.pessoa-matriculas { display: flex; flex-direction: column; gap: var(--esp-2) }

.tela-cabecalho--secundario { margin-bottom: var(--esp-4) }

/* Nome PRÓPRIO desta onda, e não `.tabela__tenue`: um elemento novo de um bloco
   da onda D (`.tabela`) definido aqui vale para todas as tabelas do produto e
   nunca aparece no `/estilo`. */
.matriculas__tenue { color: var(--texto-tenue) }

.temas { display: flex; flex-direction: column; gap: var(--esp-3) }

.temas__curso {
  margin: var(--esp-4) 0 0;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-etiqueta);
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.temas__curso:first-child { margin-top: 0 }

.tema {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio-3);
  background: var(--fundo-cartao);
}

.tema__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
}

.tema__identificacao { min-width: 0 }
.tema__titulo { margin: 0; font-size: var(--texto-md) }
.tema__meta { margin: var(--esp-1) 0 0; font-size: var(--texto-xs); color: var(--texto-tenue) }

.tema__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  margin: 0;
}

.tema__numeros > div { display: flex; flex-direction: column; gap: 2px }

.tema__numeros dt {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texto-tenue);
}

.tema__numeros dd { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-forte) }

/*
 * O MOTIVO do bloqueio, na tela do admin, com a MESMA frase que o aluno lê. O
 * suporte e o cliente precisam estar olhando o mesmo texto — duas redações do
 * mesmo estado é como eles passam a discordar sobre o que o sistema faz.
 */
.tema__motivo {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3);
  border-radius: var(--raio-2);
  background: var(--fundo-fundo);
  font-size: var(--texto-sm);
  color: var(--texto-suave);
}

.tema__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda-tenue);
}

/* O motivo nasce FECHADO. O `<summary>` é o botão; abrir é que revela o campo.
   Três campos de texto abertos por tema, numa tela que pode ter quarenta,
   eram mais ruído do que os três botões inertes que o desenho queria evitar. */
.tema__acao { flex: 1 1 14rem }
.tema__acao > summary { cursor: pointer; list-style: none; width: 100% }
.tema__acao > summary::-webkit-details-marker { display: none }
.tema__acao[open] > summary { margin-bottom: var(--esp-3) }

.tema__acao-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
}

.tema__acao-form .campo { flex: 1 1 16rem; margin-bottom: 0 }

/* ── Movimento, com a saída de emergência de sempre ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .prova__relogio,
  .alternativa,
  .alternativa__letra,
  .alternativa__marca,
  .trilha-da-prova__ponto { transition: none }
}