/* Sin scrollbars, layout por flex */
html, body { height:100%; margin:0; overflow:hidden; }
body { font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }
#wrap { height:100vh; display:flex; flex-direction:column; }
#networkBox { position:relative; flex:1 1 auto; background:#0f1113; overflow:hidden; }
#networkId { width:100%; height:100%; display:block; }
.toolbar {
  position:absolute; top:10px; left:10px; z-index:1000;
  background:rgba(0,0,0,.55); color:#fff; padding:8px 10px; border-radius:10px;
}
.toolbar .btn { margin-right:6px; }
.legend {
  position:absolute; bottom:12px; left:12px; right:12px; z-index:900;
  background:rgba(0,0,0,.45); color:#fff; padding:8px 10px; border-radius:8px; font-size:12px;
  max-width:calc(100% - 24px); box-sizing:border-box;
}
.legend .chips { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.legend .chip { display:inline-flex; align-items:center; cursor:pointer; opacity:.95; }
.legend .sw { width:12px; height:12px; border-radius:2px; margin-right:6px; }
.legend .chip.off { opacity:.35; text-decoration:line-through; }

/* Tips fuera del canvas negro, sin empujar el viewport (flex) */
.hints {
  flex:0 0 auto;
  background:#f8f9fb; color:#111; border-top:1px solid rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center; padding:8px 12px; font-size:12px;
}
.hints .tip { margin:0 10px; white-space:nowrap; }
.light-mode #networkBox { background:#f7f7fb; }
.light-mode .toolbar { background:rgba(255,255,255,.85); color:#111; }
.light-mode .legend { background:rgba(255,255,255,.85); color:#111;/* Tooltip base */
.tooltip-custom{
  position: fixed;       /* ya lo seteás por JS, pero no molesta */
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  z-index: 2000;
  transition: opacity .15s ease;
}

/* Tema oscuro: fondo oscuro + texto claro */
.dark-mode .tooltip-custom{
  background: rgba(0,0,0,0.85);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Tema claro: fondo claro + texto oscuro */
.light-mode .tooltip-custom{
  background: rgba(255,255,255,0.95);
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}