/* Diagramas conceptuales (js/ui/diagrams). Solo usan variables de tema. */
/*
 * Ocupa el ancho disponible, pero nunca más de 1,2× su tamaño de diseño
 * (ancho del viewBox): así el texto no crece sin límite en pantallas anchas.
 */
.dgm {
  --dgm-max-scale: 1.2;
  display: block;
  width: 100%;
  max-width: calc(var(--dgm-w, 560) * var(--dgm-max-scale) * 1px);
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.dgm__text {
  fill: var(--text);
  font: 13px var(--font-sans);
}

.dgm__mono { font: 11.2px var(--font-mono); fill: var(--text); }
.dgm__small { font-size: 11.5px; }
.dgm__tiny { font-size: 10px; }
.dgm__muted { fill: var(--text-muted); }
.dgm__strong { font-weight: 700; fill: var(--text-strong); }
.dgm__caption { fill: var(--text-soft); font-size: 12.5px; }
.dgm__col { fill: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dgm__changed { fill: var(--warn); font-weight: 700; }
.dgm__ok { fill: var(--ok); font-weight: 700; }
.dgm__drop { fill: var(--drop); font-weight: 700; }
.dgm__vpn { fill: var(--vpn); }
.dgm__num { fill: var(--accent); font: 700 12px var(--font-mono); }

.dgm__box { fill: var(--bg-elev); stroke: var(--border-strong); stroke-width: 1.5; }
.dgm__chip-box { fill: var(--panel-2); }
.dgm__chip--out .dgm__chip-box { stroke: var(--accent); }
.dgm__chip-title { font: 700 11px var(--font-sans); fill: var(--text-muted); letter-spacing: 0.03em; }
.dgm__router { fill: var(--node-router); stroke: var(--accent); }
.dgm__stage { fill: var(--panel-2); stroke: var(--accent); }
.dgm__lan { fill: none; stroke: var(--border-strong); stroke-dasharray: 5 4; }
.dgm__seg { fill: var(--panel-2); }
.dgm__cloud { fill: var(--node-cloud); stroke: var(--border-strong); stroke-width: 1.5; }
.dgm__pill { fill: var(--accent-soft); stroke: var(--accent); }
.dgm__outer { fill: var(--vpn-soft); stroke: var(--vpn); stroke-width: 1.5; }
.dgm__inner { fill: var(--panel); stroke: var(--vpn); stroke-dasharray: 5 4; }

.dgm__rule { fill: var(--panel-2); }
.dgm__rule--miss { stroke: var(--border-strong); }
.dgm__rule--hit { fill: var(--drop-soft); stroke: var(--drop); stroke-width: 2; }
.dgm__rule--skip { opacity: 0.45; }
.dgm__rule--policy { fill: none; stroke-dasharray: 5 4; opacity: 0.7; }
.dgm__result { font-size: 11.5px; font-weight: 600; }
.dgm__result--miss { fill: var(--text-muted); }
.dgm__result--hit { fill: var(--drop); }
.dgm__result--skip { fill: var(--text-dim); }

.dgm__arrow { stroke: var(--text-muted); stroke-width: 1.6; }
.dgm__arrow--accent { stroke: var(--accent); }
.dgm__arrow--vpn { stroke: var(--vpn); stroke-width: 2; }
.dgm__arrow--dashed { stroke-dasharray: 4 4; }
.dgm__arrow--flow { stroke-dasharray: 7 5; animation: dgm-flow 1s linear infinite; }
.dgm__head { fill: var(--text-muted); }
.dgm__head--accent { fill: var(--accent); }
.dgm__head--vpn { fill: var(--vpn); }

.dgm__eye path { fill: var(--panel); stroke: var(--accent); stroke-width: 1.6; }
.dgm__eye circle { fill: var(--accent); }
.dgm__lock rect { fill: var(--vpn); }
.dgm__lock path { stroke: var(--vpn); stroke-width: 1.8; }

@keyframes dgm-flow {
  to { stroke-dashoffset: -12; }
}