/* ============================================================
   SIDEBAR MODERNA + TOPBAR MODERNA
   Aplica APENAS visual sobre o tema Paper Dashboard.
   Não altera position/layout — deixa o theme.css original cuidar disso.
   ============================================================ */

/* ============ LAYOUT: WRAPPER FLEX, 100% DA LARGURA, SCROLL INTERNO ============ */
/* Trava o body — sidebar e topbar ficam fixos; só a área .content do main-panel rola. */
html, body {
    overflow: hidden !important;
    /* dvh acompanha a barra de endereço do celular; vh fica como fallback para
       navegador que não conhece a unidade. Ver "ALTURA DA VIEWPORT" no fim do
       arquivo. */
    height: 100vh !important;
    height: 100dvh !important;
}
.wrapper.container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: stretch;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}
/* O h:form que envolve o sidebar vira coluna fixa de 260px */
.wrapper.container > form {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
    margin: 0;
    padding: 0;
}
/* DIVERGÊNCIA DO ADMIN: no oab externo a sidebar é filha DIRETA do wrapper
   (não há h:form em volta como no templateOABAdmin) — sem esta regra ela herda
   o width:100% e engole a tela. Manter ao re-sincronizar com o admin. */
.wrapper.container > .sidebar {
    flex: 0 0 260px;
    width: 260px !important;
    min-width: 260px;
    max-width: 260px;
}
/* Main-panel ocupa o resto, anulando float do theme antigo + flex column pra scroll interno
   IMPORTANTE: z-index: auto pra NÃO criar stacking context — senão modal BS5 (z-index 1055
   dentro do main-panel) fica preso atrás do backdrop (z-index 1050 no body). */
.main-panel {
    flex: 1 1 auto !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: auto !important;
}
/* Mesma coisa pro .card do template — z-index: 1 do theme.css trapava modal/dropdowns */
.main-panel .card {
    z-index: auto !important;
}
/* Topbar (form direto filho de main-panel) — altura natural, fixo no topo */
.main-panel > form {
    flex: 0 0 auto !important;
}
/* Conteúdo da página — ocupa o resto e tem o scroll interno */
.main-panel > .content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    /* Desabilita scroll anchoring do browser durante AJAX patch (evita micro-flicker). */
    overflow-anchor: none;
}

/* ============ SIDEBAR (só visual + sticky pra grudar no scroll) ============ */
/* JÁ NÃO É DIVERGÊNCIA (2026-08-07): o oabAdmin passou a ter esta mesma regra.
   O theme.css comentou o position:absolute de .sidebar:before/:after — viram blocos
   brancos NO FLUXO com height:100%; com o sidebar esticado a 100vh pelo flex, o :before
   empurra logo/menu/footer pra fora da tela (sidebar aparece toda branca). Aqui isso
   acontecia sempre; no admin só apareceu quando o hover do menu recolhido tornou a
   .sidebar position:fixed. O visual moderno não usa essas camadas de fundo — mata as
   duas nos dois apps. */
