/* custom-style.css */
/* Contenedor: scroll en todo el área útil; el organigrama usa el ancho completo (sin “caja” estrecha centrada) */
#chart-container {
    overflow: auto;
    width: 100%;
    margin: 0;
    padding: 8px;
    border: none;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

/* Solo el ancho real del árbol; si min-width: 100% el hijo llena el contenedor y el flex NO puede centrarlo */
.orgchart {
    background: transparent;
    padding: 12px;
    margin: 0;
    width: max-content;
    max-width: none;
    box-sizing: border-box;
}

.orgchart .node {
    width: var(--node-width);
    padding: 10px;
    border: none;
    box-shadow: none;
    text-align: center;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* center encoge cada hijo a su texto: título y cargo quedan distintos; html2canvas lo empeora al exportar */
    align-items: stretch;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

.orgchart .node img {
    width: var(--photo-size);            /* Ancho dinámico definido por la variable CSS `--photo-size`. */
    height: var(--photo-size);           /* Altura dinámica definida por la variable CSS `--photo-size`. */
    border-radius: 100%;                 /* Hace que la imagen sea completamente redonda. */
    object-fit: cover;                   /* Ajusta tamaño la imagen para cubrir el circulo completamente el contenedor. */
    position: absolute;                  /* Posición absoluta para colocar la imagen. */
    top: 5px;                           /* Coloca la imagen 5px por encima de su contenedor. */
    left: 50%;                           /* Centra la imagen horizontalmente dentro del contenedor padre. */
    transform: translateX(-50%);         /* Ajusta la posición para centrar la imagen exactamente. */
    z-index: 1;                          /* Asegura que la imagen esté por encima de otros elementos. */
    margin-bottom: 5px;                  /* Margen inferior de 5px. */
	margin-top: 0px;                    /* Margen superior de 10px. */
}

/* Título: el plugin (jquery.orgchart.css) fija height/line-height en 20px; hay que anularlo para centrar bien */
.orgchart .node .title {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: var(--font-size-title);
    font-weight: bold;
    color: var(--title-text-color);
    background-color: var(--title-bg-color);
    /* más aire abajo para que el nombre no quede pegado al borde con el cargo */
    padding: 10px 8px 14px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    border: 1px solid var(--title-border-color, #ccc);
    height: auto !important;
    /* Alto mínimo equivalente a 2 líneas (para que todos los nodos queden parejos) */
    min-height: calc(2 * 1.35em + 24px);
    line-height: 1.35 !important;
    overflow: visible !important;
    text-overflow: clip;
    /* flex en fila (por defecto) dejaba el texto “abajo” respecto al icono/espacio; columna + justify center = centrado vertical real */
    display: flex;
    flex-direction: column;
    /* arriba dentro del recuadro (menos “pegado abajo” que con center) */
    justify-content: flex-start;
    align-items: center;
    margin-top: calc(var(--photo-size) - 12px);
    margin-bottom: -12px;
}

.orgchart .node .content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-size: var(--font-size-content);
    color: var(--content-text-color);
    background-color: var(--content-bg-color);
    padding: 5px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    border: 1px solid var(--content-border-color, var(--content-bg-color));
    height: auto;
    /* Alto mínimo equivalente a 2 líneas (para que no se vea “más bajo” cuando el nombre usa 2 líneas) */
    min-height: calc(2 * 1.2em + 10px);
    margin-top: 0;
    line-height: 1.2;
    margin-bottom: 10px;
}

/*  linea horozontal */
.orgchart .hierarchy::before {
    content: ""; /* Crea un pseudo-elemento vacío */
   /* position: absolute; /* Posicionamiento absoluto para la línea */
    top: -12px; /* Desplazamiento hacia arriba 12px */
    left: 0; /* Alineación a la izquierda */
    width: 100%; /* Ancho de la línea al 100% del contenedor */
    border-top: 2px solid var(--line-color); /* Línea superior con color y opacidad */
	box-sizing: border-box; /* Incluye el borde en el cálculo del ancho */
}

/*  linea vertical del padre al hijo o del padre con la horizontal */
.orgchart .node:not(:only-child)::after {
    content: ""; /* Crea un pseudo-elemento vacío */
  /*  position: absolute; /* Posicionamiento absoluto para la línea */
    bottom: 9px; /* Desplazamiento hacia abajo 10 px*/
    left: calc(50% - 1px); /* 1px Centra la línea horizontalmente, esto es clave */
    width: 2px; /* Ancho de la línea */
    height: 12px; /* Altura de la línea */
     background-color: var(--line-color) ; /* Color de la línea con opacidad */
}

/* Línea vertical de conexión entre nodos secundarios, es decir la linea que conecta al hijo con las horozontal*/
.orgchart > ul > li > ul li > .node::before {
    content: ""; /* Crea un pseudo-elemento vacío */
    position: absolute; /* Posicionamiento absoluto para la línea */
    top: var(--top, -12px); /* Desplazamiento hacia arriba, usando variable CSS 12px */
    left: calc(50% - 1px); /* Centra la línea horizontalmente, esta comentariada */
    width: 2px; /* Ancho de la línea */
    height: var(--height, 10px); /* Altura de la línea, usando variable CSS */
     background-color: var(--line-color);; /* Color de la línea con opacidad */
}

/* Línea vertical de niveles a la izquierda entre nodos secundarios */
.orgchart .nodes.vertical .hierarchy::before,
.orgchart .nodes.vertical .hierarchy::after {
 /* box-sizing: border-box; /* Incluye el borde en el cálculo del tamaño del elemento */
  content: ''; /* Crea un pseudo-elemento vacío */
 /* position: absolute; /* Posiciona el pseudo-elemento de forma absoluta */
  left: -8px; /* -18px Posiciona el pseudo-elemento 6px a la izquierda del elemento padre  linea que de acerca*/
  border-color: var(--line-color); /* Color del borde: rojo claro semi-transparente */
  border-style: solid; /* Estilo del borde: sólido */
  border-width: 0 0 2px 2px; /* Ancho del borde: 2px en la parte inferior y izquierda */

}




/* Estilos base del organigrama */

/* Estilos para los diferentes niveles */
.orgchart .director-level .content { 
    background-color: var(--director-color);
    border: 1px solid var(--director-color);
}

.orgchart .gerente-level .content { 
    background-color: var(--gerente-color);
    border: 1px solid var(--gerente-color);
}

.orgchart .jefe-level .content { 
    background-color: var(--jefe-color);
    border: 1px solid var(--jefe-color);
}

.orgchart .supervisor-level .content { 
    background-color: var(--supervisor-color);
    border: 1px solid var(--supervisor-color);
}

.orgchart .analista-level .content { 
    background-color: var(--analista-color);
    border: 1px solid var(--analista-color);
}





/* Transiciones suaves */
.orgchart {
    transition: all 0.9s ease-in-out;
}

.orgchart .node {
    transition: all 0.9s ease-in-out;
}

.orgchart .lines {
    transition: all 0.9s ease-in-out;
}

.orgchart .node .title {
    transition: all 0.9s ease-in-out;
}

.orgchart .node .content {
    transition: all 0.9s ease-in-out;
}

/* Mejoras visuales para las transiciones de nivel */
.orgchart.l2r .node.slide-out,
.orgchart.r2l .node.slide-out {
    transform: translateX(-100px);
    opacity: 0;
}

.orgchart.l2r .node.slide-in,
.orgchart.r2l .node.slide-in {
    transform: translateX(0);
    opacity: 1;
}

/* Animación para búsqueda */
.node.highlighted {
    animation: highlight-pulse 1s infinite;
}

@keyframes highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 193, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}

/* =============================================================================
   Solo exportación (html2canvas): únicamente .title y .content para que el
   texto multilínea se rasterice bien. No modificar .node, img ni conectores.
   ============================================================================= */
.orgchart.exporting .node .title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    /* Mantener mínimo de 2 líneas también al exportar */
    min-height: calc(2 * 1.35em + 24px) !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none !important;
    text-align: center !important;
    transition: none !important;
}

.orgchart.exporting .node .content {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    /* Mantener mínimo de 2 líneas también al exportar */
    min-height: calc(2 * 1.2em + 10px) !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: none !important;
    text-align: center !important;
    transition: none !important;
}