/* Qhawa Macrosim — hoja de estilo de la aplicación.
   Tokens del sistema de diseño Qhawa AI (ver design/qhawa-design-system.md). */
:root{
  /* marca */
  --q-navy:#07162E;--q-cyan:#00AEEF;--q-cyan-600:#0090C8;--q-cyan-700:#00719E;--q-ink:#1F2A37;--q-gray:#667085;
  --q-gray-300:#CDD3DC;--q-gray-200:#E4E7EC;--q-gray-100:#F4F6F8;--q-gray-50:#F8FAFC;--q-white:#FFFFFF;
  /* semántica de interfaz */
  --bg:#E9EDF2;--panel:var(--q-white);--panel2:#F5F7FA;--raise:var(--q-white);--hover:#EDF1F5;--line:var(--q-gray-200);--line2:var(--q-gray-300);
  --fg:var(--q-navy);--mut:var(--q-gray);--dim:#98A2B3;--acc:var(--q-cyan);--acc-fg:#fff;--acc-soft:rgba(0,174,239,.11);--sel-fg:var(--q-cyan-700);
  --ok:#12A66A;--warn:#DC8A00;--bad:#D92D20;
  --radius:4px;--font:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--shadow:0 10px 30px rgba(7,22,46,.16);
  /* mapa */
  --m-land:#F4F6F8;--m-zone:rgba(7,22,46,.34);--m-link:#8D99AB;--m-label:var(--q-navy);--m-halo:#F4F6F8;--m-node:#fff}


/* A · Grafito: oscuro neutro, acento lima */
*{box-sizing:border-box}
html{overflow-x:auto;overflow-y:hidden}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:12px/1.4 var(--font);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
svg.i{flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sp{flex:1}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;border:3px solid var(--panel)}::-webkit-scrollbar-corner{background:transparent}
:focus-visible{outline:1.5px solid var(--acc);outline-offset:1px}

#app{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:40px 44px minmax(0,1fr) 24px;height:100vh;min-width:700px;gap:1px;background:var(--line)}
:root{--w-left:262px;--w-right:324px;--h-bottom:220px}
@media (max-width:1280px){:root{--w-left:216px;--w-right:290px}}
@media (max-width:1040px){:root{--w-left:204px;--w-right:258px}}
@media (max-width:860px){:root{--w-left:164px;--w-right:226px}.rbtn{min-width:44px}.runbig .xl{display:none}.vbar.wrap .seg button{padding:0 5px;gap:3px}.cmd{width:150px}.file{max-width:150px;overflow:hidden}}
@media (max-height:800px){:root{--h-bottom:150px}}
@media (max-width:1280px){.split2{grid-template-columns:150px minmax(0,1fr)}.dgrid{grid-template-columns:128px minmax(0,1fr);padding:4px 12px;gap:5px 8px}.rowf{flex-wrap:wrap}.dform h4{margin:16px 12px 2px}.hint2{margin-left:12px;margin-right:12px}}
[data-theme=niebla] #app,[data-theme=grafito] #app{gap:0}

/* barra de título + menús */
.title{display:flex;align-items:center;gap:4px;padding:0 8px 0 10px;background:var(--panel2);border-bottom:1px solid var(--line);min-width:0}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:-.01em;margin-right:6px;white-space:nowrap}
.logo i{width:22px;height:22px;display:grid;place-items:center;border-radius:calc(var(--radius) - 1px);background:var(--acc);color:var(--acc-fg)}
.menu{height:28px;padding:0 10px;border-radius:var(--radius);font-weight:500;color:var(--mut);white-space:nowrap}
.menu:hover{background:var(--hover);color:var(--fg)}
.menu.on{color:var(--fg);background:var(--raise);box-shadow:inset 0 -2px 0 var(--acc)}
.file{display:flex;align-items:center;gap:7px;margin-left:8px;padding:0 9px;height:24px;border-radius:var(--radius);border:1px solid var(--line);font:500 11px var(--mono);color:var(--mut);white-space:nowrap}
.file u{width:6px;height:6px;border-radius:50%;background:var(--ok)}.file u.d{background:var(--warn)}
.cmd{display:flex;align-items:center;gap:8px;width:min(340px,26vw);height:28px;padding:0 6px 0 10px;border-radius:var(--radius);background:var(--panel);border:1px solid var(--line);color:var(--dim);white-space:nowrap;overflow:hidden}
.cmd:hover{border-color:var(--line2);color:var(--mut)}
.cmd span{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
kbd{font:500 10px var(--mono);padding:2px 5px;border-radius:calc(var(--radius) - 1px);background:var(--hover);color:var(--mut)}
.themes{display:flex;gap:2px;padding:2px;border-radius:var(--radius);border:1px solid var(--line);margin:0 4px}
.themes button{height:22px;padding:0 8px;border-radius:calc(var(--radius) - 2px);font-size:11px;font-weight:600;color:var(--dim)}
.themes button.on{background:var(--fg);color:var(--panel)}
.adabtn{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--radius);font-weight:600;border:1px solid var(--line2)}
.adabtn.on{background:var(--acc);color:var(--acc-fg);border-color:transparent}
.user{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--font);background:var(--hover);margin-left:6px}

/* cinta de herramientas */
.strip{display:flex;align-items:center;gap:0;padding:0 10px;background:var(--panel);min-width:0}
.grp{display:flex;align-items:center;gap:2px;padding:0 10px 0 0;margin-right:10px;border-right:1px solid var(--line);height:28px}
.grp>em{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-right:6px;white-space:nowrap}
.tool{display:flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:var(--radius);font-weight:500;white-space:nowrap;color:var(--fg)}
.tool:hover{background:var(--hover)}
.tool.pri{background:var(--acc);color:var(--acc-fg);font-weight:600}
.tool.pri:hover{filter:brightness(1.06)}
.tool:disabled{opacity:.4;cursor:default}
.scen{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-radius:var(--radius);border:1px solid var(--line);white-space:nowrap}
.scen small{color:var(--dim);font:600 9.5px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.scen u{width:7px;height:7px;border-radius:50%}
.scen b{font-weight:600}

/* cuerpo */
.main{display:grid;min-height:0;background:var(--line);gap:1px}
.dock{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--panel);position:relative}
.grip{position:absolute;z-index:6;background-color:var(--line2);background-clip:content-box;transition:background-color .1s}.grip:hover,.gripping .grip:active{background-color:var(--q-cyan)}
.gl{right:-4px;top:0;bottom:0;width:8px;padding:0 2.5px;cursor:col-resize}.gr{left:-4px;top:0;bottom:0;width:8px;padding:0 2.5px;cursor:col-resize}.gb{top:-4px;left:0;right:0;height:8px;padding:2.5px 0;cursor:row-resize}
.gl::after,.gr::after{content:"";position:absolute;top:50%;left:1px;width:6px;height:34px;margin-top:-17px;border-radius:3px;background:var(--q-gray);opacity:.7}.gb::after{content:"";position:absolute;left:50%;top:1px;height:6px;width:34px;margin-left:-17px;border-radius:3px;background:var(--q-gray);opacity:.7}
.grip:hover::after{background:var(--q-cyan-700);opacity:1}
.gripping{user-select:none}
.ph{display:flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;flex:none;border-bottom:1px solid var(--line);background:var(--panel2)}
.ph b{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.ib{width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius);color:var(--dim)}
.ib:hover{background:var(--hover);color:var(--fg)}.ib.on{color:var(--acc)}
.scroll{overflow:auto;min-height:0;flex:1}

