/* Lienzo SVG: fondo de puntos, tarjetas de paso, puertos y conexiones. Solo tokens. */

.canvas {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.canvas--panning,
.canvas--dragging {
  cursor: grabbing;
}

.canvas--connecting {
  cursor: crosshair;
}

.canvas__dot {
  fill: var(--canvas-dot);
}

/* Paso (tarjeta): --cat es el color de la categoria */
.node {
  --cat: var(--node-ai);
  cursor: grab;
  touch-action: none;
  transition: opacity var(--transition-base);
}

.node--data {
  --cat: var(--node-data);
}

.node--control {
  --cat: var(--node-control);
}

.node--person {
  --cat: var(--node-person);
}

.node:active {
  cursor: grabbing;
}

.node:focus-visible {
  outline: none;
  box-shadow: none;
}

.node__card {
  fill: var(--node-bg);
  stroke: var(--node-border);
  stroke-width: var(--node-border-width);
  filter: var(--shadow-node);
  transition:
    stroke var(--transition-fast),
    filter var(--transition-fast);
}

.node:hover .node__card {
  stroke: var(--node-border-hover);
  filter: var(--shadow-node-hover);
}

.node__header {
  fill: color-mix(in srgb, var(--cat) var(--node-header-mix), var(--node-bg));
  pointer-events: none;
}

.node__chip {
  fill: var(--cat);
  pointer-events: none;
}

.node__icon {
  fill: none;
  stroke: var(--node-on-cat);
  stroke-width: var(--stroke-base);
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.node__cat,
.node__title,
.node__sub,
.node__badge text {
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

.node__cat {
  fill: var(--node-text);
  font-size: var(--font-size-node-meta);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.node__title {
  fill: var(--node-text);
  font-size: var(--font-size-node-title);
  font-weight: var(--font-weight-medium);
}

.node__sub {
  fill: var(--node-subtext);
  font-size: var(--font-size-node-meta);
}

.node__badge rect {
  fill: var(--node-badge-bg);
  stroke: var(--color-border-control);
  stroke-width: var(--border-width);
}

.node__badge text {
  fill: var(--node-text);
  font-size: var(--font-size-node-meta);
  font-weight: var(--font-weight-semibold);
  text-anchor: middle;
}

.node__badge[data-kind='active'] rect,
.node__badge[data-kind='done'] rect {
  stroke: var(--canvas-edge-active);
  stroke-width: var(--stroke-base);
}

/* Anillo de seleccion y foco (>= 2px, contraste >= 3:1) */
.node__ring {
  fill: none;
  stroke: var(--node-ring);
  stroke-width: var(--node-ring-width);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.node--selected .node__ring {
  opacity: 1;
}

.node:focus-visible .node__ring {
  opacity: 1;
  stroke-width: var(--node-ring-focus-width);
}

.node--connect-source .node__ring,
.node--drop-target .node__ring {
  opacity: 1;
  stroke-dasharray: 6 4;
}

.node--connect-target .node__ring {
  opacity: 0.55;
  stroke-dasharray: 3 4;
}

/* Puertos circulares de entrada y salida */
.handle__dot {
  fill: var(--node-handle-bg);
  stroke: var(--cat);
  stroke-width: var(--stroke-bold);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform var(--transition-fast),
    fill var(--transition-fast);
}

.handle__hit {
  fill: transparent;
  cursor: crosshair;
}

.handle--out:hover .handle__dot,
.node--connecting .handle--out .handle__dot {
  fill: var(--cat);
  transform: scale(1.35);
}

.canvas--connecting .node:not(.node--connecting) .handle--in .handle__dot,
.node--drop-target .handle--in .handle__dot,
.node--connect-target .handle--in .handle__dot {
  fill: var(--node-handle-active);
  transform: scale(1.5);
}

/* Recorrido de prueba */
.canvas--simulating .node {
  opacity: var(--node-dim-opacity);
}

.canvas--simulating .node--sim-done,
.canvas--simulating .node--sim-active {
  opacity: 1;
}

.node--sim-done .node__card {
  stroke: var(--canvas-edge-active);
}

.node--sim-active .node__ring {
  opacity: 1;
  stroke: var(--canvas-edge-active);
  stroke-width: var(--node-ring-focus-width);
}

/* Conexiones */
.edge {
  cursor: pointer;
}

.edge:focus-visible {
  outline: none;
  box-shadow: none;
}

.edge__hit {
  fill: none;
  stroke: transparent;
  stroke-width: 28px;
}

.edge__line,
.edge__temp {
  fill: none;
  stroke: var(--canvas-edge);
  stroke-width: var(--canvas-edge-width);
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke var(--transition-fast);
}

.edge:hover .edge__line {
  stroke: var(--color-text-primary);
}

.edge--conditional .edge__line {
  stroke: var(--canvas-edge-conditional);
  stroke-width: var(--canvas-edge-conditional-width);
  stroke-dasharray: 8 6;
}

.edge--selected .edge__line,
.edge:focus-visible .edge__line {
  stroke: var(--node-ring);
  stroke-width: var(--stroke-bold);
  stroke-dasharray: 8 6;
  animation: edge-flow 0.9s linear infinite;
}

.edge--done .edge__line {
  stroke: var(--canvas-edge-active);
}

.edge--active .edge__line,
.edge__temp {
  stroke: var(--canvas-edge-active);
  stroke-width: var(--stroke-bold);
  stroke-dasharray: 8 6;
  animation: edge-flow 0.6s linear infinite;
}

@keyframes edge-flow {
  to {
    stroke-dashoffset: -14;
  }
}

.arrow {
  fill: var(--canvas-edge);
}

.arrow-cond {
  fill: var(--canvas-edge-conditional);
}

.arrow-active {
  fill: var(--canvas-edge-active);
}

.edge__label rect {
  fill: var(--canvas-edge-label-bg);
  stroke: var(--color-border-control);
  stroke-width: var(--border-width);
}

.edge__label text {
  fill: var(--canvas-edge-label-text);
  font-size: var(--font-size-node-meta);
  font-weight: var(--font-weight-medium);
  dominant-baseline: central;
  pointer-events: none;
}

.edge__diamond {
  fill: var(--color-text-secondary);
  pointer-events: none;
}