/* =====================================================================
   FLUX — Override GLOBAL operator (todas as páginas)
   ---------------------------------------------------------------------
   Aplica o modelo "operator" a TODOS os módulos restantes, cobrindo os
   padrões legados que aparecem em muitas telas (botões custom, painéis
   Bootstrap 3, portlets, w-box, faixas de cor). Junto com o tema base e
   os overrides S1/S2/S3, leva o sistema inteiro ao novo visual.

   Carregar SEMPRE depois de flux-modern-theme.css e dos overrides de lote.
   Reverter: comentar a linha do <link> deste arquivo.
   Depende de: flux-modern-theme.css (variáveis --flux-*).
   Não altera PHP/JS — apenas aparência.
   ===================================================================== */

/* ===================== 1. FAIXAS / WRAPPERS LEGADOS ================= */
/* .color-three define texto cinza-claro no CSS antigo (415 usos) ->
   força texto legível em todo o conteúdo.                             */
section.slice.color-three,
.slice.color-three .w-section,
.slice.color-three .portlet-content,
.color-three{
  color: var(--flux-text) !important;
}
section.slice.color-two,
.w-section.color-two{
  background: var(--flux-navy) !important;
  color: var(--flux-text-invert) !important;
  border-radius: var(--flux-radius);
}
.slice.gray, .slice.gray .w-section.inverse{ background: transparent !important; }

/* ===================== 2. PAINÉIS BOOTSTRAP 3 (.panel) ============= */
/* 157 usos. Equivalem aos .card do tema.                              */
.panel{
  background: var(--flux-surface);
  border: 1px solid var(--flux-border) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: var(--flux-shadow-sm);
  margin-bottom: 1rem;
}
.panel-heading{
  background: var(--flux-surface-2) !important;
  border-bottom: 1px solid var(--flux-border) !important;
  border-radius: var(--flux-radius) var(--flux-radius) 0 0 !important;
  color: var(--flux-text-muted) !important;
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .65rem .9rem;
}
.panel-title{ font-size: 12px; font-weight: 600; margin: 0; color: inherit; }
.panel-body{ padding: .9rem; }
.panel-footer{
  background: var(--flux-surface-2) !important;
  border-top: 1px solid var(--flux-border) !important;
  padding: .55rem .9rem;
}
/* Variações coloridas de painel -> faixa de cor à esquerda (operacional) */
.panel-primary, .panel-success, .panel-danger, .panel-warning, .panel-info,
.panel-default{
  border-left-width: 3px !important;
}
.panel-primary{ border-left-color: var(--flux-primary) !important; }
.panel-success{ border-left-color: var(--flux-success) !important; }
.panel-danger{  border-left-color: var(--flux-danger) !important; }
.panel-warning{ border-left-color: var(--flux-warning) !important; }
.panel-info{    border-left-color: var(--flux-info) !important; }
.panel-default{ border-left-color: var(--flux-border-strong) !important; }
/* Cabeçalhos coloridos de painel: neutralizar fundo forte legado */
.panel-primary>.panel-heading,.panel-success>.panel-heading,
.panel-danger>.panel-heading,.panel-warning>.panel-heading,
.panel-info>.panel-heading{
  background: var(--flux-surface-2) !important;
  color: var(--flux-text-muted) !important;
  border-color: var(--flux-border) !important;
}

/* ===================== 3. PORTLETS ================================= */
.portlet{
  background: var(--flux-surface);
  border: 1px solid var(--flux-border);
  border-radius: var(--flux-radius);
  box-shadow: var(--flux-shadow-sm);
  margin-bottom: 1rem;
}
.portlet-header{
  background: var(--flux-surface-2) !important;
  border-bottom: 1px solid var(--flux-border);
  color: var(--flux-text-muted);
  font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .65rem .9rem;
}
.portlet-content{ padding: 0; }

/* ===================== 4. CAIXAS (w-box / info-box) =============== */
.w-box{
  background: var(--flux-surface) !important;
  border: 1px solid var(--flux-border) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: var(--flux-shadow-sm) !important;
}
.info-box{
  background: var(--flux-surface);
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-primary);
  border-radius: var(--flux-radius);
  box-shadow: var(--flux-shadow-sm);
}

/* ===================== 5. BOTÕES LEGADOS RESTANTES ================ */
/* Mapeia todas as classes custom para a paleta operator.            */
.btn-hight,
.btn-line-parrot, .btn-line-sky, .btn-line-blue, .btn-xing, .btn-update{
  background: var(--flux-primary) !important;
  border: 1px solid var(--flux-primary-700) !important;
  color: #fff !important;
  border-radius: var(--flux-radius); font-weight: 600;
}
.btn-hight:hover,
.btn-line-parrot:hover, .btn-line-sky:hover, .btn-line-blue:hover{
  background: var(--flux-primary-600) !important;
}
.btn-line-warning{
  background: var(--flux-warning) !important;
  border: 1px solid #97690a !important; color: #fff !important;
  border-radius: var(--flux-radius); font-weight: 600;
}
.btn-line-danger{
  background: var(--flux-danger) !important;
  border: 1px solid #9f2e22 !important; color: #fff !important;
  border-radius: var(--flux-radius); font-weight: 600;
}
.btn-three{
  background: var(--flux-surface) !important;
  border: 1px solid var(--flux-border-strong) !important;
  color: var(--flux-text) !important;
  border-radius: var(--flux-radius); font-weight: 600;
}
.btn-three:hover{ background: var(--flux-surface-2) !important; }
/* Botão de upload de arquivo */
.btn-file{
  background: var(--flux-surface-2) !important;
  border: 1px solid var(--flux-border-strong) !important;
  color: var(--flux-text) !important;
  border-radius: var(--flux-radius); font-weight: 600;
}

/* ===================== 6. STATUS / INDICADORES =================== */
/* Pequenos selos de estado legados (.state, .state-default).        */
.state-default{
  background: var(--flux-neutral-soft); color: var(--flux-neutral);
  border-radius: var(--flux-radius); padding: .15em .5em; font-weight: 600;
}

/* ===================== 7. ABAS LEGADAS (tabcontent.js) =========== */
/* O plugin tabcontent usa <ul class="tabs"> e divs .tabcontent.     */
ul.tabs{ border-bottom: 1px solid var(--flux-border-strong); padding-left: 0; }
ul.tabs li a, ul.tabs li.selected a{
  border-radius: var(--flux-radius) var(--flux-radius) 0 0;
  color: var(--flux-text-muted); font-weight: 600;
}
ul.tabs li.selected a{
  color: var(--flux-primary-700) !important;
  border-bottom: 2px solid var(--flux-primary) !important;
  background: transparent !important;
}

/* ===================== 8. AJUSTES DE LEGIBILIDADE =============== */
.no-padding{ padding: 0 !important; }
.padding-15{ padding: 1rem !important; }
hr{ border-top-color: var(--flux-border); }
.text-muted{ color: var(--flux-text-muted) !important; }

