/*    MENU*/

.menuMobile#carregaMenu {
    background-image: linear-gradient(90deg, var(--redesign-primary-color), var(--redesign-secondary-color)) !important;
    background-color: var(--redesign-primary-color);
    box-shadow: initial !important;
    width: var(--redesign-expanded-menu-width) !important;
    font-family: var(--redesign-font-family) !important;
    transition: all ease-in-out .2s;
    padding: 0 !important;
    min-width: 75px !important;
    z-index: 101;
/*    top: var(--redesign-header-height);*/
}

.menunovaLargura.menuMobile#carregaMenu {
    width: var(--redesign-collapsed-menu-width) !important;
    background-image: none !important;
}
.menuMobile#carregaMenu .menu-overlay {
    opacity: .6;
    visibility: visible;
    display: block;
    position: fixed;
    top: 55px;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background-color: black;
}

.menunovaLargura.menuMobile#carregaMenu .menu-overlay {
    opacity: 0;
    visibility: hidden;
    display: none;
}


.menuMobile #carrega {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    z-index: 101;
    position: absolute;
    width: 100%;
}

.menunovaLargura.menuMobile .menuLinks .panel-group a {
    padding-right: 0 !important;
}

/* Sidebar recolhido: mantém a coluna de ícones centralizada */
.menuMobile.menunovaLargura .menuLinks,
.menuMobile.menunovaLargura .row.menuLinks {
    padding: 1rem 0 !important;
}

.menuMobile.menunovaLargura .menuLinks .panel-group,
.menuMobile.menunovaLargura .menuLinks .panel-group .panel,
.menuMobile.menunovaLargura .menuLinks .panel-group .panel-heading {
    width: 100% !important;
}

.menuMobile.menunovaLargura .menuLinks .panel-group li {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.menuMobile.menunovaLargura .menuLinks .panel-group a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: .5rem 0 !important;
    margin: 0 !important;
    gap: 0 !important;
}

.menuMobile.menunovaLargura .menuLinks .panel-group a i {
    width: 20px;
    text-align: center;
    margin: 0 !important;
}

.menunovaLargura.menuMobile .menuUsuario {
    padding: 1rem 0 !important;
}

.menunovaLargura.menuMobile .menuUsuario > div:first-child {
    width: 100%;
    display: flex;
    justify-content: center;
}
.menunovaLargura.menuMobile .menuUsuario > div:last-child {
    display: none !important;
}

.menunovaLargura.menuMobile .nomeUsuario, .menunovaLargura.menuMobile .usuarioimagem{
    margin: 0 !important;
}

.menunovaLargura.menuMobile .nomeUsuario, .menunovaLargura.menuMobile .usuarioMenu {
    display: none !important;
}

.menuMobile .menuLogo, .menuMobile .menuUsuario, .menuMobile .menuLinks {
    margin: 0 !important;
}

.menuMobile .menuLogo {
    box-shadow: initial !important;
    height: 55px !important;
    display: flex;
    padding: .2rem 1rem !important;
    justify-content: space-between;
    background-color: white;
    align-items: center;
}

.menuMobile.menunovaLargura .menuLogo {
    background-color: var(--redesign-primary-color);
    color: white;
    background-image: none;
    justify-content: center !important;
    padding: .3rem 1rem !important;
}

.menuMobile .menuLogo .encolheMenu i.fa-bars {
    color: white !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    margin: 0 !important;
}

.menuMobile .menuLogo .encolheMenu i.setaEncolheEsquerda {
    margin-left: 0 !important;
}

.menuMobile .menuLogo .encolheMenu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
}

.menuMobile .menuLogo .encolheMenu i {
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.menuMobile.menunovaLargura .menuLogo .encolheMenu {
    margin: 0 auto !important;
}


.menuMobile .menuLinks .panel-group .panel-title,
.menuMobile .menuLinks .panel-group a p,
.menuMobile .menuLinks .row {
    margin: 0 !important;
    text-transform: initial !important;
}

.menuMobile .menuLinks [class*="col-"] {
    padding: 0 !important;
}

/* style.css define .panel-group { width: 113.5%; margin-left: -15px } — isso estoura a largura e a barra de rolagem corta a seta */
.menuMobile .menuLinks .panel-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
}

/* .row do Bootstrap usa margens negativas; no menu isso empurra o conteúdo para fora da área útil */
.menuMobile #navcontainer.row.menuLinks {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.menuMobile .menuLinks,
.menuMobile .row.menuLinks {
    background-color: var(--redesign-primary-color) !important;    
    height: 70% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-grow: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(0, 0, 0, 0.12);
}

.menuMobile .menuLinks::-webkit-scrollbar,
.menuMobile .row.menuLinks::-webkit-scrollbar {
    width: 8px;
}

