/* ==========================================================================
   SYSWAY — camada de tokens e ajustes sobre o tema base
   --------------------------------------------------------------------------
   Os tokens abaixo são a fonte única das cores da aplicação. Todo valor tem
   contraste verificado contra o fundo branco pelo critério WCAG 2.1 AA:
   tokens de texto seguem 1.4.3 (mínimo 4,5:1) e tokens não-textuais, usados
   em superfície, borda e outline, seguem 1.4.11 (mínimo 3:1).
   O número ao lado de cada cor é a razão de contraste medida.
   ========================================================================== */

:root {
    /* --- superfícies --- */
    --sw-surface: #fff;
    --sw-surface-sunken: #f8f9fc;
    --sw-border: #ced4da;
    --sw-border-strong: #b7b9cc;

    /* --- texto (sobre superfície clara) --- */
    --sw-text: #5a5c69; /* 6.63:1 — texto principal */
    --sw-text-secondary: #6c757d; /* 4.69:1 — texto de apoio */
    --sw-text-on-brand: #fff;

    /* --- marca ---
       Laranja do logo WAYON. Diferente dos tokens de texto abaixo, --sw-brand
       mede 3.61:1 e por isso só responde por superfície e acento não-textual
       (fundo, outline, borda), onde o mínimo é 3:1 (WCAG 1.4.11). Texto na cor
       da marca usa --sw-brand-deep. */
    --sw-brand: #f04e23; /* 3.61:1 — laranja WAYON (não-textual) */
    --sw-brand-deep: #9e3317; /* 7.14:1 — texto de marca e fim do gradiente */

    /* --- estados semânticos (valores para TEXTO, já acessíveis) --- */
    --sw-danger-text: #a71d2a; /* 7.36:1 */
    --sw-danger-border: #dc3545; /* 4.53:1 — componente de UI, mínimo 3:1 */
    --sw-success-text: #1e7e34; /* 5.14:1 */
    --sw-warning-text: #856404; /* 5.49:1 */
    --sw-info-text: #0c5460; /* 8.56:1 */

    /* --- foco --- */
    --sw-focus-ring: rgba(240, 78, 35, .35);

    /* --- controles de marcação (SPEC-056) ---
       Borda e bolinha do switch, checkbox e rádio desmarcados: componente de
       interface, mínimo WCAG 1.4.11 de 3:1. O Bootstrap usava #dee2e6 (1.30:1),
       rgba(0,0,0,.25) na bolinha (1.84:1) e #86b7fe com foco (2.06:1). A bolinha
       repete estes valores dentro do SVG, porque var() não entra em url(). */
    --sw-control-border: #6c757d; /* 4.69:1 no --sw-surface, 4.45:1 no --sw-surface-sunken — repouso */
    --sw-control-border-focus: #cc421e; /* 4.81:1 no --sw-surface, 4.57:1 no --sw-surface-sunken — com foco */

    /* --- indicadores de status das grades ---
       Bolinhas de status são elementos não-textuais: o mínimo WCAG 1.4.11 é 3:1.
       Os valores antigos (#ffd800 1.39:1, #0094ff 3.14:1) não davam margem. */
    --sw-status-pendente: #856404; /* 5.49:1 */
    --sw-status-gestor: #0070c0; /* 5.15:1 */
    --sw-status-apontadas: #1e7e34; /* 5.14:1 */
}

/* ==========================================================================
   Utilitárias
   ========================================================================== */

/* 45 elementos declaravam cursor:pointer inline. Bootstrap não tem equivalente. */
.cursor-pointer {
    cursor: pointer;
}

/* Texto disponível a leitor de tela mas fora da tela — usado para dar nome
   acessível a indicadores que hoje só existem como cor. */
.sr-only-sw {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Indicadores de status (grade de Faturamento x Taxas)
   A cor sozinha não pode carregar o significado — WCAG 1.4.1. Cada bolinha
   recebe também um nome acessível via .sr-only-sw no markup.
   ========================================================================== */

.sw-status {
    font-size: 1.5rem;
    line-height: 1;
}

    .sw-status--pendente {
        color: var(--sw-status-pendente);
    }

    .sw-status--gestor {
        color: var(--sw-status-gestor);
    }

    .sw-status--apontadas {
        color: var(--sw-status-apontadas);
    }

/* Gradiente da sidebar — usa os tokens de marca */
.bg-gradient-red {
    background-color: var(--sw-brand);
    background-image: linear-gradient(180deg, var(--sw-brand) 10%, var(--sw-brand-deep) 100%);
    background-size: cover;
}

/* ==========================================================================
   Validação (Parsley)
   O vermelho puro (#f00) reprovava em 4.00:1. O token de perigo usa a própria
   vermelha profunda do SYSWAY e mede 7.36:1.
   ========================================================================== */

.parsley-errors-list {
    color: var(--sw-danger-text);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 5px;
    list-style: none;
    padding-left: 0;
}

input.parsley-error,
textarea.parsley-error,
select.parsley-error {
    border-color: var(--sw-danger-border);
}

/* O erro não pode ser sinalizado só pela cor da borda (WCAG 1.4.1). */
input.parsley-error,
textarea.parsley-error,
select.parsley-error {
    box-shadow: 0 0 0 1px var(--sw-danger-border);
}

/* --------------------------------------------------------------------------
   Erro em campo que a tela não desenha como <input>/<select>

   O Parsley pinta o elemento do formulário (`_inputHolder`). As regras acima
   bastam enquanto esse elemento é o que o usuário vê — e deixam de bastar em
   três situações, todas presentes no sistema:

     1. o campo é substituído por um widget e fica `display:none` (Select2);
     2. o campo é movido para dentro do widget (Trumbowyg);
     3. o campo divide a moldura com um botão (`input-group` do datetimepicker).

   Nas duas primeiras a borda vermelha cai num nó invisível e sobra só o texto
   "Este campo é obrigatório."; na terceira ela pinta metade do controle.
   -------------------------------------------------------------------------- */

/* Select2 — `_placeContainer` faz `$container.insertAfter($element)`, então o
   container é sempre o irmão imediatamente seguinte ao <select> marcado.
   O `!important` responde ao `border: … !important` do bloco Select2 abaixo. */
select.parsley-error + .select2-container .select2-selection {
    border-color: var(--sw-danger-border) !important;
    box-shadow: 0 0 0 1px var(--sw-danger-border) !important;
}

/* Trumbowyg — `buildEditor` insere a .trumbowyg-box depois do <textarea> e em
   seguida move o próprio <textarea> para dentro dela: é filho direto da box. */
.trumbowyg-box:has(> textarea.parsley-error) {
    border-color: var(--sw-danger-border);
    box-shadow: 0 0 0 1px var(--sw-danger-border);
}

/* input-group — quem forma a moldura é o grupo, não o campo. O halo de 1px do
   campo ficaria cortado rente ao botão, e o botão continuaria cinza. */
.input-group > .parsley-error {
    box-shadow: none;
}

.input-group > .parsley-error,
.input-group > .parsley-error ~ .input-group-append .input-group-text,
.input-group > .parsley-error ~ .input-group-text {
    border-color: var(--sw-danger-border);
}

.input-group:has(> .parsley-error) {
    border-radius: 0.375rem;
    box-shadow: 0 0 0 1px var(--sw-danger-border);
}

/* Feedback de força de senha — a cor acompanha o estado, não fica cinza fixo */
#senhaFeedback {
    font-weight: 600;
}

    #senhaFeedback[data-forca="fraca"] {
        color: var(--sw-danger-text);
    }

    #senhaFeedback[data-forca="media"] {
        color: var(--sw-warning-text);
    }

    #senhaFeedback[data-forca="boa"] {
        color: var(--sw-success-text);
    }

