/* =============================================================
   Design System Âncora — camada única de cor
   Carregado por ÚLTIMO em includes/header.php.

   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
   escrita aqui com uma classe é (0,1,1) e PERDE no tema escuro,
   inclusive na cor — 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.
   ============================================================= */

:root,
[data-bs-theme="light"] {
    --anc-marca:               #0D3B66;
    --anc-marca-hover:         #0A2F52;
    --anc-marca-ativo:         #082741;
    --anc-marca-tint:          #E7EEF5;
    --anc-marca-tint-suave:    #F3F7FB;

    --anc-acao-primaria:       #0D3B66;
    --anc-acao-primaria-hover: #0A2F52;

    --anc-acao:                #2EC4B6;
    --anc-acao-hover:          #22A99C;
    --anc-acao-texto:          #157F76;
    --anc-acao-contraste:      #05423D;  /* texto sobre o teal */

    --anc-superficie:          #FFFFFF;
    --anc-fundo:               #F5F7FA;
    --anc-zebra:               #EDF0F3;
    --anc-borda:               #E5E5E5;
    --anc-borda-forte:         #CBD3DB;
    --anc-texto:               #1E2A38;
    --anc-texto-2:             #5B6B7B;
    --anc-texto-3:             #8798A8;

    --anc-erro:                #E71D36;
    --anc-erro-hover:          #C41328;
    --anc-erro-texto:          #B4122A;
    --anc-erro-fundo:          rgba(231, 29, 54, .10);

    --anc-aviso:               #F2B84B;
    --anc-aviso-texto:         #8A5B00;
    --anc-aviso-fundo:         #FFF4E0;
}

html[data-bs-theme="dark"] {
    --anc-marca:               #0D3B66;
    --anc-marca-hover:         #114A80;
    --anc-marca-ativo:         #082741;
    --anc-marca-tint:          #16324D;
    --anc-marca-tint-suave:    #16324D;

    --anc-acao-primaria:       #2D74C4;
    --anc-acao-primaria-hover: #3A83D6;

    --anc-acao:                #2EC4B6;
    --anc-acao-hover:          #37D3C4;
    --anc-acao-texto:          #4FD8CA;
    --anc-acao-contraste:      #04302B;

    --anc-superficie:          #10202F;
    --anc-fundo:               #0A1420;
    --anc-zebra:               #16283A;
    --anc-borda:               #24384C;
    --anc-borda-forte:         #33506B;
    --anc-texto:               #E9EFF5;
    --anc-texto-2:             #9DB1C4;
    --anc-texto-3:             #6B8299;

    --anc-erro:                #E71D36;
    --anc-erro-hover:          #F23A50;
    --anc-erro-texto:          #FF6B7A;
    --anc-erro-fundo:          rgba(231, 29, 54, .16);

    --anc-aviso:               #F2B84B;
    --anc-aviso-texto:         #F5C96E;
    --anc-aviso-fundo:         rgba(242, 184, 75, .14);
}

/* ── Remapeamento do Bootstrap ─────────────────────────────────
   --bs-primary e --bs-primary-rgb eram cores DIFERENTES (#222c33 e
   67,94,190). A mesma "cor primária" saía quase-preta ou azul conforme
   a propriedade usasse alpha. Aqui passam a ser a mesma cor.
   --bs-primary-rgb não aceita var() composto: é literal em cada tema. */
:root,
[data-bs-theme="light"] {
    --bs-primary:          var(--anc-acao-primaria);
    --bs-primary-rgb:      13, 59, 102;
    --bs-link-color:       var(--anc-acao-texto);
    --bs-link-hover-color: var(--anc-marca-hover);
    --bs-body-bg:          var(--anc-fundo);
    --bs-body-color:       var(--anc-texto);
    --bs-border-color:     var(--anc-borda);
    --bs-danger:           var(--anc-erro);
    --bs-danger-rgb:       231, 29, 54;
    --bs-warning:          var(--anc-aviso);
    --bs-warning-rgb:      242, 184, 75;
}
html[data-bs-theme="dark"] {
    --bs-primary:          var(--anc-acao-primaria);
    --bs-primary-rgb:      45, 116, 196;
    --bs-link-color:       var(--anc-acao-texto);
    --bs-link-hover-color: var(--anc-acao);
    --bs-body-bg:          var(--anc-fundo);
    --bs-body-color:       var(--anc-texto);
    --bs-border-color:     var(--anc-borda);
    --bs-danger:           var(--anc-erro);
    --bs-danger-rgb:       231, 29, 54;
    --bs-warning:          var(--anc-aviso);
    --bs-warning-rgb:      242, 184, 75;
}

