:root {
  --bg: #f1f3f7;
  --bg-panel: #ffffff;
  --bg-soft: #f7f8fb;
  --bg-canvas: #fbfcfe;
  --border: #d7dce5;
  --border-strong: #b9c1ce;
  --text: #1b2230;
  --text-dim: #667085;
  --accent: #2f6fed;
  --accent-soft: #e6efff;
  --danger: #d64545;
  --shadow: 0 8px 24px rgba(20, 30, 50, .12);
  --radius: 7px;
  --grid: #dfe4ec;
  --grid-strong: #cfd6e2;
}

html[data-theme="dark"] {
  --bg: #171b22;
  --bg-panel: #1f242d;
  --bg-soft: #232833;
  --bg-canvas: #1a1f27;
  --border: #333a46;
  --border-strong: #46505f;
  --text: #e6e9ef;
  --text-dim: #98a2b3;
  --accent: #5b8cff;
  --accent-soft: #26334d;
  --danger: #f0736e;
  --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  --grid: #262c36;
  --grid-strong: #313947;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font: 13px/1.45 "Segoe UI", Roboto, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

button { font: inherit; color: inherit; }

/* ---------- barra superior ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 10px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  letter-spacing: .2px;
  padding-right: 6px;
}

.brand svg { fill: none; stroke: var(--accent); stroke-width: 1.7; }

#menubar { display: flex; gap: 2px; }

.menu { position: relative; }

.menu-btn {
  background: none;
  border: 0;
  padding: 6px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}

.menu-btn:hover, .menu.open .menu-btn { background: var(--bg-soft); }

.menu-pop {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 250px;
  padding: 5px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 50;
}

.menu.open > .menu-pop { display: block; }

.menu-pop button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: 0;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.menu-pop button:hover { background: var(--accent-soft); }
.menu-pop button kbd,
.menu-pop button .chev {
  margin-left: auto;
  color: var(--text-dim);
  font: 11px/1 ui-monospace, monospace;
}
.menu-pop button .check { margin-left: auto; color: var(--accent); }
.menu-pop button .check.off { visibility: hidden; }
.menu-pop hr { border: 0; border-top: 1px solid var(--border); margin: 5px 2px; }

.menu-sub { position: relative; }
.menu-pop.sub { top: -5px; left: calc(100% + 2px); }
.menu-sub:hover > .menu-pop.sub { display: block; }
.menu-pop.sub .empty { padding: 8px 10px; color: var(--text-dim); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.file-state {
  color: var(--text-dim);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-state.dirty::after { content: " •"; color: var(--danger); font-weight: 700; }

.tb-btn {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
}
.tb-btn:hover { border-color: var(--border-strong); }
.tb-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- segunda barra ---------- */
#toolbar2 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.group { display: flex; align-items: center; gap: 3px; }
.sep { width: 1px; height: 18px; background: var(--border); }
.spacer { flex: 1; }

.icon-btn {
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
}
.icon-btn:hover { background: var(--bg-panel); border-color: var(--border); }
.icon-btn:disabled { opacity: .35; cursor: default; background: none; border-color: transparent; }

#zoomLabel { min-width: 44px; text-align: center; color: var(--text-dim); }

.inline-check { display: flex; align-items: center; gap: 5px; color: var(--text-dim); cursor: pointer; }

/* ---------- área de trabajo ---------- */
#workspace { flex: 1 1 auto; display: flex; min-height: 0; }

#palette {
  width: 194px;
  flex: 0 0 auto;
  overflow-y: auto;
  padding: 10px 8px 20px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
}

.pal-section { margin-bottom: 14px; }
.pal-section h3 {
  margin: 0 0 6px 6px;
  font-size: 10.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.pal-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.pal-item:hover { background: var(--bg-soft); }
.pal-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.pal-ico { width: 18px; text-align: center; color: var(--text-dim); }
.pal-item.active .pal-ico { color: var(--accent); }
.pal-hint { margin: 4px 6px; color: var(--text-dim); font-size: 11.5px; }

#canvas-wrap { flex: 1 1 auto; position: relative; min-width: 0; background: var(--bg-canvas); overflow: hidden; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#canvas.tool-node { cursor: crosshair; }
#canvas.tool-edge { cursor: alias; }
#canvas.tool-pan, #canvas.panning { cursor: grab; }
#canvas.panning { cursor: grabbing; }

.tool-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  color: var(--text-dim);
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- vista de código ---------- */
#code-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  z-index: 5;
}
#code-pane.hidden { display: none; }