.sidebar::before,
.sidebar::after {
    display: none !important;
    content: none !important;
}
.sidebar,
.sidebar[data-background-color="white"] {
    width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    background: #fff !important;
    box-shadow: 2px 0 12px rgba(0,0,0,.04) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sidebar .sidebar-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 100% !important;
    background: #fff !important;
    box-shadow: none !important;
    border-right: 1px solid #ececec !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Logo no topo.
   flex-shrink: 0 é essencial, não é enfeite. A .logo é item flex do .sidebar-wrapper
   (column, height 100vh). Quando a soma dos itens de menu estoura a altura da tela, o
   flex comprime os itens encolhíveis, e a logo ia dos 119px naturais até o min-height
   de 92px. Como min-height é border-box e a imagem tem 80px + 22px de padding, os 27px
   perdidos saíam do respiro: a imagem vazava por cima da borda inferior e o primeiro
   item do menu encostava nela. Aqui, com 6 itens de menu, só acontece em janela baixa —
   no oabAdmin, com ~40 entradas, acontecia sempre. Manter ao re-sincronizar. */
.sidebar .logo,
.sidebar[data-background-color="white"] .logo {
    display: block !important;
    visibility: visible !important;
    padding: 22px 16px 16px !important;
    border-bottom: 1px solid #f1f1f1 !important;
    margin: 0 !important;
    text-align: center !important;
    background: #fff;
    min-height: 92px;
    flex: 0 0 auto !important;
    position: relative;
    z-index: 2;
}
.sidebar .logo::before,
.sidebar .logo::after,
.sidebar[data-background-color="white"] .logo::before,
.sidebar[data-background-color="white"] .logo::after {
    display: none !important;
    content: none !important;
}
/* O gemeo escuro da logo (ver "LOGO POR TEMA" em dark-mode.css) nasce com display:none
   inline, mas a regra abaixo usa !important e o reacenderia — no tema claro as duas
   logos apareceriam empilhadas. Esta regra e o contrapeso, e mora aqui de proposito:
   ao lado do !important que ela existe para conter. */
.sidebar .logo img.oab-logo-escuro,
.sidebar[data-background-color="white"] .logo img.oab-logo-escuro {
    display: none !important;
}
.sidebar .logo img,
.sidebar[data-background-color="white"] .logo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 170px !important;
    max-height: 80px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* ============ NAV (lista de menus) ============ */
/* Bootstrap 5 aplica display:flex em .nav — forçamos block pra cada li ocupar 100% */
.sidebar .nav {
    display: block !important;
    list-style: none !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    font-family: 'Muli', 'Open Sans', Arial, sans-serif;
    flex: 1 0 auto;
}
.sidebar .nav li {
    display: block !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Separadores de seção */
.sidebar .nav .sidebar-section,
.sidebar .nav li.sidebar-section {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    padding: 16px 20px 6px !important;
    margin: 4px 0 0 !important;
    pointer-events: none;
    user-select: none;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
    text-align: left !important;
}

/* Itens — texto preto, sem negrito, área clicável 100% da largura */
.sidebar .nav li > a,
.sidebar[data-background-color="white"] .nav li > a,
.sidebar .nav li:not(.active) > a,
.sidebar[data-background-color="white"] .nav li:not(.active) > a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: background .18s ease, color .18s ease !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.sidebar .nav li > a > i {
    font-size: 16px !important;
    color: #666 !important;
    flex-shrink: 0;
    transition: color .18s ease;
    margin: 0 !important;
    width: 20px;
    text-align: center;
    line-height: 1;
}
.sidebar .nav li > a > p,
.sidebar .nav li > a > span {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: inherit !important;
    text-transform: none !important;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Hover */
.sidebar .nav li:hover > a {
    background: #f7f7f7 !important;
    color: #ec5d4f !important;
}
.sidebar .nav li:hover > a > i { color: #ec5d4f !important; }

/* Item ativo — cor de fundo + barra lateral vermelha, ocupa 100% da largura */
.sidebar .nav li.active > a {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    font-weight: 500 !important;
    border-left: 3px solid #ec5d4f !important;
    padding-left: 17px !important;
}
.sidebar .nav li.active > a > i { color: #ec5d4f !important; }
.sidebar .nav li.active > a::before,
.sidebar .nav li.active > a::after { display: none !important; }

/* ============ TOPBAR (navbar superior moderna) ============ */
.topbar {
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 1px 3px rgba(0,0,0,.02);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    min-height: 60px;
    position: relative;
    z-index: 5;
}
.topbar-greeting {
    font-size: 15px;
    font-weight: 400;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0;
    /* par de .topbar-actions { flex-shrink: 0 }: este é o bloco que cede largura,
       então precisa poder encolher abaixo do próprio conteúdo. */
    min-width: 0;
}
.topbar-username {
    font-weight: 700;
    color: #1a1a1a;
    text-transform: capitalize;
}
.topbar-wave {
    display: inline-block;
    animation: wave 1.6s ease-in-out infinite;
    transform-origin: 70% 70%;
    margin-left: 4px;
}
@keyframes wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    40% { transform: rotate(14deg); }
    50% { transform: rotate(-4deg); }
}

/* flex-shrink: 0 não é enfeite — é o que garante que os botões (tema, senha,
   sair) continuem visíveis quando falta largura. Sem isto o flex encolhe este
   bloco, o excedente transborda para fora do .main-panel e o `overflow: hidden`
   dele RECORTA os botões: era por isso que o alternador de tema "não aparecia"
   no celular. Quem cede largura agora é o cumprimento, que é truncável. */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #ececec;
    background: #fff;
    color: #666;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s;
}
.topbar-btn i { font-size: 15px; }
.topbar-btn:hover {
    color: #ec5d4f;
    border-color: #ec5d4f;
    background: #fff5f4;
    text-decoration: none;
    /* mesma elevacao dos .oab-btn (ver "REALCE NO HOVER" em oab-internal.css) */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 93, 79, .22);
}
.topbar-btn-logout:hover {
    color: #fff;
    border-color: #ec5d4f;
    background: #ec5d4f;
}

/* Esconde a navbar antiga do tema, caso ainda apareça */
.navbar-default { display: none !important; }

/* O mesmo pd.initRightMenu() que põe a classe off-canvas-sidebar (ver "Neutraliza o
   off-canvas do PRÓPRIO TEMA") clona o menu mobile a partir de
   `$('nav').find('.navbar-collapse').children('.navbar-nav').html()`. Esse seletor não casa
   nada no nosso markup, `.html()` de coleção vazia devolve undefined, e a concatenação
   monta literalmente `<ul class="nav nav-mobile-menu">undefined</ul>` — que ele então insere
   antes do menu real, no admin. Fica FORA de media query de propósito: o tema só remove a
   lista num resize de volta para o desktop, então ela sobrevive no DOM. */
.sidebar .nav-mobile-menu { display: none !important; }

/* ============ SCROLLBAR PERSONALIZADA (cor OAB) ============ */
/* Firefox */
html { scrollbar-width: thin; scrollbar-color: #ec5d4f #f5f5f5; }

/* WebKit / Chromium / Edge */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f5f5f5; border-radius: 6px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ec5d4f 0%, #d45447 100%);
    border-radius: 6px;
    border: 2px solid #f5f5f5;
    transition: background .2s;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d45447 0%, #b8463a 100%);
}
::-webkit-scrollbar-corner { background: #f5f5f5; }

/* Sidebar — scrollbar mais fininha */
.sidebar .sidebar-wrapper {
    scrollbar-width: thin !important;
    scrollbar-color: #ec5d4f #f7f7f7 !important;
}
.sidebar .sidebar-wrapper::-webkit-scrollbar { width: 6px !important; }
.sidebar .sidebar-wrapper::-webkit-scrollbar-track { background: transparent !important; }
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: #ec5d4f !important;
    border-radius: 6px !important;
    border: none !important;
}
.sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: #d45447 !important; }

/* ============================================================
   PAGINAÇÃO (composite paginacao.xhtml — global em todas as telas)
   ============================================================ */
.oab-pagination-wrapper {
    margin: 14px 0 6px;
    font-family: 'Muli', 'Open Sans', Arial, sans-serif;
}
.oab-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    padding: 0;
}
.oab-page-btn,
a.oab-page-btn,
a.oab-page-btn:visited {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 9px;
    border: 1.5px solid #ececec;
    border-radius: 8px;
    background: #fff !important;
    color: #666 !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none !important;
    user-select: none;
    box-sizing: border-box;
}
.oab-page-btn:hover,
a.oab-page-btn:hover,
a.oab-page-btn:focus {
    background: #fff5f4 !important;
    color: #ec5d4f !important;
    border-color: #ec5d4f !important;
    text-decoration: none !important;
}
.oab-page-btn.active,
a.oab-page-btn.active {
    background: #ec5d4f !important;
    color: #fff !important;
    border-color: #ec5d4f !important;
    cursor: default;
}
.oab-page-btn.disabled,
span.oab-page-btn.disabled {
    color: #ccc !important;
    background: #fafafa !important;
    border-color: #f0f0f0 !important;
    cursor: not-allowed;
    pointer-events: none;
}
.oab-page-btn i { font-size: 11px; line-height: 1; }
.oab-pagination-info {
    text-align: center;
    color: #5f5f5f;
    font-size: 11px;
    margin-top: 6px;
    font-family: 'Muli', 'Open Sans', Arial, sans-serif;
}

/* ============================================================
   TOASTS — sistema de mensagens (#mensagens-sistema)
   Container fixo no canto superior direito; auto-dismiss em 5s.
   ============================================================ */
#mensagens-sistema {
    position: fixed !important;
    top: 80px;
    right: 24px;
    z-index: 9999;
    width: 380px;
    max-width: calc(100vw - 48px);
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
    font-family: 'Muli', 'Open Sans', Arial, sans-serif;
}
#mensagens-sistema ul,
#mensagens-sistema ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#mensagens-sistema li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 12px;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    font-size: 13.5px;
    color: #1a1a1a !important;
    line-height: 1.45;
    pointer-events: auto;
    animation: toastIn .35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    list-style: none !important;
}
#mensagens-sistema li.ERROR { border-left-color: #dc3545 !important; }
#mensagens-sistema li.WARN  { border-left-color: #f59e0b !important; }
#mensagens-sistema li.INFO  { border-left-color: #10b981 !important; }

