/*
  estilo.css — aparência do site.

  Pensado primeiro para o celular ("mobile-first"): o layout padrão é de uma
  coluna, com botões grandes para o dedo. Telas maiores só ganham margens.

  Identidade visual (ver protótipos no Claude Design):
  - Fundo "papel" quente, texto azul-grafite, um único azul de destaque.
  - Títulos e enunciados em serifa (Source Serif 4): leitura de "prova".
  - Interface em sans (IBM Plex Sans).
  - Certo = verde, errado = laranja-telha. Também diferem em claridade e
    sempre vêm com ícone e texto: quem não distingue cores não fica perdido.
*/

/* ---------------------------------------------------------------------------
   1. VARIÁVEIS ("tokens")
   Definimos cores e medidas uma vez só e reaproveitamos com var(--nome).
   Trocar o tema inteiro = mudar só este bloco.
--------------------------------------------------------------------------- */
:root {
  --fundo: #f6f4ee;
  --cartao: #ffffff;
  --cartao-apagado: #fbfaf7;
  --texto: #17202b;
  --texto-suave: #535d6b;
  --borda: #e2ded4;
  --borda-forte: #ddd8cc;
  --trilho: #ece9e1;
  --destaque: #1e4fa3;
  --destaque-fundo: #eef3fb;
  --destaque-texto: #ffffff;
  --escuro: #17202b;          /* cartão "continue de onde parou" */
  --escuro-texto: #f6f4ee;
  --certo: #1b6b45;
  --certo-texto: #145236;
  --certo-fundo: #e6f2eb;
  --errado: #b4531a;
  --errado-texto: #8c3e10;
  --errado-fundo: #fbede3;
  --raio: 14px;
  --serifa: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Modo escuro automático, se o aparelho da pessoa estiver em modo escuro */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12161d;
    --cartao: #1b212b;
    --cartao-apagado: #171c25;
    --texto: #e9ecf1;
    --texto-suave: #a3adbd;
    --borda: #2c3543;
    --borda-forte: #3a4556;
    --trilho: #2c3543;
    --destaque: #7ea8f2;
    --destaque-fundo: #1d2a42;
    --destaque-texto: #0d1420;
    --escuro: #e9ecf1;
    --escuro-texto: #12161d;
    --certo: #6fd29a;
    --certo-texto: #8fe0b2;
    --certo-fundo: #16301f;
    --errado: #f0a070;
    --errado-texto: #f5b48c;
    --errado-fundo: #3a2416;
  }
}

/* ---------------------------------------------------------------------------
   2. BASE
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }  /* largura inclui a borda: evita surpresas */

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

main, .topo, .rodape, .aviso {
  max-width: 640px;          /* em telas grandes, a linha não fica comprida demais */
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

a { color: var(--destaque); }

.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
}
.marca {
  font-family: var(--serifa);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--texto);
  text-decoration: none;
}
.marca span { color: var(--destaque); }

.rodape {
  color: var(--texto-suave);
  font-size: 0.75rem;
  padding-top: 32px;
  padding-bottom: 32px;
}
/* Link do rodapé com área de toque de 48px (regra do projeto). */
.rodape-links { margin: 12px 0 0; }
.rodape-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 0.9rem;
  color: var(--destaque);
}

.aviso {
  background: var(--errado-fundo);
  color: var(--errado-texto);
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--raio);
  font-size: 0.875rem;
  /* Mesma largura do conteúdo: 16px de margem no celular, centralizado no PC */
  max-width: 608px;
  margin: 0 max(16px, calc((100% - 608px) / 2)) 8px;
}

h1 {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 8px 0 6px;
}
h2 { font-size: 1.05rem; font-weight: 600; margin: 28px 0 10px; }
.sub { color: var(--texto-suave); margin-top: 0; }
/* Linha de confiança (UX-04): o essencial para quem chega pelo Google. */
.confianca { font-size: 0.9rem; font-weight: 600; margin: 0 0 6px; }
/* Linha "para qual prova é" (BL-05): continua visível, mas discreta e
   abaixo da explicação (UX-04: antes vinha acima e roubava o destaque). */
.qual-prova { font-size: 0.8rem; color: var(--texto-suave); margin: 0 0 8px; }
.rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: 18px;
  margin: 12px 0;
}