/* ==========================================================================
   DataTables
   ========================================================================== */

/* alinha o campo de busca à direita */
.dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

    .dataTables_filter label {
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        white-space: nowrap;
    }

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.dataTables_length select {
    width: 70px !important;
}

.dataTables_paginate {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

    .dataTables_paginate .pagination {
        margin: 0;
    }

/* ==========================================================================
   Select2 — alinha ao visual dos campos do Bootstrap
   ========================================================================== */

.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    padding: 0.09rem 0.75rem 0.03rem !important;
    border: 1px solid var(--sw-border) !important;
    border-radius: 0.375rem !important;
    background-color: var(--sw-surface) !important;
}

.select2-container .select2-selection__rendered {
    line-height: 2.25rem !important;
    color: #212529 !important;
}

.select2-container .select2-selection__arrow {
    height: 2.25rem !important;
}

.select2-container .select2-dropdown {
    border: 1px solid var(--sw-border) !important;
    border-radius: 0.375rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important;
}

/* ==========================================================================
   Modais
   ========================================================================== */

.modal .badge {
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.modal-body img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

    .modal-body iframe {
        width: 100%;
        height: 50vh;
        border: none;
    }

/* --------------------------------------------------------------------------
   SPEC-010 — painel de pré-visualização de anexo (_PreviewAnexo.cshtml)

   Mora aqui, e não inline nas views, porque as duas telas de notificação usam a
   mesma partial: estilo inline viraria a terceira cópia da regra visual.

   Cores sempre por token — nenhum valor cru abaixo.
   -------------------------------------------------------------------------- */

.preview-anexo {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sw-border);
    border-radius: .35rem;
    background-color: var(--sw-surface);
    overflow: hidden;
}

.preview-anexo-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--sw-border);
    background-color: var(--sw-surface-sunken);
}

.preview-anexo-titulo {
    font-weight: 700;
    color: var(--sw-text);
    /* Título é digitado pelo usuário e pode ter 100 caracteres: trunca em vez de
       empurrar os botões de ação para fora do painel. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.preview-anexo-acoes {
    flex: 0 0 auto;
}

.preview-anexo-corpo {
    position: relative;
    /* O painel acompanha a altura da janela no desktop; o mínimo evita que ele
       colapse em telas baixas, onde ficaria uma faixa inútil. */
    height: calc(100vh - 220px);
    min-height: 400px;
    overflow: auto;
    background-color: var(--sw-surface-sunken);
}

    /* Em tela cheia o corpo deixa de ser uma caixa dentro do card. */
    .preview-anexo-corpo:fullscreen {
        height: 100vh;
        min-height: 0;
        background-color: var(--sw-surface);
    }

.preview-anexo-vazio,
.preview-anexo-indisponivel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 100%;
    padding: 1.5rem;
    text-align: center;
    color: var(--sw-text-secondary);
}

    .preview-anexo-indisponivel .preview-anexo-nome {
        font-weight: 700;
        color: var(--sw-text);
        word-break: break-word;
        margin-bottom: 0;
    }

    .preview-anexo-indisponivel .preview-anexo-aviso {
        margin-bottom: .5rem;
        max-width: 32rem;
    }

.preview-anexo-imagem {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1rem;
}

    .preview-anexo-imagem img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        object-fit: contain;
    }

/* O iframe ocupa o corpo inteiro. A regra `.modal-body iframe` acima fixa 50vh —
   esta precisa vencer quando a partial é renderizada dentro do modal da tela de
   Gestão, por isso a especificidade maior. */
.preview-anexo .preview-anexo-frame,
.preview-anexo .preview-anexo-texto {
    height: 100%;
}

    .preview-anexo .preview-anexo-frame iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }

    .preview-anexo .preview-anexo-texto pre {
        height: 100%;
        margin: 0;
        padding: 1rem;
        overflow: auto;
        background-color: var(--sw-surface);
        color: var(--sw-text);
        /* Conteúdo de arquivo de texto: quebra linha longa em vez de rolar na
           horizontal, que é o que estouraria a largura da página. */
        white-space: pre-wrap;
        word-break: break-word;
    }

/* Miniatura da grade — caixa fixa para a altura da linha não pular conforme as
   imagens chegam (elas carregam em `lazy`, uma a uma). */
.grid-miniatura {
    position: relative;
    width: 56px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--sw-border);
    border-radius: .2rem;
    background-color: var(--sw-surface-sunken);
    color: var(--sw-text-secondary);
}

    .grid-miniatura img {
        /* Fica POR CIMA do ícone e o cobre ao carregar. É o que faz `204`, timeout
           e erro de rede caírem todos no mesmo estado visual, sem depender do
           evento `onerror` — que não dispara de forma consistente para 204. */
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        background-color: var(--sw-surface);
    }

/* Linha selecionada no split view. A borda à esquerda é o segundo canal: só a cor
   de fundo não distingue a linha para quem não percebe contraste de cor. */