/* explorador */
.tree{padding:6px}
.tg{display:flex;align-items:center;gap:6px;height:24px;padding:0 6px;margin-top:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tr{display:flex;align-items:center;gap:7px;height:26px;padding:0 4px 0 6px;border-radius:var(--radius);cursor:pointer;white-space:nowrap}
.tr:hover{background:var(--hover)}
.tr.on{background:var(--q-cyan);color:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--q-navy)}.tr.on svg,.tr.on small,.tr.on .eye,.tr.on .ib{color:#fff}.tr.on:hover{background:var(--q-cyan-600)}
.tr.on.ins{background:var(--ok)}.tr.on.ins:hover{background:var(--ok)}.tr em{font:600 9.5px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.tr .eye{color:var(--mut)}.tr .eye.off{color:var(--dim);opacity:.45}
.tr span{flex:1;overflow:hidden;text-overflow:ellipsis}
.tr small{font:500 10.5px var(--mono);color:var(--dim)}
.tr .more{display:none}.tr:hover .more,.tr .more.on{display:grid}
.tr>span{min-width:34px}.tr{gap:6px}
.tr .add{color:var(--mut);border:1px solid var(--line);width:20px;height:20px}.tr .add:hover{color:#fff;background:var(--q-cyan);border-color:var(--q-cyan)}.tr .add.on{color:#fff;background:var(--q-cyan);border-color:var(--q-cyan)}
.tr .flt{color:var(--acc)}
.tr i.dot{width:8px;height:8px;border-radius:50%;flex:none}

/* propiedades */
.props{flex:none;height:46%;border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.pid{padding:10px 12px 8px}
.eb{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pid h4{margin:3px 0 1px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pid p{margin:0;color:var(--mut);font-size:11.5px}
.vc{display:flex;align-items:center;gap:8px;margin-top:8px}
.vc i{flex:1;height:5px;border-radius:3px;background:var(--hover);overflow:hidden}.vc i u{display:block;height:100%}
.vc b{font:600 12px var(--mono)}
.sec{padding:7px 12px 4px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line);background:var(--panel2)}
.row{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:8px;padding:2px 12px;min-height:26px}
.row label{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row input{width:100%;height:22px;padding:0 6px;border-radius:calc(var(--radius) - 1px);border:1px solid var(--line);background:var(--raise);font-size:11.5px;min-width:0}
.row input:hover{border-color:var(--line2)}
.row input.ed{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--raise))}
.row input[readonly]{border-color:transparent;background:transparent;color:var(--mut);padding-left:0}
.pact{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line);flex:none}
.btn{flex:1;height:26px;border-radius:var(--radius);font-weight:600;border:1px solid var(--line2);white-space:nowrap;padding:0 12px}
.btn:hover{background:var(--hover)}
.btn.pri{background:var(--acc);color:var(--acc-fg);border-color:transparent}
.btn:disabled{opacity:.4;cursor:default}

/* centro */
.center{display:grid;min-height:0;min-width:0;gap:1px;background:var(--line)}.center>.dock:first-child{overflow:hidden}
.vtabs{display:flex;align-items:flex-end;height:32px;padding:0 6px;background:var(--panel2);gap:1px;flex:none;border-bottom:1px solid var(--line)}
.vt{display:flex;align-items:center;gap:6px;height:27px;padding:0 11px;border-radius:var(--radius) var(--radius) 0 0;font-weight:500;color:var(--mut);white-space:nowrap}
.vt:hover{color:var(--fg)}
.vt.on{background:var(--panel);color:var(--fg);font-weight:600;box-shadow:inset 0 2px 0 var(--acc)}
.vt small{font:500 10px var(--mono);color:var(--dim)}
.vt .x{margin-left:2px;opacity:.5}.vt .x:hover{opacity:1}
.vbar{display:flex;align-items:center;gap:6px;height:36px;padding:0 8px;flex:none;border-bottom:1px solid var(--line);white-space:nowrap}
.seg{display:flex;padding:2px;gap:1px;border-radius:var(--radius);background:var(--panel2);border:1px solid var(--line)}
.seg button{height:22px;min-width:26px;padding:0 7px;border-radius:calc(var(--radius) - 2px);display:flex;align-items:center;gap:5px;color:var(--mut);font-weight:500}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--acc);color:var(--acc-fg);font-weight:600}
.lbl{color:var(--dim);margin-left:6px}
select{height:26px;padding:0 22px 0 8px;border-radius:var(--radius);border:1px solid var(--line);background:var(--raise);appearance:none;font-weight:500;
  background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 11px) 11px,calc(100% - 7px) 11px;background-size:4px 4px;background-repeat:no-repeat}
.ghost{display:flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--radius);border:1px solid var(--line);font-weight:500;white-space:nowrap}
.ghost:hover{background:var(--hover)}
.note{color:var(--dim);font-size:11px}