/* Ícones SVG herdam a cor do texto ao redor (currentColor) */
.icone { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   3. BOTÕES
   min-height 48px: tamanho mínimo recomendado para toque no celular.
--------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: var(--raio);
  border: 1.5px solid var(--destaque);
  background: var(--destaque);
  color: var(--destaque-texto);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.botao:disabled { opacity: 0.4; cursor: not-allowed; }
.botao.secundario { background: transparent; color: var(--destaque); }
.botao.neutro { background: var(--cartao); color: var(--texto); border-color: var(--borda-forte); }
.botao.largo { width: 100%; margin-top: 16px; min-height: 54px; font-size: 1.05rem; }

.link-voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: var(--destaque);
  cursor: pointer;
}

/* Deixa claro onde está o foco para quem navega pelo teclado */
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   4. TELA INICIAL
--------------------------------------------------------------------------- */
.continuar {
  background: var(--escuro);
  color: var(--escuro-texto);
  border-radius: 16px;
  padding: 18px;
  margin: 20px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.continuar .linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.continuar .rotulo, .continuar .detalhe { color: inherit; opacity: 0.75; font-size: 0.8rem; }
.continuar .titulo { font-family: var(--serifa); font-size: 1.25rem; font-weight: 600; }
/* Título do módulo logo abaixo do nome curto (UX-13). */
.continuar .subtitulo { font-size: 0.85rem; opacity: 0.8; margin-top: -8px; }
.continuar .trilho { background: color-mix(in srgb, var(--escuro-texto) 22%, transparent); }
.continuar .trilho > span { background: var(--escuro-texto); }
.continuar .botao { background: var(--escuro-texto); color: var(--escuro); border-color: var(--escuro-texto); }
.continuar .acoes-continuar { display: flex; gap: 10px; }
.continuar .acoes-continuar .botao:first-child { flex-grow: 1; }
.continuar .descartar {
  background: transparent;
  color: var(--escuro-texto);
  border-color: color-mix(in srgb, var(--escuro-texto) 40%, transparent);
}

.cabecalho-secao { display: flex; justify-content: space-between; align-items: baseline; }
.cabecalho-secao h2 { margin-bottom: 10px; }
.cabecalho-secao span { font-size: 0.8rem; color: var(--texto-suave); }

/* Cada módulo é um <button> inteiro: área de toque grande */
.modulo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px;
  min-height: 76px;
  margin: 0 0 10px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--cartao);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.modulo:disabled { background: transparent; border-style: dashed; color: var(--texto-suave); cursor: default; }
.modulo .numero {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--destaque-fundo);
  color: var(--destaque);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serifa);
  font-weight: 700;
  font-size: 1.25rem;
}
.modulo:disabled .numero { background: var(--trilho); color: var(--texto-suave); }
.modulo .corpo { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
/* align-items: flex-start mantém o peso no alto quando o título quebra em
   duas linhas; nowrap impede o "20%" de quebrar. */
.modulo .linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.modulo .peso { white-space: nowrap; }
.modulo .nome { font-weight: 600; }
.modulo .peso, .modulo .info { font-size: 0.85rem; color: var(--texto-suave); }

.trilho { height: 4px; border-radius: 2px; background: var(--trilho); }
.trilho > span { display: block; height: 100%; border-radius: 2px; background: var(--destaque); }

/* ---------------------------------------------------------------------------
   5. TELA DA QUESTÃO
--------------------------------------------------------------------------- */
.barra-questao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}
.barra-questao .meio { font-weight: 600; }
.barra-questao .contador { color: var(--texto-suave); min-width: 44px; text-align: right; }

/* Progresso em segmentos: um por questão, colorido conforme acerto/erro */
.segmentos { display: flex; gap: 4px; margin: 8px 0 18px; }
.segmentos span { flex: 1; height: 5px; border-radius: 3px; background: var(--borda-forte); }
.segmentos .atual  { background: var(--destaque); }
.segmentos .acerto { background: var(--certo); }
.segmentos .erro   { background: var(--errado); }

.enunciado {
  font-family: var(--serifa);
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 500;
  white-space: pre-line;      /* respeita quebras de linha dos cases */
  margin: 0 0 18px;
}
/* UX-14: no celular, um pouco menor, para as alternativas aparecerem antes. */
@media (max-width: 480px) {
  .enunciado { font-size: 1.2rem; }
}