/* ── Botões ────────────────────────────────────────────────────
   .btn-default é o botão primário do sistema (12 usos nas views) e vive
   em app-extend.css:297 com --bs-btn-bg: #3E1FDC. Como o template usa as
   variáveis por-botão do Bootstrap, basta redeclará-las.
   O bloco html[data-bs-theme="dark"] não é redundância: app-extend.css
   tem `html[data-bs-theme=dark] .btn-default`, (0,1,2), que venceria a
   versão sem prefixo. */
.btn-default,
html[data-bs-theme="dark"] .btn-default,
.btn-primary,
html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color:                 var(--anc-superficie);
    --bs-btn-bg:                    var(--anc-acao-primaria);
    --bs-btn-border-color:          var(--anc-acao-primaria);
    --bs-btn-hover-color:           var(--anc-superficie);
    --bs-btn-hover-bg:              var(--anc-acao-primaria-hover);
    --bs-btn-hover-border-color:    var(--anc-acao-primaria-hover);
    --bs-btn-active-color:          var(--anc-superficie);
    --bs-btn-active-bg:             var(--anc-marca-ativo);
    --bs-btn-active-border-color:   var(--anc-marca-ativo);
    --bs-btn-disabled-color:        var(--anc-superficie);
    --bs-btn-disabled-bg:           var(--anc-acao-primaria);
    --bs-btn-disabled-border-color: var(--anc-acao-primaria);
    --bs-btn-focus-shadow-rgb:      46, 196, 182;
}

/* Perigo: fill vermelho com texto branco passa AA; vermelho como TEXTO
   não passa e usa --anc-erro-texto, aplicado mais abaixo. */
.btn-danger,
html[data-bs-theme="dark"] .btn-danger {
    --bs-btn-color:              #fff;
    --bs-btn-bg:                 var(--anc-erro);
    --bs-btn-border-color:       var(--anc-erro);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--anc-erro-hover);
    --bs-btn-hover-border-color: var(--anc-erro-hover);
    --bs-btn-focus-shadow-rgb:   231, 29, 54;
}

/* Secundário teal: texto verde-escuro, NÃO branco — branco sobre #2EC4B6
   reprova AA. */
.btn-outline-primary,
html[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color:              var(--anc-acao-texto);
    --bs-btn-border-color:       var(--anc-acao);
    --bs-btn-hover-color:        var(--anc-acao-contraste);
    --bs-btn-hover-bg:           var(--anc-acao);
    --bs-btn-hover-border-color: var(--anc-acao);
    --bs-btn-focus-shadow-rgb:   46, 196, 182;
}

/* Terciário */
.btn-light-secondary,
html[data-bs-theme="dark"] .btn-light-secondary,
.btn-outline-secondary,
html[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color:              var(--anc-texto);
    --bs-btn-border-color:       var(--anc-borda-forte);
    --bs-btn-bg:                 transparent;
    --bs-btn-hover-color:        var(--anc-texto);
    --bs-btn-hover-bg:           var(--anc-marca-tint-suave);
    --bs-btn-hover-border-color: var(--anc-borda-forte);
    --bs-btn-focus-shadow-rgb:   46, 196, 182;
}

/* Texto em vermelho/aviso: nunca o tom de fill.
   O !important aqui empata com o das utilitarias do Bootstrap, que ja
   trazem `color: var(--bs-danger) !important`. Nao estender a outras. */
