#graphContainer {
  width: 100%;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 128, 128, 0.15);
  border: 1px solid var(--gris-suave);
  background-color: var(--blanco-puro);
}

#cy {
  width: 100%;
  height: 600px;
  background-color: var(--gris-suave);
  border-radius: 0 0 11px 11px;
  transition: all 0.3s ease;
}

/* Controles superpuestos del grafo */
.graph-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 2px 10px rgba(0, 128, 128, 0.2);
  z-index: 1002; /* por encima de tooltips/metrics */
}
.graph-controls .btn-ctrl {
  border: 1px solid var(--teal-profundo);
  background: var(--blanco-puro);
  color: var(--teal-profundo);
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 600;
  cursor: pointer;
}
.graph-controls .btn-ctrl:hover {
  background: var(--teal-profundo);
  color: var(--blanco-puro);
}
.graph-controls .btn-ctrl:focus-visible {
  outline: 3px solid #ffbf47; /* alto contraste (amber) */
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgba(255, 191, 71, 0.4);
}
.graph-controls .btn-ctrl.active {
  background: var(--teal-profundo);
  color: var(--blanco-puro);
}

/* Tooltip simple del grafo */
.graph-tooltip {
  position: absolute;
  z-index: 1000;
  background-color: var(--blanco-puro);
  color: var(--texto-principal);
  border-left: 3px solid var(--coral-vibrante);
  border-radius: 6px;
  font-family: var(--font-cuerpo);
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

/* Tarjeta de métricas (más sutil para no tapar carriles) */
.graph-metrics {
  position: absolute;
  z-index: 1001;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--texto-principal);
  border-radius: 8px;
  font-family: var(--font-cuerpo);
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
.d-none { display: none !important; }

/* Carriles por ciclo (overlay no interactivo debajo del grafo) */
.graph-lanes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px; /* sincronizado con #cy */
  pointer-events: none; /* no bloquear interacción */
  z-index: 0; /* por debajo de #cy */
}
.graph-lane {
  position: relative;
  height: 10%; /* 10 carriles iguales */
  background: rgba(32, 201, 151, 0.06); /* leve */
}
.graph-lane:nth-child(odd) {
  background: rgba(42, 110, 184, 0.06);
}
.graph-lane .lane-label {
  position: absolute;
  left: 10px;
  right: auto;
  top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #3E4A5A;
}

/* Controles de zoom (si se integra el plugin correspondiente) */
.cy-panzoom {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  color: var(--teal-profundo);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0, 128, 128, 0.2);
}

/* Estilos para nodos y aristas del grafo */
/* Estos estilos se aplican mediante JavaScript en GraphView.js,
   pero puedes definir algunas clases CSS aquí si lo necesitas */

/* Tooltips del grafo (si se integran) */
.cy-tooltip {
  background-color: var(--blanco-puro);
  color: var(--texto-principal);
  border-left: 3px solid var(--coral-vibrante);
  border-radius: 6px;
  font-family: var(--font-cuerpo);
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Encabezado potencial para el grafo */
.graph-header {
  background-color: var(--teal-profundo);
  color: var(--blanco-puro);
  padding: 12px 15px;
  border-radius: 11px 11px 0 0;
  border-bottom: 2px solid var(--ambar-dorado);
  font-family: var(--font-titulos);
  font-weight: 600;
}