@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---------------------------------------------------------------------------
   Sidebar nova (tema escuro) — handoff `design_handoff_app_bdr/SIDEBAR_PORTAL.md`.

   Tudo escopado em `#sidebar.sidebar_v2`, a classe que so o `navbar_v2` aplica. Com
   `SIDEBAR_V2` desligado nenhuma regra daqui casa com nada, e o `sidebar.css` antigo
   segue mandando sozinho — os dois arquivos convivem sem `!important` de um lado nem
   do outro.

   O `@import` da Manrope fica aqui, e nao no `external_stylesheets` do `app.py`, para a
   fonte nao entrar como dependencia global do portal por causa de um teste. A
   contrapartida: o arquivo e servido sempre, entao a fonte e baixada mesmo com a flag
   desligada. Ao promover a sidebar, vale mover para o `app.py`.
   --------------------------------------------------------------------------- */

/* As medidas ficam no `:root`, e nao junto das cores, porque o `#main-content` e **irmao**
   da sidebar e nao herda variavel declarada nela. Declarada só no `#sidebar`, a
   `var(--sb-largura)` na regra do irmao resolve para invalido, o `margin-left` cai para o
   valor inicial (0) e ainda derruba o `8rem` que o `sidebar.css` antigo aplicava — o
   conteudo passa a ficar embaixo da barra. */
:root {
    --sb-largura: 264px;
    --sb-largura-rail: 72px;
}

#sidebar.sidebar_v2 {
    --sb-fundo: #08130F;
    --sb-superficie: #0E1E19;
    --sb-superficie-icone: #102B24;
    --sb-borda: #18302A;
    --sb-borda-hover: #2C4740;
    --sb-divisoria: #12241E;
    --sb-verde: #4CC3A6;
    --sb-texto-ativo: #FFFFFF;
    --sb-texto-item: #B9CCC5;
    --sb-texto-subitem: #8FA69F;
    --sb-icone-inativo: #7C948D;
    --sb-mudo: #5E7A72;
    --sb-destrutivo: #E8705F;
    --sb-destrutivo-borda: #3A1E20;
    --sb-destrutivo-fundo: #170F10;
}

/* ------------------------------------------------------------ container */

#sidebar.sidebar_v2 {
    background: var(--sb-fundo);
    box-shadow: none;
    font-family: Manrope, sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Nada dentro da barra pode ser mais largo que ela.
   Antes de o `load_fundos` responder, o `dmc.Select` ainda nao recebeu os dados nem as
   classes finais e renderiza na largura natural dele; como o `#sidebar` tem
   `overflow: hidden`, o card do fundo aparecia cortado no meio do carregamento e so
   ficava certo depois. Prender tudo em `border-box` e `max-width: 100%` faz a geometria
   nao depender do que ja chegou do servidor. */
#sidebar.sidebar_v2,
#sidebar.sidebar_v2 * {
    box-sizing: border-box;
}

#sidebar.sidebar_v2 .corpo_sidebar_v2 > *,
#sidebar.sidebar_v2 .bloco_fundo_sidebar > *,
#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-root,
#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-wrapper {
    max-width: 100%;
}

#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-root,
#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-wrapper,
#sidebar.sidebar_v2 .bloco_fundo_sidebar input {
    width: 100%;
    min-width: 0;
}

#sidebar.sidebar_v2 .corpo_sidebar_v2 {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
}

@media (min-width: 768px) {
    #sidebar.sidebar_v2 {
        width: var(--sb-largura);
        /* `min`/`max` junto com `width`: a barra e `position: fixed`, entao qualquer
           regra antiga que ainda case com `#sidebar` (o `sidebar.css` tem varias) nao
           consegue estica-la nem encolhe-la no meio do carregamento. */
        min-width: var(--sb-largura);
        max-width: var(--sb-largura);
        transition: width .22s ease;
    }

    #sidebar.sidebar_v2 ~ #main-content {
        margin-left: var(--sb-largura);
        transition: margin-left .22s ease;
    }
}

/* O fundo do conteudo segue branco, como no resto do portal: o #E9EEEC do mock foi
   testado e revertido a pedido. O `div.mainContent` continua com o branco do
   `custom1.css`, sem regra nenhuma aqui. */

