/* ── LA CABECERA, CON NOMBRES LARGOS (2026-09-18) ────────────────────────────
   Se amontonaba porque el nombre del proyecto, la empresa, el icono de información y las
   dos etiquetas iban TODOS en línea dentro del mismo `<h1>` centrado, y caían donde el
   reflujo los dejara. Ahora la cabecera es una columna y las etiquetas tienen su fila. */
.sidebar-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    flex: 0 0 auto;
}

.sidebar-header h1 {
    margin: 0;
    color: var(--second-color);
    line-height: 1.25;
}

.project-name-header .project-name {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: #297fb8;
    line-height: 1.2;
    /* `balance` reparte las líneas en vez de dejar una palabra suelta al final —era lo que
       descolgaba el «SL» de la razón social—, y `anywhere` parte de una vez un nombre sin
       espacios en lugar de desbordar la barra. Donde el navegador no entienda `balance`,
       se ve como hasta hoy. */
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.project-name-header .company-group {
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
    line-height: 1.2;
    text-wrap: balance;
}

.project-name-header .company-name {
    font-size: 0.75rem;
    font-weight: bold;
    display: block;
    line-height: 1.25;
    text-transform: uppercase;
    text-wrap: balance;
}

/* La fila del icono de información y las etiquetas de fase y tipo. */
.sidebar-header-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.sidebar-header-tags #more-info {
    color: #297fb8;
    font-size: 15px;
}

/* ⚠ SÓLO DENTRO DE LA CABECERA. `project-phase-*` y `project-type-*` las pintan también
   `role/users-by-project-id` y los meta roles: unificarlas en su propia clase cambiaría
   pantallas que nadie ha pedido tocar. Aquí sólo se le quita a una de las dos lo que trae
   de más —`p-1 small shadow-sm rounded-1`— para que las dos tengan el mismo aspecto.
   Los `!important` no son capricho: las utilidades de Bootstrap los llevan. */
.sidebar-header-tags .badge {
    height: 22px;
    padding: 0 8px !important;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
    white-space: nowrap;
}

.sidebar-header img {
    width: 9rem;
}

/* ── LA MAQUETA: UNA COLUMNA (2026-09-18) ─────────────────────────────────
   Antes: `.sidebarBody` con altura FIJA (`calc(90vh - 280px)`) y `.footerSidebar` en
   `position: absolute; bottom: 0`. Dos medidas que no se hablaban, así que según el alto
   de la ventana la lista de módulos pasaba POR DEBAJO del avatar y los botones.

   Ahora: cabecera y pie ocupan lo suyo y la lista se queda con lo que sobra. No hay
   ninguna altura mágica que mantener, ni que recalcular cuando se añade algo arriba. */
.sidebarMenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 230px;
    background-color: var(--light-color);
    height: calc(100% - 5px);
    z-index: 500;
    border-right: 1px solid var(--medium-color);
    font-family: var(--body-font);
    text-align: center;
    font-size: 15px;
    padding: 20px 10px 10px;
}

.sidebarBody ul {
    list-style-type: none;
    padding: 0;
}

.sidebarBody ul li {
    display: block;
    width: 200px;
    text-align: left;   
    transition: all 1s;
    cursor: pointer;
}

.sidebarBody div {
    margin:  4px 8px 4px 8px;
}

.sidebarBody hr {
    margin:  4px 8px 4px 8px;
}

.sidebarBody span {
    padding: 5px;
}

.sidebarBody ul li:hover {
    cursor: pointer;
}

.sidebarBody a {
    text-decoration: none;
}

.sidebarBody ul li {
    color: var(--first-color);
    width: 100%;
    cursor: pointer;
}

.sidebarBody ul li  i{
    text-align: center;
    color: var(--first-color);
    padding: 5px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    transform: rotate(0deg);
    cursor: pointer;
}

.sidebarMenu-end-group {
    border-top: 1px dotted var(--dark-color);
    border-top: 1px dotted var(--dark-color);
}

.sidebarBody div.active {
    background-color: #297eb7;
    color: var(--light-color);
    border-radius: 5px;
    padding: 8px;
}

.sidebarBody {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    /* ⚠ `min-height: 0` NO sobra: un hijo flex no encoge por debajo de su contenido, y sin
       esto la lista empujaría al pie en vez de sacar su propia barra de scroll. */
    min-height: 0;
    background-color: transparent;
    border-bottom: 1px solid #c3c4c6;
}

.sidebarBody div:hover {
    background-color: #C7DDEC;
    color:#297eb7;
    border-radius: 5px;     
}

.sidebarMenu ul li:hover i.active {
    color: var(--light-color);
}

.sidebarMenu ul li:hover i {
    color:#297eb7;
}

.sidebarMenu ul li:hover span {
    color:#297eb7;
}

.sidebarMenu ul li.active span.active {
    color: var(--light-color);
}

.sidebarMenu i.active {
    color: var(--light-color);
}

.sidebarMenu span {
    margin-right: 4px;
    color: var(--first-color);
}

.hide {
    width: 70px;
    text-transform: uppercase;
}

.hide span {
    display: none;
}

