/* ==========================================================================
   POAB — conferência do gabarito preliminar da 1ª fase.
   Sem framework e sem CDN, como o resto do app.
   ========================================================================== */

.alerta-ok { background: var(--verde-fraco); border-color: var(--verde); color: #1f4f33; }

/* ------------------------------------------------------------ faixa da landing */
.faixa-gabarito {
  background: linear-gradient(180deg, var(--ouro-fraco), #fbf3df);
  border: var(--borda);
  border-radius: var(--raio-p);
  padding: .7rem 1rem;
  margin: 0 auto 1.2rem;
  max-width: var(--largura);
  font-size: .95rem;
}
.faixa-gabarito p { margin: 0; }
.faixa-gabarito a { font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------ tipo de prova */
.tipos-prova { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0 1.4rem; }
.tipo-prova {
  display: inline-flex; align-items: center; gap: .45rem;
  border: var(--borda); border-radius: 999px;
  padding: .5rem 1rem; cursor: pointer; background: var(--areia-2);
  font-weight: 700; font-size: .95rem;
}
.tipo-prova input { accent-color: var(--vinho); }
.tipo-prova:hover { background: var(--ouro-fraco); }

/* ------------------------------------------------------------ grade das 80 */
/* O piso do minmax é a largura REAL de uma linha (número + 5 alvos): com um
   piso menor que o conteúdo, o navegador ainda cria a coluna e a linha vaza
   para fora da grade — em tela estreita a alternativa D some da tela e o
   candidato não tem como marcar. Por isso nada de contagem fixa de colunas:
   quem decide quantas cabem é o auto-fill. */
.grade-respostas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: .35rem .9rem;
  margin: .6rem 0 1.4rem;
}
.linha-q {
  display: flex; align-items: center; gap: .5rem;
  padding: .18rem .3rem; border-bottom: 1px dotted rgba(185, 143, 52, .35);
}
.num-q {
  font-variant-numeric: tabular-nums;
  min-width: 2.1rem; text-align: right;
  color: var(--tinta-suave); font-size: .86rem; font-weight: 700;
}
.opcoes { display: flex; gap: .18rem; }
.op { position: relative; }
.op input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.op span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  border: 1px solid rgba(91, 18, 32, .28); background: #fff;
  font-size: .82rem; font-weight: 700; color: var(--tinta-suave);
}
.op input:checked + span { background: var(--vinho); border-color: var(--vinho); color: #fdf6ea; }
/* Dourado reprovava 3:1 (a bolinha fica branca quando não marcada, vinho
   quando marcada) — anel de duas cores como o resto do app, invertido
   quando a opção já está marcada (fundo escuro). As bolinhas ficam a
   `.opcoes { gap: .18rem }` (~2.9px) uma da outra, e a opção "—" nasce
   SEMPRE marcada (gabarito.html) — o halo (4px, mais largo que o alcance
   do anel em si, offset 1 + 1 de espessura = 2) cria uma faixa clara sólida
   entre o anel escuro de uma bolinha e o fundo vinho da vizinha marcada.
   Sem o halo mais largo, o anel escuro tocava esse vinho direto: escuro
   contra escuro. */
.op input:focus-visible + span {
  outline: 1px solid var(--vinho-escuro);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--areia-2);
}
.op input:checked:focus-visible + span {
  outline-color: var(--areia-2);
  box-shadow: 0 0 0 4px var(--vinho-escuro);
}
.op-branco span { color: #a8998a; }

/* ------------------------------------------------------------ gabarito público */
.tabela-oficial td, .tabela-oficial th { padding: .35rem .6rem; }
.tabela-oficial { font-variant-numeric: tabular-nums; }
.marca-anulada { color: var(--vermelho); font-weight: 700; }
.blocos-gabarito > details {
  border: var(--borda); border-radius: var(--raio-p);
  padding: .6rem .9rem; margin-bottom: .7rem; background: var(--areia-2);
}
.blocos-gabarito summary { cursor: pointer; font-weight: 700; }

/* ------------------------------------------------------------ resultado */
.placar-gabarito {
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center;
  border: var(--borda); border-radius: var(--raio);
  padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; background: var(--areia-2);
  box-shadow: var(--sombra);
}
.placar-gabarito.no-corte { border-left: 6px solid var(--verde); }
.placar-gabarito.abaixo-corte { border-left: 6px solid var(--ouro); }
.placar-gabarito .numero-grande {
  font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--vinho);
}
.placar-gabarito h1 { margin: .2rem 0 .4rem; }
.resumo-marcacoes { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; padding: 0; list-style: none; }
.resumo-marcacoes li { font-size: .9rem; color: var(--tinta-suave); }
.resumo-marcacoes strong { display: block; font-size: 1.3rem; color: var(--tinta); }
.espelho { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: .3rem; }
.espelho-item {
  border: 1px solid rgba(185, 143, 52, .35); border-radius: var(--raio-p);
  padding: .28rem .4rem; font-size: .8rem; text-align: center; background: #fff;
}
.espelho-item .n { display: block; color: var(--tinta-suave); font-size: .72rem; }
.espelho-acerto { background: var(--verde-fraco); }
.espelho-erro { background: var(--vermelho-fraco); }
.espelho-anulada { background: var(--ouro-fraco); }
.espelho-branco { background: var(--areia-3); }

@media (max-width: 700px) {
  .grade-respostas { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: .2rem .6rem; }
  .num-q { min-width: 1.8rem; }
  .op span { width: 1.75rem; height: 1.75rem; font-size: .78rem; }
}