/* ===================== 9. TOOLBAR DE LISTAS (.fbutton) =========== */
/* Em TODA tela de listagem a barra de ações vem como blocos sólidos
   saturados (Criar âmbar, Excluir vermelho, Importar/Exportar azul) +
   ícones sólidos âmbar/azul no canto superior (busca/atualizar).
   O tema operator pede botões sóbrios com acento fino de cor, não
   blocos coloridos vivos. Aqui as classes .btn-line-* (literalmente
   "line"/contorno) voltam ao espírito de contorno: superfície neutra,
   borda fina, e uma faixa fina de cor à esquerda como acento semântico.
   Escopo restrito a .fbutton e .dashboard-right para não afetar botões
   de ação primária dentro de formulários. Só aparência; reversível.   */
.fbutton .btn,
.fbutton .btn-line-warning, .fbutton .btn-line-danger,
.fbutton .btn-line-blue, .fbutton .btn-xing, .fbutton .btn-update{
  background: var(--flux-surface) !important;
  color: var(--flux-text) !important;
  border: 1px solid var(--flux-border-strong) !important;
  border-radius: var(--flux-radius) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.fbutton .btn i{ color: inherit !important; }
.fbutton .btn-line-warning{ border-left: 3px solid var(--flux-warning) !important; }
.fbutton .btn-line-danger{
  border-left: 3px solid var(--flux-danger) !important;
  color: var(--flux-danger) !important;
}
.fbutton .btn-line-blue,
.fbutton .btn-xing,
.fbutton .btn-update{ border-left: 3px solid var(--flux-primary) !important; }
.fbutton .btn:hover{ background: var(--flux-surface-2) !important; }

/* Ícones de ação no cabeçalho da listagem (busca/atualizar) ->
   botão neutro com ícone colorido fino, sem bloco saturado.          */
.dashboard-right .btn-warning,
.dashboard-right .btn-update{
  background: var(--flux-surface) !important;
  border: 1px solid var(--flux-border-strong) !important;
  color: var(--flux-text-muted) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: none !important;
}
.dashboard-right .btn-warning i{ color: var(--flux-warning) !important; }
.dashboard-right .btn-update i{ color: var(--flux-primary) !important; }
.dashboard-right .btn-warning:hover,
.dashboard-right .btn-update:hover{ background: var(--flux-surface-2) !important; }

/* ===================== 10. TOGGLES E BUSCA DE LISTAS ============= */
/* Toggle on/off (.switch .slider): no legado o estado "ligado" usa um
   azul Material vivo (#2196f3 / #56b1fb), que aparece em dezenas de
   linhas nas listagens (calltype, pricing, did, etc.) e destoa do
   operator. Aqui o estado ativo passa a usar o azul primário sóbrio
   do tema. Só cor; comportamento intacto.                            */
.switch input:checked + .slider{
  background-color: var(--flux-primary) !important;
}

/* Painel de busca das listagens (#search_bar): o botão "Procurar" vinha
   como bloco verde sólido (.btn-success). No operator vira o azul
   primário sóbrio. Escopo restrito a #search_bar para NÃO afetar
   botões .btn-success de ação em formulários de cadastro/edição.      */
#search_bar .btn-success{
  background: var(--flux-primary) !important;
  border: 1px solid var(--flux-primary) !important;
  color: #fff !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
#search_bar .btn-success:hover{ filter: brightness(0.92) !important; }

/* ===================== 11. BOTÕES SÓLIDOS .btn-warning / .btn-info ===
   Fora das toolbars de listagem (§9) ainda restam botões sólidos
   saturados: o tema base (flux-modern-theme.css) define `.btn-warning`
   âmbar e `.btn-info` ciano com !important. Aparecem como botões de
   filtro/busca inline (ex.: o ícone de busca âmbar no painel de filtro
   do Event Guard, em `.col-* .btn-warning`) e em outros pontos avulsos.
   Destoam do operator ("sem blocos coloridos vivos").

   Aqui viram botões de contorno sóbrios (superfície neutra, borda fina,
   faixa fina de cor à esquerda + ícone colorido como acento semântico),
   no mesmo espírito de §9. Escopo:
   - `.btn-warning` exceto `.btn-line-warning` (este é toolbar, tratado em §9);
   - `.btn-info` exceto `.btn-line-blue`/`.btn-xing` (estes já são azul primário).
   Não toca em `.btn-success` (acento de ação em formulários) nem em
   `.btn-primary`. Validado ao vivo (injeção) no Event Guard antes de
   gravar: âmbar sólido -> superfície branca + acento âmbar. Só cor;
   reversível; sem mudança de PHP/JS. Beneficia todas as telas de uma vez. */
.btn-warning:not(.btn-line-warning),
.btn-info:not(.btn-line-blue):not(.btn-xing){
  background: var(--flux-surface) !important;
  color: var(--flux-text) !important;
  border: 1px solid var(--flux-border-strong) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-warning:not(.btn-line-warning){ border-left: 3px solid var(--flux-warning) !important; }
.btn-warning:not(.btn-line-warning) i{ color: var(--flux-warning) !important; }
.btn-info:not(.btn-line-blue):not(.btn-xing){ border-left: 3px solid var(--flux-info) !important; }
.btn-info:not(.btn-line-blue):not(.btn-xing) i{ color: var(--flux-info) !important; }
.btn-warning:not(.btn-line-warning):hover,
.btn-info:not(.btn-line-blue):not(.btn-xing):hover{ background: var(--flux-surface-2) !important; }

/* ===================== 12. BOTÕES SÓLIDOS .btn-danger ===============
   Mesma lógica de §11, agora para o vermelho. O tema base define
   `.btn-danger` como bloco vermelho sólido (rgb(192,57,43)). Fora das
   toolbars de listagem (§9, que já trata Excluir via faixa à esquerda)
   ainda restam botões de ação destrutiva sólidos avulsos — ex.:
   "Reverter Atualização" em `systems/update` (`.btn-danger.color-three`,
   fora de `.fbutton`/`#search_bar`). Bloco vermelho vivo destoa do
   operator ("sem blocos coloridos vivos; acentos finos de cor").

   Aqui vira botão de contorno sóbrio: superfície neutra, borda fina,
   faixa vermelha fina à esquerda + texto/ícone vermelhos como acento
   semântico de "perigo" — preservando o sinal de ação destrutiva sem o
   bloco saturado. Exclui `.btn-line-danger` (classe que §5 mantém sólida
   de propósito). Validado ao vivo (injeção) em `systems/update`: bloco
   vermelho -> superfície branca + acento vermelho. Só cor; reversível;
   sem mudança de PHP/JS. Beneficia todas as telas de uma vez. */
.btn-danger:not(.btn-line-danger){
  background: var(--flux-surface) !important;
  color: var(--flux-danger) !important;
  border: 1px solid var(--flux-border-strong) !important;
  border-left: 3px solid var(--flux-danger) !important;
  border-radius: var(--flux-radius) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-danger:not(.btn-line-danger) i{ color: var(--flux-danger) !important; }
.btn-danger:not(.btn-line-danger):hover{ background: var(--flux-surface-2) !important; }

/* ===================== 13. BADGES / PÍLULAS DE STATUS ==============
   Os badges coloridos do Bootstrap (.badge-primary/-secondary/-success/
   -danger/-warning/-info) vêm de `bootstrap.min.css` como PÍLULAS sólidas
   vivas + texto branco (ex.: .badge-primary = azul rgb(0,123,255)) e com
   cantos muito arredondados (.badge base ~10px; .badge-pill = 10rem).
   São um chrome reutilizável (rótulos/contadores/pílulas de status em
   tabelas, cabeçalhos, contadores de menu) e destoam do operator
   ("sem blocos coloridos vivos; cantos retos; acentos finos de cor").
   O tema já tamava .bg-*/.alert-*/toasts, mas NÃO os .badge-*.

   Aqui cada variante vira uma pílula SÓBRIA no mesmo espírito dos
   .alert-*/toasts: superfície soft neutra + faixa fina de cor à esquerda
   + texto sóbrio na cor semântica + cantos retos. Só aparência;
   reversível; sem mudança de PHP/JS. Validado ao vivo (badges sintéticos)
   antes de gravar. Beneficia todas as telas de uma vez.                */
.badge{ border-radius: var(--flux-radius) !important; }
.badge-pill{ border-radius: var(--flux-radius) !important; }
.badge-primary,
.badge-info{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-primary);
  font-weight: 600;
}
.badge-secondary{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-text) !important;
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-border-strong);
  font-weight: 600;
}
.badge-success{
  background-color: var(--flux-success-soft) !important;
  color: #145737 !important;
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-success);
  font-weight: 600;
}
.badge-danger{
  background-color: var(--flux-danger-soft) !important;
  color: #8a271c !important;
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-danger);
  font-weight: 600;
}
.badge-warning{
  background-color: var(--flux-warning-soft) !important;
  color: #7a5800 !important;
  border: 1px solid var(--flux-border);
  border-left: 3px solid var(--flux-warning);
  font-weight: 600;
}

