@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/*
 * Tema: as duas paletas ficam declaradas como constantes (--d-* escuro, --l-* claro)
 * e os tokens de uso apontam para uma delas. Trocar de tema é trocar o mapeamento,
 * por isso o resto do CSS nunca repete cor crua.
 */
:root {
  /* Marca, igual nos dois temas */
  --vermelho: #FE0000;

  /* Paleta escura */
  --d-bg: #050505;
  --d-card: #101012;
  --d-fundo-alt: #08080a;
  --d-borda: #2a2a30;
  --d-trilho: #1c1c22;
  --d-texto: #FDFDFE;
  --d-suave: rgba(253, 253, 254, 0.62);
  --d-topo: rgba(5, 5, 5, 0.94);
  --d-roxo: #A77498;
  --d-agua: #A4D6D5;
  --d-areia: #FFEABD;
  --d-sobre-acento: #0b0b0d;
  --d-ok-bg: rgba(164, 214, 213, 0.13);
  --d-erro-bg: rgba(254, 0, 0, 0.11);
  --d-roxo-bg: rgba(167, 116, 152, 0.13);
  --d-areia-bg: rgba(255, 234, 189, 0.07);
  --d-sombra: none;
  /* Traço e preenchimento neutro das mini-prévias em SVG */
  --d-pv-linha: rgba(253, 253, 254, 0.34);
  --d-pv-fraco: rgba(253, 253, 254, 0.15);
  --d-sel-bg: rgba(254, 0, 0, 0.09);
  --d-elevacao: 0 8px 20px rgba(0, 0, 0, 0.45);
  /* Pôsteres do carrossel de módulos: capa, número de fundo e véus do rodapé */
  --d-pst-capa: linear-gradient(158deg, #191920 0%, #0e0e12 46%, #08080a 100%);
  --d-pst-num: rgba(253, 253, 254, 0.11);
  --d-pst-brilho: 0.18;
  --d-pst-veu: linear-gradient(180deg, rgba(5, 5, 6, 0) 38%, rgba(5, 5, 6, 0.62) 62%, rgba(5, 5, 6, 0.93) 86%);
  --d-pst-veu-forte: linear-gradient(180deg, rgba(5, 5, 6, 0.2) 0%, rgba(5, 5, 6, 0.82) 46%, rgba(5, 5, 6, 0.97) 78%);
  --d-pst-selo: rgba(5, 5, 6, 0.72);
  --d-pst-sombra: 0 18px 48px rgba(0, 0, 0, 0.62);

  /* Paleta clara */
  --l-bg: #f6f5f3;
  --l-card: #ffffff;
  --l-fundo-alt: #f4f2ed;
  --l-borda: #ddd9d1;
  --l-trilho: #dcd7cc;
  --l-texto: #17171a;
  --l-suave: rgba(23, 23, 26, 0.64);
  --l-topo: rgba(246, 245, 243, 0.94);
  --l-roxo: #8A5677;
  --l-agua: #2F8B88;
  --l-areia: #97711C;
  --l-sobre-acento: #ffffff;
  --l-ok-bg: rgba(47, 139, 136, 0.10);
  --l-erro-bg: rgba(196, 0, 0, 0.08);
  --l-roxo-bg: rgba(138, 86, 119, 0.10);
  --l-areia-bg: rgba(151, 113, 28, 0.09);
  --l-sombra: 0 1px 2px rgba(23, 23, 26, 0.05);
  --l-pv-linha: rgba(23, 23, 26, 0.32);
  --l-pv-fraco: rgba(23, 23, 26, 0.14);
  --l-sel-bg: rgba(196, 0, 0, 0.07);
  --l-elevacao: 0 6px 16px rgba(23, 23, 26, 0.12);
  /* No claro o véu clareia em vez de escurecer, senão o pôster vira uma mancha preta */
  --l-pst-capa: linear-gradient(158deg, #ffffff 0%, #f7f5f0 52%, #ece9e0 100%);
  --l-pst-num: rgba(23, 23, 26, 0.1);
  --l-pst-brilho: 0.28;
  --l-pst-veu: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.78) 62%, rgba(255, 255, 255, 0.97) 86%);
  --l-pst-veu-forte: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.92) 46%, rgba(255, 255, 255, 0.99) 78%);
  --l-pst-selo: rgba(255, 255, 255, 0.82);
  --l-pst-sombra: 0 18px 40px rgba(23, 23, 26, 0.2);

  /* Mapeamento ativo: escuro é o padrão */
  --bg: var(--d-bg);
  --card: var(--d-card);
  --fundo-alt: var(--d-fundo-alt);
  --borda: var(--d-borda);
  --trilho: var(--d-trilho);
  --texto: var(--d-texto);
  --suave: var(--d-suave);
  --topo: var(--d-topo);
  --roxo: var(--d-roxo);
  --agua: var(--d-agua);
  --areia: var(--d-areia);
  --sobre-acento: var(--d-sobre-acento);
  --ok-bg: var(--d-ok-bg);
  --erro-bg: var(--d-erro-bg);
  --roxo-bg: var(--d-roxo-bg);
  --areia-bg: var(--d-areia-bg);
  --sombra: var(--d-sombra);
  --pv-linha: var(--d-pv-linha);
  --pv-fraco: var(--d-pv-fraco);
  --sel-bg: var(--d-sel-bg);
  --elevacao: var(--d-elevacao);
  --pst-capa: var(--d-pst-capa);
  --pst-num: var(--d-pst-num);
  --pst-brilho: var(--d-pst-brilho);
  --pst-veu: var(--d-pst-veu);
  --pst-veu-forte: var(--d-pst-veu-forte);
  --pst-selo: var(--d-pst-selo);
  --pst-sombra: var(--d-pst-sombra);
  /* Vermelho de texto: no claro precisa escurecer para manter contraste */
  --erro-txt: var(--vermelho);

  --raio: 14px;
}