/* Alternativas são <button>: funcionam com toque, mouse e teclado */
.alternativa {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  min-height: 56px;
  padding: 12px 14px;
  margin: 0 0 10px;
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.alternativa .letra {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}
.alternativa .texto { flex-grow: 1; display: flex; flex-direction: column; }
.alternativa .etiqueta { font-size: 0.8125rem; font-weight: 600; }   /* 13px (UX-10) */

.alternativa.marcada { border: 2px solid var(--destaque); background: var(--destaque-fundo); }
.alternativa.marcada .letra { background: var(--destaque); border-color: var(--destaque); color: var(--destaque-texto); }

.alternativa:disabled { cursor: default; }
.alternativa.neutra { background: var(--cartao-apagado); color: var(--texto-suave); border-color: var(--borda); }
.alternativa.certa  { border: 2px solid var(--certo);  background: var(--certo-fundo); }
.alternativa.errada { border: 2px solid var(--errado); background: var(--errado-fundo); }
.alternativa.certa .letra  { background: var(--certo);  border-color: var(--certo);  color: #fff; }
.alternativa.errada .letra { background: var(--errado); border-color: var(--errado); color: #fff; }
.alternativa.certa .etiqueta  { color: var(--certo-texto); }
.alternativa.errada .etiqueta { color: var(--errado-texto); }

/* Bloco de correção */
.veredito { font-family: var(--serifa); font-size: 1.25rem; font-weight: 600; margin: 0 0 14px; }
.veredito.ok  { color: var(--certo-texto); }
.veredito.nok { color: var(--errado-texto); }
.explicacao { margin: 0 0 14px; }
.explicacao .pergunta { display: block; font-weight: 600; margin-bottom: 2px; }
.explicacao.ok .pergunta  { color: var(--certo-texto); }
.explicacao.nok .pergunta { color: var(--errado-texto); }
.explicacao p { margin: 0; line-height: 1.55; }
/* BL-07: nos comentários com cálculo, cada passo da conta fica numa linha
   da célula da planilha (Alt+Enter). pre-line respeita essas quebras, como
   no .enunciado, sem precisar de innerHTML. Comentários sem quebra de linha
   continuam iguais. */
.explicacao p, .comentarios-todas p { white-space: pre-line; }

details { border-top: 1px solid var(--trilho); margin-top: 4px; }
summary {
  cursor: pointer;
  color: var(--destaque);
  font-weight: 600;
  min-height: 48px;
  display: flex;
  align-items: center;
}
/* Seta que gira ao abrir (UX-06): sem ela, "Comentário de todas as
   alternativas" parecia um link, e não um conteúdo escondido. Feita com
   duas bordas de um quadradinho girado 45 graus. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  summary::after { transition: none; }
}
.comentarios-todas p { margin: 0 0 10px; }

.fonte {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: var(--fundo);
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
  color: var(--texto-suave);
  font-size: 0.8rem;
  line-height: 1.5;
}
.fonte strong { color: var(--texto); }

/* ---------------------------------------------------------------------------
   6. RESULTADO
--------------------------------------------------------------------------- */
.placar-bloco { display: flex; align-items: center; gap: 18px; margin: 14px 0 20px; }
.placar-bloco svg { width: 112px; height: 112px; flex-shrink: 0; }
.placar-bloco .anel-trilho { stroke: var(--borda); }
.placar-bloco .anel-valor  { stroke: var(--destaque); }
.placar-bloco .anel-meta   { stroke: var(--texto); }   /* marca dos 70% */
/* "E agora?" (UX-05): a meta da prova e o próximo passo. */
.meta-prova {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.meta-prova p { margin: 0; font-weight: 600; }
.meta-prova.ok p:first-child { color: var(--certo-texto); }
.meta-prova .recomendacao { margin-top: 4px; font-weight: 400; color: var(--texto-suave); }
.placar { font-family: var(--serifa); font-size: 3rem; font-weight: 700; line-height: 1; }
.placar small { font-size: 1.6rem; color: var(--texto-suave); }
.placar-bloco p { margin: 2px 0 0; color: var(--texto-suave); }

.acoes { display: flex; flex-direction: column; gap: 10px; }
/* Empilhados em largura total (UX-05): lado a lado, "Outro bloco deste
   módulo" quebrava em duas linhas. */
.acoes .par { display: grid; grid-template-columns: 1fr; gap: 10px; }
/* Aviso de repetição (BL-02): informação, não alerta, por isso em azul. */
.aviso-bloco {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--destaque-fundo);
  color: var(--texto);
  font-size: 0.875rem;
}

.lista-resultado {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 16px;
}
.lista-resultado > li { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--trilho); }
.lista-resultado > li:last-child { border-bottom: 0; }
.lista-resultado .marca-resultado {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lista-resultado .ok  .marca-resultado { background: var(--certo-fundo);  color: var(--certo); }
.lista-resultado .nok .marca-resultado { background: var(--errado-fundo); color: var(--errado); }
.lista-resultado .icone { width: 14px; height: 14px; }
.lista-resultado .detalhe { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--errado-texto); }
.lista-resultado .ok .detalhe { color: var(--certo-texto); }

/* Revisão para estudo (bloco e prova, BL-03): cada item abre com a questão
   inteira, as alternativas só para leitura e a correção comentada. */
.corpo-revisao { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.revisao details { border-top: 0; }
.revisao .cartao { margin: 4px 0 0; }
/* UX-12: dentro da revisão, a correção já está num cartão (o item da
   lista); sem a moldura própria, o texto ganha largura. */
.revisao .corpo-revisao .cartao { border: 0; padding: 0; background: transparent; }
.enunciado-revisao {
  font-family: var(--serifa);
  font-size: 1.05rem;
  line-height: 1.45;
  white-space: pre-line;      /* como o .enunciado: respeita as quebras dos cases */
  margin: 4px 0 12px;
}
.alternativas-revisao { list-style: none; padding: 0; margin: 0 0 8px; }
/* Reaproveita o visual da tela da questão, mas sem cara de botão (não é
   clicável) e um pouco mais compacto, porque a coluna aqui é mais estreita. */
.revisao .alternativa {
  min-height: 0;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.95rem;
  cursor: default;
}
.revisao .alternativa .letra { width: 26px; height: 26px; }
.revisao .alternativa .icone { width: 16px; height: 16px; }

/* Texto só para leitor de tela: some da tela, mas continua sendo lido. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.carregando, .vazio { color: var(--texto-suave); }

/* ---------------------------------------------------------------------------
   7. PROVA COMPLETA
--------------------------------------------------------------------------- */

/* Cartão na tela inicial (bloqueado e liberado) */
.prova-bloqueada, .prova-liberada { display: flex; flex-direction: column; gap: 6px; margin-top: 0; }
/* A seção "Prova completa" vem depois dos módulos: um respiro separa as duas. */
.modulo + .cabecalho-secao { margin-top: 24px; }
.prova-bloqueada { border-style: dashed; background: transparent; }
.prova-bloqueada .info, .prova-liberada .info { margin: 0; font-size: 0.9rem; color: var(--texto-suave); }
.progresso-modulos { margin: 0; font-weight: 600; font-size: 0.9rem; }
.prova-liberada .botao.largo { margin-top: 8px; }

/* Tela de regras */
.regras { padding-left: 20px; line-height: 1.6; }
.regras li { margin-bottom: 6px; }
.aviso-prova {
  background: var(--errado-fundo);
  color: var(--errado-texto);
  border-radius: var(--raio);
  padding: 10px 14px;
  font-size: 0.9rem;
}

/* Barra fixa: continua visível ao rolar uma questão longa */
.barra-prova {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin: 0 -16px 8px;
  padding: 0 16px;
  background: var(--fundo);
  border-bottom: 1px solid var(--borda);
}
.barra-prova .link-voltar { min-height: 48px; }
/* flex-wrap deixa a faixa do modo de revisão ocupar uma linha própria,
   abaixo de Sair / relógio / contador, ainda dentro da barra fixa. */
.barra-prova { flex-wrap: wrap; }

/* Faixa "Revisão das marcadas · 2 de 5" (BL-10): azul de destaque, de
   ponta a ponta, para a pessoa nunca esquecer que está no modo. */
.faixa-revisao {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px;
  background: var(--destaque-fundo);
  color: var(--texto);
  font-size: 0.875rem;
  font-weight: 600;
}
.barra-prova .contador { color: var(--texto-suave); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.relogio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* números com a mesma largura: o texto não "pula" */
}

/* Marcar para revisar e navegação */
.marcar.ativo { border-color: var(--destaque); color: var(--destaque); background: var(--destaque-fundo); }
.navegacao-prova { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }

/* Visão geral: 5 colunas cabem em 390px com botões de 48px ou mais */
.acoes.revisar { margin: 12px 0; }
.filtro.tres { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
/* Três botões em 390px: menos respiro dos lados para "Em branco" caber numa linha. */
.filtro.tres .botao { padding-left: 8px; padding-right: 8px; }
/* Filtro do mapa (BL-10): esconde os números fora do grupo escolhido. */
.so-marcadas .numero-questao:not(.marcada),
.so-em-branco .numero-questao.respondida { display: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.85rem; color: var(--texto-suave); }
.item-legenda { display: inline-flex; align-items: center; gap: 6px; }
.item-legenda::before { content: ""; width: 14px; height: 14px; border-radius: 4px; }
.item-legenda.respondida::before { background: var(--destaque); }
.item-legenda.em-branco::before { border: 1.5px dashed var(--texto-suave); }
.item-legenda.marcada::before { display: none; }

.grade-questoes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.numero-questao {
  position: relative;
  min-height: 48px;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.numero-questao.respondida { background: var(--destaque); border: 1.5px solid var(--destaque); color: var(--destaque-texto); }
.numero-questao.em-branco { background: transparent; border: 1.5px dashed var(--texto-suave); color: var(--texto); }
.numero-questao .icone { position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; }

/* Resultado da prova */
.veredito-prova { font-family: var(--serifa); font-size: 1.6rem; font-weight: 700; margin: 6px 0 0; }
.veredito-prova.ok  { color: var(--certo-texto); }
.veredito-prova.nok { color: var(--errado-texto); }

.lista-modulos { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-modulos li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--trilho);
}
.lista-modulos .valor { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }

.filtro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.filtro [aria-pressed="true"] { border-color: var(--destaque); color: var(--destaque); background: var(--destaque-fundo); }
.so-erradas li.ok { display: none; }


/* Histórico no cartão da tela inicial */
.historico ul { list-style: none; padding: 0; margin: 6px 0 0; }
.historico li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 6px 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--trilho);
}
.historico .ok  { color: var(--certo-texto); font-weight: 600; }
.historico .nok { color: var(--errado-texto); font-weight: 600; }

/* Aviso de tempo: preso ao rodapé da tela, visível em qualquer rolagem */
.aviso-tempo {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  max-width: 608px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 4px 16px;
  border-radius: var(--raio);
  background: var(--escuro);
  color: var(--escuro-texto);
  font-weight: 600;
}
.fechar-aviso {
  min-width: 48px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   AMOSTRA PÚBLICA (/questoes/): páginas geradas pelo script da planilha.
   Reaproveitam as classes da revisão (alternativas, cartão de correção);
   aqui ficam só os ajustes próprios dessas páginas.
--------------------------------------------------------------------------- */
/* Questão clicável SEM JavaScript. Os campos escondidos (.escolha: os
   quatro "radio" e o "ver-resposta") vêm antes de tudo no bloco; o
   seletor "A ~ B" quer dizer "B que vem depois de A no mesmo bloco". Assim,
   "#op-c:checked ~ .retornos .r-c" = o retorno da C, quando a C está marcada. */
.dica-amostra { color: var(--texto-suave); font-size: 0.9rem; margin: 0 0 10px; }
.opcoes-amostra .alternativa { margin-bottom: 10px; }
/* Ícones e etiquetas (UX-02): já estão no HTML, escondidos até a resposta. */
.opcoes-amostra .letra .icone { display: none; width: 16px; height: 16px; }
.opcoes-amostra .etiqueta { display: none; }
.opcoes-amostra .e-certa { color: var(--certo-texto); }
.opcoes-amostra .e-sua   { color: var(--errado-texto); }
.opcoes-amostra .e-correta .e-sua { color: var(--certo-texto); }
/* Respondeu (ou abriu a resposta): as que não são a correta ficam apagadas,
   como no simulado; a correta troca a letra pelo certo e mostra "Correta". */
.escolha:checked ~ .opcoes-amostra .alternativa:not(.e-correta) {
  background: var(--cartao-apagado);
  color: var(--texto-suave);
  border-color: var(--borda);
}
.escolha:checked ~ .opcoes-amostra .e-correta .l { display: none; }
.escolha:checked ~ .opcoes-amostra .e-correta .i-certo,
.escolha:checked ~ .opcoes-amostra .e-correta .e-certa { display: block; }
/* A escolhida mostra "Sua resposta"; se errada, o X no lugar da letra. */
#op-a:checked ~ .opcoes-amostra [for="op-a"] .e-sua,
#op-b:checked ~ .opcoes-amostra [for="op-b"] .e-sua,
#op-c:checked ~ .opcoes-amostra [for="op-c"] .e-sua,
#op-d:checked ~ .opcoes-amostra [for="op-d"] .e-sua,
#op-a:checked ~ .opcoes-amostra [for="op-a"]:not(.e-correta) .i-errado,
#op-b:checked ~ .opcoes-amostra [for="op-b"]:not(.e-correta) .i-errado,
#op-c:checked ~ .opcoes-amostra [for="op-c"]:not(.e-correta) .i-errado,
#op-d:checked ~ .opcoes-amostra [for="op-d"]:not(.e-correta) .i-errado { display: block; }
/* Acertou: uma etiqueta só, "Sua resposta · correta", como no simulado. */
#op-a:checked ~ .opcoes-amostra [for="op-a"].e-correta .e-certa,
#op-b:checked ~ .opcoes-amostra [for="op-b"].e-correta .e-certa,
#op-c:checked ~ .opcoes-amostra [for="op-c"].e-correta .e-certa,
#op-d:checked ~ .opcoes-amostra [for="op-d"].e-correta .e-certa { display: none; }
.opcoes-amostra .e-correta .e-sua::after { content: " · correta"; }
#op-a:checked ~ .opcoes-amostra [for="op-a"]:not(.e-correta) .l,
#op-b:checked ~ .opcoes-amostra [for="op-b"]:not(.e-correta) .l,
#op-c:checked ~ .opcoes-amostra [for="op-c"]:not(.e-correta) .l,
#op-d:checked ~ .opcoes-amostra [for="op-d"]:not(.e-correta) .l { display: none; }

/* Teclado: o foco no campo escondido aparece no cartão correspondente. */
#op-a:focus-visible ~ .opcoes-amostra [for="op-a"],
#op-b:focus-visible ~ .opcoes-amostra [for="op-b"],
#op-c:focus-visible ~ .opcoes-amostra [for="op-c"],
#op-d:focus-visible ~ .opcoes-amostra [for="op-d"],
#ver-resposta:focus-visible ~ .ver-resposta {
  outline: 3px solid var(--destaque);
  outline-offset: 2px;
}

/* Escolheu (ou pediu para ver): a correta fica verde... */
.escolha:checked ~ .opcoes-amostra .e-correta { border: 2px solid var(--certo); background: var(--certo-fundo); }
.escolha:checked ~ .opcoes-amostra .e-correta .letra { background: var(--certo); border-color: var(--certo); color: #fff; }
/* ...e a escolhida, se errada, fica vermelha. */
#op-a:checked ~ .opcoes-amostra [for="op-a"]:not(.e-correta),
#op-b:checked ~ .opcoes-amostra [for="op-b"]:not(.e-correta),
#op-c:checked ~ .opcoes-amostra [for="op-c"]:not(.e-correta),
#op-d:checked ~ .opcoes-amostra [for="op-d"]:not(.e-correta) {
  border: 2px solid var(--errado);
  background: var(--errado-fundo);
  color: var(--texto);   /* não fica apagada como as outras */
}
#op-a:checked ~ .opcoes-amostra [for="op-a"]:not(.e-correta) .letra,
#op-b:checked ~ .opcoes-amostra [for="op-b"]:not(.e-correta) .letra,
#op-c:checked ~ .opcoes-amostra [for="op-c"]:not(.e-correta) .letra,
#op-d:checked ~ .opcoes-amostra [for="op-d"]:not(.e-correta) .letra {
  background: var(--errado);
  border-color: var(--errado);
  color: #fff;
}

/* Retorno ("Você acertou!" ou "Você marcou a C...") da letra marcada. */
.retorno { display: none; font-family: var(--serifa); font-size: 1.15rem; font-weight: 600; margin: 4px 0 12px; }
.retorno.ok  { color: var(--certo-texto); }
.retorno.nok { color: var(--errado-texto); }
#op-a:checked ~ .retornos .r-a,
#op-b:checked ~ .retornos .r-b,
#op-c:checked ~ .retornos .r-c,
#op-d:checked ~ .retornos .r-d { display: block; }

/* "Ver resposta comentada": botão de contorno, com 48px+ de altura. Some
   quando a correção já está aberta. */
.ver-resposta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin: 8px 0 16px;
  background: transparent;
  color: var(--destaque);
  border: 2px solid var(--destaque);
}
.escolha:checked ~ .ver-resposta { display: none; }