/* As abas de dentro do conteudo (`#innertabs`) sao estilizadas em
   `assets/tema_conteudo_v2.css`, junto do resto do tema do conteudo — nao aqui, que e o
   arquivo da barra lateral. */

/* --------------------------------------------------- overlay de carregamento */

/* Os dois `dcc.Loading` do `home_layout` sao `fullscreen`: cobrem a tela toda e ficam
   deslocados para nao tapar a sidebar. O deslocamento vem do `mobile.css`, cravado na
   largura da barra **antiga**:

       .app_loading { margin-left: calc(14rem + 12px) }   =  236px

   Com a barra nova de 264px isso deixa o overlay branco por cima dos ultimos 28px dela, e
   durante todo o carregamento a barra aparece cortada — foi exatamente o que se via na
   tela parada no meio do load. Aqui o deslocamento passa a acompanhar a largura real, nos
   dois estados. */
/* So no desktop: abaixo de 768px a barra e uma faixa no topo, e o `mobile.css` ja zera o
   deslocamento (`.app_loading { margin-left: 0 }`) — repetir a largura da barra aqui
   empurraria o overlay para fora da tela no celular. */
@media (min-width: 768px) {
    #sidebar.sidebar_v2 ~ #main-content .app_loading {
        margin-left: var(--sb-largura);
        padding-right: var(--sb-largura);
    }

    #sidebar.sidebar_v2.collapsed ~ #main-content .app_loading {
        margin-left: var(--sb-largura-rail);
        padding-right: var(--sb-largura-rail);
    }
}

/* ------------------------------------------------------------- cabecalho */

#sidebar.sidebar_v2 .header_sidebar_v2 {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px 18px;
    background: none;
    box-shadow: none;
}

#sidebar.sidebar_v2 .logo_sidebar_v2 {
    height: 34px;
    width: auto;
}

#sidebar.sidebar_v2 .btn_hamburguer_sidebar {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    color: var(--sb-icone-inativo);
}

#sidebar.sidebar_v2 .btn_hamburguer_sidebar:hover {
    color: var(--sb-texto-item);
}

/* Os dois icones do botao (ver `cabecalho_sidebar`). O padrao e o hamburguer; o "x" so
   aparece na gaveta aberta do mobile, e a regra que o mostra esta la embaixo, dentro da
   `@media`. Esconde-lo tem de ser **fora** de qualquer midia: dentro dela, o desktop nao
   recebia regra nenhuma e mostrava os dois lado a lado. */
#sidebar.sidebar_v2 .icone_menu_sidebar,
#sidebar.sidebar_v2 .icone_fechar_sidebar {
    display: flex;
}

#sidebar.sidebar_v2 .icone_fechar_sidebar {
    display: none;
}

/* -------------------------------------------------------- seletor de FIDC */

#sidebar.sidebar_v2 .bloco_fundo_sidebar {
    flex: none;
    padding: 0 16px 18px;
    border-bottom: 1px solid var(--sb-divisoria);
    display: block;
}

/* O `dmc.Select` vestido de card. O input do Mantine e quem recebe a borda: envolver o
   componente num container estilizado deixaria duas bordas concentricas. */
#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-input,
#sidebar.sidebar_v2 .bloco_fundo_sidebar input {
    border: 1px solid var(--sb-borda);
    background: var(--sb-superficie);
    border-radius: 12px;
    padding: 11px 14px;
    height: auto;
    min-height: 0;
    color: #fff;
    font: 700 13.5px Manrope, sans-serif;
    cursor: pointer;
}

#sidebar.sidebar_v2 .bloco_fundo_sidebar input::placeholder {
    color: var(--sb-mudo);
    font-weight: 500;
}

#sidebar.sidebar_v2 .bloco_fundo_sidebar .mantine-Select-section svg {
    stroke: var(--sb-verde);
    color: var(--sb-verde);
}

/* ------------------------------------------------ dropdown do fundo (aberto) */

