/*
 * Aiden UI · data-flow (Rediseño 7-oct, Fase A §2 #4 — kit/data-flow, HECHO 22-oct)
 * Copia literal del kit (direccion/diseno/kit/data-flow/data-flow.css), sin tocar: traducción de
 * registry/components/data-flow/data-flow.module.css (Arc UI). Mismas clases con el prefijo
 * aui-data-flow-, mismas medidas, tiempos y variables de foundation.css. Variables locales del
 * original con el prefijo --aui-df- (--flow-accent, --hit, --tx) para no chocar con las de otro
 * componente de la misma página.
 */
.aui-data-flow {
    --aui-df-accent: var(--accent);
    display: grid;
    width: 100%;
    min-width: 0;
    margin: 0;
    container-type: inline-size;
    overflow-x: clip;
    color: var(--foreground);
    -webkit-tap-highlight-color: transparent;
}

/* El escenario reserva su forma antes de medirse, luego toma la altura exacta del diagrama. */
.aui-data-flow-stage { position: relative; width: 100%; min-width: 0; }
.aui-data-flow:not([data-ready]) .aui-data-flow-stage { aspect-ratio: 5 / 2; }
@container (width < 600px) { .aui-data-flow:not([data-ready]) .aui-data-flow-stage { aspect-ratio: 390 / 484; } }
.aui-data-flow-stage > * { opacity: 0; transition: opacity var(--duration-considered) var(--ease-standard); }
.aui-data-flow[data-ready] .aui-data-flow-stage > * { opacity: 1; }

.aui-data-flow-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
/* Los registros van por encima de los nodos para verse entrar y cambiar dentro del núcleo. */
.aui-data-flow-layer + .aui-data-flow-layer, .aui-data-flow-layer:last-child { z-index: 2; }
.aui-data-flow-layer:first-child { z-index: 0; }

/* Los trazos son hairlines discretos; los ligados al nodo con el ratón encima toman el acento y el resto se atenúa. */
.aui-data-flow-path { fill: none; stroke: var(--border-strong); stroke-width: 1.25; transition: stroke var(--duration-standard) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard); }
[data-theme="dark"] .aui-data-flow-path { stroke: color-mix(in oklab, var(--text-muted) 40%, var(--border-strong)); }
.aui-data-flow-path[data-on] { stroke: color-mix(in oklab, var(--aui-df-accent) 62%, var(--border-strong)); }
.aui-data-flow-stage[data-focus] .aui-data-flow-path:not([data-on]) { opacity: .4; }

.aui-data-flow-slot { transition: opacity var(--duration-standard) var(--ease-standard); }
.aui-data-flow-slot[data-dim] { opacity: .22; }

/* Los registros en bruto son puntos huecos; los procesados, cuadrados sólidos en el acento. */
.aui-data-flow-raw { fill: var(--surface-raised); stroke: var(--text-secondary); stroke-width: 1.5; }
.aui-data-flow-done { fill: var(--aui-df-accent); }
.aui-data-flow-trail-raw, .aui-data-flow-trail-done { fill: none; stroke-width: 2; stroke-linecap: round; }
.aui-data-flow-trail-raw { stroke: var(--text-muted); stroke-opacity: .45; }
.aui-data-flow-trail-done { stroke: var(--aui-df-accent); stroke-opacity: .5; }

.aui-data-flow-port { fill: var(--surface-raised); stroke: var(--border-strong); stroke-width: 1.25; }
.aui-data-flow-port-hit { fill: var(--aui-df-accent); }