.text-danger  { color: var(--anc-erro-texto)  !important; }
.text-warning { color: var(--anc-aviso-texto) !important; }

/* ── Badges ────────────────────────────────────────────────────
   25 badges nas views e nos JS: bg-secondary (8), bg-success (6),
   bg-danger (4), bg-warning (4), bg-primary (3).
   Regra do DS: badge não usa o tom de fill como fundo com texto branco —
   usa fundo claro com texto escurecido, que é o que passa AA.
   O !important é pelo mesmo motivo do .text-danger: as utilitárias .bg-*
   do Bootstrap já vêm com !important. */
.badge.bg-success,
html[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(46, 196, 182, .16) !important;
    color: var(--anc-acao-texto);
}
.badge.bg-warning,
html[data-bs-theme="dark"] .badge.bg-warning {
    background-color: var(--anc-aviso-fundo) !important;
    color: var(--anc-aviso-texto);
}
.badge.bg-danger,
html[data-bs-theme="dark"] .badge.bg-danger {
    background-color: var(--anc-erro-fundo) !important;
    color: var(--anc-erro-texto);
}
.badge.bg-secondary,
html[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: var(--anc-marca-tint) !important;
    color: var(--anc-texto-2);
}
.badge.bg-primary,
html[data-bs-theme="dark"] .badge.bg-primary {
    background-color: var(--anc-acao-primaria) !important;
    color: #fff;
}

/* ── Sidebar ───────────────────────────────────────────────────
   #0D3B66 nos DOIS temas: no claro é a cor de marca, no escuro é
   superfície de marca elevada sobre o fundo azul-carvão.
   Os blocos com prefixo dark são obrigatórios — app-dark.css tem
   `html[data-bs-theme=dark] #sidebar .sidebar-wrapper`, (1,1,2). */
.sidebar-wrapper,
html[data-bs-theme="dark"] .sidebar-wrapper,
html[data-bs-theme="dark"] #sidebar .sidebar-wrapper {
    background-color: var(--anc-marca);
}

.sidebar-wrapper .menu .sidebar-link,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-link {
    color: rgba(255, 255, 255, .88);
}

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

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

/* Item ativo: fundo teal translúcido + barra teal à esquerda */
.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    background-color: rgba(46, 196, 182, .18);
    color: #fff;
    border-left: 3px solid var(--anc-acao);
}

.sidebar-wrapper .menu .sidebar-title,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .sidebar-title {
    color: rgba(255, 255, 255, .55);
}

/* ── Cabeçalho de tabela ───────────────────────────────────────
   Vale para as tabelas montadas por concatenação no JS (12 arquivos em
   assets/js/view/) e para as declaradas nas views: todas usam .table. */
.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(--anc-marca);
    color: #fff;
    border-color: var(--anc-marca);
}

.table > tbody > tr:hover > *,
html[data-bs-theme="dark"] .table > tbody > tr:hover > * {
    background-color: var(--anc-zebra);
}

/* ── Foco visível ──────────────────────────────────────────────
   Substitui o anel azul do template. Complementa o :focus-visible já
   existente em components.css, que trata os botões custom. */
.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(--anc-acao);
    box-shadow: 0 0 0 3px rgba(46, 196, 182, .22);
}

/* ── Links ─────────────────────────────────────────────────────
   #2EC4B6 puro como texto sobre branco dá ~2.0:1 e reprova AA. O token
   --anc-acao-texto é a versão escurecida (clareada, no dark).
   No tema escuro o link estava em #3E1FDC sobre #1e1e2d: 1.9:1, ilegivel. */
a:not(.btn):not(.sidebar-link):not(.skip-link):not(.page-link),
html[data-bs-theme="dark"] a:not(.btn):not(.sidebar-link):not(.skip-link):not(.page-link) {
    color: var(--anc-acao-texto);
}