/* Estas regras **nao** pendem de `#sidebar.sidebar_v2` como o resto do arquivo: o
   Mantine renderiza o painel do dropdown em portal, no fim do `<body>`, fora da barra.
   O gancho sao as classes que o `seletor_fundo` passa em `classNames`, e elas so existem
   no tema novo — o `seletor_fundo` e chamado so pelo `navbar_v2`. */

.dropdown_fundo_v2 {
    /* Literal: o painel vive em portal fora do `#sidebar`, onde as variaveis de cor
       da barra nao chegam. */
    border: 1px solid #2C4740;
    background: #0E1E19;
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}

.dropdown_fundo_v2 .opcao_fundo_v2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font: 700 13px Manrope, sans-serif;
    color: #DCE9E4;
}

.dropdown_fundo_v2 .opcao_fundo_v2:hover,
.dropdown_fundo_v2 .opcao_fundo_v2[data-hovered] {
    background: #102B24;
}

/* `data-checked` e o marcador do Mantine para a opcao escolhida. */
.dropdown_fundo_v2 .opcao_fundo_v2[data-checked] {
    background: #102B24;
    color: #4CC3A6;
}

/* O check vem do proprio Mantine (`checkIconPosition='right'`); aqui so a cor e o peso. */
.dropdown_fundo_v2 .opcao_fundo_v2 svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
    color: #4CC3A6;
}

.dropdown_fundo_v2 .grupo_fundo_v2 {
    font: 700 10px Manrope, sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #5E7A72;
    padding: 8px 12px 4px;
}

/* O tracinho a direita do nome do grupo ("UR ————"). No Mantine ele e um `::after` de
   1px pintado com `background-color` — nao e borda —, e vem num cinza claro que fica
   berrante no painel escuro. `currentColor` amarra a linha a cor do proprio texto do
   grupo: mexer numa acerta as duas. */
.dropdown_fundo_v2 .grupo_fundo_v2::after {
    background-color: currentColor;
}

.dropdown_fundo_v2 .vazio_fundo_v2 {
    font: 500 12px Manrope, sans-serif;
    color: #5E7A72;
}

/* A busca do `searchable=True` digita no proprio input do card, entao nao ha campo
   separado a estilizar aqui. */

/* O CNPJ do fundo. O conteudo vem do `update_tabs_layout` (`application.py`), ja
   formatado por `format_doc(..., 'PJ')`, num `div.smaller` que embrulha um `label` — por
   isso o seletor alcanca tambem os filhos.

   O atalho `font:` e proposital: ele zera o `font-style`, entao o italico do `.smaller`
   do CSS antigo nao volta se alguem recolocar a classe la na frente. */
#sidebar.sidebar_v2 .cnpj_sidebar_v2,
#sidebar.sidebar_v2 .cnpj_sidebar_v2 * {
    font: 500 11.5px Manrope, sans-serif;
    color: var(--sb-mudo);
    letter-spacing: .3px;
    margin: 0;
}

#sidebar.sidebar_v2 .cnpj_sidebar_v2 {
    margin-top: 8px;
    padding-left: 2px;
}

/* -------------------------------------------------------------- navegacao */

#sidebar.sidebar_v2 .area_nav_sidebar_v2 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#sidebar.sidebar_v2 .nav_sidebar_v2 {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    min-height: 0;
    padding: 14px 12px;
}

#sidebar.sidebar_v2 .nav_sidebar_v2::-webkit-scrollbar {
    display: none;
}

/* Item de primeiro nivel. O `.nav_item_container` e a classe que o `update_active_nav`
   reescreve a cada navegacao — por isso o visual pende dela, e nao de uma classe propria
   que o callback apagaria. */
#sidebar.sidebar_v2 .subpages_sidebar > .nav_item_container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
}

#sidebar.sidebar_v2 .subpages_sidebar > .nav_item_container:hover {
    background: var(--sb-superficie);
}

#sidebar.sidebar_v2 .subpages_sidebar > .active_nav_container {
    background: var(--sb-superficie) !important;
    border-radius: 10px;
}