#mensagens-sistema .toast-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    position: relative;
    animation: toastIconPop .55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
/* Anel pulsante ao redor do ícone (efeito lúdico) */
#mensagens-sistema .toast-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: toastIconRing 1.2s ease-out .15s 1 both;
}
#mensagens-sistema li.ERROR .toast-icon { background: #dc3545; color: #fff; }
#mensagens-sistema li.ERROR .toast-icon::before { border-color: #dc3545; }
#mensagens-sistema li.WARN  .toast-icon { background: #f59e0b; color: #fff; }
#mensagens-sistema li.WARN  .toast-icon::before { border-color: #f59e0b; }
#mensagens-sistema li.INFO  .toast-icon { background: #10b981; color: #fff; }
#mensagens-sistema li.INFO  .toast-icon::before { border-color: #10b981; }
#mensagens-sistema .toast-icon i {
    font-size: 15px;
    line-height: 1;
    animation: toastIconWobble 1.4s ease-in-out .25s 1 both;
}
@keyframes toastIconPop {
    0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes toastIconRing {
    0%   { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.8); opacity: 0; }
}
@keyframes toastIconWobble {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-6deg); }
    40%      { transform: rotate(6deg); }
    60%      { transform: rotate(-3deg); }
    80%      { transform: rotate(3deg); }
}

