/* =============================================================
   ERLSoft — camada única de cor
   Carregado por ÚLTIMO em includes/header.php, depois do select2.

   POR QUE ESTE ARQUIVO EXISTE
   O template trazia SETE valores para "a cor primária":
     #222c33   (--bs-primary)            #3E1FDC   (botão, app-extend.css)
     #3E1FDD   (sidebar, app.css)        62,31,220 (rgba, 18 pontos)
     67,94,190 (--bs-primary-rgb)        36,42,83  (--bs-link-color-rgb)
     #3C8DBC   (hover do .btn-default)
   #3E1FDC e #3E1FDD diferiam por UM dígito — erro de digitação, não
   decisão de design. Aqui todos convergem para #2563eb, que já era o
   --md-blue de components.css (cards, heroes).

   REGRA DE ESPECIFICIDADE — ler antes de editar:
   app-dark.css e app-extend.css declaram componentes como
   `html[data-bs-theme=dark] X`, especificidade (0,1,2). Uma regra aqui
   escrita só com classe é (0,1,1) e PERDE no tema escuro — ordem de
   carregamento não salva, especificidade decide antes. Toda regra que
   precise vencer isso leva o bloco irmão com o mesmo prefixo
   `html[data-bs-theme="dark"]`. Não usar !important: basta empatar o
   prefixo, e este arquivo carrega depois. As exceções estão marcadas
   caso a caso.

   DOIS MECANISMOS DE TEMA CONVIVEM — ler antes de escrever regra nova:
   `data-bs-theme` no <html> é setado por assets/static/js/initTheme.js,
   no topo do <body>, mas SÓ nas telas logadas (o include está dentro do
   bloco user_logged_in). A classe `.dark-mode` no <body> é adicionada
   por assets/static/js/components/dark.js:20, carregado no RODAPÉ, em
   todas as telas. As duas coisas valem; um seletor `.dark-mode` do
   app-extend.css casa de verdade e precisa ser empatado, não ignorado.

   Os três CSS compilados NÃO são editados. O hex antigo continua
   escrito neles; o que muda é a cor computada.
   ============================================================= */

/* ── Tokens ──────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
    --erl-marca:          #2563eb;   /* = --md-blue de components.css */
    --erl-marca-rgb:      37, 99, 235;
    --erl-marca-hover:    #1d4ed8;   /* já usado no gradiente do .md-hero */
    --erl-marca-ativo:    #1e40af;
    --erl-marca-tint:     #eff6ff;   /* = --md-blue-light */
    --erl-marca-tint-mid: #bfdbfe;   /* = --md-blue-mid */
    --erl-texto:          #1e293b;   /* = --md-slate */
    --erl-superficie:     #ffffff;

    /* Logo: as duas classes TROCAM de papel entre os temas — no claro a
       marca é azul e o corpo é escuro; no escuro a marca fica quase
       branca e o corpo assume o azul. Não é a mesma cor com ajuste de
       tom, por isso são tokens próprios e não reuso de --erl-marca. */
    --erl-logo-marca:     #2563eb;
    --erl-logo-corpo:     var(--erl-texto);

    /* Sidebar: cor fixa, a MESMA nos dois temas — por isso só aqui, sem
       par no bloco escuro. Fundo = slate (o --erl-texto do claro); texto
       em branco translúcido; acento #3b82f6 (ícone, barra do submenu);
       pílula do ativo #2563eb, que segura texto branco em 5.17:1. */
    --erl-sidebar-fundo:        #1e293b;
    --erl-sidebar-texto:        rgba(255, 255, 255, 0.88);
    --erl-sidebar-texto-fraco:  rgba(255, 255, 255, 0.55);
    --erl-sidebar-submenu:      rgba(255, 255, 255, 0.72);
    --erl-sidebar-hover:        rgba(255, 255, 255, 0.08);
    --erl-sidebar-borda:        rgba(255, 255, 255, 0.12);
    --erl-sidebar-acento:       #3b82f6;
    --erl-sidebar-ativo:        #2563eb;
    --erl-sidebar-logo:         #f1f2f2;

    /* Botões fora da marca. Fill com texto branco no AA (4.5:1):
       perigo 4.83, sucesso 5.02. Mesmos nos dois temas. */
    --erl-perigo:               #dc2626;
    --erl-perigo-hover:         #b91c1c;
    --erl-perigo-rgb:           220, 38, 38;
    --erl-sucesso:              #15803d;
    --erl-sucesso-hover:        #166534;
    --erl-sucesso-rgb:          21, 128, 61;
    --erl-borda-botao:          #cbd5e1;   /* contorno do botão secundário */

    /* Fill dos botões com texto branco (primário, "+", hover do
       contorno): o MESMO azul nos dois temas. --erl-marca clareia no
       escuro (#3b82f6) para texto e ícone sobre fundo escuro, mas como
       fundo de texto branco dá 3.68:1 e reprova o AA. #2563eb dá 5.17
       com o branco e ainda 3.18 contra o card escuro #1e1e2d (3.50
       contra a página). Hover e ativo escurecem, nunca clareiam. */
    --erl-botao:                #2563eb;
    --erl-botao-rgb:            37, 99, 235;
    --erl-botao-hover:          #1d4ed8;
    --erl-botao-ativo:          #1e40af;
}

