/*
  A FOLHA DESTA CASA — só o que a folha do ERP não tem como alcançar.

  A cara das telas vem do `assets/adminlte4/css/adminlte.min.css` + do
  `css/legacy-shell.css`, os MESMOS arquivos que o ERP carrega, na MESMA
  ordem do `Templates/Master.html` (régua: `auditoria/checar_pele.py`). Esta
  folha entra por último e cada bloco abaixo é justificado: ou é a TRADUÇÃO
  de uma regra do ERP que não pega na marcação daqui, ou é uma tela que no
  ERP é outra página e aqui é a mesma.

  Nada aqui inventa aparência. O que existia só porque alguém achou bonito
  foi apagado — a lista do que saiu está no rodapé do arquivo.
*/

/* ===========================================================================
   1) BOTÕES DE AÇÃO — tradução literal das regras do `legacy-shell.css`.

   No ERP a folha pinta o botão olhando o JavaScript do IntraWeb no atributo:
   `.app-main .btn-app[onclick*="'Novo'"]` (28 regras). Aqui o
   `moldura.js:152-158` traduz `onclick="SetaAcao('Novo')"` em
   `data-acao="novo" data-acao-erp="Novo"` — HTML limpo, sem JavaScript no
   atributo. O seletor do ERP deixa de casar e o botão sai cinza.

   A tradução é 1 para 1: cada `[onclick*="'X'"]` do ERP virou
   `[data-acao-erp="X"]`, com as MESMAS cores, sombras e medidas — dá para
   conferir lado a lado, o código entre aspas é o mesmo dos dois lados.

   Cada regra leva TAMBÉM o par em `data-acao` (o nome canônico do `ACOES`
   do `moldura.js:92-102`), porque as telas portadas à mão escrevem ora um
   atributo, ora o outro: há 40 botões em `www/js/*.js` que só têm
   `data-acao`.
   =========================================================================== */

/* Novo = CTA verde sólido */
.app-main .btn-app[data-acao-erp="Novo"],
.app-main .btn-app[data-acao-erp="Novs"],
.app-main .btn-app[data-acao="novo"] {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, .28) !important;
}