/* mapa */
.mapwrap{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--m-land)}
#map{position:absolute;inset:0;width:100%;height:100%;display:block}
#map text{font-family:var(--font);pointer-events:none;user-select:none}
.ov{position:absolute;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.legend{left:10px;bottom:10px;padding:7px 9px;min-width:150px;max-width:46%;max-height:60%;overflow:auto;font-size:11px}
.seg.viz button{padding:0 8px}.seg.viz em{align-self:center;padding:0 6px 0 4px;font:600 10px var(--mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.legend h6{margin:0 0 6px;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.legend div{display:flex;align-items:center;gap:8px;padding:1.5px 0;white-space:nowrap}
.legend u{width:22px;height:6px;border-radius:2px}.legend small{margin-left:auto;padding-left:14px;font:500 10.5px var(--mono);color:var(--dim)}
.zoomc{right:10px;top:10px;display:flex;flex-direction:column;padding:2px}
.scalebar{right:10px;bottom:10px;padding:4px 8px;font:500 10.5px var(--mono);color:var(--mut);display:flex;align-items:center;gap:8px}
.scalebar i{width:60px;height:5px;border:1px solid var(--mut);border-top:0}
.callout{padding:6px 10px;pointer-events:none;transform:translate(-50%,-135%);white-space:nowrap}
.callout em{display:block;font:600 9.5px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.callout b{font:600 12.5px var(--mono)}
.hint{left:50%;top:10px;transform:translateX(-50%);padding:5px 10px;color:var(--mut);white-space:normal;width:max-content;max-width:calc(100% - 96px);text-align:center;line-height:1.55}

/* tablas */
table{width:100%;border-collapse:collapse}
th{position:sticky;top:0;z-index:1;text-align:left;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding:0 10px;height:26px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:0 10px;height:26px;border-bottom:1px solid var(--line);white-space:nowrap}
.r{text-align:right}
tbody tr{cursor:pointer}tbody tr:hover td{background:var(--hover)}
tr.on td{background:var(--acc-soft)!important}tr.on td:first-child{box-shadow:inset 2px 0 0 var(--acc)}
.pill{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:9px;font:600 10px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.bar{display:inline-block;width:46px;height:5px;border-radius:3px;background:var(--hover);vertical-align:middle;margin-right:7px;overflow:hidden}.bar u{display:block;height:100%}

/* matriz */
.mx{border-collapse:separate;border-spacing:2px;width:auto;margin:14px}
.mx th{position:static;background:none;border:0;height:28px;text-align:center;padding:0 6px}
.mx th.rh{text-align:right;padding-right:10px;color:var(--mut);font-family:var(--font);font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:500}
.mx td{width:78px;height:34px;text-align:right;border:0;border-radius:calc(var(--radius) - 1px);font:500 11.5px var(--mono);background:var(--panel2)}
.mx td.s{background:none;color:var(--mut);font-weight:600}
.mx td.sel{outline:2px solid var(--fg);outline-offset:-1px}
.mx tbody tr:hover td{background:revert-layer}

/* procedimientos */
.prog{height:3px;background:var(--hover);flex:none}.prog u{display:block;height:100%;background:var(--acc);transition:width .3s}
.chk{width:15px;height:15px;border-radius:3px;border:1.5px solid var(--line2);display:inline-grid;place-items:center;vertical-align:middle}
.chk.on{background:var(--acc);border-color:var(--acc);color:var(--acc-fg)}
@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}

/* escenarios / gráficos / líneas */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);flex:1;min-height:0;gap:1px;background:var(--line)}
.split>div{background:var(--panel);min-height:0;display:flex;flex-direction:column}
.sc{display:flex;align-items:center;gap:9px;padding:8px 10px;margin:2px 6px;border-radius:var(--radius);cursor:pointer}
.sc:hover{background:var(--hover)}.sc.on{background:var(--acc-soft)}
.sc b{display:block;font-weight:600}.sc small{color:var(--mut);font-size:11px}
.sc u{width:8px;height:8px;border-radius:50%;flex:none}
.charts{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--line);flex:1;min-height:0}
.chart{background:var(--panel);padding:12px 14px 8px;display:flex;flex-direction:column;min-height:0;min-width:0}
.chart h5{margin:0;font-size:12.5px;font-weight:600}.chart h5 small{font-weight:400;color:var(--dim);margin-left:6px}
.chart svg{flex:1;min-height:0;width:100%;margin-top:6px}
.chart svg text{font:500 10px var(--mono);fill:var(--dim)}
.keys{display:flex;gap:12px;font-size:11px;color:var(--mut);flex-wrap:wrap}.keys u{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.route{padding:18px 20px 8px;overflow:auto}
.route svg text{font-family:var(--font)}

/* acoplable inferior */
.log{font:11.5px/1.5 var(--mono);padding:6px 0}
.log div{display:grid;grid-template-columns:70px 52px 1fr;gap:8px;padding:2px 12px}.log div:hover{background:var(--hover)}
.log span{color:var(--dim)}

/* Ada */
.ada{display:flex;flex-direction:column;min-height:0;background:var(--panel)}

/* estado */
.status{display:flex;align-items:center;gap:14px;padding:0 10px;background:var(--panel2);font-size:11px;color:var(--mut);white-space:nowrap;border-top:1px solid var(--line)}
.status span{display:flex;align-items:center;gap:5px}
.status u{width:6px;height:6px;border-radius:50%}

/* flotantes */
.pop{position:fixed;z-index:40;min-width:200px;padding:4px;background:var(--raise);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:var(--shadow)}
.pop button{display:flex;align-items:center;gap:8px;width:100%;height:26px;padding:0 8px;border-radius:calc(var(--radius) - 2px);text-align:left;white-space:nowrap}
.pop button:hover{background:var(--acc-soft);color:var(--sel-fg)}
.pop hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.pop button small{margin-left:auto;padding-left:16px;color:var(--dim);font:500 10px var(--mono)}
.veil{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);display:grid;place-items:start center;padding-top:12vh}
.pal{width:560px;background:var(--raise);border:1px solid var(--line2);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow);overflow:hidden}
.pal input{width:100%;height:42px;padding:0 14px;border:0;border-bottom:1px solid var(--line);background:transparent;font-size:14px;outline:0}
.pal .list{max-height:320px;overflow:auto;padding:4px}
.pal button{display:flex;align-items:center;gap:9px;width:100%;height:30px;padding:0 10px;border-radius:calc(var(--radius) - 1px);text-align:left}
.pal button.on,.pal button:hover{background:var(--acc-soft);color:var(--sel-fg)}
.pal button small{margin-left:auto;color:var(--dim);font-size:11px}
.modal{width:640px;background:var(--raise);border:1px solid var(--line2);border-radius:calc(var(--radius) + 2px);box-shadow:var(--shadow);margin-top:-4vh}
.modal header{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal header b{font-size:14px;font-weight:600;display:block}.modal header small{color:var(--mut)}
.modal .body{padding:14px;display:grid;gap:12px}
.modal footer{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line)}
.modal footer .btn{flex:none}
.f2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fld label{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}.fld select,.fld input{width:100%}
.cls{display:grid;grid-template-columns:34px 1fr 110px 26px;gap:6px;align-items:center}
.cls input[type=text]{height:26px;padding:0 8px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);min-width:0}
.cls input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:none}
.prev{display:flex;height:10px;border-radius:3px;overflow:hidden}
.toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);z-index:60;padding:8px 14px;border-radius:var(--radius);background:var(--fg);color:var(--panel);font-weight:500;box-shadow:var(--shadow)}
.sep{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none}
.pop em{display:block;padding:6px 8px 3px;font:600 9.5px var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pop button:disabled{opacity:.4;cursor:default}
.toolpal{position:absolute;left:12px;top:12px;flex-direction:column;background:var(--panel);box-shadow:var(--shadow);z-index:3}
.toolpal button{width:32px;height:32px;justify-content:center}

/* ============ A · Cinta: aplicación de escritorio clásica ============ */
:root{--radius:3px}
#app{grid-template-rows:38px 28px 82px minmax(0,1fr) 24px;gap:0}
.title{background:var(--fg);color:#fff;border:0}
.title .logo i{background:#fff;color:var(--fg)}
.title .file{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.75)}
.title .cmd{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6)}
.title kbd{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.title .adabtn{border-color:rgba(255,255,255,.3)}
.title .user{background:rgba(255,255,255,.16)}
.rtabs{display:flex;align-items:flex-end;padding:0 8px;background:var(--panel2);border-bottom:1px solid var(--line)}
.rtabs button{height:26px;padding:0 14px;font-weight:500;color:var(--mut);border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.rtabs button:hover{color:var(--fg)}
.rtabs button.on{background:var(--panel);color:var(--fg);font-weight:600;border-color:var(--line);box-shadow:inset 0 2px 0 var(--acc)}
.ribbon{display:flex;align-items:stretch;padding:4px 6px 0;background:var(--panel);border-bottom:1px solid var(--line2)}
.rg{display:flex;flex-direction:column;padding:0 8px;border-right:1px solid var(--line);flex:none}
.rscroll{display:flex;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden}.rscroll::-webkit-scrollbar{height:5px}.rscroll::-webkit-scrollbar-thumb{border:0;background:var(--line2)}
.rg.last{border:0}
.rg>div{flex:1;display:flex;align-items:center;gap:2px}
.rg>em{height:18px;line-height:18px;text-align:center;font-size:10.5px;font-style:normal;color:var(--dim)}
.rbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:60px;height:54px;padding:0 8px;border:1px solid transparent;border-radius:3px;font-size:11px;white-space:nowrap}
.rbtn:hover{background:var(--hover);border-color:var(--line2)}
.rbtn.on{background:var(--acc-soft);border-color:var(--acc);color:var(--sel-fg)}
.rbtn:disabled{opacity:.35;cursor:default}
.runbig{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;margin-left:8px;border-radius:3px;background:var(--acc);color:#fff;font-weight:600;white-space:nowrap}
.main{border-top:0}
.dock>.props{height:auto;flex:1;border-top:0}
.btn,.ghost,.scen{border-color:var(--line2);background:linear-gradient(#fff,#F4F5F7)}
.btn.pri{background:var(--acc)}


/* ---- específico de Macrosim ---- */
#app{grid-template-rows:38px 28px 82px minmax(0,1fr) 24px;gap:0}
.title{background:var(--q-navy);color:#fff;border:0}
.logo img{height:20px;width:auto;display:block}
.logo{font-weight:500;font-size:13.5px}.logo b{font-weight:700;color:var(--q-cyan)}
.title .file{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.78)}
.title .cmd{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.6)}
.title kbd{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.engine{font:500 10.5px var(--mono);letter-spacing:.06em;color:rgba(255,255,255,.5);margin-left:12px;white-space:nowrap}
.busy{display:flex;align-items:center;gap:6px;padding:0 10px;height:24px;border-radius:12px;background:var(--q-cyan);color:#fff;font-weight:600;white-space:nowrap}
.busy .spin,.spin{display:inline-flex}
.stale{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:11px;font-weight:600;color:var(--warn);background:color-mix(in srgb,var(--warn) 13%,transparent);white-space:nowrap;margin-right:8px}
.runbig:disabled,.tool:disabled{opacity:.45;cursor:default}
.tr .mono{font-size:11.5px}
.empty{padding:28px 18px;color:var(--mut);text-align:center;line-height:1.6}
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:var(--m-land)}
.welcome img{height:54px}.welcome h2{margin:6px 0 0;font-size:26px;font-weight:700;letter-spacing:-.02em}.welcome p{margin:0 0 10px;color:var(--mut);max-width:440px;font-size:13.5px}
.welcome div{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:0 12px}.welcome{min-width:0;overflow:hidden;padding:12px}.welcome .tool,.welcome .ghost{height:34px;padding:0 14px;font-size:13px}
.dock>.props{height:auto;flex:1;border-top:0}
textarea.json{display:block;width:calc(100% - 24px);margin:8px 12px;min-height:300px;resize:vertical;padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel2);font-size:11.5px;line-height:1.5;color:var(--fg);outline:0}
textarea.json:focus{border-color:var(--acc)}textarea.json.ed{border-color:var(--warn)}
.mx td{padding:0 8px;cursor:pointer}.mx td.s{cursor:default}
.kpis{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.kpi{flex:1;min-width:128px;padding:10px 14px;background:var(--panel)}
.kpi span{display:block;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.kpi b{font-size:18px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.charts2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.charts2 .chart svg{height:190px;flex:none}
.bars{display:grid;gap:3px;margin-top:8px}
.bars div{display:grid;grid-template-columns:96px 1fr 44px;gap:8px;align-items:center;cursor:pointer;padding:1px 4px;border-radius:3px}.bars div:hover{background:var(--hover)}
.bars i{height:8px;border-radius:2px;background:var(--hover);overflow:hidden}.bars u{display:block;height:100%}.bars b{text-align:right}
.stackbar{display:flex;height:30px;margin:14px;border-radius:var(--radius);overflow:hidden;gap:2px}
.stackbar u{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:11.5px;text-decoration:none;white-space:nowrap;overflow:hidden}
.raw{margin:0;padding:12px;font-size:11px;white-space:pre-wrap;color:var(--mut)}
.exrow{display:grid;grid-template-columns:18px minmax(150px,auto) 1fr auto;gap:10px;align-items:center;padding:5px 6px;border-radius:var(--radius);cursor:pointer}
.exrow:hover{background:var(--hover)}.exrow.dim{opacity:.5;cursor:default}
.exrow span{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.exrow small{font:500 10.5px var(--mono);color:var(--dim);white-space:nowrap}
.modal .body{gap:4px}
.rbtn.on svg{color:var(--q-cyan-600)}
.btn.pri,.tool.pri,.runbig,.seg button.on{background:var(--q-cyan);color:#fff}
.btn.pri:hover,.tool.pri:hover,.runbig:hover{background:var(--q-cyan-600);filter:none}
.vt.on{box-shadow:inset 0 2px 0 var(--q-cyan)}

canvas#map{position:absolute;inset:0;width:100%;height:100%;display:block}
.scalebar a{color:inherit}

/* ---- modelo de demanda ---- */
.split2{display:grid;grid-template-columns:250px minmax(0,1fr);flex:1;min-height:0;gap:1px;background:var(--line)}
.split2>*{background:var(--panel);min-height:0}
.dlist{display:flex;flex-direction:column}
.dform{padding-bottom:30px}
.dhead{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.dhead h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
.dform h4{margin:20px 16px 2px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:700}
.dform h4 small{font-weight:400;color:var(--dim);margin-left:6px}
.hint2{margin:2px 16px 8px;color:var(--mut);font-size:11.5px;line-height:1.6;max-width:900px}
.hint2 code,.dform code{font-family:var(--mono);font-size:11px;padding:1px 4px;border-radius:3px;background:var(--panel2);color:var(--sel-fg)}
.dgrid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:6px 12px;align-items:center;padding:4px 16px;max-width:980px}
.dgrid label{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmi{height:26px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raise);font-size:12px;width:100%;min-width:0}
.dmi:hover{border-color:var(--line2)}.dmi:focus{border-color:var(--acc);outline:0}
.rowf{display:flex;align-items:center;gap:6px}.rowf .pf{font:600 11px var(--mono);color:var(--dim);margin-left:6px}.rowf .dmi{flex:none}
.chips{display:flex;gap:4px;flex-wrap:wrap}
.chip{height:24px;padding:0 10px;border-radius:12px;border:1px solid var(--line2);font:600 11px var(--mono);color:var(--mut)}
.chip.on{background:var(--q-cyan);border-color:var(--q-cyan);color:#fff}
.lblc{display:flex;align-items:center;gap:6px;color:var(--mut);cursor:pointer}
table.mini{width:auto;margin:0 16px}table.mini th{position:static;background:none}table.mini td{border:0;height:30px;padding:0 6px}
tr.edit{cursor:default}tr.edit td{height:32px}tr.edit:hover td{background:none}
.hist{display:flex;align-items:flex-end;gap:2px;height:40px}
.hist span{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%}.hist u{flex:1;border-radius:1px 1px 0 0;min-height:1px}

/* ---------- edición de la red ---------- */
.vbar,.vbar.wrap{flex-wrap:wrap;height:auto;min-height:36px;padding:4px 8px;row-gap:4px}.vbar .seg{flex-wrap:wrap}.vbar>.sp{flex:1 0 4px}
.vtabs{overflow-x:auto;overflow-y:hidden}.vtabs::-webkit-scrollbar{height:4px}.vtabs::-webkit-scrollbar-thumb{border:0;background:var(--line2)}.vt{flex:none}
.vbar.wrap .seg button span{font-size:11.5px}.seg.mode button{height:26px;padding:0 10px;font-weight:600}.seg.mode button:disabled{opacity:.4;cursor:default}
.seg.mode button.on[data-a="insert"]{background:var(--ok)}
.rg.pn .rbtn{min-width:34px;width:34px;height:34px;padding:0}.rg.pn .rbtn span{display:none}
@media (max-width:1280px){.rbtn{min-width:50px;padding:0 5px;font-size:10.5px}.runbig{padding:0 11px;margin-left:2px}.rg{padding:0 5px}.engine{display:none}
  .vbar.wrap .lbl{display:none}.status span:last-child{display:none}
  .row{grid-template-columns:42% 1fr;padding:2px 9px;gap:6px}.sec{padding:7px 9px 4px}.pid{padding:9px 9px 7px}}
.insbar{display:flex;align-items:center;gap:10px;min-height:34px;padding:3px 10px;flex:none;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--q-cyan) 7%,var(--panel));white-space:nowrap;overflow-x:auto}
/* los rótulos sobre el mapa no interceptan los clics: debajo puede haber un nodo */
.scalebar,.legend,.hint{pointer-events:none}.scalebar a{pointer-events:auto}
.insbar{height:34px;flex-wrap:nowrap}.insbar>*{flex:none}.insbar>.sp{flex:1 0 8px}.insbar .chips{flex-wrap:nowrap}.insbar::-webkit-scrollbar{height:4px}.insbar::-webkit-scrollbar-thumb{border:0;background:var(--line2)}
.insbar>b{font-weight:700;color:var(--sel-fg);padding-right:4px}
.insbar label{display:flex;align-items:center;gap:5px;color:var(--mut)}
.insbar input:not([type=checkbox]),.insbar select{height:24px;padding:0 6px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--raise);font-size:11.5px}
.insbar input:focus,.insbar select:focus{border-color:var(--acc);outline:0}
.insbar .ck{color:var(--fg);cursor:pointer}
.insbar .chip{height:22px;padding:0 8px}
.insbar .tool,.insbar .ghost{height:24px}
.hint kbd,.guide kbd{font:600 10px var(--mono);padding:1px 4px;border:1px solid var(--line2);border-radius:3px;background:var(--panel2);color:var(--fg)}
.hint b{color:var(--fg)}
.guide{left:50%;top:50%;transform:translate(-50%,-50%);width:400px;padding:18px 20px;text-align:center}
.guide b{font-size:14px}.guide p{margin:8px 0 14px;color:var(--mut);line-height:1.55}
.guide div{display:flex;gap:8px;justify-content:center}.guide .tool,.guide .ghost{height:30px;padding:0 12px}
.row.top{align-items:start}.row.top label{padding-top:5px}
.row select{width:100%;height:22px;padding:0 4px;border-radius:calc(var(--radius) - 1px);border:1px solid var(--line);background:var(--raise);font-size:11.5px;min-width:0}
.row .chips{padding:2px 0}.row .chip{height:20px;padding:0 7px;font-size:10px}
.row .chk{cursor:pointer;justify-self:start}
.row textarea.pts{width:100%;padding:4px 6px;border:1px solid var(--line);border-radius:calc(var(--radius) - 1px);background:var(--raise);font-size:10.5px;line-height:1.45;resize:vertical;min-width:0;white-space:pre;color:inherit}
.row textarea.pts.ed{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--raise))}
.pnote{padding:2px 12px 6px;line-height:1.45}
.pbtn{display:flex;gap:6px;padding:4px 12px 6px;flex-wrap:wrap}.pbtn .ghost{height:24px}
.tgrid{display:grid;gap:2px;padding:6px 12px 4px;align-items:center}
.tgrid .h{font:600 10px var(--mono);color:var(--mut);text-align:center;overflow:hidden;text-overflow:ellipsis}
.tgrid .h.r{text-align:right;padding-right:4px}.tgrid .c{font-size:9.5px;color:var(--dim)}
.tgrid button{height:22px;border-radius:3px;font:700 11px var(--mono);border:1px solid transparent}
.tgrid button.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.tgrid button.no{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.tgrid button.u{border-style:dashed;border-color:var(--line2)}
.tgrid button:hover{border-color:currentColor;border-style:solid}
table.ltab{margin:4px 0 6px}table.ltab th{position:static;padding:0 6px;height:22px;font-size:9px}table.ltab td{padding:1px 6px;height:24px}
table.ltab tbody tr{cursor:default}table.ltab input{width:54px;height:20px;padding:0 4px;border:1px solid var(--line);border-radius:3px;font-size:11px;background:var(--raise)}
table.ltab input.ed{border-color:var(--warn)}table.ltab .chk{cursor:pointer}
.fld{display:grid;gap:4px;margin-bottom:8px}.fld>span{font-weight:600;font-size:11.5px;color:var(--mut)}
.fld input,.fld select{height:30px;padding:0 9px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--raise);min-width:0;width:100%}
.fld input:focus,.fld select:focus{border-color:var(--acc);outline:0}
.geo{display:grid;gap:2px;max-height:150px;overflow:auto;margin:-2px 0 8px;border:1px solid var(--line);border-radius:var(--radius);padding:3px}
.geo button{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:3px;text-align:left;color:var(--mut)}
.geo button:hover{background:var(--hover);color:var(--fg)}.geo button.on{background:var(--acc-soft);color:var(--sel-fg);font-weight:600}
.geo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mtabs{display:flex;gap:2px;padding:6px 14px 0;border-bottom:1px solid var(--line)}
.mtabs button{height:30px;padding:0 12px;font-weight:500;color:var(--mut);border-bottom:2px solid transparent}
.mtabs button.on{color:var(--fg);font-weight:600;border-bottom-color:var(--acc)}
td.ed{padding:0 2px}.cellin{width:100%;min-width:60px;height:22px;padding:0 6px;border:1.5px solid var(--acc);border-radius:3px;background:var(--raise);text-align:right;font-size:11.5px;outline:0}
.frow{padding:3px 12px 5px}.frow label{display:block;color:var(--mut);margin-bottom:3px}
textarea.frm{display:block;width:100%;padding:5px 7px;border:1px solid var(--line);border-radius:3px;background:var(--raise);font-size:11.5px;line-height:1.5;resize:vertical;color:inherit;white-space:pre-wrap;word-break:break-all}
textarea.frm.ed{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,var(--raise))}textarea.frm:focus{border-color:var(--acc);outline:0}
.fnames{display:flex;flex-wrap:wrap;gap:3px;padding:0 12px 4px}.fnames button{height:19px;padding:0 6px;border-radius:3px;border:1px solid var(--line);font:500 10px var(--mono);color:var(--mut);background:var(--panel2)}
.fnames button:hover{border-color:var(--acc);color:var(--sel-fg)}
table.ptab{table-layout:fixed;width:calc(100% - 12px);margin-left:6px}table.ptab th,table.ptab td{padding:1px 3px;overflow:hidden}table.ptab th:last-child{width:22px}
table.ptab input,table.ptab select{width:100% !important;height:20px;padding:0 3px;border:1px solid var(--line);border-radius:3px;background:var(--raise);font-size:11px;min-width:0}
table.ptab th:nth-child(3):not(:last-child){width:16%}
.wstep{display:flex;gap:10px;align-items:center;margin:12px 0 8px}.wstep:first-child{margin-top:0}.wstep i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--q-cyan);color:#fff;font:700 12px var(--font);font-style:normal}
.wstep b{display:block;font-size:13px}.wstep small{color:var(--mut)}
.wlines{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.wlines button{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--radius);color:var(--mut)}
.wlines button.on{border-color:var(--q-cyan);background:var(--acc-soft);color:var(--sel-fg)}.wlines button small{color:var(--dim);font:500 10px var(--mono)}.wlines button span{font:600 10.5px var(--mono)}
.wgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.wgrid.four{grid-template-columns:1.4fr 1fr 1fr 1fr}
.crumb{color:var(--fg)}.crumb b{color:var(--sel-fg)}
table.lst th.can{color:var(--sel-fg)}table.lst th.can svg{margin-right:4px;vertical-align:-1px}
table.lst td.can{cursor:text;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);}table.lst td.can:hover{box-shadow:inset 0 0 0 1.5px var(--q-cyan)}
table.lst td.fix{color:var(--mut);background:var(--panel2)}table.lst tr.on td.fix{background:var(--acc-soft);color:var(--fg)}table.lst tr.on td.can{background:#fff}
.lgd{display:flex;align-items:center;gap:4px;margin:0 8px 4px 0;white-space:nowrap;flex:none}.lgd svg{vertical-align:-1px}
.row.ro{color:var(--mut)}.row.ro .rov{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;height:22px;line-height:22px;background:var(--panel2);border-radius:3px;color:var(--mut)}.row.ro{grid-template-columns:44% 1fr 12px}.row.ro svg{color:var(--dim)}
.plegend{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10.5px;color:var(--dim)}.plegend .box{width:16px;height:10px;border:1px solid var(--line2);border-radius:2px;background:var(--raise)}.plegend .lk{margin-left:8px;display:flex}
.dirs{display:flex;gap:4px;padding:6px 12px 2px}.dirs button{flex:1;height:26px;padding:0 6px;border:1px solid var(--line2);border-radius:var(--radius);font:600 11px var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dirs button:hover{border-color:var(--q-cyan)}.dirs button.on{background:var(--q-cyan);border-color:var(--q-cyan);color:#fff}.dirs button.off{border-style:dashed;opacity:.6;cursor:default}
.pnote b{color:var(--fg)}
.shpas{display:flex;align-items:center;gap:10px}.shpgrid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:6px 12px;align-items:start}.shpgrid>label{padding-top:6px;color:var(--mut)}
.shpgrid select,.shpgrid input:not([type=checkbox]){height:28px;padding:0 8px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--raise);min-width:0;width:240px}.shpgrid small{display:block;color:var(--dim);font-size:10.5px;margin-top:2px}.shpgrid .ck{display:flex;gap:6px;align-items:center;padding-top:6px}
table.grid th{position:static}table.grid td{height:30px;padding:2px 8px}table.grid tbody tr{cursor:default}table.grid tbody tr:hover td{background:none}
table.grid input:not([type=checkbox]),table.grid select{width:100%;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:3px;background:var(--raise);min-width:0}
table.grid input:focus,table.grid select:focus{border-color:var(--acc);outline:0}
.verdict{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);margin-bottom:10px}
.verdict.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}.verdict.bad{background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad)}
.verdict span{color:var(--mut)}
.ph .ib{margin-left:2px}