html[data-bs-theme="dark"] {
    --erl-marca:          #3b82f6;   /* um passo mais claro: #2563eb sobre
                                        #1e1e2d fica abaixo de 3:1 */
    --erl-marca-rgb:      59, 130, 246;
    --erl-marca-hover:    #60a5fa;
    --erl-marca-ativo:    #2563eb;
    --erl-marca-tint:     #1e3a5f;
    --erl-marca-tint-mid: #1e40af;
    --erl-texto:          #e9eff5;
    --erl-superficie:     #1e1e2d;

    --erl-logo-marca:     #f1f2f2;
    --erl-logo-corpo:     var(--erl-marca);

    --erl-borda-botao:    #475569;
}

/* Alias: components.css declara --md-blue com o mesmo valor por conta
   própria. Aqui ele passa a DERIVAR do token, para que a cor tenha uma
   origem só. Este arquivo carrega depois de components.css, mesma
   especificidade, então vence. */
:root,
[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --md-blue: var(--erl-marca);
}

/* ── Remapeamento do Bootstrap ───────────────────────────────── */
/* --bs-primary era #222c33 e --bs-primary-rgb era 67,94,190: cores
   DIFERENTES, então a mesma "primária" saía quase-preta ou azul
   conforme a propriedade usasse alpha. Mesma divergência em
   --bs-link-color (#222c33) contra --bs-link-color-rgb (36,42,83).
   As variantes -rgb não aceitam var() composto — ficam literais em
   cada tema. */
:root,
[data-bs-theme="light"] {
    --bs-primary:               var(--erl-marca);
    --bs-primary-rgb:           37, 99, 235;
    --bs-link-color:            var(--erl-marca);
    --bs-link-color-rgb:        37, 99, 235;
    --bs-link-hover-color:      var(--erl-marca-hover);
    --bs-link-hover-color-rgb:  29, 78, 216;
}
html[data-bs-theme="dark"] {
    --bs-primary:               var(--erl-marca);
    --bs-primary-rgb:           59, 130, 246;
    --bs-link-color:            var(--erl-marca);
    --bs-link-color-rgb:        59, 130, 246;
    --bs-link-hover-color:      var(--erl-marca-hover);
    --bs-link-hover-color-rgb:  96, 165, 250;
}

/* ── Botões ──────────────────────────────────────────────────── */
/* .btn-default é o primário do sistema (12 views). Vive em
   app-extend.css:297 e :318 — o par light/dark é obrigatório, o bloco
   dark de lá é (0,1,2) e venceria a versão sem prefixo.
   Redeclarado por inteiro, e não só --bs-btn-bg, porque o hover
   (#3C8DBC, azul-aço) e o anel de foco (60,153,110, VERDE) eram de
   outra paleta ainda. */
.btn-default,
html[data-bs-theme="dark"] .btn-default,
.btn-primary,
html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--erl-botao);
    --bs-btn-border-color:          var(--erl-botao);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--erl-botao-hover);
    --bs-btn-hover-border-color:    var(--erl-botao-hover);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--erl-botao-ativo);
    --bs-btn-active-border-color:   var(--erl-botao-ativo);
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           var(--erl-botao);
    --bs-btn-disabled-border-color: var(--erl-botao);
    --bs-btn-focus-shadow-rgb:      var(--erl-botao-rgb);
}