/* A correção comentada: fechada até a pessoa escolher ou pedir. */
.resposta { display: none; margin: 4px 0 16px; }
.escolha:checked ~ .resposta { display: block; }
/* Quem respondeu já leu o veredito no retorno; o "Resposta correta: letra X"
   do cartão só fica para quem abriu a resposta sem responder (UX-02). */
.escolha[name="resposta"]:checked ~ .resposta .veredito { display: none; }
/* O comentário da letra marcada errada sobe para o topo da lista e ganha
   destaque: quem errou quer ler primeiro por que errou (UX-02). */
.resposta .comentarios-todas { display: flex; flex-direction: column; }
#op-a:checked ~ .resposta .c-a,
#op-b:checked ~ .resposta .c-b,
#op-c:checked ~ .resposta .c-c,
#op-d:checked ~ .resposta .c-d {
  order: -1;
  background: var(--errado-fundo);
  border-radius: 12px;
  padding: 10px 12px;
}
/* Links com cara de botão ("Faça um simulado"): sem o sublinhado de link. */
a.botao { text-decoration: none; }
.curadoria { color: var(--texto-suave); font-size: 0.9rem; }
.lista-amostra { padding-left: 20px; }
.lista-amostra li { margin-bottom: 2px; line-height: 1.45; }
/* Área de toque de 48px nos links (UX-11). */
.lista-amostra a { display: block; padding: 12px 0; min-height: 48px; box-sizing: border-box; }
.ver-todas { margin-top: 20px; }
.ver-todas a { display: inline-flex; align-items: center; min-height: 48px; }