#sidebar.sidebar_v2 .nav_item_container .navlink_sidebar {
    flex: 1;
    padding: 0;
    margin: 0 !important;
    font: 700 13.5px Manrope, sans-serif;
    color: var(--sb-texto-item);
    background: none;
}

#sidebar.sidebar_v2 .nav_item_container .navlink_sidebar.active,
#sidebar.sidebar_v2 .nav_item_container:hover .navlink_sidebar {
    color: var(--sb-texto-ativo);
    background: none;
}

/* ----------------------------------------------------------------- icones */

#sidebar.sidebar_v2 .icone_sidebar {
    width: 18px;
    height: 18px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-icone-inativo);
}

#sidebar.sidebar_v2 .icone_sidebar svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* Verde quando a aba (ou uma subaba dela) esta ativa. O `:has` cobre o grupo recolhido
   cujo filho esta ativo — o `update_active_nav` marca `active` no pai tambem. */
#sidebar.sidebar_v2 .active_nav_container .icone_sidebar,
#sidebar.sidebar_v2 .nav_item_container:has(.navlink_sidebar.active) .icone_sidebar {
    color: var(--sb-verde);
}

/* Fallback: quadrado com a inicial, para aba sem SVG cadastrado. */
#sidebar.sidebar_v2 .icone_fallback_sidebar {
    width: 18px;
    height: 18px;
    flex: none;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid var(--sb-borda);
    background: var(--sb-superficie);
    color: var(--sb-icone-inativo);
    font: 800 10px Manrope, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sidebar.sidebar_v2 .active_nav_container .icone_fallback_sidebar,
#sidebar.sidebar_v2 .nav_item_container:has(.navlink_sidebar.active) .icone_fallback_sidebar {
    background: var(--sb-superficie-icone);
    color: var(--sb-verde);
}

/* ------------------------------------------------------------------ seta */

#sidebar.sidebar_v2 .collapse_sidebar {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--sb-mudo);
}

#sidebar.sidebar_v2 .seta_sidebar {
    display: flex;
    transition: transform .18s;
}

#sidebar.sidebar_v2 .seta_sidebar.aberta {
    transform: rotate(90deg);
}

/* --------------------------------------------------------------- subitens */

#sidebar.sidebar_v2 .subitens_sidebar {
    position: relative;
    padding-left: 18px;
    margin: 2px 0 6px;
    gap: 2px !important;
}

/* Linha-guia vertical do acordeao. */
#sidebar.sidebar_v2 .subitens_sidebar::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 4px;
    bottom: 4px;
    width: 1.5px;
    background: var(--sb-borda);
}

#sidebar.sidebar_v2 .subitens_sidebar .nav_item_container {
    position: relative;
    margin-left: 8px;
    padding: 9px 12px 9px 16px;
    border-radius: 9px;
    background: transparent;
}

#sidebar.sidebar_v2 .subitens_sidebar .nav_item_container .navlink_sidebar {
    font: 500 13px Manrope, sans-serif;
    color: var(--sb-texto-subitem);
}

#sidebar.sidebar_v2 .subitens_sidebar .nav_item_container:hover .navlink_sidebar {
    color: var(--sb-texto-ativo);
}

#sidebar.sidebar_v2 .subitens_sidebar .active_nav_container {
    background: var(--sb-superficie) !important;
}

#sidebar.sidebar_v2 .subitens_sidebar .active_nav_container .navlink_sidebar {
    font-weight: 700;
    color: var(--sb-verde);
}

/* Tique verde sobre a linha-guia, no subitem ativo. */
#sidebar.sidebar_v2 .subitens_sidebar .active_nav_container::before {
    content: '';
    position: absolute;
    left: -6.5px;
    top: 8px;
    bottom: 8px;
    width: 1.5px;
    background: var(--sb-verde);
}

/* ----------------------------------------------------------------- rodape */

#sidebar.sidebar_v2 .rodape_sidebar_v2 {
    flex: none;
    border-top: 1px solid var(--sb-divisoria);
    padding: 16px 20px 20px;
}

#sidebar.sidebar_v2 .usuario_sidebar_v2 {
    display: flex;
    align-items: center;
    gap: 12px;
}