/* Âncoras da sidebar que NÃO são .sidebar-link — a do logo, no
   .sidebar-header-inner, é o caso. Sem isto elas caem na regra de link
   acima e recebem --anc-acao-texto: teal escuro sobre o azul-marinho da
   sidebar dá 2.36:1 no tema claro, ilegível.
   `inherit` puxa a cor do container, definida junto com o logo.

   A cadeia de :not() precisa ser REPETIDA aqui: cada :not() com seletor
   simples soma a especificidade do argumento, entao a regra de link
   acima e (0,4,1). Um `.sidebar-wrapper a` seria (0,1,1) e perderia --
   foi tentado assim primeiro e nao funcionou. Com o ancestral mais a
   mesma cadeia, esta e (0,5,1) e vence. */
.sidebar-wrapper a:not(.btn):not(.sidebar-link):not(.skip-link):not(.page-link),
html[data-bs-theme="dark"] .sidebar-wrapper a:not(.btn):not(.sidebar-link):not(.skip-link):not(.page-link) {
    color: inherit;
}

/* Cor do cabeçalho da sidebar (área do logo). É a origem do `inherit`
   acima e, na Task 6, do currentColor dos paths do SVG. */
.sidebar-wrapper .sidebar-header,
html[data-bs-theme="dark"] .sidebar-wrapper .sidebar-header {
    color: #fff;
}

/* =============================================================
   SEGUNDA PASSAGEM — o que a primeira versao do harness nao viu

   O harness original amostrava 6 seletores e deu "0 falhas" com submenu
   ilegivel, sidebar recolhida na cor antiga e metade dos botoes fora do
   tema. Depois de amplia-lo para varrer TODO elemento visivel, apareceram
   46 falhas. O que segue e a correcao dessas.
   ============================================================= */

/* ── Submenu ───────────────────────────────────────────────────
   O maior problema visual: `.submenu-item a` era #222c33, texto quase
   preto sobre o azul-marinho da sidebar. Item ativo e hover em #3E1FDC. */
.sidebar-wrapper .menu .submenu .submenu-item a,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item a {
    color: rgba(255, 255, 255, .72);
}
.sidebar-wrapper .menu .submenu .submenu-item a:hover,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item a:hover {
    color: #fff;
    background-color: var(--anc-marca-hover);
}
.sidebar-wrapper .menu .submenu .submenu-item.active > a,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: var(--anc-acao);
}

/* ── Sidebar recolhida ─────────────────────────────────────────
   Vive em app-extend.css, prefixada por `body.sidebar-collapsed #sidebar`
   — (0,2,1) mais o id, ou seja (1,2,1). Repetir o prefixo inteiro. */
body.sidebar-collapsed #sidebar .sidebar-item.active > .sidebar-link {
    background-color: rgba(46, 196, 182, .20);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 59, 102, .32);
}
body.sidebar-collapsed #sidebar .sidebar-link:hover {
    background-color: var(--anc-marca-hover);
    color: #fff;
}

/* ── Botao de recolher e rodape do usuario ─────────────────────
   O circle do logo compacto virou currentColor no header.php; a cor de
   origem vem daqui. */
.sidebar-collapse-btn:hover {
    background: var(--anc-acao-primaria);
    border-color: var(--anc-acao-primaria);
}
.sidebar-user-trigger:hover,
.sidebar-user-trigger[aria-expanded="true"] {
    background-color: rgba(46, 196, 182, .14);
    color: #fff;
}
.sidebar-user,
.sidebar-user-trigger,
html[data-bs-theme="dark"] .sidebar-user-trigger {
    color: rgba(255, 255, 255, .88);
}
.sidebar-user-avatar,
html[data-bs-theme="dark"] .sidebar-user-avatar {
    color: var(--anc-acao);
}

/* ── Titulos ───────────────────────────────────────────────────
   h1..h6 vinham em #222c33 do template. Sao 22 ocorrencias por rota. */
