/* Quiz da Turma — sem fontes externas, funciona 100% offline na rede local */

:root{
  --tinta:#16203A; --tinta-2:#3A4665; --tinta-3:#7C88A6;
  --papel:#EDF0F6; --carta:#FFFFFF; --linha:#DCE2ED;
  --azul:#2F6BFF; --azul-fraco:#E7EEFF;
  --ouro:#DFA524; --prata:#98A4BC; --bronze:#B9764A;
  --verde:#0E9E8F; --verde-fraco:#E2F5F2;
  --vermelho:#D24545; --vermelho-fraco:#FBE9E9;
  --r:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 16px/1.5 var(--sans);
  padding-bottom:48px;
}
a{color:var(--azul); text-decoration:none}
a:hover{text-decoration:underline}
.envelope{max-width:760px; margin:0 auto; padding:0 16px}

/* ---------- topo ---------- */
.topo{background:var(--tinta); color:#fff; padding:14px 0}
.topo .envelope{display:flex; align-items:center; gap:12px}
.marca{font-weight:800; letter-spacing:-.02em; font-size:18px; color:#fff}
.marca:hover{text-decoration:none}
.topo nav{margin-left:auto; display:flex; gap:16px; align-items:center}
.topo nav a{color:#B9C4DC; font-size:14px; font-weight:600}
.topo nav a:hover{color:#fff; text-decoration:none}
.eu{display:flex; align-items:center; gap:7px; font-size:14px; color:#fff}
.eu .bolha{font-size:18px}

/* ---------- blocos ---------- */
.sobrancelha{
  font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); margin:26px 0 10px;
}
h1{font-size:26px; font-weight:800; letter-spacing:-.02em; margin:18px 0 6px}
h2{font-size:19px; font-weight:750; letter-spacing:-.01em; margin:0 0 4px}
.legenda{color:var(--tinta-2); margin:0 0 18px}

.carta{background:var(--carta); border:1px solid var(--linha); border-radius:var(--r); padding:18px}
.carta + .carta{margin-top:10px}

/* ---------- lista de questionários ---------- */
.prova{display:flex; gap:14px; align-items:center; background:var(--carta);
  border:1px solid var(--linha); border-radius:var(--r); padding:15px 16px; margin-bottom:10px}
.prova:hover{border-color:var(--azul); text-decoration:none}
.prova .corpo{flex:1; min-width:0}
.prova .meta{color:var(--tinta-3); font-size:13px; margin-top:3px}
.etiqueta{display:inline-block; background:var(--azul-fraco); color:var(--azul);
  font:700 11px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  padding:5px 8px; border-radius:6px; margin-bottom:7px}
.selo{font:800 15px/1 var(--mono); font-variant-numeric:tabular-nums;
  background:var(--verde-fraco); color:var(--verde); padding:8px 10px; border-radius:9px; white-space:nowrap}
.selo.vazio{background:#F1F4F9; color:var(--tinta-3)}

/* ---------- botões ---------- */
.btn{display:inline-block; background:var(--azul); color:#fff; border:0; border-radius:10px;
  padding:12px 18px; font:700 15px/1 var(--sans); cursor:pointer; text-align:center}
.btn:hover{background:#2559DB; text-decoration:none; color:#fff}
.btn:disabled{background:var(--tinta-3); cursor:not-allowed}
.btn.fantasma{background:transparent; color:var(--tinta); border:1px solid var(--linha)}
.btn.fantasma:hover{background:#F3F6FB; color:var(--tinta)}
.btn.largo{display:block; width:100%}
.btn.perigo{background:var(--vermelho)}

/* ---------- formulários ---------- */
label{display:block; font-weight:650; font-size:14px; margin:14px 0 6px}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%; padding:12px 13px; border:1px solid var(--linha); border-radius:10px;
  font:400 16px var(--sans); background:#fff; color:var(--tinta)}
textarea{font:400 13px/1.55 var(--mono); min-height:280px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--azul); outline-offset:1px; border-color:var(--azul)}
.aviso{background:var(--vermelho-fraco); color:#9E2C2C; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:14px}
.ok{background:var(--verde-fraco); color:#0A6F65; border-radius:10px; padding:12px 14px; margin:14px 0; font-size:14px}
.abas{display:flex; gap:6px; margin:18px 0 14px; flex-wrap:wrap}
.abas a{padding:9px 14px; border-radius:999px; font-size:14px; font-weight:650;
  background:var(--carta); border:1px solid var(--linha); color:var(--tinta-2)}
.abas a.ativa{background:var(--tinta); border-color:var(--tinta); color:#fff}
.abas a:hover{text-decoration:none}
.bolhas{display:flex; flex-wrap:wrap; gap:8px}
.bolhas button{font-size:22px; background:var(--carta); border:1px solid var(--linha);
  border-radius:10px; padding:7px 9px; cursor:pointer; line-height:1}
.bolhas button[aria-pressed=true]{border-color:var(--azul); background:var(--azul-fraco)}

/* ---------- RELÓGIO DE PROVA (assinatura) ---------- */
.relogio{position:sticky; top:0; z-index:20; background:var(--tinta); color:#fff}
.relogio .dentro{display:flex; align-items:baseline; gap:12px; padding:11px 16px 9px; max-width:760px; margin:0 auto}
.relogio .conta{font:800 30px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.relogio .rotulo{font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#8E9CBC}
.relogio .andamento{margin-left:auto; font:700 13px/1 var(--mono); color:#B9C4DC}
.trilho{height:3px; background:#2B3555}
.trilho i{display:block; height:100%; background:var(--verde); width:100%; transition:width 1s linear}
.relogio.atencao .conta{color:#FFC94D}   .relogio.atencao .trilho i{background:#FFC94D}
.relogio.urgente .conta{color:#FF7A7A}   .relogio.urgente .trilho i{background:#FF7A7A}
.relogio.urgente .conta{animation:pulsa 1s steps(2,end) infinite}
@keyframes pulsa{50%{opacity:.45}}

/* ---------- questões ---------- */
.questao{background:var(--carta); border:1px solid var(--linha); border-radius:var(--r); padding:18px; margin-bottom:12px}
.questao .numero{font:700 12px/1 var(--mono); color:var(--tinta-3); letter-spacing:.1em; margin-bottom:9px}
.questao .enunciado{font-size:17px; font-weight:600; line-height:1.45; margin-bottom:14px}
.opcao{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--linha);
  border-radius:10px; padding:12px 13px; margin-bottom:8px; cursor:pointer; background:#fff}
.opcao:hover{border-color:var(--azul-fraco); background:#FAFBFF}
.opcao input{margin:3px 0 0; accent-color:var(--azul); flex:none; width:18px; height:18px}
.opcao.escolhida{border-color:var(--azul); background:var(--azul-fraco)}
.questao div.opcao{cursor:default}
.opcao .letra{font:700 13px/1.35 var(--mono); color:var(--tinta-3); flex:none}
.opcao.certa{border-color:var(--verde); background:var(--verde-fraco)}
.opcao.errada{border-color:var(--vermelho); background:var(--vermelho-fraco)}
.explicacao{font-size:14px; color:var(--tinta-2); background:#F5F7FB; border-radius:9px; padding:11px 13px; margin-top:10px}
.rodape-prova{position:sticky; bottom:0; background:var(--papel);
  padding:14px 0 16px; box-shadow:0 -14px 16px 6px var(--papel)}

/* ---------- resultado ---------- */
.placar{background:var(--tinta); color:#fff; border-radius:var(--r); padding:22px; text-align:center}
.placar .nota{font:800 58px/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.placar .sub{color:#9FADC9; font-size:14px; margin-top:8px}
.placar .fatias{display:flex; justify-content:center; gap:26px; margin-top:16px; flex-wrap:wrap}
.placar .fatias div{font:700 18px/1 var(--mono)}
.placar .fatias span{display:block; font:700 10px/1 var(--sans); letter-spacing:.13em;
  text-transform:uppercase; color:#8E9CBC; margin-top:6px}

/* ---------- ranking ---------- */
.linha-rank{display:flex; align-items:center; gap:13px; background:var(--carta);
  border:1px solid var(--linha); border-radius:12px; padding:13px 15px; margin-bottom:8px}
.linha-rank.eu-mesmo{border-color:var(--azul); background:var(--azul-fraco)}
.pos{font:800 16px/1 var(--mono); width:30px; color:var(--tinta-3); flex:none; text-align:center}
.linha-rank.p1 .pos{color:var(--ouro)} .linha-rank.p2 .pos{color:var(--prata)} .linha-rank.p3 .pos{color:var(--bronze)}
.linha-rank.p1{border-color:var(--ouro)}
.rank-avatar{font-size:24px; flex:none}
.rank-corpo{flex:1; min-width:0}
.rank-nome{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rank-meta{font-size:13px; color:var(--tinta-3); margin-top:2px}
.rank-pontos{font:800 19px/1 var(--mono); font-variant-numeric:tabular-nums; flex:none}
.rank-pontos span{display:block; font:700 10px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:5px; text-align:right}
.vazio{color:var(--tinta-3); text-align:center; padding:34px 16px; background:var(--carta);
  border:1px dashed var(--linha); border-radius:var(--r)}

table.dados{width:100%; border-collapse:collapse; font-size:14px}
table.dados th{text-align:left; font:700 11px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-3); padding:9px 8px; border-bottom:1px solid var(--linha)}
table.dados td{padding:10px 8px; border-bottom:1px solid var(--linha)}
table.dados td.num{font:600 14px var(--mono); font-variant-numeric:tabular-nums}

.rodape{text-align:center; color:var(--tinta-3); font-size:13px; margin:34px 0 10px}

@media (min-width:620px){
  h1{font-size:32px}
  .relogio .conta{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}