:root{
  --ink:#203632; --muted:#748079; --line:#d5ddd5; --bg:#eaece8; --panel:#fafbf7;
  --accent:#b9d665; --accent-ink:#213832; --accent-soft:#e8efde; --warn:#8a6d00; --warn-bg:#fff8e1;
  --err:#b3261e; --err-bg:#fdecea; --ok:#1b6b3a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.5 system-ui,sans-serif}
header{background:#213832;color:#f1f5e9;padding:19px 27px;display:flex;align-items:center;
  justify-content:space-between;gap:15px;flex-wrap:wrap}
h1{font-size:23px;letter-spacing:-.5px;margin:3px 0;font-weight:600}
.bar{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 24px;display:flex;
  gap:16px;align-items:center;flex-wrap:wrap}
.bar label{flex-direction:row;align-items:center;gap:8px;font-size:10px;color:#657b6c}
h2{font-size:10px;margin:3px 0 14px;text-transform:uppercase;letter-spacing:1.6px;color:#668070}
h3{font-size:10px;margin:26px 0 10px;text-transform:uppercase;letter-spacing:1.6px;color:#668070}
.versions{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pill{background:var(--accent-soft);color:var(--accent-ink);border:1px solid #c7d5bf;border-radius:999px;
  padding:3px 10px;font-size:10px;font-weight:600;letter-spacing:.5px}
main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding:18px 22px;
  align-items:start}
section,aside{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
#results{margin:0 22px 40px}
label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#617359;
  text-transform:uppercase;letter-spacing:.06em}
select,input{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:7px;padding:8px 9px;min-width:0}
select:focus,input:focus{outline:2px solid #91af71;outline-offset:-1px}
.steps{list-style:none;margin:0;padding:0}
.steps>li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;
  border-top:1px solid var(--line)}
.steps>li:first-child{border-top:0;padding-top:0}
.n{width:24px;height:24px;border-radius:50%;background:#213832;color:#f1f5e9;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}
.fields.inline{grid-column:1/-1}
.check{flex-direction:row;align-items:center;gap:8px;text-transform:none;font-size:13px;
  color:var(--ink)}
.check input{width:auto}
.hint{grid-column:2;margin:8px 0 0;font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;margin-top:16px}
button{font:inherit;border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:9px 16px;cursor:pointer}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:#abc55d;font-weight:650}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button.wide{width:100%;margin-top:8px}
#units{list-style:none;margin:0;padding:0}
#units li{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
#units b{font-size:14px}
#units small{display:block;color:var(--muted);font-size:12px}
#units .rm{float:right;border:0;background:none;color:var(--muted);padding:0;font-size:18px;
  line-height:1;cursor:pointer}
.empty{color:var(--muted);font-size:13px}
.totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
  margin-bottom:18px}
.totals div{background:var(--accent-soft);border-radius:8px;padding:12px 14px}
.totals span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--accent)}
.totals strong{font-size:19px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button[aria-selected=true]{background:#213832;color:#fff;border-color:#213832}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.note{color:var(--muted);font-size:12px}
.diag{border-left:3px solid var(--line);padding:7px 12px;margin-bottom:6px;font-size:13px;
  background:#fbfcfd}
.diag.warn{border-color:var(--warn);background:var(--warn-bg)}
.diag.error{border-color:var(--err);background:var(--err-bg)}
.diag b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.error{background:var(--err-bg);border:1px solid var(--err);color:var(--err);
  border-radius:8px;padding:12px 14px;margin-bottom:16px}
.downloads{display:flex;gap:10px;margin:10px 0 20px;flex-wrap:wrap}
.downloads a{text-decoration:none;border:1px solid var(--line);border-radius:7px;
  padding:9px 16px;color:var(--ink)}
.downloads a:hover{border-color:var(--accent)}
.diagram{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:14px;
  overflow:auto}
.diagram svg{max-width:100%;height:auto;display:block}
.diagram h4{margin:0 0 8px;font-size:13px;color:var(--muted)}
details#advanced{grid-column:2;margin-top:12px;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;background:#fbfcfd}
details#advanced summary{cursor:pointer;font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);font-weight:600}
details#advanced[open] summary{margin-bottom:10px}
.inline-hint{margin:0 0 10px;grid-column:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.grid .wide{grid-column:1/-1}
.card{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}
.card h4{margin:0 0 8px;font-size:13px}
.thumbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thumbs.one{grid-template-columns:1fr}
.thumb{border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff;cursor:zoom-in;
  display:block;width:100%}
.thumb:hover{border-color:var(--accent)}
.thumb svg{width:100%;height:auto;max-height:190px;display:block}
.card.wide .thumb svg{max-height:none;max-width:100%;height:auto}
.card.wide .thumb{overflow:auto;max-height:70vh}
.thumb span{display:block;font-size:11px;color:var(--muted);text-align:center;margin-top:4px}
dialog{border:0;border-radius:12px;padding:18px;max-width:94vw;max-height:92vh;width:1100px}
dialog::backdrop{background:rgba(20,28,38,.55)}
dialog h4{margin:0 0 10px;font-size:14px}
#zoom-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:24px;
  line-height:1;cursor:pointer;color:var(--muted)}
#zoom-body svg{width:100%;height:auto;max-height:78vh}
.diag details{margin-top:4px}
.diag summary{cursor:pointer;font-size:12px;color:var(--muted)}
.diag .units{font-size:12px;color:var(--muted)}
.order-bar{display:none}
/* it-40: en pantallas angostas las tablas de resultados (materiales, vidrios, cortes) se desplazan dentro de su
   tarjeta; antes ensanchaban la página entera a 854 px en un teléfono de 390 */
@media (max-width:700px){#results table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
@media (max-width:900px){
  main{grid-template-columns:1fr}
  /* N12: en una columna el panel del pedido queda abajo; el resumen se pega arriba */
  .order-bar{display:flex;position:sticky;top:0;z-index:20;gap:10px;align-items:center;justify-content:space-between;
    padding:8px 16px;background:var(--panel, #fff);border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(0,0,0,.06)}
  .order-bar button{font-size:13px;padding:6px 12px}
}

/* Mesa de montaje embebida (PoC v2) con la escena del motor */
#mesa-frame{width:100%;height:88vh;border:1px solid var(--line);border-radius:8px;background:#fff}
#mesa-units button[aria-pressed="true"]{outline:2px solid var(--accent, #b4661a)}

.hint.warn{color:var(--warn)}
#variant-hint{grid-column:1/-1;margin:0}

/* comparación con Vilux */
#compare{margin:18px 0}
tr.cmp-igual td{color:var(--muted)}
tr.cmp-explicada td{background:var(--warn-bg)}
tr.cmp-sin-explicar td{background:var(--err-bg);color:var(--err)}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* pastillas de estado de la escena */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:#e0c877}
.pill.ok{background:#e3f1e6;color:var(--ok);border-color:#b8d8c0}
.pill.note{background:#fff;color:var(--ink);border-color:var(--line);font-weight:500;text-transform:none;letter-spacing:0}

.cut-profile table{font-size:12px}
td.remnant{color:var(--ok);font-weight:600}

/* N15: etiquetas de retazo, 70 × 36 mm, para pegar en el aluminio */
.labels{display:grid;grid-template-columns:repeat(auto-fill,70mm);gap:4mm;padding:8px 0}
.label{width:70mm;height:36mm;box-sizing:border-box;border:1px solid #333;border-radius:2mm;padding:2.5mm 3mm;display:flex;flex-direction:column;justify-content:space-between;background:#fff;color:#000;font-family:system-ui,sans-serif;break-inside:avoid}
.label .code{font-size:20px;font-weight:800;letter-spacing:.02em}.label .len{font-size:22px;font-weight:800}.label .meta{font-size:9px;line-height:1.25;color:#222}
@media print{body>*:not(#results){display:none!important}#results>*:not(#cutplan){display:none!important}#cutplan>*:not(#labels){display:none!important}#labels{display:grid!important}.labels{gap:2mm}}
/* it-30: edición «presentacion» (prod): lo técnico no se dibuja */
[data-edition="presentacion"] .tecnica-only{display:none!important}
#observations ul{margin:6px 0 14px;padding-left:18px}#observations li{margin:3px 0}#diag-details summary{cursor:pointer;color:var(--muted);margin:6px 0}

#results.only-error > :not(#error){display:none}

/* it-52: importar / guardar pedido */
.order-io{display:flex;flex-direction:column;gap:6px;margin-top:8px}.order-io button{font-size:12px}

/* fase SaaS (L3): bloque «Trabajo» del pedido */
.order-io.ws{border-top:1px solid var(--line,#d5ddd5);padding-top:8px}.order-io.ws .hint{grid-column:auto;margin:0}
.order-io.ws input{font:inherit;font-size:12px;padding:6px 8px;border:1px solid #c5d0c4;border-radius:7px}
.order-io.ws a.hint{color:#3e6b57;font-weight:600;text-decoration:none}