/* =========================================================
   4. Lienzo
   ========================================================= */
#viewport {
  position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background-color: var(--bg-canvas);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1.2px);
  cursor: default;
}
#viewport.no-grid { background-image: none; }
#viewport.space-pan, #viewport.tool-hand { cursor: grab; }
#viewport.panning { cursor: grabbing !important; }
#viewport.connecting { cursor: crosshair; }
#world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
#edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
#nodes { position: absolute; left: 0; top: 0; }
#guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 5; }
#marquee {
  position: absolute; border: 1px solid var(--accent); background: var(--accent-soft);
  pointer-events: none; z-index: 4; border-radius: 2px;
}

/* --- Aristas (SVG) --- */
.edge .hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.edge .line { fill: none; stroke-width: 1.6; stroke-linecap: round; transition: opacity .15s; }
.edge.kind-ds .line { stroke: var(--accent); stroke-width: 2.3; marker-end: url(#arrow-ds); }
.edge.kind-ds.external .line { stroke-dasharray: 9 6; }
.edge.kind-source .line { stroke: var(--edge-source); stroke-width: 1.8; stroke-dasharray: 2 6; marker-end: url(#arrow-source); }
.edge text {
  font-size: 11px; fill: var(--fg-2); paint-order: stroke; stroke: var(--bg-canvas); stroke-width: 4px;
  stroke-linejoin: round; text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-family: var(--font);
}
.edge.kind-ds.external text { fill: var(--accent); font-weight: 500; }
.edge.selected .line { stroke-width: 3; filter: drop-shadow(0 0 3px var(--accent-soft)); }
.edge.selected text { font-weight: 600; }
.edge.dim { opacity: .15; }
.edge.dim .hit { pointer-events: none; }
#tempEdge { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
#arrow-ds path { fill: var(--accent); }
#arrow-source path { fill: var(--edge-source); }

/* --- Guías inteligentes --- */
#guides line { stroke: var(--guide); stroke-width: 1; }
#guides text { font-size: 10px; fill: var(--guide); font-family: var(--mono); text-anchor: middle; paint-order: stroke; stroke: var(--bg-canvas); stroke-width: 3px; }
#guides .gap { stroke-dasharray: 3 3; }