.aui-data-flow-ring { fill: none; stroke: var(--border-strong); stroke-width: 1.25; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.aui-data-flow-pulse { fill: none; stroke: var(--aui-df-accent); stroke-width: 1.25; vector-effect: non-scaling-stroke; }

/* Nodos. El borde se calienta con el acento un instante cuando un registro sale o llega (--hit del bucle). */
.aui-data-flow-chip { position: absolute; z-index: 1; display: flex; min-width: 0; align-items: center; gap: var(--space-3); padding: 0 var(--space-4); border: 1px solid color-mix(in oklab, var(--aui-df-accent) calc(var(--aui-df-hit, 0) * 40%), var(--border)); border-radius: 16px; background: var(--surface-raised); box-sizing: border-box; cursor: default; transition: opacity var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
.aui-data-flow-chip[data-on] { border-color: color-mix(in oklab, var(--aui-df-accent) 55%, var(--border-strong)); }
.aui-data-flow-chip[data-dim] { opacity: .5; }
.aui-data-flow[data-layout="stack"] .aui-data-flow-chip { flex-direction: column; justify-content: center; gap: 6px; padding: 0 var(--space-2); border-radius: 14px; }

.aui-data-flow-mark { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--text-secondary); object-fit: contain; }
.aui-data-flow-mark > svg { width: 16px; height: 16px; stroke-width: 1.75; }
.aui-data-flow-text { display: grid; min-width: 0; }
.aui-data-flow[data-layout="stack"] .aui-data-flow-text { justify-items: center; }
.aui-data-flow-label { overflow: hidden; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
.aui-data-flow-meta { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
.aui-data-flow[data-layout="stack"] .aui-data-flow-chip .aui-data-flow-meta { display: none; }
.aui-data-flow[data-layout="stack"] .aui-data-flow-label { max-width: 100%; font-size: var(--text-xs); }

.aui-data-flow-core { position: absolute; z-index: 1; border: 1px solid color-mix(in oklab, var(--aui-df-accent) calc(var(--aui-df-hit, 0) * 45%), var(--border)); border-radius: 28%; background: var(--surface-raised); box-sizing: border-box; cursor: default; }
.aui-data-flow-core[data-on] { border-color: color-mix(in oklab, var(--aui-df-accent) 55%, var(--border-strong)); }

.aui-data-flow-caption { position: absolute; z-index: 1; display: grid; min-width: 0; pointer-events: none; }
.aui-data-flow-caption[data-place="below"] { justify-items: center; text-align: center; transform: translateX(-50%); }
.aui-data-flow-caption[data-place="side"] { transform: translateY(-50%); }
/* Al lado del núcleo en diseños estrechos el recuento envuelve bajo su número en vez de truncar. */
.aui-data-flow-caption[data-place="side"] .aui-data-flow-meta { white-space: normal; text-overflow: clip; }
.aui-data-flow-num { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Una etiqueta pequeña con una línea de detalle, visible mientras su nodo está enfocado o con el ratón encima. */
.aui-data-flow-tag { position: absolute; top: 100%; left: 50%; z-index: 3; max-width: 16rem; padding: 3px var(--space-2); border-radius: var(--radius-pill); color: var(--background); background: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; --aui-df-tx: -50%; transform: translate(var(--aui-df-tx), 4px) scale(.96); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.aui-data-flow-tag[data-place="above"] { top: auto; bottom: 100%; transform: translate(var(--aui-df-tx), -4px) scale(.96); }
/* Las etiquetas de los nodos de los extremos se alinean al borde exterior para no salirse nunca del diagrama. */
.aui-data-flow-chip[data-side="src"] .aui-data-flow-tag { left: 0; --aui-df-tx: 0%; transform-origin: 0 0; }
.aui-data-flow-chip[data-side="dst"] .aui-data-flow-tag { left: auto; right: 0; --aui-df-tx: 0%; transform-origin: 100% 0; }
.aui-data-flow-chip[data-on] .aui-data-flow-tag, .aui-data-flow-core[data-on] .aui-data-flow-tag { opacity: 1; transform: translate(var(--aui-df-tx), 8px); transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
.aui-data-flow-core[data-on] .aui-data-flow-tag[data-place="above"] { transform: translate(var(--aui-df-tx), -10px); }
.aui-data-flow-chip[data-on], .aui-data-flow-core[data-on] { z-index: 3; }

.aui-data-flow-figcaption { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); text-align: center; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
    .aui-data-flow-stage > *, .aui-data-flow-path, .aui-data-flow-slot, .aui-data-flow-chip, .aui-data-flow-tag { transition-duration: var(--duration-instant); }
}