:root[data-tema="claro"] {
  --bg: var(--l-bg);
  --card: var(--l-card);
  --fundo-alt: var(--l-fundo-alt);
  --borda: var(--l-borda);
  --trilho: var(--l-trilho);
  --texto: var(--l-texto);
  --suave: var(--l-suave);
  --topo: var(--l-topo);
  --roxo: var(--l-roxo);
  --agua: var(--l-agua);
  --areia: var(--l-areia);
  --sobre-acento: var(--l-sobre-acento);
  --ok-bg: var(--l-ok-bg);
  --erro-bg: var(--l-erro-bg);
  --roxo-bg: var(--l-roxo-bg);
  --areia-bg: var(--l-areia-bg);
  --sombra: var(--l-sombra);
  --pv-linha: var(--l-pv-linha);
  --pv-fraco: var(--l-pv-fraco);
  --sel-bg: var(--l-sel-bg);
  --elevacao: var(--l-elevacao);
  --pst-capa: var(--l-pst-capa);
  --pst-num: var(--l-pst-num);
  --pst-brilho: var(--l-pst-brilho);
  --pst-veu: var(--l-pst-veu);
  --pst-veu-forte: var(--l-pst-veu-forte);
  --pst-selo: var(--l-pst-selo);
  --pst-sombra: var(--l-pst-sombra);
  --erro-txt: #C40000;
}

/* Antes de o script definir a preferência salva, segue o tema do sistema. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --bg: var(--l-bg);
    --card: var(--l-card);
    --fundo-alt: var(--l-fundo-alt);
    --borda: var(--l-borda);
    --trilho: var(--l-trilho);
    --texto: var(--l-texto);
    --suave: var(--l-suave);
    --topo: var(--l-topo);
    --roxo: var(--l-roxo);
    --agua: var(--l-agua);
    --areia: var(--l-areia);
    --sobre-acento: var(--l-sobre-acento);
    --ok-bg: var(--l-ok-bg);
    --erro-bg: var(--l-erro-bg);
    --roxo-bg: var(--l-roxo-bg);
    --areia-bg: var(--l-areia-bg);
    --sombra: var(--l-sombra);
    --pv-linha: var(--l-pv-linha);
    --pv-fraco: var(--l-pv-fraco);
    --sel-bg: var(--l-sel-bg);
    --elevacao: var(--l-elevacao);
    --pst-capa: var(--l-pst-capa);
    --pst-num: var(--l-pst-num);
    --pst-brilho: var(--l-pst-brilho);
    --pst-veu: var(--l-pst-veu);
    --pst-veu-forte: var(--l-pst-veu-forte);
    --pst-selo: var(--l-pst-selo);
    --pst-sombra: var(--l-pst-sombra);
    --erro-txt: #C40000;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--texto);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 24px 16px 64px; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; background: var(--topo);
  backdrop-filter: blur(8px); z-index: 20;
}
/*
 * Lockup da marca: logo do Laboratório, wordmark SIMULAB e o descritor embaixo.
 * O checkout e a página de sucesso usam só o wordmark, por isso a cor do "LAB"
 * está numa classe própria e não no span solto.
 */
.topo .marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--texto); text-decoration: none;
  font-weight: 800; letter-spacing: 0.4px; font-size: 15px;
}
.topo .marca .marca-lab { color: var(--vermelho); }
.topo .marca-logo { display: block; flex: 0 0 auto; }
.topo .marca-texto { display: flex; flex-direction: column; gap: 3px; }
.topo .marca-nome { line-height: 1; letter-spacing: 0.1em; }
.topo .marca-desc {
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2;
  text-transform: uppercase; color: var(--suave);
}

/* A logo tem duas versões de traço: a clara some no tema claro e vice-versa. */
.topo .marca-logo.escura { display: none; }
:root[data-tema="claro"] .topo .marca-logo.escura { display: block; }
:root[data-tema="claro"] .topo .marca-logo.clara { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) .topo .marca-logo.escura { display: block; }
  :root:not([data-tema]) .topo .marca-logo.clara { display: none; }
}
.topo .quem { font-size: 13px; color: var(--suave); display: flex; gap: 10px; align-items: center; }

.btn-tema {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--card); color: var(--texto);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-tema:hover { border-color: var(--roxo); }

.card {
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 20px; margin-bottom: 16px;
  box-shadow: var(--sombra);
}

h1 { font-size: 26px; font-weight: 800; line-height: 1.25; margin-bottom: 8px; }
h2 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
p.sub { color: var(--suave); font-size: 14px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--suave); }