#sidebar.sidebar_v2 .avatar_sidebar_v2 {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--sb-superficie-icone);
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 13px Manrope, sans-serif;
    color: var(--sb-verde);
}

#sidebar.sidebar_v2 .identidade_sidebar_v2 {
    flex: 1;
    min-width: 0;
}

#sidebar.sidebar_v2 .nome_sidebar_v2 {
    font: 700 13px Manrope, sans-serif;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar.sidebar_v2 .email_sidebar_v2 {
    font: 500 11.5px Manrope, sans-serif;
    color: var(--sb-mudo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#sidebar.sidebar_v2 .botoes_rodape_sidebar {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

#sidebar.sidebar_v2 .botao_rodape_sidebar {
    flex: 1;
    border: 1px solid var(--sb-borda);
    border-radius: 10px;
    padding: 9px 0;
    text-align: center;
    font: 700 12px Manrope, sans-serif;
    color: #DCE9E4;
    cursor: pointer;
}

#sidebar.sidebar_v2 .botao_rodape_sidebar:hover {
    border-color: var(--sb-borda-hover);
    color: #DCE9E4;
}

#sidebar.sidebar_v2 .botao_rodape_sidebar.destrutivo {
    border-color: var(--sb-destrutivo-borda);
    background: var(--sb-destrutivo-fundo);
    color: var(--sb-destrutivo);
}

#sidebar.sidebar_v2 .botao_rodape_sidebar.destrutivo:hover {
    color: var(--sb-destrutivo);
    border-color: var(--sb-destrutivo);
}

/* ------------------------------------------------------- rail (colapsado) */

/* O clientside callback do hamburguer alterna a classe `collapsed`. Na v1 ela escondia o
   `.sidebar-content` inteiro; aqui a barra vira um trilho de icones — agora que cada aba
   tem um, e o que o desenho pede. */

@media (min-width: 768px) {
    #sidebar.sidebar_v2.collapsed {
        width: var(--sb-largura-rail);
        /* `min`/`max` tambem: a regra da barra aberta trava os dois em 264px para a
           largura nao oscilar durante o carregamento, e `width` sozinho nao vence um
           `min-width` — a barra ficava em 264px com o conteudo ja recuado para 72px,
           passando por baixo dela. */
        min-width: var(--sb-largura-rail);
        max-width: var(--sb-largura-rail);
    }

    #sidebar.sidebar_v2.collapsed ~ #main-content {
        margin-left: var(--sb-largura-rail);
    }

    /* Vence a regra do sidebar.css antigo, que esconde o conteudo por completo. */
    #sidebar.sidebar_v2.collapsed .sidebar-content {
        display: flex;
    }

    #sidebar.sidebar_v2.collapsed .logo_sidebar_v2,
    #sidebar.sidebar_v2.collapsed .bloco_fundo_sidebar,
    #sidebar.sidebar_v2.collapsed .rodape_sidebar_v2,
    #sidebar.sidebar_v2.collapsed .navlink_sidebar,
    #sidebar.sidebar_v2.collapsed .collapse_sidebar,
    #sidebar.sidebar_v2.collapsed .subitens_sidebar {
        display: none;
    }

    #sidebar.sidebar_v2.collapsed .header_sidebar_v2 {
        justify-content: center;
        padding: 22px 0 18px;
    }

    #sidebar.sidebar_v2.collapsed .nav_sidebar_v2 {
        padding: 14px 0;
    }

    #sidebar.sidebar_v2.collapsed .subpages_sidebar > .nav_item_container {
        justify-content: center;
        padding: 12px 0;
    }
}

/* ------------------------------------------------------------------ mobile */

