/* ── Infraestructura · demo: dónde está el cuello (13/10/2026) ──────────────
   static/js/infra_demo.js. La ventana, la cinta, el duelo y los avisos son los
   de la demo del Planner (pd-*) y las barras las de Diagnóstico (dd-par-*); aquí
   va el diagrama vivo. */

/* Mientras dura: el diagrama a todo lo ancho; la energía y las recomendaciones
   (sin SCADA no hay nada que enseñar) se apartan. */
.ix-demo-on .infra-grid { grid-template-columns: minmax(0, 1fr); }
.ix-demo-on #ene-bloque, .ix-demo-on .infra-ai { display: none; }
.ix-panel { grid-template-columns: minmax(270px, .9fr) minmax(0, 2fr) minmax(260px, 1.05fr); }
@container (max-width: 1050px) { .ix-panel { grid-template-columns: minmax(0, 1fr); } }
#ix-cv { width: 100%; display: block; }
.pd-ley.ix-cuello { background: var(--text0); height: 3px; vertical-align: 2px; }

/* Los nodos: anillo de carga, encendidos o no, y el cuello marcado. */
.ix-node { transition: border-color .3s, box-shadow .3s, opacity .3s; --ix-c: #3fb950; border-left-color: var(--border2); }
.ix-node.ix-on { border-left-color: var(--ix-c); }
.ix-node.ix-sin { opacity: .45; }
.ix-anillo { width: 30px; height: 30px; }
.ix-an-pista { fill: none; stroke: var(--bg3); stroke-width: 4; }
.ix-an-valor { fill: none; stroke: var(--ix-c); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .4s ease-out; }
.ix-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); display: none;
  padding: 1px 9px; border-radius: 999px; background: var(--red); color: #fff; font-size: .82rem; font-weight: 800;
  letter-spacing: .08em; white-space: nowrap; }
.ix-node.ix-cuello { border-color: var(--red); animation: ix-cuello 1.4s ease-in-out infinite; z-index: 3; }
.ix-node.ix-cuello .ix-badge { display: block; }
@keyframes ix-cuello { 50% { box-shadow: 0 0 0 3px rgba(248,81,73,.35), 0 0 26px rgba(248,81,73,.45); } }

/* Los tramos: material corriendo hacia lo que trabaja, más deprisa cuanto más pasa. */
.ix-flujo { fill: none; stroke: #58a6ff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2 10; opacity: 0; transition: opacity .4s; animation: ix-corre 1.2s linear infinite; }
.ix-flujo.on { opacity: 1; }
@keyframes ix-corre { to { stroke-dashoffset: -24; } }