/*!
 * visual-novo-camada3.css
 *
 * Atle-Desenvolvimento Scripts
 * © 2026 Atle Consultoria Empresarial
 *
 * SOFTWARE PROPRIETÁRIO — TODOS OS DIREITOS RESERVADOS.
 * A cópia, reprodução, distribuição, engenharia reversa ou uso
 * deste código, no todo ou em parte, sem autorização escrita da
 * Atle Consultoria Empresarial, é proibida e sujeita às sanções
 * da Lei 9.609/98 e da Lei 9.610/98.
 *
 */

/* ═══════════════════════════════════════════════════════════════════════
   CAMADA 3 — POSIÇÃO. A folha que responde ao que o `visual-camada3.js`
   estampou.
   ═══════════════════════════════════════════════════════════════════════

   Todo valor daqui saiu de `getComputedStyle` no artefato — `ordem_artefato.mjs`
   e `gramatica.mjs`. Nada é estimado:

     .cabeca   flex · align-items flex-end · justify-content space-between ·
               gap 14 · wrap          (e a ação colada à direita em 95/95 telas)
     .filtros  flex · gap 9 · wrap · align-items center
     .kpis     grid · repeat(4,1fr) · gap 11
     .form-secao  respiro 16/18 · raio 18
     .pe-form  sticky bottom 0 · margem 4px -20px -26px · respiro 12/20 ·
               flex · gap 9 · align center · borda em cima

   🔴 A ORDEM É A REGRA, e ela vem de contagem: para cada par de blocos que
   convivem numa tela do artefato, quem vem antes. 22 pares, nenhuma
   contradição:
       cabeca → trilha → abas → kpis → filtros → conteúdo → pe-form
   ⚠️ `order` só ordena IRMÃOS, e por isso o JS estampa `data-nv-fila` na fila
   verdadeira (depois de descer pelos `.fade-in`) e é ELA que vira coluna flex.
   Sem isso, ordenar não faz efeito e parece que funcionou.

   ⚠️ Nada vale fora de `html[data-swgma-theme^="novo-"]`, e todo seletor traz
   `[data-swgma-mode]` pelo motivo da camada 2: a coluna do MEIO da
   especificidade é comparada antes da dos elementos, e o `swgma-theme.css` usa
   dois atributos.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── A FILA DE BLOCOS ───────────────────────────────────────────────────
   Vira coluna flex para que `order` funcione. O respiro entre blocos é o
   mesmo 16px da `.pagina` do artefato. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* 🔴 O PADRÃO DE `order` É O DO CONTEÚDO, E ISSO NÃO É DETALHE. `order` vale 0
   quando não se diz nada, e 0 vem ANTES de 1 — então todo bloco que o
   classificador não reconheceu ia para a FRENTE do cabeçalho. A prova acusou
   exatamente isso em 11 telas: "conteudo → cabeca → kpis". O não-reconhecido é
   conteúdo, e conteúdo tem lugar na gramática: depois do filtro. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > * { order: 60; }

/* 🔴 A ORDEM CANÔNICA, em `order`. Medida no artefato por precedência par a
   par (22 pares, nenhuma contradição). O conteúdo é o 60 acima; quem tem tipo
   sai dele.
   ⚠️ NUMERADA EM DEZENAS DESDE 18/09/2026, e o motivo é concreto: a faixa de
      AVISO não tinha lugar na gramática, caía no 6 do conteúdo e aparecia
      DEPOIS do título, das abas, dos KPIs e dos filtros. Medido em
      `modulos/rh/funcionarios`: o "Modo Superadmin" saía em y=338, abaixo dos
      filtros (y=142), quando o lugar dele é logo sob o cabeçalho.
      Com a numeração fechada em 1..9 não havia inteiro entre `cabeca` e
      `trilha` para encaixá-la. Em dezenas há nove — e o próximo bloco que
      aparecer não obriga a renumerar tudo outra vez.
      🔑 A faixa vem DEPOIS do cabeçalho, não antes: o cabeçalho diz onde a
         pessoa está, e um aviso acima dele deixa a tela sem endereço. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="cabeca"]  { order: 10; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="faixa"]   { order: 15; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="trilha"]  { order: 20; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="abas"]    { order: 30; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="kpis"]    { order: 40; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="filtros"] { order: 50; }
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv="pe-form"] { order: 90; }
/* ⚠️ A fila herda margem de fora em várias telas (o `.fade-in` costuma ter
   `margin-top`), e com `gap` isso soma dois respiros. Zera-se só a margem
   VERTICAL dos blocos da fila — a horizontal pode ser sangramento de propósito. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv-fila] > [data-nv] {
  margin-top: 0; margin-bottom: 0;
}

/* ── CABEÇA: título à esquerda, ações à direita, alinhadas por baixo ──── */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
/* 🔴 AS AÇÕES COLAM NA DIREITA — é assim em 95 das 95 telas do artefato que têm
   ação, e era o incômodo do "botões em posição antiga".
   ⚠️ Quem é ação vem ESTAMPADO pelo script (`data-nv-cab="acoes"`), não
   deduzido por `:last-child`: há tela com três grupos de ação na cabeça, um
   por aba, e os escondidos continuam contando para `:last-child` — o grupo
   visível ficava no meio da linha. Escondido conta para o seletor, não para o
   olho. E o primeiro grupo de ações é que recebe o `auto`, para que dois
   grupos visíveis fiquem juntos à direita em vez de espalhados. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] > [data-nv-cab="acoes"] {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] > [data-nv-cab="titulo"] {
  min-width: 0;
  margin-right: auto;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] .page-header-actions,
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] .header-actions,
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] .acoes {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

/* 🔴 O TÍTULO DO CABEÇALHO PROMOVIDO. As telas que escrevem o cabeçalho à mão
   usam `<h2>`/`<h3>`, e a camada 2 só vestia `.page-title` — o título ficava
   com o tamanho de fábrica e a tela parecia de outro sistema ao lado das
   demais. Medido no artefato: 22,72px, peso 600, espaçamento -0,3408px, linha
   26,128px; subtítulo 13,12px na cor secundária. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] h1,
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] h2,
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] h3 {
  font-size: 22.72px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3408px !important;
  line-height: 26.128px !important;
  margin: 0 !important;
  font-family: var(--sw-font-display) !important;
}

/* ── TRILHA (passos do assistente) ────────────────────────────────────── */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="trilha"] {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}