/* .campo-senha input entra na lista porque o olho alterna o type para text. */
input[type=email], input[type=password], .campo-senha input {
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  background: var(--fundo-alt); border: 1px solid var(--borda); border-radius: 10px;
  color: var(--texto); font-family: inherit; font-size: 15px;
}
input:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border: 0; border-radius: 10px;
  background: var(--vermelho); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.ghost { background: transparent; border: 1px solid var(--borda); color: var(--texto); }
.btn.ghost:hover { border-color: var(--roxo); }
.btn.full { width: 100%; }
.btn.mini { padding: 7px 13px; font-size: 13px; }

.erro { color: var(--erro-txt); font-size: 13px; font-weight: 600; min-height: 18px; margin-bottom: 8px; }

/* ---------- Troca de senha do primeiro acesso ---------- */

/* Tela bloqueante: nada mais aparece até a senha nova ser gravada. */
.senha-caixa { max-width: 460px; margin: 40px auto; }
.senha-selo {
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vermelho); margin-bottom: 10px;
}
.senha-texto { margin-bottom: 22px; }
.senha-dica { font-size: 12px; color: var(--suave); margin: -8px 0 14px; }

/* ---------- Tela de configuração da tentativa ---------- */

.config-topo { margin-bottom: 26px; }
.config-titulo { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 10px; }
.config-topo .sub { max-width: 62ch; }

/* Cada escolha é um bloco numerado, com respiro entre eles. */
.grupo { margin-bottom: 30px; }
.grupo-titulo {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--suave); margin-bottom: 12px;
}
.grupo-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vermelho); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
}

/* Cards selecionáveis: prévia em cima, texto embaixo, selo de check no canto. */
.escolhas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.escolha {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  text-align: left; padding: 14px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--borda); background: var(--fundo-alt);
  color: var(--texto); font-family: inherit;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}
.escolha:hover { border-color: var(--roxo); transform: translateY(-2px); box-shadow: var(--elevacao); }
.escolha:focus-visible { outline: 2px solid var(--roxo); outline-offset: 3px; }
.escolha.ativa,
.escolha.ativa:hover { border-color: var(--vermelho); background: var(--sel-bg); }

.escolha-txt { display: flex; flex-direction: column; gap: 4px; }
.escolha-txt b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.escolha-txt span { font-size: 13px; color: var(--suave); line-height: 1.45; }