/* ---------- acceso y proyectos ---------- */
#app.page{grid-template-rows:minmax(0,1fr)}#app.page.two{grid-template-rows:40px minmax(0,1fr)}
.tbtn{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;margin-left:10px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.9);font-weight:500;white-space:nowrap}.tbtn:hover{background:rgba(255,255,255,.1)}
button.file{cursor:pointer;background:none}button.file:hover{border-color:rgba(255,255,255,.5)}
.title .user{display:flex;align-items:center;gap:7px;margin-left:10px;color:rgba(255,255,255,.9);white-space:nowrap;width:auto;height:auto;background:none;border-radius:0;font:500 12px var(--font)}
.title .user i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--q-cyan);color:#fff;font:700 11px var(--font);font-style:normal}.title .user .ib{color:rgba(255,255,255,.7)}.title .user .ib:hover{background:rgba(255,255,255,.12);color:#fff}
.title .user span{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.loginpage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:linear-gradient(160deg,var(--q-navy) 0%,#0B2447 60%,#0E3A63 100%);padding:20px;min-height:0;overflow:auto}
.logincard{width:min(380px,100%);background:var(--panel);border-radius:10px;padding:26px 26px 22px;box-shadow:0 24px 60px rgba(0,0,0,.35);display:grid;gap:4px}
.lhead .logo{color:var(--q-navy);font-size:17px;margin-bottom:12px;gap:10px}.lhead .logo img{height:34px;width:auto}.title .logo img{height:22px;width:auto}.lhead .logo b{color:var(--q-cyan)}
.logincard h1{margin:0;font-size:21px;letter-spacing:-.02em}.logincard p{margin:0 0 12px;color:var(--mut)}
.logincard .fld input{height:36px;font-size:13px}.lgo{height:38px;font-size:13.5px;margin-top:6px;flex:none}
.lerr{padding:8px 10px;border-radius:var(--radius);background:color-mix(in srgb,var(--bad) 10%,transparent);color:var(--bad);font-weight:500}
.llinks{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px}.llinks a{color:var(--q-cyan-700)}
.lfoot{color:rgba(255,255,255,.55);font:500 11px var(--mono);letter-spacing:.04em}
.home{overflow:auto;background:var(--bg);padding:26px clamp(16px,4vw,48px) 40px;min-height:0}
.hhead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}.hhead h2{margin:0;font-size:24px;letter-spacing:-.02em}.hhead p{margin:3px 0 0;color:var(--mut)}
.hactions{display:flex;gap:8px;flex-wrap:wrap}.hactions .tool,.hactions .ghost{height:32px;padding:0 12px;font-size:12.5px}
.hrec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin-bottom:14px;border:1px dashed var(--line2);border-radius:var(--radius);background:var(--panel);color:var(--mut)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:box-shadow .12s,border-color .12s}.pcard:hover{border-color:var(--q-cyan);box-shadow:0 8px 22px rgba(7,22,46,.12)}
.pthumb{height:84px;display:grid;place-items:center;color:var(--q-cyan);background:linear-gradient(135deg,#EAF7FD,#F4F6F8);border-bottom:1px solid var(--line)}
.pbody{display:grid;gap:3px;padding:10px 12px 12px}.pbody b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pbody span{color:var(--mut)}.pbody small{color:var(--dim);font-size:10.5px}
.pacts{position:absolute;top:6px;right:6px;display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1px;opacity:0}.pcard:hover .pacts,.pacts:focus-within{opacity:1}
.hempty{display:grid;justify-items:center;gap:8px;padding:56px 20px;border:1px dashed var(--line2);border-radius:10px;background:var(--panel);text-align:center;color:var(--q-cyan)}.hempty b{color:var(--fg);font-size:15px}.hempty p{margin:0 0 8px;color:var(--mut);max-width:460px;line-height:1.6}
.vizsel{display:flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 9px;border:1px solid var(--line2);border-radius:var(--radius);background:linear-gradient(#fff,#F4F5F7);color:var(--mut);white-space:nowrap}
.vizsel span{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}.vizsel select{height:24px;border:0;background:none;font-weight:600;color:var(--fg);padding:0 2px;cursor:pointer;outline:0}

/* ---------- escenarios ---------- */
.scbar{display:flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;flex:none;border-bottom:1px solid var(--line);background:var(--panel2);white-space:nowrap;overflow:hidden}
.scbar.scen{background:color-mix(in srgb,var(--q-cyan) 10%,var(--panel));box-shadow:inset 3px 0 0 var(--q-cyan)}
.scbar.mod{background:color-mix(in srgb,var(--bad) 8%,var(--panel));box-shadow:inset 3px 0 0 var(--bad)}
.scbar select{height:24px;padding:0 6px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--raise);font-weight:600;max-width:240px}
.scbar .t{color:var(--mut);overflow:hidden;text-overflow:ellipsis}.scbar .tool,.scbar .ghost{height:24px;flex:none}
.scm{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(460px,1fr));grid-auto-rows:minmax(190px,auto);gap:10px;padding:10px;background:var(--bg);align-content:start}
.scbox{display:flex;flex-direction:column;min-height:0;max-height:330px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.scbox.wide{grid-column:1/-1;max-height:none}.scbox .ph small{color:var(--dim);font:500 10px var(--mono)}.scbox .ph .ghost{height:22px}
.scbox .scroll{flex:1;min-height:0;overflow:auto}.scbox td{height:30px}.scbox .hint2{margin:8px 12px}
.scbox .acts{white-space:nowrap}.scbox .acts>*{display:inline-flex;vertical-align:middle;margin-left:2px}.scbox .acts .ghost{height:22px;padding:0 7px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line2)}.dot.on{background:var(--q-cyan);border-color:var(--q-cyan);box-shadow:0 0 0 3px var(--acc-soft)}
.mchip{display:inline-block;margin-right:4px;padding:1px 7px;border-radius:9px;background:var(--acc-soft);color:var(--sel-fg);font-size:11px;font-weight:500}
.lk{color:var(--dim);vertical-align:-1px}
/* ventana de procedimiento */
.procm .body{display:block;padding:0;max-height:74vh;overflow:auto}.procm .fmain{padding:12px 14px 6px}.procm .fmain .hint2{margin:0 0 10px}
.procm .fside .props{height:auto;border-top:1px solid var(--line)}.procm .fside .props>.ph,.procm .fside .pid{display:none}.procm .fside .props .scroll{overflow:visible}.procm .fside.solo .props{border-top:0}
table.ftab{border:1px solid var(--line);border-radius:var(--radius)}table.ftab th{position:static}table.ftab td{height:auto;padding:6px 8px;vertical-align:top;white-space:normal}table.ftab tbody tr{cursor:default}table.ftab tbody tr:hover td{background:none}
table.ftab td small{display:block;color:var(--mut);font-size:10.5px}table.ftab tfoot td{font-weight:600;background:var(--panel2);height:28px;vertical-align:middle}
table.ftab select{height:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raise);padding:0 4px;max-width:100%}
.rate{display:flex;align-items:center;gap:4px;margin-bottom:4px}.rate input{width:64px;height:24px;padding:0 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--raise)}.rate select{flex:1;min-width:0;height:24px}.rate span{color:var(--mut)}
.tot{color:var(--sel-fg)!important;font-family:var(--mono)}.pars{display:flex;gap:6px}.pars label{display:flex;align-items:center;gap:4px;font:500 11px var(--mono);color:var(--mut)}
.fnames span{height:19px;padding:0 6px;border-radius:3px;border:1px solid var(--line);font:500 10px/18px var(--mono);color:var(--mut);background:var(--panel2)}.procm .fnames{padding:10px 0 4px}
table.ftab th:nth-child(2),table.ftab th:nth-child(3){min-width:215px}.procm .fmain{overflow-x:auto}table.ftab .dmi{font-size:11.5px}