/* app-extend.css:315 usa !important — só empatando. */
.subtitle,
html[data-bs-theme="dark"] .subtitle {
    color: var(--erl-marca) !important;
}

/* ── Sidebar: fundo slate fixo ───────────────────────────────── */
/* A sidebar tem a mesma cor nos dois temas (--erl-sidebar-*, em :root).
   Decisão de 2026-10-05: #1e293b, nas condições do DIVIDA_TECNICA.md
   ("Sidebar escura"): pílula do item ativo mantida, acento #3b82f6, e o
   submenu ativo marcado por barra e peso, sem matiz nova.

   Cada regra vem em trio: normal, `html[data-bs-theme="dark"]` e
   `.dark-mode` (o dark.js põe a classe no <body>, e o app-extend.css tem
   regras `.dark-mode #sidebar …` no submenu e no rodapé). O prefixo
   #sidebar põe todas no nível de id, acima das do app.css/app-dark.css;
   contra as do app-extend.css, que também têm #sidebar, o empate se
   resolve pela ordem: este arquivo carrega por último. */

#sidebar .sidebar-wrapper,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper,
.dark-mode #sidebar .sidebar-wrapper {
    background-color: var(--erl-sidebar-fundo);
}

/* Logo inteiro claro: a marca e a bolinha (.cls-1/.cls-2) leem os tokens
   --erl-logo-*, aqui fixados para a sidebar. Login, recuperar e trocar
   senha não têm sidebar e seguem com os tokens de tema. */
#sidebar .sidebar-wrapper .sidebar-header,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .sidebar-header,
.dark-mode #sidebar .sidebar-wrapper .sidebar-header {
    color: var(--erl-sidebar-logo);
    --erl-logo-marca: var(--erl-sidebar-logo);
    --erl-logo-corpo: var(--erl-sidebar-logo);
}

#sidebar .sidebar-wrapper .sidebar-header a,
#sidebar .sidebar-wrapper .sidebar-toggler a,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .sidebar-header a,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .sidebar-toggler a,
.dark-mode #sidebar .sidebar-wrapper .sidebar-header a,
.dark-mode #sidebar .sidebar-wrapper .sidebar-toggler a {
    color: inherit;
}

#sidebar .sidebar-wrapper .menu .sidebar-title,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-title,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-title {
    color: var(--erl-sidebar-texto-fraco);
}

#sidebar .sidebar-wrapper .menu .sidebar-link,
#sidebar .sidebar-wrapper .menu .sidebar-link span,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link span,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link span {
    color: var(--erl-sidebar-texto);
}

#sidebar .sidebar-wrapper .menu .sidebar-link i,
#sidebar .sidebar-wrapper .menu .sidebar-link svg,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link i,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link svg,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link i,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link svg {
    color: var(--erl-sidebar-acento);
}

#sidebar .sidebar-wrapper .menu .sidebar-link:hover,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link:hover,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link:hover {
    background-color: var(--erl-sidebar-hover);
}

#sidebar .sidebar-wrapper .menu .sidebar-link:hover,
#sidebar .sidebar-wrapper .menu .sidebar-link:hover span,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link:hover,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-link:hover span,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link:hover,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-link:hover span {
    color: #fff;
}

#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    background-color: var(--erl-sidebar-ativo);
}

#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link svg,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link svg,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link svg {
    color: #fff;
}

/* (1,4,1) + !important em app-extend.css:289 — repetir o seletor
   inteiro com !important é a única saída (exceção já existente). */
#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Setas: o app-extend.css desenha com borda em currentColor. */
#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link::after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub > .submenu-link::after,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link::after,
html[data-bs-theme="dark"] #sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub > .submenu-link::after,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link::after,
.dark-mode #sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub > .submenu-link::after {
    color: var(--erl-sidebar-texto-fraco);
}

#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after,
#sidebar .sidebar-wrapper .menu .sidebar-item.active.has-sub > .sidebar-link::after,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
html[data-bs-theme="dark"] #sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .sidebar-item.active.has-sub > .sidebar-link::after,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
.dark-mode #sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after,
.dark-mode #sidebar .sidebar-wrapper .menu .sidebar-item.active.has-sub > .sidebar-link::after {
    color: #fff;
}

