/* NOC FibraSLP · vista «Topología» — v1.6
 * Estilos del módulo static/topologia.js. Todo con prefijo .topo- / .fab- (o bajo
 * #topologia-root) para no chocar con index.html; reutiliza sus variables (--plane,
 * --surface, --ink…) y clases (.pill/.dot, .meter, button.mini/.on). La vista ocupa toda
 * la altura disponible como el mapa (100vh menos el cromo de index.html: header de 50 px +
 * relleno de <main> 16 + 20 = 86 px; el módulo lo mide y lo sobreescribe en --topo-chrome).
 * En pantalla completa, 100vh.
 * Versión del archivo: 1.8.0 (rediseño). topologia.js (ensureCss) e index.html piden la misma. */
#topologia-root{--topo-chrome:86px;display:flex;flex-direction:column;gap:8px;
  height:calc(100vh - var(--topo-chrome));min-height:70vh}
#topologia-root.topo-fs{height:100vh;min-height:100vh;background:var(--plane);padding:12px}

/* ── Encabezado: migas + resumen (esquina superior derecha) ─────────────── */
/* cabecera en UNA fila: migas · resumen · buscador y zoom (antes dos filas, ≈ 60 px) */
.topo-head{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;flex:none}
.topo-crumbs{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.topo-crumbs a{color:var(--ink-2);text-decoration:none;border-bottom:1px dotted transparent}
.topo-crumbs a:hover{color:var(--ink);border-bottom-color:var(--muted)}
.topo-crumbs .sep{color:var(--muted);font-weight:normal}
.topo-crumbs .cur{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topo-crumbs .hint{color:var(--muted);font-size:12px;font-weight:normal;margin-left:6px;
  white-space:nowrap;cursor:help}
.topo-summary{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.topo-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-size:12px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.4}
.topo-chip b{color:var(--ink);font-weight:600}
.topo-chip .dot{display:inline-block}
.topo-chip.good{border-color:rgba(12,163,12,.5);color:#8fe08f}
.topo-chip.good b{color:#a9f0a9}
.topo-chip.warn{border-color:rgba(250,178,25,.55);color:#ffd479}
.topo-chip.warn b{color:#ffe1a0}
.topo-chip.crit{border-color:rgba(208,59,59,.6);color:#ff9a9a}
.topo-chip.crit b{color:#ffb8b8}
.topo-chip.maint{border-color:rgba(107,143,201,.6);color:#a9c4ee}
.topo-chip.blue{border-color:rgba(57,135,229,.55);color:#9cc4f5}
.topo-chip.blue b{color:#c2dcfa}
.topo-chip.dim{opacity:.7}
.topo-sep{width:1px;height:18px;background:var(--border);margin:0 2px}
#topologia-root .dot.maint,.topo-tip .dot.maint{background:#6b8fc9}

/* ── Controles (buscador, zoom, pantalla completa) al final de la cabecera ── */
.topo-ctrls{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex:none}
.topo-ctrls input[type=search]{width:190px;max-width:44vw;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:4px 9px;font:inherit;font-size:13px;height:28px}
.topo-ctrls input[type=search]:focus{outline:none;border-color:var(--s1)}
.topo-ctrls button{padding:0 10px;height:28px;line-height:1}
.topo-ctrls .topo-fsbtn{width:30px;padding:0;display:inline-flex;align-items:center;justify-content:center}

/* ── Leyenda plegable dentro del escenario, abajo a la izquierda ─────────── */
.topo-lg{position:absolute;left:10px;bottom:10px;z-index:4;max-width:min(560px,calc(100% - 20px));
  background:rgba(26,26,25,.94);border:1px solid var(--border);border-radius:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.35)}
.topo-lg>summary{list-style:none;cursor:pointer;padding:4px 10px;font-size:11px;line-height:14px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);user-select:none;
  display:flex;align-items:center;gap:6px}
.topo-lg>summary::-webkit-details-marker{display:none}
.topo-lg>summary::before{content:"";width:0;height:0;border-bottom:5px solid currentColor;
  border-left:4px solid transparent;border-right:4px solid transparent;transition:transform .12s}
.topo-lg[open]>summary::before{transform:rotate(180deg)}
.topo-lg>summary:hover{color:var(--ink-2)}
.topo-legend{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);
  align-items:center;padding:0 10px 8px}
.topo-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.topo-legend .topo-lg-note{white-space:normal;color:var(--muted);flex-basis:100%;line-height:1.35}
.topo-lg-alm{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:50%;background:#d03b3b;color:#fff;font-size:10px;font-weight:700}
.topo-sw{display:inline-block;width:20px;height:0;border-top:3px solid #0ca30c;border-radius:2px}
.topo-sw.dash{border-top-style:dashed;border-top-width:2px}
.topo-sw.dotted{border-top-style:dotted;border-top-width:2px}
.topo-seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;
  background:var(--surface)}
.topo-seg button{border:0;border-radius:0;background:transparent;font-size:13px;min-width:34px}
.topo-seg button+button{border-left:1px solid var(--border)}
.topo-seg button:hover{background:var(--surface-2)}

/* ── Escenario: lienzo desplazable + tooltip flotante ───────────────────── */
.topo-stagewrap{flex:1;min-height:0;position:relative;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);overflow:hidden}
.topo-stage{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain}
/* centrado cuando el diagrama es más angosto que el escenario */
.topo-stage>svg{display:block;margin:0 auto}
.topo-tip{position:absolute;z-index:6;pointer-events:none;background:var(--surface-2);
  border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:12px;
  color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.5);max-width:360px;line-height:1.4}
.topo-tip .t{font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.topo-tip .k{color:var(--muted);margin-right:5px}
.topo-tip .row{white-space:nowrap}
.topo-tip .dv{display:flex;gap:6px;align-items:center;white-space:nowrap}
.topo-tip .dv .m{color:var(--muted)}
.topo-tip .dot{display:inline-block}
.topo-notice{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;
  max-width:min(92%,640px);background:var(--surface-2);border:1px solid var(--border);
  border-left:3px solid var(--critical);border-radius:8px;padding:8px 12px;font-size:12px;
  color:var(--ink-2);box-shadow:0 6px 20px rgba(0,0,0,.45)}
.topo-empty{padding:24px;color:var(--muted)}
.topo-foot{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:11px;
  font-variant-numeric:tabular-nums}
.topo-foot .warnn{color:#ffd479}
/* cabecera y pie compactos (topologia.js · fitHead, solo si no caben en una fila): sin los
   chips de tráfico y latencia (su dato va en el title de «N equipos») y textos cortos en el
   pie (el completo en su title) */
.topo-head.compact .topo-chip.opt,.topo-head.compact .topo-sep{display:none}
.topo-foot .sh,.topo-foot.compact .lg{display:none}
.topo-foot.compact .sh{display:inline}

/* ── SVG del backbone (diseño por capas) ────────────────────────────────── */
.topo-svg{font:12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;user-select:none}
.topo-svg .band{fill:rgba(255,255,255,.028)}
.topo-svg .band.alt{fill:rgba(255,255,255,.008)}
/* nombre de la capa en el margen superior de la banda; el trazo del color del fondo lo
   separa de las curvas que pasan por detrás. 12 px (antes 10.5: a 1366, con el zoom de
   «Ajustar», se veía de ≈ 9); topologia.js (BAND_PX) mide con el mismo tamaño */
.topo-svg .band-lbl{font-size:12px;paint-order:stroke;stroke:var(--surface);stroke-width:3px;
  stroke-linejoin:round}
.topo-svg .band-lbl .t{fill:var(--ink-2);font-weight:700;letter-spacing:.1em}
.topo-svg .band-lbl .s{fill:var(--muted)}
.topo-node{cursor:pointer}
.topo-node .box{fill:var(--surface-2);stroke:rgba(255,255,255,.14);stroke-width:1.2;
  transition:stroke .12s}
.topo-node.ly-core .box{fill:#1b2130;stroke:#3d4f72}
.topo-node.ly-acceso .box{fill:#1c1d1c}
.topo-node.ly-sitio .box{fill:var(--surface);stroke-dasharray:4 3}
.topo-node:hover .box,.topo-node.hl .box{stroke:var(--s1);stroke-width:1.8}
.topo-node.st-crit .box{stroke:rgba(208,59,59,.75)}
.topo-node.st-warn .box{stroke:rgba(250,178,25,.6)}
.topo-node.st-maint .box{stroke:rgba(107,143,201,.7);stroke-dasharray:5 3}
/* letra de 13 / 11.5 / 11 px (antes 12 / 10.5 / 10) */
.topo-node .nm{fill:var(--ink);font-weight:600;font-size:13px}
.topo-node .sub{fill:var(--ink-2);font-size:11.5px}
.topo-node .sub2{fill:var(--muted);font-size:11px}
/* el icono va escalado a .72 (26 px): trazo de 2 para que siga viéndose de ≈ 1.5 */
.topo-node .glyph{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
/* insignia de alarmas abiertas en la esquina del nodo (mismo lenguaje que el Mapa) */
.topo-node .alm circle{fill:#d03b3b;stroke:var(--surface);stroke-width:2}
.topo-node .alm text{fill:#fff;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.topo-node.ly-core .glyph{stroke:#9cc4f5}
.topo-node .glyph .fillp{fill:currentColor;stroke:none}
.topo-node .dot{fill:#898781}
.topo-node.st-ok .dot{fill:#0ca30c}
.topo-node.st-warn .dot{fill:#fab219}
.topo-node.st-crit .dot{fill:#d03b3b}
.topo-node.st-maint .dot{fill:#6b8fc9}
.topo-node .halo{fill:none;stroke-width:6;opacity:.22}
.topo-node.st-ok .halo{stroke:#0ca30c}
.topo-node.st-warn .halo{stroke:#fab219}
.topo-node.st-crit .halo{stroke:#d03b3b}
.topo-node.st-maint .halo{stroke:#6b8fc9}
.topo-node.st-none .halo{stroke:#898781}
.topo-cloud .cl{fill:#182234;stroke:#4a6a9a;stroke-width:1.4}
.topo-cloud .nm{fill:#c2dcfa;font-weight:700;font-size:12px;letter-spacing:.06em}
.topo-cloud .sub{fill:var(--ink-2);font-size:10.5px}
.topo-cloud.st-crit .cl{stroke:#d03b3b}
.topo-edge .hit{stroke:transparent;stroke-width:18;fill:none}
.topo-edge .ln{fill:none;stroke:#898781;stroke-width:2.2;stroke-linecap:round;transition:opacity .12s}
.topo-edge.cap-1 .ln{stroke-width:1.6}
.topo-edge.cap-10 .ln{stroke-width:2.2}
.topo-edge.cap-25 .ln{stroke-width:2.8}
.topo-edge.cap-40 .ln{stroke-width:3.2}
.topo-edge.cap-100 .ln{stroke-width:4}
.topo-edge.st-up .ln{stroke:#0ca30c}
.topo-edge.st-warn .ln{stroke:#fab219}
.topo-edge.st-down .ln{stroke:#d03b3b}
.topo-edge.st-planned .ln,.topo-edge.st-unknown .ln,.topo-edge.st-disabled .ln{
  stroke:#898781;stroke-dasharray:3 6}
.topo-edge.adj .ln{stroke-dasharray:7 5;stroke-width:1.8;stroke:#0ca30c}
.topo-edge.adj.bgp .ln{stroke:#9b6ff2}
.topo-edge.adj.st-down .ln{stroke:#d03b3b}
.topo-edge.adj.st-unknown .ln{stroke:#898781}
.topo-edge.upl .ln{stroke:#6b8fc9;stroke-dasharray:2 5;stroke-width:1.8}
.topo-edge.upl.st-down .ln{stroke:#d03b3b}
/* etiquetas (solo enlaces caídos o con uso alto), en su capa encima de los nodos */
.topo-edge .lbl rect{fill:var(--surface-2);stroke:rgba(255,255,255,.18)}
.topo-edge .lbl text{fill:var(--ink-2);font-size:11px;font-weight:600;letter-spacing:.02em}
.topo-edge.st-down .lbl rect{fill:#2a1113;stroke:rgba(208,59,59,.8)}
.topo-edge.st-down .lbl text{fill:#ffb3b3}
.topo-edge.st-warn .lbl rect{fill:#2a2410;stroke:rgba(250,178,25,.7)}
.topo-edge.st-warn .lbl text{fill:#ffd479}
.topo-edge.util-hi .lbl rect{stroke:rgba(250,178,25,.4)}
.topo-edge .lbl{cursor:default}
.topo-edge:hover .ln,.topo-edge.hl .ln{opacity:1;filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.topo-svg.focus .topo-edge:not(.hl){opacity:.12}
.topo-svg.focus .topo-node:not(.hl){opacity:.32}
.topo-svg.searching .topo-node.miss{opacity:.22}
.topo-svg.searching .topo-node.hit .box{stroke:var(--s1);stroke-width:2.2}
.topo-svg.searching .topo-edge{opacity:.25}

/* ── Nivel POP: «network fabric» del sitio (bloques + bus con bajadas) ─── */
.fab{padding:16px 18px 22px;display:flex;flex-direction:column;min-width:0;isolation:isolate}
.fab-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fab-back{padding:4px 10px;font-size:13px}
.fab-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:8px;min-width:0}
.fab-title .code{color:var(--muted);font-weight:normal;font-size:13px}
.fab-meta{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.fab-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.fab-row h3{margin:0 0 8px;display:flex;align-items:center;gap:8px}
.fab-row h3 .n{color:var(--muted);font-weight:normal;text-transform:none;letter-spacing:0}
.fab-row.above{padding-bottom:22px}
.fab-row.below{padding-top:22px}
.fab-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.fab-cards.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.fab-card{position:relative;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0;
  border-bottom:3px solid var(--muted)}
.fab-card.st-up,.fab-card.st-ok{border-bottom-color:var(--good)}
.fab-card.st-warn{border-bottom-color:var(--warning)}
.fab-card.st-down,.fab-card.st-crit{border-bottom-color:var(--critical)}
.fab-card.st-maint{border-bottom-color:#6b8fc9}
.fab-card.st-off,.fab-card.st-unknown,.fab-card.st-planned,.fab-card.st-disabled{opacity:.75}
.fab-card.click{cursor:pointer}
.fab-card.click:hover{border-color:var(--s1);background:#232322}
/* bajadas al bus: pseudo-elementos detrás de las tarjetas (z-index −1 dentro de .fab) */
.fab-row.above .fab-card::after,.fab-row.below .fab-card::before{content:"";position:absolute;
  left:50%;width:2px;margin-left:-1px;background:var(--muted);z-index:-1}
.fab-row.above .fab-card::after{bottom:-25px;height:25px}
.fab-row.below .fab-card::before{top:-25px;height:25px}
.fab-card.st-up::after,.fab-card.st-up::before,.fab-card.st-ok::after,.fab-card.st-ok::before{background:var(--good)}
.fab-card.st-warn::after,.fab-card.st-warn::before{background:var(--warning)}
.fab-card.st-down::after,.fab-card.st-down::before,.fab-card.st-crit::after,.fab-card.st-crit::before{background:var(--critical)}
.fab-card.st-maint::after,.fab-card.st-maint::before{background:#6b8fc9}
.fab-bus{height:3px;border-radius:2px;background:var(--axis);position:relative;margin:0 6px}
.fab-bus.st-ok{background:linear-gradient(90deg,rgba(12,163,12,.35),var(--good),rgba(12,163,12,.35))}
.fab-bus.st-warn{background:linear-gradient(90deg,rgba(250,178,25,.35),var(--warning),rgba(250,178,25,.35))}
.fab-bus.st-crit{background:linear-gradient(90deg,rgba(208,59,59,.35),var(--critical),rgba(208,59,59,.35))}
.fab-bus.st-maint{background:#6b8fc9}
.fab-bus .tag{position:absolute;right:10px;top:-9px;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--surface);padding:1px 8px;
  border:1px solid var(--border);border-radius:999px}
.fab-card .top{display:flex;align-items:center;gap:10px;min-width:0}
.fab-card .ic{flex:none;width:34px;height:34px;color:var(--ink-2)}
.fab-card .ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.fab-card.core .ic{color:#9cc4f5}
.fab-card .who{min-width:0;flex:1}
.fab-card .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-card .nm .lyr{font-weight:normal;color:var(--muted);font-size:11px;margin-left:6px}
.fab-card .ip{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-card .pills{display:flex;gap:6px;flex-wrap:wrap}
.fab-card .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 8px;
  border-top:1px solid var(--grid);padding-top:8px;font-size:12px}
.fab-card .stats .k{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;
  letter-spacing:.05em}
.fab-card .stats .v{font-variant-numeric:tabular-nums;color:var(--ink)}
.fab-card .bb{border-top:1px solid var(--grid);padding-top:6px;font-size:12px;display:grid;gap:3px}
.fab-card .bb .h{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.fab-card .bb .r{display:flex;gap:8px;align-items:center;white-space:nowrap;min-width:0}
.fab-card .bb .r .n{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.fab-card .bb .r .d{color:var(--muted);overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.fab-card .bb .r .t{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.fab-card .foot{color:var(--muted);font-size:11px;border-top:1px solid var(--grid);padding-top:6px}
.fab-card .foot b{color:var(--ink-2);font-weight:600}
.fab-card .meter{min-width:0}
.fab-card .meter .pct{width:40px}
.fab-link .other{font-weight:600;display:flex;align-items:center;gap:6px;min-width:0}
.fab-link .other .arrow{color:var(--muted);font-weight:normal}
.fab-link .other .nmx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-link .lname{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-link .ends{font-size:11px;color:var(--ink-2);display:grid;gap:2px}
.fab-link .ends span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fab-link .ends .m{color:var(--muted)}
.fab-link .traffic{display:flex;gap:10px;align-items:center;font-size:12px;
  font-variant-numeric:tabular-nums;flex-wrap:wrap}
.fab-link .traffic .meter{flex:1;min-width:120px}
.fab-ring{flex:none;width:52px;height:52px}
.fab-ring text{font-size:11px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
.fab-ring .bg{fill:none;stroke:var(--grid);stroke-width:4}
.fab-ring .fg{fill:none;stroke:var(--good);stroke-width:4;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%}
.fab-ring.warn .fg{stroke:var(--warning)}
.fab-ring.crit .fg{stroke:var(--critical)}
.fab-empty{color:var(--muted);font-size:12px;padding:10px 4px}
.fab-cloud{background:#182234;border-color:#4a6a9a}
.fab-cloud .ic{color:#9cc4f5}
/* portátil (≈ 1366): para que la cabecera siga en una fila, la ayuda «clic en un POP…» se
   queda solo en el tooltip de «Backbone» y el buscador se angosta */
@media(max-width:1600px){
  .topo-crumbs .hint{display:none}
  .topo-ctrls input[type=search]{width:150px}
}
@media(max-width:700px){
  .fab-card .stats{grid-template-columns:repeat(2,1fr)}
  /* celular: resumen y pie en una fila que se desliza de lado, para dejarle alto al lienzo */
  .topo-summary{margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .topo-summary::-webkit-scrollbar{display:none}
  .topo-foot{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .topo-foot::-webkit-scrollbar{display:none}
}