/* Visuais animados de /services/redes-estruturadas (prefixo redes-). Markup: templates/services/_redes_visuals.html.
   Estado base = FINAL e estatico (reduced-motion e sem JS). Movimento so em @media (prefers-reduced-motion: no-preference).
   Animacoes continuas: apenas transform, opacity e stroke-dashoffset. Pausa: classe .is-paused (posta pelo JS fora da tela / aba oculta). */

.redes-fig {
  --redes-base: 14px;                 /* texto em unidades do viewBox (560 de largura); subido em telas menores (escala < 1) */
  --redes-fs: var(--redes-base);
  padding: var(--space-3);
}
.redes-fig--rack { --redes-fs: calc(var(--redes-base) * 1.075); }   /* viewBox 600 */
.redes-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.redes-fig--cab .redes-svg  { aspect-ratio: 560 / 400; }
.redes-fig--rack .redes-svg { aspect-ratio: 600 / 440; }
.redes-fig--wifi .redes-svg { aspect-ratio: 560 / 400; }

/* Tamanho do texto: efetivo >= 12.5px em cada largura (medido por script; faixas pela largura do SVG) */
@media (max-width: 1199px) { .redes-fig { --redes-base: 15.5px; } }
@media (max-width: 1099px) { .redes-fig { --redes-base: 17.5px; } }
@media (max-width: 999px)  { .redes-fig { --redes-base: 21px; } }
@media (max-width: 860px)  { .redes-fig { --redes-base: 10.5px; } }
@media (max-width: 767px)  { .redes-fig { --redes-base: 14.5px; } }
@media (max-width: 559px)  { .redes-fig { --redes-base: 17px; padding: 8px; } }
@media (max-width: 479px)  { .redes-fig { --redes-base: 21px; } }
@media (max-width: 399px)  { .redes-fig { --redes-base: 23.5px; } }
@media (max-width: 359px)  { .redes-fig { --redes-base: 26px; } }