/* ── ABAS: a fila que troca o conteúdo fica ACIMA de filtro e de conteúdo ─ */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="abas"] {
  min-width: 0;
}

/* ── KPIs: grade de 4, gap 11 ──────────────────────────────────────────
   ⚠️ `auto-fit` com mínimo, não `repeat(4,1fr)` cru: o artefato mede 1440px de
   largura fixa, e a tela real tem trilho expandido, recolhido e celular. Com
   4 colunas cravadas o cartão fica com 90px no celular e o número quebra. O
   mínimo de 185px é o que o próprio ERP já usa na grade de KPI. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="kpis"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 11px;
}
/* 🔴 QUATRO COLUNAS onde o artefato foi medido. `auto-fit` sozinho dava CINCO
   em 1440px com o trilho expandido, e o desenho tem quatro — a foto do painel
   de RH mostrou 5 + 4 em vez de 4 + 4 + 1. Abaixo disso o `auto-fit` volta a
   mandar, senão o cartão fica com 90px no celular e o número quebra. */
@media (min-width: 1100px) {
  html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="kpis"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── FILTROS ────────────────────────────────────────────────────────────
   🔴 A POSIÇÃO vale para todo filtro (é `order: 50`, acima). O ARRANJO DE
   DENTRO só vale quando o bloco já é uma fila de campos — e quem decide isso é
   o script, que conta os controles de cada filho e estampa
   `data-nv-arranjo="fila"`.
   ⚠️ POR QUE A RESSALVA EXISTE: em `/modulos/rh/funcionarios/` o filtro é
   ANINHADO (linha de busca + grade de filtros avançados com rótulo em cima).
   Impor `flex` no pai empilhou os campos numa coluna estreita com meia tela
   vazia do lado — a prova de estrutura passou e a TELA ficou quebrada. Prova
   estrutural não pega feio; foto pega. */
/* 🔴 SEM `z-index` AQUI — corrigido em 14/09/2026, junto com o ERP.
   `position: relative` + `z-index` faz do bloco um CONTEXTO DE EMPILHAMENTO, e
   aí tudo que abre DENTRO dele (menu de botão, lista de escolha, calendário)
   fica preso naquele nível, por mais que o próprio menu peça `z-index: 1000`.
   No Performance isso pôs o menu "Documentos" de Contas a Pagar atrás do
   cabeçalho grudento da tabela. O bloco de filtros só precisa ficar acima do
   conteúdo comum, e `position: relative` sozinho já faz isso. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="filtros"] {
  position: relative;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="filtros"][data-nv-arranjo="fila"] {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: flex-end;
  /* solto na página, como no artefato: sem fundo, sem borda, sem sombra —
     é o que tira a tela do empilhamento de caixas */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* o campo do filtro: rótulo em cima, controle embaixo, e o primeiro estica —
   `.campo{display:flex;flex-direction:column;gap:4px}` e
   `.filtros .campo:first-child{flex:1 1 100%}` no artefato */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="filtros"][data-nv-arranjo="fila"] > * {
  flex: 0 1 auto;
  min-width: 0;
}