/* ===== 14. COMPONENTES BOOTSTRAP COM BLOCO VIVO (progress / list-group
   ativo / nav-pills ativo) → operator sóbrio =========================
   Chrome reutilizável do Bootstrap que vinha com cor viva do
   bootstrap.min.css (azul rgb(0,123,255) / verde rgb(40,167,69)) e que o
   tema ainda não tamava (mesma classe de gap dos .badge-* da §13). Não
   renderizam nas telas varridas, mas vazariam onde forem usados.
   Validado por injeção sintética (27ª rodada).                        */

/* Barra de progresso: trilho neutro reto + preenchimento no azul/semântica
   SÓBRIA do operator (não o azul/verde vivos do BS).                  */
.progress{
  background-color: var(--flux-surface-2) !important;
  border: 1px solid var(--flux-border);
  border-radius: var(--flux-radius);
}
.progress-bar{
  background-color: var(--flux-primary) !important;
  color: #fff;
  border-radius: 0;
}
.progress-bar.bg-success{ background-color: var(--flux-success) !important; }
.progress-bar.bg-danger{ background-color: var(--flux-danger) !important; }
.progress-bar.bg-warning{ background-color: var(--flux-warning) !important; }
.progress-bar.bg-info{ background-color: var(--flux-primary) !important; }

/* Item ativo de list-group: superfície soft + acento fino primário à
   esquerda + texto sóbrio (no lugar do bloco azul vivo do BS).        */
.list-group-item.active{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
  border-color: var(--flux-border) !important;
  border-left: 3px solid var(--flux-primary) !important;
  border-radius: 0 !important;
}

/* Aba ativa de nav-pills: superfície soft + acento fino + texto sóbrio
   (no lugar do pill azul vivo do BS). .nav-tabs já é sóbrio.          */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
  border-radius: var(--flux-radius) !important;
  border-left: 3px solid var(--flux-primary);
}

/* ===== 15. CUSTOM-CONTROLS BOOTSTRAP 4 (switch / checkbox / radio)
   marcados → azul OPERATOR ============================================
   Os controles customizados do Bootstrap 4 (`.custom-switch`,
   `.custom-checkbox`, `.custom-radio`) renderizam o indicador do estado
   "marcado" (`.custom-control-input:checked ~ .custom-control-label::before`)
   com o AZUL VIVO do bootstrap.min.css (rgb(0,123,255)) — a pílula do
   switch, a caixinha do checkbox e o disco do radio ficam nesse azul
   saturado, destoando do operator ("acentos finos; sem cor viva"). É um
   chrome reutilizável de formulário e NENHUM dos 11 CSS do tema o tamava
   (mesma classe de gap dos `.badge-*` da §13 e do progress/list-group da
   §14: só o bootstrap define a regra). Confirmado por enumeração de regras
   casantes (única origem = bootstrap.min.css) + injeção sintética.

   Aqui o indicador marcado passa a usar o azul PRIMÁRIO sóbrio do operator
   (`--flux-primary`), igual ao tame dos toggles legados `.slider` (§10).
   O botão branco do switch (`::after`) e o "tick" permanecem como estão.
   Só cor; reversível; sem mudança de PHP/JS. Validado ao vivo (switch/
   checkbox/radio: rgb(0,123,255) → rgb(31,95,168)) antes de gravar.       */
.custom-control-input:checked ~ .custom-control-label::before{
  background-color: var(--flux-primary) !important;
  border-color: var(--flux-primary) !important;
}

/* ===== 16. UTILITÁRIOS .bg-* SEMÂNTICOS SÓLIDOS → operator sóbrio =====
   Os utilitários de fundo do Bootstrap (`.bg-success`, `.bg-warning`,
   `.bg-danger`, `.bg-info`, `.bg-secondary`) vêm de `bootstrap.min.css`
   como BLOCOS sólidos VIVOS com `!important` (verde rgb(40,167,69), âmbar
   rgb(255,193,7), vermelho rgb(220,53,69), ciano rgb(23,162,184), cinza
   rgb(108,117,125)). São exatamente os "cards/blocos sólidos coloridos"
   que o operator pede para tamar. As variantes `.bg-primary` e `.bg-dark`
   já eram operator (azul/cinza sóbrios), mas estas semânticas vivas nunca
   foram tamadas como utilitário SOLO (o tema cobria `.alert-*`/`.badge-*`/
   toasts, mas o `.bg-*` cru permanecia no vivo do BS — confirmado por
   injeção sintética).

   Aqui cada utilitário vira superfície SOFT no mesmo espírito dos
   `.alert-*`/`.badge-*` (§13): fundo soft neutro/semântico + texto sóbrio
   na cor semântica + faixa fina de cor à esquerda (3px) como acento — sem
   o bloco saturado. Precisa de `!important` para vencer o `!important` do
   bootstrap (o tema carrega depois). Exclui `.progress-bar` (tratado em
   §14, que mantém o preenchimento sólido sóbrio) e `.badge` (defensivo;
   §13 trata badges). Só aparência; reversível; sem mudança de PHP/JS.
   Validado ao vivo (injeção sintética) antes de gravar: vivo → soft.       */
