/* =========================================================================
   flow.css — Flujo de trabajo del héroe (lo dibuja flow.js dentro de [data-flow])
   Referencia estructural: el lienzo de n8n (nodos, puertos, cables curvos,
   insignias de ejecución). Lenguaje propio: plano de ingeniería. Trazos de
   1px, esquinas de 2px, sin glow, sin blur, sin degradados de relleno.

   CAPAS (de abajo arriba, dentro del <svg>):
     cables (.fe) → paquetes (.pk) → nodos (.fn) → etiquetas flotantes (.fn-tip)

   ESTADOS DE UN NODO (clases sobre <g class="fn">)
     rest       sin clase: cuadro gris, cables grises
     is-hover   cursor encima: trazo olivo claro, etiqueta de tipo, cables propios
                en olivo (.is-rel); el resto del diagrama baja a .35
     is-run     "ejecutando" (~0.4 s): trazo olivo claro + anillo fino exterior
     is-done    insignia "hecho" (círculo con palomita), ~4 s
     is-drag    arrastrándose: trazo olivo claro, cursor grabbing
   ESTADOS DE UN CABLE (clases sobre <g class="fe">)
     rest · is-live (viaja un paquete; se apaga con fundido) · is-rel (hover)
   MODOS DEL CONTENEDOR (clases sobre .flow-bg)
     is-full   escritorio, 11 nodos        is-fit    tablet táctil, 5 nodos
     is-strip  móvil, 5 nodos en cinta     is-lite   fit o strip
     is-ui     interacción activa (hover:hover y pointer:fine, >= 920px)
     is-focus  hay un nodo bajo el cursor (atenúa el resto)

   Posición/z-index/pointer-events de .flow-bg viven en styles.css (capa v3).
   ========================================================================= */

/* ---------- 1. CONTENEDOR Y MÁSCARAS ---------- */
.flow-bg {
  contain: layout paint;
  /* flow.js fija --fx = borde izquierdo del primer nodo: el desvanecido ocurre a
     su izquierda (sobre el texto) y los disparadores se ven al 100%. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, transparent calc(var(--fx, 45%) - 90px), #000 calc(var(--fx, 45%) - 10px), #000 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, transparent calc(var(--fx, 45%) - 90px), #000 calc(var(--fx, 45%) - 10px), #000 100%);
}
.flow-bg > svg {
  display: block;
  width: 100%; height: 100%;
  max-width: none;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  /* desvanecido vertical: bajo la barra de navegación y al pie del héroe */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
}
/* Todos los trazos miden 1px reales aunque el diagrama se escale */
.flow-bg svg * { vector-effect: non-scaling-stroke; }

/* Móvil: composición propia (cinta de 5 nodos al pie), más tenue, sin máscara
   horizontal porque ya vive bajo el texto. */
.flow-bg.is-strip {
  opacity: 0.66;
  -webkit-mask-image: none; mask-image: none;
}
.flow-bg.is-strip > svg { -webkit-mask-image: none; mask-image: none; }
.flow-bg.is-fit { opacity: 0.62; }

/* ---------- 2. CABLES ---------- */
.fe { transition: opacity var(--d-fast) var(--ease); }
.fe-path {
  fill: none;
  stroke: rgba(242, 243, 240, 0.22);
  stroke-width: 1;
  transition: stroke var(--d) var(--ease);
}
.fe-arrow {
  fill: none;
  stroke: rgba(242, 243, 240, 0.30);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: stroke var(--d) var(--ease);
}
/* is-live: un paquete recorre el cable; al llegar se apaga con fundido */
.fe.is-live .fe-path, .fe.is-live .fe-arrow { stroke: var(--accent-line); transition-duration: 0.12s; }
/* is-rel: cable del nodo con hover */
.fe.is-rel .fe-path, .fe.is-rel .fe-arrow { stroke: var(--accent-soft); }

/* ---------- 3. PAQUETES (punto + 3 puntos de estela, sin glow) ---------- */
.pk circle { fill: var(--accent-soft); stroke: none; }
.pk .pk-1 { opacity: 0.55; }
.pk .pk-2 { opacity: 0.32; }
.pk .pk-3 { opacity: 0.16; }