/* ---------------------------------------------------------------------------
   OFERTA NA AMOSTRA E PRIVACIDADE (specs lista-de-espera e degustacao-oferta)
--------------------------------------------------------------------------- */
/* Convite discreto: só aparece depois de responder (ou abrir a resposta). */
.convite-oferta { display: none; margin: 0 0 16px; font-size: 0.95rem; color: var(--texto-suave); }
.escolha:checked ~ .convite-oferta { display: block; }
/* Link na linha do texto; o padding aumenta a área de toque sem
   desalinhar as linhas (como inline-flex fazia). */
.convite-oferta a { color: var(--destaque); font-weight: 600; padding: 14px 0; }
/* Cartão de fim do módulo. Atenção: não pôr "display" aqui; o atributo
   "hidden" (que o amostra.js tira) depende do display padrão. */
.fim-amostra { border: 2px solid var(--destaque); margin: 8px 0 16px; }
.fim-amostra .fim-titulo { font-family: var(--serifa); font-size: 1.2rem; font-weight: 600; margin: 0 0 6px; }
.fim-amostra p { margin: 0 0 4px; }
.fim-amostra .botao.largo { margin-top: 12px; }
/* Páginas de texto (Política de Privacidade) */
.texto-longo { line-height: 1.6; }
.texto-longo li { margin-bottom: 8px; }
/* Com o cartão de fim visível, o "Gostou? Faça um simulado..." logo abaixo
   repetiria o mesmo botão. */
.fim-amostra:not([hidden]) ~ a.botao.largo { display: none; }

/* Cartões da oferta no simulado (spec 2026-11-02-degustacao-oferta): mesmo
   destaque do cartão de fim da amostra, sem cores novas. Convite, não pressão. */
.oferta { border: 2px solid var(--destaque); }
.oferta .oferta-titulo { font-family: var(--serifa); font-size: 1.15rem; font-weight: 600; margin: 0 0 6px; }
.oferta p { margin: 0 0 4px; }
.oferta .botao.largo { margin-top: 12px; }
/* "Já comprei · Entrar": link discreto, mas com área de toque de 48px. */
.oferta .oferta-entrar { margin: 8px 0 0; text-align: center; }
.oferta .oferta-entrar a { display: inline-flex; align-items: center; min-height: 48px; color: var(--destaque); font-weight: 600; }