.bg-success:not(.progress-bar):not(.badge){
  background-color: var(--flux-success-soft) !important;
  color: #145737 !important;
  border-left: 3px solid var(--flux-success) !important;
}
.bg-danger:not(.progress-bar):not(.badge){
  background-color: var(--flux-danger-soft) !important;
  color: #8a271c !important;
  border-left: 3px solid var(--flux-danger) !important;
}
.bg-warning:not(.progress-bar):not(.badge){
  background-color: var(--flux-warning-soft) !important;
  color: #7a5800 !important;
  border-left: 3px solid var(--flux-warning) !important;
}
.bg-info:not(.progress-bar):not(.badge){
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
  border-left: 3px solid var(--flux-info) !important;
}
.bg-secondary:not(.progress-bar):not(.badge){
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-text) !important;
  border-left: 3px solid var(--flux-border-strong) !important;
}

/* ===== 17. CLASSES CONTEXTUAIS DE TABELA / LIST-GROUP → operator sóbrio
   As classes contextuais do Bootstrap aplicadas a LINHAS de tabela
   (`.table-primary`/`-secondary`/`-success`/`-danger`/`-warning`/`-info`,
   em `<tr>`/`<td>`/`<th>` dentro de `.table`) e a ITENS de list-group
   (`.list-group-item-primary`/`-secondary`/`-success`/`-danger`/`-warning`/
   `-info`) vêm de `bootstrap.min.css` como BLOCOS coloridos saturados —
   linhas/itens de status pintados em azul rgb(184,218,255), verde
   rgb(195,230,203), vermelho rgb(245,198,203), âmbar rgb(255,238,186),
   ciano rgb(190,229,235), cinza rgb(214,216,219). São chrome reutilizável
   distinto dos utilitários `.bg-*` (§16): aqui a cor vem das classes
   contextuais `.table-*`/`.list-group-item-*` (tonalidades próprias do BS),
   que NENHUM dos 11 CSS do tema tamava (confirmado por injeção sintética).
   Destoam do operator ("sem blocos coloridos vivos; acentos finos").

   Aqui cada variante vira superfície SOFT no mesmo espírito dos
   `.alert-*`/`.badge-*` (§13) e dos utilitários `.bg-*` (§16): fundo soft
   neutro/semântico + texto sóbrio na cor semântica + faixa fina de cor à
   esquerda (3px, na 1ª célula da linha ou na borda do item de lista) como
   acento. `!important` p/ vencer o BS (o tema carrega depois). Mantém
   neutros já sóbrios (`.table-active`/`.table-light`/`.table-dark`).
   Só aparência; reversível; sem mudança de PHP/JS. Validado ao vivo
   (injeção sintética) antes de gravar: vivo → soft.                       */
/* Linhas de tabela contextuais (fundo na linha + células p/ vencer o BS) */
.table-primary, .table-primary>th, .table-primary>td,
.table-info, .table-info>th, .table-info>td{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
}
.table-secondary, .table-secondary>th, .table-secondary>td{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-text) !important;
}
.table-success, .table-success>th, .table-success>td{
  background-color: var(--flux-success-soft) !important;
  color: #145737 !important;
}
.table-danger, .table-danger>th, .table-danger>td{
  background-color: var(--flux-danger-soft) !important;
  color: #8a271c !important;
}
.table-warning, .table-warning>th, .table-warning>td{
  background-color: var(--flux-warning-soft) !important;
  color: #7a5800 !important;
}
/* Acento fino de cor na 1ª célula da linha (marcador operator) */
.table-primary>td:first-child, .table-primary>th:first-child{ border-left: 3px solid var(--flux-primary) !important; }
.table-info>td:first-child, .table-info>th:first-child{ border-left: 3px solid var(--flux-info) !important; }
.table-secondary>td:first-child, .table-secondary>th:first-child{ border-left: 3px solid var(--flux-border-strong) !important; }
.table-success>td:first-child, .table-success>th:first-child{ border-left: 3px solid var(--flux-success) !important; }
.table-danger>td:first-child, .table-danger>th:first-child{ border-left: 3px solid var(--flux-danger) !important; }
.table-warning>td:first-child, .table-warning>th:first-child{ border-left: 3px solid var(--flux-warning) !important; }
/* Itens contextuais de list-group */
.list-group-item-primary,
.list-group-item-info{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-primary-700) !important;
  border-left: 3px solid var(--flux-primary) !important;
}
.list-group-item-info{ border-left: 3px solid var(--flux-info) !important; }
.list-group-item-secondary{
  background-color: var(--flux-surface-2) !important;
  color: var(--flux-text) !important;
  border-left: 3px solid var(--flux-border-strong) !important;
}
.list-group-item-success{
  background-color: var(--flux-success-soft) !important;
  color: #145737 !important;
  border-left: 3px solid var(--flux-success) !important;
}
.list-group-item-danger{
  background-color: var(--flux-danger-soft) !important;
  color: #8a271c !important;
  border-left: 3px solid var(--flux-danger) !important;
}
.list-group-item-warning{
  background-color: var(--flux-warning-soft) !important;
  color: #7a5800 !important;
  border-left: 3px solid var(--flux-warning) !important;
}