table.dataTable tbody tr.linha-selecionada {
    background-color: var(--sw-surface-sunken);
    box-shadow: inset 3px 0 0 0 var(--sw-brand);
}

table.dataTable tbody tr.linha-clicavel {
    cursor: pointer;
}

    table.dataTable tbody tr.linha-clicavel:focus {
        outline: 2px solid var(--sw-brand);
        outline-offset: -2px;
    }

/* Botão de fechar do overlay: só existe abaixo de 992px, onde o painel cobre a tela. */
.preview-anexo-fechar {
    display: none;
    margin-bottom: .5rem;
    text-align: right;
}

/* CA5 — abaixo de 992px a grade ocupa a largura toda e o painel vira sobreposição de
   tela cheia, aberta pela seleção da linha.

   POR QUE SOBREPOSIÇÃO POR CLASSE E NÃO UM MODAL DE VERDADE: mover o painel para
   dentro de um modal significaria mover nós no DOM, e mover um <iframe> faz o
   navegador RECARREGAR o documento — no caso do Office, uma ida nova ao serviço
   externo a cada abertura. Trocar uma classe mantém a instância única da partial,
   preserva o estado do iframe e evita a segunda cópia do HTML. */
@media (max-width: 991.98px) {
    .preview-anexo-coluna {
        display: none;
    }

        .preview-anexo-coluna.aberto {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 1050;
            padding: .75rem;
            overflow: auto;
            background-color: var(--sw-surface);
        }

            .preview-anexo-coluna.aberto .preview-anexo-fechar {
                display: block;
            }

            .preview-anexo-coluna.aberto .preview-anexo-corpo {
                /* Desconta o cabeçalho do painel e o botão de fechar. */
                height: calc(100vh - 150px);
                min-height: 0;
            }
}

/* --------------------------------------------------------------------------
   SPEC-047 — o mesmo painel, agora DENTRO de um modal de CRUD

   As duas regras abaixo existem porque o painel foi medido para ocupar uma
   PÁGINA (tela de Material Notificação), e nas abas de Anexos ele passa a viver
   dentro do .modal-body de um modal que já tem cabeçalho, abas e rodapé.
   Nenhuma delas altera o comportamento em página — as duas são escopadas.
   -------------------------------------------------------------------------- */

/* CA8 — altura.

   Em página, `.preview-anexo-corpo` usa `calc(100vh - 220px)` com mínimo de
   400px: a conta desconta o cabeçalho do site e a paginação da grade. Dentro de
   um modal essa mesma altura estoura o `.modal-body`, que já é rolável e já
   perdeu espaço para o header, a barra de abas e o footer com Salvar/Cancelar —
   o resultado é rolagem dupla, e o usuário rola o modal inteiro procurando o
   documento.

   O `min-height` cai junto com a altura. Mantê-lo em 400px anularia a regra em
   telas baixas, que é justamente onde o estouro dói.

   O SELETOR PASSA PELO `.preview-anexo-coluna`, e esse detalhe é o achado S-03 do
   review. Escrita como `.modal-body .preview-anexo-corpo`, a regra venceria por
   especificidade (0,2,0 contra 0,1,0) TAMBÉM em `Gestao/Notificacao`, que renderiza
   a mesma partial dentro de um modal e está declarada FORA do escopo da SPEC-047.
   Aquela tela teria mudado de altura sem pedido e sem conferência — efeito colateral
   que só apareceria quando alguém abrisse a tela por outro motivo. A coluna do split
   só existe nas telas desta SPEC. */
.modal-body .preview-anexo-coluna .preview-anexo-corpo {
    height: 55vh;
    min-height: 260px;
}

/* CA7 — empilhamento da sobreposição, abaixo de 992px.

   ATENÇÃO AO MECANISMO, porque a primeira versão deste comentário o descrevia
   errado (achado S-03 do review). Dizia que `z-index: 1050` "fica ATRÁS do modal
   (1055) e a sobreposição não aparece". Isso não procede: o `.modal` é
   `position: fixed` com `z-index`, portanto CRIA CONTEXTO DE EMPILHAMENTO, e o
   painel — que é descendente dele — é empilhado DENTRO desse contexto. Ele já
   ficaria acima do `.modal-backdrop`, que é irmão do modal, com qualquer valor.

   A regra fica como guarda explícita, e o efeito prático hoje é nulo: dentro do
   modal nenhum irmão do painel declara `z-index`. O valor está acima do modal e
   abaixo do tooltip (1080) e do toast, que precisam ser lidos por cima do painel —
   de modo que, se algum dia o painel deixar de ser descendente do modal, ele
   continua correto. */
@media (max-width: 991.98px) {
    .modal-body .preview-anexo-coluna.aberto {
        z-index: 1060;
    }
}

/* ==========================================================================
   SPEC-014 — filtro de localização do menu lateral

   O campo fica sobre o gradiente da barra (--sw-brand → --sw-brand-deep). Os
   valores abaixo foram medidos contra o topo do gradiente (#f04e23), que é o
   trecho mais claro e portanto o pior caso para texto branco:

     preenchimento rgba(0,0,0,.25) → texto #fff a 5,9:1   (WCAG 1.4.3 AA)
     placeholder   rgba(255,255,255,.9)        a 5,1:1    (WCAG 1.4.3 AA)
     borda         rgba(255,255,255,.9)        a 3,2:1    (WCAG 1.4.11)

   O laranja da marca é mais claro que o vermelho anterior, então o placeholder
   e a borda subiram de .8/.75 para .9: nos valores antigos mediriam 4,3:1 e
   2,6:1 contra este fundo, abaixo do mínimo de cada critério.
   ========================================================================== */

.sw-menu-filtro {
    padding: .5rem 1rem .25rem;
}

.sw-menu-filtro-campo {
    position: relative;
}

    /* A lupa é decorativa (aria-hidden) e não pode roubar o clique do campo. */
    .sw-menu-filtro-campo .fa-search {
        position: absolute;
        top: 50%;
        left: .6rem;
        transform: translateY(-50%);
        font-size: .75rem;
        color: rgba(255, 255, 255, .75);
        pointer-events: none;
    }