.code-bar {
  display: flex;
  gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.code-bar .btn { flex: 0 0 auto; min-width: 0; }

.code-body { flex: 1 1 auto; display: flex; min-height: 0; }

.code-gutter {
  margin: 0;
  padding: 10px 8px 10px 12px;
  overflow: hidden;
  text-align: right;
  color: var(--text-dim);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  font: 13px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  user-select: none;
  white-space: pre;
}

#code-area {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  resize: none;
  background: var(--bg-panel);
  color: var(--text);
  font: 13px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace;
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
#code-area:focus { outline: none; }

.code-errors { max-height: 22vh; overflow-y: auto; }
.code-errors:not(:empty) { border-top: 1px solid var(--border); }
.code-error {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--danger);
}
.code-error:hover { background: var(--bg-soft); }
.code-error-line {
  display: inline-block;
  min-width: 74px;
  color: var(--text-dim);
  font: 11.5px ui-monospace, monospace;
}

.code-info {
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 12px;
}
.code-info.warn { color: var(--accent); }
.code-info.error { color: var(--danger); }
.code-info.ok { color: #2e9e5b; }

.tab.code-tab { font-family: ui-monospace, monospace; }
.tab.code-tab .tag { opacity: .6; }

.theme-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  display: inline-block;
  flex: 0 0 auto;
}

/* ---------- panel de propiedades ---------- */
#panel {
  width: 286px;
  flex: 0 0 auto;
  overflow-y: auto;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding: 10px 12px 24px;
}
#panel.hidden { display: none; }

#panel h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
}
#panel h4 {
  margin: 16px 0 6px;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.field { margin-bottom: 9px; }
.field > label { display: block; margin-bottom: 3px; color: var(--text-dim); font-size: 11.5px; }
.row { display: flex; gap: 7px; }
.row > .field { flex: 1; min-width: 0; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 5px 7px;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  font: inherit;
}
textarea { resize: vertical; font: 12px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
input[type="color"] { width: 100%; height: 28px; padding: 1px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; }

.check-row { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; cursor: pointer; }
.hint { color: var(--text-dim); font-size: 11px; margin: 4px 0 0; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btn {
  flex: 1;
  min-width: 88px;
  padding: 6px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.btn:hover { border-color: var(--border-strong); }
.btn.danger { color: var(--danger); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 4px; }
.chip {
  padding: 3px 9px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  font: 12px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.wide { font-family: inherit; }

.swatches { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--border-strong); cursor: pointer; }

.empty-note { color: var(--text-dim); }

/* ---------- pie / pestañas ---------- */
#statusbar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}

#tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 70%; }
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
  cursor: pointer;
  white-space: nowrap;
}
.tab.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tab .x { opacity: .5; }
.tab .x:hover { opacity: 1; color: var(--danger); }
#status { color: var(--text-dim); }

/* ---------- modal ---------- */
.modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; }
.modal-root.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 22, .45); }
.modal {
  position: relative;
  min-width: 340px;
  max-width: min(620px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 18px 20px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.modal h2 { margin: 0 0 12px; font-size: 15px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.modal-actions .btn { flex: 0 0 auto; min-width: 92px; }
.modal table { border-collapse: collapse; width: 100%; }
.modal td { padding: 3px 10px 3px 0; vertical-align: top; }
.modal td:first-child { white-space: nowrap; color: var(--accent); font: 12px ui-monospace, monospace; }
.modal code { background: var(--bg-soft); padding: 1px 4px; border-radius: 3px; font: 12px ui-monospace, monospace; }
.modal p { margin: 6px 0; }

/* ---------- menú contextual ---------- */
.ctx-menu { position: fixed; min-width: 190px; z-index: 300; display: block; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  padding: 9px 16px;
  background: var(--text);
  color: var(--bg-panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  z-index: 200;
  transition: opacity .2s;
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* ---------- ayudas del lienzo ---------- */
.handle { fill: var(--bg-panel); stroke: var(--accent); stroke-width: 1.5; cursor: pointer; }
.handle.nw, .handle.se { cursor: nwse-resize; }
.handle.ne, .handle.sw { cursor: nesw-resize; }
.handle.n, .handle.s { cursor: ns-resize; }
.handle.e, .handle.w { cursor: ew-resize; }
.wp-handle { fill: var(--accent); stroke: #fff; stroke-width: 1.2; cursor: move; }
.wp-ghost { fill: var(--bg-panel); stroke: var(--accent); stroke-width: 1.2; opacity: .55; cursor: copy; }
.wp-ghost:hover { opacity: 1; }
.marquee { fill: var(--accent); fill-opacity: .1; stroke: var(--accent); stroke-dasharray: 4 3; }