/* ------------------------------------------------------------------ */
/* §18 — Outline buttons semânticos + destaque <mark>/.mark (31ª rodada) */
/* Chrome reutilizável do bootstrap.min.css ainda não coberto:          */
/*  (a) .btn-outline-success/-danger/-warning/-info expõem o TEXTO na   */
/*      cor VIVA do BS (verde rgb(40,167,69), vermelho rgb(220,53,69),  */
/*      âmbar rgb(255,193,7), azul rgb(33,150,243)); a borda já vinha    */
/*      neutralizada pelo tema, mas o texto destoa do operator.         */
/*      → realinha o texto às cores semânticas SÓBRIAS do operator.     */
/*  (b) <mark> (destaque de busca) vinha em AMARELO PURO rgb(255,255,0); */
/*      .mark em creme. → superfície amber soft sóbria + texto navy +   */
/*      cantos retos. Espírito dos .alert-*/.badge-* (§13) e .bg-* (§16).*/
/* CSS-only, reversível; !important p/ vencer o BS (carrega antes).     */
.btn-outline-success{ color: var(--flux-success) !important; }
.btn-outline-danger{ color: var(--flux-danger) !important; }
.btn-outline-warning{ color: var(--flux-warning) !important; }
.btn-outline-info{ color: var(--flux-info, var(--flux-primary)) !important; }
mark,
.mark{
  background-color: var(--flux-warning-soft, #fbf2da) !important;
  color: var(--flux-text, #1b2735) !important;
  padding: .15em .35em;
  border-radius: var(--flux-radius, 3px) !important;
}

/* §19 — Bordas semânticas + <code> + .text-warning (32ª rodada) */
/* Chrome reutilizável do bootstrap.min.css ainda não coberto:          */
/*  (a) utilitários .border-success/-danger/-warning/-info/-primary     */
/*      vinham com a cor VIVA do BS (verde rgb(40,167,69), vermelho      */
/*      rgb(220,53,69), âmbar rgb(255,193,7), ciano rgb(23,162,184),     */
/*      azul rgb(0,123,255)). → realinha às cores SÓBRIAS do operator.   */
/*  (b) o elemento <code> renderizava em ROSA VIVO rgb(232,62,140)       */
/*      (#e83e8c, default do BS) sobre fundo transparente → bloco loud.  */
/*      → superfície soft + texto navy + borda fina neutra + cantos      */
/*      retos (espírito de kbd/input-group-text já sóbrios).             */
/*  (c) .text-warning era o único .text-* ainda VIVO (âmbar             */
/*      rgb(255,193,7)); -success/-danger/-info já resolvem p/ tokens.   */
/* CSS-only, reversível; !important p/ vencer o BS (carrega antes).     */
.border-success{ border-color: var(--flux-success) !important; }
.border-danger{ border-color: var(--flux-danger) !important; }
.border-warning{ border-color: var(--flux-warning) !important; }
.border-info{ border-color: var(--flux-info, var(--flux-primary)) !important; }
.border-primary{ border-color: var(--flux-primary) !important; }
.text-warning{ color: var(--flux-warning) !important; }
code{
  color: var(--flux-text, #1b2735) !important;
  background: var(--flux-surface-2, #f3f5f8) !important;
  border: 1px solid var(--flux-border, #d3dae3) !important;
  border-radius: var(--flux-radius, 3px) !important;
  padding: 1px 5px !important;
}

/* §20 — Texto de validação de formulário .invalid-feedback/.valid-feedback (33ª rodada) */
/* Chrome reutilizável do bootstrap.min.css ainda não coberto: as mensagens  */
/* de validação do BS4 vinham com a cor VIVA do framework — .invalid-feedback */
/* em vermelho rgb(220,53,69) (#dc3545) e .valid-feedback em verde            */
/* rgb(40,167,69) (#28a745). A BORDA dos inputs .is-invalid/.is-valid já era  */
/* sóbria (flux-mod-detail §validation), mas o TEXTO da mensagem permanecia   */
/* loud — gap análogo ao .text-warning da §19. → realinha às cores SÓBRIAS    */
/* do operator (danger rgb(192,57,43) / success rgb(31,138,84)).              */
/* CSS-only, reversível; !important p/ vencer o BS (carrega antes).           */
.invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback{ color: var(--flux-danger, #c0392b) !important; }
.valid-feedback,
.form-control.is-valid ~ .valid-feedback{ color: var(--flux-success, #1f8a54) !important; }

/* §21 — Item ativo de dropdown .dropdown-item.active/:active (34ª rodada)     */
/* Chrome reutilizável ainda não coberto: o com-style.css (CSS legado do       */
/* produto) pinta .dropdown-item.active/:active como BLOCO AZUL SÓLIDO          */
/* rgb(28,103,191) e o tema dá texto navy rgb(27,39,53) por cima → bloco        */
/* saturado de baixo contraste, destoando do padrão operator de item ativo     */
/* (§14 .list-group-item.active / .nav-pills, §17 linhas .table-*): superfície  */
/* soft + acento fino à esquerda + texto sóbrio. O bootstrap.min.css traz o     */
/* azul ainda mais vivo rgb(0,123,255). Nenhum dos 11 CSS do tema tamava o      */
/* .dropdown-item.active genérico (flyouts do corpo + menu superior).           */
/* → vira superfície soft operator + faixa primária fina à esquerda (3px) +     */
/* texto navy + cantos retos. CSS-only, reversível; !important p/ vencer o      */
/* com-style/bootstrap (ambos carregam antes; o navy vence o branco do          */
/* .dashboard-right .mainmenu por !important, mantendo legibilidade).           */
.dropdown-item.active,
.dropdown-item:active{
  background: var(--flux-primary-soft, #eaf1f8) !important;
  color: var(--flux-text, #1b2735) !important;
  border-left: 3px solid var(--flux-primary, #1f5fa8) !important;
  border-radius: var(--flux-radius, 3px) !important;
}

/* §22 — accent-color dos controles de formulário NATIVOS (35ª rodada)         */
/* Chrome reutilizável ainda não coberto: os controles de formulário nativos    */
/* (checkbox/radio/range) e os elementos <progress>/<meter> usam accent-color   */
/* :auto, ou seja, o NAVEGADOR os pinta com seu acento padrão VIVO — azul       */
/* (~rgb(0,123,255)) nos checkbox/radio marcados e na trilha do range, e o      */
/* gradiente VERDE/AMARELO do <meter> — destoando do navy sóbrio do operator.   */
/* O §15 só tamou os custom-controls FALSOS do Bootstrap 4 (a caixinha          */
/* desenhada via ::before); os controles NATIVOS (input.ace, togCol do seletor  */
/* de colunas, etc.) nunca tiveram o acento tamado por nenhum dos 11 CSS do     */
/* tema. accent-color preserva a FORMA nativa do widget (consistente com a      */
/* decisão de manter selects/checkbox nativos) e só recolore o acento para o    */
/* azul primário operator. CSS-only, reversível, baixo risco.                   */
input[type=checkbox],
input[type=radio],
input[type=range],
progress,
meter{
  accent-color: var(--flux-primary, #1f5fa8);
}

/* §23 — Estado ATIVO/pressionado dos outline buttons (36ª rodada)             */
/* Chrome reutilizável do bootstrap.min.css ainda não coberto: o estado         */
/* .active/:active (e .show>.dropdown-toggle) dos .btn-outline-* PREENCHE o      */
/* botão com a cor VIVA SÓLIDA do BS — primary rgb(0,123,255), success          */
/* rgb(40,167,69), danger rgb(220,53,69), warning rgb(255,193,7), info          */
/* rgb(33,150,243), secondary rgb(108,117,125) — com texto branco. O §18 só     */
/* tamou o TEXTO do estado NORMAL (botão vazado); o estado selecionado/toggle   */
/* (usado em .btn-group-toggle e em toggles ON/OFF) continuava virando um       */
/* BLOCO colorido vivo, destoando do operator. → vira superfície soft + texto   */
/* sóbrio semântico + borda fina semântica + cantos retos, no espírito do       */
/* estado ativo de §14 (.list-group-item.active) e §21 (.dropdown-item.active). */
/* CSS-only, reversível; !important p/ vencer o BS (.active tem especificidade  */
/* alta mas sem !important).                                                    */
.btn-outline-primary.active,
.btn-outline-primary:active,
.show > .btn-outline-primary.dropdown-toggle{
  background-color: var(--flux-primary-soft, #eaf1f8) !important;
  color: var(--flux-primary, #1f5fa8) !important;
  border-color: var(--flux-primary, #1f5fa8) !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-outline-secondary.active,
.btn-outline-secondary:active,
.show > .btn-outline-secondary.dropdown-toggle{
  background-color: var(--flux-surface-2, #f3f5f8) !important;
  color: var(--flux-text-muted, #5c6878) !important;
  border-color: var(--flux-border, #d3dae3) !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-outline-success.active,
.btn-outline-success:active,
.show > .btn-outline-success.dropdown-toggle{
  background-color: var(--flux-success-soft, #e7f3ec) !important;
  color: var(--flux-success, #1f8a54) !important;
  border-color: var(--flux-success, #1f8a54) !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-outline-danger.active,
.btn-outline-danger:active,
.show > .btn-outline-danger.dropdown-toggle{
  background-color: var(--flux-danger-soft, #fae9e7) !important;
  color: var(--flux-danger, #c0392b) !important;
  border-color: var(--flux-danger, #c0392b) !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-outline-warning.active,
.btn-outline-warning:active,
.show > .btn-outline-warning.dropdown-toggle{
  background-color: var(--flux-warning-soft, #fbf2da) !important;
  color: var(--flux-warning, #7a5800) !important;
  border-color: var(--flux-warning, #7a5800) !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-outline-info.active,
.btn-outline-info:active,
.show > .btn-outline-info.dropdown-toggle{
  background-color: var(--flux-info-soft, #eaf1f8) !important;
  color: var(--flux-info, #1f5fa8) !important;
  border-color: var(--flux-info, #1f5fa8) !important;
  border-radius: var(--flux-radius, 3px) !important;
}

/* ===== 24. CHROME NEUTRO DESSATURADO DO BOOTSTRAP =================
   (.custom-file-label::after "Selecionar arquivo" / .jumbotron) →
   tokens operator. O botão do seletor de arquivo e o .jumbotron usam
   o cinza próprio do Bootstrap #e9ecef rgb(233,236,239) (texto cinza
   rgb(73,80,87)) — dessaturado, mas FORA do sistema de superfícies/
   cantos do operator (é o MESMO cinza que a §8 do flux-modern-theme já
   realinhou no .thead-light). Aqui essas duas superfícies são
   realinhadas aos tokens operator: surface-2 + texto navy/muted +
   borda fina neutra + cantos retos. Só aparência; reversível. */
.custom-file-label::after{
  background-color: var(--flux-surface-2, #f3f5f8) !important;
  color: var(--flux-text-muted, #5c6878) !important;
  border-left: 1px solid var(--flux-border, #d3dae3) !important;
  border-radius: 0 var(--flux-radius, 3px) var(--flux-radius, 3px) 0 !important;
}
.custom-file-label{
  border-radius: var(--flux-radius, 3px) !important;
}
.jumbotron{
  background-color: var(--flux-surface-2, #f3f5f8) !important;
  color: var(--flux-text, #1b2735) !important;
  border-radius: var(--flux-radius, 3px) !important;
}

/* ===== 25. AUTOFILL DO NAVEGADOR (:-webkit-autofill) ==============
   Quando o Chrome/WebKit preenche automaticamente um campo (login,
   cadastro de contas, formulários em geral), ele pinta o input com a
   superfície VIVA própria do navegador (azul-claro ~rgb(232,240,254))
   e força a cor do texto — bloco destoante do operator que NENHUM dos
   CSS do tema cobria (varredura confirmou 0 regras de autofill). Como
   o navegador impede sobrescrever o background diretamente, usa-se o
   truque padrão: box-shadow inset cobrindo o input com a superfície
   operator + -webkit-text-fill-color navy + transition longa p/ evitar
   o flash de cor do autofill. Só aparência; reversível. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--flux-surface, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--flux-surface, #ffffff) inset !important;
  -webkit-text-fill-color: var(--flux-text, #1b2735) !important;
  caret-color: var(--flux-text, #1b2735) !important;
  border: 1px solid var(--flux-border, #d3dae3) !important;
  border-radius: var(--flux-radius, 3px) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* ===== 26. DATE/TIME PICKER GijgoJS (.gj-picker) ==================
   O arquivo "jquery.datetimepicker.min.css" carregado é, na verdade, a
   biblioteca GijgoJS (classes .gj-*), registrada e inicializada
   (window.gj + $.fn.datepicker/$.fn.datetimepicker). O tema Material
   padrão (.gj-picker-md) pinta o calendário com AZUL MATERIAL VIVO e
   CÍRCULOS: dia selecionado em #1976d2 rgb(25,118,210) em círculo
   (border-radius:50%), "hoje" em #1976d2, item ativo da lista de horas
   em INDIGO #3f51b5 rgb(63,81,181) e a seta em #2196f3 rgb(33,150,243)
   — blocos vivos + cantos redondos que destoam do operator. Nenhum dos
   CSS do tema cobria .gj-* (varredura confirmou 0 overrides). Realinhado
   ao navy/primary operator com cantos retos. Cobre também o tema
   .gj-picker-bootstrap (alinha raio/acento). Só cor/raio; reversível. */
.gj-picker-md table tr td.today div,
.gj-picker-bootstrap table tr td.today div{
  color: var(--flux-primary, #1f5fa8) !important;
}
.gj-picker-md table tr td.selected.gj-cursor-pointer div,
.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div{
  background: var(--flux-primary, #1f5fa8) !important;
  background-color: var(--flux-primary, #1f5fa8) !important;
  border-color: var(--flux-primary, #1f5fa8) !important;
  color: #fff !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.gj-picker-md table tr td.gj-cursor-pointer div:hover,
.gj-picker-md table tr td.focused div{
  border-radius: var(--flux-radius, 3px) !important;
}
.gj-list-md-active{
  color: var(--flux-primary, #1f5fa8) !important;
}
.gj-picker-md .arrow-end{
  border-color: var(--flux-primary, #1f5fa8) !important;
}

/* ===== 27. GijgoJS — restante do chrome do picker (header/footer/
   arrow-begin/switch) + checkbox/slider Material =====================
   §26 tamou só as CÉLULAS do calendário (dia/hoje/lista/arrow-end). O
   RESTANTE do widget Gijgo Material continuava AZUL MATERIAL VIVO: a
   FAIXA de cabeçalho .gj-picker-md [role=header] em bloco sólido
   #2196f3 rgb(33,150,243) (aparece no date/datetime/TIME picker), os
   botões de ação do rodapé [role=footer] button em texto #2196f3, a
   seta-início/[role=arrow] e o [role=switch] em #2196f3, além do
   checkbox .gj-checkbox-md (indigo #536dfe rgb(83,109,254)) e do slider
   .gj-slider-md (progress/handle indigo #536dfe). Tudo realinhado ao
   navy/primary operator --flux-primary com cantos retos. Só cor/raio;
   reversível; preserva toda a funcionalidade do picker. */
.gj-picker-md [role="header"]{
  background: var(--flux-primary, #1f5fa8) !important;
  background-color: var(--flux-primary, #1f5fa8) !important;
  border-radius: var(--flux-radius, 3px) var(--flux-radius, 3px) 0 0 !important;
}
.gj-picker-md [role="footer"] button.gj-button-md{
  color: var(--flux-primary, #1f5fa8) !important;
}
.gj-picker-md .arrow-begin,
.gj-picker-md [role="body"] [role="arrow"]{
  background: var(--flux-primary, #1f5fa8) !important;
  background-color: var(--flux-primary, #1f5fa8) !important;
}
.gj-picker-md [role="switch"]{
  background: var(--flux-primary, #1f5fa8) !important;
  background-color: var(--flux-primary, #1f5fa8) !important;
}
.gj-checkbox-md input[type="checkbox"]:checked + span{
  border-color: var(--flux-primary, #1f5fa8) !important;
}
.gj-checkbox-md input[type="checkbox"]:checked + span::after{
  background-color: var(--flux-primary, #1f5fa8) !important;
}
.gj-slider-md [role="progress"],
.gj-slider-md [role="handle"]{
  background-color: var(--flux-primary, #1f5fa8) !important;
}

/* ===== 28. Botões legados loud do produto: .btn-line-purple +
   .btn-outline-info (com-style/global-style) ==========================
   A família .btn-line-* é recolorida pelo tema (flux-modern-theme §5)
   para tons OPERATOR sólidos sóbrios — warning=âmbar rgb(192,138,0),
   danger=vermelho rgb(192,57,43), blue=navy rgb(31,95,168) — mas a
   variante .btn-line-purple ficou de fora e seguia em INDIGO MATERIAL
   VIVO rgb(63,81,181) (#3f51b5), bloco que destoa do operator. E o
   .btn-outline-info é REDEFINIDO pelo com-style.css em AZUL MATERIAL
   VIVO rgb(33,150,243) (#2196f3) no texto/borda e PREENCHIMENTO sólido
   #2196f3 no hover/active — vencendo o §18 (que tamava só o
   .btn-outline-info do bootstrap.min.css). Realinhados ao navy/primary
   operator (--flux-primary). .btn-line-purple permanece SÓLIDO
   (consistente com a família line) em navy; .btn-outline-info vira
   contorno operator com hover em superfície soft. !important p/ vencer
   o com-style/global-style (originais sem !important / alta
   especificidade). Só cor/raio; reversível; nenhuma função alterada. */
.btn-line-purple{
  background-color: var(--flux-primary, #1f5fa8) !important;
  border-color: var(--flux-primary, #1f5fa8) !important;
  color: #fff !important;
  border-radius: var(--flux-radius, 3px) !important;
}
.btn-line-purple:hover,
.btn-line-purple:focus,
.btn-line-purple:active,
.btn-line-purple.active{
  background-color: var(--flux-navy, #16273d) !important;
  border-color: var(--flux-navy, #16273d) !important;
  color: #fff !important;
}
.btn-outline-info{
  color: var(--flux-info, #1f5fa8) !important;
  border-color: var(--flux-info, #1f5fa8) !important;
  background-color: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show > .btn-outline-info.dropdown-toggle{
  color: var(--flux-info, #1f5fa8) !important;
  background-color: var(--flux-info-soft, #eaf1f8) !important;
  border-color: var(--flux-info, #1f5fa8) !important;
}
/* Faixa de hover Material azul do dropdown floating-label → soft operator */
#floating-label li a:hover{
  background-color: var(--flux-primary-soft, #eaf1f8) !important;
  color: var(--flux-text, #1b2735) !important;
}

/* ===== 29. Toggle ON/OFF do produto: .onoffswitch-inner (checkbox.css) ==
   Widget de alternância ON/OFF (distinto dos toggles .slider.round que a
   §10 já tamou). O checkbox.css pinta as duas metades do trilho com cor
   VIVA: a metade "Active/ON" em VERDE Bootstrap-3 rgb(92,184,92) (#5cb85c)
   e a metade "Inactive/OFF" em VERMELHO rgb(217,83,79) (#d9534f) /
   rgb(210,50,45) — blocos saturados que destoam do console operator
   sóbrio. Nenhum dos CSS do tema cobria .onoffswitch-* (checkbox.css é a
   biblioteca, não um override). Mantém a SEMÂNTICA on/off, só desatura
   para os tokens sóbrios do operator: verde --flux-success (#1f8a54) e
   vermelho --flux-danger (#c0392b). As variantes (_enable/_on/_true/
   _accept) invertem os lados ::before/::after — agrupadas conforme o
   mapeamento do checkbox.css. !important p/ vencer a lib. Só cor;
   reversível; comportamento/estado do toggle preservado. */
.onoffswitch-inner::before,
.onoffswitch-inner_enable::before,
.onoffswitch-inner_on::after,
.onoffswitch-inner_true::before,
.onoffswitch-inner_accept::before{
  background-color: var(--flux-success, #1f8a54) !important;
}
.onoffswitch-inner::after,
.onoffswitch-inner_enable::after,
.onoffswitch-inner_on::before,
.onoffswitch-inner_true::after,
.onoffswitch-inner_accept::after{
  background-color: var(--flux-danger, #c0392b) !important;
}

/* ===== 30. Texto VERMELHO PURO de .alert-danger (com-style.css) → sóbrio ==
   Achado em varredura de DOM real (43ª rodada, dashboard): o painel de KPIs
   "Esta semana / Este mês" usa `.alert-danger` como UTILITÁRIO de cor de
   texto (fundo transparente) para métricas negativas. O com-style.css define
   `.alert-danger{ color:#ff0000 }` (VERMELHO PURO rgb(255,0,0)) e VENCE a
   regra do tema (flux-modern-theme.css define rgb(138,39,28) sem !important,
   mesma especificidade, mas o com-style carrega depois). Resultado: texto
   vermelho-puro saturado, destoante do operator ("acentos finos; sem cor
   viva"). bootstrap.min.css traria #721c24; o tema quer #8a271c.
   → reafirma a cor de texto danger SÓBRIA do operator (#8a271c rgb(138,39,28)),
   exatamente a já usada em §13 (badge-danger), §16 (.bg-danger) e §17
   (.table-danger). !important p/ vencer o com-style. Só cor; reversível;
   não toca .alert-success/.alert-warning (já sóbrios) nem o fundo dos
   alert boxes. Validado ao vivo: rgb(255,0,0) → rgb(138,39,28). */
.alert-danger{ color: #8a271c !important; }

/* ===== 31. Botão sólido AZUL .btn.btn-secondary + texto azul .card .btn-link
   (com-style.css) → operator sóbrio ==================================
   Achado em varredura de DOM real (43ª rodada, dashboard): o botão
   "Ver tudo" dos cards é `.btn.btn-secondary` e renderiza como BLOCO AZUL
   SÓLIDO rgb(28,103,191) (#1c67bf) com texto branco — um azul do com-style.css
   DISTINTO do azul-operador (--flux-primary #1f5fa8 rgb(31,95,168)). O tema
   (flux-modern-theme.css) já tamava `.btn-secondary` para superfície sóbria,
   mas com especificidade 0,1,0; o com-style define `.btn.btn-secondary`
   (0,2,0) com !important e VENCE — deixando o botão azul-vivo. O mesmo
   #1c67bf vaza como TEXTO em `.card .btn-link` (ícone de menu "⋮" dos cards),
   `.pop_md .btn-secondary`, `form .btn-secondary` e nos secundários de
   `#search_bar`/`#update_bar`. Nenhum dos §1-30 cobria `.btn.btn-secondary`.
   Bloco azul-vivo + azul fora do token destoam do operator ("sem blocos
   coloridos vivos; acentos finos; consistência de cor").

   → `.btn.btn-secondary` vira botão de superfície sóbrio (fundo --flux-surface
   + borda fina --flux-border-strong + texto --flux-text), no espírito do
   .btn-secondary do tema; e o azul de TEXTO #1c67bf é realinhado ao
   --flux-primary operador. Casa a especificidade do com-style
   (`.btn.btn-secondary`, 0,2,0) e carrega depois (flux-mod-global vem após
   com-style), com !important p/ vencer. Validado AO VIVO no dashboard
   (transição de 0.12s desligada p/ medir o valor assentado): bloco azul
   rgb(28,103,191) → branco rgb(255,255,255) + texto navy rgb(27,39,53) +
   borda rgb(183,193,205); ⋮ rgb(28,103,191) → primary rgb(31,95,168).
   Só cor/superfície; reversível; sem mudança de PHP/JS; preserva a função
   do botão e a transição de hover. Beneficia todas as telas de uma vez. */
.btn.btn-secondary{
  background: var(--flux-surface, #fff) !important;
  background-color: var(--flux-surface, #fff) !important;
  border: 1px solid var(--flux-border-strong, #b9c2cf) !important;
  color: var(--flux-text, #1b2735) !important;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus{
  background: var(--flux-surface-2, #f3f5f8) !important;
  background-color: var(--flux-surface-2, #f3f5f8) !important;
  color: var(--flux-text, #1b2735) !important;
}
.pop_md .btn-secondary,
form .btn-secondary,
#search_bar button.btn.btn-secondary,
#update_bar button.btn.btn-secondary,
.card .btn-link{
  color: var(--flux-primary, #1f5fa8) !important;
}

/* ===== 32. Rótulos legados ACE "arrowed" .label-inverse_blue / _red ============
   Achado na 45ª rodada (DIDs `did/did_list`, validado por injeção ao vivo): as
   pílulas de status `.label.label-sm.label-inverse_blue.arrowed_blue-in` (ex.:
   "Release") renderizam como BLOCO AZUL VIVO sólido rgb(28,103,191) com texto
   branco e uma SETA (notch) triangular feita por `::before`/`::after` com
   border-color na mesma cor viva (global-style.css/com-style.css legados). É um
   bloco colorido vivo que destoa do operator — os §13/flux-mod-detail já tinham
   tamado os `.label-success/danger/warning/info` semânticos para pílulas SUAVES,
   mas as variantes "inverse_*" (tema admin ACE antigo) não estavam cobertas por
   nenhum §1-31.
   Correção (só cor/superfície; preserva a forma de fita/seta e o texto):
   → `.label-inverse_blue` vira pílula INFO suave (fundo --flux-info-soft, texto
     --flux-info) e `.label-inverse_red` vira DANGER suave; as setas `::before`
     (notch esquerdo) e `::after` (notch direito) têm o border-color realinhado à
     mesma superfície suave para que a ponta continue "fundida" à pílula. Cantos
     retos 3px. Reversível; sem mudança de PHP/JS. Especificidade reforçada com
     `span.` e `.label.` para vencer o legado; carrega depois (flux-mod-global). */
.label.label-inverse_blue,
span.label-inverse_blue{
  background: var(--flux-info-soft, #eaf1f8) !important;
  background-color: var(--flux-info-soft, #eaf1f8) !important;
  color: var(--flux-info, #1f5fa8) !important;
  border-radius: 3px !important;
}
.label-inverse_blue.arrowed_blue-in::before,
.label-inverse_blue.arrowed_blue::before{
  border-color: var(--flux-info-soft, #eaf1f8) var(--flux-info-soft, #eaf1f8) var(--flux-info-soft, #eaf1f8) transparent !important;
}
.label-inverse_blue.arrowed_blue-in-right::after,
.label-inverse_blue.arrowed_blue::after{
  border-color: var(--flux-info-soft, #eaf1f8) transparent var(--flux-info-soft, #eaf1f8) var(--flux-info-soft, #eaf1f8) !important;
}
.label.label-inverse_red,
span.label-inverse_red{
  background: var(--flux-danger-soft, #fae9e7) !important;
  background-color: var(--flux-danger-soft, #fae9e7) !important;
  color: var(--flux-danger, #c0392b) !important;
  border-radius: 3px !important;
}
.label-inverse_red.arrowed_red-in::before,
.label-inverse_red.arrowed_red::before{
  border-color: var(--flux-danger-soft, #fae9e7) var(--flux-danger-soft, #fae9e7) var(--flux-danger-soft, #fae9e7) transparent !important;
}
.label-inverse_red.arrowed_red-in-right::after,
.label-inverse_red.arrowed_red::after{
  border-color: var(--flux-danger-soft, #fae9e7) transparent var(--flux-danger-soft, #fae9e7) var(--flux-danger-soft, #fae9e7) !important;
}
/* Fim do override GLOBAL operator. (inclui §13 badges, §14 progress/list-group/nav-pills, §15 custom-controls, §16 utilitários .bg-* semânticos, §17 classes contextuais .table-*/.list-group-item-*, §18 outline buttons semânticos + mark, §19 bordas semânticas + code + text-warning, §20 texto de validação .invalid-feedback/.valid-feedback, §21 item ativo de dropdown .dropdown-item.active/:active, §22 accent-color dos controles de formulário nativos, §23 estado ativo/pressionado dos outline buttons, §24 chrome neutro dessaturado .custom-file-label::after/.jumbotron, §25 autofill do navegador :-webkit-autofill, §26 date/time picker GijgoJS .gj-picker, §27 restante do chrome do picker GijgoJS header/footer/arrow-begin/switch + checkbox/slider Material, §28 botões legados .btn-line-purple + .btn-outline-info → operator, §29 toggle ON/OFF .onoffswitch-inner verde/vermelho vivos → sóbrios, §30 texto vermelho-puro de .alert-danger (com-style) → danger sóbrio #8a271c, §31 botão azul .btn.btn-secondary + texto azul .card .btn-link (com-style) → operator sóbrio, §32 rótulos legados ACE .label-inverse_blue/_red "arrowed" (bloco azul/vermelho vivo + seta) → pílulas info/danger suaves) */