#mensagens-sistema .toast-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    padding-top: 4px;
}

#mensagens-sistema .toast-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #8a8a8a;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transition: background .15s ease, color .15s ease;
    font-family: inherit;
}
#mensagens-sistema .toast-close i {
    font-size: 13px;
    line-height: 1;
}
#mensagens-sistema .toast-close:hover {
    background: #f5f5f5;
    color: #1a1a1a;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    0%   { opacity: 1; transform: translateX(0); max-height: 200px; margin-bottom: 12px; padding-top: 14px; padding-bottom: 14px; }
    100% { opacity: 0; transform: translateX(24px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
#mensagens-sistema li.dismissing {
    animation: toastOut .3s cubic-bezier(0.4, 0, 1, 1) forwards;
    overflow: hidden;
}

@media (max-width: 600px) {
    #mensagens-sistema {
        top: 70px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}

/* ============================================================
   OAB LOADER — statusDialog (PrimeFaces p:dialog) modernizado
   ============================================================ */

/* Overlay escuro custom (PF modal mask) */
.ui-widget-overlay.ui-dialog-mask {
    background: rgba(20, 20, 25, 0.55) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    /* Modal BS5 fica em z-index 1050-1060; loader precisa cobrir tudo */
    z-index: 11000 !important;
}

/* Container do dialog quando contém o loader OAB */
.ui-dialog.oab-loader-dialog,
body .ui-dialog.oab-loader-dialog {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    /* Acima do mask e de qualquer modal BS5 */
    z-index: 11001 !important;
}
.ui-dialog.oab-loader-dialog .ui-dialog-titlebar { display: none !important; }
.ui-dialog.oab-loader-dialog .ui-dialog-content {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22),
                0 6px 16px rgba(236, 93, 79, 0.18) !important;
    padding: 28px 40px 26px !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* Estrutura interna */
.oab-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 220px;
}