/* ---------- agente ---------- */
.tbtn.ag{border-color:rgba(0,174,239,.6);color:#fff}
.chat{flex:1;min-height:0;display:flex;flex-direction:column}
.chat .msgs{flex:1;min-height:0;overflow:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.msg{max-width:min(860px,88%);padding:7px 11px;border-radius:10px;line-height:1.55;font-size:12.5px;white-space:normal;overflow-wrap:anywhere}
.msg.q{align-self:flex-end;background:var(--q-cyan);color:#fff;border-bottom-right-radius:3px}
.msg.a{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);border-bottom-left-radius:3px}
.msg.err{align-self:flex-start;background:color-mix(in srgb,var(--bad) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--bad) 40%,var(--line));color:var(--bad)}
.msg code{font-family:var(--mono);font-size:11px;padding:1px 4px;border-radius:3px;background:var(--raise);border:1px solid var(--line)}
table.ctab{width:auto;margin:6px 0;border:1px solid var(--line);background:var(--raise)}table.ctab th{position:static}table.ctab td{height:24px;font-family:var(--mono);font-size:11px}table.ctab tr{cursor:default}
.step{align-self:flex-start;display:flex;align-items:center;gap:6px;max-width:88%;padding:2px 9px;border-radius:10px;border:1px solid var(--line);font-size:11px;color:var(--mut);background:var(--raise);white-space:nowrap;overflow:hidden}
.step b{color:var(--fg);font-weight:600}.step span{overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:10.5px}.step.ok svg{color:var(--ok)}.step.bad svg{color:var(--bad)}.step.run svg{animation:spin 1s linear infinite;color:var(--acc)}
.hello{display:flex;gap:10px;align-items:flex-start;padding:6px 2px;color:var(--mut);max-width:760px}.hello svg{flex:none}.hello em{display:block;font-style:normal;color:var(--sel-fg);font-size:11.5px}.hello b{color:var(--fg)}.hello p{margin:2px 0 0;line-height:1.55}
.presets{display:flex;flex-wrap:wrap;gap:5px;padding:6px 12px 0;flex:none}.presets button{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;border:1px solid var(--line2);background:var(--raise);font-weight:500;color:var(--sel-fg);white-space:nowrap}
.presets button:hover{background:var(--acc-soft);border-color:var(--acc)}.presets button:disabled{opacity:.5}
.ask{display:flex;gap:6px;padding:8px 12px 10px;flex:none}.ask input{flex:1;min-width:0;height:30px;padding:0 10px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--raise);font-size:12.5px}.ask input:focus{border-color:var(--acc);outline:0}.ask .tool{height:30px;padding:0 14px}
.scbox td.wrap{white-space:normal;line-height:1.5;padding-top:4px;padding-bottom:4px;overflow-wrap:anywhere}.mchip{margin:1px 4px 1px 0}
.chat .msgs>*{flex:none}
.arow{display:flex;gap:7px;align-items:flex-start;align-self:flex-start;max-width:92%}.arow .mascot{flex:none;margin-top:3px}.arow .msg{max-width:none}
.tbtn.ag{background:rgba(124,195,243,.14);border-color:rgba(124,195,243,.55);font-weight:600}
.legend .ramp{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:2px 0 1px}.legend .ramp u{flex:1;width:auto;height:auto;border-radius:0;margin:0}.legend .rampl{display:flex;justify-content:space-between;font-size:9.5px;color:var(--dim);margin-bottom:5px}
.scbox{resize:vertical}.scm{overflow:auto}.procm .fmain{overflow:auto}
#map{cursor:grab;touch-action:none}.gripping #map,#map:active{cursor:grabbing}
.gl,.gr{width:10px}.gb{height:10px}.gl::after,.gr::after{height:44px;margin-top:-22px}.gb::after{width:44px;margin-left:-22px}

