/* ═══════════════════════════════════════════════════════════════════════════
   THEME-7 · Superficies DOM de los grafos (visNetwork)
   ═══════════════════════════════════════════════════════════════════════════

   Esto existe porque THEME-4.1 clasificó nueve superficies como «pintadas en
   canvas, fuera del alcance de CSS». Medido en Chrome, es falso para el FONDO:
   el paquete visNetwork hace, en `visNetwork.js:2195`,

       el_id.style.background = x.background;

   es decir, pone el color como estilo EN LÍNEA sobre el `div` contenedor del
   widget, y los hijos (`maindiv…`, `graph…`) lo heredan con
   `background-color: inherit`. El `<canvas>` es transparente: medido,
   `rgba(0, 0, 0, 0)`.

   Un estilo en línea gana a una hoja de estilos… salvo ante `!important`. Por
   eso las seis superficies de fondo (3 en Architecture Builder, 3 en
   Topología) se corrigen aquí, sin tocar R y sin volver a renderizar el
   widget: al cambiar `data-bs-theme` el navegador reevalúa estas reglas solo,
   así que el cambio en caliente no pierde ni zoom, ni selección, ni
   posiciones.

   Lo que CSS NO alcanza —nodos, aristas, etiquetas y el dibujo de fondo del
   Architecture Builder— vive en `www/js/ot_viz_theme.js`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Fondo del lienzo ────────────────────────────────────────────────────
   `var(--ot-bg)` vale #0d1117 en oscuro, que es EXACTAMENTE el literal que
   estos widgets traían: el modo oscuro no cambia de aspecto. En claro pasa a
   #f4f6f8, que distingue el lienzo de la tarjeta blanca que lo envuelve. */
.visNetwork.html-widget {
  background: var(--ot-bg) !important;
  border-radius: 6px;
}

/* Los hijos declaran `background-color: inherit` en línea; heredan del
   contenedor sin que haga falta nombrarlos. Se listan por si una versión
   futura de visNetwork dejara de declararlo. */
.visNetwork.html-widget > div[id^="maindiv"],
.visNetwork.html-widget div[id^="graph"] {
  background-color: inherit;
}

/* ── 2 · Controles de navegación de vis-network ──────────────────────────────
   NO se tocan. Sus sprites son fichas CLARAS con el glifo oscuro: se leen bien
   sobre el lienzo claro, y son exactamente los que el modo oscuro ha tenido
   siempre. Un primer intento los invirtió en claro y el resultado fue un panel
   negro sobre fondo claro — justo lo contrario de lo que se buscaba. Medido en
   captura: sin filtro se leen en ambos temas. */

/* ── 3 · Botón de exportación y controles superpuestos ──────────────────────
   Topología lo declara ya con tokens; esto cubre los que no. */
.visNetwork.html-widget .visNetwork-download,
.visNetwork.html-widget div[id^="download"] > button {
  background: var(--ot-bg-panel) !important;
  color: var(--ot-text) !important;
  border: 1px solid var(--ot-border) !important;
}

/* ── 4 · Controles superpuestos al lienzo ────────────────────────────────────
   Los mandos flotantes que viven ENCIMA del canvas (hoy los de zoom del
   Architecture Builder) necesitan una ficha que se despegue del lienzo en
   ambos temas. En oscuro el valor es EXACTAMENTE el literal que tenían —
   `rgba(22,27,34,0.85)` — para que el modo oscuro no cambie ni un pixel. */
:root, html:not([data-bs-theme="dark"]) {
  --ot-canvas-overlay: rgba(255, 255, 255, 0.92);
}
html[data-bs-theme="dark"] {
  --ot-canvas-overlay: rgba(22, 27, 34, 0.85);
}