/* Handoff `MOBILE_PORTAL.md`. Abaixo de 768px a barra deixa de ser um acordeao que empurra
   o conteudo para baixo e vira **app bar fixa + gaveta**:

       #sidebar                     <- a app bar (66px de altura, largura toda)
         .header_sidebar_v2         <- logo + botao; com a gaveta aberta vira o cabecalho dela
         #scrim_drawer_mobile       <- o veu; e nele que mora o estado (`.aberto`)
         .corpo_sidebar_v2          <- o painel de 308px, `position: fixed` quando aberto

   Por que o estado vive no veu e nao no `#sidebar`: o callback clientside do hamburguer
   (`layouts/main.py`) manipula `sidebar.classList` direto no DOM, sem passar pelo Dash. Se
   um callback Python tambem escrevesse `className` ali, o React reescreveria por cima do
   que o JS mexeu e vice-versa. O veu e um elemento novo, de dono unico
   (`alternar_drawer_mobile`), e o CSS chega ao painel pelo combinador de irmao.

   As duas classes convivem porque cada uma so tem efeito na sua midia: `default` e
   `collapsed`, do JS, so pintam em `@media (min-width: 768px)`; `aberto`, do Python, so
   aqui. Nenhum dos dois lados precisa saber a largura da tela. */

/* Altura da app bar. Sai daqui e nao de um numero solto porque tres coisas dependem dela:
   o `top` do painel da gaveta, o `margin-top` da barra de abas e o `padding-top` do
   conteudo. O proprio callback clientside le a altura do `#sidebar` e a repassa para a
   barra de abas — com o painel fora do fluxo (`position: fixed`), essa altura e sempre a
   do cabecalho, entao o valor medido e este aqui batem. */
:root {
    --sb-appbar: 66px;
}

.scrim_drawer_mobile {
    display: none;
}

