/* ZumorFlow - hoja de estilos completa (extraida del <style> del monolito) */

/* ── PALETA POR TOKENS ──
   Toda la interfaz se pinta desde aqui. Los modos monocromos (al final del
   archivo) solo redefinen estos tokens: no repiten ni una sola regla.
   OJO 1: --g3/--g4/--dim/--glow se declaran ENTEROS en cada modo, no derivados
   de --gRGB. Un token que referencia a otro se sustituye en el elemento donde se
   DECLARA (aqui, :root=html) y despues solo hereda el resultado: redefinir
   --gRGB en body llegaba tarde y esos tres se quedaban verdes. Verificado.
   Escribir `rgba(var(--gRGB),X)` DENTRO de una regla normal si funciona, porque
   ahi la sustitucion ocurre en el elemento que la usa.
   OJO 2: el LIENZO no puede depender de este archivo. El CSS no viaja en
   cloneNode + XMLSerializer, por eso las formas se pintan desde JS (js/02_color.js). */
:root{
  /* tinta */
  --gRGB:0,255,65;
  --g:#00FF41;--g2:#00cc33;
  --g3:rgba(0,255,65,0.12);--g4:rgba(0,255,65,0.06);--dim:rgba(0,255,65,0.45);
  --glow:0 0 8px #00FF41,0 0 2px #00FF41;
  /* papel y superficies elevadas (pickers, inputs) */
  --papel:#000;--surf:#0a0a0a;--surf2:#111;
  /* acento: capa activa / seleccionada */
  --acc:#C2F0C2;--accRGB:194,240,194;
  /* estados semanticos: siguen en color en TODOS los modos, a proposito.
     Un error o una capa bloqueada son informacion, no decoracion. */
  --err:#ff4141;--err2:#ff6666;--errRGB:255,80,80;
  --warn:#ffcc00;--warnRGB:255,204,0;
  /* filtro para un icono SVG que cae ENCIMA de la tinta (boton activo) */
  --onInk:brightness(0);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;padding:0;overflow:hidden;touch-action:none;overscroll-behavior:none;display:flex;flex-direction:column}
