/* ============================ FortiCerti — estilos ========================= */
:root, [data-theme="dark"]{
  --bg:#0f1419; --panel:#1a2230; --panel-2:#232d3f; --text:#e8eef5; --muted:#8a99ad;
  --accent:#ee3124; --accent-2:#ff5a45; --select:#4a9eff; --select-bg:rgba(74,158,255,.12);
  --green:#2ec27e; --green-bg:rgba(46,194,126,.12); --red:#e54848; --red-bg:rgba(229,72,72,.12);
  --yellow:#f5a623; --border:#2d3a4e; --explanation-bg:var(--panel-2); --quote-bg:rgba(74,158,255,.07);
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#eef2f7; --text:#1a2230; --muted:#5a6778;
  --accent:#ee3124; --accent-2:#d62718; --select:#2563eb; --select-bg:rgba(37,99,235,.10);
  --green:#1f8a4d; --green-bg:#d6f2e0; --red:#c43030; --red-bg:#f7dede;
  --yellow:#b9770a; --border:#d8dde5; --explanation-bg:#eaf1fb; --quote-bg:rgba(37,99,235,.06);
  --shadow:0 6px 20px rgba(20,30,50,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55; min-height:100vh;
  -webkit-tap-highlight-color:transparent;
}
.accent{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.divider{height:1px;background:var(--border);margin:16px 0}
.sub{font-size:14px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}

/* -------- Topbar -------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:var(--panel); border-bottom:2px solid var(--accent);
}
.topbar-title{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.1}
.topbar-title strong{font-size:16px}
.topbar-context{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-right{display:flex; align-items:center; gap:6px}
.icon-btn{
  background:var(--panel-2); color:var(--text); border:1px solid var(--border);
  border-radius:8px; min-width:38px; height:38px; padding:0 10px; cursor:pointer; font-size:15px;
}
.icon-btn:hover{background:var(--border)}
.timer{font-family:"SF Mono",Monaco,monospace; font-weight:600; font-size:15px;
  background:var(--panel-2); border:1px solid var(--border); border-radius:8px; padding:6px 12px}
.timer.warning{color:var(--yellow); border-color:var(--yellow)}
.timer.danger{color:var(--red); border-color:var(--red); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}

/* -------- Layout -------- */
#app{max-width:900px; margin:0 auto; padding:20px 16px 96px}
.screen{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.screen-title{margin:4px 0 16px; font-size:22px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:22px; box-shadow:var(--shadow); margin-bottom:16px}

/* -------- Bienvenida -------- */
.hero{text-align:center; margin:24px 0 20px}
.logo{font-size:40px; margin:0; letter-spacing:.5px}
.tagline{color:var(--muted); margin:6px 0 0}
.auth-card{max-width:420px; margin:0 auto}
.tabs{display:flex; gap:6px; margin-bottom:16px; background:var(--panel-2); padding:5px; border-radius:10px}
.tab{flex:1; background:transparent; border:none; color:var(--muted); padding:9px; border-radius:7px;
  cursor:pointer; font-size:13px; font-weight:600}
.tab.active{background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tab-pane{display:none}
.tab-pane.active{display:block}
.field{display:block; margin-bottom:14px}
.field>span{display:block; font-size:13px; font-weight:600; margin-bottom:6px}
.field input,.field select{
  width:100%; padding:12px 13px; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:9px; font-size:15px; font-family:inherit}
.field input:focus,.field select:focus{outline:none; border-color:var(--select)}
.check{display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:14px; cursor:pointer}
.check input{width:18px; height:18px; accent-color:var(--accent)}
.auth-msg{font-size:13px; min-height:18px; margin:8px 0 0}
.auth-msg.error{color:var(--red)} .auth-msg.ok{color:var(--green)}
.google-slot{margin-top:12px; display:flex; justify-content:center}

/* -------- Botones -------- */
.btn{border:none; border-radius:9px; padding:13px 22px; font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:background .15s; min-height:46px}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:var(--border)}
.btn-danger{background:transparent; color:var(--red); border:1px solid var(--red)}
.btn-block{width:100%; margin-top:10px}
.btn:disabled{opacity:.5; cursor:not-allowed}
.row-btns{display:flex; gap:10px; flex-wrap:wrap}
.row-btns .btn{flex:1}

/* -------- Inicio / examen cards -------- */
.welcome-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px}
.stat-chips{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.chip{background:var(--panel-2); border:1px solid var(--border); border-radius:20px;
  padding:5px 12px; font-size:12px; white-space:nowrap}
.chip b{color:var(--accent)}
.exam-cards{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.exam-cards{grid-template-columns:1fr 1fr}}
.exam-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px;
  cursor:pointer; box-shadow:var(--shadow); transition:transform .12s, border-color .12s}
.exam-card:hover{transform:translateY(-2px); border-color:var(--accent)}
.exam-card .ec-code{display:inline-block; background:var(--accent); color:#fff; font-weight:700;
  font-size:12px; padding:3px 10px; border-radius:20px; margin-bottom:10px}
.exam-card h3{margin:0 0 6px; font-size:17px}
.exam-card .ec-meta{color:var(--muted); font-size:13px}
.exam-card .ec-bar{height:6px; background:var(--panel-2); border-radius:6px; margin-top:12px; overflow:hidden}
.exam-card .ec-bar>span{display:block; height:100%; background:var(--green)}
.quick-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.quick-actions .btn{flex:1}

/* -------- Config -------- */
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mode-card{padding:14px; background:var(--bg); border:2px solid var(--border); border-radius:10px;
  cursor:pointer; text-align:left; color:var(--text); font-family:inherit}
.mode-card strong{display:block; margin-bottom:3px}
.mode-card small{color:var(--muted); font-size:12px}
.mode-card.active{border-color:var(--accent); background:var(--select-bg)}

/* -------- Quiz -------- */
.qmeta{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:6px}
.tag{background:var(--panel-2); padding:3px 10px; border-radius:12px; font-size:12px}
.tag.multi{background:rgba(245,166,35,.2); color:var(--yellow)}
.tag.exhibit{background:var(--green-bg); color:var(--green)}
.tag.cat{background:var(--select-bg); color:var(--select)}
.qtext{font-size:16px; margin-bottom:16px; line-height:1.6}
.exhibit-img{width:100%; border-radius:8px; border:1px solid var(--border); background:#fff;
  margin:10px 0 18px; cursor:zoom-in}
.exhibit-missing{font-size:13px; color:var(--muted); font-style:italic; padding:10px;
  border:1px dashed var(--border); border-radius:8px; margin:10px 0 18px}
.options{list-style:none; padding:0; margin:0 0 20px}
.option{display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:8px;
  background:var(--bg); border:2px solid var(--border); border-radius:10px; cursor:pointer}
.option:hover{border-color:var(--muted)}
.option.selected{border-color:var(--select); background:var(--select-bg)}
.option.selected .opt-letter{color:var(--select)}
.option.correct{border-color:var(--green); background:var(--green-bg)}
.option.correct .opt-letter{color:var(--green)}
.option.incorrect{border-color:var(--red); background:var(--red-bg)}
.option.incorrect .opt-letter{color:var(--red)}
.option.missed{border-color:var(--green); background:var(--green-bg); animation:missed 1.8s ease-in-out infinite}
@keyframes missed{0%,100%{box-shadow:0 0 0 0 rgba(46,194,126,0)}50%{box-shadow:0 0 14px 3px var(--green)}}
.opt-indicator{width:20px; height:20px; border:2px solid var(--muted); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:.15s}
.opt-indicator.radio{border-radius:50%}
.opt-indicator.checkbox{border-radius:4px}
.option.selected .opt-indicator{border-color:var(--select); background:var(--select)}
.option.selected .opt-indicator.radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff}
.option.selected .opt-indicator.checkbox::after{content:'✓';color:#fff;font-size:13px;font-weight:700;line-height:1}
.option.correct .opt-indicator{border-color:var(--green); background:var(--green)}
.option.incorrect .opt-indicator{border-color:var(--red); background:var(--red)}
.option.correct .opt-indicator::after{content:'✓';color:#fff;font-size:13px;font-weight:700}
.option.incorrect .opt-indicator::after{content:'✕';color:#fff;font-size:13px;font-weight:700}
.opt-letter{font-weight:700; color:var(--muted); min-width:22px}
.opt-text{flex:1; font-size:14px}
.feedback-banner{padding:12px 16px; border-radius:8px; margin-bottom:16px; font-weight:600}
.feedback-banner.correct{background:var(--green-bg); color:var(--green); border:1px solid var(--green)}
.feedback-banner.incorrect{background:var(--red-bg); color:var(--red); border:1px solid var(--red)}
.nav-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.nav-row .spacer{flex:1}

/* Drag & drop */
.dd-instruction{color:var(--muted); font-size:13px; margin-bottom:12px}
.dd-list{list-style:none; padding:0; margin:0}
.dd-item{padding:14px 16px; background:var(--bg); border:2px solid var(--border); border-radius:8px;
  margin-bottom:8px; display:flex; align-items:center; gap:12px; cursor:grab; touch-action:none; user-select:none}
.dd-item.dragging{opacity:.4}
.dd-item.drag-over{border-color:var(--select); background:var(--select-bg)}
.dd-item.correct{border-color:var(--green); background:var(--green-bg)}
.dd-item.incorrect{border-color:var(--red); background:var(--red-bg)}
.dd-pos{background:var(--panel-2); width:28px; height:28px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0}
.dd-item.correct .dd-pos{background:var(--green); color:#fff}
.dd-item.incorrect .dd-pos{background:var(--red); color:#fff}
.dd-text{flex:1; font-size:14px}
.dd-controls{display:flex; flex-direction:column; gap:4px}
.dd-arrow{background:var(--panel-2); color:var(--text); border:1px solid var(--border); width:34px;
  height:26px; border-radius:4px; cursor:pointer; font-size:11px}
.dd-arrow:disabled{opacity:.3; cursor:not-allowed}

/* Explanation + option analysis */
.explanation{background:var(--explanation-bg); border-left:4px solid var(--accent);
  padding:14px 18px; border-radius:6px; margin-bottom:8px; font-size:14px; line-height:1.6}
.explanation .exp-title{font-weight:700; color:var(--accent-2); margin-bottom:8px;
  text-transform:uppercase; font-size:12px; letter-spacing:1px}
.explanation p{margin:0 0 10px} .explanation p:last-child{margin-bottom:0}
.explanation strong{color:var(--text); font-weight:700}
.explanation blockquote{margin:8px 0; padding:8px 14px; border-left:3px solid var(--select);
  background:var(--quote-bg); color:var(--muted); font-style:italic; border-radius:4px; line-height:1.45}
.explanation ul{margin:4px 0 10px; padding-left:20px}
.explanation code{background:var(--bg); padding:1px 5px; border-radius:3px; font-size:13px}
.explanation-img{max-width:100%; border-radius:8px; border:1px solid var(--border); background:#fff;
  margin:10px 0; cursor:zoom-in; display:block}
.oa-section{margin-top:16px; padding-top:14px; border-top:1px dashed var(--border)}
.oa-title{font-weight:700; color:var(--accent-2); margin-bottom:12px; text-transform:uppercase;
  font-size:12px; letter-spacing:1px}
.oa-item{background:var(--bg); border-left:4px solid var(--border); padding:10px 14px; margin-bottom:10px; border-radius:4px}
.oa-item.correct{border-left-color:var(--green)} .oa-item.incorrect{border-left-color:var(--red)}
.oa-head{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px; font-weight:700}
.oa-letter{background:var(--panel-2); width:22px; height:22px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px}
.oa-item.correct .oa-letter{background:var(--green); color:#fff}
.oa-item.incorrect .oa-letter{background:var(--red); color:#fff}
.oa-verdict{font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; text-transform:uppercase}
.oa-verdict.correct{background:var(--green-bg); color:var(--green)}
.oa-verdict.incorrect{background:var(--red-bg); color:var(--red)}
.oa-reason{font-size:13px; line-height:1.5; margin-bottom:8px}
.oa-quote{font-size:12px; background:var(--quote-bg); border-left:2px solid var(--select);
  padding:6px 10px; color:var(--muted); font-style:italic; margin:4px 0; border-radius:3px; line-height:1.45}
.oa-source{font-size:11px; color:var(--muted); margin-top:4px; font-weight:500}

/* Navigator */
.navigator h3{margin:0 0 12px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:1px}
.nav-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:6px}
@media(max-width:700px){.nav-grid{grid-template-columns:repeat(8,1fr)}}
@media(max-width:400px){.nav-grid{grid-template-columns:repeat(6,1fr)}}
.nav-btn{aspect-ratio:1; border:1px solid var(--border); background:var(--bg); color:var(--text);
  border-radius:4px; cursor:pointer; font-size:12px; font-weight:600}
.nav-btn.current{background:var(--accent); border-color:var(--accent); color:#fff}
.nav-btn.answered{background:var(--panel-2); border-color:var(--muted)}
.nav-btn.marked{background:rgba(245,166,35,.2); border-color:var(--yellow)}
.nav-btn.correct{background:var(--green-bg); border-color:var(--green)}
.nav-btn.incorrect{background:var(--red-bg); border-color:var(--red)}

/* Resultados */
.results-card{text-align:center}
.score-circle{width:150px; height:150px; border-radius:50%; margin:0 auto 18px; display:flex;
  flex-direction:column; align-items:center; justify-content:center; border:8px solid var(--accent)}
.score-circle.pass{border-color:var(--green)} .score-circle.pass .pct{color:var(--green)}
.score-circle.fail{border-color:var(--red)} .score-circle.fail .pct{color:var(--red)}
.score-circle .pct{font-size:40px; font-weight:700}
.score-circle .lbl{font-size:13px; color:var(--muted)}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0}
@media(max-width:520px){.stats-row{grid-template-columns:1fr}}
.stat-box{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px}
.stat-box .num{font-size:24px; font-weight:700}
.stat-box .lbl{font-size:12px; color:var(--muted); margin-top:4px}
.xp-gain{display:inline-block; background:var(--green-bg); color:var(--green); border-radius:20px;
  padding:6px 16px; font-weight:700; margin:8px 0}

/* Dashboard */
.dash-grid{display:grid; gap:14px; grid-template-columns:1fr}
@media(min-width:640px){.dash-grid{grid-template-columns:1fr 1fr}}
.kpi{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center}
.kpi .k-num{font-size:28px; font-weight:700}
.kpi .k-lbl{font-size:12px; color:var(--muted); margin-top:4px}
.badge-grid{display:flex; gap:10px; flex-wrap:wrap}
.badge{background:var(--panel-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  font-size:13px; display:flex; align-items:center; gap:8px}
.badge.locked{opacity:.4}
.badge .b-ico{font-size:18px}
.cat-bar{margin-bottom:10px}
.cat-bar .cb-top{display:flex; justify-content:space-between; font-size:13px; margin-bottom:4px}
.cat-bar .cb-track{height:9px; background:var(--panel-2); border-radius:6px; overflow:hidden}
.cat-bar .cb-fill{height:100%; border-radius:6px}
.attempt-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0;
  border-bottom:1px solid var(--border); font-size:14px}
.attempt-row:last-child{border-bottom:none}
.attempt-row .ar-pct{font-weight:700}

/* Menú lateral */
.sheet-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:40}
.sheet{position:fixed; top:0; right:0; height:100%; width:min(280px,80vw); background:var(--panel);
  border-left:1px solid var(--border); z-index:41; padding:20px 14px; box-shadow:var(--shadow)}
.sheet-head{padding:8px 6px 16px; border-bottom:1px solid var(--border); margin-bottom:10px;
  display:flex; flex-direction:column; gap:2px}
.sheet-item{display:block; width:100%; text-align:left; background:transparent; border:none;
  color:var(--text); padding:13px 10px; border-radius:8px; cursor:pointer; font-size:15px; font-family:inherit}
.sheet-item:hover{background:var(--panel-2)}

/* Modal imagen */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.95); display:flex; align-items:center;
  justify-content:center; z-index:100; padding:10px; overflow:auto; cursor:zoom-out}
.modal img{max-width:100%; max-height:100%; touch-action:pinch-zoom}
.modal-close{position:fixed; top:12px; right:12px; background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.3); width:44px; height:44px; border-radius:50%; font-size:20px;
  cursor:pointer; z-index:101}

/* Toast */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--panel);
  color:var(--text); border:1px solid var(--border); border-radius:10px; padding:12px 20px;
  box-shadow:var(--shadow); z-index:120; font-size:14px; max-width:90vw}
.toast.error{border-color:var(--red)} .toast.ok{border-color:var(--green)}

/* Mobile tweaks */
@media(max-width:700px){
  #app{padding:14px 12px 90px}
  .card{padding:18px 16px}
  .nav-row{flex-direction:column} .nav-row .btn{width:100%} .nav-row .spacer{display:none}
  .welcome-row{flex-direction:column} .stat-chips{justify-content:flex-start}
  .mode-grid{grid-template-columns:1fr}
}
/* -------- Score report (estilo EXAMINATION SUMMARY REPORT de Fortinet) -------- */
.score-report{
  margin:24px 0 8px; padding:20px; text-align:left;
  background:var(--panel-2); border:1px solid var(--border); border-radius:12px;
}
.sr-head{text-align:center; padding-bottom:14px; border-bottom:2px solid var(--accent); margin-bottom:14px}
.sr-prog{font-size:12px; letter-spacing:.6px; color:var(--muted); text-transform:uppercase}
.sr-title{font-size:16px; font-weight:700; letter-spacing:.5px; margin:4px 0}
.sr-exam{font-size:14px; color:var(--muted)}
.sr-meta{display:flex; flex-direction:column; gap:4px; margin-bottom:16px}
.sr-row{display:flex; gap:10px; font-size:13px}
.sr-k{min-width:135px; text-align:right; color:var(--muted); font-weight:600}
.sr-v{font-weight:600}
.sr-v.sr-pass{color:var(--green)}
.sr-v.sr-fail{color:var(--red)}
.sr-sub{font-size:14px; font-weight:700; text-align:center; margin-bottom:8px}
.sr-note{font-size:11.5px; color:var(--muted); margin:0 0 16px; line-height:1.5}
.sr-chart{display:grid; grid-template-columns:minmax(120px,1.1fr) 2fr; gap:10px 12px; align-items:center}
.sr-lbl{font-size:12.5px; line-height:1.3}
.sr-track{
  position:relative; height:26px; background:transparent;
  border:1px solid var(--muted); border-radius:2px; overflow:hidden;
}
.sr-fill{position:absolute; inset:0 auto 0 0; background:var(--text); border-radius:0}
.sr-val{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  font-size:11px; font-style:normal; color:var(--muted); font-variant-numeric:tabular-nums;
}
.sr-tip{
  margin:16px 0 0; padding:10px 12px; font-size:12.5px; line-height:1.5;
  background:var(--quote-bg); border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
}
@media(max-width:560px){
  .sr-chart{grid-template-columns:1fr; gap:4px 0}
  .sr-lbl{margin-top:8px; font-weight:600}
  .sr-k{min-width:110px}
}

/* -------- Modal de vigilancia del simulacro -------- */
.sim-modal{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(0,0,0,.72); backdrop-filter:blur(3px);
}
.sim-modal-box{
  max-width:420px; width:100%; padding:26px 22px; text-align:center;
  background:var(--panel); border:1px solid var(--border); border-top:4px solid var(--accent);
  border-radius:14px; box-shadow:var(--shadow);
}
.sim-modal-icon{font-size:42px; line-height:1; margin-bottom:10px}
.sim-modal-box h3{margin:0 0 10px; font-size:19px}
.sim-modal-box p{margin:0 0 20px; font-size:14px; line-height:1.6; color:var(--muted)}

/* -------- Config: opciones bloqueadas en modo simulacro -------- */
.check.locked{opacity:.5; cursor:not-allowed}
.check.locked input{cursor:not-allowed}
.sim-lock{
  margin:8px 0 4px; padding:10px 12px; font-size:12.5px; line-height:1.5; color:var(--muted);
  background:var(--quote-bg); border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
}
#btn-export-report{margin-top:16px}

@media(hover:none){.option:hover{border-color:var(--border)} .btn:hover{background:var(--accent)}}
[hidden]{display:none !important}