.menuMobile .menuLinks::-webkit-scrollbar-track,
.menuMobile .row.menuLinks::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.menuMobile .menuLinks::-webkit-scrollbar-thumb,
.menuMobile .row.menuLinks::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.menuMobile .menuLinks::-webkit-scrollbar-thumb:hover,
.menuMobile .row.menuLinks::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

    .menuMobile .menuLinks .col-md-12 {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .menuMobile .menuLinks .list-group-item {
        width: 100% !important;
        font-family: var(--redesign-font-family) !important;
        background: inherit !important;
        color: var(--white) !important;
        font-weight: bold !important;
        border: none !important;
    }


    .menuMobile.menunovaLargura .menuLinks .panel-group .contemSub::after {
        display: none !important;
    }

@media screen and (max-width: 767px) {
    .menuMobile .menuLinks .panel-group .contemSub[aria-expanded="true"]::after {
        content: "\f077" !important;
    }
}

.menuMobile .menuLinks .panel-group .contemSub::after {
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    color: var(--white);
    font-size: 1rem;
    position: absolute;
    right: 10px;
    font-weight: 600;
}

.menuMobile .menuLinks .panel-group a {
    padding-right: 4.5rem !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Sidebar expandido: ícone + título + seta visíveis (seta não fica sob a scrollbar) */
.menuMobile:not(.menunovaLargura) .menuLinks,
.menuMobile:not(.menunovaLargura) .row.menuLinks {
    scrollbar-gutter: stable;
    padding: 1rem calc(1.2rem + 10px) 1rem 1.2rem !important;
}

.menuMobile:not(.menunovaLargura) .menuLinks .panel-group a.contemSub {
    align-items: flex-start;
    padding-right: 0.65rem !important;
}

.menuMobile:not(.menunovaLargura) .menuLinks .panel-group a:not(.contemSub) {
    padding-right: 0.65rem !important;
}

.menuMobile:not(.menunovaLargura) .menuLinks .panel-group .contemSub p.tituloMain,
.menuMobile:not(.menunovaLargura) .menuLinks .panel-group .contemSub p {
    flex: 1 1 auto;
    min-width: 0;
}

.menuMobile:not(.menunovaLargura) .menuLinks .panel-group .contemSub::after {
    position: static !important;
    right: auto !important;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
}

.menuMobile .menuLinks .panel-group a:hover {
    font-weight: 400 !important;
    background-color: transparent !important;
    text-decoration: none !important;
}
.menuMobile .menuLinks .panel-group a:hover p {
    text-decoration: underline !important;
}

/* Um único bloco de destaque: fundo só no .panel-heading (antes o <a.contemSub> repetia o mesmo fundo e parecia “dois” retângulos) */
.menuMobile .menuLinks .panel-group.menu-item-selected .panel-heading,
.menuMobile .menuLinks .panel-group .panel-heading:has(.contemSub[aria-expanded="true"]) {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px;
}

.menuMobile .menuLinks .panel-group .contemSub[aria-expanded="true"] {
    background-color: transparent !important;
}


.menuMobile .menuLinks .panel-group.menu-item-selected .contemSub p,
.menuMobile .menuLinks .panel-group .contemSub[aria-expanded="true"] p {
    font-weight: 700 !important;
}

/* Hover não remove o fundo do item selecionado/expandido (hover no heading cobre o link) */
.menuMobile .menuLinks .panel-group.menu-item-selected .panel-heading:hover,
.menuMobile .menuLinks .panel-group .panel-heading:has(.contemSub[aria-expanded="true"]):hover {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px;
}

/* Sidebar recolhido: sem destaque de item selecionado (evita fundo preso se aria/class ficarem inconsistentes com menu.js) */
.menuMobile.menunovaLargura .menuLinks .panel-group.menu-item-selected .panel-heading,
.menuMobile.menunovaLargura .menuLinks .panel-group .panel-heading:has(.contemSub[aria-expanded="true"]) {
    background-color: transparent !important;
    border-radius: 0;
}

.menuMobile.menunovaLargura .menuLinks .panel-group.menu-item-selected .contemSub p,
.menuMobile.menunovaLargura .menuLinks .panel-group .contemSub[aria-expanded="true"] p {
    font-weight: 400 !important;
}

.menuMobile.menunovaLargura .menuLinks .panel-group.menu-item-selected .panel-heading:hover,
.menuMobile.menunovaLargura .menuLinks .panel-group .panel-heading:has(.contemSub[aria-expanded="true"]):hover {
    background-color: transparent !important;
}

/* Subitens: hover só sublinhado; fundo só no selecionado (abaixo) */
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a {
    text-decoration: none !important;
    display: block;
    background-color: transparent !important;
    box-shadow: none !important;
}

.menuMobile .menuLinks .panel-collapse.sub .list-group-item a:hover,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Remove anel de foco visual do navegador no menu lateral */
.menuMobile .menuLinks a:focus-visible,
.menuMobile .menuLinks [role="button"]:focus-visible,
.menuMobile .menuLinks button:focus-visible,
.menuMobile .menuLinks .contemSub:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Remove destaque persistente após clique */
.menuMobile .menuLinks a:focus,
.menuMobile .menuLinks a:active,
.menuMobile .menuLinks [role="button"]:focus,
.menuMobile .menuLinks [role="button"]:active,
.menuMobile .menuLinks button:focus,
.menuMobile .menuLinks button:active,
.menuMobile .menuLinks .contemSub:focus,
.menuMobile .menuLinks .contemSub:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.menuMobile .menuLinks .panel-collapse.sub .list-group-item a:hover p,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a:focus p {
    font-weight: 400 !important;
    text-decoration: underline !important;
}

/* Página/rota atual no submenu (quando houver classe .active ou aria-current) */
.menuMobile .menuLinks .panel-collapse.sub .list-group-item.active a,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a.active,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-radius: 6px;
    box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.65);
    text-decoration: none !important;
}

