.submenu {
    display: none;
    position: fixed;
    background: #fff;
    width: 300px;
    z-index: 110;
    height: 100vh;
    border-left: solid 1px rgba(255, 255, 255, 0.2);
    border-right: solid 1px rgba(255, 255, 255, 0.2);
    overflow-y: auto;
}

/* O título do módulo fica preso no topo do painel (o respiro que antes era
   padding-top do .submenu virou padding do próprio título) e o restante do
   menu rola por baixo dele. */
.submenu .titulo_submenu {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--cor-titulo1);
    margin: 0 0 8px 0;
    padding: 26px 15px 14px 15px;
    height: auto;
    line-height: 1.3;
    font-size: 23px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: none;
}

/* Degradê branco logo abaixo do título: invisível com o menu no topo e some
   suavemente com o conteúdo que passa por baixo ao rolar. */
.submenu .titulo_submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
}

.submenu .titulo_submenu_icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.submenu .titulo_submenu_icone i {
    font-size: 22px;
    line-height: 1;
    color: var(--cor-icone-ativo);
}

.submenu .titulo_submenu_icone img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    display: block;
}

.submenu .titulo_submenu_texto {
    min-width: 0;
}

.submenu .grupo_submenus {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: #1369df;
    height: 35px;
    line-height: 1;
    margin-left: 30px;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}

/* A seta do grupo usa o mesmo chevron dos submenus (›) e herda a cor do nome.
   As classes bi-caret-right-fill / bi-caret-down-fill continuam sendo o estado
   do acordeon (main/js/acordeon.js alterna as duas); aqui só trocamos a
   aparência: fechado aponta para a direita, aberto gira para baixo. */
.submenu .grupo_submenus i {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: inherit;
    transform: rotate(0deg);
    transition: transform 0.2s;
}

.submenu .grupo_submenus i::before {
    content: "\203A" !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    font-size: 17px;
    line-height: 1;
}

.submenu .grupo_submenus i.bi-caret-down-fill {
    transform: rotate(90deg);
}

.submenu .grupo_submenus + div {
    display: block;
}

.submenu a {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    min-height: 36px;
    line-height: 1.35;
    text-decoration: none;
    color: var(--cor-texto-padrao);
    transition: background 0.2s, color 0.2s;
    padding-left: 45px;
    padding-right: 10px;
    font-size: 14px;
    border-radius: 8px;
    gap: 8px;
    margin-left: 8px;
    margin-right: 8px;
}

.submenu a::before {
    content: "\203A";
    flex-shrink: 0;
    font-size: 1.45em;
    line-height: 1;
    transform: translateY(-2px);
    opacity: 0.7;
    color: var(--cor-texto-padrao);
}

.submenu a:hover {
    background-color: rgba(99, 177, 250, 0.2);
    color: #33363b;
}

/* Respiro no fim da rolagem: sem isto o último item encosta no rodapé do painel */
.submenu > div:last-child > a:last-child,
.submenu > a:last-child {
    margin-bottom: 30px;
}