/* Submenu */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a {
    color: var(--erl-sidebar-submenu);
}

#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover {
    color: #fff;
    background-color: var(--erl-sidebar-hover);
}

#sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: #fff;
    font-weight: 700;
    background-color: var(--erl-sidebar-hover);
    box-shadow: inset 3px 0 0 var(--erl-sidebar-acento);
}

#sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link,
#sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(.submenu-item.active) > .submenu-link,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(.submenu-item.active) > .submenu-link,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(.submenu-item.active) > .submenu-link {
    color: #fff;
    background-color: var(--erl-sidebar-hover);
}

/* Scrollbar do menu */
#sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb,
.dark-mode #sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb {
    background: var(--erl-sidebar-borda);
}

#sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb:hover,
.dark-mode #sidebar .sidebar-wrapper .sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: var(--erl-sidebar-texto-fraco);
}

/* ── Rodapé do usuário (dentro da sidebar) ───────────────────── */
/* O dropdown que abre dele continua um painel claro/escuro do tema:
   as regras de .dropdown-menu ficam como estavam. */
#sidebar .sidebar-user,
html[data-bs-theme="dark"] #sidebar .sidebar-user,
.dark-mode #sidebar .sidebar-user {
    background: transparent;
    border-top-color: var(--erl-sidebar-borda);
}

#sidebar .sidebar-user-trigger,
#sidebar .sidebar-user-caret,
html[data-bs-theme="dark"] #sidebar .sidebar-user-trigger,
html[data-bs-theme="dark"] #sidebar .sidebar-user-caret,
.dark-mode #sidebar .sidebar-user-trigger,
.dark-mode #sidebar .sidebar-user-caret {
    color: var(--erl-sidebar-texto);
}

#sidebar .sidebar-user-trigger:hover,
#sidebar .sidebar-user-trigger[aria-expanded="true"],
html[data-bs-theme="dark"] #sidebar .sidebar-user-trigger:hover,
html[data-bs-theme="dark"] #sidebar .sidebar-user-trigger[aria-expanded="true"],
.dark-mode #sidebar .sidebar-user-trigger:hover,
.dark-mode #sidebar .sidebar-user-trigger[aria-expanded="true"] {
    background-color: var(--erl-sidebar-hover);
    color: #fff;
}

#sidebar .sidebar-user-trigger[aria-expanded="true"] .sidebar-user-caret,
html[data-bs-theme="dark"] #sidebar .sidebar-user-trigger[aria-expanded="true"] .sidebar-user-caret,
.dark-mode #sidebar .sidebar-user-trigger[aria-expanded="true"] .sidebar-user-caret {
    color: #fff;
}

#sidebar .sidebar-user-name,
html[data-bs-theme="dark"] #sidebar .sidebar-user-name,
.dark-mode #sidebar .sidebar-user-name {
    color: #fff;
}

#sidebar .sidebar-user-type,
html[data-bs-theme="dark"] #sidebar .sidebar-user-type,
.dark-mode #sidebar .sidebar-user-type {
    color: var(--erl-sidebar-texto-fraco);
}

#sidebar .sidebar-user-avatar,
html[data-bs-theme="dark"] #sidebar .sidebar-user-avatar,
.dark-mode #sidebar .sidebar-user-avatar {
    box-shadow: 0 0 0 2px var(--erl-sidebar-borda);
}

/* ── Botão de recolher ──────────────────────────────────────── */
/* app-extend.css:785 declara o hover como par `.dark-mode …` +
   `html[data-bs-theme=dark] …`. Os DOIS casam em tempo de execução —
   a classe .dark-mode é adicionada de fato pelo dark.js:20 — então os
   dois precisam ser empatados aqui, ou o ramo não empatado mantém a
   cor antiga no tema escuro. */
.sidebar-collapse-btn:hover,
.dark-mode .sidebar-collapse-btn:hover,
html[data-bs-theme="dark"] .sidebar-collapse-btn:hover {
    background: var(--erl-marca);
    color: #fff;
}
.sidebar-collapse-btn:hover {
    box-shadow: 0 4px 12px rgba(var(--erl-marca-rgb), 0.30);
}