.sw-menu-filtro input {
    /* max-width impede que o campo estoure a barra quando ela encolhe. */
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: .35rem .5rem .35rem 1.9rem;
    font-size: .8rem;
    color: #fff;
    background-color: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .9);
}

    .sw-menu-filtro input::placeholder {
        color: rgba(255, 255, 255, .9);
    }

    .sw-menu-filtro input:focus {
        color: #fff;
        background-color: rgba(0, 0, 0, .35);
        border-color: #fff;
        box-shadow: 0 0 0 .2rem var(--sw-focus-ring);
    }

    /* O "x" nativo do type=search é desenhado em cinza-escuro — invisível aqui. */
    .sw-menu-filtro input::-webkit-search-cancel-button {
        cursor: pointer;
        filter: invert(1) grayscale(1) brightness(2);
    }

.sw-menu-filtro-status {
    margin: .35rem 0 0;
    font-size: .72rem;
    color: #fff;
}

    /* Sem busca ativa não há contagem — e o espaço em branco não deve sobrar. */
    .sw-menu-filtro-status:empty {
        display: none;
    }

/* Aplicada pelo menu-filtro.js. Precisa de !important: as regras do sb-admin-2
   para .collapse-item e .sidebar-heading declaram display e vencem por
   especificidade qualquer classe de uma palavra só. */
.sw-menu-oculto {
    display: none !important;
}

/* ==========================================================================
   SPEC-038 — o alfinete que fixa um item em "Meus Atalhos"

   A linha do item passou a ter dois controles: o link de sempre e o alfinete.
   O <a> não mudou de classe nem de atributo — duas suítes o casam por regex —,
   então quem organiza os dois é o wrapper.

   O alfinete some em repouso porque o submenu é estreito e 37 alfinetes
   permanentes competiriam com os rótulos, que são o que a pessoa veio ler. Ele
   aparece no hover e no foco de teclado; fixado, fica sempre à mostra, senão
   não haveria como saber o que já está em Meus Atalhos sem varrer o menu com o
   mouse.
   ========================================================================== */
.sw-menu-item-linha {
    display: flex;
    align-items: center;
}

/* O link continua sendo o alvo grande da linha: encolhe para caber o alfinete
   em vez de empurrá-lo para fora. O min-width:0 é o que permite encolher — sem
   ele o `white-space: nowrap` do tema mantém a largura do texto. */