/* ── SEÇÃO DE FORMULÁRIO: respiro 16/18, raio 18 ──────────────────────── */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="form-secao"] {
  padding: 16px 18px;
  border-radius: 18px;
}
html[data-swgma-theme="novo-a"][data-swgma-mode] [data-nv="form-secao"] { border-radius: 16px; }
html[data-swgma-theme="novo-c"][data-swgma-mode] [data-nv="form-secao"] { border-radius: 8px; }

/* ── PÉ DE FORMULÁRIO: a barra de salvar que GRUDA no rodapé ───────────
   🔴 Esta é a mudança de posição mais visível da camada 3. No visual antigo o
   "Salvar" fica no fim do formulário, fora da vista em ficha comprida — a
   pessoa preenche 19 abas e tem de rolar até o fim para achar o botão. No
   artefato a barra é `position:sticky; bottom:0` e SANGRA até a borda da
   página (`margin: 4px -20px -26px`, que é exatamente o respiro lateral e o
   inferior da página, com sinal trocado).
   ⚠️ `sticky`, não `fixed`: fixo cobriria a tela em formulário curto e
   tamparia conteúdo no celular. Sticky só gruda enquanto há rolagem. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="pe-form"] {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: 4px calc(-1 * var(--pad-pag, 20px)) -26px;
  padding: 12px var(--pad-pag, 20px);
  display: flex;
  gap: 9px;
  align-items: center;
  background: var(--sw-canvas, #fff);
  border-top: 1px solid var(--sw-border, #D1D1D6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,var(--nv-brilho, .8));
}
/* o pé que vive DENTRO do cartão não sangra (o cartão tem canto arredondado e
   sangrar cortaria o canto); ele só vira barra de ação alinhada. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="pe-form-interno"] {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sw-border, #D1D1D6);
}
/* 🔴 A AÇÃO PRINCIPAL FICA À DIREITA nos dois casos. No artefato o pé é
   `justify-content: normal` com a ação cheia no fim da fila; o que empurra é
   o botão fantasma antes dela. Como a ordem dos botões na tela real é a do
   HTML e não dá para adivinhar, empurra-se o grupo inteiro para a direita
   quando há dois ou mais — que é o que o desenho mostra. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="pe-form"] > .btn:first-child:nth-last-child(n+2),
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="pe-form-interno"] > .btn:first-child:nth-last-child(n+2) {
  margin-right: auto;
}

/* ── DUO, PLANOS E FAIXA ────────────────────────────────────────────────
   Medidos no artefato:
     .duo    grid 1fr 1fr · gap 16 · align-items start (1 coluna no estreito)
     .planos grid auto-fit minmax(196px,1fr) · gap 12
     .faixa  flex · gap 10 · align flex-start · respiro 11/14 · canto pequeno ·
             fundo do alerta a 12% com borda da mesma cor */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="duo"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="planos"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
  align-items: start;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="faixa"] {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: 9px;
}
@media (max-width: 900px) {
  html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="duo"] { grid-template-columns: 1fr; }
}

