/* Contenedor principal del diagrama D3.js */
.d3-orgchart-container {
    width: 100%;
    min-height: 500px; /* Altura mínima, se ajustará automáticamente por el JS */
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    overflow: auto; /* Permite desplazamiento si el diagrama es más grande que el contenedor */
    font-family: Arial, sans-serif;
    text-align: center; /* Centrar el mensaje de carga */
    padding: 20px;
    box-sizing: border-box; /* Incluye padding y borde en el ancho/alto */
}

/* Estilos para el SVG (el área de dibujo de D3) */
.d3-orgchart-container svg {
    display: block; /* Elimina espacios extra debajo del SVG */
    margin: 0 auto; /* Centrar el SVG si el contenedor es más grande */
}

/* Estilos para los nodos del árbol */
.node circle {
    fill: #999; /* Color de relleno del círculo del nodo */
    stroke: steelblue; /* Color del borde del círculo */
    stroke-width: 3px;
    cursor: pointer; /* Indica que es clickeable */
}

/* Estilo para los nodos con hijos colapsados (cuando están ocultos) */
.node circle.node--internal { /* .node--internal es una clase que D3 puede añadir si un nodo tiene hijos */
    fill: #555; /* Un color diferente para indicar que hay hijos colapsados */
}

.node text {
    font: 12px sans-serif;
    pointer-events: none; /* Permite que los clics pasen al círculo de abajo */
    fill: #333; /* Color del texto del nodo */
    font-weight: bold;
}

/* Estilos para las líneas de conexión (enlaces entre nodos) */
.link {
    fill: none; /* Las líneas no tienen relleno */
    stroke: #ccc; /* Color de la línea */
    stroke-width: 2px;
}