/* Dropdown do rodapé: painel do tema, não da sidebar. */
.sidebar-user .dropdown-menu .dropdown-item:hover,
.sidebar-user .dropdown-menu .dropdown-item:focus {
    background-color: rgba(var(--erl-marca-rgb), 0.08);
    color: var(--erl-marca);
}

/* ── Sidebar recolhida ───────────────────────────────────────── */
/* O ativo recolhido no app-extend.css é (1,4,1) e ganha da pílula geral;
   o flyout do submenu continua painel claro/escuro do tema. */
body.sidebar-collapsed #sidebar .sidebar-link:hover {
    background-color: var(--erl-sidebar-hover);
    color: #fff;
}
body.sidebar-collapsed #sidebar .sidebar-item.active > .sidebar-link {
    background-color: var(--erl-sidebar-ativo);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
body.sidebar-collapsed #sidebar .sidebar-item.has-sub:hover > .submenu .submenu-link:hover {
    background: rgba(var(--erl-marca-rgb), 0.08);
    color: var(--erl-marca);
}

/* ── Logo ────────────────────────────────────────────────────── */
/* O logo compacto da sidebar usa --erl-marca, NÃO --erl-logo-marca: o
   texto "EC" dentro dele é fill="#fff" fixo no SVG, então o disco
   precisa continuar sendo o azul nos dois temas. Com --erl-logo-marca
   ele ficaria quase branco no escuro, e o texto sumiria.
   currentColor porque custom property em atributo de apresentação de
   SVG não resolve de forma confiável. */
.sidebar-logo-icon {
    color: var(--erl-marca);
}

/* ── Demais pontos ───────────────────────────────────────────── */
.kpi-card:hover {
    border-color: rgba(var(--erl-marca-rgb), 0.18);
}

.stats-icon.purple,
html[data-bs-theme="dark"] .stats-icon.purple {
    background-color: var(--erl-marca);
}

/* Select2: só o tema escuro fixava a cor. O arquivo select2-custom.css
   é o último <link> antes deste. */
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--erl-marca);
}

/* Barra de carregamento AJAX. O template usa `#spinner .spinner`,
   (1,1,0) — a versão só por classe perderia. Como o elemento é
   display:none até uma chamada AJAX rodar, varredura de DOM não passa
   por ele: conferir manualmente. */
#spinner .spinner {
    background: linear-gradient(
        90deg,
        rgba(var(--erl-marca-rgb), 0) 0%,
        rgba(var(--erl-marca-rgb), 1) 50%,
        rgba(var(--erl-marca-rgb), 0) 100%
    );
    box-shadow: 0 0 10px rgba(var(--erl-marca-rgb), 0.6);
}

/* ── Cabeçalho de tabela ─────────────────────────────────────── */
/* Mesma cor da sidebar, fixa nos dois temas. Vale para as tabelas da
   tela (views e as montadas no JS), todas com .table; os PDFs oficiais
   não carregam este arquivo. app-dark.css tem
   `html[data-bs-theme=dark] .table thead th`, (0,2,3): o irmão escuro
   empata e vence pela ordem. O cabeçalho do card de alertas do
   dashboard tem seletor próprio, mais forte, e fica como está. */
.table > thead th,
.table > thead td,
.dataTable-table > thead th,
html[data-bs-theme="dark"] .table > thead th,
html[data-bs-theme="dark"] .table > thead td,
html[data-bs-theme="dark"] .dataTable-table > thead th {
    background-color: var(--erl-sidebar-fundo);
    color: #fff;
    border-color: var(--erl-sidebar-fundo);
}

/* ── Botões fora da marca ────────────────────────────────────── */
/* Perigo e sucesso pelas variáveis por botão do Bootstrap, como o
   .btn-default lá em cima. O disabled entra junto: o "Inserir
   Medicamento" de /saida_receitas nasce desabilitado e o fundo dele
   sai de --bs-btn-disabled-bg. */
.btn-danger,
html[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--erl-perigo);
    --bs-btn-border-color:          var(--erl-perigo);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--erl-perigo-hover);
    --bs-btn-hover-border-color:    var(--erl-perigo-hover);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--erl-perigo-hover);
    --bs-btn-active-border-color:   var(--erl-perigo-hover);
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           var(--erl-perigo);
    --bs-btn-disabled-border-color: var(--erl-perigo);
    --bs-btn-focus-shadow-rgb:      var(--erl-perigo-rgb);
}

