/*
 * BARRA SUPERIOR Y COLUMNA DEL MENU · prefijo .sga-nav-
 *
 * Esta hoja la carga head.php EN TODAS LAS PANTALLAS, estén en Bootstrap 4 o en Bootstrap 5,
 * porque la navegación es la misma para las dos y no puede depender de la versión: nada de
 * aquí usa clases de Bootstrap ni sus utilidades (mr-2, ml-auto, ...), que cambiaron de
 * nombre entre una versión y otra.
 *
 * Antes el aspecto del menú vivía en tres <style> sueltos dentro de menu.php, con la barra
 * amarilla (bg-warning) y la columna negra (bg-dark) de Bootstrap. Ahora sigue la misma
 * paleta que css/corporativo.css, con nombres propios (--sga-nav-*) para no pisar los de esa
 * hoja cuando las dos están cargadas.
 *
 * PLEGAR EL MENU. El estado vive en una clase del <body>:
 *
 *     body.sga-con-menu       hay sesión abierta, así que hay barra y columna (lo pone head.php)
 *     body.sga-menu-oculto    la columna está plegada (lo pone y lo guarda menu.php)
 *     body.sb-sidenav-toggled  lo mismo, con el nombre antiguo que usa marcaje_portero.php
 */

:root {
    --sga-nav-alto: 54px;
    --sga-nav-ancho: 240px;

    --sga-nav-fondo: #14232b;
    --sga-nav-lateral: #1b2d36;
    --sga-nav-acento: #0f6e7a;
    --sga-nav-acento-claro: #2aa1ad;
    --sga-nav-texto: #cfdde4;
    --sga-nav-apagado: #8ba0ab;
    --sga-nav-linea: rgba(255, 255, 255, .08);
}

/* El hueco que la navegación le quita a la pantalla. Solo cuando hay sesión: sin ella no hay
   barra ni columna y la página empieza arriba del todo. */
body.sga-con-menu {
    padding-top: var(--sga-nav-alto);
    padding-left: var(--sga-nav-ancho);
    transition: padding-left .22s ease;
    overflow-x: hidden;
}

body.sga-con-menu.sga-menu-oculto,
body.sga-con-menu.sb-sidenav-toggled {
    padding-left: 0;
}

/* Con el menú al lado, el ancho fijo de .container deja el contenido apretado contra la
   columna. Venía de un <style> de menu.php y se conserva tal cual para no mover de sitio las
   pantallas que todavía están en Bootstrap 4. */
body.sga-con-menu .container {
    max-width: 100%;
    padding: 20px;
}

/* ================================================================ barra superior */

.sga-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--sga-nav-alto);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: var(--sga-nav-fondo);
    border-bottom: 1px solid var(--sga-nav-linea);
    box-shadow: 0 1px 3px rgba(20, 35, 43, .35);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* La barra de la pantalla de ingreso: sin sesión el <body> no reserva el hueco de arriba, así
   que la barra empuja el contenido en vez de ponerse encima. */
.sga-nav--suelta {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
}

/* La cabecera del cuadro de ingreso, para que haga juego con la barra. Antes era amarilla con
   el texto en blanco, que no se lee. */
.sga-nav__cabecera {
    background: var(--sga-nav-fondo);
    color: #fff;
}

.sga-nav__cabecera .close,
.sga-nav__cabecera .btn-close {
    color: #fff;
    opacity: .8;
    text-shadow: none;
}

/* -------------------------------------------------- botón de plegar */

.sga-nav__toggle {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    background: none;
    color: var(--sga-nav-texto);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.sga-nav__toggle:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.sga-nav__toggle:focus-visible {
    outline: 2px solid var(--sga-nav-acento-claro);
    outline-offset: 1px;
}

/* -------------------------------------------------- identidad */

.sga-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
}

.sga-nav__brand:hover,
.sga-nav__brand:focus {
    color: #fff;
    text-decoration: none;
}

.sga-nav__mark {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--sga-nav-acento);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
}

.sga-nav__nom {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sga-nav__ver {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sga-nav-apagado);
    white-space: nowrap;
}

/* -------------------------------------------------- lado derecho */

.sga-nav__der {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sga-nav__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    padding: 4px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    color: var(--sga-nav-texto);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sga-nav__chip i {
    color: var(--sga-nav-acento-claro);
}

/* El desplegable del usuario. Es un <li> dentro de un <ul>, porque así lo esperan los dos
   Bootstrap; aquí se le quita la apariencia de lista. */
.sga-nav__cuenta {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sga-nav__usuario {
    display: inline-flex;
    background: none;
    font-family: inherit;
    cursor: pointer;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 20px;
    color: var(--sga-nav-texto);
    font-size: 12.5px;
    text-decoration: none;
    white-space: nowrap;
}

.sga-nav__usuario:hover,
.sga-nav__usuario:focus {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}

.sga-nav__usuario i.fa-user-circle {
    font-size: 15px;
}

.sga-nav__menu {
    border: 1px solid var(--sga-linea, #d5dee5);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 35, 43, .18);
    padding: 6px;
    font-size: 13px;
    /* Bootstrap 4 no tiene dropdown-menu-end y Bootstrap 5 no tiene dropdown-menu-right: se
       fija aquí para que el panel no se salga por la derecha en ninguna de las dos. */
    right: 0;
    left: auto;
}

.sga-nav__menu .dropdown-item {
    border-radius: 7px;
    padding: 7px 10px;
    color: #14232b;
}

.sga-nav__menu .dropdown-item i {
    width: 16px;
    text-align: center;
    margin-right: 8px;
    color: var(--sga-nav-acento);
}

.sga-nav__menu .dropdown-item:hover {
    background: #e4f0f1;
    color: #0b545d;
}

/* ================================================================ columna del menú */

#sidebar-wrapper {
    position: fixed;
    top: var(--sga-nav-alto);
    bottom: 0;
    left: 0;
    width: var(--sga-nav-ancho);
    z-index: 1030;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--sga-nav-lateral);
    border-right: 1px solid var(--sga-nav-linea);
    transition: transform .22s ease;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

body.sga-menu-oculto #sidebar-wrapper,
body.sb-sidenav-toggled #sidebar-wrapper {
    transform: translateX(-100%);
}

#sidebar-wrapper::-webkit-scrollbar {
    width: 8px;
}

