/* ============================================================
   DIAGRAMAS ANIMADOS POR CAPACIDAD
   .viz-flow (automatización) · .viz-dash (analítica) · .viz-stack (enterprise)
   ============================================================ */
.viz {
    width: 100%;
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    backdrop-filter: blur(8px);
    box-shadow: var(--sh-md);
    overflow: hidden;
    position: relative;
}
.viz-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--hairline);
    font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-light-mut);
}
.viz-head .dots { display: inline-flex; gap: 5px; }
.viz-head .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
.viz-head .live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-dk); }
.viz-head .live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: vizPulse 1.8s var(--ease) infinite; }
@keyframes vizPulse { 0%,100%{ box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent);} 70%{ box-shadow: 0 0 0 6px transparent;} }
.viz-body { padding: 1.2rem; }

/* ── FLOW (Automatización) ─────────────────────────── */
.flow-svg { width: 100%; height: auto; display: block; }
.flow-conn { fill: none; stroke: var(--hairline-strong); stroke-width: 2; }
.flow-conn-lit {
    fill: none; stroke: var(--accent); stroke-width: 2;
    stroke-dasharray: 10 8; animation: flowDash 1s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -18; } }
.flow-node rect { fill: var(--card-solid); stroke: var(--hairline-strong); stroke-width: 1.5; }
.flow-node text { fill: var(--on-light); font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }
.flow-node .nd { fill: var(--accent); }
.flow-node { animation: nodePop 4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.flow-node.n2 { animation-delay: 0.4s; }
.flow-node.n3 { animation-delay: 0.8s; }
.flow-node.n4 { animation-delay: 1.2s; }
.flow-node.n5 { animation-delay: 1.6s; }
@keyframes nodePop { 0%,100%{ transform: scale(1);} 4%{ transform: scale(1.06);} 12%{ transform: scale(1);} }
.flow-packet { fill: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent)); }

/* ── DASH (Analítica) ──────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.dash-bar { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-dk)); transform-origin: bottom; transform: scaleY(0.12); transition: transform 1.1s var(--cinema); }
.viz-dash.in .dash-bar { transform: scaleY(var(--h, 0.5)); }
.viz-dash.in .dash-bar { animation: barBreathe 3.4s var(--ease) infinite; }
@keyframes barBreathe { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.12);} }
.dash-kpi { text-align: right; }
.dash-kpi .v { font-family: var(--f-display); font-size: 2rem; letter-spacing: -0.03em; line-height: 1; }
.dash-kpi .v s { font-style: italic; color: var(--accent-dk); font-size: 0.6em; text-decoration: none; }
.dash-kpi .t { font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-light-mut); margin-top: 4px; }
.dash-line { width: 100%; height: 46px; margin-top: 0.8rem; display: block; }
.dash-line path.area { fill: color-mix(in srgb, var(--accent) 12%, transparent); opacity: 0; transition: opacity 0.8s ease 0.6s; }
.dash-line path.trend { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; }
.viz-dash.in .dash-line path.trend { transition: stroke-dashoffset 1.4s var(--cinema) 0.3s; stroke-dashoffset: 0; }
.viz-dash.in .dash-line path.area { opacity: 1; }
.dash-line circle { fill: var(--accent); opacity: 0; transition: opacity 0.3s ease 1.4s; }
.viz-dash.in .dash-line circle { opacity: 1; animation: dotFloat 2.6s var(--ease) 1.6s infinite; }
@keyframes dotFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }

/* ── STACK (Enterprise) ────────────────────────────── */
.stack-layers { display: flex; flex-direction: column; gap: 8px; position: relative; }
.stack-layer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 0.9rem; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
    background: var(--card-solid);
    font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--on-light);
    opacity: 0; transform: translateX(14px);
    transition: opacity 0.6s var(--cinema), transform 0.6s var(--cinema);
}
.viz-stack.in .stack-layer { opacity: 1; transform: none; }
.viz-stack.in .stack-layer:nth-child(2) { transition-delay: 0.1s; }
.viz-stack.in .stack-layer:nth-child(3) { transition-delay: 0.2s; }
.viz-stack.in .stack-layer:nth-child(4) { transition-delay: 0.3s; }
.stack-layer .led { width: 8px; height: 8px; border-radius: 50%; background: #1c8a52; box-shadow: 0 0 0 0 rgba(28,138,82,.5); animation: ledBlink 2.2s var(--ease) infinite; }
.stack-layer:nth-child(2) .led { animation-delay: 0.5s; }
.stack-layer:nth-child(3) .led { animation-delay: 1s; }
.stack-layer:nth-child(4) .led { animation-delay: 1.5s; }
@keyframes ledBlink { 0%,100%{ box-shadow: 0 0 0 0 rgba(28,138,82,.5);} 60%{ box-shadow: 0 0 0 6px transparent;} }
.stack-pulse {
    position: absolute; left: -1px; top: 6px; width: 3px; border-radius: 2px;
    height: 24px; background: linear-gradient(180deg, transparent, var(--accent), transparent);
    opacity: 0;
}
.viz-stack.in .stack-pulse { opacity: 1; animation: pulseDown 2.6s var(--cinema) infinite; }
@keyframes pulseDown { 0%{ top: 4px; opacity: 0;} 15%{ opacity: 1;} 85%{ opacity: 1;} 100%{ top: calc(100% - 28px); opacity: 0;} }

[data-motion="reduced"] .flow-conn-lit,
[data-motion="reduced"] .flow-node,
[data-motion="reduced"] .dash-bar,
[data-motion="reduced"] .stack-layer .led,
[data-motion="reduced"] .stack-pulse,
[data-motion="reduced"] .dash-line circle { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .flow-conn-lit, .flow-node, .dash-bar, .stack-layer .led, .stack-pulse, .dash-line circle { animation: none !important; }
}