/*
  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;
}

/* Selo "Beta" ao lado da marca: pequeno, só para sinalizar a fase de testes */
.selo-beta {
  background: var(--destaque-fundo);
  color: var(--destaque);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;      /* 999px deixa as pontas totalmente arredondadas */
}

/* Faixa explicando a versão de teste. Usa as cores de "destaque" (azul),
   e não as de .aviso (laranja), porque é informação, não alerta. */
.faixa-beta {
  background: var(--destaque-fundo);
  color: var(--texto);
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: var(--raio);
  font-size: 0.875rem;
  /* Mesma largura do .aviso, com um respiro maior antes do título */
  max-width: 608px;
  margin: 0 max(16px, calc((100% - 608px) / 2)) 20px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Botão de feedback no rodapé: 48px de altura mínima para o toque no celular */
.botao-feedback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-bottom: 16px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--cartao);
  color: var(--destaque);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
/* "display: flex" acima venceria o atributo hidden; esta regra garante
   que o botão continue escondido enquanto não houver link. */
.botao-feedback[hidden] { display: none; }

.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; }
.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; }
.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;
}

/* 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.75rem; font-weight: 600; }

.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; }

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;
}
.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 { 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; }
.acoes .par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.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.75rem; font-weight: 600; color: var(--errado-texto); }

.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; }
.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 */
.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; }

.corpo-revisao { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.revisao-prova details { border-top: 0; }
.revisao-prova .cartao { margin: 4px 0 0; }

/* 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;
}