.sw-menu-item-linha .collapse-item {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sw-menu-alfinete {
    flex: 0 0 auto;
    /* Acompanha a margem lateral que o tema dá ao .collapse-item, para o
       alfinete não encostar na borda do painel. */
    margin-right: .5rem;
    padding: .25rem .35rem;
    border: 0;
    background: transparent;
    border-radius: .35rem;
    font-size: .75rem;
    line-height: 1;
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

/* A cor diz qual é a AÇÃO, não o estado — é como o pedido foi descrito: escuro
   convida a fixar, claro indica o que já está fixado e sai com um clique.

   Os dois valores saem dos tokens e passam no mínimo de 3:1 do WCAG 1.4.11
   (elemento não-textual). O cinza óbvio para "claro" seria #b7b9cc, e ele está
   descartado de propósito: 1,98:1 sobre o painel branco — é o mesmo valor que
   a SPEC-021 teve de corrigir nos cabeçalhos de bloco, logo abaixo neste
   arquivo. Repeti-lo aqui reabriria o defeito que aquela SPEC fechou. */
.sw-menu-alfinete {
    color: var(--sw-brand-deep); /* 7,36:1 — "fixar atalho" */
}

.sw-menu-alfinete[aria-pressed="true"] {
    color: var(--sw-text-secondary); /* 4,69:1 — "desafixar atalho" */
}

/* Revelado por hover do mouse, por foco de teclado em qualquer um dos dois
   controles da linha, e permanentemente quando o item está fixado. */
.sw-menu-item-linha:hover .sw-menu-alfinete,
.sw-menu-item-linha:focus-within .sw-menu-alfinete,
.sw-menu-alfinete[aria-pressed="true"] {
    opacity: 1;
}

.sw-menu-alfinete:focus-visible {
    opacity: 1;
    outline: 2px solid var(--sw-brand);
    outline-offset: 1px;
}

/* Sem hover não há como revelar: no toque o alfinete fica sempre visível, senão
   a feature simplesmente não existe no tablet. */
@media (hover: none) {
    .sw-menu-alfinete {
        opacity: 1;
    }
}

/* ==========================================================================
   SPEC-021 — cabeçalhos de bloco do submenu

   O sb-admin-2 pinta .collapse-header de #b7b9cc sobre o painel branco:
   1,98:1 em 0,65rem (~10px) — o menor texto da aplicação e o de pior
   contraste. Reprova WCAG 1.4.3 AA com folga. Com os cinco blocos da SPEC-021,
   esse cabeçalho passou a ser o que orienta a leitura do submenu, e ilegível
   ele não orienta nada.

   Usa --sw-brand-deep (7,36:1), e não --sw-brand (4,53:1): o token da marca
   passa AA no limite, o que é magro demais para texto deste tamanho. O token
   é o de marca, não o de perigo (--sw-danger-text tem o mesmo valor): aqui o
   vermelho rotula seção, não sinaliza erro.

   A especificidade vem do id da barra, não do marcador sw-menu-bloco: aquele
   marcador é contrato com o menu-filtro.js e não deve ganhar efeito visual —
   renomeá-lo lá levaria a cor embora de carona. #accordionSidebar vale (1,4,0)
   e vence os (0,5,0) do tema sem !important. As duas classes do contêiner
   entram porque durante a animação ele é .collapsing, não .collapse. */
#accordionSidebar .nav-item .collapse .collapse-inner .collapse-header,
#accordionSidebar .nav-item .collapsing .collapse-inner .collapse-header {
    color: var(--sw-brand-deep);
}

/* Barra colapsada e telas estreitas mostram 6,5rem de ícones. Sobrariam ~70px de
   campo — estreito demais para digitar ou reler o que se digitou, então o filtro
   sai de cena junto com os rótulos. O script limpa a busca ao entrar nesses
   estados, para que nenhum item fique escondido por um campo invisível. */
.sidebar.toggled .sw-menu-filtro {
    display: none;
}

@media (max-width: 767.98px) {
    .sw-menu-filtro {
        display: none;
    }
}

/* ==========================================================================
   Card colapsável de filtros (SPEC-026)
   O cabeçalho inteiro é o controle: um <a> com data-toggle="collapse", focável
   por ser link, e o estado comunicado por aria-expanded no markup. O role="button"
   promete ativação por Espaço, que o Bootstrap 4 não implementa — a view registra
   um keydown próprio para isso; sem ele, Espaço rolaria a página.
   A seta é governada pela classe .collapsed que o próprio Bootstrap aplica ao
   trigger, e não por JavaScript de sincronização. O motivo é concreto: o card
   também é recolhido por código (HideFilter, ao fim de cada consulta), e um
   ícone preso a handler de clique passaria a mostrar o estado errado.
   ========================================================================== */

.sw-card-toggle {
    color: inherit;
}

    .sw-card-toggle:hover,
    .sw-card-toggle:focus {
        color: inherit;
        text-decoration: none;
    }

    /* O tema não desenha foco visível em <a> fora de .btn — WCAG 2.4.7. */
    .sw-card-toggle:focus {
        outline: 0;
        box-shadow: 0 0 0 .2rem var(--sw-focus-ring);
    }

    .sw-card-toggle__icone {
        color: var(--sw-text-secondary);
        transition: transform .2s ease-in-out;
    }

    /* Recolhido: a seta aponta para baixo, indicando "expandir". */
    .sw-card-toggle.collapsed .sw-card-toggle__icone {
        transform: rotate(180deg);
    }

@media (prefers-reduced-motion: reduce) {
    .sw-card-toggle__icone {
        transition: none;
    }
}

/* SPEC-029 — a linha de Total Geral no rodapé das grades.

   Classe própria, e não um seletor em `table.dataTable tfoot th`: hoje só a grade de
   Aprovações x Taxas tem <tfoot>, mas um seletor global entregaria este estilo a
   qualquer grade que ganhe rodapé amanhã por outro motivo — filtro de coluna, por
   exemplo, que é o uso mais comum de <tfoot> no DataTables.

   A borda superior é o que separa o total dos dados: sem ela, num `table-striped`, a
   última linha e o rodapé se confundem. */
.sw-grid-total th {
    border-top: 2px solid var(--sw-border-strong);
    background-color: var(--sw-surface-sunken);
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SPEC-048 — área da foto do profissional (Principal/Profissional, aba
   "Profissional")

   Mora aqui, e não inline na view, pela mesma disciplina do bloco acima.
   Cores sempre por token — nenhum valor cru abaixo.

   POR QUE O QUADRO É FIXO NOS DOIS EIXOS: a imagem genérica é um SVG e a foto
   real é um raster de proporção imprevisível. Sem altura fixa, a área muda de
   tamanho quando a primeira foto entra — e a modal "pula" na cara de quem
   acabou de subir o arquivo. O `object-fit: cover` enquadra qualquer proporção
   dentro do mesmo quadro, sem distorcer.
   -------------------------------------------------------------------------- */

.foto-profissional-botao {
    /* O elemento é um <button> por acessibilidade (Enter/Espaço/foco nativos);
       aqui ele é despido da aparência de botão, mantendo só o alvo de clique. */
    padding: 0;
    border: 1px solid var(--sw-border);
    border-radius: .35rem;
    background-color: var(--sw-surface-sunken);
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

.foto-profissional-botao:hover {
    border-color: var(--sw-border-strong);
}

.foto-profissional-botao:focus-visible {
    outline: 2px solid var(--sw-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem var(--sw-focus-ring);
}

.foto-profissional-imagem {
    /* 160×200 ≈ 4:5, a proporção de foto 3x4 arredondada para o grid.
       A altura total da área (quadro + rótulo + apoio + botão) fica abaixo das
       três linhas de campos da coluna ao lado — que é o que faz a aba ficar
       mais BAIXA, e não mais alta, em 1366×768. */
    width: 160px;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   SPEC-051 — foto do usuário logado no cabeçalho (_Layout e
   _LayoutAtualizacaoCadastral)

   POR QUE O ENQUADRAMENTO É NECESSÁRIO: o quadro que o tema reserva para a
   imagem do usuário é QUADRADO (2rem × 2rem, `.topbar .nav-item .nav-link
   .img-profile` no sb-admin-2.css) e o `undraw_profile.svg` foi desenhado para
   ele. Foto de pessoa é 3x4 — sem `object-fit: cover` o navegador estica a
   imagem até o quadrado e a pessoa aparece achatada.

   `cover` recorta o excesso em vez de deformar; `center` mantém o rosto no
   meio, que é onde ele está em foto de retrato. Não há regra de tamanho aqui
   de propósito: quem dimensiona continua sendo o tema, e repetir os 2rem
   criaria um segundo lugar para mudar no dia em que o cabeçalho mudar.
   -------------------------------------------------------------------------- */

.sw-foto-usuario {
    object-fit: cover;
    object-position: center;
}

/* --------------------------------------------------------------------------
   SPEC-055 — grade não responsiva (switch "Grade responsiva" do menu do
   usuário)

   ROLAGEM: com o Responsive desligado nenhuma coluna é escondida, e a grade
   larga passa da área disponível — onde seria CORTADA, e não rolada: o
   `#content-wrapper` e o `.modal` do tema têm `overflow-x: hidden`
   (sb-admin-2.css). A rolagem fica no pai da <table>, que o site.js marca com
   `.sw-grade-rolagem` — o `col-sm-12` do `dom` da integração BS4, que não
   contém a busca nem a paginação.

   POR QUE UMA CLASSE POSTA PELO JS, E NÃO `:has(> table.dataTable)`: um seletor
   que o navegador não entende derruba a regra inteira, e a regra perdida traria
   de volta, em silêncio, o corte que ela existe para evitar.

   POR QUE NO ITEM FLEX: a `.row` é flex, e um item flex com `overflow`
   diferente de `visible` perde o tamanho mínimo automático — deixa de crescer
   junto com a tabela e passa a rolar dentro do próprio espaço.

   A regra depende da classe do <body>. Ligado, a marca que ficou no contêiner
   não casa com nada, e a grade volta a ser exatamente a de antes.
   -------------------------------------------------------------------------- */

body.sw-grade-nao-responsiva .sw-grade-rolagem {
    overflow-x: auto;
}

/* QUEBRA DE LINHA (D-08): desligado, o texto das células e dos cabeçalhos não
   quebra — um registro por linha, e a grade larga rola no contêiner acima.
   Ligado, a regra não casa e a quebra volta a ser a de sempre, que é o que
   deixa o Responsive manter mais colunas à vista.

   POR QUE DESCENDENTE, E NÃO FILHO DIRETO DO CONTÊINER: o DataTables mede a
   largura das colunas numa cópia da tabela, dentro de um <div> posto no mesmo
   pai (`_fnCalculateColumnWidths`). A cópia precisa quebrar linha do mesmo
   jeito que a tabela desenhada, senão a largura medida é outra.

   SEM `!important`: a coluna que uma view declarar `text-wrap` continua
   quebrando. */
body.sw-grade-nao-responsiva .sw-grade-rolagem table.dataTable th,
body.sw-grade-nao-responsiva .sw-grade-rolagem table.dataTable td {
    white-space: nowrap;
}

/* O item no menu do usuário. O invólucro é `dropdown-item-text` (ver o
   _Layout), que não tem o cursor nem o hover de item: o retorno visual é o
   próprio switch, e o rótulo é o alvo de clique maior. */
.sw-grade-responsiva .form-check-input,
.sw-grade-responsiva .form-check-label {
    cursor: pointer;
}

.sw-grade-responsiva .form-check-label {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   SPEC-056 — contraste dos controles de marcação desmarcados

   O .form-check-input do Bootstrap 5.3.3 desmarcado tem borda e bolinha abaixo
   dos 3:1 do WCAG 1.4.11. Quatro regras levam as duas ao token, em repouso e
   com foco, em todo switch, checkbox e rádio do sistema, sem editar tela.

   POR QUE :not(:checked, :disabled). O marcado não pode ser tocado, e contar com
   o :checked do Bootstrap não basta: com foco, a regra de foco passaria por
   cima dele e o switch marcado e focado ficaria azul na borda e na bolinha. O
   desabilitado fica de fora de propósito (WCAG isenta componente inativo).

   POR QUE QUATRO REGRAS, CADA UMA UM NÍVEL ACIMA DA QUE SUBSTITUI. O site.css é
   carregado ANTES do bootstrap.min.css nos três layouts, então empatar é perder.
   Borda em repouso e com foco, bolinha em repouso e com foco: cada uma vence só
   a regra do Bootstrap que substitui e continua perdendo para os estados que
   devem continuar com ele (indeterminate, validação). A lista dentro do :not()
   custa um nível só, e o encadeado custaria dois.

   POR QUE A COR ESTÁ ESCRITA NO SVG. var() não funciona dentro de url(). O SVG é
   o do Bootstrap com só o fill trocado pelo valor do token, e o teste C-08
   reprova se os dois divergirem.

   SEM !important. Uma tela que precise de um caso próprio continua podendo.
   -------------------------------------------------------------------------- */

.form-check-input:not(:checked, :disabled) {
    border-color: var(--sw-control-border);
}

.form-check-input:not(:checked, :disabled):focus {
    border-color: var(--sw-control-border-focus);
}

.form-switch .form-check-input:not(:checked, :disabled) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236c757d'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:not(:checked, :disabled):focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cc421e'/%3e%3c/svg%3e");
}

/* ==========================================================================
   SPEC-066 — menu lateral: modos

   Três modos gravados (normal 14rem, reduzido 6.5rem, oculto 0) e uma
   sobreposição que só o JS abre. As classes vêm do _Layout (sidebar-toggled,
   sw-sidebar-oculto) e do site.js (sw-sidebar-sobreposto, sw-sidebar-saindo,
   sw-sidebar-animando, sw-menu-animado). Nenhuma regra desta seção mira o
   #content-wrapper: ele já é item flex com width:100% no tema e acompanha a
   largura do menu sozinho (PLAN, achado 17).

   ESPECIFICIDADE. O tema fixa a largura com !important (.sidebar{14rem},
   .sidebar.toggled{6.5rem}; abaixo de 768px o toggled vira 0). Só um
   !important com id vence, por isso tudo é ancorado em #accordionSidebar. O
   Bootstrap carrega DEPOIS deste arquivo: o hambúrguer, que é .btn, precisa
   de um nível a mais que o .btn{display:inline-block} dele.

   SEM REDESENHO (SPEC §3). Os chevrons copiam o #sidebarToggle do tema e o
   hambúrguer copia o #sidebarToggleTop. O que é novo é só o movimento.

   DIREÇÃO DO MOVIMENTO (frontend-design, PLAN F5). O tema já tem uma voz: o
   growIn dos submenus flutuantes, 200ms, transform em
   cubic-bezier(.18,1.25,.4,1) e opacidade em cubic-bezier(0,1,.4,1) — chega
   rápido e assenta. O menu fala a mesma língua, com uma diferença: nada aqui
   passa do ponto, porque um menu preso à borda que ultrapassa o destino
   descola da borda por um instante.
   Ressalva (DV-11, achado 7 da auditoria): como está no sb-admin-2.min.css,
   o growIn declara animation-timing-function com uma lista
   "transform cubic-bezier(...), opacity cubic-bezier(...)", que é CSS
   inválido — o navegador descarta e ele roda com ease em 200ms. As curvas
   abaixo foram tiradas da intenção declarada, e continuam na mesma faixa
   (150-250ms, aceleração suave) do que de fato se vê na tela.
     - Largura (normal <-> reduzido <-> oculto): 250ms em
       cubic-bezier(.4,0,.2,1). Simétrica de propósito: o conteúdo ao lado
       anda junto, e uma curva que dispara ou freia de repente faz a página
       "puxar" o olho.
     - Rótulos (texto dos links, da marca e os títulos de seção): somem
       ANTES de a largura andar e voltam DEPOIS. Com sw-sidebar-animando
       (posta pelo JS no início da troca e tirada no fim) eles somem no
       próprio clique, sem transição (DV-11: um fade de saída deixava o texto
       ser visto cortado enquanto a largura já andava); sem ela voltam em
       150ms com a curva de opacidade do growIn. Texto nunca é visto quebrando
       linha nem cortado ao meio.
     - Oculto: a visibility só vira hidden quando a largura chega a 0 (atraso
       igual à duração), para o menu encolher à vista e só então sair do Tab.
     - Sobreposição: entra deslizando da esquerda em 250ms com a curva de
       transform do growIn sem o overshoot — (.18,1,.4,1) —, e sai em 200ms
       com o espelho dela, (.6,0,.82,0): sair é resposta a um gesto de
       dispensa, e a saída mais curta que a entrada deixa a página livre
       logo. A saída leva a sombra junto (-100% menos o alcance dela), senão
       uma faixa cinza ficaria na borda no último quadro.
     - Profundidade: uma sombra lateral na família da .shadow do tema (mesma
       cor, mesmo desfoque), e NENHUM véu sobre o conteúdo (D-05).
   Todo movimento só existe sob body.sw-menu-animado, que o site.js põe depois
   do primeiro paint (PLAN D-P11), e prefers-reduced-motion zera tudo.
   ========================================================================== */

/* Referência do position:absolute da sobreposição (PLAN D-P05). */
#wrapper {
    position: relative;
}

/* --------------------------------------------------------------------------
   Chevrons (PLAN D-P03, T5.3). O visual do #sidebarToggle do tema, que está
   preso ao id no sb-admin-2.min.css (achado 3), copiado para a classe; o
   raio vem do rounded-circle do markup, como no botão do tema. O ::after é
   FIXO por botão: cada um tem um sentido só e não vira com o .toggled.
   Só a variante escura: o menu é sidebar-dark.
   -------------------------------------------------------------------------- */

.sidebar .sw-menu-botao {
    width: 2.5rem;
    height: 2.5rem;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
}

.sidebar-dark .sw-menu-botao {
    background-color: rgba(255, 255, 255, .2);
}

    .sidebar-dark .sw-menu-botao:hover {
        background-color: rgba(255, 255, 255, .25);
    }

.sidebar .sw-menu-botao::after {
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
}

.sidebar-dark .sw-menu-botao::after {
    color: rgba(255, 255, 255, .5);
}

/* Foco visível (CA-17, WCAG 2.4.7; DV-11). O tema não dá anel ao
   #sidebarToggle, e o fundo rgba(255,255,255,.2) sobre o vermelho não basta
   para achar o botão pelo teclado. Só :focus-visible: o clique de mouse
   continua sem anel, e o ::after só clareia no hover ou no foco de teclado. */
.sidebar .sw-menu-botao:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.sidebar-dark .sw-menu-botao:hover::after,
.sidebar-dark .sw-menu-botao:focus-visible::after {
    color: #fff;
}

#swMenuRecolher::after,
#swMenuOcultar::after {
    content: '\f104';
    margin-right: .1rem;
}

#swMenuExpandir::after {
    content: '\f105';
    margin-left: .25rem;
}

/* Qual aparece em cada modo: normal só Recolher; reduzido Ocultar e Expandir;
   sobreposto só Expandir (o > leva ao reduzido fixo, SPEC D-07). Durante a
   saída o Ocultar também fica escondido: ele piscaria no menu que desliza. */
#swMenuOcultar,
#swMenuExpandir {
    display: none;
}

#accordionSidebar.toggled #swMenuRecolher {
    display: none;
}