h1, h2, h3, h4, h5, h6,
html[data-bs-theme="dark"] h1,
html[data-bs-theme="dark"] h2,
html[data-bs-theme="dark"] h3,
html[data-bs-theme="dark"] h4,
html[data-bs-theme="dark"] h5,
html[data-bs-theme="dark"] h6 {
    color: var(--anc-texto);
}
/* O hero e a sidebar tem fundo escuro e definem a propria cor: nao podem
   herdar a regra acima. Repetido com prefixo dark pelo mesmo motivo. */
.md-hero-text h1, .md-hero-text h4,
html[data-bs-theme="dark"] .md-hero-text h1,
html[data-bs-theme="dark"] .md-hero-text h4 {
    color: #fff;
}

/* ── Botoes que faltaram no primeiro mapeamento ────────────────
   btn-link (24 usos) sao as acoes de icone nas tabelas. */
.btn-link,
html[data-bs-theme="dark"] .btn-link {
    --bs-btn-color:       var(--anc-acao-texto);
    --bs-btn-hover-color: var(--anc-marca-hover);
    --bs-btn-active-color: var(--anc-marca-ativo);
}

.btn-success,
html[data-bs-theme="dark"] .btn-success {
    --bs-btn-color:              var(--anc-acao-contraste);
    --bs-btn-bg:                 var(--anc-acao);
    --bs-btn-border-color:       var(--anc-acao);
    --bs-btn-hover-color:        var(--anc-acao-contraste);
    --bs-btn-hover-bg:           var(--anc-acao-hover);
    --bs-btn-hover-border-color: var(--anc-acao-hover);
    --bs-btn-disabled-color:     var(--anc-acao-contraste);
    --bs-btn-disabled-bg:        var(--anc-acao);
    --bs-btn-disabled-border-color: var(--anc-acao);
    --bs-btn-focus-shadow-rgb:   46, 196, 182;
}

.btn-warning,
html[data-bs-theme="dark"] .btn-warning {
    --bs-btn-color:              #3D2A00;
    --bs-btn-bg:                 var(--anc-aviso);
    --bs-btn-border-color:       var(--anc-aviso);
    --bs-btn-hover-color:        #3D2A00;
    --bs-btn-hover-bg:           #E0A93A;
    --bs-btn-hover-border-color: #E0A93A;
    --bs-btn-focus-shadow-rgb:   242, 184, 75;
}

.btn-secondary,
html[data-bs-theme="dark"] .btn-secondary,
.btn-info,
html[data-bs-theme="dark"] .btn-info {
    --bs-btn-color:              var(--anc-texto);
    --bs-btn-bg:                 var(--anc-marca-tint);
    --bs-btn-border-color:       var(--anc-borda-forte);
    --bs-btn-hover-color:        var(--anc-texto);
    --bs-btn-hover-bg:           var(--anc-marca-tint-suave);
    --bs-btn-hover-border-color: var(--anc-borda-forte);
    --bs-btn-focus-shadow-rgb:   46, 196, 182;
}

.btn-outline-danger,
html[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color:              var(--anc-erro-texto);
    --bs-btn-border-color:       var(--anc-erro);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--anc-erro);
    --bs-btn-hover-border-color: var(--anc-erro);
    --bs-btn-focus-shadow-rgb:   231, 29, 54;
}

/* Customizados do app-extend.css, fora de qualquer paleta:
   btn-adicionar era #4CAF50 (verde Material) e btn-voltar #2196F3. */
.btn-adicionar,
html[data-bs-theme="dark"] .btn-adicionar {
    background: var(--anc-acao);
    border-color: var(--anc-acao);
    color: var(--anc-acao-contraste);
}
.btn-adicionar:hover,
html[data-bs-theme="dark"] .btn-adicionar:hover {
    background: var(--anc-acao-hover);
    border-color: var(--anc-acao-hover);
}
.btn-voltar,
html[data-bs-theme="dark"] .btn-voltar {
    background: var(--anc-acao-primaria);
    border-color: var(--anc-acao-primaria);
    color: #fff;
}
.btn-voltar:hover,
html[data-bs-theme="dark"] .btn-voltar:hover {
    background: var(--anc-acao-primaria-hover);
    border-color: var(--anc-acao-primaria-hover);
}

