#divAuto {
  height: 10vh;
  width: 100%;
}

a {
  color: var(--co-primary-gob);
}

a:hover {
  text-decoration: underline;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: visible;
  background-size: 500px;
}

.container-zoom {
  text-align: center;
  z-index: 100;
  position: relative;
  top: 6rem;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover {
  background-color: #610101;
}

/* Contenedor del organigrama */
.org-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.3s ease;
  border: 5px solid lightgray;
  border-radius: 10px;
}

/* Estilo para cada nodo */
.node {
  background-color: wheat;
  color: black;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Nodo principal (Director) */
.node.director {
  /* margin-bottom: 20px; */
  margin-top: 15px;
}

/* Conector vertical entre Director y la rama de gerentes */
.connector.vertical {
  width: 2px;
  height: 70px;
  background-color: black;
  margin: 0 auto;
}

/* Contenedor de la rama para los gerentes */
.branch {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 10px;
}

/* Línea horizontal que conecta todos los nodos hijos */
.branch::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 152px;
  /* right: 0; */
  border-top: 2px solid black;
  width: 608px;
}

/* Ajuste de cada nodo de la rama */
.branch .node {
  margin: 70px 20px;
  padding-top: 20px;
  /* Espacio para la línea vertical interna */
  width: 264px;
  /* Para centrar el cuadro y linea de en medio */
}

/* Línea vertical individual que conecta cada nodo de la rama a la línea horizontal */
.branch .node::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  width: 2px;
  height: 80px;
  background-color: black;
  transform: translateX(-50%);
}