.oab-loader-letters {
    display: flex;
    gap: 4px;
    align-items: flex-end;
    height: 64px;
    line-height: 1;
}

.oab-loader-letter {
    font-family: 'Montserrat', 'Muli', sans-serif;
    font-weight: 800;
    font-size: 3rem;
    line-height: 1;
    color: #2c2c2c;
    display: inline-block;
    transform-origin: center bottom;
    animation: oab-letter-bounce 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    letter-spacing: -1px;
}
.oab-loader-letter:nth-child(1) { animation-delay: 0s; }
.oab-loader-letter:nth-child(2) { animation-delay: 0.18s; }
.oab-loader-letter:nth-child(3) { animation-delay: 0.36s; }

@keyframes oab-letter-bounce {
    0%, 65%, 100% {
        transform: translateY(0) scale(1);
        color: #2c2c2c;
        text-shadow: none;
    }
    32% {
        transform: translateY(-16px) scale(1.1);
        color: #ec5d4f;
        text-shadow: 0 8px 18px rgba(236, 93, 79, 0.4);
    }
}

/* Barra de progresso "sweep" */
.oab-loader-bar {
    width: 140px;
    height: 3px;
    border-radius: 2px;
    background: rgba(236, 93, 79, 0.12);
    overflow: hidden;
    position: relative;
}
.oab-loader-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg,
                rgba(236, 93, 79, 0) 0%,
                rgba(236, 93, 79, 1) 50%,
                rgba(236, 93, 79, 0) 100%);
    animation: oab-bar-slide 1.4s ease-in-out infinite;
}
@keyframes oab-bar-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Texto "Carregando..." */
.oab-loader-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #8a8a8a;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.oab-loader-dot {
    display: inline-block;
    opacity: 0.2;
    animation: oab-dot-fade 1.4s ease-in-out infinite;
}
.oab-loader-dot:nth-child(2) { animation-delay: 0.15s; }
.oab-loader-dot:nth-child(3) { animation-delay: 0.30s; }
.oab-loader-dot:nth-child(4) { animation-delay: 0.45s; }
@keyframes oab-dot-fade {
    0%, 70%, 100% { opacity: 0.2; }
    30%           { opacity: 1; }
}

/* ============ COPYRIGHT FOOTER (rodapé da sidebar) ============ */
.oab-sidebar-footer {
    padding: 12px 14px;
    text-align: center;
    font-size: 10px;
    line-height: 1.5;
    color: #6b6b6b;
    letter-spacing: 0.3px;
    border-top: 1px solid #f1f1f1;
    background: #fff;
    flex-shrink: 0;
}
.oab-sidebar-footer a {
    color: #6b6b6b;
    text-decoration: none;
    transition: color .2s ease;
}
.oab-sidebar-footer a:hover {
    color: #ec5d4f;
    text-decoration: underline;
}


/* ============ ALTERNADOR DE TEMA CLARO/ESCURO ============
   No admin o botão fica na topbar e reaproveita .topbar-btn. O externo não tem topbar,
   então lá ele mora no pé da sidebar, acima do copyright — daí o par de seletores:
   .oab-tema-toggle carrega só o que todo <button> precisa (font-family não é herdada
   por elemento de formulário) e o visual do variante da sidebar fica escopado em
   .oab-sidebar-tema, senão a largura de 100% vazaria para o botão da topbar.

   flex-shrink: 0 não é enfeite: o .sidebar-wrapper é coluna flex de 100vh e sem isso
   este bloco seria comprimido junto com a logo (mesma armadilha do rodapé). As cores
   do estado escuro estão em dark-mode.css. */
