/* Editor HVAC por objetos (ces-hvac-graph.js) — tema claro bgreenStudio (Slate + Teal).
   El catálogo (paleta) es navy como el subpanel de modelación; el inspector sigue oscuro.
   .hg-dark = lienzo e inspector oscuros. */
.hg-root {
    --hg-bg: #f8fafc; --hg-panel: #ffffff; --hg-panel-2: #f1f5f9; --hg-hover: #f1f5f9;
    --hg-border: #e2e8f0; --hg-border-2: #cbd5e1;
    --hg-text: #0f172a; --hg-text-2: #475569; --hg-text-3: #94a3b8;
    --hg-accent: #0d9488; --hg-accent-hover: #0f766e; --hg-accent-fill: rgba(13, 148, 136, .1); --hg-on-accent: #ffffff;
    --hg-input: #ffffff; --hg-link: #0f766e;
    --hg-node: #ffffff; --hg-node-stroke: #cbd5e1; --hg-node-hover: #94a3b8; --hg-row: #f8fafc; --hg-ghost: #f8fafc;
    --hg-sel: #0f172a; --hg-hl: #0d9488; --hg-drop: #d97706;
    --hg-canvas: #e2e6eb; --hg-dot: #c8cfd8; --hg-view: #eef2f6;
    --hg-tag-bg: rgba(255, 255, 255, .92); --hg-tag-text: #0f172a;
    --hg-ok: #16a34a; --hg-warn: #b45309; --hg-err: #dc2626; --hg-expert: #7c3aed;
    --hg-issue-err: #fef2f2; --hg-issue-warn: #fffbeb; --hg-danger-border: #fecaca;
    --hg-code-bg: #f8fafc; --hg-code-text: #0f172a;
    --hg-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    position: fixed; inset: 0; z-index: 10050;
    display: none; flex-direction: column;
    background: var(--hg-bg); color: var(--hg-text);
    font: 12px/1.35 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hg-root.hg-dark, .hg-root .hg-insp {
    --hg-bg: #0f141a; --hg-panel: #131a22; --hg-panel-2: #16202a; --hg-hover: #1f2c3a;
    --hg-border: #222b35; --hg-border-2: #2c3846;
    --hg-text: #d8dee6; --hg-text-2: #a3aebb; --hg-text-3: #7d8a97;
    --hg-accent: #1b7aa3; --hg-accent-hover: #2d8fbf; --hg-accent-fill: #0e5a7a; --hg-on-accent: #ffffff;
    --hg-input: #1b2430; --hg-link: #7fc4f0;
    --hg-node: #18222d; --hg-node-stroke: #2e3c4b; --hg-node-hover: #6b8fb0; --hg-row: #202c38; --hg-ghost: #141b23;
    --hg-sel: #ffffff; --hg-hl: #9cc7e6; --hg-drop: #ffeb3b;
    --hg-canvas: #0f141a; --hg-dot: #1d2731; --hg-view: #11161c;
    --hg-tag-bg: rgba(12, 17, 23, .82); --hg-tag-text: #e3e9ef;
    --hg-ok: #4ade80; --hg-warn: #fbd38d; --hg-err: #ff6b6b; --hg-expert: #b388ff;
    --hg-issue-err: #1f1719; --hg-issue-warn: #1f1c15; --hg-danger-border: #5c2b2b;
    --hg-code-bg: #0b0f14; --hg-code-text: #b9d3e6;
    --hg-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.hg-root:not(.hg-dark) .hg-insp {
    --hg-accent: #14b8a6; --hg-accent-hover: #0d9488; --hg-accent-fill: rgba(20, 184, 166, .15); --hg-link: #5eead4;
}
.hg-root.open { display: flex; }
/* Integrado a la app: bajo #topbar (z 1100, sus menús quedan encima) y a la derecha del dock de iconos */
.hg-root.hg-docked { top: var(--hg-top, 44px); left: var(--hg-left, 52px); z-index: 1090; }
.hg-root.hg-docked .hg-body {
    grid-template-columns: var(--hg-cat-w, 220px) minmax(220px, var(--hg-split, 45%)) 6px minmax(220px, 1fr) 330px;
}
.hg-root * { box-sizing: border-box; }

.hg-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 6px 10px; border-bottom: 1px solid var(--hg-border); background: var(--hg-panel);
}
.hg-toolbar .hg-title { font-weight: 600; font-size: 13px; margin-right: 6px; font-family: 'Montserrat', 'Inter', system-ui, sans-serif; }
.hg-toolbar .hg-title i { color: var(--hg-accent); }
.hg-toolbar .hg-spacer { flex: 1; }
.hg-toolbar select, .hg-toolbar button, .hg-insp select, .hg-insp input, .hg-insp button, .hg-cat input {
    background: var(--hg-input); color: var(--hg-text); border: 1px solid var(--hg-border-2); border-radius: 6px;
    font-size: 12px; padding: 3px 8px;
}
.hg-insp input:focus, .hg-insp select:focus, .hg-cat input:focus, .hg-toolbar select:focus {
    outline: none; border-color: var(--hg-accent); box-shadow: 0 0 0 2px var(--hg-accent-fill);
}
.hg-toolbar button:hover, .hg-insp button:hover { border-color: var(--hg-accent); background: var(--hg-hover); }
.hg-toolbar button.primary { background: var(--hg-accent); border-color: var(--hg-accent); color: var(--hg-on-accent); }
.hg-toolbar button.primary:hover { background: var(--hg-accent-hover); }
.hg-seg { display: inline-flex; border: 1px solid var(--hg-border-2); border-radius: 6px; overflow: hidden; }
.hg-seg button { border: 0 !important; border-radius: 0 !important; }
.hg-seg button.on { background: var(--hg-accent); color: var(--hg-on-accent); }
.hg-status { color: var(--hg-text-2); min-width: 90px; text-align: right; }
.hg-status.err { color: var(--hg-err); }
.hg-status.ok { color: var(--hg-ok); }

.hg-body {
    flex: 1; min-height: 0; display: grid;
    grid-template-columns: 220px minmax(220px, var(--hg-split, 45%)) 6px minmax(220px, 1fr) 330px;
}
.hg-col { min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.hg-col + .hg-col { border-left: 1px solid var(--hg-border); }
.hg-resizer { cursor: col-resize; background: var(--hg-panel-2); border-left: 1px solid var(--hg-border); }
.hg-resizer:hover, .hg-resizer.drag { background: var(--hg-accent); }

/* Catálogo */
.hg-cat { overflow-y: auto; padding: 8px; background: var(--hg-panel); color: var(--hg-text); }
.hg-cat input { width: 100%; margin-bottom: 8px; }
.hg-cat h6 { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--hg-text-3); margin: 10px 0 4px; font-weight: 600; }
.hg-item {
    display: flex; align-items: center; gap: 7px; padding: 5px 6px; margin-bottom: 3px;
    border: 1px solid var(--hg-border); border-radius: 6px; background: var(--hg-panel); cursor: grab; user-select: none;
}
.hg-item:hover { border-color: var(--hg-accent); background: var(--hg-hover); }
.hg-item.disabled { opacity: .45; cursor: not-allowed; }
.hg-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.hg-item .lbl { flex: 1; min-width: 0; }
.hg-item .lbl small { display: block; color: var(--hg-text-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hg-item .badge { font-size: 9px; color: var(--hg-warn); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; background: none; }
.hg-item .add { border: 0; background: none; color: var(--hg-accent); font-size: 14px; padding: 0 3px; cursor: pointer; }
.hg-cat .hint { color: var(--hg-text-3); font-size: 11px; margin-top: 10px; }

/* Lienzo esquemático */
.hg-canvas svg { width: 100%; height: 100%; display: block; cursor: grab; background:
    radial-gradient(circle, var(--hg-dot) 1px, transparent 1px) 0 0 / 18px 18px, var(--hg-canvas); }
.hg-canvas svg.panning { cursor: grabbing; }
.hg-canvas .hg-fit {
    position: absolute; right: 8px; top: 8px; background: var(--hg-panel); color: var(--hg-text);
    border: 1px solid var(--hg-border-2); border-radius: 6px; padding: 2px 7px; cursor: pointer;
}
.hg-canvas .hg-fit:hover { border-color: var(--hg-accent); }
.hg-canvas.drop-ok { outline: 2px dashed var(--hg-accent); outline-offset: -4px; }
.hg-colhead { fill: var(--hg-text-3); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.hg-node { cursor: pointer; transition: opacity .15s; }
.hg-node > rect.box { fill: var(--hg-node); stroke: var(--hg-node-stroke); stroke-width: 1; }
.hg-node:hover > rect.box { stroke: var(--hg-node-hover); }
.hg-zone:hover > rect.box { stroke: var(--hg-node-stroke); }
.hg-node.sel > rect.box { stroke: var(--hg-sel); stroke-width: 2; }
.hg-node.hl > rect.box { stroke: var(--hg-hl); stroke-width: 1.5; }
.hg-node.drop > rect.box { stroke: var(--hg-drop); stroke-width: 2; }
.hg-node.ghost > rect.box { stroke-dasharray: 4 3; fill: var(--hg-ghost); }
.hg-node text { fill: var(--hg-text); font-size: 11px; pointer-events: none; }
.hg-node text.sub { fill: var(--hg-text-3); font-size: 9.5px; }
.hg-node text.info { fill: var(--hg-text-2); font-size: 9.5px; pointer-events: none; }
.hg-node text.info tspan.k { fill: var(--hg-text-3); }
.hg-node line.sep { stroke: var(--hg-border); }
.hg-node.pulse > rect.box { animation: hg-pulse 1.1s ease-out 2; }
.hg-root:not(.hg-dark) .hg-node:not(.hg-row) > rect.box { filter: drop-shadow(0 1px 1.5px rgba(15, 23, 42, .08)); }
.hg-row > rect.box { fill: var(--hg-row); stroke: var(--hg-border); }
.hg-row text { font-size: 10.5px; }
.hg-add { cursor: pointer; }
.hg-add rect { fill: transparent; stroke: var(--hg-border-2); stroke-dasharray: 3 3; }
.hg-add text { fill: var(--hg-text-3); font-size: 10px; pointer-events: none; }
.hg-add:hover rect { stroke: var(--hg-accent); fill: var(--hg-accent-fill); }
.hg-add:hover text { fill: var(--hg-accent); }
.hg-canvas .hg-empty { right: 40px; font-size: 11px; color: var(--hg-text-3); }
.hg-canvas .hg-empty.on { color: var(--hg-accent); border-color: var(--hg-accent); }
.hg-menu {
    position: absolute; display: none; z-index: 5; width: 240px; max-height: 310px; overflow-y: auto;
    background: var(--hg-panel); border: 1px solid var(--hg-border); border-radius: 8px; box-shadow: var(--hg-shadow);
    padding: 4px 0; font-size: 12px; color: var(--hg-text);
}
.hg-menu.open { display: block; }
.hg-menu .hd { padding: 4px 10px 6px; font-weight: 600; border-bottom: 1px solid var(--hg-border); }
.hg-menu .grp { padding: 6px 10px 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--hg-text-3); }
.hg-menu button {
    display: flex; gap: 8px; align-items: flex-start; width: 100%; text-align: left;
    background: none; border: 0; color: inherit; padding: 4px 10px; cursor: pointer;
}
.hg-menu button:hover { background: var(--hg-hover); }
.hg-menu .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; flex: none; }
.hg-menu small { display: block; color: var(--hg-text-3); font-size: 10px; }
.hg-libhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hg-libhead button {
    background: var(--hg-panel); color: var(--hg-accent); border: 1px solid var(--hg-border-2); border-radius: 6px;
    font-size: 10px; padding: 1px 6px; text-transform: none; letter-spacing: 0; cursor: pointer;
}
.hg-libhead button:hover { border-color: var(--hg-accent); background: var(--hg-accent-fill); }
@keyframes hg-pulse { 0% { stroke: var(--hg-drop); stroke-width: 5; } 100% { stroke-width: 2; } }
.hg-edge-base { fill: none; stroke-width: 2; opacity: .22; }
.hg-edge { fill: none; stroke-width: 2; stroke-dasharray: 7 7; animation: hg-flow 0.9s linear infinite; }
@keyframes hg-flow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } }
.hg-dim { opacity: .3; }
.hg-dark .hg-dim { opacity: .15; }
.hg-dim .hg-edge { animation-play-state: paused; }

