/* =========================================================
   equipo.css (SOLO para equipo.html)
   - Organigrama: diagrama con nodos y conectores
========================================================= */

/* =========================================================
   ORGANIGRAMA (DIAGRAMA)
========================================================= */

.pageEquipo .secTitle,
.pageEquipo .splitTitle{
  text-align: center;
}

.orgChart{
  margin-top: 16px;
  position: relative;
}

.orgLevel{
  display:flex;
  justify-content:center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  align-items: flex-start; /* (se queda) */
}

.orgConnector{
  height: 28px;
  position: relative;
}

/* Línea vertical + barra horizontal sutil */
.orgConnector::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 2px;
  height: 28px;
  background: rgba(20,36,70,.14);
  border-radius: 999px;
}

.orgConnector::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  width: min(720px, 86%);
  height: 2px;
  background: rgba(20,36,70,.10);
  border-radius: 999px;
}

/* Nodos */
.orgNode{
  width: min(320px, 100%);
  border-radius: 20px;
  padding: 14px;
  border: 1px solid rgba(20,36,70,.12);
  background:
    radial-gradient(360px 140px at 18% 0%, rgba(179,204,246,.28), transparent 60%),
    radial-gradient(360px 140px at 85% 0%, rgba(173,132,227,.16), transparent 60%),
    rgba(255,255,255,.80);
  box-shadow: 0 18px 44px rgba(20,36,70,.10);
  display:flex;
  gap: 12px;

  /* ✅ Esto fue lo que modifiqué:
     Antes estaba align-items:flex-start;
     Ahora centramos verticalmente el texto con el icono (ya no se ve “arriba” con espacio abajo). */
  align-items: center;

  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  height: auto;
}

.orgNode:hover{
  transform: translateY(-3px);
  border-color: rgba(173,132,227,.26);
  box-shadow: 0 26px 62px rgba(20,36,70,.14);
}

/* ✅ Esto fue lo que modifiqué:
   Reducimos el ancho del nodo superior
   y lo mantenemos centrado dentro del nivel */
.orgNode.isTop{
  width: fit-content;
  min-width: 220px;   /* evita que quede demasiado pequeño */
  max-width: 320px;   /* mantiene proporción con los demás */
  margin: 0 auto;     /* lo mantiene centrado perfectamente */
}

/* Icono */
.orgIcon{
  width: 48px;
  height: 48px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(179,204,246,.22);
  border: 1px solid rgba(173,132,227,.18);
  color: rgba(20,36,70,.92);
  flex: 0 0 auto;
}

/* ✅ Esto fue lo que modifiqué:
   Hacemos que el contenedor del texto se centre y use la misma altura “visual” del icono */
.orgText{
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px; /* igual al alto del icono */
}

/* PUESTO */
.orgRole{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  color: rgba(20,36,70,.92);
  font-size: 14px;

  /* ✅ Esto fue lo que modifiqué:
     Mejor alineación vertical (evita que se “pegue arriba” visualmente). */
  line-height: 1.25;
}

/* NOMBRE (ya no se usa, pero lo dejamos por si en el futuro se vuelve a activar) */
.orgName{
  margin-top: 6px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  color: rgba(20,36,70,.72);
  font-size: 12px;
}

/* Responsivo: que la barra horizontal no estorbe */
@media (max-width: 720px){
  .orgConnector::after{ width: 0; }
}