/* Simulacao parcial gratuita da Prova de Equivalencia (rota escondida, 2026-10-09; leitor do QBank v2 desde 2026-10-10).
   Carregado depois de /ds/pe.css e /app/qbank/qbank.css (e, nos resultados, de
   revisao-v2.css): tokens, componentes pe-* e o leitor qb-* vem de la. Aqui so' o que e' proprio da simulacao:
   moldura (topo, vistas, rodape PRR), entrada, email e fim; no exame, o que os exames de simulacao da v2 juntam ao
   leitor (simulados.css: cronometro com avisos, sublinhados, folha com 10 por linha, janelas, aviso flutuante);
   nos resultados, nota, areas e a lista da correcao. Na troca da v2 para a raiz, os caminhos / das
   paginas mudam tambem. So' tema claro. Sem style= nas paginas (CSP): as larguras vem por variaveis em JS. */

[hidden] { display: none !important; }
:root { --pad-x: 16px; }
@media (min-width: 768px) { :root { --pad-x: 32px; } }

/* ---------- Moldura ---------- */
body.pe { min-height: 100vh; display: flex; flex-direction: column; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 2000; padding: 10px 14px; border-radius: 10px; background: var(--pe-navy); color: #fff !important; text-decoration: none; }
.saltar:focus { top: 12px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wrap--estreito { max-width: 760px; }
/* resultados: a largura do ecra de resultados do QBank (.qb-main de #results-screen) */
.wrap--largo { max-width: 1600px; padding-left: clamp(20px, 3vw, 44px); padding-right: clamp(20px, 3vw, 44px); }
@media (max-width: 768px) { .wrap--largo { padding-left: 16px; padding-right: 16px; } }
/* titulos que recebem o foco por codigo (leitores de ecra), sem contorno */
#results-title:focus, #rv-qtitle:focus, #qb-qtitle:focus { outline: none; }
.topo { position: sticky; top: 0; z-index: 40; }
.topo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--pe-bg-rgb), .88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--pe-line); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pe-ink) !important; flex: none; }
.logo img { width: 34px; height: 34px; }
.logo span { font-weight: 600; font-size: 14px; line-height: 1.05; letter-spacing: -.02em; }
main { flex: 1; min-width: 0; }
.vista { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 80px); }
.stack > * + * { margin-top: var(--gap, 16px); }
.stack--largo { --gap: 28px; }
.erro { padding: 12px 14px; border-radius: 12px; background: var(--pe-bad-bg); color: var(--pe-bad); font-size: 14px; }
.roda { width: 28px; height: 28px; margin: 0 auto 14px; border-radius: 50%; border: 3px solid var(--pe-sunk); border-top-color: var(--pe-blue-strong); animation: roda 1s linear infinite; }
@keyframes roda { to { transform: rotate(360deg); } }
#v-carregar .wrap { text-align: center; }
/* botao com ar de ligacao, sem maiusculas (o .pe-btn--link do pe.css fica para "Entregar" no topo, como na v2) */
.sim-linkbtn { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 36px; }

/* ---------- Entrada, email e fim ---------- */
.intro { display: grid; gap: 28px; }
.intro__factos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.facto { background: var(--pe-surface); border: 1px solid var(--pe-line); border-radius: var(--pe-r); padding: 18px; }
.facto b { display: block; font-size: 30px; font-weight: 300; letter-spacing: -.04em; line-height: 1; color: var(--pe-blue); }
.facto span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--pe-ink-2); }
.lista { padding-left: 1.2em; display: grid; gap: 6px; }
.lista li::marker { color: var(--pe-blue-strong); }
.pe-card.stack > * + * { margin-top: 16px; }
.pe-check { cursor: pointer; font-size: 14.5px; }
.pe-check input { width: 20px; height: 20px; flex: none; }
.pe-input[aria-invalid="true"] { border-color: var(--pe-bad); }
#f-email-in { font-size: 16px; }
@media (max-width: 599px) {
  .intro__factos { grid-template-columns: minmax(0, 1fr); }
  .facto { display: flex; align-items: baseline; gap: 12px; }
  .facto span { margin-top: 0; }
}