/* Visor 3D */
.hg-view { background: var(--hg-view); }
.hg-view canvas { display: block; }
.hg-view.drop-ok { outline: 2px dashed var(--hg-drop); outline-offset: -4px; }
.hg-view .hg-legend {
    position: absolute; left: 8px; bottom: 8px; background: var(--hg-tag-bg); border: 1px solid var(--hg-border);
    border-radius: 6px; padding: 5px 8px; font-size: 11px; pointer-events: none; color: var(--hg-text);
}
.hg-view .hg-legend .bar { height: 8px; width: 160px; border-radius: 3px; margin: 3px 0;
    background: linear-gradient(90deg, hsl(220,80%,50%), hsl(110,80%,45%), hsl(50,90%,50%), hsl(0,85%,52%)); }
.hg-view .hg-legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 8px; }
.hg-view .hg-hint { position: absolute; right: 8px; top: 8px; color: var(--hg-text-3); font-size: 10.5px; pointer-events: none; text-align: right; }
.hg-tag {
    font-size: 10px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; pointer-events: none;
    background: var(--hg-tag-bg); border: 1px solid var(--hg-border-2); color: var(--hg-tag-text); transition: opacity .15s;
}
.hg-tag.dim { opacity: .2; }
.hg-tag.hover { border-color: var(--hg-drop); }
.hg-tag.warn { border-color: var(--hg-warn); color: var(--hg-warn); }
.hg-tag.err { border-color: var(--hg-err); color: var(--hg-err); }
.hg-tag.anchor { font-size: 11px; font-weight: 600; }
.hg-tag i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }

/* Inspector */
.hg-insp { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: var(--hg-panel); color: var(--hg-text); }
.hg-insp h5 { font-size: 13px; margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--hg-text); }
.hg-insp h5 .dot { width: 10px; height: 10px; border-radius: 50%; }
.hg-insp .eplus { color: var(--hg-text-3); font-size: 10.5px; font-family: ui-monospace, Consolas, monospace; }
.hg-insp .grp { border-top: 1px solid var(--hg-border); padding-top: 6px; }
.hg-insp .grp > b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--hg-text-3); margin-bottom: 4px; }
.hg-f { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 6px; margin-bottom: 4px; }
.hg-f label { color: var(--hg-text-2); margin: 0; }
.hg-f input, .hg-f select { width: 100%; }
.hg-f input:disabled, .hg-f select:disabled { opacity: .6; cursor: not-allowed; background: var(--hg-panel-2); }
.hg-f.expert label::after { content: " ◆"; color: var(--hg-expert); font-size: 8px; }
.hg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hg-chip { background: var(--hg-panel-2); border: 1px solid var(--hg-border); border-radius: 10px; padding: 1px 4px 1px 8px; cursor: pointer; }
.hg-chip button { border: 0 !important; background: none !important; padding: 0 3px !important; color: var(--hg-err) !important; }
.hg-link { color: var(--hg-link); cursor: pointer; text-decoration: underline dotted; }
.hg-note { color: var(--hg-text-2); font-size: 11px; }
.hg-note.warn { color: var(--hg-warn); }
.hg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hg-actions .danger { color: var(--hg-err); border-color: var(--hg-danger-border); }
.hg-issues { border-top: 1px solid var(--hg-border); padding-top: 6px; margin-top: auto; }
.hg-issue { padding: 3px 6px; border-left: 3px solid var(--hg-err); background: var(--hg-issue-err); margin-bottom: 3px; cursor: pointer; font-size: 11px; border-radius: 0 4px 4px 0; }
.hg-issue.warning { border-left-color: var(--hg-warn); background: var(--hg-issue-warn); }
.hg-issue:hover { filter: brightness(.97); }
.hg-dark .hg-issue:hover { filter: brightness(1.3); }
.hg-kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 11px; }
.hg-kv span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; }