/* agente: versión sobria */
.chat .msgs{padding:12px 16px;gap:8px}
.msg{padding:0;border-radius:0;font-size:12.5px}
.msg.q{align-self:flex-end;background:var(--panel2);color:var(--fg);padding:5px 10px;border-radius:8px;border:0}
.msg.a{background:none;border:0;padding:0}
.msg.err{padding:5px 10px;border-radius:8px}
.arow{gap:8px;max-width:min(900px,94%)}.arow .mascot{margin-top:1px;opacity:.9}
.step{border:0;background:none;padding:0 0 0 26px;font-size:10.5px;color:var(--dim);gap:5px}.step b{color:var(--mut);font-weight:500}.step span{font-size:10px;opacity:.8}
.step.ok svg{color:var(--dim)}
.hello{align-items:center;padding:2px 0;gap:9px}.hello b{font-size:13px}.hello em{color:var(--mut);font-size:11.5px}
.presets{padding:0 16px 6px;gap:4px}.presets button{height:22px;padding:0 9px;border:1px solid var(--line);background:none;color:var(--mut);font-weight:400;font-size:11.5px}
.presets button:hover{color:var(--fg);background:var(--hover);border-color:var(--line2)}
.ask{margin:0 12px 10px;padding:0 4px 0 2px;gap:2px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--raise)}.ask:focus-within{border-color:var(--line2)}
.ask input{border:0;background:none;height:32px;font-size:12.5px}.ask input:focus{outline:0;border:0}
.ask .send{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:#fff;flex:none}.ask .send:disabled{opacity:.3}.ask .ib{flex:none}
.tbtn.ag{background:none;border-color:rgba(255,255,255,.22);font-weight:500}

/* proyectos: árbol proyecto › escenarios */
.ptree{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pth,.prow,.pscen{display:grid;grid-template-columns:minmax(220px,1.2fr) minmax(200px,2fr) 190px 96px;align-items:center;gap:12px;padding:0 14px}
.pth{height:30px;background:var(--panel2);border-bottom:1px solid var(--line);font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.ptree .pcard{border:0;border-radius:0;border-bottom:1px solid var(--line);box-shadow:none;cursor:default;overflow:visible}.ptree .pcard:last-child{border-bottom:0}.ptree .pcard:hover{box-shadow:none}
.prow{height:44px;cursor:pointer;grid-template-columns:20px minmax(196px,1.2fr) minmax(200px,2fr) 190px 96px;color:var(--q-cyan)}.prow:hover,.pscen:hover{background:var(--hover)}
.prow .pbody{padding:0;display:block;color:var(--fg)}.prow .pbody b{font-size:13.5px}.prow .pc,.pscen .pc{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prow small,.pscen small{color:var(--dim);font-size:10.5px}
.ptree .pacts{position:static;opacity:1;border:0;background:none;justify-content:flex-end}
.pscen{height:32px;cursor:pointer;grid-template-columns:20px 14px minmax(176px,1.2fr) minmax(200px,2fr) 190px 96px;color:var(--mut)}.pscen b{font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pscen i{justify-self:end;width:10px;height:32px;border-left:1.5px solid var(--line2);border-bottom:1.5px solid var(--line2);transform:translateY(-50%);border-bottom-left-radius:5px}
.pscen .pc u{text-decoration:none;display:inline-block;margin-right:4px;padding:0 7px;border-radius:9px;background:var(--acc-soft);color:var(--sel-fg);font-size:11px}
@media (max-width:900px){.pth span:nth-child(3),.prow small,.pscen small{display:none}.pth,.prow,.pscen{grid-template-columns:20px minmax(140px,1fr) minmax(120px,1.4fr) 96px}.pth{grid-template-columns:minmax(160px,1fr) minmax(120px,1.4fr) 96px}.pscen{grid-template-columns:20px 14px minmax(120px,1fr) minmax(120px,1.4fr) 96px}}

/* proyectos: una fila por proyecto; sus escenarios se despliegan a demanda */
.pfind{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;margin-bottom:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--dim)}.pfind input{flex:1;min-width:0;height:30px;border:0;background:none;font-size:13px;color:var(--fg)}.pfind input:focus{outline:0}.pfind:focus-within{border-color:var(--q-cyan)}
.ptree{max-height:calc(100vh - 260px);overflow:auto}.pth{position:sticky;top:0;z-index:1}
.pth{grid-template-columns:minmax(200px,1.3fr) minmax(200px,1.6fr) 150px 150px 96px}
.prow{grid-template-columns:20px minmax(168px,1.3fr) minmax(200px,1.6fr) 150px 150px 96px;height:40px}
.pexp{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:12px;color:var(--mut);font-size:11.5px;white-space:nowrap;justify-self:start;background:var(--panel)}.pexp:hover:not(:disabled){border-color:var(--q-cyan);color:var(--sel-fg)}.pexp.on{background:var(--acc-soft);border-color:transparent;color:var(--sel-fg)}.pexp:disabled{border-color:transparent;color:var(--dim);cursor:default}
.pscens{display:flex;flex-wrap:wrap;gap:6px;padding:2px 14px 10px 46px}
.pscens .pscen{display:inline-flex;grid-template-columns:none;align-items:center;gap:7px;height:28px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--mut)}.pscens .pscen:hover{border-color:var(--q-cyan);background:var(--panel)}.pscens .pscen b{font-weight:600}.pscens .pscen span{font-size:11px;color:var(--dim)}
@media (max-width:900px){.pth span:nth-child(4),.prow small{display:none}.pth{grid-template-columns:minmax(140px,1fr) minmax(120px,1.2fr) 130px 96px}.prow{grid-template-columns:20px minmax(110px,1fr) minmax(120px,1.2fr) 130px 96px}}