/* ── Variantes -rgb dos links ──────────────────────────────────
   `html[data-bs-theme=dark] a` usa rgba(var(--bs-link-color-rgb), ...),
   nao var(--bs-link-color). Remapear so a versao sem -rgb deixava o link
   do tema escuro no indigo antigo -- e como aquela regra e (0,1,2), ela
   vencia ate o .skip-link, que e (0,1,0) e virava indigo sobre azul. */
:root,
[data-bs-theme="light"] {
    --bs-link-color-rgb:       21, 127, 118;   /* --anc-acao-texto */
    --bs-link-hover-color-rgb: 10, 47, 82;     /* --anc-marca-hover */
}
html[data-bs-theme="dark"] {
    --bs-link-color-rgb:       79, 216, 202;   /* --anc-acao-texto */
    --bs-link-hover-color-rgb: 46, 196, 182;   /* --anc-acao */
}

/* O skip-link tem fundo proprio e texto branco; precisa do bloco com
   prefixo para nao perder para `html[data-bs-theme=dark] a`. */
.skip-link,
.skip-link:focus,
html[data-bs-theme="dark"] .skip-link,
html[data-bs-theme="dark"] .skip-link:focus {
    color: #fff;
}

/* ── Sombras indigo remanescentes ──────────────────────────────
   A do item ativo vem de `#sidebar .sidebar-wrapper .menu
   .sidebar-item.active>.sidebar-link`, que e (1,4,1) E tem !important.
   Repetir o seletor inteiro com !important e a unica forma -- mesmo caso
   das utilitarias de fundo e de texto do Bootstrap.

   NAO escrever ".bg-" seguido de asterisco e barra aqui: a sequencia fecha
   o comentario no meio, o resto vira CSS invalido e o parser engole a regra
   seguinte em silencio. Foi exatamente o que aconteceu com a regra abaixo. */
#sidebar .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link {
    box-shadow: 0 4px 12px rgba(13, 59, 102, .28) !important;
}
.sidebar-user-avatar,
html[data-bs-theme="dark"] .sidebar-user-avatar {
    box-shadow: 0 0 0 2px rgba(46, 196, 182, .30);
    background: rgba(255, 255, 255, .10);
}
.sidebar-collapse-btn:hover {
    box-shadow: 0 4px 12px rgba(13, 59, 102, .30);
}

/* Barra de progresso do carregamento AJAX.
   O template usa `#spinner .spinner`, (1,1,0); a versao por classe
   `.loading-overlay .spinner`, (0,2,0), perdia. Como o elemento e
   display:none ate uma chamada AJAX rodar, a varredura do harness nunca
   passava por ele -- por isso o loader continuou indigo depois de tudo. */
#spinner .spinner {
    background: linear-gradient(
        90deg,
        rgba(46, 196, 182, 0) 0%,
        rgba(46, 196, 182, 1) 50%,
        rgba(46, 196, 182, 0) 100%
    );
    box-shadow: 0 0 10px rgba(46, 196, 182, .6);
}

/* ── Paginacao ─────────────────────────────────────────────────
   Usa as variaveis --bs-pagination-*, que nao foram remapeadas na
   primeira passagem. */
.pagination,
html[data-bs-theme="dark"] .pagination {
    --bs-pagination-color:               var(--anc-acao-texto);
    --bs-pagination-bg:                  var(--anc-superficie);
    --bs-pagination-border-color:        var(--anc-borda);
    --bs-pagination-hover-color:         var(--anc-marca-hover);
    --bs-pagination-hover-bg:            var(--anc-marca-tint);
    --bs-pagination-hover-border-color:  var(--anc-borda-forte);
    --bs-pagination-focus-color:         var(--anc-marca-hover);
    --bs-pagination-focus-bg:            var(--anc-marca-tint);
    --bs-pagination-active-color:        #fff;
    --bs-pagination-active-bg:           var(--anc-acao-primaria);
    --bs-pagination-active-border-color: var(--anc-acao-primaria);
    --bs-pagination-disabled-color:      var(--anc-texto-3);
    --bs-pagination-disabled-bg:         var(--anc-superficie);
    --bs-pagination-disabled-border-color: var(--anc-borda);
}

