:root{--bg:#eef1f5;--panel:#f7f8fa;--line:#c9d1db;--line2:#dfe4ea;--ink:#1d2733;--mut:#5d6b7c;--acc:#1d5fa8;--acc2:#e8761c;--ok:#1f9d55;--bad:#c0392b;--hl:#ffe9b3;
  --f:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.35 var(--f);overflow:hidden}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
#app{display:flex;flex-direction:column;height:100vh}
#titlebar{height:38px;flex:none}#tabs{height:30px;flex:none}#ribbon{height:96px;flex:none}#status{height:26px;flex:none}main{flex:1}
/* barra de título */
#titlebar{display:flex;align-items:center;gap:10px;background:#1b2a3c;color:#e9eef5;padding:0 10px 0 0}
.appbtn{height:100%;padding:0 18px;border:0;background:var(--acc);color:#fff;font-weight:600;cursor:pointer}
.appbtn:hover{background:#2470c4}
.qa{display:flex;gap:2px}.qa button{width:28px;height:28px;border:0;background:transparent;color:#cfd8e3;border-radius:4px;cursor:pointer;padding:4px}.qa button:hover{background:#2b3e55}
.qa svg{width:20px;height:20px}
.ttl{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;color:#aebccc}
.ttl input{background:transparent;border:1px solid transparent;color:#fff;font:600 13px var(--f);text-align:right;width:150px;padding:2px 4px;border-radius:3px}
.ttl input:hover,.ttl input:focus{border-color:#4a6585;outline:0}
.brand{font-weight:700;letter-spacing:.02em}.brand em{font-style:normal;font-weight:400;color:#9fb0c3}
.pill{border:1px solid #4a6585;background:transparent;color:#e9eef5;border-radius:14px;padding:4px 12px;cursor:pointer}.pill.on,.pill:hover{background:var(--acc2);border-color:var(--acc2);color:#fff}
#filemenu{position:absolute;top:38px;left:0;z-index:60;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:240px;padding:6px 0}
#filemenu button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 18px;cursor:pointer}#filemenu button:hover{background:#e8f0fa}
#filemenu hr{border:0;border-top:1px solid var(--line2);margin:4px 0}
/* pestañas y cinta */
#tabs{display:flex;align-items:flex-end;gap:2px;background:#dfe5ec;padding:0 8px;border-bottom:1px solid var(--line)}
.tab{border:1px solid transparent;border-bottom:0;background:none;padding:5px 16px;cursor:pointer;border-radius:4px 4px 0 0;color:#2d3b4b}
.tab.on{background:#fff;border-color:var(--line);font-weight:600;margin-bottom:-1px}
.tab.ctx{color:#fff;background:var(--acc2)}.tab.ctx.on{background:#fff;color:var(--acc2)}
#ribbon{background:#fff;border-bottom:1px solid var(--line);padding:4px 6px;overflow-x:auto;overflow-y:hidden}
.panel{display:flex;height:100%}
.grp{display:flex;flex-direction:column;padding:0 6px;border-right:1px solid var(--line2)}
.grp>.btns{flex:1;display:flex;gap:2px;align-items:stretch}
.grp>label{font-size:11px;color:var(--mut);text-align:center;padding-top:2px}
.col{display:flex;flex-direction:column;gap:2px;justify-content:center}
.big,.sm{border:1px solid transparent;background:none;border-radius:4px;cursor:pointer;color:#203040}
.big{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;width:78px;padding:4px 2px;font-size:11.5px;line-height:1.15;text-align:center}
.big .ic svg{width:30px;height:30px}
.sm{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:12px;white-space:nowrap}
.sm .ic svg{width:20px;height:20px}
.big:hover,.sm:hover{background:#e8f0fa;border-color:#b9d0ea}
.big.on,.sm.on{background:#d5e5f7;border-color:#7fa9d8}
.big.ok .ic{color:var(--ok)}
.hint{animation:hintp 1.4s ease-in-out infinite}
@keyframes hintp{0%,100%{box-shadow:0 0 0 0 rgba(232,118,28,.0)}50%{box-shadow:0 0 0 3px rgba(232,118,28,.65);background:#fff3e6}}
.snap{display:flex;align-items:center;gap:6px;font-size:12px;padding:8px 6px}.snap select{font:inherit;padding:3px}
/* barra de pasos */
#stepbar{display:flex;align-items:center;gap:6px;background:#fdf6ee;border-bottom:1px solid #efd8bd;padding:5px 12px}
#stepbar .sname{font-weight:700;margin-right:8px}
#stepbar .st{display:flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid #e6c9a6;border-radius:14px;background:#fff;color:#8a6a45;font-size:12px}
#stepbar .st.now{background:var(--acc2);border-color:var(--acc2);color:#fff;font-weight:600}
#stepbar .st.done{background:#e9f6ee;border-color:#a6d8b8;color:var(--ok)}
/* zona principal */
main{display:grid;grid-template-columns:250px 1fr auto;min-height:0;flex:1}
#pathfinder{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.phead{padding:7px 10px;font-weight:700;border-bottom:1px solid var(--line);background:#e9edf2}
#tree{flex:1;overflow:auto;padding:4px 0}
.ti{display:flex;align-items:center;gap:6px;padding:4px 10px;cursor:pointer;white-space:nowrap;user-select:none}
.ti svg{width:16px;height:16px;flex:none;color:#4a5a6c}
.ti:hover{background:#e3ebf5}.ti.sel{background:#cfe0f5}
.ti.child{padding-left:30px;color:var(--mut)}
.ti.err{color:var(--bad)}.ti.err::after{content:"⚠";margin-left:auto}
.ti.sup{color:#9aa6b2;text-decoration:line-through}
.ti.head{font-weight:600;color:#33475c;cursor:default}.ti.head:hover{background:none}
.ti .eye{margin-left:auto;opacity:.6}
#treeacts{border-top:1px solid var(--line);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
#treeacts button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:5px;cursor:pointer;font-size:12px}#treeacts button:hover{background:#e8f0fa}
#treeacts .full{grid-column:1/-1}
#view{position:relative;background:linear-gradient(#f9fbfd,#d8e1eb);min-width:0;min-height:0;overflow:hidden}
#canvas,#canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lab{position:absolute;left:0;top:0;pointer-events:auto;font:600 12.5px var(--mono);color:#b85a10;background:rgba(255,255,255,.88);border:1px solid #f0c49a;border-radius:3px;padding:1px 5px;white-space:nowrap;cursor:pointer}
.lab:hover{background:#fff3e6;border-color:var(--acc2)}
.lab input{font:600 12.5px var(--mono);width:70px;border:0;outline:0;background:transparent;color:#b85a10}
.lab.pl{font:600 11px var(--f);color:#2d4d75;background:rgba(255,255,255,.7);border-color:#b8c9de;cursor:default}
.lab.snapdot{width:10px;height:10px;padding:0;border-radius:50%;background:transparent;border:2px solid var(--acc2);pointer-events:none}
#cmdbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap!important;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 3px 10px rgba(20,40,70,.08);padding:6px 10px;z-index:20;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}

#cmdbar .note{white-space:normal;line-height:1.25}
#cmdbar b.t{font-size:13px;color:var(--acc);margin-right:4px}
#cmdbar label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut)}
#cmdbar input[type=number]{width:66px;font:600 13px var(--mono);padding:4px 6px;border:1px solid var(--line);border-radius:4px}
#cmdbar input[type=number]:focus{outline:2px solid #7fa9d8}
#cmdbar .seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
#cmdbar .seg button{border:0;background:#fff;padding:4px 9px;cursor:pointer;font-size:12px;border-left:1px solid var(--line2)}#cmdbar .seg button:first-child{border-left:0}
#cmdbar .seg button.on{background:#d5e5f7;font-weight:600}
#cmdbar .go{border:1px solid #9fd0b2;background:#e9f6ee;color:#167a42;border-radius:4px;padding:5px 12px;font-weight:600;cursor:pointer}
#cmdbar .no{border:1px solid #e5b5ae;background:#fbecea;color:#9b2d21;border-radius:4px;padding:5px 10px;cursor:pointer}
#cmdbar .note{font-size:11.5px;color:var(--mut);max-width:420px;min-width:140px;flex:1 1 160px}
#viewbtns{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:3px;z-index:10}
#viewbtns button{width:42px;height:28px;border:1px solid var(--line);background:rgba(255,255,255,.9);border-radius:4px;font:600 11px var(--f);cursor:pointer}#viewbtns button:hover{background:#e8f0fa}
#triad{position:absolute;left:10px;bottom:10px;width:80px;height:80px;pointer-events:none}
#toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:#1b2a3c;color:#fff;padding:8px 14px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:30;max-width:70%}
#toast.bad{background:var(--bad)}
/* prácticas */
#practice{width:330px;background:#fff;border-left:1px solid var(--line);overflow:auto;padding:0 0 16px}
#practice .ph{position:sticky;top:0;background:#fff;padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;z-index:2}
#practice .ph b{flex:1}
#practice .ph button{border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;padding:3px 8px}
.plist{padding:10px 14px;display:flex;flex-direction:column;gap:8px}
.pcard{border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;background:#fbfcfd}.pcard:hover{border-color:var(--acc);background:#f2f7fd}
.pcard b{display:block;font-size:14px}.pcard small{color:var(--mut)}
.pcard .tagt{display:inline-block;font-size:11px;background:#fff3e6;color:#b85a10;border-radius:10px;padding:1px 8px;margin-top:4px}
.pbody{padding:10px 14px}
.pbody h3{margin:4px 0 2px;font-size:16px}.pbody .pdesc{color:var(--mut);margin:0 0 10px}
.psteps{display:flex;flex-direction:column;gap:6px}
.pst{border:1px solid var(--line2);border-radius:6px;padding:8px 10px 8px 34px;position:relative;color:var(--mut)}
.pst i{position:absolute;left:8px;top:8px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);font:700 11px/14px var(--f);text-align:center;font-style:normal}
.pst.now{border-color:var(--acc2);background:#fffaf4;color:var(--ink)}.pst.now i{border-color:var(--acc2);color:var(--acc2)}
.pst.done{color:var(--ink)}.pst.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.pst b{color:var(--ink)}
.pst .hintx{display:block;margin-top:4px;font-size:12px;color:#8a6a45}
.pdone{margin-top:12px;padding:10px;border-radius:6px;background:#e9f6ee;color:#167a42;font-weight:600}
.pfig{margin:6px 0 10px;border:1px solid var(--line2);border-radius:6px;background:#fbfcfd}
.pfig svg{display:block;width:100%;height:auto}
/* estado */
#status{display:flex;align-items:center;gap:18px;background:#e3e8ee;border-top:1px solid var(--line);padding:0 10px;font-size:12px;color:#33475c;white-space:nowrap;overflow:hidden}
#prompt{flex:1;overflow:hidden;text-overflow:ellipsis}
#coords,#vol{font-family:var(--mono)}
.unit{font-weight:700}
#loading{position:fixed;inset:0;background:rgba(27,42,60,.92);display:grid;place-items:center;z-index:100;color:#fff}
#loading .lbox{text-align:center;width:340px}
#loading .logo{font:800 30px var(--f);letter-spacing:.02em;margin-bottom:6px}
#loading .bar{height:4px;background:#2b3e55;border-radius:2px;overflow:hidden;margin:14px 0 8px}
#loading .bar i{display:block;height:100%;width:40%;background:var(--acc2);animation:ld 1.2s ease-in-out infinite}
@keyframes ld{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
#loading small{color:#9fb0c3}
@media (max-width:900px){main{grid-template-columns:190px 1fr}#practice{position:absolute;right:0;top:0;bottom:0;z-index:40;box-shadow:-8px 0 20px rgba(0,0,0,.15)}main{position:relative}}
/* ===== v2 ===== */
.envsw{display:flex;border:1px solid #4a6585;border-radius:5px;overflow:hidden;margin-left:6px}
.envsw button{border:0;background:transparent;color:#cfd8e3;padding:4px 12px;cursor:pointer;font-size:12px;border-left:1px solid #4a6585}.envsw button:first-child{border-left:0}
.envsw button.on{background:var(--acc2);color:#fff;font-weight:600}.envsw button:hover:not(.on){background:#2b3e55}
.relgrid{display:grid;grid-template-columns:repeat(5,auto);grid-auto-rows:1fr;gap:2px;align-content:center}
.relgrid button{display:flex;align-items:center;gap:4px;border:1px solid transparent;background:none;border-radius:4px;padding:2px 6px;font-size:11px;cursor:pointer;white-space:nowrap;color:#203040}
.relgrid button b{display:inline-block;width:18px;height:18px;line-height:17px;text-align:center;border:1px solid #9db3cc;border-radius:3px;font:700 12px var(--f);color:var(--acc);background:#f5f9fd}
.relgrid button:hover{background:#e8f0fa;border-color:#b9d0ea}.relgrid button.on{background:#d5e5f7;border-color:#7fa9d8}
.col2{display:flex!important;flex-direction:column;gap:2px;justify-content:center;margin-left:6px}
.col2 .sm{font-size:11px;padding:2px 8px}
.col2 .sm.on::before{content:"✓ ";color:var(--ok);font-weight:700}
.lab.dimlab{font:700 13px var(--mono);color:#b4540f;border-color:#f0c49a}
.lab.dimlab.driven{color:#7d8896;border-color:#cfd6de;background:rgba(255,255,255,.8)}
.lab.dimlab.sel{background:#fff0de;border-color:var(--acc2)}
.lab.dimlab input{width:78px}
.rel{position:absolute;left:0;top:0;pointer-events:auto;min-width:15px;height:15px;padding:0 2px;font:700 10px/13px var(--f);text-align:center;color:#1d5fa8;background:#eaf2fb;border:1px solid #8fb0d6;border-radius:3px;cursor:pointer}
.rel:hover{background:#fff;border-color:var(--acc)}.rel.sel{background:var(--acc2);color:#fff;border-color:var(--acc2)}
.lab.snaptip,.lab.prevlab{pointer-events:none;font:600 11px var(--f);color:#1d5fa8;background:rgba(255,255,255,.92);border-color:#a9c4e4}
.lab.prevlab{font:700 12px var(--mono)}
.lab.meas{color:#fff;background:var(--acc2);border-color:var(--acc2);font-size:13px;cursor:default}
.lab.ref{color:#6a3aa0;border-color:#cbb3e6}
.lab.balloon{width:26px;height:26px;border-radius:50%;padding:0;text-align:center;line-height:23px;font:800 13px var(--f);color:#1b2a3c;background:#fff;border:2px solid #1b2a3c;cursor:default}
#dof{font-size:12px}#dof .okc{color:var(--ok)}
.ti.mark{background:#fff0de;box-shadow:inset 3px 0 0 var(--acc2)}
.ti.rolled{opacity:.42}
.ti.rollmark{color:var(--acc2);font-weight:700;font-size:11px;cursor:default;border-top:2px solid var(--acc2);margin:2px 8px;padding:3px 2px}
.ti input.ren{font:inherit;width:150px;padding:1px 4px;border:1px solid var(--acc);border-radius:3px}
.ti .dotc{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:none}
#rollbar{border-top:1px solid #efd8bd;background:#fdf6ee;padding:8px;font-size:12px;display:flex;flex-direction:column;gap:6px}
#rollbar button{border:1px solid var(--acc2);background:#fff;color:#b85a10;border-radius:4px;padding:5px;cursor:pointer;font-weight:600}
#cmdbar .lbl{font-size:12px;color:var(--mut)}
#cmdbar select{font:inherit;padding:3px}
#cmdbar button:not(.go):not(.no):not(.seg button){border:1px solid var(--line);background:#fff;border-radius:4px;padding:4px 9px;cursor:pointer;font-size:12px}
#modal{position:fixed;inset:0;background:rgba(15,25,40,.45);display:grid;place-items:center;z-index:200}
#modal .mbox{background:#fff;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.3);padding:18px 22px;max-width:min(720px,94vw);max-height:88vh;overflow:auto;min-width:340px}
#modal h3{margin:0 0 10px;font-size:17px}#modal h4{margin:12px 0 6px;font-size:13px;color:var(--acc)}
#modal .mut,.mut{color:var(--mut);font-size:12px}
#modal .mbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#modal .mbtns button{border:1px solid var(--line);background:#fff;border-radius:5px;padding:7px 14px;cursor:pointer}
#modal .mbtns button.go{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
#modal .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}#modal select{font:inherit;padding:4px}
table.props{border-collapse:collapse;width:100%;font-size:13px}table.props td,table.props th{border-bottom:1px solid var(--line2);padding:6px 8px;text-align:left}table.props th{background:#f1f4f8;font-size:12px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}.form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--mut)}.form label:nth-last-child(1){grid-column:1/-1}
.form input,.form textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:4px;color:var(--ink)}
.sbsum{margin-top:12px;padding:8px 10px;background:#f1f6fc;border-radius:5px;font-size:12px}
.guide{display:grid;grid-template-columns:1fr 1fr;gap:18px;font-size:13px}.guide ol{padding-left:18px;margin:4px 0}.guide p{margin:4px 0 8px}
.librow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line2);border-radius:6px;margin-bottom:5px;cursor:pointer}.librow:hover{border-color:var(--acc);background:#f2f7fd}
.librow small{color:var(--mut);margin-left:auto}.librow button{border:0;background:none;color:var(--bad);cursor:pointer}
.pdone button,.subsm{margin-top:8px;border:1px solid var(--acc);background:var(--acc);color:#fff;border-radius:5px;padding:6px 12px;cursor:pointer;font-weight:600}
.subsm{background:#fff;color:var(--acc);font-weight:500}
/* plano */
#app[data-env=draft] main{grid-template-columns:1fr auto}
#draftEnv{background:#7d8a99;overflow:auto;min-width:0;min-height:0;position:relative}
#sheetwrap{padding:12px 18px 30px;min-height:100%}
.tbform{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;background:#f7f8fa;border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:0 auto 12px;max-width:1200px;font-size:12px}
.tbform label{display:flex;align-items:center;gap:4px;color:var(--mut)}.tbform input{font:inherit;padding:3px 6px;border:1px solid var(--line);border-radius:3px}
.sheetbox{max-width:1200px;margin:0 auto;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#fff}
.sheetbox svg{display:block;width:100%;height:auto}
.drempty{max-width:520px;margin:60px auto;background:#fff;border-radius:8px;padding:24px;text-align:center}
#app[data-env=asm] #viewbtns button[data-view=front],#app[data-env=asm] #viewbtns button[data-view=top],#app[data-env=asm] #viewbtns button[data-view=right]{display:block}

.gridsel{display:none;align-items:center;gap:4px}.gridsel select{font:inherit;font-size:11px;padding:0 2px}
#app.insk .gridsel{display:flex}
[data-panel=sketch] .big{width:66px}
.relgrid button{padding:2px 4px;font-size:10.5px}

[data-panel=draft] .snap{padding:1px 6px;font-size:11.5px}[data-panel=draft] .snap select{padding:1px;font-size:11.5px}

.grp{padding:0 4px}
[data-panel=sketch] .big{width:60px}
[data-panel=sketch] .sm{padding:3px 5px;gap:4px}
.col2 .sm{padding:2px 6px}
.big{width:70px}.grp{padding:0 3px}
@media (max-width:1300px){.big{width:62px;font-size:11px}.sm{padding:3px 5px;font-size:11.5px}}

.dtby{display:flex;align-items:center;gap:6px;text-decoration:none;color:#9fb0c3;padding:0 6px;border-left:1px solid #33475e;margin-left:2px;opacity:.9}
.dtby:hover{opacity:1}.dtby small{font-size:11px}.dtby img{height:24px;display:block}
#loading .ldev{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:6px}#loading .ldev small{font-size:11px;letter-spacing:.12em;text-transform:uppercase}#loading .ldev img{height:44px}
.dtabout{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin:10px 0}
.dtabout img{height:40px;filter:brightness(0);opacity:.85}
@media (max-width:900px){.dtby small{display:none}}