.menuMobile .menuLinks .panel-collapse.sub .list-group-item.active a p,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a.active p,
.menuMobile .menuLinks .panel-collapse.sub .list-group-item a[aria-current="page"] p {
    font-weight: 700 !important;
    text-decoration: none !important;
}
        .menuMobile .menuLinks i {
    color: var(--white) !important;
}

.menuMobile .tituloMain, .menuMobile .menuLinks p {
    color: var(--white) !important;
    font-weight: 400 !important;
}



.menuMobile .copy-right {
    height: auto;
    color: var(--white);
    background-color: var(--redesign-primary-color);
    padding: 1rem;
    font-size: 11px;
    opacity: .6;
}

    .menuMobile .copy-right .copy h5 {
        font-weight: 400 !important;
        text-transform: capitalize;
        margin: 0;
        margin-bottom: 1rem;
    }
.menuMobile .copy-right a, .menuMobile .copy-right a:hover{
    color: var(--white) !important;
}


.menuMobile.menunovaLargura .copy-right {
    display: none !important;
}

@media screen and (min-width: 768px) {
    /* Submenu aberto: seta para a esquerda (<); no mobile permanece ^ (max-width: 767px) */
    .menuMobile .menuLinks .panel-group .contemSub[aria-expanded="true"]::after {
        content: "\f053" !important;
    }

    .menuMobile .menuLinks,
    .menuMobile .row.menuLinks {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .menuMobile .menuLinks .panel-group {
        position: relative;
    }

    .menuMobile .menuLinks .panel-collapse.sub {
        position: fixed;
        top: var(--submenu-fixed-top, auto);
        left: var(--submenu-fixed-left, calc(var(--redesign-expanded-menu-width) + 10px));
        min-width: 320px;
        max-height: 70vh !important;
        overflow-y: auto;
        overflow-x: hidden;
        background-color: var(--redesign-primary-color);
        background-image: linear-gradient(90deg, var(--redesign-primary-color), var(--redesign-secondary-color)) !important;
        border-radius: 0;       
        padding-top: 4rem !important;
        padding-bottom: 2rem !important;
        box-sizing: border-box;
        z-index: 9999;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) rgba(0, 0, 0, 0.12);
    }

    /* Scrollbar discreta, no mesmo espírito da lista principal */
    .menuMobile .menuLinks .panel-collapse.sub::-webkit-scrollbar {
        width: 8px;
    }
    .menuMobile .menuLinks .panel-collapse.sub::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.12);
        border-radius: 4px;
    }
    .menuMobile .menuLinks .panel-collapse.sub::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 4px;
    }
    .menuMobile .menuLinks .panel-collapse.sub::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    .menuMobile .menuLinks .panel-collapse.sub .list-group {
        margin: 0;
    }

    .menuMobile .menuLinks .panel-collapse.sub .list-group-item + .list-group-item {
        margin-top: 0.25rem;
    }

    .menuMobile .menuLinks .panel-collapse.sub .list-group-item {
        background-color: transparent !important;
        border: none !important;
        padding: .15rem 0 !important;
    }

    .menuMobile .menuLinks .panel-collapse.sub .list-group-item a {
        color: var(--white) !important;
        font-weight: 400 !important;
        padding-right: 0 !important;
        /* Texto alinhado à coluna do título principal (ícone ~29px + gap no menu) */
        padding: .4rem .5rem .4rem calc(29px + 5px) !important;
        border-radius: 6px;
    }

    /* O JS legado aplica display:none nos <p>; forca exibir no flyout */
    .menuMobile .menuLinks .panel-collapse.sub p {
        display: block !important;
        color: var(--white) !important;
        font-weight: 400 !important;
    }

    /* Mantem o submenu sempre fora da caixa lateral principal */
    .menuMobile.menunovaLargura .menuLinks .panel-collapse.sub {
        left: var(--submenu-fixed-left, calc(var(--redesign-expanded-menu-width) + 10px));
    }
}