.escolha-selo {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  width: 24px; height: 24px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vermelho); box-shadow: 0 0 0 3px var(--card);
  opacity: 0; transform: scale(0.4); pointer-events: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.12s ease;
}
.escolha-selo svg {
  width: 13px; height: 13px;
  fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.escolha.ativa .escolha-selo { opacity: 1; transform: scale(1); }

/* ---------- Mini-prévias em SVG ---------- */
/* Só cor de tema aqui: as duas paletas entram pelas variáveis, sem hex cru. */

.pv {
  display: block; padding: 10px 12px; overflow: hidden;
  border: 1px solid var(--borda); border-radius: 10px; background: var(--card);
}
.pv svg { display: block; width: 100%; max-width: 170px; height: auto; margin: 0 auto; }

.pv-cheio { fill: var(--vermelho); }
.pv-fraco, .pv-pilula { fill: var(--pv-fraco); }
.pv-linha-cheia { fill: var(--pv-linha); }
.pv-quadro { fill: var(--fundo-alt); stroke: var(--pv-linha); stroke-width: 2; }
.pv-quadro-fraco { fill: none; stroke: var(--pv-fraco); stroke-width: 2; }
.pv-box { fill: none; stroke: var(--vermelho); stroke-width: 2; }
.pv-box-off { fill: none; stroke: var(--pv-fraco); stroke-width: 2; }
.pv-off { opacity: 0.55; }
.pv-tick, .pv-seta {
  fill: none; stroke: var(--vermelho); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.pv-ordinal { fill: none; stroke: var(--vermelho); stroke-width: 3; stroke-linecap: round; }

/* Microinterações: a prévia demonstra o comportamento do modo em foco ou hover. */
.escolha:hover .pv-grade,
.escolha:focus-visible .pv-grade { animation: pv-respira 1.6s ease-in-out infinite; }
@keyframes pv-respira { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* Uma por vez: o card da frente sai e o de trás assume o lugar. */
.escolha:hover .pv-frente,
.escolha:focus-visible .pv-frente { animation: pv-sai 1.5s ease-in-out infinite; }
.escolha:hover .pv-tras,
.escolha:focus-visible .pv-tras { animation: pv-assume 1.5s ease-in-out infinite; }
@keyframes pv-sai {
  0%, 12% { transform: translateX(0); opacity: 1; }
  42% { transform: translateX(38px); opacity: 0; }
  43% { transform: translateX(-16px); opacity: 0; }
  72%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes pv-assume {
  0%, 12% { transform: translate(0, 0); opacity: 0.7; }
  42%, 68% { transform: translate(-18px, -4px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0.7; }
}

/* Lista: os cards sobem e o polegar da barra desce, como numa rolagem. */
.escolha:hover .pv-rolo,
.escolha:focus-visible .pv-rolo { animation: pv-rola 2s ease-in-out infinite; }
.escolha:hover .pv-polegar,
.escolha:focus-visible .pv-polegar { animation: pv-polegar 2s ease-in-out infinite; }
@keyframes pv-rola { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pv-polegar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } }

/* Aleatória: os dois cards trocam de posição. */
.escolha:hover .pv-troca-a,
.escolha:focus-visible .pv-troca-a { animation: pv-troca-a 1.7s ease-in-out infinite; }
.escolha:hover .pv-troca-b,
.escolha:focus-visible .pv-troca-b { animation: pv-troca-b 1.7s ease-in-out infinite; }
@keyframes pv-troca-a {
  0%, 15% { transform: translateY(0); }
  55%, 85% { transform: translateY(50px); }
  100% { transform: translateY(0); }
}
@keyframes pv-troca-b {
  0%, 15% { transform: translateY(0); }
  55%, 85% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}

/* Por módulo: os passos acendem sempre na mesma sequência. */
.escolha:hover .pv-passo,
.escolha:focus-visible .pv-passo {
  animation: pv-passo 1.8s ease-in-out infinite;
  animation-delay: calc(var(--passo) * 0.2s);
}
@keyframes pv-passo { 0%, 60%, 100% { opacity: 1; } 22% { opacity: 0.4; } }

/* Tempo: mostrador do cronômetro nas duas prévias. */
.pv-mostrador { fill: var(--fundo-alt); stroke: var(--pv-linha); stroke-width: 2; }
.pv-marca { fill: none; stroke: var(--pv-fraco); stroke-width: 3; stroke-linecap: round; }
.pv-ponteiro { fill: none; stroke: var(--vermelho); stroke-width: 3.5; stroke-linecap: round; }
.pv-pino { fill: var(--vermelho); }
.pv-ponteiro-livre, .pv-ponteiro-regressivo { transform-origin: 70px 50px; }

/* O arco do card com limite já nasce parcialmente gasto, para se explicar parado. */
.pv-arco {
  fill: none; stroke: var(--vermelho); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 194.8; stroke-dashoffset: 68;
  transform: rotate(-90deg); transform-origin: 70px 50px;
}

/* Sem limite: o ponteiro gira para a frente, sem fim. */
.escolha:hover .pv-ponteiro-livre,
.escolha:focus-visible .pv-ponteiro-livre { animation: pv-gira 2.2s linear infinite; }
@keyframes pv-gira { to { transform: rotate(360deg); } }

/* Com limite: o ponteiro volta e o arco se esgota junto. */
.escolha:hover .pv-ponteiro-regressivo,
.escolha:focus-visible .pv-ponteiro-regressivo { animation: pv-gira-tras 2.6s linear infinite; }
.escolha:hover .pv-arco,
.escolha:focus-visible .pv-arco { animation: pv-esgota 2.6s linear infinite; }
@keyframes pv-gira-tras { to { transform: rotate(-360deg); } }
@keyframes pv-esgota {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 194.8; }
}

/* ---------- Seletor de minutos ---------- */

.tempo-caixa {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--card);
}
.tempo-caixa label { margin-bottom: 10px; }
.tempo-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.tempo-campo { position: relative; flex: 0 0 auto; }
.tempo-campo input[type=number] {
  width: 116px; padding: 11px 44px 11px 14px; margin: 0;
  background: var(--fundo-alt); border: 1.5px solid var(--borda); border-radius: 10px;
  color: var(--texto); font-family: inherit; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tempo-campo input:focus { outline: 2px solid var(--roxo); outline-offset: 1px; }
.tempo-unidade {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: var(--suave); pointer-events: none;
}

.tempo-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.tempo-presets .btn.mini { min-height: 40px; font-variant-numeric: tabular-nums; }
.tempo-presets .btn.mini.ativo {
  border-color: var(--vermelho); background: var(--sel-bg); font-weight: 700;
}
.tempo-dica { margin-top: 10px; }

/* ---------- Cronômetro da prova ---------- */

/* Só para leitor de tela: os marcos de tempo são anunciados, não desenhados. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.timer {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--fundo-alt); color: var(--texto);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.timer-icone { display: flex; flex: 0 0 auto; }
.timer-icone svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.timer-valor { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.timer-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--suave); }

/* Alerta acessível: além da cor, muda o ícone (relógio vira aviso) e o rótulo. */
.timer-alerta { display: none; }
.timer.atencao .timer-mostrador,
.timer.critico .timer-mostrador { r: 9px; cy: 12px; }
.timer.atencao .timer-ponteiros,
.timer.critico .timer-ponteiros { display: none; }
.timer.atencao .timer-alerta,
.timer.critico .timer-alerta { display: block; stroke-width: 2.4; }

.timer.atencao {
  border-color: var(--areia); background: var(--areia-bg); color: var(--areia);
}
.timer.atencao .timer-rotulo { color: var(--areia); }

.timer.critico {
  border-color: var(--erro-txt); background: var(--erro-bg); color: var(--erro-txt);
  animation: timer-pulso 1.8s ease-in-out infinite;
}
.timer.critico .timer-rotulo { color: var(--erro-txt); }
@keyframes timer-pulso {
  0%, 100% { box-shadow: 0 0 0 0 var(--erro-bg); }
  50% { box-shadow: 0 0 0 5px var(--erro-bg); }
}

.timer.esgotado { animation: none; }

/* Prova bloqueada depois que o tempo acabou: nada mais é clicável. */
.tempo-acabou { pointer-events: none; opacity: 0.55; }

.aviso-tempo {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; margin-bottom: 14px; border-radius: 12px;
  border: 1px solid var(--erro-txt); background: var(--erro-bg);
  color: var(--erro-txt); font-size: 14px; font-weight: 700;
}

/* ---------- Lista de módulos ---------- */

.areas-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 16px 0 12px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--borda); background: var(--card);
}
.areas-resumo { font-size: 14px; font-weight: 700; color: var(--texto); }
.areas-resumo.vazio { color: var(--erro-txt); }
.areas-utils { display: flex; gap: 8px; }
.areas-utils .btn.mini { padding: 9px 14px; min-height: 40px; }

.grade-areas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.area-check {
  display: flex; align-items: center; gap: 11px; margin: 0;
  padding: 11px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--borda); background: var(--fundo-alt);
  font-size: 14px; font-weight: 600; color: var(--texto);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.area-check:hover { border-color: var(--roxo); }
.area-check.marcada { border-color: var(--vermelho); background: var(--sel-bg); }
.area-check .nome { flex: 1 1 auto; }
.area-check .cont {
  flex: 0 0 auto; color: var(--suave); font-size: 12px; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* Caixa própria: a do navegador não acompanha os dois temas. */
.area-check input {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
  border: 1.5px solid var(--pv-linha); border-radius: 6px; background: var(--card);
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.area-check input:checked { background: var(--vermelho); border-color: var(--vermelho); }
.area-check input:checked::after {
  content: ''; position: absolute; left: 5.5px; top: 1.5px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.area-check input:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }

.config-acoes { margin-top: 6px; gap: 12px; }
.config-acoes #btn-comecar { padding: 14px 28px; box-shadow: 0 4px 14px var(--erro-bg); }

@media (prefers-reduced-motion: reduce) {
  .escolha { transition: border-color 0.15s ease, background 0.15s ease; }
  .escolha:hover { transform: none; }
  .escolha-selo { transition: none; }
  .escolha svg * { animation: none !important; }
}

/* Chips do escopo da tentativa */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--borda); background: var(--fundo-alt); color: var(--suave);
}
.chip.forte { border-color: var(--roxo); background: var(--roxo-bg); color: var(--texto); }

/* Abas por área (os módulos da prova) */
.abas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 4px; scrollbar-width: thin; }
.aba {
  flex: 0 0 auto; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--card);
  color: var(--suave); font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; white-space: nowrap;
}
.aba:hover { border-color: var(--roxo); color: var(--texto); }
.aba.ativa { background: var(--roxo); border-color: var(--roxo); color: var(--sobre-acento); }
.aba .cont { opacity: 0.85; font-weight: 700; }
.aba.completa .cont { color: var(--agua); }
.aba.ativa.completa .cont { color: var(--sobre-acento); }