#accordionSidebar.toggled #swMenuOcultar,
#accordionSidebar.toggled #swMenuExpandir {
    display: inline-block;
}

body.sw-sidebar-sobreposto #accordionSidebar.toggled #swMenuOcultar,
body.sw-sidebar-saindo #accordionSidebar.toggled #swMenuOcultar {
    display: none;
}

/* --------------------------------------------------------------------------
   Hambúrguer (PLAN T5.4, achado 13). Sem utilitário de display no markup: o
   d-md-none seria display:none !important no desktop, e ele precisa aparecer
   no oculto. Tamanho e fundo de hover/active do .topbar #sidebarToggleTop do
   tema. O :active precisa do .btn: o do Bootstrap
   (.btn:first-child:active) empata no nível e carrega depois.
   -------------------------------------------------------------------------- */

/* Ajustes do aceite do autor (PLAN DV-12): o .btn-link do Bootstrap 5 sublinha,
   e o sublinhado virava uma quarta linha sob as três do fa-bars; e o .navbar do
   Bootstrap 5 zera o padding lateral da topbar, deixando o botão colado na borda
   esquerda. */
.topbar .sw-menu-hamburguer {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: .75rem;
    text-decoration: none;
}

    .topbar .sw-menu-hamburguer:hover {
        background-color: #eaecf4;
    }

    .topbar .sw-menu-hamburguer.btn:active {
        background-color: #dddfeb;
    }

