/* style.css */
html,
body {
    margin: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:root {
    --title-bg-color: #ffffff;          /* Color de fondo del título (blanco puro). */
    --title-text-color: #333333;       /* Color del texto del título (gris oscuro). */
    --content-bg-color: #EF8B47;       /* Color de fondo del contenido (naranja claro). */
    --content-text-color: #ffffff;     /* Color del texto del contenido (blanco puro). */
    --line-color: rgba(184, 84, 16, 0.8); /* Color de las líneas de conexión (naranja con opacidad del 80%). */
    --photo-size: 50px;                /* Tamaño de las fotos (50px x 50px). */
    --node-width: 150px;               /* Ancho del nodo (150px). */
    --font-size-title: 10px;           /* Tamaño de fuente para el título (10px). */
    --font-size-content: 10px;         /* Tamaño de fuente para el contenido (10px). */
}

.header-container {
    flex-shrink: 0;
    padding: 10px;                     /* Espaciado interno de 10px (relleno). */
    background-color: rgba(248, 249, 250, 0.8); /* Fondo gris claro con opacidad del 80%. */
    border-bottom: 1px solid #dee2e6;  /* Línea inferior gris claro (#dee2e6). */
}

.main-title {
    margin: 0;                         /* Sin margen alrededor del título principal. */
    font-size: 20px;                   /* Tamaño de fuente de 20px. */
    color: #333;                       /* Color del texto gris oscuro (#333). */
}

/* Área principal del organigrama: ocupa todo el espacio bajo el encabezado */
#chart-container {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

.controls-panel {
    position: fixed;                   /* Fijado en la pantalla, no se mueve al hacer scroll. */
    right: -250px;                     /* Posicionado fuera de la vista (250px hacia la derecha). */
    top: 60px;                         /* Espaciado superior de 60px desde el borde superior. */
    width: 250px;                      /* Ancho del panel de 250px. */
    background: rgba(255, 255, 255, 0.8); /* Fondo blanco con opacidad del 80%. */
    box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Sombra ligera hacia la izquierda. */
    transition: right 0.3s ease;       /* Transición suave al cambiar la posición `right`. */
    z-index: 1000;                     /* Prioridad alta en la pila de capas. */
    padding: 10px;                     /* Espaciado interno de 10px (relleno). */
    max-height: 80vh;                  /* Altura máxima del 80% del viewport. */
    overflow-y: auto;                  /* Muestra una barra de desplazamiento si el contenido excede la altura. */
}

.controls-panel.active {
    right: 0;                          /* Cuando está activo, el panel se posiciona visible a la derecha. */
}

.accordion-item {
    margin-bottom: 3px;                /* Espaciado inferior de 3px entre los elementos del acordeón. */
}

.accordion-button {
    padding: 8px;                      /* Espaciado interno de 8px (relleno). */
    font-size: 14px;                   /* Tamaño de fuente de 14px. */
}

.accordion-body {
    padding: 10px;                     /* Espaciado interno de 10px (relleno). */
    font-size: 12px;                   /* Tamaño de fuente de 12px. */
}

.highlighted {
    box-shadow: 0 0 10px #ffeb3b !important; /* Sombra amarilla brillante para resaltar elementos. */
}

.form-control-color {
    width: 60px;                       /* Ancho del control de color (60px). */
    height: 30px;                      /* Altura del control de color (30px). */
    padding: 0;                        /* Sin espaciado interno. */
    margin: 3px;                       /* Margen de 3px alrededor del control. */
}

.form-range {
    width: 100%;                       /* Ocupa el ancho completo del contenedor padre. */
}

.control-label {
    font-size: 12px;                   /* Tamaño de fuente de 12px para las etiquetas. */
    margin-bottom: 3px;                /* Margen inferior de 3px. */
}

.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;           /* Espaciado interno pequeño (0.25rem arriba/abajo, 0.5rem izquierda/derecha). */
    font-size: 0.875rem;               /* Tamaño de fuente reducido (0.875rem). */
}

/* Estilo para el input de fondo */
.background-input-container {
    margin-bottom: 10px;               /* Margen inferior de 10px para separar del siguiente elemento. */
}

.background-preview {
    width: 100%;                       /* Ocupa el ancho completo del contenedor padre. */
    height: 60px;                      /* Altura fija de 60px. */
    border: 1px solid #ddd;            /* Borde gris claro (#ddd). */
    margin-top: 5px;                   /* Margen superior de 5px. */
    background-size: cover;            /* Ajusta el fondo para cubrir completamente el contenedor. */
    background-position: center;       /* Centra la posición del fondo dentro del contenedor. */
}



/* Añadir o actualizar en style.css */