/* Barras de progresso */
.barra { height: 7px; border-radius: 999px; background: var(--trilho); overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--agua); transition: width 0.25s ease; }
.progresso-topo { margin: 12px 0 18px; }
.progresso-topo .linha { display: flex; justify-content: space-between; font-size: 13px; color: var(--suave); margin-bottom: 6px; }

/* Questões */
.questao { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px; margin-bottom: 14px; box-shadow: var(--sombra); }
.questao .num { font-size: 12px; font-weight: 700; color: var(--roxo); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; }
.questao .enun { font-size: 16px; font-weight: 600; margin-bottom: 14px; line-height: 1.5; }

.alt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--borda); border-radius: 10px;
  background: var(--fundo-alt); cursor: pointer; font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.alt:hover { border-color: var(--roxo); }
.alt input { accent-color: var(--vermelho); margin-top: 3px; flex: 0 0 auto; }
.alt.marcada { border-color: var(--roxo); background: var(--roxo-bg); }
.alt.certa { border-color: var(--agua); background: var(--ok-bg); }
.alt.errada { border-color: var(--erro-txt); background: var(--erro-bg); }

.salvo { font-size: 12px; font-weight: 600; color: var(--agua); min-height: 16px; margin-top: 4px; opacity: 0; transition: opacity 0.2s ease; }
.salvo.on { opacity: 1; }

.explic {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--areia-bg); border-left: 3px solid var(--areia);
  font-size: 14px; color: var(--suave);
}
.explic b { color: var(--areia); }

/* Modo uma questão por vez */
#single-palco { min-height: 300px; }
.single-passo { font-size: 13px; color: var(--suave); margin-bottom: 10px; font-weight: 600; }
.questao.saindo { opacity: 0; transform: translateY(-8px); }
.questao.entrando { opacity: 0; transform: translateY(10px); }
.questao.animada { transition: opacity 0.18s ease, transform 0.18s ease; }

/* Resultado */
.ring-box { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ring { width: 132px; height: 132px; flex: 0 0 auto; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .valor {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-weight: 800; font-size: 25px;
}
.ring .valor small { font-size: 11px; font-weight: 600; color: var(--suave); letter-spacing: 0.5px; }

.selo { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; }
.selo.ok { background: var(--ok-bg); color: var(--agua); border: 1px solid var(--agua); }
.selo.nok { background: var(--erro-bg); color: var(--erro-txt); border: 1px solid var(--erro-txt); }
.selo.andamento { background: var(--areia-bg); color: var(--areia); border: 1px solid var(--areia); }
.selo.tempo { background: var(--roxo-bg); color: var(--roxo); border: 1px solid var(--roxo); }
.selos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 8px; text-align: left; border-bottom: 1px solid var(--borda); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--suave); font-weight: 700; }
td.num, th.num { text-align: right; white-space: nowrap; }
.mini-barra { height: 6px; border-radius: 999px; background: var(--trilho); overflow: hidden; margin-top: 6px; }
.mini-barra > i { display: block; height: 100%; }