/* ── BARRA DE AÇÃO QUE NÃO É PÉ ────────────────────────────────────────
   ⚠️ Mesma forma, papel diferente. Uma fila de botões no meio da página não é
   pé de formulário: no artefato ela é uma fila alinhada à direita, sem grudar
   em nada. Distinguir os dois é o que evita virar a tela do avesso. */
html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="barra-acao"] {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── CELULAR ────────────────────────────────────────────────────────────
   ⚠️ O sangramento do pé usa o respiro da página, que no celular é 14px
   (camada 1). A variável já é a certa; só o grudar embaixo muda: em tela
   pequena a barra ocupa demais, então ela deixa de ser sticky. */
@media (max-width: 768px) {
  html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="pe-form"] {
    position: static;
    margin: 4px calc(-1 * var(--pad-pag, 14px)) -20px;
    flex-wrap: wrap;
  }
  html[data-swgma-theme^="novo-"][data-swgma-mode] [data-nv="cabeca"] > :last-child:not(:only-child) {
    margin-left: 0;
  }
}

/* ── CONTRASTE: os restos que a régua certa apontou ─────────────────────
   🔴 Estes vieram de `prova_contraste.mjs`, que cobra 4,5:1 no texto normal e
   3:1 no grande (a prova antiga cobrava 3:1 em tudo — a régua do texto GRANDE
   aplicada ao pequeno, e foi por isso que o usuário achou lugar onde não se lê
   com a prova toda verde). */

/* branco a 75% sobre o acento dá 3,95:1 — 90% dá 5,05:1 e continua parecendo
   subtítulo (é a diferença de peso e tamanho que o separa do título, não a
   transparência) */
html[data-swgma-theme^="novo-"][data-swgma-mode] .card-header .subtitle,
html[data-swgma-theme^="novo-"][data-swgma-mode] .auth-header .subtitle {
  color: rgba(255,255,255,.9) !important;
}

/* 🔴 A INICIAL DO AVATAR ESTAVA EM 1,88:1 — texto escuro em cima do acento, em
   10 avatares por tela de lista. A causa é uma regra do `swgma-theme.css` que
   casa pelo CONTEÚDO DO ATRIBUTO `style` (`[style*="rgba(15,23,42"]`), feita
   para consertar cor escura cravada em linha; ela pega o avatar, cujo estilo em
   linha tem `var(--sw-primary-on, #0f172a)`, e troca a cor da letra por
   `--sw-text-2`. O avatar então fica com letra quase preta num círculo laranja.
   ⚠️ A regra dela é (0,4,1); esta é (0,4,2) — `!important` não resolveria o
   empate, especificidade resolve. É a mesma conta da camada 2. */
/* 🔴 ...MAS SÓ NO AVATAR DO PADRÃO (corrigido em 18/09/2026).
   O seletor era `.avatar[style]` — TODO avatar com estilo em linha. E o avatar
   com COR DE SETOR também tem: `ui.js:95` calcula a tinta contrastante para a
   cor daquele setor (luminância relativa, IEC 61966-2-1) e escreve
   `color: #0f172a` ou `#ffffff` em linha. Esta regra, com `!important`, apagava
   esse cálculo e punha a tinta do ACENTO num círculo que não é do acento.

   Medido na lista de funcionários em 18/09/2026, com o navegador dizendo quem
   vencia: o `style` em linha dizia `color: #0f172a` e a cor CALCULADA vinha
   `rgb(255,255,255)` — branco sobre âmbar `#F59E0B`, **2,15:1**. Eram 18
   iniciais por tela. O cálculo do `ui.js` estava certo (para o âmbar ele escolhe
   escuro, que dá 8,31:1); quem o desfazia era esta linha.

   ⚠️ A regra continua necessária para o avatar SEM setor, que é o caso que ela
      veio consertar: ali o fundo é o próprio acento e a tinta certa é
      `--sw-primary-on`. O que distingue os dois é o estilo em linha:
      `ui.js` usa `var(--sw-primary, …)` no padrão e um HEX quando há setor.
   🔑 A lição é a de sempre nesta casa: `!important` de folha vence estilo em
      linha, e estilo em linha é onde mora o CÁLCULO. Regra importante que
      cobre "todo elemento com style" atropela qualquer conta feita em JS. */
