/* Analizador Blackbox de Betaflight (/analizador-blackbox). Todo bajo #bx para no chocar con site.css.
   Composición: columna izquierda = diagnóstico y CLI; derecha = instrumentos (espectro, mapa throttle-frecuencia, escalón). */
#bx{
  --bg:#F3F1EC; --surface:#fff; --ink:#15181B; --muted:#4A5157; --line:#DAD6CD; --grid:#ECE9E3;
  --accent:#F06A2A; --roll:#1F6FD1; --pitch:#E0601F; --yaw:#2B8A5E; --raw:#A9A49A; --sel:rgba(240,106,42,.12);
  --alta:#B4232A; --alta-bg:#F8E4E3; --media:#8A5A00; --media-bg:#F6EBD3; --info:#285E8E; --info-bg:#E4EDF5; --baja:#B4232A;
  --code-bg:#0D1013; --code-ink:#ECE8E1;
  font-size:15px;line-height:1.5;color:var(--ink)
}
#bx-status{max-width:1000px;margin:16px 0 0;padding:12px 16px;border-radius:6px;background:var(--info-bg);color:var(--info);font-weight:500}
#bx-status[data-kind=error]{background:var(--alta-bg);color:var(--alta)}
#bx-results{display:grid;gap:20px;margin-top:28px;scroll-margin-top:16px}
#bx h2.bx-h{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:24px;line-height:1.1;margin:0}
#bx h3{font-size:17px;line-height:1.3;margin:0}
#bx p{margin:0}
.bx-muted{color:var(--muted)}
.bx-box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;display:grid;gap:14px;min-width:0}
.bx-box>header{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.bx-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
#bx-src{font:600 14px var(--mono);overflow-wrap:anywhere}
#bx-src[data-demo="1"]{color:var(--media)}
#bx-logpick{font:15px var(--sans);padding:8px;border:1px solid #BDB8AD;border-radius:4px;background:#fff;color:var(--ink)}
#bx-meta,#bx-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 20px;margin:0}
#bx-meta dt,#bx-config dt{font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
#bx-meta dd,#bx-config dd{margin:0;font:14px var(--mono);overflow-wrap:anywhere}
.bx-ovw{display:grid;gap:6px}
.bx-hint{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
#bx-overview{width:100%;height:64px;display:block;touch-action:none;cursor:crosshair}
.bx-link{background:none;border:0;padding:0;color:#B3460F;font:600 13px var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bx-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:960px){.bx-grid{grid-template-columns:minmax(0,1fr)}}
.bx-col{display:grid;gap:20px;min-width:0}
.bx-chips{display:flex;flex-wrap:wrap;gap:6px}
.bx-chip{font:600 12px var(--sans);padding:3px 9px;border-radius:999px}
.bx-chip.alta{background:var(--alta-bg);color:var(--alta)}.bx-chip.media{background:var(--media-bg);color:var(--media)}.bx-chip.info{background:var(--info-bg);color:var(--info)}
#bx-reco{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bx-rec{border:1px solid var(--line);border-left-width:4px;border-radius:6px;padding:12px 12px 12px 14px;display:grid;gap:6px;background:var(--surface)}
.bx-rec.alta{border-left-color:var(--alta)}.bx-rec.media{border-left-color:var(--media)}.bx-rec.info{border-left-color:var(--info)}
.bx-rechead{display:grid;gap:2px}
.bx-sev{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.bx-rec.alta .bx-sev{color:var(--alta)}.bx-rec.media .bx-sev{color:var(--media)}.bx-rec.info .bx-sev{color:var(--info)}
.bx-rec p{color:var(--muted);font-size:14.5px}
#bx pre{margin:0;font:13px/1.6 var(--mono);white-space:pre;overflow-x:auto}
#bx pre.bx-mini{background:var(--grid);padding:8px 10px;border-radius:4px;font-size:12.5px}
#bx pre.bx-cli{background:var(--code-bg);color:var(--code-ink);padding:14px;border-radius:6px}
.bx-warn{font-size:13.5px;color:var(--muted)}
#bx table{border-collapse:collapse;width:100%;font-size:13.5px}
#bx th,#bx td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
#bx td{font-family:var(--mono);font-variant-numeric:tabular-nums}
#bx thead th{font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bx-chg b{color:#B3460F}
.bx-tw{overflow-x:auto}
.bx-sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.bx-conf{font:600 11px var(--sans);padding:2px 8px;border-radius:999px}
.bx-conf.alta{background:var(--info-bg);color:var(--info)}.bx-conf.media{background:var(--media-bg);color:var(--media)}.bx-conf.baja{background:var(--alta-bg);color:var(--alta)}
.bx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.bx-stat{display:grid;gap:2px;padding:10px 12px;border-radius:6px;background:var(--grid)}
.bx-k{font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bx-v{font:600 26px/1.1 var(--display);font-variant-numeric:tabular-nums}
.bx-v small{font:400 12px var(--sans);color:var(--muted)}
.bx-seg{display:inline-flex;border:1px solid #BDB8AD;border-radius:4px;overflow:hidden}
.bx-seg button{border:0;border-radius:0;background:#fff;color:var(--ink);padding:7px 13px;font:600 13px var(--sans);cursor:pointer}
.bx-seg button+button{border-left:1px solid #BDB8AD}
.bx-seg button[aria-pressed=true]{background:var(--ink);color:#fff}
#bx button:focus-visible,#bx select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#bx canvas.bx-chart{width:100%;display:block}
#bx-spec{height:280px}#bx-heat{height:300px}#bx-step{height:260px}
.bx-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}
.bx-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
#bx-peaks{list-style:none;margin:0;padding:0;display:grid;font-size:14px}
#bx-peaks li{display:grid;grid-template-columns:80px minmax(0,1fr) 60px 120px;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
#bx-peaks li b{font-family:var(--mono)}
#bx-peaks li.bx-none{display:block;color:var(--muted)}
@media (max-width:560px){#bx-peaks li{grid-template-columns:72px minmax(0,1fr)}#bx-spec,#bx-heat{height:230px}.bx-box{padding:14px}}
#bx details>summary{cursor:pointer;font:600 20px var(--display);text-transform:uppercase;letter-spacing:.02em}
#bx details[open]>summary{margin-bottom:12px}