.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.rodape-fixo {
  position: sticky; bottom: 0; padding: 14px 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
  display: flex; gap: 10px; flex-wrap: wrap;
}

.oculto { display: none !important; }
.carregando { color: var(--suave); font-size: 14px; padding: 40px 0; text-align: center; }

.aviso-demo {
  font-size: 12px; color: var(--areia); background: var(--areia-bg);
  border: 1px solid var(--areia); border-radius: 8px;
  padding: 9px 12px; margin-bottom: 14px;
}

.hist-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--borda); font-size: 14px; flex-wrap: wrap;
}
.hist-item:last-child { border-bottom: 0; }
.hist-item .data { color: var(--suave); font-size: 13px; }
/* O bloco da esquerda cede espaço ao selo e ao botão, mas nunca some. */
.hist-info { flex: 1 1 260px; min-width: 0; }

/* Módulos da tentativa: chips discretos, com os excedentes atrás do "+N". */
.hist-modulos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hist-modulos .chip { font-size: 11px; padding: 4px 9px; font-weight: 500; }
.hist-modulos .chip.forte { font-weight: 600; }
.hist-modulos .chip-extra { display: none; }
.hist-modulos.aberto .chip-extra { display: inline; }
.hist-modulos .chip-mais {
  font-family: inherit; cursor: pointer; font-weight: 600;
  border-style: dashed; color: var(--texto);
}
.hist-modulos .chip-mais:hover { border-color: var(--roxo); border-style: solid; }

/* ---------- Home: painel do aluno ---------- */

/* Cabeçalho de cada bloco da home: título à esquerda, ação à direita. */
.secao-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.secao-topo h2 { margin-bottom: 2px; }
.secao-topo .sub { max-width: 58ch; }

/* Boas-vindas: texto e ações à esquerda, prova em andamento à direita. */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(250px, 1fr);
  gap: 22px; align-items: start; padding: 24px;
}
.hero-texto { min-width: 0; }
.hero-ola {
  font-size: 12px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--roxo); margin-bottom: 6px;
}
.hero-titulo { font-size: 30px; letter-spacing: -0.5px; }
.hero .sub { max-width: 56ch; }
.hero-acoes { margin-top: 18px; }

/* Retomar a prova aberta: o único bloco em areia da home, para ele saltar. */
.continuar {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px; border-radius: 12px;
  border: 1.5px solid var(--areia); background: var(--areia-bg);
}
.continuar-titulo { font-size: 15px; font-weight: 700; margin-top: 10px; }
.continuar .sub { font-size: 13px; }
.continuar-progresso { width: 100%; margin: 12px 0 2px; }
.continuar-tempo { font-weight: 700; color: var(--areia); }
.continuar .btn { margin-top: 12px; }

/* Números gerais: valor grande, rótulo pequeno, sem moldura pesada. */
.tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.tile {
  display: flex; flex-direction: column; gap: 2px; padding: 16px;
  background: var(--card); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.tile-valor { font-size: 27px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-rotulo {
  font-size: 11px; font-weight: 800; letter-spacing: 0.7px;
  text-transform: uppercase; color: var(--suave);
}
.tile-apoio { font-size: 12px; color: var(--suave); }

/* Estado vazio reaproveitado pelos blocos que ainda não têm dado nenhum. */
.vazio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 18px; text-align: center;
  border: 1px dashed var(--borda); border-radius: 12px; background: var(--fundo-alt);
}
.vazio-titulo { font-size: 15px; font-weight: 700; }
.vazio .sub { max-width: 52ch; }
.vazio .btn { margin-top: 8px; }

/* ---------- Home: gráfico de evolução ---------- */

.evo-caixa { position: relative; }
.evo { display: block; width: 100%; height: auto; }
.evo-grade { stroke: var(--borda); stroke-width: 1; }
.evo-eixo { fill: var(--suave); font-family: inherit; font-size: 11px; font-weight: 600; }
.evo-aprovacao { stroke: var(--roxo); stroke-width: 1.5; stroke-dasharray: 5 5; }
.evo-aprovacao-txt { fill: var(--roxo); font-family: inherit; font-size: 11px; font-weight: 700; }
.evo-area { fill: var(--erro-bg); }
.evo-linha {
  fill: none; stroke: var(--vermelho); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* O ponto diz aprovado ou não pela borda; o valor exato sai na dica e na tabela. */
.evo-ponto {
  fill: var(--card); stroke: var(--erro-txt); stroke-width: 2.5;
  cursor: pointer; transition: r 0.15s ease;
}
.evo-ponto.aprovado { stroke: var(--agua); }
.evo-ponto:hover { r: 8; }
.evo-ponto:focus-visible { r: 8; outline: none; stroke: var(--roxo); stroke-width: 3.5; }

.evo-dica {
  position: absolute; transform: translate(-50%, calc(-100% - 14px));
  display: flex; flex-direction: column; white-space: nowrap; pointer-events: none;
  padding: 6px 10px; border-radius: 9px;
  border: 1px solid var(--borda); background: var(--card); box-shadow: var(--elevacao);
}
.evo-dica b { font-size: 14px; font-weight: 800; }
.evo-dica span { font-size: 11px; color: var(--suave); }

/* ---------- Home: carrossel de módulos ---------- */

/*
 * A faixa rola no eixo x, mas o zoom do pôster cresce no eixo y. Como
 * overflow-x: auto força o overflow vertical a recortar, a folga do zoom
 * precisa vir de padding aqui dentro, senão o card ampliado sai cortado.
 */
.carrossel {
  display: flex; align-items: stretch; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 16px 4px 22px; scrollbar-width: thin;
}
/* Barra fina e temática: o polegar acende de vermelho quando o mouse encosta. */
.carrossel::-webkit-scrollbar { height: 8px; }
.carrossel::-webkit-scrollbar-track { background: transparent; }
.carrossel::-webkit-scrollbar-thumb {
  background: var(--borda); border-radius: 999px;
  transition: background 0.15s ease;
}
.carrossel::-webkit-scrollbar-thumb:hover { background: var(--vermelho); }

/*
 * Pôster do módulo. Não existe foto de capa, então a capa é desenhada: o
 * número do módulo entra gigante e recortado no canto, um brilho pastel
 * rotativo dá variedade de catálogo e o vermelho fica reservado para a ação.
 */
.mod-card {
  position: relative; overflow: hidden;
  scroll-snap-align: start; flex: 0 0 212px; aspect-ratio: 5 / 7;
  display: block; padding: 0; text-align: left; cursor: pointer;
  border: 1.5px solid var(--borda); border-radius: 16px;
  background: var(--pst-capa); color: var(--texto); font-family: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s ease, box-shadow 0.25s ease;
}
.mod-card.acento-1 { --acento: var(--roxo); }
.mod-card.acento-2 { --acento: var(--agua); }
.mod-card.acento-3 { --acento: var(--areia); }

/* Brilho pastel do acento, atrás de tudo */
.mod-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(112% 82% at 88% 20%, var(--acento) 0%, transparent 62%);
  opacity: var(--pst-brilho);
}
/* Trilho do acento no topo do pôster */
.mod-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 5;
  background: linear-gradient(90deg, var(--acento), transparent 82%);
}

