/* Base común de los diagramas SVG (fuentes y MCP): líneas, píldoras, insignias y centro. */
.diagram { width: 100%; height: auto; max-width: 960px; margin: 0 auto; display: block; }

.diagram line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.5;
  animation: dash-flow 2s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -24; } }

.diagram text {
  fill: var(--ink);
  font: 700 12px "Plus Jakarta Sans", sans-serif;
  text-anchor: middle;
}

/* Píldora con insignia */
.diagram .pill { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.diagram .pill--dashed { stroke-dasharray: 5 4; }
.diagram .badge-muted { fill: var(--muted); }
.diagram .badge-text { fill: #fff; font-size: 9px; font-weight: 800; }
.diagram .pill-label { text-anchor: start; font-size: 13px; }

/* Centro de DalIA */
.diagram .core { fill: var(--accent); }
.diagram .core-title { fill: var(--accent-ink); font-size: 17px; font-weight: 800; }
.diagram .core-sub { fill: var(--accent-ink); font-size: 11px; font-weight: 600; opacity: 0.9; }
.diagram .caption { font-size: 12px; }

/* Puntos animados: consulta que llega y respuesta que vuelve */
.diagram .flow-dot--answer { fill: var(--teal); }
.diagram .flow-dot--trunk { fill: var(--accent); }