/* Extras de Modo Hacker (van en archivo aparte para iterar rápido):
   confeti de recompensa, subida de nivel y podio de la liga. */

/* ---------- confeti ---------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;opacity:.96;animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(106vh) rotate(680deg)}}

/* ---------- subida de nivel en la hoja de recompensa ---------- */
.levelup{display:flex;align-items:center;justify-content:center;gap:8px;margin:2px auto 12px;
  font-family:var(--mono);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.84rem;
  color:var(--greenink);background:linear-gradient(90deg,var(--green),var(--cyan));
  border-radius:30px;padding:8px 16px;width:max-content;box-shadow:0 0 24px -6px var(--greenglow);
  animation:lvlpop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes lvlpop{from{transform:scale(.6);opacity:0}}

/* ---------- liga: podio + filas ---------- */
.liga-head{display:flex;align-items:center;gap:12px;margin:2px 2px 4px}
.liga-head .ic-box{width:46px;height:46px}
.liga-head .ic-box .ic{width:24px;height:24px}
.liga-head h1{font-size:1.5rem}

.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:10px;margin:16px 0 6px}
.pod{background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:14px 10px;text-align:center;position:relative}
.pod .pav{width:52px;height:52px;border-radius:15px;margin:0 auto 8px;box-shadow:inset 0 0 0 2px var(--line2)}
.pod .pn{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod .px{font-family:var(--mono);font-size:.78rem;color:var(--green);margin-top:3px}
.pod .medal{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-weight:800;font-size:.9rem;border:2px solid var(--bg)}
.pod.p1{transform:translateY(-10px);border-color:rgba(255,207,74,.5);box-shadow:0 14px 40px -20px var(--gold)}
.pod.p1 .pav{box-shadow:inset 0 0 0 2px var(--gold),0 0 20px -6px var(--gold)}
.pod.p1 .medal{background:var(--gold);color:#3a2a00}
.pod.p2 .medal{background:#cdd9e6;color:#2a3340}
.pod.p3 .medal{background:var(--amber);color:#3a2600}
.pod.me{outline:2px solid var(--green);outline-offset:2px}

.ligalist{margin-top:10px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.ligarow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
.ligarow:first-child{border-top:0}
.ligarow.me{background:rgba(159,239,0,.06)}
.ligarow .pos{font-family:var(--mono);width:28px;color:var(--muted);font-weight:700;text-align:center}
.ligarow .pav{width:36px;height:36px;border-radius:12px;flex:none}
.ligarow .who{flex:1;min-width:0}
.ligarow .who b{font-size:.95rem}
.ligarow .who .lv{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.ligarow .who .me-tag{color:var(--green);font-family:var(--mono);font-size:.68rem;margin-left:6px}
.ligarow .xp{font-family:var(--mono);color:var(--green);font-weight:700;flex:none}

@media(min-width:900px){
  .podium{max-width:560px}
  .ligalist{max-width:720px}
}

/* ================= práctica guiada: microobjetivos + pistas graduales ================= */
.msteps{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.mstep{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.4;color:var(--dim)}
.mstep .mdot{flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;border:2px solid var(--line2);background:transparent;transition:.2s}
.mstep.ok .mdot{background:var(--green);border-color:var(--green);box-shadow:0 0 10px -2px var(--greenglow)}
.mstep .mlbl{flex:1}
.mstep.ok .mlbl{color:var(--ink)}
.mstep .mdone{flex:none;font-family:var(--mono);font-size:.74rem;color:var(--green)}

.ghint{margin:2px 0 4px}
.ghint-toggle{background:none;border:0;color:var(--cyan);font-family:var(--mono);font-size:.78rem;cursor:pointer;padding:0}
.ghint-toggle:disabled{color:var(--muted);cursor:default}
.ghint-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.ghint-item{font-size:.84rem;color:var(--dim);background:#0b1322;border:1px solid var(--line2);border-radius:9px;padding:9px 12px;line-height:1.5}
.ghint-item b{color:var(--green)}

/* ================= miniapps web (IDOR / SQLi) ================= */
.weblab{margin-top:12px}
.wl-panel{background:#070d18;border:1px solid var(--line2);border-radius:12px;padding:14px}
.wl-reqline{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--mono);font-size:.86rem}
.wl-method{color:var(--greenink);background:var(--green);font-weight:800;border-radius:6px;padding:2px 8px;font-size:.76rem}
.wl-path{color:var(--dim)}
.wl-id,.wl-q{background:#0b1322;border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);
  font-size:16px;border-radius:8px;padding:9px 11px}
.wl-id{width:92px}
.wl-q{flex:1;min-width:140px}
.wl-id:focus,.wl-q:focus{outline:none;border-color:var(--green)}
.wl-send{width:auto;padding:9px 18px;flex:none}
.wl-toggle{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.86rem;color:var(--dim);cursor:pointer}
.wl-toggle input{width:17px;height:17px;accent-color:var(--green)}
.wl-query{margin-top:12px;font-family:var(--mono);font-size:.8rem;color:var(--muted);word-break:break-word}
.wl-query code{color:var(--cyan)}
.wl-param{color:var(--green)}
.wl-resp{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.wl-hint{color:var(--muted);font-size:.86rem}
.wl-status{display:inline-block;font-family:var(--mono);font-weight:800;font-size:.8rem;border-radius:6px;padding:3px 10px}
.wl-status.ok{color:var(--greenink);background:var(--green)}
.wl-status.bad{color:#fff;background:var(--red)}
.wl-status.warn{color:#3a2600;background:var(--amber)}
.wl-body{margin-top:10px;font-size:.9rem;color:var(--dim)}
.wl-acc{background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:12px}
.wl-acc-h{font-weight:700;color:var(--ink);margin-bottom:8px}
.wl-acc-row{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:3px 0}
.wl-acc-row span{color:var(--muted)}
.wl-acc-row b{font-family:var(--mono)}
.wl-movs{margin:8px 0 0;padding-left:18px;font-family:var(--mono);font-size:.82rem;color:var(--dim)}
.wl-movs li{margin:2px 0}
.wl-err{color:var(--red);font-family:var(--mono);font-size:.84rem}
.wl-leak{color:var(--red);font-weight:700;margin-bottom:8px}
.wl-tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.wl-tbl th,.wl-tbl td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.wl-tbl th{color:var(--muted);font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.wl-tbl td.mono{font-family:var(--mono);color:var(--dim);word-break:break-all}
.wl-comment{background:var(--panel);border:1px solid var(--line2);border-radius:9px;padding:10px 12px;font-size:.9rem;color:var(--ink);word-break:break-word;white-space:pre-wrap}
.wl-note{margin-top:8px;font-size:.82rem;color:var(--muted);line-height:1.5}
.wl-note.wl-err{color:var(--red)}
.wl-file{margin-top:8px;background:#050a14;border:1px solid var(--line2);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:.8rem;color:var(--dim);white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.wl-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.wl-chip{font-family:var(--mono);font-size:.76rem;color:var(--dim);background:#0b1322;border:1px solid var(--line2);border-radius:20px;padding:6px 12px;cursor:pointer}
.wl-chip:hover{border-color:var(--green);color:var(--ink)}
.wl-chip:active{transform:scale(.96)}

/* hardening (bt-5) */
.hd-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.hd-row:first-child{border-top:0}
.hd-info{flex:1;min-width:0}
.hd-label{font-size:.9rem;color:var(--ink);font-weight:600}
.hd-val{margin-top:5px;font-family:var(--mono);font-size:.8rem;word-break:break-word}
.hd-val code{color:var(--red)}
.hd-val code.ok{color:var(--green)}
.hd-btn{width:auto;padding:9px 16px;flex:none}
.hd-row.done .hd-label{color:var(--green)}

/* detección (bt-6) */
.wl-rule{font-size:.95rem;color:var(--dim);line-height:2}
.wl-num{width:70px;background:#0b1322;border:1px solid var(--line2);color:var(--ink);font-family:var(--mono);
  font-size:16px;border-radius:8px;padding:6px 8px;text-align:center}
.wl-num:focus{outline:none;border-color:var(--green)}
.dt-line{font-family:var(--mono);font-size:.84rem;margin:4px 0}
.dt-line.ok{color:var(--green)}
.dt-line.bad{color:var(--red)}

/* playbook de respuesta (bt-7, bt-9) */
.pb-phase{font-family:var(--mono);font-size:.78rem;font-weight:800;letter-spacing:.03em;color:var(--green);text-transform:uppercase}
.pb-prompt{margin-top:7px;font-size:.98rem;color:var(--ink);line-height:1.5}

/* timeline forense (bt-8) */
.tl-ordered{list-style:none;margin:0 0 12px;padding:0;counter-reset:tl}
.tl-ordered:empty{display:none}
.tl-ordered li{counter-increment:tl;display:flex;gap:10px;align-items:baseline;padding:9px 11px;margin-bottom:7px;
  background:rgba(159,239,0,.07);border:1px solid var(--green);border-radius:9px;font-size:.9rem;color:var(--ink)}
.tl-ordered li::before{content:counter(tl);font-family:var(--mono);font-weight:800;color:var(--green);flex:none}
.tl-pool{display:flex;flex-direction:column;gap:9px}
.tl-ev{text-align:left;padding:13px;border-radius:10px;border:1px solid var(--line2);background:#0b1322;color:var(--ink);
  font-size:.9rem;line-height:1.4;cursor:pointer}
.tl-ev:hover{border-color:var(--green)}
.tl-ev:active{transform:scale(.985)}
.tl-ev.done{display:none}
.tl-t{font-family:var(--mono);font-weight:800;color:var(--green);font-size:.84rem}

/* cifrado por bloques (cr-1) */
.cph-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.cph-lab{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;width:62px;flex:none}
.cph-b{font-family:var(--mono);font-size:.84rem;border-radius:7px;padding:7px 10px;border:1px solid var(--line2)}
.cph-b.plain{background:#0b1322;color:var(--ink)}
.cph-b.cip{background:#070d18;color:var(--dim)}
.cph-b.c0{border-color:var(--green);color:var(--green)}
.cph-b.c1{border-color:var(--cyan);color:var(--cyan)}
.cph-b.c2{border-color:var(--amber);color:var(--amber)}
.cph-b.c3{border-color:var(--red);color:var(--red)}
.cph-b.c4{border-color:#b980ff;color:#b980ff}

/* hashing (cr-2) */
.hl-box{background:#070d18;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.hl-line{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:3px 0}
.hl-line span{color:var(--muted)}
.hl-line b.mono{font-family:var(--mono);word-break:break-all}

/* TLS / certificado (cr-3) */
.tls-card{margin-top:12px;background:#070d18;border:1px solid var(--line2);border-radius:10px;padding:12px}
.tls-card:empty{display:none}
.tls-field{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;padding:5px 0;border-top:1px solid var(--line)}
.tls-field:first-child{border-top:0}
.tls-field span{color:var(--muted)}
.tls-field b{text-align:right;word-break:break-word}

/* OSINT · huella digital (os-1) */
.fp-view{margin-top:12px}
.fp-view:empty{display:none}
.fp-h{font-family:var(--mono);font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.fp-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:9px 11px;margin-bottom:6px;border:1px solid var(--line2);border-radius:9px;background:#0b1322;cursor:pointer;font-size:.86rem}
.fp-row:hover{border-color:var(--green)}
.fp-row.hit{border-color:var(--green);background:rgba(159,239,0,.08)}
.fp-k{color:var(--muted);font-family:var(--mono);font-size:.78rem;flex:none}
.fp-v{color:var(--ink);text-align:right;word-break:break-word}
.wl-chip.on{border-color:var(--green);color:var(--green)}

/* OSINT · correlación de identidades (os-2) */
.co-target{background:#070d18;border:1px solid var(--green);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.co-h{font-family:var(--mono);font-size:.72rem;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:5px}
.co-sig{font-size:.88rem;color:var(--dim);line-height:1.5}
.co-sig b{color:var(--ink)}
.co-sig span{font-size:1.1rem;margin-right:4px}
.co-card{background:#0b1322;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.co-card.co-ok{border-color:var(--green)}
.co-card.co-bad{border-color:var(--red)}
.co-plat{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin-bottom:5px}
.co-btns{display:flex;gap:8px;margin-top:9px}
.co-b{flex:1;padding:9px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--dim);font-size:.84rem;cursor:pointer}
.co-b:hover{border-color:var(--green)}
.co-b.on{border-color:var(--green);color:var(--green);background:rgba(159,239,0,.08)}

/* OSINT · informe evidencia/hipótesis (os-3) */
.or-row{background:#0b1322;border:1px solid var(--line2);border-radius:10px;padding:11px 12px;margin-bottom:8px;transition:border-color .2s}
.or-row.or-ok{border-color:var(--green)}
.or-row.or-wrong{border-color:var(--red)}
.or-txt{font-size:.9rem;color:var(--ink);line-height:1.45}
.or-btns{display:flex;gap:8px;margin-top:9px}
.or-b{flex:1;padding:9px;border-radius:8px;border:1px solid var(--line2);background:transparent;color:var(--dim);font-size:.84rem;cursor:pointer}
.or-b:hover{border-color:var(--green)}
.or-b.on{border-color:var(--green);color:var(--green);background:rgba(159,239,0,.08)}
.or-b:disabled{cursor:default;opacity:.7}

/* AD · cuentas/grupos/ACL (ad-1) */
.ad-h{font-size:.92rem;color:var(--ink);padding:4px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
.ad-h b{color:var(--green);font-family:var(--mono)}
.ad-list{display:flex;flex-direction:column;gap:6px}
.ad-row{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--line2);border-radius:9px;background:#0b1322;cursor:pointer;font-size:.88rem}
.ad-row:hover{border-color:var(--green)}
.ad-row.sel{border-color:var(--green);background:rgba(159,239,0,.08)}
.ad-ic{color:var(--muted);font-family:var(--mono)}
.ad-nm{color:var(--ink)}
.ad-nested{display:none;flex-direction:column;gap:4px;margin:2px 0 2px 26px}
.ad-nested.open{display:flex}
.ad-sub{font-family:var(--mono);font-size:.8rem;color:var(--dim)}

/* AD · Kerberos (ad-2) */
.kb-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kb-node{font-family:var(--mono);font-size:.78rem;color:var(--dim);border:1px solid var(--line2);border-radius:7px;padding:6px 9px}
.kb-node.on{border-color:var(--green);color:var(--green);background:rgba(159,239,0,.08)}
.kb-ar{color:var(--muted)}
.kerberoslab .wl-send{display:block;width:100%}

/* AD · triaje de identidad (ad-3): reutiliza .or-row/.or-b de OSINT */

/* Ingeniería social · bandeja de phishing (se-1) */
.pm-card{background:#0b1322;border:1px solid var(--line2);border-radius:10px;padding:11px 12px;margin-bottom:8px}
.pm-card.pm-ok{border-color:var(--green)}
.pm-card.pm-wrong{border-color:var(--red)}
.pm-from{font-size:.9rem;color:var(--ink)}
.pm-from b{color:var(--ink)}
.pm-subj{font-size:.9rem;color:var(--ink);font-weight:600;margin-top:3px}
.pm-prev{font-size:.84rem;color:var(--dim);margin-top:3px;line-height:1.4}
.pm-link{font-family:var(--mono);font-size:.78rem;color:var(--cyan);margin-top:6px;word-break:break-all}
.pm-det{background:none;border:0;color:var(--cyan);font-family:var(--mono);font-size:.76rem;cursor:pointer;padding:6px 0 0}
.pm-detbox{display:none;margin-top:8px;background:#050a14;border:1px solid var(--line2);border-radius:8px;padding:9px 11px}
.pm-detbox.open{display:block}
.pm-detbox>div{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;padding:3px 0}
.pm-detbox span{color:var(--muted);font-family:var(--mono);font-size:.74rem;flex:none}
.pm-detbox b{font-family:var(--mono);color:var(--ink);text-align:right;word-break:break-all}
/* sechecklist (se-3) reutiliza .or-row/.or-b/.or-txt de OSINT */

/* Cloud · política IAM (cl-1): reutiliza .fp-* de footprint, + marca roja */
.fp-row.bad-hit{border-color:var(--red);background:rgba(255,70,70,.08)}

/* Malware · análisis estático (mr-1): apila filas (las APIs son largas) */
.staticlablab .fp-row{flex-direction:column;align-items:flex-start;gap:4px}
.staticlablab .fp-k{flex:none;white-space:normal}
.staticlablab .fp-v{text-align:left;word-break:break-word}