:root{color-scheme:dark;--bg:#0b1220;--panel:#142032;--line:#2a3b50;--muted:#a4b4c8;--accent:#79e4c3;--warn:#ffc46b;--bad:#ff6b7a}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 20% -10%,#1d3a48 0,transparent 55%),var(--bg);color:#edf4fc;font:13px/1.4 system-ui,sans-serif}
a{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{width:100%;max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 16px;flex:none}
.back{color:var(--accent);font-size:12px;text-decoration:none;border:1px solid var(--line);border-radius:20px;padding:4px 11px;white-space:nowrap}.back:hover{background:#17283b}
.titles{flex:1;min-width:0}.label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin:0 0 1px}
h1{margin:0;font-size:clamp(16px,1.6vw,21px);line-height:1.2;letter-spacing:-.3px}h2{font-size:13px;margin:0 0 6px;font-weight:650}
.pill{padding:3px 10px;border:1px solid var(--line);border-radius:20px;font-size:11px;color:var(--accent);white-space:nowrap}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0;min-height:0}
/* Escritorio: todo cabe en la pantalla, sin desplazamiento */
main{flex:1;min-height:0;width:100%;max-width:1500px;margin:0 auto;padding:0 16px 6px;display:grid;gap:10px;
  grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"stage ctl" "chart ctl"}
.stage{grid-area:stage;position:relative;padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#1c3346 0,#0e1828 70%)}
.chart{grid-area:chart;display:flex;flex-direction:column}
.controls{grid-area:ctl;display:flex;flex-direction:column;gap:6px;overflow:auto}
#scene{position:absolute;inset:0;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}#scene canvas{display:block;width:100%;height:100%}
.hud{position:absolute;left:14px;top:10px;pointer-events:none}
.gauge{display:flex;align-items:baseline;gap:8px}.g-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.gauge strong{font:700 clamp(30px,3.4vw,46px)/1 ui-monospace,monospace;color:var(--accent);font-variant-numeric:tabular-nums;text-shadow:0 0 24px #79e4c355;transition:color .2s}
.g-unit{color:var(--muted);font-size:12px}.hud-row{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin-top:4px;flex-wrap:wrap}.hud-row b{color:#edf4fc;font-variant-numeric:tabular-nums}
.state{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;background:#79e4c322;color:var(--accent);border:1px solid #79e4c366}
.state.warn{background:#ffc46b22;color:var(--warn);border-color:#ffc46b66}.state.bad{background:#ff6b7a22;color:var(--bad);border-color:#ff6b7a66;animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.55}}
.overlay{position:absolute;bottom:6px;right:12px;margin:0;pointer-events:none}
.hint{color:var(--muted);font-size:11px;margin:0}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
button{font:inherit;border:0;border-radius:8px;cursor:pointer;color:#dceaf5}button:hover{filter:brightness(1.15)}
.seg button{background:#1b2c41;border:1px solid #38526b;padding:6px 3px;font-weight:700;font-size:13px;line-height:1.15}.seg button small{display:block;font-weight:400;font-size:10px;color:var(--muted)}
.seg button.on{background:var(--accent);color:#09251c;border-color:var(--accent)}.seg button.on small{color:#09251c}
.gain{margin:1px 0}label{display:block;font-size:12px}output{float:right;color:var(--accent);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);margin:3px 0 0;height:16px}
.divider{border-top:1px solid var(--line);margin:3px 0}
.primary{background:var(--accent);color:#09251c;font-weight:700;padding:8px 11px;text-align:left}.primary small{display:block;font-weight:400;font-size:11px}
.secondary{background:#22364c;border:1px solid #38526b;padding:7px 9px;font-weight:600;font-size:12px}.secondary[aria-pressed=true]{background:var(--warn);color:#2b1c00;border-color:var(--warn)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
select{display:block;width:100%;margin-top:3px;background:var(--bg);color:#fff;border:1px solid var(--line);border-radius:7px;padding:5px}
.heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;flex:none}.heading h2{margin:0 0 4px}
.plot{flex:1;min-height:0;position:relative;margin-top:4px;border-radius:9px;background:#0c1727;overflow:hidden}
.plot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.legend{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}.legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-left:6px}
.l-ref{background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 7px)}.l-nr{background:var(--accent)}.l-band{background:#79e4c355;height:8px!important}.l-os{background:repeating-linear-gradient(90deg,#ff6b7a 0 2px,transparent 2px 5px)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.m{display:flex;flex-direction:column;padding:7px 8px;background:#0c1727;border-radius:9px;border-top:3px solid var(--line)}
.m span{font-size:10px;color:var(--muted);line-height:1.2}.m strong{font:700 17px ui-monospace,monospace;font-variant-numeric:tabular-nums;margin:3px 0 1px}.m em{font-style:normal;font-size:10px;color:var(--muted)}
.m.pass{border-top-color:var(--accent)}.m.pass strong{color:var(--accent)}.m.fail{border-top-color:var(--bad)}.m.fail strong{color:var(--bad)}
.verdict{margin:2px 0 0;font-weight:700;min-height:18px}.verdict.pass{color:var(--accent)}.verdict.fail{color:var(--bad)}
footer{flex:none;width:100%;max-width:1500px;margin:0 auto;padding:2px 16px 6px;color:#7f93aa;font-size:10px}
/* Pantallas bajas o estrechas: diseño apilado con desplazamiento */
@media(max-width:900px),(max-height:620px){
  html,body{height:auto}main{display:flex;flex-direction:column;padding:0 10px 8px}
  .stage{height:300px;flex:none}.chart{height:340px;flex:none}.controls{overflow:visible}
  .top{flex-wrap:wrap;padding:8px 10px}.titles{flex-basis:100%;order:2}.pill{display:none}
}