/* ---------- Exame: o leitor do QBank (qbank.css) + o que os exames de simulacao da v2 juntam ---------- */
body.em-exame .topo, body.em-exame .rodape { display: none; }
#question-screen, #results-screen { font-size: var(--qbank-text-size, 16px); }
.sim-top__tags { display: flex; align-items: center; gap: 6px; flex: none; }
.pe-btn .pe-i { width: 16px; height: 16px; }
/* Contagem decrescente com avisos aos 15 e aos 5 minutos (simulados.css da v2) */
.ex-timer .pe-i { color: var(--pe-blue-strong); }
.ex-timer__aviso { font-size: 12px; font-weight: 500; }
.ex-timer__aviso:empty { display: none; }
.ex-timer.is-warn { color: var(--pe-flag); border-color: var(--pe-flag-line); background: var(--pe-flag-bg); }
.ex-timer.is-warn .pe-i { color: var(--pe-flag); }
.ex-timer.is-low { background: var(--pe-bad-bg); }
.ex-timer.is-low .pe-i { color: var(--pe-bad); }
@media (prefers-reduced-motion: no-preference) {
  .ex-timer.is-low { animation: ex-pulso 2s ease-in-out infinite; }
  @keyframes ex-pulso { 50% { box-shadow: 0 0 0 4px rgba(179,55,44,.15); } }
}
/* Sublinhados do enunciado (seleciona para sublinhar, seleciona outra vez para tirar) */
.question-text mark.highlighted { background: var(--pe-flag-line); color: inherit; border-radius: 3px; padding: 0 1px; }
.question-text table { display: block; overflow-x: auto; }
.pe-opt__t p { margin: 0; }
.pe-opt__t p + p { margin-top: .4em; }
/* Limpar a resposta escolhida (a pergunta volta a ficar em branco) */
.sim-limpar-resp { min-height: 32px; padding: 0; font-size: 12.5px; color: var(--pe-ink-3) !important; }
.sim-limpar-resp:hover { color: var(--pe-bad) !important; }
/* Folha de respostas: as 50 perguntas, 10 por linha */
#nav-modal { width: min(520px, calc(100vw - 24px)); }
#nav-modal .pe-qnav { grid-template-columns: repeat(10, minmax(0, 1fr)); overscroll-behavior: contain; }
.sim-folha-sub { margin: -4px 0 10px; font-variant-numeric: tabular-nums; }
/* "Mais" do telemovel: fundo e caixa (no QBank estao em style inline, que a CSP desta pagina nao deixa) */
#qb-mais .qb-panel__scrim { opacity: 1; }
#qb-mais .qb-sheet__box { position: relative; }
#session-save-status { flex: none; }
@media (max-width: 899px) {
  .ex-timer__aviso { display: none; }
}
@media (max-width: 599px) {
  #nav-modal .pe-qnav { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}

/* ---------- Janelas e avisos (simulados.css da v2) ---------- */
.sim-dlg { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.sim-dlg__scrim { position: absolute; inset: 0; }
.sim-dlg .pe-modal { position: relative; max-height: calc(100vh - 32px); overflow-y: auto; }
.sim-dlg h2 { font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--pe-ink); }
.sim-dlg__txt { margin-top: 8px; font-size: 14.5px; color: var(--pe-ink-2); }
.sim-dlg__stats { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--pe-bg); font-size: 14px; color: var(--pe-ink-2); }
.sim-dlg__stats b.is-bad { color: var(--pe-bad); } .sim-dlg__stats b.is-ok { color: var(--pe-ok); } .sim-dlg__stats b.is-flag { color: var(--pe-flag); }
.sim-dlg__act { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 599px) {
  .sim-dlg { place-items: end center; padding: 0; }
  .sim-dlg .pe-modal { border-radius: var(--pe-r-lg) var(--pe-r-lg) 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 92vh; }
  .sim-dlg__act .pe-btn { flex: 1; }
}
.sim-toast { position: fixed; left: 0; right: 0; bottom: 104px; z-index: 1300; width: fit-content; max-width: calc(100vw - 32px); margin: 0 auto; transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.sim-toast.is-on { opacity: 1; transform: none; }
.sim-toast.is-bad { background: var(--pe-bad); }
.sim-toast.is-ok .pe-i { color: var(--pe-aqua); }
.ecra { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 24px; background: rgba(var(--pe-bg-rgb), .94); text-align: center; }
.ecra p { font-size: 17px; color: var(--pe-ink); }

/* ---------- Resultados: nota, folha, areas; a correcao usa a revisao do QBank (qbank.css + revisao-v2.css) ---------- */
.res-score .pe-ring > span { font-size: 34px; }
.res-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.res-kpis .pe-kpi__value small { font-size: .5em; }
.res-posicao { margin-top: 18px; font-size: 14px; color: var(--pe-ink-2); }
.res-areas { margin-bottom: 20px; }
.res-areas .pe-card__head { flex-wrap: wrap; }
.res-areas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 28px; }
.res-area__l { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--pe-ink); }
.res-area__l span:last-child { font-weight: 600; color: var(--pe-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-area .pe-bar { margin-top: 6px; }
.res-bar--bad > i { background: var(--pe-bad); }
.res-rev-t { margin-top: 6px; }
#review-question .qb-qhead { flex-wrap: wrap; }
/* Numa so' coluna (como a revisao do QBank), a correcao separa-se do caso como no telemovel da demo */
#review-question .qb-card.rv-modo .qb-card__a { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--pe-line); }
#qb-qstate { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.justification.show .justification-text:empty::before { content: "Esta pergunta não tem justificação."; color: var(--pe-ink-3); }
@media (max-width: 599px) {
  .res-score .pe-ring > span { font-size: 30px; }
  .res-kpis { width: 100%; }
}

/* ---------- Rodape (barra PRR obrigatoria) ---------- */
.rodape { background: var(--pe-surface); border-top: 1px solid var(--pe-line); padding: 28px 0 32px; font-size: 13px; color: var(--pe-ink-3); }
.rodape__in { display: grid; gap: 16px; }
.rodape a { color: var(--pe-ink-2); }
.prr { display: flex; align-items: center; gap: 24px; }
.prr p { flex: 1; font-size: 11.5px; line-height: 1.45; }
.prr img { width: 360px; max-width: 45%; height: auto; }
@media (max-width: 767px) { .prr { flex-direction: column; align-items: flex-start; } .prr img { max-width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .sim-toast { transition: none; }
}
@media print { .topo, .qb-top, .qb-bottom, .rodape, .qb-shortcuts { display: none !important; } }

/* Resumo do que foi entregue, antes do pedido de email */
.sim-resumo { margin: 0; font-weight: 600; color: var(--pe-ink); }