/* Concepto: visor 3D fijo (arriba en el celu, a la izquierda en escritorio) y tablero de control al lado. Estética de taller de impresión: cama con grilla, números en mono. */
:root{
  --bg:#EDF0F0; --panel:#FAFBFB; --ink:#18201E; --muted:#5B6866; --line:#D3DBDA;
  --accent:#0B6E7F; --accent-ink:#FFFFFF; --accent-soft:#D6EBEE;
  --stage:#CFD7D8; --grid:#B3BFC1; --bed:#C2CCCE; --warn:#A8500A; --ok:#1E7448;
  --f-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1415; --panel:#171E1F; --ink:#E4EAE9; --muted:#93A09E; --line:#2A3436;
    --accent:#4FC3D6; --accent-ink:#06222A; --accent-soft:#17353B;
    --stage:#1A2225; --grid:#2E3A3D; --bed:#222C2F; --warn:#F0A25B; --ok:#6CCB95;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1415; --panel:#171E1F; --ink:#E4EAE9; --muted:#93A09E; --line:#2A3436;
  --accent:#4FC3D6; --accent-ink:#06222A; --accent-soft:#17353B;
  --stage:#1A2225; --grid:#2E3A3D; --bed:#222C2F; --warn:#F0A25B; --ok:#6CCB95;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:14px; line-height:1.45;
  padding-block:14px 28px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); background:var(--bg); z-index:10}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance}
.top{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:12px; max-width:1280px; margin-inline:auto}
.top h1{font-size:24px; letter-spacing:-.01em}
.top p{margin:0; color:var(--muted)}
.layout{display:grid; grid-template-columns:minmax(0,1fr); gap:14px; max-width:1280px; margin-inline:auto}
.stage{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; height:46svh; min-height:280px;
  background:var(--stage); border:1px solid var(--line); border-radius:10px; overflow:hidden; touch-action:none;
}
#gl{display:block; width:100%; height:100%; outline:none}
.hud{position:absolute; display:flex; gap:6px; flex-wrap:wrap; z-index:2}
.hud.tl{top:8px; left:8px; right:150px; pointer-events:none}
.hud.tr{top:8px; right:8px}
.hint{position:absolute; left:10px; bottom:8px; right:10px; font-size:11px; color:var(--muted); pointer-events:none; z-index:2}
.stat{
  font-family:var(--f-mono); font-size:11.5px; background:color-mix(in srgb,var(--panel) 88%,transparent);
  border:1px solid var(--line); border-radius:6px; padding:3px 7px; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.stat.warn{color:var(--warn); border-color:var(--warn)}
.stat.ok{color:var(--ok)}
.fallback{padding:24px; color:var(--muted)}
.panel{display:flex; flex-direction:column; gap:12px; min-width:0}
.card{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; min-width:0}
.card h2{font-size:15px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px}
.btn{
  appearance:none; font:inherit; font-weight:500; color:var(--ink); background:transparent; border:1px solid var(--line);
  border-radius:7px; padding:7px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; min-height:34px;
}
.btn:hover{border-color:var(--accent)}
.btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn.sm{padding:4px 9px; min-height:28px; font-size:12.5px}
.btn svg{flex:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pz-list{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px}
.pz{display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:8px; padding:2px}
.pz[aria-current="true"]{border-color:var(--accent); background:var(--accent-soft)}
.pz button{appearance:none; font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:6px 8px; border-radius:6px}
.pz .nm{flex:1; text-align:left; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.pz .nm small{display:block; color:var(--muted); font-weight:400; font-size:11.5px}
.pz .eye[aria-pressed="false"]{opacity:.45}
.tabs{display:flex; gap:4px; background:var(--bg); padding:3px; border-radius:9px; margin-bottom:12px}
.tabs button{flex:1; appearance:none; font:inherit; font-weight:500; color:var(--muted); background:none; border:0; border-radius:7px; padding:7px 4px; cursor:pointer}
.tabs button[aria-selected="true"], .tabs button[aria-checked="true"]{background:var(--panel); color:var(--ink); box-shadow:0 0 0 1px var(--line)}
.ctl{margin-bottom:12px}
.ctl-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:2px}
.ctl label{font-weight:500}
.num{display:inline-flex; align-items:center; gap:4px; color:var(--muted)}
.num i{font-style:normal; font-size:12px; min-width:22px}
.n{
  width:68px; font-family:var(--f-mono); font-size:13px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:3px 6px; text-align:right; font-variant-numeric:tabular-nums;
}
input[type=range]{width:100%; height:28px; accent-color:var(--accent); background:transparent; margin:0}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.chip{
  appearance:none; font:inherit; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:8px;
  padding:5px 9px; cursor:pointer; display:inline-flex; flex-direction:column; align-items:center; gap:2px; font-size:12.5px;
}
.chip[aria-checked="true"]{border-color:var(--accent); background:var(--accent-soft)}
.chip img, .chip svg{display:block}
.chip.row{flex-direction:row; gap:7px}
.dot{width:14px; height:14px; border-radius:50%; border:1px solid var(--line); display:inline-block}
.sub{margin:14px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-family:var(--f-body); font-weight:600}
.note{color:var(--muted); font-size:12.5px; margin:0 0 10px}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.preset-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.field{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.field input[type=text]{
  flex:1; min-width:120px; font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line);
  border-radius:7px; padding:7px 9px;
}
.seg{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.seg label{display:flex; gap:6px; align-items:center; cursor:pointer}
#toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:30;
  background:var(--ink); color:var(--bg); padding:9px 14px; border-radius:8px; font-size:13px; max-width:min(92vw,420px);
  opacity:0; pointer-events:none; transition:opacity .2s;
}
#toast.on{opacity:1}
.drop{outline:2px dashed var(--accent); outline-offset:-6px}
@media (min-width:900px){
  .layout{grid-template-columns:minmax(0,1fr) 400px; align-items:start}
  .stage{height:calc(100svh - 96px); min-height:480px; top:12px}
  .hud.tl{right:170px}
}
@media (prefers-reduced-motion:reduce){#toast{transition:none}}