/* Texto e blocos comuns -------------------------------------------------------- */
.redes-lbl { font-family: var(--font-sans); font-size: var(--redes-fs); font-weight: 600; fill: var(--navy-900); letter-spacing: 0; }
.redes-lbl--inv { fill: #fff; }
.redes-lbl--halo { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.redes-body { fill: var(--surface); stroke: var(--navy-900); stroke-width: 1.5; }
.redes-port { fill: var(--paper); stroke: var(--ink-500); stroke-width: 1.25; }
.redes-ico { fill: none; stroke: var(--navy-700); stroke-width: 2; stroke-linecap: round; }
.redes-ico-dot { fill: var(--orange-600); }

/* 1) Cabeamento --------------------------------------------------------------- */
.redes-led { fill: var(--line); }
.redes-led--on { fill: var(--orange-600); }
.redes-guide { stroke: var(--line); stroke-width: 2; stroke-dasharray: 4 5; }
.redes-cable { stroke: var(--navy-700); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.redes-pulse { stroke: var(--orange-600); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 24.9; stroke-dashoffset: 0; opacity: 0; }
.redes-plug { fill: var(--navy-900); transform-box: fill-box; transform-origin: center; }
.redes-lid { fill: var(--paper); stroke: var(--navy-900); stroke-width: 1.5; }
.redes-lid__slots { fill: none; stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.redes-rackbox { fill: none; stroke: var(--ink-500); stroke-width: 1.5; }
.redes-orgbar { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.redes-c-man { stroke: var(--navy-500); stroke-width: 2.25; }
.redes-c-cord { stroke: var(--navy-900); stroke-width: 3; }
.redes-c-up { stroke: var(--navy-700); stroke-width: 2.5; }
.redes-brk { fill: none; stroke: var(--ink-500); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.redes-ok circle { fill: var(--navy-900); stroke: var(--surface); stroke-width: 2.5; }
.redes-ok path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.redes-ok__in { transform-box: fill-box; transform-origin: center; }

/* 2) Rack isometrico (3 faces por solido: topo claro, esquerda media, direita escura; sem degrade) ------- */
.redes-top   { fill: var(--t); }
.redes-left  { fill: var(--l); }
.redes-right { fill: var(--r); }
.redes-top, .redes-left, .redes-right { stroke: var(--navy-900); stroke-opacity: 0.5; stroke-width: 0.75; stroke-linejoin: round; }
.redes-frame { --t: color-mix(in srgb, var(--navy-500) 30%, #fff); --l: var(--navy-700); --r: var(--navy-900); }
.redes-org   { --t: color-mix(in srgb, var(--ink-500) 12%, #fff); --l: color-mix(in srgb, var(--ink-500) 28%, #fff); --r: color-mix(in srgb, var(--ink-500) 66%, #fff); }
.redes-u-sw   { --t: color-mix(in srgb, var(--navy-500) 16%, #fff); --l: color-mix(in srgb, var(--navy-500) 55%, #fff); --r: var(--navy-700); }
.redes-u-core { --t: color-mix(in srgb, var(--navy-500) 22%, #fff); --l: var(--navy-500); --r: var(--navy-700); }
.redes-u-pp   { --t: var(--paper); --l: color-mix(in srgb, var(--ink-500) 18%, #fff); --r: color-mix(in srgb, var(--ink-500) 58%, #fff); }
.redes-u-fw   { --t: color-mix(in srgb, var(--navy-500) 40%, #fff); --l: var(--navy-700); --r: var(--navy-900); }
.redes-u-rt   { --t: color-mix(in srgb, var(--navy-500) 12%, #fff); --l: color-mix(in srgb, var(--navy-500) 36%, #fff); --r: color-mix(in srgb, var(--navy-700) 88%, #fff); }
.redes-u-org  { --t: color-mix(in srgb, var(--ink-500) 8%, #fff); --l: color-mix(in srgb, var(--ink-500) 14%, #fff); --r: color-mix(in srgb, var(--ink-500) 42%, #fff); }
.redes-u-dark { --t: color-mix(in srgb, var(--ink-500) 50%, #fff); --l: var(--ink-700); --r: var(--navy-900); }
.redes-floor { fill: color-mix(in srgb, var(--navy-500) 6%, #fff); stroke: var(--line); stroke-width: 1.5; stroke-linejoin: round; }

.redes-p { fill: var(--pf, var(--navy-900)); }
.redes-hatch { fill: none; stroke: var(--pf, var(--navy-900)); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.redes-unit--sw { --pf: var(--navy-900); }
.redes-unit--core { --pf: var(--paper); }
.redes-unit--pp { --pf: var(--navy-900); }
.redes-unit--fw { --pf: color-mix(in srgb, var(--paper) 90%, var(--navy-700)); }
.redes-unit--rt { --pf: var(--navy-900); }
.redes-unit--dark { --pf: var(--navy-900); }
.redes-unit--dark .redes-p { fill: var(--navy-900); stroke: var(--ink-500); stroke-width: 1; }
.redes-uled { fill: var(--orange-600); }
.redes-fingers path { fill: none; stroke: var(--navy-900); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.redes-cab--cord { stroke-width: 3; }
.redes-cab { stroke: var(--navy-900); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.redes-fig--rack .redes-pulse { stroke-width: 5; }
.redes-pulse--short { stroke-dasharray: 0.1 49.9; }
.redes-glow { opacity: 0; }
.redes-glow path { fill: var(--orange-600); fill-opacity: 0.4; }
.redes-ring { stroke: var(--orange-600); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.redes-leader { stroke: var(--ink-500); stroke-width: 1.25; stroke-linejoin: round; }
.redes-anchor { fill: var(--navy-900); stroke: var(--surface); stroke-width: 1.5; }

/* 3) Wi-Fi com controller ---------------------------------------------------- */
.redes-floor2 { fill: var(--paper); }
.redes-walls path { stroke: var(--ink-700); stroke-width: 2.5; stroke-linecap: round; }
.redes-walls__outer { stroke: var(--navy-900); stroke-width: 3; }
.redes-route { stroke: none; }
.redes-m { stroke: var(--navy-500); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
.redes-mf { stroke: var(--orange-600); stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.redes-cover { fill: none; stroke: var(--navy-500); stroke-width: 1.25; stroke-opacity: 0.3; }
.redes-cover--hot { stroke: var(--orange-600); stroke-opacity: 0.6; opacity: 0; }
.redes-ring2 { stroke: var(--navy-500); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.redes-rings--hot { opacity: 0; }
.redes-rings--hot .redes-ring2 { stroke: var(--orange-600); }
.redes-ap__body { fill: var(--surface); stroke: var(--navy-900); stroke-width: 2; }
.redes-ap__core { fill: var(--navy-900); }
.redes-ap__hot { fill: var(--orange-600); opacity: 0; }
.redes-ap.is-hot .redes-cover--hot, .redes-ap.is-hot .redes-rings--hot, .redes-ap.is-hot .redes-ap__hot { opacity: 1; }
.redes-burst { stroke: var(--orange-600); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.redes-conn { stroke: var(--orange-600); stroke-width: 2; transform-origin: 0 0; transform-box: view-box; }
.redes-dev__halo { fill: var(--orange-600); fill-opacity: 0.18; transform-box: fill-box; transform-origin: center; }
.redes-dev__body { fill: var(--orange-600); stroke: var(--surface); stroke-width: 2; }
.redes-dev__scr { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.redes-sig__bg { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.redes-bar { fill: var(--navy-900); }
.redes-sig.is-l2 .redes-bar--3, .redes-sig.is-l1 .redes-bar--3, .redes-sig.is-l1 .redes-bar--2 { fill: var(--line); }
.redes-ctl, .redes-sw { fill: var(--navy-900); }
.redes-sw__port { fill: none; stroke: #fff; stroke-width: 1.5; stroke-opacity: 0.8; }
.redes-poe__line { stroke: var(--navy-700); stroke-width: 2.5; stroke-linecap: round; }
.redes-pulse--poe { stroke-width: 5; }
.redes-ctl-pulse { fill: none; stroke: var(--orange-600); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Movimento -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* pulsos de dados nos cabos (so dashoffset); a visibilidade e dosada pelo JS, sem JS ficam sempre ligados */
  .redes-pulse { opacity: 1; animation: redes-flow 1.6s linear var(--o, 0s) infinite; }
  @keyframes redes-flow { to { stroke-dashoffset: -25; } }
  .redes-pulse--short { animation-name: redes-flow-s; animation-duration: 2.2s; }
  @keyframes redes-flow-s { to { stroke-dashoffset: -50; } }
  .redes-pulse--down { animation-duration: 2.4s; }

  /* rack: LEDs em padroes diferentes */
  .redes-uled--0 { animation: redes-blink-a 2.6s steps(1, end) infinite; }
  .redes-uled--1 { animation: redes-blink-b 0.9s steps(1, end) infinite; }
  .redes-uled--2 { animation: redes-blink-a 1.7s steps(1, end) -0.6s infinite; }
  .redes-uled--3 { animation: redes-blink-b 1.3s steps(1, end) -0.3s infinite; }
  .redes-unit:nth-child(3n) .redes-uled { animation-delay: -0.5s; }
  .redes-unit:nth-child(3n+1) .redes-uled { animation-delay: -1.1s; }
  @keyframes redes-blink-a { 0%, 70% { opacity: 1; } 70.1%, 100% { opacity: 0.25; } }
  @keyframes redes-blink-b { 0%, 45% { opacity: 1; } 45.1%, 100% { opacity: 0.15; } }

  /* wi-fi: gerenciamento tracejado que corre e pulsa, ondas dos APs, halo do dispositivo */
  .redes-m { animation: redes-dash 1s linear var(--o, 0s) infinite; }
  @keyframes redes-dash { to { stroke-dashoffset: -13; } }
  .redes-mgmt { animation: redes-mpulse 2.4s ease-in-out infinite; }
  @keyframes redes-mpulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .redes-ring2 { animation: redes-ring 3.6s linear var(--o, 0s) infinite; }
  @keyframes redes-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.3); } }
  .redes-rings--hot, .redes-cover--hot, .redes-ap__hot { transition: opacity 0.25s ease-out; }
  .redes-dev__halo { animation: redes-halo 1.6s ease-out infinite; }
  @keyframes redes-halo { 0% { opacity: 1; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.5); } }

  .redes-fig.is-paused *, .redes-fig.is-paused *::before { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
  .redes-fig *, .redes-fig *::before { animation: none !important; transition: none !important; }
}