
:root{
  --bg:#f4f7fb; --card:#ffffff; --ink:#182231; --muted:#637083; --line:#dbe4ef;
  --primary:#0b5ed7; --primary2:#083f91; --green:#16803c; --green-bg:#e9f8ef;
  --red:#c62828; --red-bg:#fff0f0; --amber:#8a5a00; --amber-bg:#fff6dc;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#eaf2ff 0%,#f8fafc 30%,#f4f7fb 100%);color:var(--ink);line-height:1.45}
header{background:#0b1f3a;color:#fff;padding:26px 18px;border-bottom:5px solid #0b5ed7}
.header-wrap{max-width:1180px;margin:auto}
h1{margin:0 0 8px;font-size:clamp(1.6rem,3vw,2.3rem)}
.subtitle{margin:0;color:#d9e8ff;font-size:1rem}
main{max-width:1180px;margin:24px auto;padding:0 16px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(21,43,74,.08);padding:20px;margin-bottom:18px}
.top-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
.exam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:14px}
button{border:0;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer;transition:.15s transform,.15s background,.15s box-shadow}
button:hover{transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(11,94,215,.25)}
.btn-primary:hover{background:var(--primary2)}
.btn-light{background:#eef4ff;color:#0b3f91}
.btn-light:hover{background:#dceaff}
.btn-danger{background:#b42318;color:#fff}
.btn-success{background:#16803c;color:#fff}
.btn-outline{background:#fff;color:#0b3f91;border:1px solid #b8c9e6}
.hidden{display:none!important}
.meta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.badge{background:#eef4ff;color:#0b3f91;border:1px solid #cde0ff;padding:8px 10px;border-radius:999px;font-weight:700;font-size:.9rem}
.badge.neutral{background:#f8fafc;color:#475569;border-color:#e2e8f0}
.form-row{display:grid;grid-template-columns:160px 1fr;gap:10px;align-items:center;margin:10px 0}
input[type=text]{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:1rem;width:100%}
.section-title{margin:26px 0 12px;padding:12px 14px;border-radius:14px;background:#0b1f3a;color:#fff;display:flex;justify-content:space-between;gap:12px;align-items:center}
.section-title small{font-weight:400;color:#d7e6ff}
.question{border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px;margin:10px 0}
.question.answered{border-color:#b8c9e6}
.question.correct{border-color:#35a853;background:#f1fbf4}
.question.wrong{border-color:#d93025;background:#fff4f4}
.question.missing{border-color:#f59e0b;background:#fff7e6;box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.q-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.q-number{flex:0 0 auto;background:#eef4ff;color:#0b3f91;font-weight:800;border-radius:999px;padding:5px 9px}
.q-text{font-size:1rem}
.options{display:flex;gap:10px;flex-wrap:wrap}
.option{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:#f8fafc;cursor:pointer;user-select:none}
.option:hover{background:#eef4ff}
.option input{transform:scale(1.1)}
.feedback{margin-top:10px;font-weight:700}
.progress-wrap{position:sticky;top:0;z-index:5;background:rgba(244,247,251,.96);backdrop-filter:blur(8px);padding:10px 0;margin:0 0 12px}
.progress-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px}
.progress-line{height:13px;background:#e8eef6;border-radius:999px;overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--primary);transition:width .2s}
.progress-info{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.result-box{border:2px solid var(--line);border-radius:18px;padding:18px;background:#fff;margin-top:22px}
.score-big{font-size:1.6rem;font-weight:900;margin:4px 0}
.errors-bar{height:22px;border-radius:999px;background:#e7eef7;overflow:hidden;border:1px solid var(--line);margin:10px 0}
.errors-fill{height:100%;width:0;background:var(--green);transition:.2s width}
.errors-fill.has-errors{background:var(--red)}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:12px}
.summary-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px}
.summary-item strong{display:block}
.summary-item.section-fail{background:#fff4f4;border-color:#f3b4b4}
.status{display:inline-block;margin:8px 0 12px;padding:10px 14px;border-radius:999px;font-weight:900}
.status.approved{background:#e9f8ef;color:#16803c;border:1px solid #a9e1bc}
.status.failed{background:#fff0f0;color:#c62828;border:1px solid #f3b4b4}
.warning{background:var(--amber-bg);border:1px solid #ffdf82;color:#624000;border-radius:12px;padding:12px;margin:12px 0}
.footer-note{font-size:.9rem;color:#637083;margin-top:18px}
@media (max-width:760px){.top-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.section-title{display:block}.progress-wrap{top:0}}
@media print{
  body{background:#fff;color:#000}
  header,.panel.intro,.progress-wrap,#examArea .question:not(.wrong),#examArea .section-title,.actions.no-print,.footer-note{display:none!important}
  main{max-width:100%;margin:0;padding:0}
  .panel,.result-box{box-shadow:none;border:0;border-radius:0}
  .question.wrong{break-inside:avoid}
}

#countdownText.time-warning{color:#b45309;font-weight:900}
#countdownText.time-end{color:#c62828;font-weight:900}
.result-hero{font-size:4rem;line-height:1;margin:8px 0 12px;text-align:center}
.result-hero.approved-hero{color:#16803c;filter:drop-shadow(0 4px 10px rgba(22,128,60,.25))}
.result-hero.failed-hero{color:#c62828;filter:drop-shadow(0 4px 10px rgba(198,40,40,.2))}
.timeout-note{background:#fff7e6;border:1px solid #f6c76b;color:#8a5a00;border-radius:12px;padding:10px 12px}


.hero-brand{
  text-align:center;
}
.boar-logo{
  display:block;
  max-width:min(420px, 92%);
  height:auto;
  margin:0 auto 14px auto;
}
.boar-intro{
  max-width:980px;
  margin:0 auto;
  font-size:1.08rem;
  color:var(--ink);
  text-align:left;
}
@media print{
  .hero-brand{display:none!important}
}


/* Logótipo BôAr no canto superior, sem aumentar o banner */
header{position:relative;overflow:hidden}
.header-wrap{position:relative;padding-right:120px}
.header-logo{
  position:absolute;
  top:0;
  right:0;
  width:92px;
  max-height:92px;
  object-fit:contain;
}
.boar-text-panel{padding:14px 18px}
.boar-text-panel .boar-intro{margin:0 auto}
.hero-brand{display:none!important}
.boar-logo{display:none!important}
@media (max-width:760px){
  .header-wrap{padding-right:72px}
  .header-logo{width:58px;max-height:58px;top:0;right:0}
}
@media print{
  .header-logo,.boar-text-panel{display:none!important}
}


/* Resultado final com certificado, visto verde/reprovação e resumo por etapa */
.certificate{
  margin:12px 0 18px;
  padding:14px;
  border-radius:16px;
  text-align:center;
}
.certificate-pass{
  background:#e9f8ef;
  border:2px solid #16803c;
}
.certificate-fail{
  background:#fff0f0;
  border:2px solid #c62828;
}
.certificate-logo{
  display:block;
  width:86px;
  height:86px;
  object-fit:contain;
  margin:0 auto 8px;
  border-radius:8px;
  background:#fff;
}
.certificate-title{
  font-size:1.25rem;
  margin:4px 0 8px;
}
.result-hero{
  font-size:3.4rem;
  line-height:1;
  margin:6px 0;
}
.status-message{
  font-size:1.18rem;
  margin-top:4px;
}
.pass-message{color:#16803c}
.fail-message{color:#c62828}
.summary-item{
  position:relative;
  min-height:128px;
  padding:12px 12px 12px 12px;
}
.summary-item.section-pass{
  background:#e9f8ef;
  border-color:#16803c;
}
.summary-item.section-fail{
  background:#fff4f4;
  border-color:#c62828;
}
.section-logo{
  position:absolute;
  top:8px;
  right:8px;
  width:38px;
  height:38px;
  object-fit:contain;
  border-radius:4px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}
.summary-item strong{
  padding-right:46px;
}
@media print{
  .certificate-logo,.section-logo{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}


/* Ajuste v10: logótipo BôAr apenas nas etapas concluídas com sucesso */
.summary-item{
  position:relative;
  overflow:hidden;
}
.section-logo{
  position:absolute!important;
  right:8px!important;
  bottom:8px!important;
  top:auto!important;
  width:32px!important;
  height:32px!important;
  object-fit:contain;
  border-radius:4px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  pointer-events:none;
}
.summary-item strong{
  padding-right:0!important;
  display:block;
  max-width:calc(100% - 38px);
}
.summary-item.section-pass strong{
  max-width:calc(100% - 38px);
}
.summary-item.section-fail strong{
  max-width:100%;
}


/* Ajuste WordPress: ao escolher um exame, abre imediatamente a prova no topo */
.exam-open-notice{
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  background:#e9f8ef;
  border:1px solid #16803c;
  color:#14532d;
  font-weight:700;
}
#examArea{
  scroll-margin-top:90px;
}