body.sw-sidebar-oculto .topbar .sw-menu-hamburguer {
    display: inline-flex;
}

/* Foco do hambúrguer (DV-11): o mesmo anel dos controles do projeto. O .btn
   precisa estar no seletor para vencer o .btn:focus-visible do Bootstrap. */
.topbar .sw-menu-hamburguer.btn:focus-visible {
    box-shadow: 0 0 0 .2rem var(--sw-focus-ring);
}

/* --------------------------------------------------------------------------
   Oculto (PLAN T5.1, CA-03). Largura 0 no fluxo; a visibility tira os links
   do Tab. Não vale com a sobreposição aberta nem durante a saída dela.
   -------------------------------------------------------------------------- */

body.sw-sidebar-oculto:not(.sw-sidebar-sobreposto):not(.sw-sidebar-saindo) #accordionSidebar {
    width: 0 !important;
    min-width: 0;
    overflow: hidden;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Sobreposição (PLAN D-P05, T5.2, SPEC D-05/D-08). absolute sobre o #wrapper,
   não fixed: com fixed os submenus flutuantes do reduzido seriam cortados na
   rolagem (achado 8). A largura é a do reduzido e o overflow fica visible
   para os flutuantes. z-index acima da topbar e abaixo do .modal-backdrop
   (1040), do .modal (1050) e do tooltip (1070). A saída (sw-sidebar-saindo)
   mantém a mesma geometria até o fim do deslize. Sem véu: nada no conteúdo
   muda ao abrir, e nenhum ::before/::after aqui.
   O topo é a altura da .topbar do tema (4.375rem), não 0 (PLAN DV-08): com
   top:0 o menu cobria o #swMenuHamburguer, e o clique para fechar caía no
   link da marca e ia para a Home (CA-07). Começando abaixo da topbar, como
   nos menus responsivos comuns, o hambúrguer continua alternando. left:0
   segue preso ao #wrapper.
   A ALTURA acompanha o conteúdo, com o fim do #wrapper como mínimo. Com
   bottom:0 a caixa tinha exatamente a altura do #wrapper menos a topbar, e no
   celular deitado (430px de altura) os itens depois de "Administrativos"
   transbordavam a caixa — o overflow é visible, então eles eram desenhados,
   mas em branco sobre o fundo branco da página, fora do gradiente. Crescendo
   com o conteúdo, a caixa leva o gradiente junto e estende a rolagem da página
   até o último item. O mínimo é em % do #wrapper (bloco de contenção), e não
   o 100vh do tema: somado ao top, o 100vh passava do fim da janela (DV-13).
   -------------------------------------------------------------------------- */

