/* style-bubbles.css - versión adaptada para integrarse con Bootstrap */

/* Contenedor principal de la tarjeta de burbujas */
#bubble-card {
  background-color: var(--bs-body-bg, #ffffff);
  color: var(--bs-body-color, #212529);
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin: 1rem auto;
  width: 100%;
  max-width: 1100px;
}

/* Cabecera tipo card */
#bubble-card .card-header {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  padding: .75rem 1rem;
  border-bottom: none;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Contenedor del SVG responsivo */
#bubble-container {
  width: 100%;
  height: clamp(300px, 45vw, 60vh);
  /* adaptativo */
  position: relative;
  padding: .5rem;
}

/* SVG ocupa todo el contenedor */
#bubble-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Nodos */
.node circle {
  fill: #69b3a2;
  stroke: #ffffff;
  stroke-width: 2px;
  cursor: pointer;
  transition: transform .18s ease-out, stroke-width .12s;
  transform-origin: center center;
}

.node circle:hover {
  stroke: #0b5ed7;
  stroke-width: 3px;
  transform: scale(1.05);
}

.node text {
  font-size: 0.8rem;
  font-weight: 600;
  text-anchor: middle;
  fill: white;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  user-select: none;
  dominant-baseline: middle;
}

/* Colores por fuerza */
.node.high-force circle {
  fill: #105df5;
}

/* alta */
.node.medium-force circle {
  fill: #4060a0;
}

/* media */
.node.low-force circle {
  fill: #2e2f33;
}

/* baja */


/* Ajustes móviles */
@media (max-width: 576px) {
  #bubble-card {
    max-width: 96%;
  }

  #bubble-container {
    height: clamp(250px, 65vw, 55vh);
  }

  .node text {
    font-size: 10px;
  }
}