/* ---------- 4. NODOS ---------- */
.fn { transition: opacity var(--d-fast) var(--ease); }
.fn-hit  { fill: transparent; stroke: none; }
.fn-box {
  fill: var(--surface);
  stroke: rgba(242, 243, 240, 0.28);
  stroke-width: 1;
  transition: stroke var(--d-fast) var(--ease);
}
.fn-ring {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.fn-icon path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-bg.is-strip .fn-icon path { stroke-width: 1.2; }
.fn-port {
  stroke: rgba(242, 243, 240, 0.42);
  stroke-width: 1;
  transition: stroke var(--d-fast) var(--ease), fill var(--d-fast) var(--ease);
}
.fn-port-in  { fill: var(--bg); }
.fn-port-out { fill: rgba(242, 243, 240, 0.42); }
.fn-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fl, 10px);
  letter-spacing: 0.12em;
  text-anchor: middle;
  fill: var(--mute);
  transition: fill var(--d-fast) var(--ease);
}

/* hover / running / dragging comparten el mismo realce */
.fn.is-hover .fn-box, .fn.is-run .fn-box, .fn.is-drag .fn-box { stroke: var(--accent-soft); }
.fn.is-hover .fn-port, .fn.is-run .fn-port, .fn.is-drag .fn-port { stroke: var(--accent-soft); }
.fn.is-hover .fn-port-out, .fn.is-run .fn-port-out, .fn.is-drag .fn-port-out { fill: var(--accent-soft); }
.fn.is-hover .fn-label, .fn.is-run .fn-label, .fn.is-drag .fn-label { fill: var(--ink); }
.fn.is-run .fn-ring { opacity: 0.55; }

/* insignia "hecho": círculo 14px con palomita */
.fn-badge { opacity: 0; transition: opacity var(--d) var(--ease); }
.fn.is-done .fn-badge { opacity: 1; transition-duration: var(--d-fast); }
.fn-badge-c { fill: var(--bg); stroke: var(--accent-soft); stroke-width: 1; }
.fn-check {
  fill: none;
  stroke: var(--accent-soft);
  stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 5. ETIQUETA FLOTANTE (tipo del nodo, solo en hover) ---------- */
.fn-tip { opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.fn-tip-in { transform: translateY(4px); transition: transform var(--d-fast) var(--ease); }
.fn-tip.is-on { opacity: 1; }
.fn-tip.is-on .fn-tip-in { transform: translateY(0); }
.fn-tip-bg { fill: var(--bg); stroke: var(--accent-line); stroke-width: 1; }
.fn-tip-t {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ft, 10px);
  letter-spacing: 0.12em;
  text-anchor: middle;
  fill: var(--ink-2);
}
.fn-tip-t2 { fill: var(--accent-soft); }

/* ---------- 6. CABECERA DEL FLUJO (estado) Y BARRIDO DE ENTRADA ---------- */
.fl-head {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fh, 10px);
  letter-spacing: 0.16em;
  text-anchor: end;
  fill: var(--mute);
}
.fl-state { fill: var(--accent-soft); }
.fl-scan { stroke: var(--accent-soft); stroke-width: 1; opacity: 0.55; }

/* ---------- 7. INTERACCIÓN (solo con is-ui: hover:hover + pointer:fine) ---------- */
.flow-bg.is-ui .fn { pointer-events: all; cursor: grab; }
.flow-bg.is-ui .fn.is-drag { cursor: grabbing; }
.flow-bg.is-ui .fn.is-drag .fn-hit { cursor: grabbing; }

/* hover: el nodo y sus cables se realzan; el resto baja a .35 */
.flow-bg.is-focus .fn:not(.is-rel),
.flow-bg.is-focus .fe:not(.is-rel) { opacity: 0.35; }

/* ---------- 8. MÓVIL: la cinta necesita aire al pie del héroe ---------- */
@media (max-width: 919px) {
  .hero { padding-bottom: calc(4.5rem + 56px); }
}

/* ---------- 9. IMPRESIÓN ---------- */
@media print {
  .flow-bg { display: none !important; }
}