/* 🔑 A REGRA AUTORITATIVA DA TINTA DO AVATAR, e ela é UMA SÓ.
   `ui.js` escreve a tinta calculada em `--av-fg` (e não só em `color:`), porque
   uma propriedade customizada não é alvo dos seletores que casam pelo TEXTO do
   atributo `style` — que eram justamente quem atropelava o cálculo. Aqui ela é
   aplicada, com `!important`, para vencer as duas regras de `swgma-theme.css`
   que disputavam a cor da inicial.
   No avatar do PADRÃO (sem setor) `--av-fg` já vem como `var(--sw-primary-on,
   #0f172a)`, que é a tinta certa do acento em cada modo — então o mesmo
   caminho serve aos dois casos, e não há mais duas regras a se contradizer. */
html[data-swgma-theme^="novo-"][data-swgma-mode] body .avatar[style*="--av-fg"],
html[data-swgma-theme^="novo-"][data-swgma-mode] body .avatar[style*="--av-fg"] * {
  color: var(--av-fg, var(--sw-primary-on, #fff)) !important;
}

/* 🔴 LETRA BRANCA NO ACENTO SÓ SERVE NO CLARO. No escuro o acento é CLARO
   (#E8874A) e branco em cima dá 2,4:1 — o cabeçalho da tela de primeiro acesso
   ficava ilegível justamente no modo escuro. Quem sabe a cor certa para cada
   modo é `--sw-primary-on` (#fff no claro, #1C1206 no escuro), que já existe
   nas seis paletas. Cravar `#fff` é decidir pelo claro e esquecer o escuro. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .card-header .logo,
html[data-swgma-theme^="novo-"][data-swgma-mode] .auth-header .logo,
html[data-swgma-theme^="novo-"][data-swgma-mode] .card-header h1,
html[data-swgma-theme^="novo-"][data-swgma-mode] .card-header h2 {
  color: var(--sw-primary-on, #fff) !important;
}
html[data-swgma-theme^="novo-"][data-swgma-mode] .card-header .subtitle,
html[data-swgma-theme^="novo-"][data-swgma-mode] .auth-header .subtitle {
  /* ⚠️ 90% de opacidade, não 75%: a 75% dava 3,95:1 mesmo no claro. O que
     separa subtítulo de título é tamanho e peso, não transparência. */
  color: color-mix(in srgb, var(--sw-primary-on, #fff) 90%, transparent) !important;
}

/* ── os restos que a régua apontou, um por um ──────────────────────────
   ⚠️ São tons LOCAIS de tela: cada um inventou o seu, e é por isso que a lista
   existe em vez de uma regra só. A prova de contraste é a guarda — enquanto ela
   estiver verde, não há tela ilegível; quando aparecer outra, ela avisa. */

/* `#FCA5A5` (vermelho CLARO, da paleta escura antiga) num aviso de erro sobre
   fundo claro: 1,55:1. O vermelho de erro do visual novo já é legível nos dois
   modos. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .pt-alert.err,
html[data-swgma-theme^="novo-"][data-swgma-mode] .pt-alert.err * {
  color: var(--sw-danger, #b3261e) !important;
}

/* botão de modo escolhido: o tom local era acento a ~13% sobre branco e dava
   4,43:1. Padronizado no mesmo 11% do trilho, que é o ponto fixo resolvido. */
html[data-swgma-theme^="novo-"][data-swgma-mode] .mode-btn.active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .filter-chip.active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .cfg-tab-btn.active,
html[data-swgma-theme^="novo-"][data-swgma-mode] .pri-pill {
  background: rgba(var(--sw-primary-rgb), .11) !important;
  color: var(--sw-primary) !important;
}