.oab-tema-toggle {
    font-family: inherit;
}
.oab-sidebar-tema {
    padding: 12px 16px 0;
    flex-shrink: 0;
}
.oab-sidebar-tema .oab-tema-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #ececec;
    background: #fff;
    color: #666;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}
.oab-sidebar-tema .oab-tema-toggle i {
    font-size: 14px;
    line-height: 1;
}
.oab-sidebar-tema .oab-tema-toggle:hover {
    background: #fff5f4;
    border-color: #ec5d4f;
    color: #ec5d4f;
    /* mesma elevação dos .oab-btn (ver "REALCE NO HOVER" em oab-internal.css) */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 93, 79, .22);
}
.oab-sidebar-tema .oab-tema-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(236, 93, 79, .25);
}

/* ============================================================
   RESPONSIVO — CELULAR E TABLET

   Até aqui o shell não tinha breakpoint nenhum: `.wrapper.container` é flex row com a
   coluna da sidebar travada em 260px, então num celular de 390px sobravam 130px para o
   conteúdo. Abaixo de 992px a coluna sai do fluxo e vira gaveta, e o .main-panel
   (flex: 1 1 auto) passa a ocupar a largura inteira.

   O corte é 991.98px para casar com o `min-width: 992px` do Bootstrap 5 sem deixar
   buraco. O theme.css usa 991/992 e chega a ter `min-width: 991px` e `max-width: 991px`
   valendo ao mesmo tempo em 991 exato — não herdar essa sobreposição.
   ============================================================ */

/* Base dos dois elementos que só existem no layout estreito. Tem de ficar FORA da media
   query: ambos estão sempre no DOM, e sem isto o backdrop (position: fixed, inset: 0)
   cobriria a tela inteira no desktop. */
.oab-menu-backdrop { display: none; }
.oab-mobile-bar { display: none; }
.oab-menu-fechar { display: none; }

