/* ============================================================
   TEMA ESCURO — folha de sobreposição
   ------------------------------------------------------------
   COMO LIGA: a classe .oab-dark e o atributo data-bs-theme="dark" no <html>. Os dois
   são aplicados por um script inline no <head> dos templates, ANTES da primeira pintura,
   lendo localStorage['oabTema'] — mesmo padrão já usado por .oab-menu-recolhido. Sem
   isso a tela pintaria clara e piscaria para escura em cada page load (e no admin toda
   navegação é page load completo).

   POR QUE data-bs-theme TAMBÉM: o Bootstrap aqui é 5.3.3, que tem tema escuro nativo.
   O atributo faz o próprio Bootstrap virar modal, dropdown, o X do .btn-close, a seta do
   .form-select e o color-scheme (que escurece scrollbar nativa, popup de <select> e o
   ícone de input[type=date]). Não vale reescrever isso à mão.

   POR QUE TODO SELETOR COMEÇA COM html.oab-dark: o oab-internal.css é linkado DENTRO do
   body, tela por tela (98 telas), enquanto esta folha é linkada no <head> dos templates.
   Fosse pela ordem do documento, o oab-internal venceria. Com o prefixo, cada regra ganha
   uma classe + um tipo de especificidade sobre a original e vence independente da ordem.
   Pelo mesmo motivo o !important aparece muito aqui: a folha de origem usa !important em
   quase tudo, e empate de especificidade com !important só se resolve com !important.

   ESCOPO: as telas internas dos dois WARs. Login, seleção de seccional e a home do
   externo ficam de fora — as quatro vivem em templateEntrada.xhtml, que de propósito NÃO
   linka esta folha nem aplica a classe. É lá que a exclusão é garantida, não aqui.

   PALETA: contraste medido sobre as duas superfícies (--oab-surface e --oab-bg); todos os
   pares de texto passam WCAG AA. O coral da marca aparece em duas versões: --oab-coral
   (clareado, para TEXTO e ícone, 6.43:1 no card) e --oab-coral-cheio (#ec5d4f, o original,
   para PREENCHIMENTO de botão) — o cheio não muda para a marca não mudar.
   ============================================================ */

html.oab-dark {
    /* superfícies, da mais funda para a mais alta */
    --oab-bg: #16181c;              /* fundo da página        (claro: #f4f3ef) */
    --oab-surface: #1e2126;         /* card, sidebar, tabela  (claro: #fff)    */
    --oab-surface-2: #262a30;       /* thead, hover, campo    (claro: #fafafa) */
    --oab-surface-3: #2e333a;       /* desabilitado, elevado  (claro: #f5f5f5) */

    /* bordas */
    --oab-border: #33383e;          /* divisória             (claro: #ececec) */
    --oab-border-2: #3f454d;        /* borda de campo        (claro: #e0e0e0) */

    /* texto — 13.39 / 8.43 / 5.08 : 1 sobre --oab-surface */
    --oab-texto: #e8eaed;           /* corpo                 (claro: #1a1a1a) */
    --oab-texto-2: #b6bcc3;         /* secundário            (claro: #5f5f5f) */
    --oab-texto-3: #8b9198;         /* decorativo            (claro: #8a8a8a) */

    /* marca */
    --oab-coral: #ff7c6e;           /* coral como TEXTO/ícone (6.43:1)        */
    --oab-coral-cheio: #ec5d4f;     /* coral como PREENCHIMENTO — intacto     */
    --oab-coral-suave: #3a2622;     /* tinte coral           (claro: #fff5f4) */

    /* semânticas */
    --oab-vermelho: #ff8f8f;
    --oab-vermelho-suave: #3a2226;
    --oab-amarelo: #ffc95c;
    --oab-amarelo-suave: #352c14;
    --oab-verde: #7ee2a8;
    --oab-verde-suave: #17301f;

    /* barra de rolagem — ver a seção BARRA DE ROLAGEM adiante para o porquê destes
       valores, que não são o coral da marca */
    --oab-barra: #a0544a;
    --oab-barra-hover: #b06055;
    --oab-barra-trilha: #1a1d22;
}

/* ============ TROCA DE TEMA ============
   Enquanto o tema troca, nenhuma transição roda. Várias regras herdadas animam
   `transition: all` (o .main-panel do theme.css leva 0,33s; botões, links da sidebar e
   cartões, de 0,1s a 0,3s), então cada pedaço da tela chegava à cor nova num tempo
   diferente, e no meio do caminho o fundo passava por um cinza. A classe é posta e
   tirada pelo oab-internal.js. O esmaecimento da página inteira, onde o navegador tem
   View Transitions, é feito por ele mesmo; aqui fica só a duração. */

html.oab-tema-trocando *,
html.oab-tema-trocando *::before,
html.oab-tema-trocando *::after {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .3s;
}

/* ============ BASE / CHROME DO TEMPLATE ============ */

html.oab-dark body,
html.oab-dark .main-panel,
html.oab-dark .wrapper {
    background-color: var(--oab-bg) !important;
    color: var(--oab-texto);
}

/* .card do template: nas telas já refatoradas o oab-internal deixa esse card
   transparente (:has(.oab-page)); nas que ainda não passaram pela refatoração ele
   continua sendo a moldura branca da tela. Os dois casos existem hoje. */
html.oab-dark .card {
    background-color: var(--oab-surface) !important;
    color: var(--oab-texto) !important;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .35) !important;
}
html.oab-dark .card .title,
html.oab-dark .card .description,
html.oab-dark .card .header h4 {
    color: var(--oab-texto) !important;
}
html.oab-dark .card .category,
html.oab-dark .card label,
html.oab-dark .card .stats {
    color: var(--oab-texto-2) !important;
}
html.oab-dark hr,
html.oab-dark .main-panel > .footer {
    border-color: var(--oab-border) !important;
}
html.oab-dark legend {
    color: var(--oab-texto) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .text-muted {
    color: var(--oab-texto-3) !important;
}

/* ============ ELEMENTOS NUS QUE O THEME.CSS PINTA ESCURO ============
   O theme.css tem `strong { color: #403D39 }` — regra de ELEMENTO NU, sem classe. Isso
   é diferente de tudo o mais nesta folha: como a regra casa direto no <strong>, ela
   vence a cor HERDADA do contexto, e herança perde para qualquer regra que case, não
   importa quão específica seja a do ancestral. Efeito prático: dentro de um
   .oab-alert-warning já escurecido, o <strong> voltava para marrom escuro e a mensagem
   ficava ilegível (foi o caso relatado no modal "Desistência / Decurso de Prazo").

   `inherit` e não uma cor fixa: assim o negrito assume a cor do contexto — âmbar dentro
   do alerta de aviso, vermelho no de erro, claro no card. As regras mais específicas
   que já existem aqui (.oab-empty-state strong, .oab-ia-metrica strong e afins)
   continuam vencendo esta onde precisam.

   O hover de link tem o problema inverso: o repouso é #68B3C8 e o hover #3091B2, mais
   ESCURO — no fundo escuro isso apaga o link justamente quando o mouse está nele. Vira
   um azul mais claro que o repouso. Botões não são afetados: as regras .oab-btn* fixam
   a cor com !important. */
html.oab-dark strong,
html.oab-dark b {
    color: inherit;
}
html.oab-dark a:hover,
html.oab-dark a:focus {
    color: #9fd4e8;
}

/* ============ SIDEBAR ============ */

html.oab-dark .sidebar,
html.oab-dark .sidebar[data-background-color="white"],
html.oab-dark .sidebar .sidebar-wrapper {
    background: var(--oab-surface) !important;
}
html.oab-dark .sidebar {
    box-shadow: 2px 0 12px rgba(0, 0, 0, .35) !important;
}
html.oab-dark .sidebar .sidebar-wrapper {
    border-right: 1px solid var(--oab-border) !important;
}
html.oab-dark .sidebar .logo,
html.oab-dark .sidebar[data-background-color="white"] .logo {
    background: var(--oab-surface) !important;
    border-bottom: 1px solid var(--oab-border) !important;
}
/* ============ LOGO POR TEMA ============
   O nome da seccional é quase preto nas logos originais e desaparecia no escuro. A
   primeira tentativa foi uma placa branca atrás da imagem, e ficou um retângulo claro
   dentro da sidebar escura. Agora existe um segundo arquivo por seccional
   (logo-min-escuro.png e logo-min-hmg-escuro.png — 6 seccionais x 2 ambientes x 2 WARs)
   em que só o nome foi clareado: o selo azul e as letras vermelhas continuam idênticos,
   porque leem bem sobre escuro do jeito que são. O template renderiza os dois <img> e
   aqui se decide qual aparece.

   O !important e a repetição de `.sidebar .logo` nos seletores não são exagero: o gêmeo
   escuro nasce com style="display: none" inline (para que, sem CSS, apareça a logo normal
   e não as duas), e o sidebar-modern.css tem
   `.sidebar .logo img { display: block !important }`. Sem subir a especificidade acima
   dessa regra, a escolha dependeria da ordem dos arquivos. */
html.oab-dark img.oab-logo-claro,
html.oab-dark .sidebar .logo img.oab-logo-claro {
    display: none !important;
}
html.oab-dark img.oab-logo-escuro,
html.oab-dark .sidebar .logo img.oab-logo-escuro {
    display: block !important;
}
html.oab-dark .sidebar .nav li > a,
html.oab-dark .sidebar[data-background-color="white"] .nav li > a,
html.oab-dark .sidebar .nav li:not(.active) > a,
html.oab-dark .sidebar[data-background-color="white"] .nav li:not(.active) > a {
    color: var(--oab-texto) !important;
}
html.oab-dark .sidebar .nav li > a > i {
    color: var(--oab-texto-2) !important;
}
html.oab-dark .sidebar .nav .sidebar-section,
html.oab-dark .sidebar .nav li.sidebar-section {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .sidebar .nav li:hover > a {
    background: var(--oab-surface-2) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .sidebar .nav li:hover > a > i,
html.oab-dark .sidebar .nav li.active > a > i {
    color: var(--oab-coral) !important;
}
html.oab-dark .sidebar .nav li.active > a {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
    border-left: 3px solid var(--oab-coral-cheio) !important;
}
/* No rail de 72px o cabeçalho de seção vira uma barrinha — precisa aparecer no escuro. */
html.oab-dark.oab-menu-recolhido .sidebar .nav li.sidebar-section {
    background: var(--oab-border) !important;
}
html.oab-dark .sidebar .sidebar-wrapper {
    scrollbar-color: var(--oab-barra) transparent !important;
}
html.oab-dark .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--oab-barra) !important;
}
html.oab-dark .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--oab-barra-hover) !important;
}
/* No rail de 72px a folha clara já rebaixa a barra para cinza, para não competir com os
   ícones; aqui só a traduz para o escuro. */