body{font-family:'Share Tech Mono','Courier New',monospace;background:var(--papel);color:var(--g)}
#topbar{display:flex;flex-direction:row;align-items:stretch;padding:6px 10px;gap:0;background:var(--papel);border-bottom:1px solid var(--g2);flex-shrink:0;width:100%}
#topbar-brand{width:70px;display:flex;align-items:center;justify-content:center;align-self:stretch;flex-shrink:0;border-right:1px solid var(--g2);padding:5px 10px}
#topbar-brand svg{height:100%;width:auto;display:block}
#topbar-rows{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0;padding-left:10px}
.topbar-row{display:flex;flex-wrap:nowrap;gap:5px;align-items:stretch;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.topbar-row::-webkit-scrollbar{display:none}
.brand{font-size:13px;font-weight:400;color:var(--g);margin-right:2px;display:flex;align-items:center;gap:5px;text-shadow:var(--glow);letter-spacing:.1em}
.tbtn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 7px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;font-size:10px;min-width:42px;transition:all .1s;font-family:inherit;letter-spacing:.05em}
.tbtn-lbl{line-height:1.2}
.kh{position:absolute;bottom:2px;right:3px;font-size:8px;opacity:.5;line-height:1;pointer-events:none}
#lg-ov{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:200;display:none;align-items:center;justify-content:center}
#lg-ov.vis{display:flex}
#lg-box{background:var(--papel);border:1px solid var(--g);box-shadow:var(--glow);width:min(1100px,96vw);max-height:92vh;overflow:hidden;display:flex;flex-direction:column}
.lg-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 12px;border-bottom:1px solid var(--g2);flex-shrink:0}
.lg-body{overflow-y:auto;padding:16px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 24px}
.lg-col{}
.lg-sec{margin-bottom:18px}
.lg-sec-t{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--g);opacity:.6;font-weight:700;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--g2)}
.lg-row{display:flex;align-items:center;gap:9px;padding:5px 2px;border-bottom:1px solid rgba(var(--gRGB),0.1)}
.lg-row:last-child{border-bottom:none}
.lg-k{min-width:22px;height:22px;border:1px solid var(--g);border-radius:2px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--g);font-family:inherit;background:var(--papel);flex-shrink:0;padding:0 4px;text-shadow:var(--glow)}
.lg-ico{width:50px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.lg-txt strong{font-size:11px;font-weight:400;color:var(--g);display:block;line-height:1.3}
.lg-txt span{font-size:10px;color:var(--dim);line-height:1.4}
.lg-kbd{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;align-items:center}
.lg-kc{background:var(--papel);border:1px solid var(--g);border-radius:2px;font-size:9.5px;font-family:inherit;padding:2px 7px;color:var(--g);white-space:nowrap;text-align:center;text-shadow:var(--glow)}
.lg-kd{font-size:10.5px;color:var(--dim)}
.lg-tip{font-size:10.5px;color:var(--dim);line-height:1.6;padding:2px 0;border-bottom:1px solid rgba(var(--gRGB),0.08)}
.lg-note{display:block;font-size:9px;opacity:.5;font-style:italic;margin-top:2px;line-height:1.3}
.lg-tip:last-child{border-bottom:none}
.tbtn.on{background:var(--g);color:var(--papel);border-color:var(--g);font-weight:700}
@media(hover:hover){.tbtn:hover{background:var(--g3);color:var(--g);text-shadow:var(--glow);box-shadow:var(--glow)}}
.tbtn i{font-size:15px}
.vsep{width:1px;height:26px;background:var(--g2);margin:0 1px;flex-shrink:0;opacity:.5;align-self:center}
.acts{margin-left:auto;display:flex;gap:5px;align-items:center}
.abtn{display:flex;align-items:center;gap:4px;padding:5px 9px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;font-size:11px;white-space:nowrap;font-family:inherit;transition:all .15s ease}
.abtn.on{background:var(--g3)!important;color:var(--g)!important;border-color:var(--g)!important;text-shadow:var(--glow)!important}
.abtn.save,.abtn.load,.abtn.exp{border-color:var(--g);color:var(--g)}
@media(hover:hover){.abtn:hover{background:var(--g3);color:var(--g);text-shadow:var(--glow)}.abtn.save:hover,.abtn.load:hover,.abtn.exp:hover{background:var(--g3);box-shadow:var(--glow)}}
#wrap{display:flex;flex:1 1 auto;min-height:0;overflow:hidden;position:relative}
#sidebar{width:80px;background:var(--papel);border-right:1px solid var(--g2);display:flex;flex-direction:column;align-items:center;padding:0 5px 6px;gap:2px;overflow-y:auto;flex-shrink:0}
.sb-hdr{font-size:10.5px;font-weight:700;color:var(--g);text-transform:uppercase;letter-spacing:.1em;width:100%;text-align:center;padding:7px 0 3px;border-top:1px solid rgba(var(--gRGB),0.2);margin-top:4px;opacity:.7}
.sb-hdr.first{border-top:none;margin-top:0;padding-top:2px}
.sb-sub{font-size:8px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;width:100%;text-align:center;padding:4px 0 2px}
.sbtn{width:100%;height:26px;border:1px solid var(--g2);border-radius:3px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:2px;flex-shrink:0;transition:all .1s}
.sbtn:hover,.sbtn.on{background:var(--g);border-color:var(--g)}
.sbtn.on svg,.sbtn:hover svg{filter:var(--onInk)}
.shbtn{width:100%;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--g2);border-radius:3px;background:transparent;cursor:pointer;transition:all .1s;margin-bottom:2px}
.shbtn:hover,.shbtn.on{background:var(--g);border-color:var(--g)}
.shbtn:hover svg,.shbtn.on svg{stroke:var(--papel)}
.shbtn svg{stroke:var(--dim);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;padding:2px}
.csw{width:21px;height:21px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .12s}
.csw:hover{transform:scale(1.15)}
.csw.on{border-color:var(--g)!important;transform:scale(1.1);box-shadow:0 0 6px var(--g)}
.csw.light-sw{border-color:rgba(var(--gRGB),0.3)}
.csw-add{width:21px;height:21px;border-radius:50%;cursor:pointer;border:1.5px dashed var(--g2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim);transition:all .12s;line-height:1}
.csw-add:hover{border-color:var(--g);color:var(--g);transform:scale(1.1)}
#cv{flex:1 1 auto;min-height:0;position:relative;overflow:hidden;background:var(--papel);user-select:none}
#cv.grab,#cv.grab *{cursor:grab!important}
#cv.grabbing,#cv.grabbing *{cursor:grabbing!important}
#svg{width:100%;height:100%;position:relative;z-index:1}
.nd.sel .ns{stroke-width:2}
.nd.recall-hidden .nl-fo>div{opacity:0!important;transition:none}
.nd.recall-hover .nl-fo>div{opacity:0.6!important;filter:blur(4px);transition:opacity .25s,filter .25s}
@keyframes recall-unblur{0%{filter:blur(4px);opacity:0.6}100%{filter:blur(0.8px);opacity:0.88}}
.nd.recall-hover.recall-clear .nl-fo>div{animation:recall-unblur 6s linear forwards!important;transition:none!important}
.nd.recall-hidden{cursor:pointer!important}
.nd.recall-hidden .ns{stroke-dasharray:5 3!important;opacity:0.6}
.nl{pointer-events:none;font-size:13px;font-weight:400}
.ep{fill:none}
.esel{fill:none;stroke:var(--g);stroke-width:6;opacity:0;pointer-events:none;stroke-linecap:round}
.eha{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.el-txt{font-family:'Share Tech Mono','Courier New',monospace;font-weight:400;pointer-events:none;dominant-baseline:central;text-anchor:middle;fill:var(--g)}
.grp-shape{stroke-width:1.5;cursor:move}
.grp-shape.sel{stroke-width:2}
.grp-lbl{font-size:10px;font-weight:700;user-select:none;font-family:'Share Tech Mono','Courier New',monospace;cursor:text;letter-spacing:.08em}
.grp-dot{stroke-width:1.5;transition:r .15s}
.eclr{width:100%;height:26px;border:1px solid var(--g2);border-radius:3px;padding:1px;cursor:pointer;background:transparent;box-sizing:border-box;margin-bottom:2px}
#ed{position:fixed;display:none;background:transparent;border:none;box-shadow:none;color:var(--g);font-size:13px;font-family:'Share Tech Mono','Courier New',monospace;padding:4px 8px;text-align:center;outline:none;z-index:999;resize:none;overflow:hidden;box-sizing:border-box;line-height:1.3;vertical-align:top;caret-color:var(--g)}
#sb{padding:4px 12px;background:var(--papel);border-top:1px solid var(--g2);font-size:11px;color:var(--dim);flex-shrink:0;font-family:inherit}
#hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;opacity:.35;z-index:2}
#hint svg{display:block;margin:0 auto 8px;width:80px;height:93px}
#hint p{font-size:12px;color:var(--g)}
#toast{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:3px;font-size:12px;font-family:inherit;opacity:0;transition:opacity .3s;pointer-events:none;z-index:100;white-space:nowrap;border:1px solid var(--g)}
#toast.show{opacity:1}
#toast.ok{background:var(--papel);color:var(--g);box-shadow:var(--glow)}
#toast.err{background:var(--papel);color:var(--err);border-color:var(--err);box-shadow:0 0 8px var(--err)}
#toast.warn{background:var(--papel);color:var(--warn);border-color:var(--warn)}
#tabbar{display:flex;align-items:center;background:var(--papel);border-top:1px solid var(--g2);padding:4px 8px 0 81px;flex-shrink:0;height:34px;gap:2px;overflow-x:auto;overflow-y:hidden}
#tabbar-tabs{display:flex;gap:2px;align-items:flex-end}
.tab{display:flex;align-items:center;gap:4px;padding:0 10px;height:26px;border:1px solid var(--g2);border-bottom:none;border-radius:3px 3px 0 0;background:var(--papel);color:var(--dim);cursor:pointer;font-size:11px;white-space:nowrap;user-select:none;flex-shrink:0;transition:all .1s;font-family:inherit}
.tab:hover{background:var(--g4);color:var(--g)}
.tab.active{background:var(--g3);color:var(--g);border-color:var(--g);text-shadow:0 0 6px var(--g)}
.tab-x{color:var(--dim);font-size:14px;line-height:1;margin-left:2px;padding:0 2px}
.tab-x:hover{color:var(--err)}
.tab-add{height:24px;min-width:24px;border:1px solid var(--g2);border-radius:3px;background:transparent;cursor:pointer;font-size:16px;color:var(--dim);line-height:1;margin-left:4px;margin-bottom:2px;font-family:inherit}
.tab-add:hover{background:var(--g3);color:var(--g)}
.tab-input{border:none;outline:none;background:transparent;font-size:11px;color:var(--g);width:72px;font-family:inherit}
.handle{cursor:pointer}
.st2{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;width:100%;text-align:center;padding:5px 0 2px}
.tprow{display:flex;align-items:center;gap:3px;padding:1px 2px}
.tpbtn{width:100%;height:26px;border:1px solid var(--g2);border-radius:3px;background:transparent;cursor:pointer;font-size:12px;font-weight:700;color:var(--dim);display:flex;align-items:center;justify-content:center;margin-bottom:2px;font-family:inherit;transition:all .1s}
.tpbtn.on{background:var(--g);color:var(--papel);border-color:var(--g)}
@media(hover:hover){.tpbtn:hover{background:var(--g);color:var(--papel);border-color:var(--g)}}
.tpbtn.it{font-style:italic;font-weight:400}
.fsz{width:100%;border:1px solid var(--g2);border-radius:3px;font-size:11px;padding:3px 4px;text-align:center;background:var(--papel);color:var(--g);outline:none;margin-bottom:2px;font-family:inherit}
.sb-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:100%;margin-bottom:2px}
/* D11 quitó el color de texto: la fila del tamaño de fuente quedó sola, a ancho completo. */
.sb-pair:has(#tp-size-scroll){grid-template-columns:1fr}
.sb-pair>.sbtn,.sb-pair>.tpbtn,.sb-pair>.fsz{margin-bottom:0;width:100%}
.sb-pair>.sbtn svg{width:100%;height:auto}
.fsz-scroll{display:flex;align-items:center;justify-content:center;border:1px solid var(--g2);border-radius:3px;height:26px;background:var(--papel);width:100%;cursor:ns-resize;user-select:none;position:relative;overflow:hidden}
.fsz-scroll:hover{border-color:var(--g)}
.fsz-scroll>span{color:var(--g);font-size:11px;font-family:inherit;pointer-events:none;line-height:1}
.fsz-scroll>.fsz-edit{position:absolute;inset:0;width:100%;height:100%;border:none;background:var(--papel)d00;color:var(--g);font-size:11px;font-family:inherit;text-align:center;outline:none;display:none;padding:0;-moz-appearance:textfield}
.fsz-scroll>.fsz-edit::-webkit-inner-spin-button,.fsz-scroll>.fsz-edit::-webkit-outer-spin-button{-webkit-appearance:none}
.fsz-step{display:none}
.fsz-scroll.editing>.fsz-edit{display:block}
.fsz-scroll.editing>span{visibility:hidden}
/* scrollbars */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--papel)}
::-webkit-scrollbar-thumb{background:var(--g2);border-radius:3px}
/* matrix chat */
#mxchat{position:absolute;top:12px;left:12px;bottom:40px;width:248px;background:transparent;border:none;font-family:'Share Tech Mono','Courier New',monospace;font-size:12px;color:var(--g);z-index:10;display:none;flex-direction:column;pointer-events:auto}
#mxchat.vis{display:flex}
#mxchat-msgs{flex:1;overflow-y:scroll;overflow-x:hidden;padding:8px 6px 4px 14px;direction:rtl;scrollbar-width:thin;scrollbar-color:var(--g) rgba(var(--gRGB),0.08)}
#mxchat-msgs::-webkit-scrollbar{width:4px}
#mxchat-msgs::-webkit-scrollbar-thumb{background:var(--g);border-radius:2px}
#mxchat-msgs::-webkit-scrollbar-track{background:rgba(var(--gRGB),0.08);border-radius:2px}
#mxchat-msgs-inner{direction:ltr;display:flex;flex-direction:column;gap:3px;justify-content:flex-end;min-height:100%}
#mxchat-row{display:flex;align-items:center;padding:4px 10px;border:none;touch-action:manipulation}
#mxchat-prompt{color:var(--g);margin-right:5px;user-select:none;opacity:.7}
#mxchat-input{background:transparent;border:none;outline:none;color:var(--g);font-family:inherit;font-size:12px;flex:1;caret-color:var(--g);touch-action:manipulation}
.mx-msg{color:var(--g);line-height:1.45;word-break:break-word}
.mx-sys{color:rgba(var(--gRGB),0.5);font-style:italic;line-height:1.45}
@keyframes mxblink{0%,100%{opacity:1}50%{opacity:0}}
.mx-cursor::after{content:'_';animation:mxblink 1s step-start infinite}
/* sidebar collapse */
#sidebar.collapsed{display:none}
#sb-expand{display:none;width:24px;background:var(--papel);border-right:1px solid var(--g2);color:var(--dim);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex-shrink:0}
#sb-expand.show{display:flex}
#sb-expand:hover{background:var(--g3);color:var(--g)}
#sb-expand i{font-size:16px}
#sb-head{display:flex;flex-direction:column;align-items:center;padding:7px 4px 5px;gap:3px;border-bottom:1px solid var(--g2);flex-shrink:0}
#sb-title{font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--g);text-transform:uppercase;text-shadow:var(--glow);text-align:center}
#sb-collapse{background:transparent;border:1px solid var(--g2);border-radius:3px;color:var(--dim);cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-family:inherit}
#sb-collapse:hover{background:var(--g3);color:var(--g)}
/* layer manager */
#layerpanel{width:214px;background:var(--papel);border-left:1px solid var(--g2);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
#layerpanel.collapsed{display:none}
#lp-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px;border-bottom:1px solid var(--g2);flex-shrink:0}
#lp-title{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--g);text-transform:uppercase;display:flex;align-items:center;gap:5px;text-shadow:var(--glow)}
#lp-title i{font-size:14px}
#lp-collapse{background:transparent;border:1px solid var(--g2);border-radius:3px;color:var(--dim);cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-family:inherit}
#lp-collapse:hover{background:var(--g3);color:var(--g)}
#lp-list{flex:1;overflow-y:auto;padding:7px}
.lp-row{border:1px solid var(--g2);border-radius:3px;padding:5px 6px;margin-bottom:5px;background:var(--g4);cursor:default}
.lp-row.sel{border-color:var(--acc);box-shadow:0 0 5px rgba(var(--accRGB),0.25)}
@keyframes lp-activate{0%{box-shadow:0 0 32px rgba(var(--accRGB),0.95),inset 0 0 24px rgba(var(--accRGB),0.2)}100%{box-shadow:0 0 14px rgba(var(--accRGB),0.55),inset 0 0 14px rgba(var(--gRGB),0.14)}}
.lp-row.active{border-color:var(--acc);background:linear-gradient(150deg,rgba(var(--gRGB),0.44) 0%,rgba(var(--gRGB),0.22) 100%);box-shadow:0 0 14px rgba(var(--accRGB),0.55),inset 0 0 14px rgba(var(--gRGB),0.14)}
.lp-row.flash{animation:lp-activate 0.5s ease-out}
.lp-row.sel .lp-name,.lp-row.active .lp-name{color:var(--acc)}
.lp-row.sel .lp-ico,.lp-row.active .lp-ico{color:var(--acc);border-color:rgba(var(--accRGB),0.35)}
.lp-row.sel .lp-ord,.lp-row.active .lp-ord{color:var(--acc);border-color:rgba(var(--accRGB),0.35)}
.lp-row.sel .lp-act,.lp-row.active .lp-act{color:var(--acc);border-color:rgba(var(--accRGB),0.35)}
.lp-row.sel .lp-pct,.lp-row.active .lp-pct{color:var(--acc)}
.lp-row.sel .lp-radio,.lp-row.active .lp-radio{border-color:rgba(var(--accRGB),0.55)}
.lp-row.active .lp-radio.on{border-color:var(--acc)}
.lp-row.active .lp-radio.on::after{background:var(--acc);box-shadow:0 0 4px var(--acc)}
.lp-row.sel .lp-ico.off,.lp-row.active .lp-ico.off{color:var(--err2);border-color:rgba(var(--errRGB),.5)}
.lp-row.sel .lp-ico.lk,.lp-row.active .lp-ico.lk{color:var(--warn);border-color:rgba(var(--warnRGB),.55)}
.lp-top{display:flex;align-items:center;gap:4px}
.lp-ord{width:16px;height:22px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;padding:0}
.lp-ord:hover{background:var(--g3);color:var(--g)}
.lp-ord:disabled{opacity:.3;cursor:not-allowed}
.lp-ord:disabled:hover{background:transparent;color:var(--dim)}
.lp-ord i{font-size:12px}
.lp-col{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(0,0,0,0.45);cursor:pointer;flex-shrink:0;padding:0;transition:transform .12s,box-shadow .12s;box-shadow:inset 0 0 2px rgba(0,0,0,0.5)}
.lp-col:hover{transform:scale(1.25);box-shadow:0 0 6px rgba(255,255,255,0.4),inset 0 0 2px rgba(0,0,0,0.3)}
.lp-radio{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--g2);background:transparent;cursor:pointer;flex-shrink:0;padding:0;position:relative;transition:border-color .15s}
.lp-radio:hover{border-color:var(--g)}
.lp-radio.on{border-color:var(--g)}
.lp-radio.on::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--g);box-shadow:var(--glow)}
.lp-name{flex:1;font-size:11px;color:var(--g);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:inherit;min-width:0}
.lp-ico{width:20px;height:22px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:inherit;padding:0}
.lp-ico:hover{background:var(--g3);color:var(--g)}
.lp-ico i{font-size:13px}
.lp-ico.off{color:var(--err2);border-color:rgba(var(--errRGB),.5)}
.lp-ico.lk{color:var(--warn);border-color:rgba(var(--warnRGB),.55)}
.lp-r1,.lp-r2{display:contents}
.lp-ts{display:none}
.lp-mid{display:flex;gap:4px;margin-top:4px}
.lp-act{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;padding:3px 2px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;font-size:9px;font-family:inherit;letter-spacing:.02em;white-space:nowrap;overflow:hidden}
.lp-act:hover{background:var(--g3);color:var(--g);text-shadow:var(--glow)}
.lp-act i{font-size:11px;flex-shrink:0}
.lp-bot{display:flex;align-items:center;gap:6px;margin-top:6px}
.lp-slider{flex:1;-webkit-appearance:none;appearance:none;height:3px;background:var(--g2);border-radius:2px;outline:none;cursor:pointer;min-width:0}
.lp-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--g);box-shadow:var(--glow);cursor:pointer}
.lp-slider::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--g);cursor:pointer}
.lp-pct{font-size:9px;color:var(--dim);width:30px;text-align:right;flex-shrink:0}
.lp-rename{width:100%;background:var(--papel);border:1px solid var(--g);color:var(--g);font-family:inherit;font-size:11px;padding:1px 3px;outline:none;box-sizing:border-box}
#lp-foot{display:flex;gap:5px;padding:7px;border-top:1px solid var(--g2);flex-shrink:0}
.lp-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px;border:1px solid var(--g2);border-radius:3px;background:transparent;color:var(--dim);cursor:pointer;font-size:10px;font-family:inherit;letter-spacing:.04em}
.lp-btn:hover{background:var(--g3);color:var(--g);text-shadow:var(--glow)}
.lp-btn:disabled{opacity:.35;cursor:not-allowed}
.lp-btn:disabled:hover{background:transparent;color:var(--dim);text-shadow:none}
.lp-btn i{font-size:13px}
#lp-expand{display:none;width:24px;background:var(--papel);border-left:1px solid var(--g2);color:var(--dim);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex-shrink:0}
#lp-expand.show{display:flex}
#lp-expand:hover{background:var(--g3);color:var(--g)}
#lp-expand i{font-size:16px}
#hue-picker{position:fixed;z-index:9999;background:var(--surf);border:1px solid var(--g2);border-radius:8px;padding:10px 12px;display:none;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 24px rgba(0,0,0,0.9)}
#hue-picker .hp-row{display:flex;align-items:center;gap:8px}
#hue-picker .hp-preview{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--g2);flex-shrink:0}
#hue-picker .hp-slider{width:150px;height:11px;border-radius:6px;outline:none;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%))}
#hue-picker .hp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,0.4);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.6)}
#hue-picker .hp-num{width:44px;background:var(--surf2);border:1px solid var(--g2);border-radius:5px;color:var(--g);font-family:'Share Tech Mono','Courier New',monospace;font-size:12px;text-align:center;padding:3px 4px;outline:none;-moz-appearance:textfield}
#hue-picker .hp-num::-webkit-inner-spin-button,#hue-picker .hp-num::-webkit-outer-spin-button{-webkit-appearance:none}
#hue-picker .hp-num:focus{border-color:var(--g)}
#hue-picker .hp-lbl{font-size:10px;color:var(--dim);font-family:'Share Tech Mono',monospace;letter-spacing:.05em}
#ncp{position:fixed;z-index:9999;background:var(--surf);border:1px solid var(--g2);border-radius:8px;padding:10px;display:none;flex-direction:column;align-items:center;gap:7px;box-shadow:0 4px 24px rgba(0,0,0,0.9);width:200px}
.ncp-sq{position:relative;width:180px;height:120px;border-radius:4px;cursor:crosshair;overflow:hidden;flex-shrink:0;border:1px solid #1a1a1a}
.ncp-sq-s{position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}
.ncp-sq-b{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000)}
.ncp-cur{position:absolute;width:10px;height:10px;border-radius:50%;border:2px solid #fff;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 3px rgba(0,0,0,0.9)}
.ncp-hue{width:180px;height:11px;border-radius:6px;outline:none;border:none;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%))}
.ncp-hue::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,0.4);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.6)}
.ncp-bot{display:flex;align-items:center;gap:6px;width:180px}
.ncp-prev{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--g2);flex-shrink:0}
.ncp-hex{flex:1;min-width:0;background:var(--surf2);border:1px solid var(--g2);border-radius:5px;color:var(--g);font-family:'Share Tech Mono','Courier New',monospace;font-size:12px;padding:3px 5px;outline:none;text-transform:uppercase;letter-spacing:.05em}
.ncp-hex:focus{border-color:var(--g)}
.ncp-eye{background:none;border:1px solid var(--g2);border-radius:4px;color:var(--dim);cursor:pointer;padding:3px 6px;font-size:12px;line-height:1.3;flex-shrink:0}
.ncp-eye:hover{border-color:var(--g);color:var(--g)}
.ncp-row3{display:grid;grid-template-columns:14px 1fr 14px 1fr 14px 1fr;align-items:center;gap:4px;width:180px}
.ncp-lbl{font-size:9px;color:var(--dim);font-family:'Share Tech Mono',monospace;text-align:center}
.ncp-ch{width:100%;background:var(--surf2);border:1px solid var(--g2);border-radius:4px;color:var(--g);font-family:'Share Tech Mono','Courier New',monospace;font-size:11px;padding:2px 3px;outline:none;text-align:center;-moz-appearance:textfield;box-sizing:border-box}
.ncp-ch::-webkit-inner-spin-button,.ncp-ch::-webkit-outer-spin-button{-webkit-appearance:none}
.ncp-ch:focus{border-color:var(--g)}
.ncp-div{width:180px;height:1px;background:var(--g2);opacity:.4}
.eclr{cursor:pointer}
.eclr:hover{border-color:var(--g)!important}
#dnd-ghost{position:fixed;pointer-events:none;z-index:9999;display:none;padding:5px 9px;border:1.5px dashed rgba(var(--gRGB),0.45);border-radius:4px;background:var(--surf);box-shadow:0 0 10px rgba(var(--gRGB),0.18);transition:border-color .1s,opacity .12s}
.nd-dnd-hot>.ns{stroke:#00ffcc!important;stroke-width:2.5!important;filter:drop-shadow(0 0 7px rgba(0,255,200,0.65))}

/* ── MODOS MONOCROMOS (PLAN_ESTETICA D7) ──
   Toda la interfaz, no solo el lienzo. Casi todo se consigue redefiniendo los
   tokens de :root; lo de abajo son las pocas reglas que no se dejan expresar
   como token. */
/* DOS VALORES Y NADA MAS: tinta y papel. Ni un gris.
   Todo lo que antes atenuaba con alfa (--g2, --dim), con tinte (--g3, --g4) o
   con `opacity` producia gris, asi que aqui todo eso colapsa a la tinta y la
   jerarquia se resuelve por otros canales: INVERSION para los estados activos y
   TIPO DE LINEA para lo transitorio. */
body.mono{
  --gRGB:0,0,0;
  --g:#000;--g2:#000;--dim:#000;--acc:#000;--accRGB:0,0,0;
  --g3:transparent;--g4:transparent;
  --glow:none;
  --papel:#fff;--surf:#fff;--surf2:#fff;
  --onInk:brightness(0) invert(1);   /* icono BLANCO sobre boton negro */
}
body.mono-dark{
  --gRGB:255,255,255;
  --g:#fff;--g2:#fff;--dim:#fff;--acc:#fff;--accRGB:255,255,255;
  --g3:transparent;--g4:transparent;
  --glow:none;
  --papel:#000;--surf:#000;--surf2:#000;
  --onInk:brightness(0);             /* icono NEGRO sobre boton blanco */
}
body.mono #cv,body.mono-dark #cv{background:var(--papel)}
body.mono .nd-dnd-hot>.ns,body.mono-dark .nd-dnd-hot>.ns{stroke:var(--g)!important;stroke-width:2.5!important;filter:none}

/* Hover y activo: los que tintaban el fondo con --g3/--g4 ahora INVIERTEN.
   Es el unico modo de marcar un estado cuando solo hay dos valores. */
:is(body.mono,body.mono-dark) :is(
  .tbtn:hover,.abtn:hover,.abtn.on,.tab:hover,.tab.active,.tab-add:hover,
  #sb-expand:hover,#sb-collapse:hover,#lp-collapse:hover,#lp-expand:hover,
  .lp-ord:hover:not(:disabled),.lp-ico:hover,.lp-act:hover,.lp-btn:hover:not(:disabled),
  .fsz-step:active
){background:var(--g)!important;color:var(--papel)!important;border-color:var(--g)!important;text-shadow:none!important;box-shadow:none!important}

/* Capa activa: sin relleno. Se marca doblando el contorno con un box-shadow
   interior, que no desplaza el layout como haria subir el border-width. */
:is(body.mono,body.mono-dark) .lp-row{background:transparent}
:is(body.mono,body.mono-dark) .lp-row.active{background:transparent;border-color:var(--g);box-shadow:inset 0 0 0 1px var(--g)}
:is(body.mono,body.mono-dark) .lp-row.sel{box-shadow:none}
/* Nada de halos ni destellos: un box-shadow con desenfoque es un degradado, o
   sea gris. Se van los DECORATIVOS; se quedan las animaciones que informan
   (cursor del terminal, revelado de Auto-evaluacion). */
:is(body.mono,body.mono-dark) .lp-row.flash{animation:none}
:is(body.mono,body.mono-dark) .lp-row.active .lp-radio.on::after{box-shadow:none}
:is(body.mono,body.mono-dark) .lp-col:hover{box-shadow:none}
:is(body.mono,body.mono-dark) :is(#toast.ok,#toast.err,#toast.warn){box-shadow:none}

/* Toda separacion o filete que iba con alfa pasa a tinta plena. */
:is(body.mono,body.mono-dark) :is(.lg-row,.lg-tip){border-bottom-color:var(--g)}
:is(body.mono,body.mono-dark) .sb-hdr{border-top-color:var(--g)}
:is(body.mono,body.mono-dark) .csw.light-sw{border-color:var(--g)}
:is(body.mono,body.mono-dark) .csw.on{box-shadow:none}
:is(body.mono,body.mono-dark) .mx-sys{color:var(--g)}
:is(body.mono,body.mono-dark) #dnd-ghost{border-color:var(--g);background:var(--papel);box-shadow:none}

/* `opacity` tambien fabrica gris: se anula donde solo servia para atenuar.
   Se CONSERVA en :disabled — un boton inactivo no tiene otro canal para decirlo. */
:is(body.mono,body.mono-dark) :is(.vsep,.kh,.sb-hdr,.lg-sec-t,.lg-note,#mxchat-prompt){opacity:1}
:is(body.mono,body.mono-dark) #sb span[style]{opacity:1!important}   /* credito con opacity inline */
/* Bordes de los botones de la fila de capa seleccionada/activa: iban al 35%. */
:is(body.mono,body.mono-dark) :is(.lp-row.sel,.lp-row.active) :is(.lp-ico,.lp-ord,.lp-act,.lp-radio){border-color:var(--g)}
:is(body.mono,body.mono-dark) .lp-col{border-color:var(--g);box-shadow:none}
:is(body.mono,body.mono-dark) .lp-slider{color:var(--g)}

/* ── FASE 2 · controles de color en monocromo (D10-C + D12) ──
   El caracter identificador vive SIEMPRE en el DOM como data-ch. En reposo estas
   reglas lo muestran y ocultan el color. D12 reencuadra la regla del mono: el
   color es CONSULTABLE bajo demanda — el cursor encima (o HL, en las capas)
   revela el color real, limpio, sin letra. El reposo sigue siendo de dos valores.
   En Terminal no cambia nada.
   NUMEROS = ordinal (los 5 niveles de la paleta). LETRAS = categorico (colores
   propios y capas). Dos semanticas, dos alfabetos — ver D5 y D9. */
:is(body.mono,body.mono-dark) .csw{
  border:1px solid var(--g);color:var(--g);
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1}
:is(body.mono,body.mono-dark) .csw:not(:hover){background:transparent!important}
:is(body.mono,body.mono-dark) .csw:not(:hover)::after{content:attr(data-ch)}
:is(body.mono,body.mono-dark) .csw.on:not(:hover){background:var(--g)!important;color:var(--papel)}
/* Conector: en reposo dice "SEL" (hay un color elegido); el cursor lo revela.
   D12 lo desbloquea (antes decia "estándar" y no abria el picker): en mono la
   arista se dibuja con tinta, pero el color elegido se ve al pasar a Terminal, y
   el hover lo confirma sin salir del modo. "SEL" es corto y vuelve a caber en
   media columna, asi que la fila deja de apilarse — igual layout que Terminal. */
:is(body.mono,body.mono-dark) #ec-color{
  color:var(--g);min-width:0;
  display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.03em}
:is(body.mono,body.mono-dark) #ec-color:not(:hover){background:transparent!important}
:is(body.mono,body.mono-dark) #ec-color:not(:hover)::after{content:'SEL'}
/* Capa: cuadrado con la LETRA en reposo (14px porque en 12 no cabe un caracter).
   Se revela el color real por DOS vias (D12): con HL encendido (body.hl-on) o con
   el cursor encima. Fuera de esas dos, letra. */
:is(body.mono,body.mono-dark) .lp-col{
  border:1px solid var(--g);color:var(--g);
  width:14px;height:14px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;font-family:inherit}
:is(body.mono,body.mono-dark):not(.hl-on) .lp-col:not(:hover){background:transparent!important}
:is(body.mono,body.mono-dark):not(.hl-on) .lp-col:not(:hover)::after{content:attr(data-ch)}
:is(body.mono,body.mono-dark) .lp-col:hover{transform:scale(1.25)}
/* Grupo: el punto en el lienzo es un aro de tinta (relleno papel) igual para
   todos; el cursor encima revela su color real (guardado en --grp-col por
   styleGrpDot). El clic abre el selector. Mismo gesto que las paletas (D12). */
:is(body.mono,body.mono-dark) .grp-dot:hover{fill:var(--grp-col)!important;stroke:var(--grp-col)!important}
/* Mismo identificador sobre la forma, en el lienzo (indicadores de capa, HL) */
text.nd-layer-dot{font-family:'Share Tech Mono','Courier New',monospace;font-size:9px;font-weight:700;text-anchor:middle;dominant-baseline:central}

/* El scrim del modal se queda oscuro en los tres modos: es una sombra, no un color. */

/* Touch action: prevent browser pan/zoom interference on canvas */
#cv,#svg{touch-action:none}
/* ── RESPONSIVE MOBILE / TABLET ── */
@media (max-width:768px){
  /* Topbar: dos filas que envuelven botones */
  #topbar{padding:4px 6px;gap:0}
  #topbar-brand{width:62px}
  #topbar-rows{padding-left:6px}
  .topbar-row{gap:4px;touch-action:pan-x}
  .brand{font-size:11px;gap:3px}
  .tbtn{min-width:unset;padding:4px 5px;font-size:9px;white-space:nowrap}
  .tbtn i,.tbtn svg{font-size:13px}
  .tbtn-lbl{white-space:nowrap;font-size:9px}
  .abtn{padding:4px 6px;font-size:10px}
  /* Ocultar exportar SVG y PNG */
  .abtn.exp{display:none!important}
  /* Botón multiselección táctil: visible solo en mobile */
  #btn-multisel{display:flex!important}
  /* Barra de estado: ocultar en mobile, su espacio lo usa el canvas */
  #sb{display:none!important}
  /* Sidebar: ancho reducido en mobile, scroll táctil libre, scrollbar a la izquierda */
  #sidebar{width:68px;direction:rtl;touch-action:pan-y}
  #sidebar>*{direction:ltr}
  /* Tabbar: sube al tope (tras topbar), antes del wrap */
  #topbar{order:1}
  #tabbar{order:3;padding-left:8px;padding-bottom:0;height:auto;min-height:30px;border-bottom:1px solid var(--g2);touch-action:pan-x;transform:scaleY(-1)}
  #tabbar>*{transform:scaleY(-1)}
  #wrap{order:4}
  /* Panel de capas: botones Nueva/Eliminar suben bajo el título */
  #lp-head{order:1}
  #lp-foot{order:2;border-top:none;border-bottom:1px solid var(--g2)}
  #lp-list{order:3;padding-bottom:60px;padding-left:5px;padding-right:5px;padding-top:5px}
  /* Panel de capas: layout vertical apilado y compacto en mobile */
  #layerpanel{width:120px}
  .lp-row{padding:4px 5px;margin-bottom:4px}
  .lp-top{flex-direction:column;align-items:stretch;gap:3px}
  .lp-r1{display:flex;align-items:center;gap:3px}
  .lp-r1 .lp-name{flex:1}
  .lp-r2{display:flex;align-items:center;gap:3px}
  .lp-r2 .lp-ord{flex:1;width:auto;height:20px}
  .lp-r2 .lp-ico{flex:1;width:auto;height:20px}
  .lp-mid{gap:3px;margin-top:3px}
  .lp-bot{margin-top:4px}
  .lp-tl{display:none}
  .lp-ts{display:inline}
  .lp-act-mv i{display:none}
  /* Espacio inferior en columnas laterales para que el último ítem no quede tapado */
  #sidebar{padding-bottom:130px}
  /* Leyenda: una columna con scroll táctil */
  .lg-body{grid-template-columns:1fr;gap:0}
  #lg-box{width:96vw;max-height:88vh}
  /* En móvil: stepper vertical + / valor / − */
  .fsz-scroll{cursor:default;overflow:hidden;flex-direction:column;height:72px;justify-content:stretch}
  .fsz-scroll>span{display:flex!important;align-items:center;justify-content:center;flex:1;font-size:13px;pointer-events:none}
  .fsz-scroll>.fsz-edit{display:none!important}
  .fsz-step{display:flex;align-items:center;justify-content:center;width:100%;height:24px;flex-shrink:0;background:transparent;border:none;color:var(--g);font-size:15px;cursor:pointer;touch-action:manipulation;padding:0;font-family:inherit;line-height:1}
  .fsz-step.fsz-inc{order:-1;border-bottom:1px solid var(--g2)}
  .fsz-step.fsz-dec{order:1;border-top:1px solid var(--g2)}
  .fsz-step:active{background:var(--g3)}
  .sb-pair{grid-template-columns:1fr}
}