/* ================= CircuitLab ================= */
:root{
  --bg:#0e1117; --bg2:#12161f; --bg3:#181e2a; --line:#252d3c; --line2:#323c4f;
  --txt:#e6ebf3; --txt2:#98a3b6; --accent:#3ea6ff; --accent2:#1f6feb;
  --ok:#2ecc71; --warn:#f5a623; --err:#ff5f56; --purple:#a371f7;
  --header-h:52px; --mtabs-h:0px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--txt); overflow:hidden;
  font:14px/1.45 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
.spacer{flex:1}
hr{border:none;border-top:1px solid var(--line);margin:4px 0}

/* ---------- topbar ---------- */
#topbar{
  height:var(--header-h); display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--bg2); border-bottom:1px solid var(--line); position:relative; z-index:40;
}
.brand{display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.2px}
.logo{font-size:18px;filter:drop-shadow(0 0 6px #3ea6ff88)}
.brand-name{white-space:nowrap}
.project-name{
  background:transparent;border:1px solid transparent;border-radius:6px;padding:5px 8px;
  width:190px;color:var(--txt2);min-width:70px
}
.project-name:hover{border-color:var(--line2)}
.project-name:focus{outline:none;border-color:var(--accent);color:var(--txt);background:var(--bg3)}

.btn{
  display:inline-flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--line2);
  color:var(--txt);padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.15s
}
.btn:hover{background:#212b3b;border-color:#43506a}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,#2ea043,#238636);border-color:#2ea043;font-weight:600}
.btn.primary:hover{background:linear-gradient(180deg,#35b64c,#2a9c40)}
.btn.primary.running{background:linear-gradient(180deg,#e5534b,#c93c37);border-color:#e5534b}
.btn.ghost{background:transparent}
.btn.tiny{padding:4px 9px;border-radius:6px;font-size:12.5px}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{
  background:var(--bg3);border:1px solid var(--line2);color:var(--txt);width:32px;height:32px;
  border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none
}
.icon-btn:hover{background:#212b3b}
.icon-btn.active{background:var(--accent2);border-color:var(--accent)}

.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:38px;background:var(--bg3);border:1px solid var(--line2);
  border-radius:10px;padding:6px;min-width:200px;box-shadow:0 12px 32px #0009;z-index:60
}
.menu button{display:block;width:100%;text-align:left;background:none;border:none;padding:8px 10px;border-radius:6px;cursor:pointer}
.menu button:hover{background:#243043}

/* ---------- layout ---------- */
#layout{display:flex;height:calc(100% - var(--header-h) - var(--mtabs-h));position:relative}
.panel{background:var(--bg2);display:flex;flex-direction:column;min-height:0}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);
  font-size:13px;flex:none
}

/* paleta */
.search{
  margin:8px;padding:7px 10px;background:var(--bg3);border:1px solid var(--line2);border-radius:8px;
  width:calc(100% - 16px)
}
.search:focus{outline:none;border-color:var(--accent)}
.palette-list{overflow:auto;padding:0 8px 16px;flex:1}
.cat-title{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt2);margin:12px 4px 6px}
.pal-item{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;cursor:grab;
  border:1px solid transparent;user-select:none;touch-action:none
}
.pal-item:hover{background:var(--bg3);border-color:var(--line2)}
.pal-item svg{width:34px;height:28px;flex:none}
.pal-item .nm{font-size:12.5px;line-height:1.2}
.pal-item .ds{font-size:10.5px;color:var(--txt2)}

/* stage */
#stage{flex:1;position:relative;overflow:hidden;background:var(--bg)}
#canvas{width:100%;height:100%;display:block;touch-action:none;cursor:default}
#canvas.panning{cursor:grabbing}
#canvas.panmode{cursor:grab}
#canvas.wiring{cursor:crosshair}

.canvas-hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);color:var(--txt2);font-size:12px;
  background:#0b0e14cc;border:1px solid var(--line);padding:5px 12px;border-radius:20px;pointer-events:none
}
.float-tools,.float-zoom{
  position:absolute;display:flex;gap:6px;background:#0b0e14d9;border:1px solid var(--line);
  padding:6px;border-radius:12px;backdrop-filter:blur(6px)
}
.float-tools{left:12px;bottom:12px}
.float-zoom{right:12px;bottom:12px;flex-direction:column}
.float-tools .sep{width:1px;background:var(--line2);margin:2px 2px}

.sim-badge{
  position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px;background:#0b0e14d9;
  border:1px solid #2ea04355;padding:5px 11px;border-radius:20px;font-size:12px
}
.sim-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.warn-box{
  position:absolute;right:12px;top:12px;max-width:320px;background:#2a1d10ee;border:1px solid #f5a62366;
  color:#ffd79a;border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.4
}
.warn-box b{color:#ffb84d}

/* props */
.props{
  position:absolute;right:12px;top:56px;width:250px;background:var(--bg2);border:1px solid var(--line2);
  border-radius:12px;box-shadow:0 14px 40px #000a;padding:10px 12px;z-index:20;max-height:70%;overflow:auto
}
.props h4{margin:0 0 8px;font-size:13px;display:flex;align-items:center;gap:6px}
.prop-row{display:flex;align-items:center;gap:8px;margin:8px 0}
.prop-row label{flex:1;font-size:12px;color:var(--txt2)}
.prop-row input[type=number],.prop-row select,.prop-row input[type=text]{
  width:96px;background:var(--bg3);border:1px solid var(--line2);border-radius:6px;padding:4px 7px
}
.prop-row input[type=range]{width:110px;accent-color:var(--accent)}
.prop-row .val{font-size:11px;color:var(--accent);width:52px;text-align:right;font-variant-numeric:tabular-nums}
.prop-meas{background:var(--bg3);border-radius:8px;padding:7px 9px;font-size:11.5px;color:var(--txt2);margin-top:8px}
.prop-meas b{color:var(--ok);font-variant-numeric:tabular-nums}

/* ---------- code panel ---------- */
#codePanel{width:clamp(340px,32vw,460px);border-left:1px solid var(--line);flex:none}
#codePanel.hidden{display:none}
.tabs-mini{display:flex;gap:4px;margin-left:auto}
.mini{background:transparent;border:1px solid transparent;padding:3px 9px;border-radius:6px;cursor:pointer;color:var(--txt2);font-size:12px}
.mini.active{background:var(--bg3);border-color:var(--line2);color:var(--txt)}

.code-view{flex:1;display:flex;flex-direction:column;min-height:0}
.editor-wrap{flex:1;display:flex;min-height:0;background:#0b0e14;position:relative;overflow:hidden}
.gutter{
  padding:10px 6px 10px 10px;text-align:right;color:#4b566b;font:12.5px/1.55 "JetBrains Mono",Consolas,"Courier New",monospace;
  user-select:none;background:#0b0e14;border-right:1px solid var(--line);overflow:hidden;flex:none;min-width:38px
}
.gutter .errln{color:var(--err);font-weight:700}
.editor-scroll{position:relative;flex:1;overflow:auto}
.highlight,#editor{
  margin:0;padding:10px 12px;font:12.5px/1.55 "JetBrains Mono",Consolas,"Courier New",monospace;
  white-space:pre;tab-size:2; letter-spacing:0;
}
.highlight{pointer-events:none;min-width:100%;min-height:100%}
.highlight code{font:inherit}
#editor{
  position:absolute;inset:0;background:transparent;color:transparent;caret-color:#fff;border:none;
  resize:none;outline:none;overflow:hidden;width:100%;height:100%
}
#editor::selection{background:#2f5ea8aa}
.tok-key{color:#ff7b72}.tok-type{color:#79c0ff}.tok-num{color:#d2a8ff}.tok-str{color:#a5d6ff}
.tok-com{color:#6a7685;font-style:italic}.tok-fn{color:#d2a8ff}.tok-pre{color:#f0883e}.tok-const{color:#7ee787}
.editor-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--txt2);flex:none}
#editorStatus.err{color:var(--err)}
#editorStatus.ok{color:var(--ok)}

.serial-view{flex:1;display:flex;flex-direction:column;min-height:0}
.serial-out{
  flex:1;overflow:auto;padding:10px 12px;background:#0b0e14;
  font:12.5px/1.5 "JetBrains Mono",Consolas,monospace;white-space:pre-wrap;word-break:break-word
}
.serial-out .sys{color:var(--txt2)}
.serial-out .tx{color:var(--accent)}
.serial-out .err{color:var(--err)}
.serial-in{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.serial-in input{flex:1;background:var(--bg3);border:1px solid var(--line2);border-radius:7px;padding:6px 9px}
.serial-in input:focus{outline:none;border-color:var(--accent)}

/* ---------- mobile tabs ---------- */
#mobileTabs{display:none}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;background:#000b;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--bg2);border:1px solid var(--line2);border-radius:14px;width:min(680px,100%);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #000c}
.modal-head{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.modal-head strong{flex:1}
.modal-body{padding:14px;overflow:auto}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.ex-card{background:var(--bg3);border:1px solid var(--line2);border-radius:10px;padding:11px;cursor:pointer;transition:.15s}
.ex-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.ex-card .t{font-weight:600;margin-bottom:3px;font-size:13px}
.ex-card .d{font-size:11.5px;color:var(--txt2)}
.list-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:8px;border:1px solid var(--line)}
.list-row+.list-row{margin-top:7px}
.list-row .t{flex:1}
.list-row .sub{font-size:11px;color:var(--txt2)}
kbd{background:var(--bg3);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11.5px;font-family:inherit}
.help-tbl{width:100%;border-collapse:collapse}
.help-tbl td{padding:5px 4px;border-bottom:1px solid var(--line);font-size:13px}
.help-tbl td:first-child{width:150px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#1c2433;border:1px solid var(--line2);
  padding:9px 18px;border-radius:22px;z-index:200;box-shadow:0 8px 26px #0008;font-size:13px
}

/* ---------- SVG canvas bits ---------- */
.comp{cursor:move}
.comp.sel .selbox{stroke:var(--accent);stroke-width:1.5;fill:#3ea6ff14;stroke-dasharray:4 3}
.selbox{fill:none;stroke:none}
.pin-hit{fill:transparent;cursor:crosshair}
.pin-dot{fill:#7d8796;opacity:0;pointer-events:none;transition:opacity .12s}
#canvas.showpins .pin-dot{opacity:.85}
.pin-hit:hover + .pin-dot,.pin-dot.hot{opacity:1;fill:var(--accent);r:4}
.pin-label{font:8px sans-serif;fill:#cfd6e4;pointer-events:none}
.wire{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}
.wire.sel{stroke-dasharray:7 4}
.wire-hit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.wire-preview{fill:none;stroke:#3ea6ff;stroke-width:3;stroke-dasharray:6 4;pointer-events:none;stroke-linecap:round}
.bb-hole{fill:#1b1b1b}
.node-label{font:9px monospace;fill:#7ee787;pointer-events:none}
.burnt{filter:grayscale(1) brightness(.5)}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  :root{--mtabs-h:56px}
  .brand-name,.project-name{display:none}
  #codePanel{
    position:absolute;inset:0;z-index:45;width:100%;border-left:none
  }
  body[data-view="circuit"] #codePanel{display:none}
  body[data-view="code"] #codePanel .serial-view{display:none!important}
  #mobileTabs{
    display:flex;height:var(--mtabs-h);background:var(--bg2);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)
  }
  .mtab{
    flex:1;background:none;border:none;color:var(--txt2);display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;font-size:16px;cursor:pointer
  }
  .mtab span{font-size:10.5px}
  .mtab.active{color:var(--accent)}
  .props{right:8px;top:8px;width:210px}
  .canvas-hint{display:none}
  #btnCode{display:none}
  .float-tools{left:8px;bottom:8px}
  .float-zoom{right:8px;bottom:8px}
}
@media (min-width: 1001px){ .only-mobile{display:none!important} #btnCloseCode{display:none} }

/* agujeros de protoboard */
.pin-hit.bb:hover{fill:#3ea6ff;opacity:.9}
.comp text{user-select:none}
[hidden]{display:none!important}
.prop-tip{
  background:#12263d;border:1px solid #2b5a8c;color:#a9ccf0;border-radius:8px;
  padding:7px 9px;font-size:11.5px;line-height:1.45;margin-top:8px
}
.prop-tip b{color:#cfe6ff}
.props h4{justify-content:space-between}
.props-x{
  background:transparent;border:none;color:var(--txt2);cursor:pointer;font-size:13px;
  padding:0 2px;line-height:1;margin-left:auto
}
.props-x:hover{color:var(--txt)}
.sim-badge.avisa{border-color:#f5a62399;color:#ffd79a;background:#2a1d10ee}
.sim-badge.avisa .dot{background:var(--warn)}