@media (max-width: 991.98px) {

    /* ---- A coluna da sidebar vira gaveta ----
       max-width em vw COM min-width: 0 é de propósito. Os 260px originais vinham num
       trio flex/min-width/max-width; se o min-width sobrevivesse ele venceria o
       max-width (no CSS min ganha de max) e num aparelho de 320px a gaveta cobriria a
       tela inteira, sem sobrar borda para o usuário perceber o fundo atrás. */
    .wrapper.container > form,
    .wrapper.container > .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        flex: 0 0 auto;
        width: 280px;
        min-width: 0;
        max-width: 82vw;
        /* acima da topbar (5) e do painel de vídeos (1031), abaixo do backdrop de modal
           do BS5 (1050) para o modal continuar por cima de tudo */
        z-index: 1046;
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    }
    html.oab-menu-aberto .wrapper.container > form,
    html.oab-menu-aberto .wrapper.container > .sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(0, 0, 0, .22);
    }

    /* ---- Neutraliza o off-canvas do PRÓPRIO TEMA ----
       ARMADILHA CARA. O paper-dashboard.js (carregado só nos templates do admin) roda
       `pd.initRightMenu()` no $(document).ready e no resize sempre que a janela tem 991px ou
       menos, e ali dentro faz `$sidebar.addClass('off-canvas-sidebar')`. Por trás dessa
       classe o theme.css tem um off-canvas COMPLETO e concorrente:

           .off-canvas-sidebar { position: fixed; top: 0; left: auto; right: 0; width: 260px;
                                 height: 100%; z-index: 1032; background-color: #999;
                                 transform: translate3d(260px, 0, 0); }

       Como a coluna da gaveta tem transform, ela vira o bloco contêiner do `position: fixed`
       da .sidebar. Com a coluna em translateX(-100%) (de -280 a 0) e a .sidebar em right: 0
       mais translate3d de 260px, a .sidebar ficava de -20 a 260 — VISÍVEL, com a gaveta
       fechada. E o X não fechava nada porque não era a gaveta que estava aberta.

       width, background e padding já eram vencidos pelos !important da .sidebar mais acima
       nesta folha; o que sobrava sem contraparte era o posicionamento. `.sidebar` no seletor
       leva a (0,2,0) e dispensa !important.

       O ::after que essa classe também traz (uma camada de 100% com fundo #f4f3ef) já morre
       no `.sidebar::before, .sidebar::after { display: none }` do começo do arquivo. */
    .sidebar.off-canvas-sidebar {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        height: 100%;
        z-index: auto;
        transform: none;
        transition: none;
    }
    /* z-index: 3 do tema aqui cria um contexto de empilhamento sem necessidade — foi
       exatamente essa classe de problema que trouxe o bug acima. */
    .sidebar.off-canvas-sidebar .sidebar-wrapper {
        z-index: auto;
    }

    /* A coluna agora é fixed e não estica mais por flex — a .sidebar precisa de altura
       própria. A borda direita sai porque a elevação já é feita pela sombra da gaveta. */
    .sidebar,
    .sidebar[data-background-color="white"] {
        height: 100%;
        min-height: 0;
    }
    .sidebar .sidebar-wrapper {
        position: relative;
        height: 100%;
        border-right: none !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Backdrop ----
       Criado pelo oab-internal.js e preso ao <body> — mesmo padrão do balão do menu
       recolhido, e pelo mesmo motivo: dentro da sidebar ele seria recortado. Fica sempre
       no DOM e quem liga/desliga é a opacidade, senão a transição só funcionaria ao
       abrir. O pointer-events acompanha para não capturar clique quando invisível. */
    .oab-menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(12, 14, 17, .48);
        z-index: 1044;
        opacity: 0;
        pointer-events: none;
        transition: opacity .24s ease;
    }
    html.oab-menu-aberto .oab-menu-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    /* ---- Botão de fechar, no cabeçalho da gaveta ----
       A gaveta cobre a barra superior (1046 contra 5), então o hambúrguer fica embaixo dela
       e o X que o JS põe naquele botão não é visto por ninguém. Sem este botão as únicas
       saídas eram tocar a faixa escurecida à direita e a tecla Escape. É o mesmo arranjo do
       .offcanvas do Bootstrap 5: gaveta modal fecha pelo próprio cabeçalho.

       O .logo já é position: relative com z-index (é o que mantém a logo acima das camadas
       do tema), então serve de âncora sem precisar de nada novo. Geometria no pior caso —
       tela de 320px, gaveta de 262px: a logo é max-width 170px centrada e vai de x=46 a
       x=216; o botão vai de x=226 a x=256. Não encosta. */
    .oab-menu-fechar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 30px;
        height: 30px;
        padding: 0;
        border-radius: 50%;
        border: 1px solid #ececec;
        background: #fff;
        color: #666;
        font-size: 14px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
        z-index: 3;
    }
    /* O theme.css zera sombra e outline em button:focus — o anel volta por box-shadow. */
    .oab-menu-fechar:focus,
    .oab-menu-fechar:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(236, 93, 79, .25) !important;
    }

    /* ---- Topbar do admin ----
       Os três rótulos somados ("Tema escuro", "Alterar senha", "Sair") pedem ~360px, que
       não existem aqui — passam a ícone. O nome acessível vem do atributo title, posto no
       template; no botão de tema o oab-internal.js mantém o title sincronizado com o
       estado, então ele nunca fica descrevendo o tema errado. */
    .topbar {
        padding: 9px 12px;
        gap: 10px;
        min-height: 54px;
    }
    .topbar-left { gap: 10px; }
    .topbar-actions { gap: 6px; }
    .topbar-btn span { display: none; }
    .topbar-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        gap: 0;
        justify-content: center;
    }
    .topbar-btn i { font-size: 16px; }
    .topbar-toggle {
        width: 38px;
        height: 38px;
        font-size: 19px;
    }
    /* O markup nasce com a seta do rail (bi-arrow-bar-left) e o oab-internal.js só troca a
       classe para bi-list no fim do body — dava um quadro com o ícone errado. Trocar a
       glifa por CSS resolve antes da primeira pintura. \f479 é o codepoint de .bi-list no
       bootstrap-icons.css; depois que o JS troca a classe esta regra deixa de casar e o
       ícone passa a vir dele. */
    .topbar-toggle .bi-arrow-bar-left::before,
    .topbar-toggle .bi-arrow-bar-right::before {
        content: "\f479";
    }
    /* Em tela de toque não existe "sair do hover": o estado fica preso depois do toque e
       o translateY deixa o botão deslocado até a próxima navegação. */
    .topbar-btn:hover,
    .oab-sidebar-tema .oab-tema-toggle:hover {
        transform: none;
        box-shadow: none;
    }

    /* ---- Barra superior do externo ----
       O externo não tem topbar: menu, logo e alternador de tema moram todos na sidebar, e
       aqui a sidebar é uma gaveta fechada. Antes disto a sidebar do externo carregava
       `hidden-xs hidden-sm` e simplesmente desaparecia abaixo de 768px SEM substituto —
       o usuário de celular ficava sem navegação, sem marca e sem botão de tema. */
    .oab-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        padding: 8px 12px;
        min-height: 56px;
        background: #fff;
        border-bottom: 1px solid #ececec;
        position: relative;
        z-index: 5;
    }
    .oab-mobile-bar-logo {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .oab-mobile-bar-logo img {
        height: 40px;
        width: auto;
        max-width: 100%;
    }
    /* O visual do alternador de tema da sidebar está escopado em .oab-sidebar-tema (é o
       que impede a largura de 100% de vazar para o botão da topbar), então o botão desta
       barra precisa do seu próprio. Os dois vivem ao mesmo tempo e o oab-internal.js
       sincroniza ícone, rótulo e title de todos por querySelectorAll. */
    .oab-mobile-bar .oab-menu-toggle,
    .oab-mobile-bar .oab-tema-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid #ececec;
        background: #fff;
        color: #666;
        font-size: 17px;
        line-height: 1;
        cursor: pointer;
        font-family: inherit;
    }
    .oab-mobile-bar .oab-tema-toggle span { display: none; }
    .oab-mobile-bar .oab-tema-toggle i { font-size: 16px; }
    /* O theme.css zera sombra e outline em button:focus — o anel de foco tem de voltar
       por box-shadow, como no .topbar-toggle. */
    .oab-mobile-bar .oab-menu-toggle:focus,
    .oab-mobile-bar .oab-menu-toggle:focus-visible,
    .oab-mobile-bar .oab-tema-toggle:focus,
    .oab-mobile-bar .oab-tema-toggle:focus-visible {
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(236, 93, 79, .25) !important;
    }

    /* ---- Área de conteúdo ----
       !important porque o templateBase do externo tem um <style> inline no <head> que
       carrega DEPOIS desta folha e redeclara este mesmo seletor com o padding de desktop.

       O min-height vai a zero porque tanto o theme.css quanto aquele <style> pedem
       `calc(100vh - 123px)`: no celular isso força a área a passar da tela e cria uma
       rolagem permanente de ~123px. O flex do .main-panel já dimensiona a área. */
    .main-panel > .content {
        padding: 16px 12px !important;
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 575.98px) {
    /* Nome de usuário longo comeria a largura inteira, e a saudação é o item dispensável
       da topbar — os botões não são. */
    .topbar-greeting { display: none; }
    .topbar { padding: 8px 10px; }
    .oab-mobile-bar { padding: 8px 10px; }
    .oab-mobile-bar-logo img { height: 34px; }
    .main-panel > .content { padding: 12px 10px !important; }
}

/* Gaveta e backdrop animam por transform/opacity; quem pediu menos movimento no sistema
   operacional recebe a troca instantânea. */
@media (prefers-reduced-motion: reduce) {
    .wrapper.container > form,
    .wrapper.container > .sidebar,
    .oab-menu-backdrop {
        transition: none !important;
    }
}