.mod-card:hover, .mod-card:focus-visible {
  transform: scale(1.045); z-index: 2; outline: none;
  border-color: var(--vermelho);
  box-shadow: var(--pst-sombra), 0 0 0 1px rgba(254, 0, 0, 0.4);
}

/*
 * Número do módulo como elemento gráfico: entra gigante na faixa livre do
 * pôster e sangra pela borda direita, como o dorso de uma capa de catálogo.
 * Fica acima do véu do rodapé, então não briga com o texto.
 */
.pst-num {
  position: absolute; right: -0.1em; top: 44px; z-index: 1;
  font-size: 128px; font-weight: 800; line-height: 0.78; letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums; color: var(--pst-num); user-select: none;
}

/* Véu do rodapé: sempre presente para o texto ficar legível, mais denso no hover */
.pst-veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--pst-veu);
}
.pst-veu::after {
  content: ''; position: absolute; inset: 0;
  background: var(--pst-veu-forte); opacity: 0; transition: opacity 0.25s ease;
}
.mod-card:hover .pst-veu::after, .mod-card:focus-visible .pst-veu::after { opacity: 1; }

/* Selo flutuante com desfoque no canto de cima, à esquerda do número */
.pst-selo {
  position: absolute; top: 12px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 9px 5px 6px; border-radius: 999px;
  background: var(--pst-selo); backdrop-filter: blur(6px);
  border: 1px solid var(--borda);
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--suave);
}
.pst-selo svg { display: block; width: 18px; height: 18px; transform: rotate(-90deg); }
.pst-selo .pst-trilho { fill: none; stroke: var(--trilho); stroke-width: 4; }
.pst-selo .pst-arco { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.pst-selo-novo { padding: 5px 10px; }

/* Conteúdo, ancorado no rodapé do pôster */
.pst-corpo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 15px;
}
.pst-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--erro-txt);
}
/* Nome longo não pode empurrar o rodapé: três linhas e o resto vira reticências. */
.pst-nome {
  font-size: 15px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  line-clamp: 3; overflow: hidden;
}
.pst-meta { font-size: 11px; font-weight: 600; color: var(--suave); }
.pst-nota { font-size: 12px; font-weight: 800; }

/*
 * A chamada só aparece no hover ou no foco. Tudo que o aluno precisa para
 * escolher já está escrito no pôster, então quem usa toque não perde nada.
 */
.pst-cta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--texto);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
}
.pst-cta svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: var(--vermelho); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.mod-card:hover .pst-cta, .mod-card:focus-visible .pst-cta {
  max-height: 22px; opacity: 1; margin-top: 4px;
}

/* Faixas de desempenho: a cor acompanha o percentual, que vai sempre escrito. */
.mod-card.boa .pst-selo, .mod-card.boa .pst-nota { color: var(--agua); }
.mod-card.boa .pst-selo { border-color: var(--agua); }
.mod-card.media .pst-selo, .mod-card.media .pst-nota { color: var(--areia); }
.mod-card.media .pst-selo { border-color: var(--areia); }
.mod-card.fraca .pst-selo, .mod-card.fraca .pst-nota { color: var(--erro-txt); }
.mod-card.fraca .pst-selo { border-color: var(--erro-txt); }
.mod-card.sem-dados .pst-nota { color: var(--suave); font-weight: 700; }

