/* Laboratorio BYOD */
[hidden]{display:none!important}
.by-stack{display:grid;gap:20px}
.by-h{font-size:clamp(26px,3.4vw,38px);font-stretch:116%;font-weight:300;line-height:1.05}
.by-status{color:var(--muted)}
.by-status b{color:var(--ink);font-weight:500}
.badge.crit{color:var(--crit);border-color:color-mix(in oklab,var(--crit) 45%,transparent)}
.by-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.by-steps button{font:500 12px/1 var(--mono);letter-spacing:.06em;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:border-color .25s var(--ease),color .25s}
.by-steps button:hover:not([disabled]){border-color:var(--def);color:var(--ink)}
.by-steps button[aria-current="step"]{border-color:var(--def);color:var(--def);background:var(--def-soft)}
.by-steps button[disabled]{opacity:.45;cursor:not-allowed}
.by-fase{display:grid;gap:16px}
.by-nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.by-why{font-size:13.5px;color:var(--faint);border-left:2px solid var(--def);padding-left:10px}
.by-tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.by-tips b{font-size:14px}
.by-tips p{font-size:13.5px}
.by-escenarios{display:grid;gap:10px}
.by-esc{padding:16px;gap:6px}
.by-esc h4{font-size:16px}
.by-esc p{font-size:14px}
.by-esc .badge{justify-self:start}
.by-esc[aria-pressed="true"]{border-color:var(--def);box-shadow:0 0 0 1px var(--def) inset}
.by-calc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:16px}
#by-nivel[data-nivel="ok"]{color:var(--ok)} #by-nivel[data-nivel="warn"]{color:var(--warn)}
#by-nivel[data-nivel="off"]{color:var(--off)} #by-nivel[data-nivel="crit"]{color:var(--crit)}
.by-heat{display:grid;grid-template-columns:repeat(4,28px);gap:3px}
.by-heat span{height:28px;border-radius:5px;display:grid;place-items:center;font:500 11px/1 var(--mono);color:var(--ink);border:1px solid transparent;transition:transform .25s var(--ease)}
.by-heat .ok{background:color-mix(in oklab,var(--ok) 22%,transparent)}
.by-heat .warn{background:color-mix(in oklab,var(--warn) 24%,transparent)}
.by-heat .off{background:color-mix(in oklab,var(--off) 28%,transparent)}
.by-heat .crit{background:color-mix(in oklab,var(--crit) 34%,transparent)}
.by-heat .on{border-color:var(--ink);transform:scale(1.12)}
.by-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px}
.by-ctrl{display:grid;gap:4px;text-align:left;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:border-color .25s var(--ease),background .25s}
.by-ctrl:hover{border-color:var(--def)}
.by-ctrl[aria-pressed="true"]{border-color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent)}
.by-ctrl[aria-pressed="true"] .by-ctrl-n::before{content:"✓ ";color:var(--ok)}
.by-ctrl-n{font-size:14px;font-weight:600;line-height:1.3}
.by-ctrl .mono{color:var(--faint)}
.by-ctrl .badge{justify-self:start}
.by-maps{display:grid;gap:6px}
.by-map{display:block;text-align:left;font:inherit;font-size:14px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-decoration:none;cursor:pointer}
.by-map b{color:var(--ink);font-weight:600}
.by-map:hover{border-color:var(--def)}
.by-norma{display:grid;gap:4px;border-top:1px solid var(--line);padding-top:12px}
.by-norma p{font-size:14.5px}
.by-rep-head{display:grid;gap:8px;border-bottom:1px solid var(--line);padding-bottom:14px}
.by-rep-sec{display:grid;gap:10px}
.by-rep-sec h3{font-size:18px}
.by-just{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;border-left:2px solid var(--def);padding-left:12px}
.by-aside{gap:14px}
.by-aside p{font-size:14px}
.by-pie{font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:10px}
@media (max-width:620px){.by-tips{grid-template-columns:1fr}.by-calc{grid-template-columns:1fr}}
@media print{
  .split{display:block}
  .by-aside{margin-top:16px}
  .sec.tight{padding:0}
  .by-heat span{border-color:#000}
}

main .badge{font-size:12px}