@media (max-width: 767.98px) {
    /* Acima do `#subnavbar_mobile`, que tambem e `navbarPos` (z-index 1030) e vem depois
       no DOM — sem isto o card de abas passaria por cima do veu. */
    #sidebar.sidebar_v2 {
        z-index: 1050;
        /* O painel e o veu sao `position: fixed`, mas um ancestral fixo com
           `overflow: hidden` ainda os recorta. */
        overflow: visible;
    }

    /* A app bar vira o cabecalho da gaveta: encolhe para a largura do painel e troca as
       medidas. As transicoes sao o que faz isso acompanhar o deslizar em vez de saltar. */
    #sidebar.sidebar_v2 .header_sidebar_v2 {
        height: var(--sb-appbar);
        padding: 14px 16px;
        transition: width .24s ease, padding .24s ease;
    }

    #sidebar.sidebar_v2 .logo_sidebar_v2 {
        height: 26px;
        transition: height .24s ease;
    }

    #sidebar.sidebar_v2 .btn_hamburguer_sidebar {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        background: var(--sb-superficie);
        color: #DCE9E4;
        align-items: center;
        justify-content: center;
        transition: width .24s ease, height .24s ease, border-radius .24s ease;
    }

    /* ---- veu e painel ----

       Os dois ficam **sempre montados** e alternam por `transform`/`opacity`, e nao por
       `display`, que nao anima: com `display: none` o painel simplesmente pisca na tela. O
       preco de manter os dois no DOM e so o de um layout a mais, ja que ambos sao
       `position: fixed` e nao entram no fluxo — a altura do `#sidebar` continua sendo a da
       app bar, que e do que o resto depende (o `--sb-appbar`).

       O `visibility` e o que impede o painel fechado de continuar clicavel fora da tela e o
       veu invisivel de engolir o toque no conteudo. Ele nao interpola, entao vai como
       degrau: ao abrir muda na hora (`0s`), ao fechar espera a animacao terminar
       (`0s linear .24s`). Sem essa espera o painel sumiria antes de deslizar. */

    #sidebar.sidebar_v2 .scrim_drawer_mobile {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(4, 12, 9, .6);
        z-index: 1;
        opacity: 0;
        visibility: hidden;
        transition: opacity .24s ease, visibility 0s linear .24s;
    }

    #sidebar.sidebar_v2 .scrim_drawer_mobile.aberto {
        opacity: 1;
        visibility: visible;
        transition: opacity .24s ease, visibility 0s;
    }

    /* Vence tanto o `display: block` natural do `.sidebar-content` quanto as regras de
       `display: none` do `sidebar.css` antigo (mesma especificidade, e este arquivo carrega
       depois na ordem alfabetica que o Dash usa — `.` < `_`).

       Isso deixou de ser detalhe: o callback clientside so alterna `collapsed` quando ve o
       `.sidebar-content` visivel, e como no mobile o painel agora esta sempre montado, a
       classe `collapsed` passa a aparecer tambem no celular — coisa que antes nunca
       acontecia. E inofensiva (todo o estilo dela esta em `@media (min-width: 768px)`),
       desde que a regra acima continue ganhando de `#sidebar.collapsed .sidebar-content`. */
    #sidebar.sidebar_v2 .corpo_sidebar_v2 {
        display: flex;
        position: fixed;
        top: var(--sb-appbar);
        left: 0;
        bottom: 0;
        width: 308px;
        /* Em telas estreitas o painel nunca cobre a tela inteira: sobra uma faixa de veu
           para o usuario ver que ha algo atras e ter onde tocar para fechar. */
        max-width: 86vw;
        background: var(--sb-fundo);
        box-shadow: 16px 0 48px rgba(0, 0, 0, .5);
        z-index: 2;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .24s ease, visibility 0s linear .24s;
    }

    #sidebar.sidebar_v2 .scrim_drawer_mobile.aberto ~ .corpo_sidebar_v2 {
        transform: none;
        visibility: visible;
        transition: transform .24s ease, visibility 0s;
    }

    /* Com a gaveta aberta o cabecalho encolhe para a largura do painel e vira o cabecalho
       dele (logo + fechar), como no mock.

       O resto da faixa do topo **continua com o fundo da barra**: o veu tem `z-index: 1` e
       ja pinta por cima do fundo do `#sidebar`, que e desenhado no fundo do contexto de
       empilhamento dele. Zerar esse fundo (o que esta regra fazia antes) deixava o
       conteudo branco aparecer atras do veu, e a app bar parecia sumir a direita do
       painel. */
    #sidebar.sidebar_v2:has(.scrim_drawer_mobile.aberto) .header_sidebar_v2 {
        position: relative;
        z-index: 3;
        width: 308px;
        max-width: 86vw;
        background: var(--sb-fundo);
        padding: 18px 18px 14px;
    }

    #sidebar.sidebar_v2:has(.scrim_drawer_mobile.aberto) .logo_sidebar_v2 {
        height: 28px;
    }

    #sidebar.sidebar_v2:has(.scrim_drawer_mobile.aberto) .btn_hamburguer_sidebar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        color: var(--sb-icone-inativo);
    }

    #sidebar.sidebar_v2:has(.scrim_drawer_mobile.aberto) .icone_menu_sidebar {
        display: none;
    }

    #sidebar.sidebar_v2:has(.scrim_drawer_mobile.aberto) .icone_fechar_sidebar {
        display: flex;
    }

    /* ---- conteudo da gaveta: alvos de toque maiores (>= 44px) ---- */

    #sidebar.sidebar_v2 .subpages_sidebar > .nav_item_container {
        padding: 12px 10px;
    }

    #sidebar.sidebar_v2 .nav_item_container .navlink_sidebar {
        font-size: 14px;
    }

    #sidebar.sidebar_v2 .subitens_sidebar .nav_item_container {
        padding: 11px 12px 11px 16px;
    }

    #sidebar.sidebar_v2 .subitens_sidebar .nav_item_container .navlink_sidebar {
        font-size: 13.5px;
    }

    #sidebar.sidebar_v2 .botao_rodape_sidebar {
        padding: 10px 0;
    }
}

/* Respeita quem desligou animacoes no sistema: a gaveta continua abrindo e fechando, so
   que na hora. */
@media (prefers-reduced-motion: reduce) {
    #sidebar.sidebar_v2 .scrim_drawer_mobile,
    #sidebar.sidebar_v2 .scrim_drawer_mobile.aberto,
    #sidebar.sidebar_v2 .corpo_sidebar_v2,
    #sidebar.sidebar_v2 .scrim_drawer_mobile.aberto ~ .corpo_sidebar_v2,
    #sidebar.sidebar_v2 .header_sidebar_v2,
    #sidebar.sidebar_v2 .logo_sidebar_v2,
    #sidebar.sidebar_v2 .btn_hamburguer_sidebar {
        transition: none;
    }
}