/* ── Link de submenu com filhos ────────────────────────────────
   .submenu-link e classe distinta de .submenu-item a: e o pai que abre
   outro nivel. Ficou de fora da primeira correcao de submenu. */
.sidebar-wrapper .menu .submenu-link,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu-link {
    color: rgba(255, 255, 255, .72);
}
.sidebar-wrapper .menu .submenu-link:hover,
html[data-bs-theme="dark"] .sidebar-wrapper .menu .submenu-link:hover {
    color: #fff;
}

/* ── Utilitarias text-bg-* ─────────────────────────────────────
   Distintas das .bg-*: definem cor E fundo juntas, com !important. */
.text-bg-warning,
html[data-bs-theme="dark"] .text-bg-warning {
    color: #3D2A00 !important;
    background-color: var(--anc-aviso) !important;
}
.text-bg-success,
html[data-bs-theme="dark"] .text-bg-success {
    color: var(--anc-acao-contraste) !important;
    background-color: var(--anc-acao) !important;
}
.text-bg-danger,
html[data-bs-theme="dark"] .text-bg-danger {
    color: #fff !important;
    background-color: var(--anc-erro) !important;
}
.text-bg-primary,
html[data-bs-theme="dark"] .text-bg-primary {
    color: #fff !important;
    background-color: var(--anc-acao-primaria) !important;
}

/* ── Submenu pai aberto / com filho ativo ──────────────────────
   Quatro regras em app-extend.css (L1148, L1156, L1195, L1222) pintam o
   .submenu-link de indigo. Usam :has(), cuja especificidade e a do
   argumento mais especifico, entao chegam perto de (1,7,0) — muito acima
   de qualquer regra por classe. Unica saida: espelhar o seletor inteiro.
   O sufixo .dark-mode e do template, nao data-bs-theme: e a classe que o
   dark.js poe no body. */
#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,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link {
    color: var(--anc-acao);
    background-color: rgba(46, 196, 182, .12);
}
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after {
    color: var(--anc-acao);
}

/* Item de submenu ATIVO (a pagina atual). A regra do template em
   app-extend.css:1111 leva #sidebar — (1,5,1) — e vencia a versao por
   classe. E o "Fornecedores" roxo que aparecia no menu. */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: var(--anc-acao);
    font-weight: 700;
}

/* =============================================================
   TERCEIRA PASSAGEM — pseudo-elementos e estados :hover

   O harness so lia o estado normal do elemento. Nao via ::after nem
   :hover, e por isso deu "0 falhas" com o chevron indigo e o hover do
   submenu na cor antiga.

   Todas as regras abaixo repetem o prefixo #sidebar (e, onde existe,
   .dark-mode) porque as do template sao (1,5,1) ou mais: a versao por
   classe perde. .dark-mode e a classe que o dark.js poe no body — nao
   confundir com data-bs-theme.
   ============================================================= */

/* ── Texto do submenu ──────────────────────────────────────────
   O template usa #4b5563 no claro e #adb5bd no escuro: cinza medio sobre
   azul-marinho, contraste baixo demais para leitura prolongada. Branco a
   78% da ~9:1 sobre #0D3B66. */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a {
    color: rgba(255, 255, 255, .78);
}

/* ── Hover do submenu ──────────────────────────────────────────
   Era color #3E1FDC + fundo rgba(62,31,220,.055). */
#sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item > a:hover {
    color: #fff;
    background-color: rgba(46, 196, 182, .14);
}

/* Item ativo do submenu, tambem no dark (o template usa #c5b8e2 la) */
.dark-mode #sidebar .sidebar-wrapper .menu .submenu .submenu-item.active > a {
    color: var(--anc-acao);
}

/* ── Chevron (::after) ─────────────────────────────────────────
   Estado normal era #9ca3af; aberto, #3E1FDC. */