body.sw-sidebar-sobreposto #accordionSidebar,
body.sw-sidebar-saindo #accordionSidebar {
    position: absolute;
    top: 4.375rem;
    left: 0;
    bottom: auto;
    width: 6.5rem !important;
    visibility: visible;
    overflow: visible;
    min-height: calc(100% - 4.375rem);
    z-index: 1035;
    box-shadow: .25rem 0 1.75rem 0 rgba(58, 59, 69, .25);
}

/* A página não encolhe ao abrir (PLAN DV-13). No tema, quem estica a página até
   a altura da janela é o próprio menu (.sidebar{min-height:100vh}, item do
   #wrapper flex): oculto e fechado, ele tem largura 0 mas segue no fluxo. Ao
   virar absolute, sai do fluxo; sem esta regra o #wrapper encolhia até o
   conteúdo e o rodapé subia para o meio da tela. E o min-height:100vh do tema,
   somado ao top abaixo da topbar, fazia o menu passar do fim da janela e criar
   rolagem vertical — por isso o min-height acima desconta a topbar e o
   estica só até o fim do #wrapper. */
body.sw-sidebar-sobreposto #wrapper,
body.sw-sidebar-saindo #wrapper {
    min-height: 100vh;
}

/* Balão dos chevrons (PLAN DV-09). O data-custom-class do _Layout põe esta
   classe só no div.tooltip dos três chevrons. Logo após a troca o foco vai
   para o botão que a desfaz (D-P09) e o balão dele aparece sobre o botão
   vizinho — ou sobre o próprio botão, enquanto a largura anda —, engolindo o
   clique seguinte. Sem ponteiro, o balão só informa; o do alfinete não muda. */
.tooltip.sw-menu-balao {
    pointer-events: none;
}

/* Foco no menu sobreposto (DV-11): ao abrir, o foco vai para o <ul>
   (tabindex="-1"). O anel fica por dentro (offset negativo): por fora, a
   sombra lateral e a topbar o engoliriam. Só :focus-visible — o Edge o
   aplica quando a abertura veio do teclado. */
#accordionSidebar:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Abaixo de 768px (PLAN D-P07, CA-16) o menu sai da tela em qualquer modo, e
   só a sobreposição o traz; o hambúrguer aparece sempre.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .topbar .sw-menu-hamburguer {
        display: inline-flex;
    }

    body:not(.sw-sidebar-sobreposto):not(.sw-sidebar-saindo) #accordionSidebar {
        width: 0 !important;
        min-width: 0;
        overflow: hidden;
        visibility: hidden;
    }
}

/* --------------------------------------------------------------------------
   Durante a troca de modo (PLAN T5.5). sw-sidebar-animando é posta e tirada
   pelo site.js junto com o recálculo das grades: nada quebra linha enquanto a
   largura anda, e os rótulos saem de cena.
   -------------------------------------------------------------------------- */

body.sw-sidebar-animando #accordionSidebar {
    overflow: hidden;
    white-space: nowrap;
}

body.sw-sidebar-animando #accordionSidebar .nav-link span,
body.sw-sidebar-animando #accordionSidebar .sidebar-brand-text,
body.sw-sidebar-animando #accordionSidebar .sidebar-heading {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Movimento — só sob body.sw-menu-animado (PLAN D-P11, CA-15). As curvas e
   durações estão justificadas no cabeçalho da seção.
   -------------------------------------------------------------------------- */

body.sw-menu-animado #accordionSidebar {
    transition: width 250ms cubic-bezier(.4,0,.2,1);
}

/* Ao ocultar, a visibility espera a largura chegar a 0 (T5.1). */
body.sw-menu-animado.sw-sidebar-oculto:not(.sw-sidebar-sobreposto):not(.sw-sidebar-saindo) #accordionSidebar {
    transition: width 250ms cubic-bezier(.4,0,.2,1), visibility 0s linear 250ms;
}

/* A sobreposição anima por deslize, não por largura: sem o transition: none,
   o width do oculto (0 → 6.5rem) cresceria junto com o deslize. A entrada só
   preenche para trás (nada de transform depois dela); a saída preenche para
   frente, e o menu fica fora da tela até o site.js tirar a classe. */
body.sw-menu-animado.sw-sidebar-sobreposto #accordionSidebar {
    transition: none;
    animation: sw-menu-entrar 250ms cubic-bezier(.18,1,.4,1) backwards;
}

body.sw-menu-animado.sw-sidebar-saindo #accordionSidebar {
    transition: none;
    animation: sw-menu-sair 200ms cubic-bezier(.6,0,.82,0) forwards;
}

@keyframes sw-menu-entrar {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes sw-menu-sair {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 2rem));
    }
}

/* Rótulos e títulos de seção: voltam com a curva de opacidade do growIn e
   somem no clique, sem transição (DV-11). */
body.sw-menu-animado #accordionSidebar .nav-link span,
body.sw-menu-animado #accordionSidebar .sidebar-brand-text,
body.sw-menu-animado #accordionSidebar .sidebar-heading {
    transition: opacity 150ms cubic-bezier(0,1,.4,1);
}

body.sw-menu-animado.sw-sidebar-animando #accordionSidebar .nav-link span,
body.sw-menu-animado.sw-sidebar-animando #accordionSidebar .sidebar-brand-text,
body.sw-menu-animado.sw-sidebar-animando #accordionSidebar .sidebar-heading {
    transition: opacity 0s;
}

/* Movimento reduzido (CA-14): nada anima, em estado nenhum. O !important vence
   qualquer combinação de classes acima, e o hambúrguer entra para zerar também
   o transition do .btn do Bootstrap. */
@media (prefers-reduced-motion: reduce) {
    #accordionSidebar,
    #accordionSidebar .nav-link span,
    #accordionSidebar .sidebar-brand-text,
    #accordionSidebar .sidebar-heading,
    .sw-menu-botao,
    .topbar .sw-menu-hamburguer {
        transition: none !important;
        animation: none !important;
    }
}