@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

body {
  background-color: #050505;
  color: #e2e8f0;
  font-family: "Roboto", sans-serif;
}

/* Botones Generales */
.tool-btn {
  @apply flex items-center gap-2 px-3 py-1.5 rounded border bg-black/40 font-bold text-[10px] uppercase tracking-wider transition-all;
}
.tool-btn:active {
  transform: scale(0.95);
}

/* Botones de Color (Círculos puros) */
.color-btn {
  @apply w-4 h-4 rounded-full transition-transform border border-white/10;
}
.color-btn:hover {
  transform: scale(1.2);
}
.color-btn.active {
  transform: scale(1.3);
  @apply ring-2 ring-white ring-offset-1 ring-offset-black;
}

/* Icon Buttons */
.icon-btn {
  @apply p-1.5 rounded text-gray-400 hover:text-white hover:bg-white/10 transition-colors;
}
.icon-btn.text-primary {
  @apply text-blue-500 bg-blue-500/10;
}
.icon-btn.text-danger {
  @apply text-red-500 bg-red-500/10;
}

/* Vis.js Canvas */
div.vis-network,
div.vis-network:focus {
  outline: none;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}