#sidebar-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
}

.sga-nav-lat__tit {
    padding: 14px 16px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sga-nav-apagado);
}

/* -------------------------------------------------- selector de pertenencia */

.sga-nav-lat__ctx {
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--sga-nav-linea);
    list-style: none;
    margin: 0;
}

.sga-nav-lat__ctx select {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    color: #e6eef2;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 7px;
}

.sga-nav-lat__ctx select:focus {
    outline: 2px solid var(--sga-nav-acento-claro);
    outline-offset: 1px;
}

/* Las opciones las pinta el sistema operativo, no la caja: sobre fondo claro tienen que ir en
   tinta o no se leen. */
.sga-nav-lat__ctx select option {
    color: #14232b;
    background: #fff;
}

/* -------------------------------------------------- los grupos y sus enlaces

   OJO: constructor_menu() (jquery/jquery.js) muestra cada opción permitida escribiéndole
   `display: block` EN LINEA. Por eso ni los grupos ni los enlaces pueden maquetarse con
   flex -- el estilo en línea gana --: el icono se alinea con un ancho fijo y no con una caja
   flexible. */

.sga-nav-lat__lista {
    list-style: none;
    margin: 0;
    padding: 6px 0 24px;
}

.sga-nav-lat__lista li {
    list-style: none;
}

.sga-nav-lat__grupo {
    display: block;
    position: relative;
    padding: 9px 30px 9px 14px;
    color: var(--sga-nav-texto);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sga-nav-lat__grupo:hover,
.sga-nav-lat__grupo:focus,
.sga-nav-lat__grupo[aria-expanded="true"] {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    text-decoration: none;
}

.sga-nav-lat__grupo i {
    width: 18px;
    margin-right: 9px;
    text-align: center;
    color: var(--sga-nav-apagado);
}

.sga-nav-lat__grupo[aria-expanded="true"] i {
    color: var(--sga-nav-acento-claro);
}

/* La flecha del desplegable: se dibuja aquí y no con la de Bootstrap, que en la versión 5
   cuelga de otro selector. */
.sga-nav-lat__grupo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--sga-nav-apagado);
    border-bottom: 1.5px solid var(--sga-nav-apagado);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .18s ease;
}

.sga-nav-lat__grupo[aria-expanded="true"]::after {
    transform: translateY(-25%) rotate(-135deg);
}

.sga-nav-lat__sub {
    list-style: none;
    margin: 0;
    padding: 2px 0 6px;
    background: rgba(0, 0, 0, .16);
}

.sga-nav-lat__link {
    display: block;
    padding: 6px 14px 6px 41px;
    border-left: 2px solid transparent;
    color: #a9bcc6;
    font-size: 12.5px;
    text-decoration: none;
}

.sga-nav-lat__link:hover,
.sga-nav-lat__link:focus {
    background: rgba(255, 255, 255, .06);
    border-left-color: var(--sga-nav-acento-claro);
    color: #fff;
    text-decoration: none;
}

.sga-nav-lat__link i {
    width: 16px;
    margin-right: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--sga-nav-apagado);
}

/* La pantalla en la que se está. La marca menu.php comparando la dirección de cada enlace con
   la de la página. */
.sga-nav-lat__link.es-actual {
    background: rgba(15, 110, 122, .42);
    border-left-color: var(--sga-nav-acento-claro);
    color: #fff;
    font-weight: 600;
}

.sga-nav-lat__link.es-actual i {
    color: #fff;
}

/* ================================================================ pantallas estrechas

   Por debajo de 992px la columna no cabe al lado del contenido: se pliega sola y, cuando se
   abre, se pone encima con un velo detrás. */

.sga-nav__fondo {
    display: none;
    position: fixed;
    top: var(--sga-nav-alto);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1025;
    background: rgba(20, 35, 43, .5);
    border: 0;
    padding: 0;
}

@media (max-width: 991.98px) {

    body.sga-con-menu {
        padding-left: 0;
    }

    #sidebar-wrapper {
        box-shadow: 0 8px 24px rgba(20, 35, 43, .35);
    }

    body.sga-con-menu:not(.sga-menu-oculto):not(.sb-sidenav-toggled) .sga-nav__fondo {
        display: block;
    }

    .sga-nav__ver,
    .sga-nav__chip {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .sga-nav__nom {
        display: none;
    }
}

/* ================================================================ impresión */

@media print {

    .sga-nav,
    .sga-nav__fondo,
    #sidebar-wrapper {
        display: none !important;
    }

    body.sga-con-menu {
        padding: 0 !important;
    }
}