.carrossel-setas { display: flex; gap: 8px; }
.seta {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--card); color: var(--texto); cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.seta svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.seta:hover:not(:disabled) { border-color: var(--vermelho); color: var(--vermelho); background: var(--sel-bg); }
.seta:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.seta:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Home: onde focar ---------- */

.foco-lista {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.foco-item {
  display: flex; flex-direction: column; gap: 7px; padding: 14px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--fundo-alt);
}
.foco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.foco-nome { font-size: 14px; font-weight: 700; line-height: 1.3; }
.foco-pct { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.foco-meta { font-size: 12px; color: var(--suave); }
.foco-item.fraca .foco-pct { color: var(--erro-txt); }
.foco-item.fraca .barra > i { background: var(--erro-txt); }
.foco-item.media .foco-pct { color: var(--areia); }
.foco-item.media .barra > i { background: var(--areia); }
.foco-item.boa .foco-pct { color: var(--agua); }

/* O cabeçalho carrega cronômetro e três botões: o descritor é o primeiro a sair
   quando a largura aperta. Logo e wordmark ficam em qualquer tamanho. */
@media (max-width: 1080px) {
  .topo .marca-desc { display: none; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foco-lista { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  h1 { font-size: 22px; }
  /* No celular o cabeçalho fica só com os controles: quem é o aluno já está
     escrito na saudação da home. */
  #quem-nome { display: none; }
  .hero { padding: 18px; }
  .hero-titulo { font-size: 24px; }
  .tile { padding: 14px; }
  .tile-valor { font-size: 23px; }
  /* No celular o pôster encolhe e as setas somem: quem usa toque arrasta a faixa. */
  .mod-card { flex-basis: 168px; }
  .carrossel { gap: 10px; padding: 12px 4px 18px; }
  .carrossel-setas { display: none; }
  .pst-num { font-size: 100px; top: 36px; }
  .pst-corpo { padding: 12px 11px 12px; }
  .pst-nome { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; }
  .card, .questao { padding: 16px; }
  .ring-box { gap: 16px; }
  .wrap { padding: 16px 12px 48px; }
  .btn { width: 100%; }
  .acoes .btn, .rodape-fixo .btn, .areas-utils .btn, .tempo-presets .btn { width: auto; flex: 1 1 auto; }
  .escolhas, .grade-areas { grid-template-columns: 1fr; }
  /* No celular o chip fica só com o número, que é o que importa de relance. */
  .timer { padding: 4px 10px 4px 8px; gap: 5px; }
  .timer-rotulo { display: none; }
  .tempo-campo, .tempo-campo input[type=number] { width: 100%; }
  .tempo-linha { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .questao.animada { transition: none; }
  .questao.saindo, .questao.entrando { opacity: 1; transform: none; }
  .barra > i { transition: none; }
  .timer.critico { animation: none; }
  .timer { transition: none; }
  .mod-card { transition: border-color 0.15s ease; }
  .mod-card:hover, .mod-card:focus-visible { transform: none; }
  .pst-veu::after, .pst-cta { transition: none; }
  .evo-ponto { transition: none; }
}

/* ---------- Mostrar/ocultar senha ---------- */

/* O wrapper herda a respiração que era do input, senão o olho desalinha. */
.campo-senha { position: relative; margin-bottom: 14px; }
.campo-senha input { width: 100%; margin-bottom: 0; padding-right: 48px; }
.ver-senha {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--suave); cursor: pointer;
}
.ver-senha:hover { color: var(--texto); }
.ver-senha svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ver-senha .olho-fechado { display: none; }
.ver-senha[aria-pressed="true"] .olho-aberto { display: none; }
.ver-senha[aria-pressed="true"] .olho-fechado { display: block; }

/* ---------- Esqueci minha senha ---------- */

/* Link de apoio embaixo do botão principal: presente, mas sem competir com ele. */
.login-extra { margin-top: 14px; text-align: center; }
.link-discreto {
  padding: 4px 2px; background: none; border: 0;
  color: var(--suave); font-family: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-discreto:hover { color: var(--texto); }
.link-discreto:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; border-radius: 6px; }

/* Confirmação de envio: mesma família visual dos selos de acerto. */
.aviso-ok {
  font-size: 14px; line-height: 1.55; color: var(--agua);
  background: var(--ok-bg); border: 1px solid var(--agua);
  border-radius: 10px; padding: 13px 15px;
}

/* ---------- Diálogo de prova em andamento ---------- */

/*
 * Camada por cima da tela de configuração, para o aluno escolher entre voltar
 * para a prova aberta e descartá-la em favor da configuração que acabou de
 * montar. As duas saídas são botões: nada acontece por clique fora.
 */
.dialogo { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialogo.oculto { display: none; }
.dialogo-fundo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.dialogo-caixa { position: relative; width: 100%; max-width: 460px; margin: 0; }
.dialogo-caixa h2 { margin: 12px 0 8px; font-size: 20px; }
.dialogo-caixa .sub { margin-bottom: 14px; }
.dialogo-acoes { flex-direction: column; align-items: stretch; }
.dialogo-acoes .btn { width: 100%; }