/* ===== ===== ===== ===== */
/* ===== Organigrama ===== */
/* ===== =====  ===== ===== */
:root{
  --org-gap-box-mb: 12px;        /* espacio debajo del box del padre */
  --org-gap-children-mt: 22px;   /* espacio encima del contenedor de hijos */
  --org-gap-parent-child: calc(var(--org-gap-box-mb) + var(--org-gap-children-mt));
}

/* Títulos / layout */
.org-dep-title{margin:12px 0 6px;color:var(--bs-secondary-color,#6c757d);font-weight:600;}
.tree{display:flex;flex-direction:column;gap:40px;align-items:center;}
.level{display:flex;gap:28px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}

/* Nodo y tarjeta */
.node{position:relative;display:flex;flex-direction:column;align-items:center;}
.node .box{
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  padding:10px 0 0 0 !important;
  z-index:3;
}
.node.has-children > .box{
  margin-bottom: var(--org-gap-box-mb);
  padding:10px 0 0 0 !important;
}
/* no dibujar línea desde el box */
.node.has-children > .box::after{ display:none !important; }

/* Contenedor de hijos */
.children{
  position:relative;
  display:flex;
  gap:28px;
  justify-content:center;
  margin-top: var(--org-gap-children-mt);
}

/* Conector vertical PADRE→HIJOS (base: 1 hijo) */
.node.has-children:not(.collapsed) > .children::before{
  content:"";
  position:absolute;
  top: calc(var(--org-gap-parent-child) * -1);
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height: var(--org-gap-parent-child);
  background: var(--bs-border-color,#cfd6dd);
}

/* OVERRIDE (2+ hijos): que termine justo en la barra (-22px) */
.node.has-children:not(.collapsed) > .children.multi::before{
  height: var(--org-gap-box-mb);
}

/* Barra horizontal (2+ hijos) – de extremo a extremo */
.children.multi{padding:0 28px;}
.children.multi::after{
  content:"";
  position:absolute;
  top: calc(var(--org-gap-children-mt) * -1);
  left:0;
  right:0;
  height:2px;
  background: var(--bs-border-color,#cfd6dd);
}

/* Recorte de excedentes en extremos con el color de fondo */
.children.multi > .child-wrapper:first-child::after,
.children.multi > .child-wrapper:last-child::after{
  content:"";
  position:absolute;
  top: calc(var(--org-gap-children-mt) * -1);
  height:2px;
  background: var(--bs-body-bg,#fff);/* “borra” hacia afuera */
  z-index: 2;/* por encima de la vía */
  pointer-events: none;
}

/* Extiende el tapón del primero hacia la izquierda hasta sobrar */
.children.multi > .child-wrapper:first-child::after{
  right: 50%;          /* ancla en el centro del 1º hijo */
  width: 100%;       /* se va muy a la izquierda (tapa el excedente) */
}

/* Extiende el tapón del último hacia la derecha hasta sobrar */
.children.multi > .child-wrapper:last-child::after{
  left: 50%;           /* ancla en el centro del último hijo */
  width: 100%;       /* se va muy a la derecha (tapa el excedente) */
}

/* 1 hijo: sin barra horizontal */
.children.single::after{display:none;}

/* Envoltura de cada hijo + vertical hacia el hijo */
.child-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.child-wrapper::before{
  content:"";
  position:absolute;
  top: calc(var(--org-gap-children-mt) * -1);
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height: var(--org-gap-children-mt);
  background: var(--bs-border-color,#cfd6dd);
}

/* Colapsado: ocultar conectores */
.children.collapsed{display:none;}
.children.collapsed::before,
.children.collapsed::after{display:none;}
.node.collapsed > .children::before,
.node.collapsed > .children::after,
.node.collapsed > .children .child-wrapper::before,
.node.collapsed > .children .child-wrapper::after{display:none !important;}
.toggle{
  margin-bottom:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--bs-border-color,#d4dbe3);
  background:#fff;cursor:pointer;font-weight:700;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.toggle[disabled]{opacity:.5;cursor:default;}

@media (max-width:700px){
  .node .box{min-width:160px;}
  .tree{display:flex;flex-direction:unset;gap:40px;align-items:center;}
}

/* Si por cualquier razón .multi tiene un único hijo, trátalo como single */
.children.multi:has(> .child-wrapper:only-child)::after{ display:none; }
.children.multi:has(> .child-wrapper:only-child)::before{ height: var(--org-gap-parent-child); }

/* No dibujar tapones en ese caso */
.children.multi:has(> .child-wrapper:only-child) > .child-wrapper:first-child::after,
.children.multi:has(> .child-wrapper:only-child) > .child-wrapper:last-child::after{
  display:none;
}