html.oab-dark.oab-menu-recolhido .sidebar .sidebar-wrapper {
    scrollbar-color: var(--oab-border-2) transparent !important;
}
html.oab-dark.oab-menu-recolhido .sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
    background: var(--oab-border-2) !important;
}
html.oab-dark .oab-sidebar-footer {
    background: var(--oab-surface) !important;
    color: var(--oab-texto-3) !important;
    border-top: 1px solid var(--oab-border) !important;
}
html.oab-dark .oab-sidebar-footer a {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-sidebar-footer a:hover {
    color: var(--oab-coral) !important;
}
html.oab-dark .oab-menu-tooltip,
html.oab-dark .oab-menu-tooltip::before {
    background: #0d0f12;
    color: var(--oab-texto);
}

/* ============ TOPBAR ============ */

html.oab-dark .topbar {
    background: var(--oab-surface) !important;
    border-bottom: 1px solid var(--oab-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .30) !important;
}
html.oab-dark .topbar-greeting,
html.oab-dark .topbar-username {
    color: var(--oab-texto) !important;
}
html.oab-dark .topbar-btn,
html.oab-dark .topbar-toggle {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .topbar-btn:hover,
html.oab-dark .topbar-toggle:hover {
    background: var(--oab-coral-suave) !important;
    border-color: var(--oab-coral-cheio) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .topbar-btn-logout:hover {
    background: var(--oab-coral-cheio) !important;
    border-color: var(--oab-coral-cheio) !important;
    color: #fff !important;
}

/* Alternador de tema no pé da sidebar do externo (no admin ele é um .topbar-btn e já
   está coberto acima). */
html.oab-dark .oab-sidebar-tema .oab-tema-toggle {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    color: var(--oab-texto-2);
}
html.oab-dark .oab-sidebar-tema .oab-tema-toggle:hover {
    background: var(--oab-coral-suave);
    border-color: var(--oab-coral-cheio);
    color: var(--oab-coral);
}
/* ============ BARRA DO LAYOUT ESTREITO (celular e tablet) ============
   A .oab-mobile-bar é o único elemento novo do responsivo com cor própria: a gaveta é a
   própria .sidebar (já coberta acima) e o backdrop já nasce escuro. Sem isto ela ficaria
   branca atravessando o alto da tela — o mesmo defeito que a .video-topbar tinha. */
html.oab-dark .oab-mobile-bar {
    background: var(--oab-surface) !important;
    border-bottom-color: var(--oab-border) !important;
}
html.oab-dark .oab-mobile-bar .oab-menu-toggle,
html.oab-dark .oab-mobile-bar .oab-tema-toggle,
html.oab-dark .oab-menu-fechar {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto-2) !important;
}
/* A gaveta é uma camada sobre o conteúdo: no escuro sombra preta não comunica elevação
   (mesma razão do toast e do painel de vídeos), então quem separa é a borda. */
html.oab-dark .wrapper.container > form,
html.oab-dark .wrapper.container > .sidebar {
    border-right: 1px solid var(--oab-border-2);
}

/* Navbar antiga (templateDashboard, ainda não refatorado para a topbar nova). */
html.oab-dark .navbar-default {
    background-color: var(--oab-surface) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .navbar-default .navbar-nav > li > a,
html.oab-dark .navbar-default .navbar-nav > li > a p {
    color: var(--oab-texto-2) !important;
}

/* ============ BARRA DE ROLAGEM ============
   A folha clara pinta o polegar com o coral da marca de propósito. O problema no escuro
   não é a cor em si, é a INTENSIDADE: medido, o coral #ec5d4f sobre a trilha clara
   #f5f5f5 dá 3.08:1, e o mesmo coral sobre a trilha escura dá 5.03:1 — 63% mais
   contraste do que o desenho previa, e é isso que salta aos olhos.

   Então a correção não é trocar por cinza e perder a identidade: é reproduzir a mesma
   intensidade. #a0544a sobre #1a1d22 dá 3.11:1, praticamente o valor do tema claro, e
   o hover sobe para 3.74:1 como no claro. A trilha fica 1.05:1 acima do fundo da
   página: um canal discreto, não uma faixa clara.

   Duas coisas que a minha varredura de cobertura não pegou aqui e valem lembrar: ela
   ignora valores com gradient (o polegar claro é um linear-gradient) e não olha
   scrollbar-color, que é a propriedade do Firefox. Foram exatamente as que passaram. */
html.oab-dark {
    scrollbar-color: var(--oab-barra) var(--oab-barra-trilha);
}
html.oab-dark ::-webkit-scrollbar-track,
html.oab-dark ::-webkit-scrollbar-corner {
    background: var(--oab-barra-trilha);
}
html.oab-dark ::-webkit-scrollbar-thumb {
    background: var(--oab-barra);
    border-color: var(--oab-barra-trilha);
}
html.oab-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--oab-barra-hover);
}

/* ============ PAGE HEADER / PAGE WRAPPER ============ */

html.oab-dark .oab-page,
html.oab-dark .oab-page-header h2 {
    color: var(--oab-texto);
}
html.oab-dark .oab-page-header p {
    color: var(--oab-texto-2);
}
html.oab-dark .oab-page-footer {
    border-top-color: var(--oab-border);
}
html.oab-dark .oab-page-back,
html.oab-dark a.oab-page-back,
html.oab-dark a.oab-page-back:visited {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .oab-page-back:hover,
html.oab-dark .oab-page-back:focus,
html.oab-dark a.oab-page-back:hover,
html.oab-dark a.oab-page-back:focus {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}

/* ============ CARDS DO DESIGN SYSTEM ============ */

html.oab-dark .oab-card {
    background: var(--oab-surface);
    border-color: var(--oab-border);
}
html.oab-dark .oab-result-header {
    color: var(--oab-texto-2);
}

/* O <style> inline de documentoDigital.xhtml e de consultaRegistroDigital.xhtml fixa cores claras
   (#fafafa / #ececec / #f1f1f1 / #333 / #444 / #888 / #999 / #aaa) em oito classes. Sem as regras
   abaixo elas ficam brancas dentro do card escuro — foi o caso da faixa "Assinantes" e da faixa de
   dados do processo no topo. A borda esquerda coral da faixa é preenchimento de marca e fica intacta. */
html.oab-dark .oab-doc-bloco {
    border-color: var(--oab-border);
}
html.oab-dark .oab-doc-bloco-header {
    background: var(--oab-surface-2);
    border-bottom-color: var(--oab-border);
    color: var(--oab-texto);
}
html.oab-dark .oab-processo-meta {
    background: var(--oab-surface-2);
    border-color: var(--oab-border);
    border-left-color: var(--oab-coral-cheio);
}
html.oab-dark .oab-processo-meta-item > span {
    color: var(--oab-texto-3);
}
html.oab-dark .oab-processo-meta-item > strong {
    color: var(--oab-texto);
}
html.oab-dark .oab-demais-badge {
    background: var(--oab-surface-3);
    color: var(--oab-texto-2);
}
html.oab-dark .oab-demais-hint {
    color: var(--oab-texto-3);
}
html.oab-dark .oab-upload-hint {
    color: var(--oab-texto-3);
}

/* ============ FORMULÁRIOS ============ */

html.oab-dark .oab-form-group label,
html.oab-dark .oab-form-group label.form-check-label,
html.oab-dark .oab-radio-group label,
html.oab-dark .control-label,
html.oab-dark label {
    color: var(--oab-texto);
}
html.oab-dark .oab-form-group input,
html.oab-dark .oab-form-group select,
html.oab-dark .oab-form-group textarea,
html.oab-dark .oab-table tbody td input[type="text"],
html.oab-dark .oab-table tbody td input[type="number"],
html.oab-dark .oab-table tbody td input[type="email"],
html.oab-dark .oab-table tbody td input:not([type]),
html.oab-dark .oab-table tbody td select,
html.oab-dark .ui-datatable.oab-table tbody td input[type="text"],
html.oab-dark .ui-datatable.oab-table tbody td input[type="number"],
html.oab-dark .ui-datatable.oab-table tbody td input[type="email"],
html.oab-dark .ui-datatable.oab-table tbody td input:not([type]),
html.oab-dark .ui-datatable.oab-table tbody td select,
html.oab-dark .form-control,
html.oab-dark .oab-search-input,
html.oab-dark .oab-page-size select,
html.oab-dark .oab-textarea-resize {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .form-control:focus {
    background-color: var(--oab-surface-2) !important;
}
/* O popup de <option> segue o color-scheme do navegador, mas Chrome no Windows ainda
   respeita cor declarada — sem isto a lista sai branca dentro de um campo escuro. */
html.oab-dark select option,
html.oab-dark .oab-form-group select option {
    background: var(--oab-surface-2);
    color: var(--oab-texto);
}
html.oab-dark .oab-form-group input::placeholder,
html.oab-dark .oab-form-group textarea::placeholder,
html.oab-dark .oab-table tbody td input::placeholder,
html.oab-dark .ui-datatable.oab-table tbody td input::placeholder,
html.oab-dark .form-control::placeholder,
html.oab-dark .oab-search-input::placeholder {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-form-group input:disabled,
html.oab-dark .oab-form-group select:disabled,
html.oab-dark .oab-form-group textarea:disabled,
html.oab-dark textarea:disabled,
html.oab-dark .form-control[disabled],
html.oab-dark .form-control[readonly],
html.oab-dark fieldset[disabled] .form-control {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-readonly-field {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    color: var(--oab-texto);
}
html.oab-dark .oab-checkbox-inline {
    color: var(--oab-texto-2);
}
html.oab-dark .oab-search-wrapper i {
    color: var(--oab-texto-3);
}
html.oab-dark .oab-page-size {
    color: var(--oab-texto-2);
}

/* ============ BOTÕES ============
   Os preenchidos (primary, danger, warning, ia) ficam como estão: cor de marca e branco
   em cima continuam legíveis no escuro, e mudá-los mudaria a identidade. O que precisa
   virar é quem era branco com texto escuro — .oab-btn-light (o mais usado da família),
   os outline e os de ícone, cujo fundo era um tinte claro. */

html.oab-dark .oab-btn-light,
html.oab-dark a.oab-btn-light,
html.oab-dark a.oab-btn-light:visited {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto-2) !important;
    border-color: var(--oab-border-2) !important;
}
html.oab-dark .oab-btn-light:hover,
html.oab-dark .oab-btn-light:focus-visible,
html.oab-dark a.oab-btn-light:hover,
html.oab-dark a.oab-btn-light:focus-visible {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .oab-btn-primary-outline,
html.oab-dark a.oab-btn-primary-outline,
html.oab-dark a.oab-btn-primary-outline:visited {
    background: transparent !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .oab-btn-icon,
html.oab-dark a.oab-btn-icon,
html.oab-dark a.oab-btn-icon:visited {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .oab-btn-icon-danger,
html.oab-dark a.oab-btn-icon-danger,
html.oab-dark a.oab-btn-icon-danger:visited {
    background: var(--oab-vermelho-suave) !important;
    color: var(--oab-vermelho) !important;
}
html.oab-dark .oab-btn.oab-btn-disabled,
html.oab-dark .oab-btn.oab-btn-disabled:hover,
html.oab-dark .oab-btn.oab-btn-disabled:focus {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto-3) !important;
    border-color: var(--oab-border) !important;
}
/* Botões do Bootstrap/theme que ainda aparecem em telas não refatoradas. */
html.oab-dark .btn-default,
html.oab-dark a.btn-default.btn-fill,
html.oab-dark .btn-default.btn-fill {
    background-color: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .btn-default:hover,
html.oab-dark .btn-default:focus {
    background-color: var(--oab-surface-3) !important;
    border-color: var(--oab-coral-cheio) !important;
    color: var(--oab-coral) !important;
}

/* ============ TABELAS (.oab-table e o pr:dataTable com a mesma classe) ============ */

html.oab-dark .oab-table {
    background: var(--oab-surface);
    border-color: var(--oab-border);
}
html.oab-dark .ui-datatable.oab-table table {
    background: var(--oab-surface) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .oab-table thead th,
html.oab-dark .ui-datatable.oab-table thead th {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto-2) !important;
    border-bottom-color: var(--oab-border) !important;
}
html.oab-dark .oab-table tbody td {
    color: var(--oab-texto);
    border-bottom-color: var(--oab-border);
}
html.oab-dark .ui-datatable.oab-table tbody td {
    color: var(--oab-texto) !important;
    background: var(--oab-surface) !important;
    border-bottom-color: var(--oab-border) !important;
}
html.oab-dark .oab-table tbody tr:hover,
html.oab-dark .ui-datatable.oab-table tbody tr:hover td,
html.oab-dark .ui-datatable.oab-table tbody tr.ui-state-hover td {
    background: var(--oab-surface-2) !important;
}
html.oab-dark .table thead tr > th,
html.oab-dark .table thead tr > td,
html.oab-dark .table tbody tr > th,
html.oab-dark .table tbody tr > td,
html.oab-dark .table tfoot tr > th,
html.oab-dark .table tfoot tr > td {
    border-top-color: var(--oab-border) !important;
    color: var(--oab-texto);
}
html.oab-dark .table-striped tbody > tr:nth-of-type(2n+1) {
    background-color: var(--oab-surface) !important;
}
html.oab-dark .table-striped tbody > tr:nth-of-type(2n) {
    background-color: var(--oab-surface-2) !important;
}
html.oab-dark .well .table {
    background: var(--oab-surface) !important;
}

/* ============ PAGINAÇÃO (composite .oab-page-btn e o paginator do PrimeFaces) ============ */

html.oab-dark .oab-page-btn,
html.oab-dark a.oab-page-btn,
html.oab-dark a.oab-page-btn:visited,
html.oab-dark .ui-paginator a.ui-paginator-first,
html.oab-dark .ui-paginator a.ui-paginator-prev,
html.oab-dark .ui-paginator a.ui-paginator-next,
html.oab-dark .ui-paginator a.ui-paginator-last,
html.oab-dark .ui-paginator a.ui-paginator-page,
html.oab-dark .ui-paginator .ui-paginator-pages a,
html.oab-dark .ui-paginator span.ui-paginator-first,
html.oab-dark .ui-paginator span.ui-paginator-prev,
html.oab-dark .ui-paginator span.ui-paginator-next,
html.oab-dark .ui-paginator span.ui-paginator-last {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .oab-page-btn:hover,
html.oab-dark a.oab-page-btn:hover,
html.oab-dark a.oab-page-btn:focus,
html.oab-dark .ui-paginator a:hover,
html.oab-dark .ui-paginator .ui-paginator-pages a:hover,
html.oab-dark .ui-paginator a.ui-state-hover {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .oab-page-btn.disabled,
html.oab-dark span.oab-page-btn.disabled,
html.oab-dark .ui-paginator a.ui-state-disabled,
html.oab-dark .ui-paginator a.ui-state-disabled:hover,
html.oab-dark .ui-paginator span.ui-state-disabled {
    background: var(--oab-surface) !important;
    color: var(--oab-texto-3) !important;
    border-color: var(--oab-border) !important;
    opacity: .55 !important;
}
html.oab-dark .ui-datatable .ui-paginator,
html.oab-dark .ui-paginator.ui-paginator-bottom,
html.oab-dark .ui-paginator.ui-paginator-top {
    color: var(--oab-texto-2) !important;
}
html.oab-dark .ui-paginator span.ui-paginator-current,
html.oab-dark .ui-datatable .ui-paginator .ui-paginator-current,
html.oab-dark .ui-paginator.ui-paginator-bottom .ui-paginator-current,
html.oab-dark .oab-pagination-info {
    color: var(--oab-texto-2) !important;
}

/* ============ ESTADOS VAZIOS ============ */

html.oab-dark .oab-empty-state {
    background: var(--oab-surface);
    border-color: var(--oab-border);
    color: var(--oab-texto-2);
}
html.oab-dark .oab-empty-state i {
    color: var(--oab-border-2);
}
html.oab-dark .oab-empty-state strong {
    color: var(--oab-texto);
}
html.oab-dark .oab-empty-inline {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    color: var(--oab-texto-2);
}
html.oab-dark .oab-empty-inline > i {
    color: var(--oab-texto-3);
}

/* ============ ALERTAS ============ */

html.oab-dark .oab-alert-warning,
html.oab-dark .oab-acesso-negado-dica,
html.oab-dark .banner-instabilidade {
    background: var(--oab-amarelo-suave);
    border-color: #5c4a15;
    border-left-color: var(--oab-amarelo);
    color: var(--oab-amarelo);
}
html.oab-dark .oab-alert-danger {
    background: var(--oab-vermelho-suave);
    border-color: #6b2b33;
    border-left-color: var(--oab-vermelho);
    color: var(--oab-vermelho);
}
html.oab-dark .oab-alert-success {
    background: var(--oab-verde-suave);
    border-color: #2b5c3c;
    border-left-color: var(--oab-verde);
    color: var(--oab-verde);
}
html.oab-dark .oab-status-yes {
    color: var(--oab-verde) !important;
}
html.oab-dark .oab-status-no {
    color: var(--oab-vermelho) !important;
}
html.oab-dark .oab-status-warning {
    color: var(--oab-amarelo) !important;
}
html.oab-dark .oab-status-neutral {
    color: var(--oab-texto-3) !important;
}
/* Callouts do dev.css / alert do Bootstrap 3, ainda presentes em telas antigas. */
html.oab-dark .bs-callout,
html.oab-dark .alert {
    border-color: var(--oab-border) !important;
}
html.oab-dark .bs-callout-danger,
html.oab-dark .alert-danger {
    background: var(--oab-vermelho-suave) !important;
    color: var(--oab-vermelho) !important;
}
html.oab-dark .bs-callout-warning,
html.oab-dark .alert-warning,
html.oab-dark .bs-callout-WARN {
    background: var(--oab-amarelo-suave) !important;
    color: var(--oab-amarelo) !important;
}
html.oab-dark .bs-callout-success,
html.oab-dark .alert-success,
html.oab-dark .bg-success {
    background-color: var(--oab-verde-suave) !important;
    color: var(--oab-verde) !important;
}
html.oab-dark .bs-callout-info,
html.oab-dark .alert-info {
    background: #16303a !important;
    color: #7fd0e8 !important;
}
html.oab-dark .bs-callout-default,
html.oab-dark .alert-default {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .bs-callout h4,
html.oab-dark .alert h4 {
    color: inherit !important;
}

/* ============ PAINÉIS / WELL (bs3-compat) ============ */

html.oab-dark .panel,
html.oab-dark .thumbnail {
    background-color: var(--oab-surface) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .panel-default {
    border-color: var(--oab-border) !important;
}
html.oab-dark .panel-heading,
html.oab-dark .panel-footer {
    background-color: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .well,
html.oab-dark .bg-cor {
    background-color: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .help-block {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .disabled-true,
html.oab-dark .stepwizard-step a[disabled] {
    background-color: var(--oab-surface-3) !important;
}

/* ============ DOWNLOAD PRONTO (card celebrativo) ============ */

html.oab-dark .oab-download-ready {
    background: linear-gradient(135deg, #17301f 0%, #1d3d28 100%);
    border-color: #2b5c3c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
html.oab-dark .oab-download-ready-icon {
    background: var(--oab-surface-2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
html.oab-dark .oab-download-ready-icon::after {
    border-color: var(--oab-surface-2);
}
html.oab-dark .oab-download-ready-title {
    color: var(--oab-verde);
}
html.oab-dark .oab-download-ready-subtitle {
    color: var(--oab-texto-2);
}

/* ============ NAV TILES ============ */

html.oab-dark .oab-nav-tile {
    background: var(--oab-surface);
    border-color: var(--oab-border);
    color: var(--oab-texto);
}
html.oab-dark .oab-nav-tile:hover,
html.oab-dark .oab-nav-tile:focus,
html.oab-dark .oab-nav-tile:active {
    color: var(--oab-texto);
    border-color: var(--oab-coral-cheio);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
html.oab-dark .oab-nav-tile-title {
    color: var(--oab-texto);
}
html.oab-dark .oab-nav-tile-arrow {
    color: var(--oab-texto-3);
}
html.oab-dark .oab-nav-tile:hover .oab-nav-tile-arrow {
    color: var(--oab-coral);
}
/* Os seis ícones coloridos: o fundo pastel viraria um borrão claro no escuro. Fica o
   mesmo matiz rebaixado, com o ícone clareado para manter a leitura. */
html.oab-dark .oab-nav-tile-icon.is-blue    { background: #16273a; color: #7fb6ee; }
html.oab-dark .oab-nav-tile-icon.is-purple  { background: #2a1c33; color: #cba3e0; }
html.oab-dark .oab-nav-tile-icon.is-green   { background: #17301f; color: #7ed49b; }
html.oab-dark .oab-nav-tile-icon.is-orange  { background: #352513; color: #f2ab6a; }
html.oab-dark .oab-nav-tile-icon.is-red     { background: #35201f; color: #f09490; }
html.oab-dark .oab-nav-tile-icon.is-teal    { background: #142c2b; color: #79c9c2; }

/* ============ ACESSO NEGADO ============ */

html.oab-dark .oab-acesso-negado {
    background: radial-gradient(ellipse at top, var(--oab-coral-suave) 0%, transparent 60%);
}
html.oab-dark .oab-acesso-negado-icon {
    background: linear-gradient(135deg, var(--oab-surface-2) 0%, var(--oab-coral-suave) 100%);
    box-shadow: 0 14px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
html.oab-dark .oab-acesso-negado-icon i {
    color: var(--oab-coral);
}
html.oab-dark .oab-acesso-negado-titulo {
    color: var(--oab-texto);
}
html.oab-dark .oab-acesso-negado-mensagem {
    color: var(--oab-texto-2);
}

/* ============ MODAL ============
   O grosso (fundo, texto, o X do .btn-close) vem do tema escuro nativo do Bootstrap 5.3,
   ligado pelo data-bs-theme no <html>. Aqui só as bordas e o título, que o oab-internal
   fixou em cor clara. */

html.oab-dark .modal-content {
    border-color: var(--oab-border) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55) !important;
}
html.oab-dark .modal-header {
    border-bottom-color: var(--oab-border) !important;
}
html.oab-dark .modal-footer {
    border-top-color: var(--oab-border) !important;
}
html.oab-dark .modal-title {
    color: var(--oab-texto) !important;
}

/* ============ CAIXA DE TERMOS / ARQUIVO ANEXADO / REQUISITOS DE SENHA ============ */

html.oab-dark .oab-terms-box {
    background: linear-gradient(180deg, var(--oab-surface-2) 0%, var(--oab-surface) 100%);
    border-color: var(--oab-border-2);
    border-left-color: var(--oab-amarelo);
    color: var(--oab-texto);
    box-shadow: none;
}
html.oab-dark .oab-terms-box::-webkit-scrollbar-thumb {
    background: var(--oab-border-2);
}
html.oab-dark .oab-terms-box::-webkit-scrollbar-thumb:hover {
    background: var(--oab-texto-3);
}
html.oab-dark .oab-attached-file {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    border-left-color: var(--oab-coral-cheio);
}
html.oab-dark .oab-attached-file > i {
    color: var(--oab-coral);
}
html.oab-dark .oab-attached-file-label {
    color: var(--oab-texto-2);
}
html.oab-dark .oab-attached-file-info strong {
    color: var(--oab-texto);
}
html.oab-dark .oab-attached-file-validity {
    background: var(--oab-verde-suave);
    border-color: #2b5c3c;
    color: var(--oab-verde);
}
html.oab-dark .oab-attached-file-validity.oab-validity-expired {
    background: var(--oab-vermelho-suave);
    border-color: #6b2b33;
    color: var(--oab-vermelho);
}
html.oab-dark .oab-password-requirements {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
}
html.oab-dark .oab-password-requirements-title {
    color: var(--oab-texto-2);
}
html.oab-dark .oab-password-requirements li {
    color: var(--oab-texto-2);
}
html.oab-dark .oab-password-requirements li i {
    color: var(--oab-border-2);
}
html.oab-dark .oab-password-requirements li.req-met,
html.oab-dark .oab-password-requirements li.req-met i {
    color: var(--oab-verde);
}

/* ============ DATEPICKER (pr:datePicker) ============
   O cabeçalho continua com o degradê coral — é o que identifica o componente. O corpo,
   que era branco, passa para a superfície escura. */

html.oab-dark .ui-datepicker,
html.oab-dark #ui-datepicker-div {
    background: var(--oab-surface) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35) !important;
}
html.oab-dark .oab-form-group .ui-calendar .ui-inputfield,
html.oab-dark .oab-form-group .ui-calendar input.hasDatepicker {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-form-group .ui-calendar .ui-inputfield::placeholder {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-form-group .ui-calendar .ui-datepicker-trigger {
    color: var(--oab-texto-2) !important;
}
html.oab-dark .oab-form-group .ui-calendar .ui-datepicker-trigger:hover,
html.oab-dark .oab-form-group .ui-calendar .ui-datepicker-trigger:focus {
    color: var(--oab-coral) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar th {
    color: var(--oab-texto-2) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td span {
    color: var(--oab-texto) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td a:hover {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
/* Hoje: contorno coral sobre a superfície escura (no claro é contorno sobre branco). */
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td a.ui-state-highlight {
    background: var(--oab-surface-2) !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a:hover,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td a.ui-state-highlight:hover {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-other-month span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-state-disabled span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-unselectable span {
    color: #4c5257 !important;
}
/* Fim de semana em coral: no claro usa o #ec5d4f; aqui o clareado, senão fica surdo. */
html.oab-dark .ui-datepicker table.ui-datepicker-calendar th:first-child,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar th:last-child,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child a:hover,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child a:hover {
    color: var(--oab-coral) !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-other-month a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-other-month a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-other-month span,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-other-month span {
    color: #6b4a45 !important;
}
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child a.ui-state-highlight,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child a.ui-state-highlight,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-week-end a.ui-state-highlight,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:first-child.ui-datepicker-today a,
html.oab-dark .ui-datepicker table.ui-datepicker-calendar td:last-child.ui-datepicker-today a {
    color: var(--oab-coral) !important;
}
html.oab-dark .ui-datepicker .ui-datepicker-title select option,
html.oab-dark .ui-datepicker select.ui-datepicker-month option,
html.oab-dark .ui-datepicker select.ui-datepicker-year option {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .ui-datepicker .ui-datepicker-buttonbar {
    border-top-color: var(--oab-border) !important;
}
html.oab-dark .ui-datepicker .ui-datepicker-buttonbar button,
html.oab-dark .ui-datepicker .ui-today-button,
html.oab-dark .ui-datepicker .ui-clear-button {
    background: transparent !important;
    color: var(--oab-coral) !important;
    border-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .ui-datepicker .ui-datepicker-buttonbar button:hover,
html.oab-dark .ui-datepicker .ui-today-button:hover {
    background: var(--oab-coral-cheio) !important;
    color: #fff !important;
}
html.oab-dark .ui-datepicker .ui-clear-button {
    border-color: var(--oab-border-2) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .ui-datepicker .ui-clear-button:hover {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto) !important;
    border-color: var(--oab-texto-3) !important;
}

/* ============ TOASTS (#mensagens-sistema) ============
   A barra de 4px na esquerda e a bolinha de ícone são os dois sinais de severidade, e
   ficam nas MESMAS cores do tema claro. Medido sobre esta superfície: #dc3545 dá
   3.19:1, #f59e0b 6.71:1 e #10b981 5.68:1 — todos acima do mínimo de 3:1 para
   indicador. Nada a clarear aqui; a barra e a bolinha precisam ser da mesma cor, senão
   uma ao lado da outra parecem erro.

   CUIDADO com `border-color`: é atalho para os QUATRO lados e foi exatamente assim que
   eu apaguei a barra de severidade na primeira versão — a regra de severidade define
   só `border-left-color`, e o atalho a sobrescrevia. Por isso aqui vão os três lados
   nomeados, deixando a esquerda para quem é dono dela.

   A borda usa --oab-border-2 (mais forte que a divisória padrão) de propósito: sombra
   preta praticamente não aparece sobre fundo escuro, então o toast perderia a sensação
   de estar flutuando. No escuro elevação se comunica com superfície mais clara + borda
   nítida, e não com sombra. */
html.oab-dark #mensagens-sistema li {
    background: var(--oab-surface-2) !important;
    border-top-color: var(--oab-border-2) !important;
    border-right-color: var(--oab-border-2) !important;
    border-bottom-color: var(--oab-border-2) !important;
    color: var(--oab-texto) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5) !important;
}
html.oab-dark #mensagens-sistema .toast-close {
    color: var(--oab-texto-3) !important;
}
html.oab-dark #mensagens-sistema .toast-close:hover {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto) !important;
}
/* Fallback: telas que não carregam o sidebar-modern caem no #mensagens-sistema do
   css.css, que pinta o li inteiro com cor pastel e texto escuro. */
html.oab-dark #mensagens-sistema-popup li,
html.oab-dark .modal-body .message li {
    background-color: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}

/* ============ LOADER (statusDialog) ============ */

html.oab-dark .ui-dialog.oab-loader-dialog .ui-dialog-content {
    background: rgba(30, 33, 38, .98) !important;
    border-color: rgba(255, 255, 255, .06) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6),
                0 6px 16px rgba(236, 93, 79, .22) !important;
}
html.oab-dark .oab-loader-text {
    color: var(--oab-texto-3);
}
/* As letras O-A-B recebem cor DENTRO da animação (keyframe oab-letter-bounce, que fixa
   #2c2c2c no repouso). Declaração estática não vence keyframe em execução, e redefinir
   o @keyframes original dependeria da ordem dos arquivos — então o escuro troca a
   animação por uma própria. Mesma curva, mesma duração, só as cores mudam. */
html.oab-dark .oab-loader-letter {
    color: var(--oab-texto);
    animation-name: oab-letter-bounce-escuro;
}
@keyframes oab-letter-bounce-escuro {
    0%, 65%, 100% {
        transform: translateY(0) scale(1);
        color: #e8eaed;
        text-shadow: none;
    }
    32% {
        transform: translateY(-16px) scale(1.1);
        color: #ff7c6e;
        text-shadow: 0 8px 18px rgba(236, 93, 79, .45);
    }
}

/* ============ TELA DE VÍDEO INSTRUTIVO (templateVideos.xhtml do externo) ============
   A barra do topo é um <style> inline do template, com fundo branco fixo — no escuro
   ficava uma faixa clara atravessando o alto da tela. A borda inferior usa longhand de
   propósito: a folha clara declara `border-bottom` no atalho, e sobrescrever só a cor
   preserva a espessura de 1px.

   A logo aparece aqui pelo mesmo par de <img> por tema usado na sidebar (ver "LOGO POR
   TEMA"); nesta barra nada compete com o display:none inline do gêmeo, então as regras
   genéricas de troca já resolvem. */
html.oab-dark .video-topbar {
    background: var(--oab-surface);
    border-bottom-color: var(--oab-border);
}

/* ============ PAINEL DE VÍDEOS (videosSidebar.xhtml — estilos inline lá) ============
   O cabeçalho e o FAB são coral cheio e continuam iguais; muda a lista, que era branca.

   ATENÇÃO ao seletor: o item da lista é `.oab-videos-lista a` (um <a> com <strong> e
   <small> dentro), NÃO existe classe `.oab-videos-item` — só `-item-play`, `-item-texto`
   e `-item-seta`. A primeira versão desta seção mirou a classe inexistente, nada foi
   sobrescrito, e no escuro o título ficava #1a1a1a sobre painel escuro com hover creme.

   O `:hover` precisa citar `.oab-videos-lista` para chegar a (0,3,2): a regra genérica
   `html.oab-dark a:hover` desta folha é (0,2,2) e venceria o `.oab-videos-lista a:hover`
   original (0,2,1), trocando o texto por azul claro. Auditado: o painel de vídeos é o
   único lugar do sistema onde aquela regra genérica atropela um hover específico.

   A borda do painel vai para --oab-border-2 pelo mesmo motivo do toast: sombra preta
   não comunica elevação sobre fundo escuro, e a borda clara original (#ececec) virava
   um anel aceso em volta do painel. */

html.oab-dark .oab-videos-panel {
    background: var(--oab-surface) !important;
    border-color: var(--oab-border-2) !important;
}
html.oab-dark .oab-videos-lista a {
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-videos-lista a:hover,
html.oab-dark .oab-videos-lista a:focus-visible {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-texto) !important;
}
/* O título é <strong>: sem isto ele cairia na regra `strong { color: #403D39 }` do
   theme.css. O `inherit` global de <strong> já resolve, e aqui fica explícito porque
   é o texto que o usuário relatou não conseguir ler. */
html.oab-dark .oab-videos-item-texto strong {
    color: inherit !important;
}
html.oab-dark .oab-videos-item-texto small {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-videos-item-play {
    background: var(--oab-coral-suave) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .oab-videos-lista a:hover .oab-videos-item-play,
html.oab-dark .oab-videos-lista a:focus-visible .oab-videos-item-play {
    background: var(--oab-coral-cheio) !important;
    color: #fff !important;
}
html.oab-dark .oab-videos-item-seta,
html.oab-dark .oab-videos-vazio {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-videos-lista a:hover .oab-videos-item-seta,
html.oab-dark .oab-videos-lista a:focus-visible .oab-videos-item-seta {
    color: var(--oab-coral) !important;
}
html.oab-dark .oab-videos-lista::-webkit-scrollbar-thumb {
    background: var(--oab-border-2) !important;
}
html.oab-dark .oab-videos-lista::-webkit-scrollbar-thumb:hover {
    background: var(--oab-texto-3) !important;
}

/* ============ MENU DE ÁREA DO EXTERNO (menuExterno.css) ============
   A home do externo está fora do escopo, mas os menus de área (Livros, Certidões,
   Cursos, Exame, Documentos) vivem dentro do templateBase e usam estas classes: se
   ficassem claros, seria um cartão branco dentro de uma sidebar escura. */

html.oab-dark .dashboard-header h2 {
    color: var(--oab-texto);
}
html.oab-dark .dashboard-header p,
html.oab-dark .dash-section-title {
    color: var(--oab-texto-2);
}
html.oab-dark .dash-section-title i {
    color: var(--oab-coral);
}
html.oab-dark .dash-section-title::after {
    background: linear-gradient(90deg, var(--oab-border) 0%, transparent 100%);
}
html.oab-dark .dash-card {
    background: var(--oab-surface);
    border-color: var(--oab-border);
}
/* No escuro o hover reagia SÓ na borda e na sombra. Duas causas, as duas de
   especificidade:

   - o fundo: `html.oab-dark .dash-section .dash-card` (mais adiante nesta folha, na seção
     do menuOABAdmin.css) é (0,3,1) e vem DEPOIS, então vencia qualquer hover (0,3,1) aqui.
     Citar `.dash-section` leva o hover a (0,4,1) e resolve. O par sem `.dash-section` fica
     como rede, para cartão que algum dia apareça fora de uma seção.
   - ícone e seta: `html.oab-dark .dash-card .card-icon` é (0,3,1) e o
     `.dash-card:hover .card-icon` do tema claro é (0,3,0) — a regra de REPOUSO do escuro
     vencia a de hover. Daí as regras de hover abaixo, em (0,4,1).

   Contraste conferido sobre --oab-coral-suave (#3a2622): título #e8eaed dá 11.8:1, seta
   #ff7c6e dá 5.7:1, e o branco sobre o ícone coral cheio dá 3.4:1 (elemento gráfico). */
html.oab-dark .dash-card:hover,
html.oab-dark .dash-card:focus-visible,
html.oab-dark .dash-section .dash-card:hover,
html.oab-dark .dash-section .dash-card:focus-visible {
    background: var(--oab-coral-suave);
    border-color: var(--oab-coral-cheio);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}
html.oab-dark .dash-card:focus-visible,
html.oab-dark .dash-section .dash-card:focus-visible {
    outline: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5),
                0 0 0 3px rgba(255, 124, 110, .35);
}
html.oab-dark .dash-card:hover .card-icon,
html.oab-dark .dash-card:focus-visible .card-icon {
    background: var(--oab-coral-cheio);
    color: #fff;
    box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}
html.oab-dark .dash-card:hover .card-arrow,
html.oab-dark .dash-card:focus-visible .card-arrow {
    color: var(--oab-coral);
}
html.oab-dark .dash-card .card-icon {
    background: var(--oab-coral-suave);
    color: var(--oab-coral);
}
html.oab-dark .dash-card .card-title {
    color: var(--oab-texto);
}
html.oab-dark .dash-card .card-info {
    color: var(--oab-texto-2);
}
html.oab-dark .dash-card .card-arrow {
    color: var(--oab-texto-3);
}
html.oab-dark .dash-empty {
    color: var(--oab-texto-2);
}
html.oab-dark .dash-empty i {
    color: var(--oab-border-2);
}
html.oab-dark .dash-empty strong {
    color: var(--oab-texto);
}
html.oab-dark .seccional-chip {
    background: var(--oab-surface);
    border-color: var(--oab-border);
    color: var(--oab-texto-2);
}
html.oab-dark .seccional-chip:hover {
    color: var(--oab-texto-2);
    border-color: var(--oab-coral-cheio);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
html.oab-dark .seccional-chip > i {
    color: var(--oab-coral);
}
html.oab-dark .seccional-chip strong {
    color: var(--oab-texto);
}
html.oab-dark .seccional-chip-trocar {
    background: var(--oab-coral-suave);
    color: var(--oab-coral);
}
html.oab-dark .dashboard-search input {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    color: var(--oab-texto);
}
html.oab-dark .dashboard-search i {
    color: var(--oab-texto-3);
}
html.oab-dark .fluxo-pet .fluxo-tabs {
    background: var(--oab-surface-2);
}
html.oab-dark .fluxo-pet .fluxo-tabs .nav-link {
    color: var(--oab-texto-2);
}
html.oab-dark .fluxo-pet .fluxo-tabs .nav-link:hover {
    color: var(--oab-coral);
}
html.oab-dark .fluxo-step {
    background: var(--oab-surface);
    border-color: var(--oab-border);
    border-top-color: var(--oab-border-2);
}
html.oab-dark .fluxo-step p {
    color: var(--oab-texto-2);
}
html.oab-dark .fluxo-step:not(:last-child)::after {
    color: var(--oab-border-2);
}
html.oab-dark .fluxo-num {
    background: var(--oab-texto-3);
}
html.oab-dark .fluxo-realm-chip {
    background: var(--oab-surface-3);
    color: var(--oab-texto-2);
}
html.oab-dark .fluxo-step-head {
    color: var(--oab-texto);
}

/* ============ ASSISTENTE DE IA (oabAdmin) ============
   O cabeçalho violeta é a assinatura do recurso e não muda; o corpo do modal e os
   blocos de apontamento, que eram claros, seguem a superfície escura. */

html.oab-dark .oab-ia-modal .modal-body,
html.oab-dark .oab-ia-footer {
    background: var(--oab-surface) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-metrica {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-metrica strong {
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-metrica span {
    color: var(--oab-texto-2) !important;
}
/* Mesmo cuidado do toast: o `border-color` daqui apagava a faixa de severidade que o
   .oab-ia-grupo carrega na borda esquerda (danger/warning/success/info/default). Três
   lados nomeados, esquerda preservada. Das cinco cores originais só o violeta do info
   reprova sobre fundo escuro (2.83:1); ele vira o mesmo violeta clareado que já uso no
   texto de IA (7.74:1). As outras quatro passam: 3.57 / 6.80 / 3.56 / 10.80. */
html.oab-dark .oab-ia-grupo {
    background: var(--oab-surface) !important;
    border-top-color: var(--oab-border) !important;
    border-right-color: var(--oab-border) !important;
    border-bottom-color: var(--oab-border) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-info {
    border-left-color: #c4a5f7 !important;
}
html.oab-dark .oab-ia-grupo > summary {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-grupo > summary:hover {
    background: var(--oab-surface-3) !important;
}
html.oab-dark .oab-ia-grupo-corpo {
    background: var(--oab-surface) !important;
}
html.oab-dark .oab-ia-grupo-chevron {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-ia-apontamento-descricao {
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-apontamento-observacao,
html.oab-dark .oab-ia-comparacao-rotulo {
    color: var(--oab-texto-2) !important;
}
html.oab-dark .oab-ia-comparacao-lado,
html.oab-dark .oab-ia-comparacao-texto {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}

/* ============ PRIMEFACES — RESTO ============ */

html.oab-dark .ui-widget-content,
html.oab-dark .ui-panel,
html.oab-dark .ui-outputpanel {
    background: transparent;
    color: var(--oab-texto);
}
html.oab-dark .ui-fileupload,
html.oab-dark .ui-fileupload-buttonbar,
html.oab-dark .ui-fileupload-content {
    background: var(--oab-surface-2) !important;
    border-color: var(--oab-border) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .ui-fileupload-files .ui-fileupload-row > div {
    color: var(--oab-texto) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .ui-tooltip .ui-tooltip-text {
    background: #0d0f12 !important;
    color: var(--oab-texto) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .ui-menu,
html.oab-dark .ui-menu .ui-menu-list,
html.oab-dark .ui-menuitem-link {
    background: var(--oab-surface) !important;
    color: var(--oab-texto) !important;
    border-color: var(--oab-border) !important;
}
html.oab-dark .ui-menuitem-link:hover,
html.oab-dark .ui-menuitem-link.ui-state-hover {
    background: var(--oab-surface-2) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .ui-menuitem-text,
html.oab-dark .ui-menuitem-icon {
    color: inherit !important;
}

/* ============================================================
   COBERTURA COMPLEMENTAR
   Vinda de uma varredura regra por regra das folhas claras: toda declaração que pinta
   fundo claro (luminância > 0.60) ou texto escuro (< 0.25) foi cruzada com esta folha.
   O que sobrou de verdade está aqui. Ficou de fora, de propósito, o que a varredura
   apontou mas não existe em nenhuma tela — .btn-neutral, .btn-simple, .off-canvas-sidebar,
   .navbar-toggle, .navbar-ct-*, .simple-text, .ct-label, .card-separator, .text-danger,
   .text-info, .text-primary, .input-group-addon, .stepwizard-*, .usuario-footer e o
   #aguarde antigo (substituído pelo .oab-loader). Também ficou de fora .ui-datepicker-prev
   e -next: o branco translúcido deles está sobre o cabeçalho coral, que não muda.
   ============================================================ */

/* ============ HEADING COM <small> (23 telas) ============ */

html.oab-dark h1 small, html.oab-dark h2 small, html.oab-dark h3 small,
html.oab-dark h4 small, html.oab-dark h5 small, html.oab-dark h6 small,
html.oab-dark h1 .small, html.oab-dark h2 .small, html.oab-dark h3 .small,
html.oab-dark h4 .small, html.oab-dark h5 .small, html.oab-dark h6 .small,
html.oab-dark .h1 small, html.oab-dark .h2 small, html.oab-dark .h3 small,
html.oab-dark .h4 small, html.oab-dark .h5 small, html.oab-dark .h6 small,
html.oab-dark .h1 .small, html.oab-dark .h2 .small, html.oab-dark .h3 .small,
html.oab-dark .h4 .small, html.oab-dark .h5 .small, html.oab-dark .h6 .small {
    color: var(--oab-texto-2) !important;
}

/* ============ DROPDOWN ============
   O Bootstrap 5.3 escureceria o dropdown sozinho, mas o theme.css fixa
   .dropdown-menu { background-color: #FFFCF5 } em cima da variável --bs-dropdown-bg,
   e cor fixa vence variável. Daí a necessidade de reafirmar aqui. */

html.oab-dark .dropdown-menu {
    background-color: var(--oab-surface) !important;
    border: 1px solid var(--oab-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45) !important;
}
html.oab-dark .dropdown-menu > li > a,
html.oab-dark .dropdown-menu > li > p,
html.oab-dark .dropdown-item {
    color: var(--oab-texto) !important;
}
html.oab-dark .dropdown-menu > li > a:hover,
html.oab-dark .dropdown-menu > li > a:focus,
html.oab-dark .dropdown-item:hover,
html.oab-dark .dropdown-item:focus {
    background-color: var(--oab-surface-2) !important;
    color: var(--oab-coral) !important;
}
html.oab-dark .dropdown-menu .divider {
    background-color: var(--oab-border) !important;
}
html.oab-dark .dropdown-menu .dropdown-header {
    color: var(--oab-texto-3) !important;
}

/* ============ TELAS ANTIGAS DO css.css ============ */

/* Aba flutuante da caixa de entrada (1 tela). O template.xhtml repete
   .conteudo-aba { background-color: white } num <style> inline — como aquele bloco fica
   no body, ele vem depois desta folha; ganhamos por especificidade, não por ordem. */
html.oab-dark .conteudo-aba {
    background: var(--oab-surface) !important;
    color: var(--oab-texto) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .45) !important;
}
html.oab-dark .caixa-entrada.active .aba {
    background-color: var(--oab-surface) !important;
}
html.oab-dark .caixa-entrada.active .aba a {
    color: var(--oab-texto-2) !important;
}
/* Reserva de nome: cartão do nome descartado e o selo de situação (2 telas). */
html.oab-dark .nome-descartado {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .nome-descartado .situacao-nome {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .callout {
    background-color: var(--oab-surface-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .num-protocolo h1.protocolo {
    color: var(--oab-texto) !important;
}

/* ============ CALLOUTS EM MAIÚSCULA (dev.css) ============
   .bs-callout-ERROR / -INFO / -WARN não aparecem no markup: a classe vem da severidade
   do h:messages. O -WARN já está coberto acima; estes dois fecham o trio. */

html.oab-dark .bs-callout-ERROR {
    background: var(--oab-vermelho-suave) !important;
    color: var(--oab-vermelho) !important;
}
html.oab-dark .bs-callout-INFO {
    background: #16303a !important;
    color: #7fd0e8 !important;
}
html.oab-dark .bs-callout h4 .fa,
html.oab-dark .alert h4 .fa,
html.oab-dark .bs-callout .fa {
    color: inherit !important;
}

/* ============ ÍCONE DO CARD DE DOWNLOAD ============
   O #d32f2f do ícone de PDF era vermelho sobre círculo branco; no escuro o círculo é
   --oab-surface-2 e o vermelho fechado ficaria surdo. */

html.oab-dark .oab-download-ready-icon .bi {
    color: #ff6f6a;
}

/* ============ ASSISTENTE DE IA — TOKENS ============
   Esta é a única folha do projeto que já usava custom properties. Redefinir os quatro
   tokens neutros aqui (:root é o próprio <html>, e html.oab-dark ganha dele) vira de uma
   vez a superfície, a borda e os dois níveis de texto em todo o arquivo.
   Os três violetas NÃO mudam: o cabeçalho do modal é um degradê com eles e texto branco
   em cima — clareá-los derrubaria o contraste do título. Onde o violeta é TEXTO, e não
   fundo, a troca é pontual, logo abaixo. */

html.oab-dark {
    --oab-ia-superficie: #1e2126;
    --oab-ia-borda: #3a3550;
    --oab-ia-texto: #e8eaed;
    --oab-ia-texto-suave: #b0b0be;
}

/* violeta como texto/ícone: precisa clarear para ser lido no escuro */
html.oab-dark .oab-ia-grupo.ia-grupo-info .oab-ia-grupo-icone,
html.oab-dark .oab-ia-comparacao-rotulo,
html.oab-dark .oab-ia-andamento-selo {
    color: #c4a5f7 !important;
}

/* superfícies brancas remanescentes do modal */
html.oab-dark .oab-ia-aviso,
html.oab-dark .oab-ia-andamento,
html.oab-dark .oab-ia-protocolo,
html.oab-dark .oab-ia-loading-rodape {
    background: var(--oab-surface-2) !important;
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-btn,
html.oab-dark a.oab-ia-btn,
html.oab-dark a.oab-ia-btn:visited {
    background: transparent !important;
    color: #c4a5f7 !important;
}
html.oab-dark .oab-ia-andamento-selo {
    background: linear-gradient(135deg, #2a1c3f 0%, #33234d 100%) !important;
    border-color: #453564 !important;
}
html.oab-dark .oab-ia-andamento-dica {
    background: #2a1c3f !important;
    border-color: #453564 !important;
    color: #c4a5f7 !important;
}
/* externo: "nenhuma diligência identificada" (selo verde) e o bloco "continuar sem assistente" */
html.oab-dark .oab-ia-andamento-selo.oab-ia-sucesso-selo {
    background: linear-gradient(135deg, #17342a 0%, #1c4034 100%) !important;
    border-color: #2f6b52 !important;
    color: #7fd9a8 !important;
}
html.oab-dark .oab-ia-sucesso h5 {
    color: #7fd9a8 !important;
}
html.oab-dark .oab-ia-continuar {
    border-top-color: var(--oab-ia-borda) !important;
}
/* faixa do assistente na barra de botões: fundo/borda vêm dos tokens; só o rótulo violeta clareia */
html.oab-dark .oab-ia-faixa-rotulo {
    color: #c4a5f7 !important;
}
html.oab-dark .oab-ia-comparacao-lado,
html.oab-dark .oab-ia-comparacao-dbe {
    background: var(--oab-surface-2) !important;
}
html.oab-dark .oab-ia-comparacao-texto {
    color: var(--oab-texto) !important;
}
html.oab-dark .oab-ia-comparacao-dbe .oab-ia-comparacao-rotulo {
    color: #5eded0 !important;
}
html.oab-dark .oab-ia-grupo-chevron {
    color: var(--oab-texto-3) !important;
}
html.oab-dark .oab-ia-grupo-corpo {
    border-top-color: var(--oab-border) !important;
}

/* Cabeçalhos de grupo por severidade: o tinte pastel viraria um borrão claro. Fica o
   mesmo matiz rebaixado, mesmo par de tinte/tinte-hover da versão clara. */
html.oab-dark .oab-ia-grupo.ia-grupo-danger > summary {
    background: var(--oab-vermelho-suave) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-danger > summary:hover {
    background: #46282d !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-warning > summary {
    background: var(--oab-amarelo-suave) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-warning > summary:hover {
    background: #40361a !important;
}
html.oab-dark .oab-ia-grupo > summary:hover {
    background: var(--oab-surface-3) !important;
}

/* Contadores e marcadores redondos: os dois usam o mesmo par tinte/texto por severidade. */
html.oab-dark .oab-ia-grupo-contador,
html.oab-dark .oab-ia-apontamento-marcador {
    background: var(--oab-surface-3) !important;
    color: var(--oab-texto-2) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-danger .oab-ia-grupo-contador,
html.oab-dark .ia-grupo-danger .oab-ia-apontamento-marcador {
    background: var(--oab-vermelho-suave) !important;
    color: var(--oab-vermelho) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-warning .oab-ia-grupo-contador,
html.oab-dark .ia-grupo-warning .oab-ia-apontamento-marcador {
    background: var(--oab-amarelo-suave) !important;
    color: var(--oab-amarelo) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-success .oab-ia-grupo-contador,
html.oab-dark .ia-grupo-success .oab-ia-apontamento-marcador {
    background: var(--oab-verde-suave) !important;
    color: var(--oab-verde) !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-info .oab-ia-grupo-contador,
html.oab-dark .ia-grupo-info .oab-ia-apontamento-marcador {
    background: #2a1c3f !important;
    color: #c4a5f7 !important;
}

/* Ícones e números das métricas por severidade. */
html.oab-dark .oab-ia-grupo.ia-grupo-danger .oab-ia-grupo-icone,
html.oab-dark .oab-ia-metrica-nok strong,
html.oab-dark .oab-ia-aviso.alert-danger,
html.oab-dark .oab-ia-aviso.alert-danger i {
    color: var(--oab-vermelho) !important;
}
html.oab-dark .oab-ia-aviso.alert-danger {
    background: var(--oab-vermelho-suave) !important;
    border-color: #6b2b33 !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-warning .oab-ia-grupo-icone,
html.oab-dark .oab-ia-metrica-alerta strong,
html.oab-dark .oab-ia-aviso.alert-warning,
html.oab-dark .oab-ia-aviso.alert-warning i {
    color: var(--oab-amarelo) !important;
}
html.oab-dark .oab-ia-aviso.alert-warning {
    background: var(--oab-amarelo-suave) !important;
    border-color: #5c4a15 !important;
}
html.oab-dark .oab-ia-grupo.ia-grupo-success .oab-ia-grupo-icone,
html.oab-dark .oab-ia-metrica-ok strong {
    color: var(--oab-verde) !important;
}
html.oab-dark .oab-ia-metrica-neutra strong,
html.oab-dark .oab-ia-grupo.ia-grupo-default .oab-ia-grupo-icone {
    color: var(--oab-texto-2) !important;
}

/* ============================================================
   PÁGINA INICIAL DO ADMIN (menuOABAdmin.css)
   Esta folha ficou fora da minha primeira varredura — é linkada só por
   pages/menuOABAdmin.xhtml, não pelo template, e por isso não apareceu na lista de
   folhas auditadas. Resultado: os 11 painéis .dash-section continuaram claros, com os
   cartões escuros dentro. As classes .dash-card, .dash-section-title, .dash-empty,
   .dashboard-search e .dashboard-header têm o mesmo nome no menuExterno.css e já
   estavam cobertas — o que faltava era o que só existe aqui.

   HIERARQUIA DE SUPERFÍCIE: no claro a página é #f4f3ef, o painel #fbfaf7 e o cartão
   #fff — cada passo mais claro que o anterior. O escuro mantém a mesma progressão
   (--oab-bg → --oab-painel → --oab-surface-2), senão painel e cartão viram um bloco
   chapado só. A separação fina fica na borda, exatamente como no claro (lá #fbfaf7 e
   #fff diferem em 1.05:1 — quem separa é o #ececec da borda do cartão).
   ============================================================ */

html.oab-dark {
    /* superfície do painel de agrupamento: entre a página e o cartão, de propósito */
    --oab-painel: #1a1d22;
}

html.oab-dark .dash-section {
    background: var(--oab-painel) !important;
    border-color: var(--oab-border) !important;
    /* a barra coral da esquerda é o que identifica o grupo — fica */
    border-left-color: var(--oab-coral-cheio) !important;
}
html.oab-dark .dash-section .dash-card {
    background: var(--oab-surface-2);
}

/* .banner-aviso divide a regra com .banner-instabilidade (mesmo bloco, separados por
   vírgula); cobrir só o primeiro seletor deixava este de fora. */
html.oab-dark .banner-aviso {
    background: var(--oab-amarelo-suave);
    border-color: #5c4a15;
    border-left-color: var(--oab-amarelo);
    color: var(--oab-amarelo);
}
html.oab-dark .banner-aviso i,
html.oab-dark .banner-instabilidade i {
    color: var(--oab-amarelo);
}

/* ============ BOTÃO DE COPIAR (valor copiável) ============
   O repouso é neutro como no claro — o botão é atalho, não ação do fluxo. As
   confirmações usam os tokens semânticos: o verde e o amarelo claros ficariam
   apagados sobre a superfície escura. */
html.oab-dark .oab-btn-copiar {
    background: var(--oab-surface-2);
    border-color: var(--oab-border-2);
    color: var(--oab-texto-3);
}
html.oab-dark .oab-btn-copiar:hover {
    background: var(--oab-coral-suave);
    border-color: var(--oab-coral);
    color: var(--oab-coral);
}
html.oab-dark .oab-btn-copiar.copiado {
    background: var(--oab-verde-suave);
    border-color: var(--oab-verde);
    color: var(--oab-verde);
}
html.oab-dark .oab-btn-copiar.falhou {
    background: var(--oab-amarelo-suave);
    border-color: var(--oab-amarelo);
    color: var(--oab-amarelo);
}

/* ============ VALOR DA GUIA E CARTÃO DE CONCLUSÃO (estilos inline nas telas) ============
   Emitir Guia de Pagamento, Solicitar Certidão e as conclusões de Registro Digital,
   Livro e Exame de Ordem definem estas classes num <style> dentro da própria tela, com
   texto escuro fixo (#2a2a2a, #555, o verde #1b5e20) que sumia sobre o card escuro. O
   prefixo html.oab-dark basta para vencer: o <style> da tela não usa !important.

   @media screen de propósito: na impressão valem as cores claras originais da tela, sem
   precisar repetir cada uma no bloco de IMPRESSÃO abaixo. */

@media screen {
    html.oab-dark .guia-valor-linha .guia-valor,
    html.oab-dark .certidao-valor,
    html.oab-dark .conclusao-card h3 {
        color: var(--oab-texto);
    }
    html.oab-dark .guia-desconto {
        color: var(--oab-vermelho);
    }
    html.oab-dark .guia-valor-final {
        color: var(--oab-verde);
    }
    html.oab-dark .conclusao-card p {
        color: var(--oab-texto-2);
    }
    /* Valor, vencimento e protocolo em negrito: no claro o <strong> é mais escuro que o
       parágrafo; aqui é mais claro, para manter o destaque. */
    html.oab-dark .conclusao-card p strong {
        color: var(--oab-texto);
    }
    /* Cita o <p> para chegar a (0,2,3) e vencer também o `html.oab-dark a:hover` (0,2,2),
       que trocaria o coral por azul no hover. */
    html.oab-dark .conclusao-card p a {
        color: var(--oab-coral);
    }
    html.oab-dark .conclusao-card .conclusao-protocolo {
        color: var(--oab-coral);
        background: var(--oab-coral-suave);
        border-color: #6b3a33;
    }
}

/* ============ IMPRESSÃO ============
   Sem isto um Ctrl+P no tema escuro sai com fundo preto: gasta tinta e o texto claro
   some no papel. Força o essencial de volta para claro na mídia de impressão. */

@media print {
    html.oab-dark { color-scheme: light; }
    html.oab-dark body,
    html.oab-dark .main-panel,
    html.oab-dark .card,
    html.oab-dark .oab-card,
    html.oab-dark .oab-table,
    html.oab-dark .oab-table thead th,
    html.oab-dark .oab-table tbody td,
    html.oab-dark .ui-datatable.oab-table table,
    html.oab-dark .ui-datatable.oab-table thead th,
    html.oab-dark .ui-datatable.oab-table tbody td {
        background: #fff !important;
        color: #1a1a1a !important;
        box-shadow: none !important;
    }
    html.oab-dark .oab-page,
    html.oab-dark .oab-page-header h2,
    html.oab-dark .oab-page-header p,
    html.oab-dark .oab-form-group label {
        color: #1a1a1a !important;
    }
    /* No papel vale a logo NORMAL: a variante escura tem o nome da seccional em tom
       claro, que sairia invisível sobre o branco. */
    html.oab-dark img.oab-logo-claro,
    html.oab-dark .sidebar .logo img.oab-logo-claro {
        display: block !important;
    }
    html.oab-dark img.oab-logo-escuro,
    html.oab-dark .sidebar .logo img.oab-logo-escuro {
        display: none !important;
    }
}