/* Novs (cadastro resumido) = verde mais suave, variante do Novo */
.app-main .btn-app[data-acao-erp="Novs"] {
  background: linear-gradient(135deg, #0d9488, #14b8a6) !important;
  box-shadow: 0 3px 10px rgba(13, 148, 136, .25) !important;
}

.app-main .btn-app[data-acao-erp="Novo"]:hover,
.app-main .btn-app[data-acao="novo"]:hover {
  background: linear-gradient(135deg, #15803d, #16a34a) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.app-main .btn-app[data-acao-erp="Novs"]:hover {
  background: linear-gradient(135deg, #0f766e, #0d9488) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Sair = outline vermelho */
.app-main .btn-app[data-acao-erp="Sair"],
.app-main .btn-app[data-acao="sair"] {
  background: #fff !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

.app-main .btn-app[data-acao-erp="Sair"]:hover,
.app-main .btn-app[data-acao="sair"]:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
}

body.theme-dark .app-main .btn-app[data-acao-erp="Sair"],
body.theme-dark .app-main .btn-app[data-acao="sair"] {
  background: #131c2e !important;
  border-color: #7f1d1d !important;
  color: #f87171 !important;
}

/* Relatórios (Imp) = cinza claro, neutro.

   ⚠️ SÓ o `Imp`. O ERP escreve `[onclick*="'Imp'"]`, que NÃO casa com
   `SetaAcao('Imx')` — o botão "Relatórios" do `Imx` fica branco lá, e foi
   assim que a medição lado a lado pegou a diferença (o ERP branco, aqui
   cinza). O `ACOES` do `moldura.js` manda `Imp` E `Imx` para o mesmo
   `data-acao="relatorio"`, então o `:not` devolve a distinção. */
.app-main .btn-app[data-acao-erp="Imp"],
.app-main .btn-app[data-acao="relatorio"]:not([data-acao-erp="Imx"]) {
  background: #f1f5f9 !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

.app-main .btn-app[data-acao-erp="Imp"]:hover,
.app-main .btn-app[data-acao="relatorio"]:not([data-acao-erp="Imx"]):hover {
  background: #e2e8f0 !important;
  color: var(--lmc-brand) !important;
}

.app-main .btn-app[data-acao-erp="Imp"] > i,
.app-main .btn-app[data-acao="relatorio"]:not([data-acao-erp="Imx"]) > i {
  color: var(--lmc-brand);
}

body.theme-dark .app-main .btn-app[data-acao-erp="Imp"],
body.theme-dark .app-main .btn-app[data-acao="relatorio"]:not([data-acao-erp="Imx"]) {
  background: #131c2e !important;
  border-color: #243049 !important;
  color: #cbd5e1 !important;
}

/* Salvar (Post) = verde sólido */
.app-main .btn[data-acao-erp="Post"],
.app-main .btn-app[data-acao-erp="Post"],
.app-main .btn[data-acao="salvar"],
.app-main .btn-app[data-acao="salvar"] {
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(22, 163, 74, .28) !important;
  font-weight: 600;
}

.app-main .btn[data-acao-erp="Post"]:hover,
.app-main .btn-app[data-acao-erp="Post"]:hover,
.app-main .btn[data-acao="salvar"]:hover,
.app-main .btn-app[data-acao="salvar"]:hover {
  background: linear-gradient(135deg, #15803d, #16a34a) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Cancelar = vermelho, pareando com o Salvar verde */
.app-main .btn[data-acao-erp="Cancel"],
.app-main .btn-app[data-acao-erp="Cancel"],
.app-main .btn[data-acao="cancelar"],
.app-main .btn-app[data-acao="cancelar"] {
  background: #dc2626 !important;
  border: 1px solid #dc2626 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(220, 38, 38, .25) !important;
}

.app-main .btn[data-acao-erp="Cancel"] > i,
.app-main .btn-app[data-acao-erp="Cancel"] > i,
.app-main .btn[data-acao="cancelar"] > i,
.app-main .btn-app[data-acao="cancelar"] > i {
  color: #fff !important;
}

.app-main .btn[data-acao-erp="Cancel"]:hover,
.app-main .btn-app[data-acao-erp="Cancel"]:hover,
.app-main .btn[data-acao="cancelar"]:hover,
.app-main .btn-app[data-acao="cancelar"]:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

/* Fechar (Fecc) = cinza sólido */
.app-main .btn[data-acao-erp="Fecc"],
.app-main .btn-app[data-acao-erp="Fecc"],
.app-main .btn[data-acao="fechar"],
.app-main .btn-app[data-acao="fechar"] {
  background: #6c757d !important;
  border: 1px solid #6c757d !important;
  color: #fff !important;
  box-shadow: none !important;
}

.app-main .btn[data-acao-erp="Fecc"] > i,
.app-main .btn-app[data-acao-erp="Fecc"] > i,
.app-main .btn[data-acao-erp="Fecc"] > svg,
.app-main .btn-app[data-acao-erp="Fecc"] > svg,
.app-main .btn[data-acao="fechar"] > i,
.app-main .btn-app[data-acao="fechar"] > i,
.app-main .btn[data-acao="fechar"] > svg,
.app-main .btn-app[data-acao="fechar"] > svg {
  color: #fff !important;
}

.app-main .btn[data-acao-erp="Fecc"]:hover,
.app-main .btn-app[data-acao-erp="Fecc"]:hover,
.app-main .btn[data-acao="fechar"]:hover,
.app-main .btn-app[data-acao="fechar"]:hover {
  background: #5c636a !important;
  border-color: #565e64 !important;
  color: #fff !important;
}

/* Repetir (Rep) = branco com borda */
.app-main .btn[data-acao-erp="Rep"],
.app-main .btn-app[data-acao-erp="Rep"] {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #475569 !important;
  box-shadow: none !important;
}

.app-main .btn[data-acao-erp="Rep"]:hover,
.app-main .btn-app[data-acao-erp="Rep"]:hover {
  background: #f1f5f9 !important;
  color: var(--lmc-brand) !important;
}

/* o rodapé do formulário: tamanho consistente entre os quatro */
.app-main .btn-app[data-acao-erp="Post"],
.app-main .btn-app[data-acao-erp="Cancel"],
.app-main .btn-app[data-acao-erp="Fecc"],
.app-main .btn-app[data-acao-erp="Rep"],
.app-main .btn-app[data-acao="salvar"],
.app-main .btn-app[data-acao="cancelar"],
.app-main .btn-app[data-acao="fechar"] {
  font-size: .88rem !important;
  padding: .5rem 1.3rem !important;
  min-width: 120px;
  justify-content: center;
}

.app-main .card .btn-secondary:not(.btn-app):not([data-acao-erp="Cancel"]):not([data-acao="cancelar"]),
.app-main .box .btn-secondary:not(.btn-app):not([data-acao-erp="Cancel"]):not([data-acao="cancelar"]) {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  color: #475569 !important;
  box-shadow: none !important;
  font-weight: 500;
}

/* botão que a tela desabilita: fica apagado, para a barra de ações não
   mudar de tamanho a cada estado */
.app-main .btn-app.disabled {
  opacity: .55;
  pointer-events: none;
}

/* ===========================================================================
   2) MENU RECOLHIDO (rail) — a empresa ativa some, como no ERP.

   O `legacy-shell.css` esconde o seletor de empresa no rail por dois
   caminhos (`.sidebar-wrapper > form` e `.app-sidebar form`), porque lá ele
   é um `<form>` com o combo do Delphi. Aqui a empresa ativa é uma pílula num
   `<div>`, então nenhuma das duas regras pega e ela ficava espremida no
   rail, virando um retângulo azul de 39px. Mesma intenção, marcação daqui.
   =========================================================================== */

.sidebar-mini.sidebar-collapse .app-sidebar .empresa-atual { display: none !important; }

@media (min-width: 992px) {
  body.sidebar-collapse .app-sidebar .empresa-atual { display: none !important; }
}

/* Telas ainda no sistema antigo: visíveis no menu, claramente indisponíveis */
.sidebar-menu .nao-migrada { opacity: .45; }

/* ===========================================================================
   3) PÁGINA PELADA — no ERP é OUTRO master, aqui é a mesma página.

   O `Templates/Masterpdv.html` não tem menu, barra de cima nem rodapé: é por
   isso que, no ERP, clicar em Novo tira o menu da frente. Aqui a página é
   uma só e quem liga o modo é o `Moldura.paginaPelada(true)`, pela classe
   `pdv-bare` no <body>.
   =========================================================================== */

body.pdv-bare { background: #f1f5f9 !important; }
body.pdv-bare .app-main { margin: 0 !important; margin-inline-start: 0 !important; min-height: 100vh; }
body.pdv-bare .app-sidebar,
body.pdv-bare .app-header,
body.pdv-bare .app-footer { display: none !important; }
body.pdv-bare .app-content > .container-fluid { padding-top: 1rem !important; }

/* ===========================================================================
   4) INÍCIO — o ranking dos 10 produtos mais vendidos.

   O `VALORES_DASHBOARD` do ERP (`U_FrmIndex.pas:1620`) escreve o ranking em
   marcação do AdminLTE 2: `progress-group` > `progress-text` +
   `progress-number` + `progress sm` > `progress-bar`. O AdminLTE 4 só
   manteve a margem do `progress-group`, e o Bootstrap 5 dá a altura da barra
   por variável. As regras abaixo devolvem o resto.
   =========================================================================== */

.app-main .progress-group { margin-bottom: 12px; }

.app-main .progress-group .progress-text {
  font-size: .86rem;
  font-weight: 600;
  color: var(--lmc-text, #1e293b);
}

.app-main .progress-group .progress-number {
  float: right;
  font-size: .82rem;
  color: var(--lmc-muted, #64748b);
}

.app-main .progress-group .progress {
  clear: both;
  height: 8px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}

.app-main .progress-group .progress-bar { border-radius: 999px; }

/* ===========================================================================
   5) MOLDURA — o que o template do ERP pede e a tela nova ainda não tem.

   O `moldura.js` encaixa um componente em cada `{%CAMPO%}`, como o IntraWeb
   faz. O que a tela ainda não sabe montar NÃO pode aparecer como `{%ALGO%}`
   cru. Isto é andaime declarado, não desenho — some quando a última tela
   fechar.

   ⚠️ A REGRA DESTA SEÇÃO É UMA SÓ: o andaime NUNCA ocupa mais espaço do que
   o componente do ERP ocuparia.

   Ela nasceu de um print do Marcio: a metade de baixo do cadastro de pedido
   era um muro de OITO faixas hachuradas empilhadas, todas com a mesma frase
   «ainda não migrado». Eram os `{%IWalerta1..9%}`, que no ERP são caixas de
   aviso VAZIAS enquanto não há o que avisar (`UDM.pas:2387`). O aviso
   honesto tinha virado a própria deformação da tela.

   O que ficou:

     .moldura-pendente        fenda de CAMPO — caixa do tamanho do campo,
                              sem texto dentro (o motivo está no `title`);
     .moldura-pendente-marca  fora da fenda — marca pequena e inline, que
                              não empurra nada de lugar;
     .moldura-pendente-texto  dentro de uma frase — um traço;
     .moldura-pendente-vazio  o ERP também deixa vazio — sem pixel nenhum;
     .moldura-pendente-grade  no lugar de uma grade, que no ERP é bloco;
     .moldura-placar          o selo com a conta da tela, UMA vez só.
   =========================================================================== */

.app-main .moldura-pendente,
.moldura-pendente {
  background: #f8fafc;
  border: 1px dashed #dbe3ec !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Marca do pendente FORA de fenda de campo: um tracinho pequeno, inline,
   que cabe onde o rótulo do ERP caberia. Sem texto — é o `title` que
   explica, e o selo da tela que conta. */
.moldura-pendente-marca {
  display: inline-block;
  width: 1.6em;
  height: .7em;
  vertical-align: middle;
  border: 1px dashed #dbe3ec;
  border-radius: 3px;
  background: #f8fafc;
  cursor: help;
}

/* Pendente dentro de uma frase: o traço discreto (o estilo saiu de dentro
   do HTML gerado e virou classe, como o próprio moldura.js prometia). */
.moldura-pendente-texto {
  opacity: .55;
  font-style: italic;
  font-weight: 400;
  cursor: help;
}

/* O ERP também deixa este lugar vazio: aqui não se gasta pixel nenhum.
   Continua no DOM, com `data-pendente` e `title` — some da VISTA, não da
   conta. */
.moldura-pendente-vazio {
  display: inline;
  font-size: 0;
  line-height: 0;
}

.moldura-pendente-grade {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 14px 16px;
  color: #64748b;
  background: #f8fafc;
  font-size: .86rem;
}

.moldura-pendente-grade .fa { margin-right: 6px; color: #94a3b8; }

/* Realce de quem foi procurado pela lista do selo. */
.moldura-pendente-aceso {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-color .2s ease;
}

/* --- o selo da tela: a conta aparece UMA vez, e sai do fluxo ------------
   ⚠️ FECHADO ele é só um círculo de 24 px no canto de baixo à direita, com
   a frase no `title`. Foi medido: a primeira versão, uma pílula com a frase
   escrita, COBRIA os botões «Tela cheia» e «Sair» da barra de baixo do PDV.
   Andaime não pode esconder botão de verdade. */
.moldura-placar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1035;            /* abaixo do modal do Bootstrap (1055) */
  font-size: .78rem;
  text-align: left;
}

.moldura-placar-abre {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e2e8f0;
  background: #ffffffcc;
  color: #94a3b8;
  border-radius: 999px;
  line-height: 1;
  opacity: .45;
  cursor: help;
  transition: opacity .15s ease;
}

.moldura-placar-abre:hover,
.moldura-placar-abre[aria-expanded="true"] { opacity: 1; color: #475569; }
.moldura-placar-abre .fa { margin: 0; }

.moldura-placar-lista {
  position: absolute;
  right: 0;
  bottom: 30px;
  width: min(300px, calc(100vw - 24px));
  margin-top: 6px;
  max-height: 48vh;
  overflow: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .16);
  padding: 10px 12px;
}

.moldura-placar-nota { color: #64748b; margin: 0 0 6px; font-size: .74rem; }
.moldura-placar-lista ul { list-style: none; margin: 0; padding: 0; }

.moldura-placar-lista li button {
  border: 0;
  background: none;
  padding: 2px 0;
  color: #475569;
  font-family: inherit;
  font-size: .76rem;
  cursor: pointer;
  text-align: left;
  word-break: break-all;
}

.moldura-placar-lista li button:hover { color: #0f172a; text-decoration: underline; }

/* ===========================================================================
   O QUE FOI APAGADO NESTA PASSAGEM, E POR QUÊ

   .scroll-modal { max-height: 60vh }
       o `Master.html:45` já define `.scroll-modal`, e com OUTRO valor
       (`calc(100vh - 450px)`). Eram duas folhas brigando pelo mesmo seletor,
       e a nossa ganhava por vir depois: os modais do ERP rolavam na altura
       errada. O `<style>` do master foi copiado para o `app.html` e esta
       regra saiu.

   .tela-login, .login-card
       o `www/index.html` tem o seu próprio `<style>` e NÃO carrega esta
       folha. Eram linhas que nenhuma página lia.

   .atalho-cadastro:hover
       não existe um só `atalho-cadastro` em `www/` — nem no HTML, nem no JS.
   =========================================================================== */

/* ===========================================================================
   O «X» de fechar padronizado — o banner de informação (alert-dismissible)
   trazia um `btn-close` grande demais porque a folha do ERP não o dimensiona.
   Aqui ele fica pequeno e alinhado, em TODA tela: o mesmo tamanho do texto,
   discreto, sem ocupar a faixa inteira. Não mexe no `X | Cancelar` dos rodapés
   de modal (aquele é um botão com texto, `.btn`), só no `btn-close` sozinho.
   =========================================================================== */
.alert .btn-close,
.alert-dismissible .btn-close {
  width: 0.7em;
  height: 0.7em;
  padding: 0.25rem;
  margin-top: 0.15rem;
  background-size: 0.7em;
  opacity: 0.55;
}
.alert .btn-close:hover,
.alert-dismissible .btn-close:hover {
  opacity: 0.9;
}

/* ===========================================================================
   Modais de CONSULTA com grade grande (Detalhe financeiro, Crédito | Débito,
   histórico, etc.) — o template do ERP os abre como `modal-lg` (800px) e a
   grade estourava a altura da janela, obrigando a rolar tudo. Aqui a janela
   fica mais larga (até 95% da tela) e a GRADE rola por dentro, mantendo o
   cabeçalho e o rodapé à vista. Vale para toda tela; não afeta modais sem
   grade além da largura maior, que cabe folgado.
   =========================================================================== */
.modal-dialog.modal-lg { max-width: min(1120px, 95vw); }
.modal-body .table-responsive { max-height: 66vh; overflow: auto; }

/* ---------------------------------------------------------------------------
   DUAS BARRAS DE ROLAGEM COLADAS, À DIREITA DA GRADE (Marcio, 22/09)

   Medido no modal «Detalhe financeiro» do cliente 2 (72 títulos), janela de
   700 px de altura. A cadeia de caixas que rolavam era esta:

     div.table-responsive        max-height 462px (66vh, a regra logo acima)
                                 conteúdo 4238px  -> ROLAVA   (barra 1)
     div.col-12.scroll-modal     max-height 250px (calc(100vh - 450px), do
                                 <style> do Master.html do ERP, copiado no
                                 app.html)
                                 conteúdo  462px  -> ROLAVA   (barra 2)
     div.modal-body.scroll-modallg  max-height 450px -> não rolava

   Ou seja: o invólucro `.scroll-modal` que o TEMPLATE DO ERP já põe em volta
   da grade é um caixote rolável, e a regra de 66vh acima criou um SEGUNDO
   caixote rolável dentro dele. Duas caixas roláveis aninhadas = duas barras.

   A correção é tirar a de DENTRO, não a de fora, por três motivos:
     1. a de fora é a do ERP, com a altura que o ERP calculou para caber
        junto dos cartões de totais dentro do `.modal-body` — mexer nela
        empurraria a grade para fora do corpo do modal e traria a terceira
        barra de volta, agora no `.modal-body`;
     2. o comportamento pedido é exatamente o que a de fora já faz: a grade
        rola por dentro, e os cartões de total e o rodapé de botões ficam
        parados (eles estão FORA do `.scroll-modal`);
     3. é seletor de descendência puro — sem `:has()`, então funciona
        igual em navegador antigo, que é a condição do Edge do Marcio.

   Nada fica inalcançável: a caixa de fora rola o mesmo conteúdo. E os modais
   cuja grade NÃO está dentro de um invólucro do ERP continuam com a regra de
   66vh acima, que é a única rolagem deles.

   A altura volta a `none` (não `auto`) para que a caixa de fora enxergue o
   tamanho real da tabela; `overflow: visible` devolve a rolagem horizontal
   para o invólucro, que já a tem.

   ⚠️ Os seletores são de DESCENDÊNCIA de propósito (`.modal-body` ESPAÇO
   `.scroll-modal`): só valem quando o invólucro é um elemento SEPARADO
   dentro do corpo do modal. Quando é o próprio `.modal-body` que leva a
   classe (`<div class="modal-body scroll-modallg">`) e a grade está solta
   dentro dele, a regra NÃO se aplica — ali a grade precisa continuar sendo
   o caixote rolável, senão quem passaria a rolar seria o corpo inteiro e os
   cartões de total sairiam de vista, que é justamente o que não se quer. */
.modal-body .scroll-modal .table-responsive,
.modal-body .scroll-modallg .table-responsive,
.modal-body .scroll-modal-crud .table-responsive {
  max-height: none;
  overflow: visible;
}

/* ÚLTIMA PALAVRA dos botões pintados (Marcio, 21/09: texto e ícone
   BRANCOS): esta folha carrega por último; id + classe batem qualquer
   especificidade que os css herdados do template tragam. */
[id^="BTNPESQUISAR"].btn-pesquisar-azul,
[id^="BTNPESQUISAR"].btn-pesquisar-azul *,
.app-main .btn-pesquisar-azul:not(.btn-app),
.app-main .btn-pesquisar-azul:not(.btn-app) * {
  color: #fff !important; stroke: #fff; fill: none;
}

/* ===========================================================================
   A BARRA DE APP DO PDV/COMANDA/OS/PEDIDO — o cinza do ERP, de volta.

   No `legacy-shell.css` (a folha que o ERP TAMBÉM carrega) as regras de
   `.app-main .fixed-bottom-toolbar .btn-app` / `.form-toolbar .btn-app`
   vêm DEPOIS das de `.app-main .btn-app[onclick*="'X'"]`, com a mesma
   especificidade — então, dentro dessas barras, quem vence no ERP é o
   botão vertical NEUTRO: fundo #f8fafc, borda #e5e7eb, texto #475569.
   Confere-se abrindo o `Templates/FrmPDV.html` do ERP: os dezesseis botões
   saem iguais, «Sair» inclusive.

   Aqui a tradução do bloco 1 mora NESTA folha, que carrega DEPOIS da
   `legacy-shell.css` — e com isso o `[data-acao-erp="Sair"]` passava a
   ganhar e o «Sair» do PDV saía VERMELHO, sozinho no meio da barra
   (queixa do Marcio, 21/09: «os botões e a barra» não batem). Este bloco
   devolve a ordem do ERP: dentro das barras de app, nenhum pintor por
   ação pega.
   =========================================================================== */
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp],
.app-main .form-toolbar .btn-app[data-acao-erp],
.app-main .fixed-bottom-toolbar .btn-app[data-acao],
.app-main .form-toolbar .btn-app[data-acao] {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #475569 !important;
  box-shadow: none !important;
  min-width: 70px;
  font-size: .82rem !important;
  padding: 8px 10px !important;
}
body.theme-dark .app-main .fixed-bottom-toolbar .btn-app[data-acao-erp],
body.theme-dark .app-main .form-toolbar .btn-app[data-acao-erp],
body.theme-dark .app-main .fixed-bottom-toolbar .btn-app[data-acao],
body.theme-dark .app-main .form-toolbar .btn-app[data-acao] {
  background: #0b1220 !important;
  border-color: #243049 !important;
  color: #cbd5e1 !important;
}
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp] > i,
.app-main .form-toolbar .btn-app[data-acao-erp] > i,
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp] > svg,
.app-main .form-toolbar .btn-app[data-acao-erp] > svg {
  color: #64748b !important;
}
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp]:hover,
.app-main .form-toolbar .btn-app[data-acao-erp]:hover {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: var(--lmc-brand) !important;
}
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp]:hover > i,
.app-main .form-toolbar .btn-app[data-acao-erp]:hover > i,
.app-main .fixed-bottom-toolbar .btn-app[data-acao-erp]:hover > svg,
.app-main .form-toolbar .btn-app[data-acao-erp]:hover > svg {
  color: var(--lmc-brand) !important;
}

/* ===========================================================================
   ÍCONE LUCIDE É SEMPRE VAZADO — a lupa do «Pesquisar» (Marcio, 22/09:
   «a lupa está horrível, toda branca»).

   Causa raiz: o `lucide-shim.js` já punha `fill: none` INLINE no <svg>, mas
   `fill` é herdado e uma regra de CSS que acerte o FILHO vence a herança.
   As folhas que pintam os botões coloridos usam seletor universal —
   `.app-main .btn-pesquisar-azul ... * { fill: #fff }` (legacy-shell.css) —
   e esse `*` alcança o <circle> e o <path> de dentro do SVG. Resultado: o
   miolo da lupa saía CHEIO de branco, virando uma bolinha sólida; os outros
   ícones (lápis, lixeira, impressora) não denunciavam porque o desenho deles
   não tem área fechada grande.

   Aqui a regra fala direto com a geometria do ícone e com `!important`, então
   nenhum pintor de botão (atual ou futuro) consegue preencher o desenho.
   Vale para TODO o sistema: toda lupa, em botão, campo de busca ou modal.
   O traço continua saindo na cor do texto (`currentColor`), então o ícone
   fica branco DE CONTORNO dentro dos botões pintados, como o Marcio quer.
   Só ícones do Lucide (`svg.lucide`) são afetados — gráficos, logos e
   qualquer outro SVG seguem intactos.
   =========================================================================== */
svg.lucide,
svg.lucide * { fill: none !important; }

/* O traço acompanha a cor do texto do lugar onde o ícone está (branco no
   botão azul, cinza no campo de busca). Sem `!important`: quem quiser um
   traço de cor própria — como o `stroke: #fff` dos botões pintados logo
   acima — continua mandando. */
svg.lucide,
svg.lucide * { stroke: currentColor; }