#sidebar .sidebar-wrapper .menu .sidebar-item.has-sub > .sidebar-link::after,
#sidebar #sidebar .sidebar-wrapper .menu .submenu-item.has-sub > .submenu-link::after {
    color: rgba(255, 255, 255, .55);
}
#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,
.dark-mode .sidebar-wrapper .menu .sidebar-item.has-sub:has(> .submenu.submenu-open) > .sidebar-link::after,
.dark-mode #sidebar .sidebar-wrapper .menu .submenu-item.has-sub:has(> .submenu.submenu-open) > .submenu-link::after {
    color: var(--anc-acao);
}
#sidebar .sidebar-wrapper .menu .sidebar-item.active.has-sub > .sidebar-link::after {
    color: #fff;
}
/* Tamanho aqui e não em app-extend.css: este carrega depois e vence o 38px de lá. */
.sidebar-logo-icon svg { width: 38px; height: 38px; }
.sidebar-logo-icon .cc-corpo { fill: #03a4ed; }
.sidebar-logo-icon .cc-detalhe { fill: #fff; }

/* ── Tabelas ───────────────────────────────────────────────────
   --bs-table-color era #607080, cinza-azulado do template fora da paleta,
   com 4.5:1 no limite sobre branco. Passa a --anc-texto (13.5:1). As
   variaveis de listra e hover tambem, para o zebrado seguir o tema. */
.table,
html[data-bs-theme="dark"] .table {
    --bs-table-color:            var(--anc-texto);
    --bs-table-bg:               transparent;
    --bs-table-border-color:     var(--anc-borda);
    --bs-table-striped-color:    var(--anc-texto);
    --bs-table-striped-bg:       var(--anc-zebra);
    --bs-table-hover-color:      var(--anc-texto);
    --bs-table-hover-bg:         var(--anc-zebra);
    --bs-table-active-color:     var(--anc-texto);
    --bs-table-active-bg:        var(--anc-marca-tint);
}

/* Linha cancelada (historico de movimentacao): cor direto no <tr> nao
   funciona porque `.table>:not(caption)>*>*` (app.css) fixa color direto
   no td, e valor especificado no elemento sempre vence heranca do
   ancestral, independente de especificidade ou !important no tr. */
tr.linha-cancelada td { color: #aaa !important; }

/* ── Campos de formulario ──────────────────────────────────────
   `.form-control` fixa `color: #607080` direto em app.css, sem passar por
   var(--bs-body-color) -- por isso o remapeamento da variavel nao alcanca
   o texto digitado nos campos. 4.5:1 sobre branco, no limite. */
.form-control,
.form-select,
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select {
    color: var(--anc-texto);
}
.form-control::placeholder,
html[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--anc-texto-3);
}

/* Select2: o texto renderizado e a seta herdam o mesmo #607080 do template. */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--anc-texto);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--anc-texto-2);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--anc-texto-3);
}

/* O container do select2 (nao so o texto renderizado) tambem fixa #607080,
   e a variante --multiple usa !important -- empatado aqui pelo mesmo motivo
   das utilitarias do Bootstrap. Fundo e borda seguem os tokens para o
   componente nao ficar branco no tema escuro. */
.select2-container .select2-selection--single,
html[data-bs-theme="dark"] .select2-container .select2-selection--single {
    color: var(--anc-texto);
    background-color: var(--anc-superficie);
    border-color: var(--anc-borda);
}
.select2-container--default .select2-selection--multiple,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
    color: var(--anc-texto) !important;
    background-color: var(--anc-superficie);
    border-color: var(--anc-borda);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b,
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--anc-texto-2) transparent transparent transparent;
}
/* Painel suspenso: fica fora do fluxo, no fim do body */
.select2-container--default .select2-dropdown,
html[data-bs-theme="dark"] .select2-container--default .select2-dropdown {
    background-color: var(--anc-superficie);
    border-color: var(--anc-borda);
    color: var(--anc-texto);
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--anc-acao-primaria);
    color: #fff;
}