.btn-success,
html[data-bs-theme="dark"] .btn-success {
    --bs-btn-color:                 #fff;
    --bs-btn-bg:                    var(--erl-sucesso);
    --bs-btn-border-color:          var(--erl-sucesso);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--erl-sucesso-hover);
    --bs-btn-hover-border-color:    var(--erl-sucesso-hover);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--erl-sucesso-hover);
    --bs-btn-active-border-color:   var(--erl-sucesso-hover);
    --bs-btn-disabled-color:        #fff;
    --bs-btn-disabled-bg:           var(--erl-sucesso);
    --bs-btn-disabled-border-color: var(--erl-sucesso);
    --bs-btn-focus-shadow-rgb:      var(--erl-sucesso-rgb);
}

.btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color:                 var(--erl-marca);
    --bs-btn-border-color:          var(--erl-marca);
    --bs-btn-hover-color:           #fff;
    --bs-btn-hover-bg:              var(--erl-botao);
    --bs-btn-hover-border-color:    var(--erl-botao);
    --bs-btn-active-color:          #fff;
    --bs-btn-active-bg:             var(--erl-botao-ativo);
    --bs-btn-active-border-color:   var(--erl-botao-ativo);
    --bs-btn-focus-shadow-rgb:      var(--erl-marca-rgb);
}

/* Secundário (Cancelar) em contorno. app.css:22305 e app-dark.css:9178
   fixam fundo e texto em `.btn.btn-light-secondary` — precisa do mesmo
   seletor, não das variáveis. A borda usa a do .btn (1px transparente)
   trocando só a cor. */
.btn.btn-light-secondary,
.btn.btn-outline-secondary,
html[data-bs-theme="dark"] .btn.btn-light-secondary,
html[data-bs-theme="dark"] .btn.btn-outline-secondary {
    background-color: transparent;
    color: var(--erl-texto);
    --bs-btn-border-color: var(--erl-borda-botao);
    --bs-btn-hover-border-color: var(--erl-borda-botao);
    --bs-btn-active-border-color: var(--erl-borda-botao);
}
.btn.btn-light-secondary:hover,
.btn.btn-outline-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-light-secondary:hover,
html[data-bs-theme="dark"] .btn.btn-outline-secondary:hover {
    background-color: var(--erl-marca-tint);
    color: var(--erl-texto);
}

/* "+" ao lado dos selects (cadastro rápido). app-extend.css:1630 trazia
   verde Material #4CAF50, 2.78:1 com o texto branco. */
.btn-adicionar,
html[data-bs-theme="dark"] .btn-adicionar {
    background-color: var(--erl-botao);
    color: #fff;
}
.btn-adicionar:hover,
html[data-bs-theme="dark"] .btn-adicionar:hover {
    background-color: var(--erl-botao-hover);
}

/* ── Anel de foco dos campos ─────────────────────────────────── */
/* Em todo .form-control/.form-select, não só dentro de .md-field
   (components.css tem a versão própria dele, mais forte, que fica).
   O do template era borda #a1afdf com anel rgba(67,94,190,.25): a borda
   ficava em 2.16:1 contra o fundo no claro e 1.96:1 no escuro. */
.form-control:focus,
.form-select:focus,
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--erl-marca);
    box-shadow: 0 0 0 3px rgba(var(--erl-marca-rgb), 0.25);
}

/* ── Linha de filtros de /medicamentos ───────────────────────── */
/* O <style> da própria view (medicamentos.php) fixa #f8f9fa nessa
   linha, com id: no tema escuro virava uma faixa branca entre o
   cabeçalho e as linhas. Só o irmão escuro, com o mesmo id e o prefixo
   de tema para vencer o <style>, que vem depois no documento; no claro
   fica como está. A linha de baixo (#dedede) é de app-dark.css:10618,
   com !important em todo cabeçalho de tabela no escuro: não se mexe. */
html[data-bs-theme="dark"] #table_medicamentos thead tr.filters th,
.dark-mode #table_medicamentos thead tr.filters th {
    background: var(--erl-superficie);
}