/* Diagrama SVG de la red. */
.topo-wrap {
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--bg-elev);
  background-blend-mode: normal;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.topo-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--topo-overlay);
  pointer-events: none;
}

.topo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.link {
  stroke: var(--border-strong);
  stroke-width: 2;
  transition: stroke 0.2s;
}

.link.is-active {
  stroke: var(--request);
  stroke-width: 3;
}

.link.is-active-vpn {
  stroke: var(--vpn);
  stroke-width: 3;
}

.tunnel {
  fill: none;
  stroke: var(--vpn);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.55;
  animation: dash 1.2s linear infinite;
}

.tunnel.is-active {
  opacity: 1;
  stroke-width: 3;
}

.tunnel__label {
  fill: var(--vpn);
  font: 600 12px var(--font-mono);
}

@keyframes dash {
  to { stroke-dashoffset: -12; }
}

.node__body {
  fill: var(--panel-2);
  stroke: var(--border-strong);
  stroke-width: 2;
  transition: stroke 0.2s, fill 0.2s;
}

.node__body--cloud {
  fill: var(--node-cloud);
}

.node__screen {
  fill: var(--node-screen);
}

.node__detail {
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.node__led {
  fill: var(--ok);
}

.node--router .node__body {
  fill: var(--node-router);
  stroke: var(--accent);
}

/* Switch: pequeño y discreto; no es un nodo de la simulación. */
.switch__body {
  fill: var(--node-router);
  stroke: var(--border-strong);
  stroke-width: 2;
}

.switch__port {
  fill: var(--text-dim);
}

.switch__label {
  fill: var(--text-dim);
  font: 10px var(--font-mono);
  text-anchor: middle;
}

.node__name {
  fill: var(--text);
  font: 600 13px var(--font-sans);
  text-anchor: middle;
}

.node__sub {
  fill: var(--text-muted);
  font: 11px var(--font-mono);
  text-anchor: middle;
}

/* El mismo círculo numerado de las interfaces del dibujo, delante de su línea. */
.node__num {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.node__numtxt {
  fill: var(--accent);
  font: 700 9.5px var(--font-sans);
  text-anchor: middle;
}

.node.is-active .node__body {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) var(--glow-strength), transparent));
}

.node.is-ok .node__body {
  stroke: var(--ok);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ok) var(--glow-strength), transparent));
}

.node.is-drop .node__body {
  stroke: var(--drop);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--drop) var(--glow-strength), transparent));
}

/* Paquete animado */
.packet.is-hidden {
  display: none;
}

.packet__body {
  fill: var(--request);
  stroke: var(--on-accent);
  stroke-width: 1.5;
}

.packet__label {
  fill: var(--on-accent);
  font: 700 11px var(--font-mono);
  text-anchor: middle;
}

.packet--nat .packet__body { fill: var(--warn); }
.packet--reply .packet__body { fill: var(--reply); }
.packet--ok .packet__body { fill: var(--ok); }
.packet--drop .packet__body { fill: var(--drop); }
.packet--vpn .packet__body { fill: var(--vpn); }

/* «Puertas» del router: punto en cada enlace y etiqueta de la interfaz. */
.port__dot {
  fill: var(--panel);
  stroke: var(--border-strong);
  stroke-width: 2;
}

.port__chip {
  fill: var(--panel);
  stroke: var(--border-strong);
  stroke-width: 1.2;
}

.port__label {
  fill: var(--text-muted);
  font: 600 9.5px var(--font-mono);
  text-anchor: middle;
}

/* Interfaz numerada: una chapa pegada al router; el número se lee junto a su línea bajo el router. */
.port__chip--num {
  fill: var(--panel);
  stroke: var(--accent);
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.18));
}

.port__label--num {
  fill: var(--accent);
  font: 700 11.5px var(--font-sans);
}

/* Entrada en el color de acento; salida en ámbar. */
.port.is-in .port__chip,
.port__dot.is-in {
  fill: var(--accent);
  stroke: var(--accent);
}

.port.is-out .port__chip,
.port__dot.is-out {
  fill: var(--warn);
  stroke: var(--warn);
}

.port.is-in .port__label,
.port.is-out .port__label {
  fill: var(--on-accent);
}

/* Dibujo muy pequeño (móvil): solo los nombres. Las IPs y las interfaces siguen en el recorrido paso a paso. */
.topo--compact .node__sub,
.topo--compact .node__line,
.topo--compact .port,
.topo--compact .tunnel__label {
  display: none;
}