.hg-idf {
    position: absolute; inset: 40px 60px; z-index: 5; display: none; flex-direction: column;
    background: var(--hg-panel); border: 1px solid var(--hg-border); border-radius: 8px; box-shadow: var(--hg-shadow);
}
.hg-idf.open { display: flex; }
.hg-idf header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--hg-border); }
.hg-idf header button { background: var(--hg-input); color: var(--hg-text); border: 1px solid var(--hg-border-2); border-radius: 6px; padding: 3px 8px; }
.hg-idf textarea { flex: 1; background: var(--hg-code-bg); color: var(--hg-code-text); border: 0; padding: 10px;
    font: 11px/1.4 ui-monospace, Consolas, monospace; resize: none; white-space: pre; border-radius: 0 0 8px 8px; }

/* Paleta de equipos: mismo navy que las herramientas de modelación (--ds-chrome) */
.hg-root .hg-cat {
    --hg-bg: #1c2434;
    --hg-panel: #1c2434;
    --hg-panel-2: #232b3b;
    --hg-hover: rgba(255, 255, 255, 0.08);
    --hg-border: rgba(255, 255, 255, 0.08);
    --hg-border-2: rgba(255, 255, 255, 0.12);
    --hg-text: #cbd5e1;
    --hg-text-2: #cbd5e1;
    --hg-text-3: #94a3b8;
    --hg-accent: #2dd4bf;
    --hg-accent-hover: #5eead4;
    --hg-accent-fill: rgba(45, 212, 191, 0.15);
    --hg-on-accent: #042f2e;
    --hg-input: #1a2230;
    --hg-link: #5eead4;
    --hg-warn: #fbd38d;
    --hg-ok: #2dd4bf;
    --hg-err: #f87171;
    background: var(--ds-chrome, #1c2434);
    color: var(--ds-chrome-text, #cbd5e1);
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.hg-root .hg-cat::-webkit-scrollbar { width: 6px; }
.hg-root .hg-cat::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}
.hg-root .hg-cat h6 {
    color: var(--ds-chrome-text-2, #94a3b8);
    font-weight: 700;
}
.hg-root .hg-cat input[data-q] {
    background: #1a2230;
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
}
.hg-root .hg-cat input[data-q]::placeholder { color: #94a3b8; }
.hg-root .hg-cat input[data-q]:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.15);
}
.hg-root .hg-cat .hg-item {
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    color: #cbd5e1;
    margin-bottom: 2px;
}
.hg-root .hg-cat .hg-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    color: #ffffff;
}
.hg-root .hg-cat .hg-item .lbl small { color: #94a3b8; }
.hg-root .hg-cat .hg-item:hover .lbl small { color: #e2e8f0; }
.hg-root .hg-cat .hg-item .add { color: #2dd4bf; }
.hg-root .hg-cat .hg-item:hover .add { color: #5eead4; }
.hg-root .hg-cat .hg-libhead button {
    background: transparent;
    color: #2dd4bf;
    border: 1px solid rgba(45, 212, 191, 0.45);
}
.hg-root .hg-cat .hg-libhead button:hover {
    background: rgba(45, 212, 191, 0.12);
    border-color: rgba(45, 212, 191, 0.55);
    color: #5eead4;
}
.hg-root .hg-cat .hint,
.hg-root .hg-cat .hg-note { color: #94a3b8; }