.footerSidebar {
    /* Era `position: absolute; bottom: 0`, flotando encima de la lista. Ahora es el último
       elemento de la columna y ocupa su sitio, que es lo que impide el solape. */
    flex: 0 0 auto;
    width: 100%;
    /* Mismo aire arriba que abajo. El de abajo lo daba antes un `pb-4` (24px de Bootstrap) en
       el div del selector de idioma, puesto cuando el pie flotaba pegado al fondo. */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-user-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    /* ⚠ Tenía `height: 40px` y el avatar mide 52 (`getUserAvatar(size: 52)`): con
       `align-items: center`, un hijo más alto que su fila se DESBORDA por arriba y por abajo
       —6px por lado— y se sube encima de lo que tenga cerca. La fila mide ahora lo que mide
       su contenido. */
    min-height: 40px;
}

.footer-user-row > div {
    display: flex;
    align-items: center;
}

/* ⚠ EL AVATAR CUELGA DE UN `<a>` EN LÍNEA, y una caja de línea reserva sitio BAJO la línea
   base —el hueco de las letras con cola—. Ese sobrante va sólo por debajo, así que la caja
   del enlace mide unos píxeles más que el círculo y, al centrarla, el círculo queda por
   encima del desplegable de idioma aunque la fila SÍ esté centrada.

   Con el enlace en `flex` no hay línea base que reservar, y los dos quedan a la misma altura. */
.footer-user-row #dropdown-user {
    display: flex;
    align-items: center;
    line-height: 1;
}

.footerSidebar ul {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

.footerSidebar span {
    padding: 5px !important;
}

.footerSidebar li {
    display: block;
    width: fit-content !important;
    padding: 0 0 0 0 !important;
}

.footerSidebar ul li:hover span {
    color: var(--white-color);
}

.footerSidebar ul li a {
    font-size: 0.7rem;
    font-weight: 400;
    padding-bottom: 10px;
    color: #566572;
}

.footerSidebar ul li a strong {
    font-weight: 700;
}

.footerSidebar ul li hr {
    margin: 0 0 12px 0;
    width: 145px;
    border: 1px dotted #566572;
}

/* Estilos para el div user-in-line */
#user-in-line {
    margin-top: 80px;
    padding: 10px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    background-color: #f8f9fa; /* Color de fondo opcional */
    z-index: 20;
}

#user-in-line .user-avatar {
    display: inline-block;
    margin-right: 10px;
    white-space: nowrap;
}

#user-in-line .user-avatar:last-child {
    margin-right: 0;
}

.image-preview-list {
    position: relative;
    z-index: 30;
}

.email-to-circle {
    position: relative;
    z-index: 30;
}



.sidebar-header-help-active{
    color: var(--second-color);
}

.sidebar-header-help-inactive{
    color: var(--second-light-color);
}

.sidebar-language {
    color: #566572;
    border: 1px solid #566572;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar-language:focus,
.sidebar-language:hover {
    background-color: #d2d3d4;
    border: 2px solid #566572;
    outline: none;
}

#dropdown-language .custom-dropdown-item {
    background-color: #ffffff !important;
    color: #343a40 !important;
    border: none;
}

/* Hover y focus */
#dropdown-language .custom-dropdown-item:hover,
#dropdown-language .custom-dropdown-item:focus {
    background-color: #c1d7e6 !important;
    color: #343a40 !important;
}

/* Estado activo */
#dropdown-language .custom-dropdown-item.active {
    background-color: #566572 !important;
    color: #ffffff !important;
}

 .sidebar-user-inline {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     padding-top: 18px;
     z-index: 999;
 }

.sidebar-user-inline p {
    margin-right: 10px;
    white-space: nowrap;
}

.sidebar-user-inline p:last-child {
    margin-right: 0;
}

/* ── EL BUSCADOR DE MÓDULOS (2026-09-18) ──────────────────────────────────
   El campo sólo lo pinta `sidebar.php` a quien tenga `core-sidebar-search`; estas reglas
   están siempre y sin su marcado no hacen nada. */
.sidebar-module-search {
    position: relative;
    /* Los 25px de arriba se suman a los 12 que ya deja la cabecera: en un contenedor flex los
       márgenes NO se colapsan, así que el hueco real es de 37px. */
    margin: 25px 8px 10px;
}

.sidebar-module-search i {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    color: #566572;
    font-size: 12px;
    pointer-events: none;
}

/* ── EL BORDE ÁMBAR: «SÓLO ADMINISTRACIÓN Y SOPORTE» ──────────────────────────
   `#ffc107` es el ámbar de la convención, el mismo de `.md-pill.md-adm` en el widget de
   documentos por ficha. Dice, sin rotularlo, que lo que se está viendo no lo ve todo el mundo:
   aquí, que el campo sólo lo tiene quien tenga `core-sidebar-search`. */
.sidebar-module-search input {
    padding-left: 28px;
    font-size: 13px;
    border-color: #ffc107;
}

.sidebar-module-search input:focus {
    border-color: #ffc107;
    /* El halo también en ámbar: el azul de Bootstrap al enfocar rompía la señal justo cuando
       se está usando el campo. */
    box-shadow: 0 0 0 0.15rem rgba(255, 193, 7, 0.25);
}

/* ⚠ ESTA REGLA NO SOBRA. Arriba se declara `display: block` para `.sidebarBody ul li`, y una
   regla de autor le gana al `display: none` que el navegador asocia al atributo `hidden`:
   sin esto el filtro escondería las entradas y no se vería ningún cambio. */
.sidebarBody ul li[hidden],
.sidebarBody hr[hidden] {
    display: none !important;
}

.sidebarBody ul li.sidebar-module-search-empty {
    padding: 8px;
    color: #566572;
    font-size: 12px;
    font-style: italic;
    cursor: default;
}