/* ============================================================
   ERPx – Reskin visual (andasa, teste local)
   Carregado por ÚLTIMO em layout.htm: sobrescreve geral.css,
   estilo.css, padrao-erpx.css, menu.css e o tema "smoothness"
   do jQuery UI sem precisar tocar nesses arquivos nem nos .htm
   de cada tela.
   ============================================================ */

:root {
	/* Paleta baseada no logo da Andasa: ícone teal + wordmark azul-marinho */
	--erpx-bg:        #f3f6f6;
	--erpx-surface:   #ffffff;
	--erpx-border:    #dde5e4;
	--erpx-text:      #1c2b33;
	--erpx-text-dim:  #5c6e70;
	--erpx-navy:      #1c2b33;
	--erpx-navy-d:    #121c22;
	--erpx-primary:   #12746c;
	--erpx-primary-d: #0d5852;
	--erpx-primary-l: #e2f2f0;
	--erpx-accent:    #12746c;
	--erpx-orange:    #f5a623;
	--erpx-orange-l:  #fdf1de;
	--erpx-navy-l:    #eaedf0;
	--erpx-danger:    #d64545;
	--erpx-font:      "Noto Sans", "Ubuntu", "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
	--erpx-radius:    6px;
	--erpx-shadow:    0 1px 3px rgba(20, 30, 50, 0.08), 0 1px 2px rgba(20, 30, 50, 0.06);
}

/* ---------- Base ---------- */
html, body {
	background: var(--erpx-bg) !important;
	color: var(--erpx-text);
	font-family: var(--erpx-font) !important;
	font-size: 13px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* As páginas do framework não têm DOCTYPE (quirks mode). Nesse modo,
   o margin-top:72px que #main usa pra não ficar embaixo do #topo
   fixo "vaza" pro body inteiro (colapso de margem entre body e seu
   primeiro filho em fluxo) — a página inteira empurra 72px pra baixo
   e sobra uma barra de rolagem vertical vazia do mesmo tamanho, mesmo
   quando o conteúdo cabe. overflow-x:hidden (ver body:has(#lateral)
   abaixo) não evita isso aqui porque em quirks mode esse overflow do
   body se propaga pro viewport em vez de criar um BFC local. Uma
   borda (mesmo transparente) no body barra o colapso sem mudar nada
   visualmente. */
body {
	border-top: 1px solid transparent;
}

/* #topo/#lateral são fixed (presos na viewport); se uma tela tiver uma
   tabela larga e a página inteira rolar na horizontal, o cabeçalho/menu
   fixos não acompanham e o conteúdo passa a aparecer por baixo deles.
   Por isso a rolagem horizontal nunca pode chegar ao <body> — ela fica
   contida dentro de #main (ver abaixo). Só se aplica quando #lateral
   existe de verdade (páginas do framework) — páginas autônomas, tipo os
   dashboards dentro de <iframe>, não têm esse sidebar fixo, e "hidden"
   nelas cortava conteúdo sem mostrar barra de rolagem nenhuma. */
body:has(#lateral) {
	overflow-x: hidden;
}

#topo, #topo *, div.menuBar, div.menuBar *, div.menu, div.menu * {
	font-family: var(--erpx-font) !important;
	text-rendering: optimizeLegibility;
}

a { color: var(--erpx-primary); }

/* ---------- Cabeçalho ---------- */
#topo {
	background: var(--erpx-navy) !important;
	box-shadow: none !important;
	border-bottom: none !important;
	height: 72px !important;
	position: relative;
}

#logo-erpx {
	position: absolute;
	left: 16px;
	top: 3px;
	font-family: var(--erpx-font) !important;
	font-size: 54px !important;
	font-weight: 900 !important;
	-webkit-text-stroke: 1px currentColor;
	line-height: 1;
	letter-spacing: 0px;
	color: #ffffff !important;
}

#logo-erpx span {
	font-size: 55%;
	font-weight: 900 !important;
	-webkit-text-stroke: 0.6px currentColor;
	color: var(--erpx-orange) !important;
	vertical-align: baseline;
}

#topo-logo {
	position: absolute;
	left: 16px;
	top: 4px;
}

#_nomeempresa_ {
	font-family: var(--erpx-font) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #cfe0dd !important;
	padding-top: 56px !important;
	margin-left: 16px !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
}

.info-topo {
	font-family: var(--erpx-font) !important;
	font-size: 11px;
	font-weight: 500;
	color: #eef3f2;
	line-height: 1.3;
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: auto !important;
}

.info-topo table td {
	padding: 0px 6px;
	line-height: 1.3;
	color: #eef3f2 !important;
	font-weight: 500 !important;
	text-shadow: none !important;
}

/* ---------- Menu ---------- */
div.menuBar, div.menu {
	filter: none;
	box-shadow: var(--erpx-shadow) !important;
}

div.menuBar,
div.menu,
div.menu a.menuItem {
	font-family: var(--erpx-font) !important;
	font-size: 14.5px !important;
	text-shadow: none !important;
}

div.menuBar {
	background: var(--erpx-surface) !important;
	background-image: none !important;
	border: none !important;
	border-bottom: 1px solid var(--erpx-border) !important;
	height: auto !important;
	padding: 6px 4px !important;
}

div.menuBar a.menuButton {
	color: var(--erpx-text) !important;
	border-right: none !important;
	border-radius: var(--erpx-radius) !important;
	padding: 6px 12px !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	transition: background 0.12s ease;
}

div.menuBar a.menuButton:hover {
	background: var(--erpx-navy-l) !important;
	color: var(--erpx-navy) !important;
	text-shadow: none !important;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
	background: var(--erpx-navy) !important;
	color: #fff !important;
	border-radius: var(--erpx-radius) !important;
	left: 0; top: 0;
}

div.menu {
	background: var(--erpx-surface) !important;
	background-image: none !important;
	border: 1px solid var(--erpx-border) !important;
	border-radius: var(--erpx-radius);
	text-shadow: none !important;
	overflow: hidden;
	padding: 4px !important;
}

div.menu a.menuItem {
	color: var(--erpx-text) !important;
	text-shadow: none !important;
	border-left: none !important;
	border-radius: 4px;
	padding: 6px 10px !important;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
	background: var(--erpx-navy-l) !important;
	color: var(--erpx-navy) !important;
}

div.menu div.menuItemSep {
	border-top: 1px solid var(--erpx-border) !important;
	border-bottom: none !important;
}

/* ---------- Área principal ---------- */
#lateral { background: transparent; }

#main {
	background: transparent;
}

#main table {
	font-family: var(--erpx-font);
}

/* ---------- "Cartão" de conteúdo (padrao-erpx.css) ----------
   padrao-erpx.css força #main > table:first-of-type (e a variante
   dentro de <form>) pra 800px fixos, centralizados — em ~1900 telas,
   não só na Home. Fazia sentido quando o menu era uma barra fina no
   topo; com o sidebar tomando parte da largura, esses 800px sobravam
   como um vão fixo e simétrico dos dois lados. A tela tem que usar
   toda a área disponível (a mesma coisa que #main já ocupa), esticando
   ou encolhendo conforme a resolução — sem teto de largura. Mantém a
   "cara de cartão" (fundo branco, sombra, cabeçalho em gradiente —
   isso não muda, só a largura). Fica 95% (não 100%) pra sobrar uma
   margem igual dos dois lados — grudado no menu de um lado e na borda
   da tela do outro ficava ruim visualmente. O margin-left/right:auto
   já vem do padrao-erpx.css e centraliza sozinho com esse width menor
   que 100%. Não mexi na variante de 500px (#main > form > div > table),
   que é um padrão de formulário menor à parte — sem relato de
   problema nela até agora. */
/* table-layout:fixed é o que faz o 97% acima valer de verdade. Sem isso,
   layout automático de tabela deixa QUALQUER linha filha "puxar" a coluna
   inteira mais larga se o conteúdo pedir — no card inteiro há só essa
   1 coluna (um <td> por linha: filtro, "Resultados:", paginação,
   listagem...), então isso nunca distorce nada, só trava a largura. Sem
   isso, uma tabela de listagem larga (colunas antigas de 1999) força o
   card inteiro mais largo que a tela, arrastando junto a barra de
   paginação e o filtro pra fora da área visível — sintoma: tudo "estoura"
   e só aparece rolando a página inteira pro lado, em vez de só a tabela
   de dados rolar sozinha (a rolagem contida em .tabela-scroll-x/
   .dataTables_wrapper já existe pra isso, mas só funciona se o
   container delas não puder crescer). */
#main > table:first-of-type,
#main > form > table:first-of-type {
	width: 97% !important;
	table-layout: fixed;
}

/* ---------- Relatórios de impressão (relatorio.htm, ~321 telas) ----------
   Esse padrão (tabela de topo "usuario/local", conteúdo dentro de um
   <div align="center">, tabela de rodapé repetindo o cabeçalho) usa
   width fixo em px (785/780/750/...) em CADA tabela de nível superior —
   diferente do "card" das telas normais acima, onde só a primeira
   tabela existe e geralmente não tem width= nenhum (ex: #tabelacentral).
   Por isso a regra :first-of-type não pega essas: aqui precisa ser TODA
   table[width] filha direta de #main (ou de um div[align=center] direto
   de #main) — senão só a tabela de cabeçalho estica e o conteúdo (que é
   o que mais importa: a listagem em si) continua preso no width em px
   original, sobrando um vão enorme de espaço em branco num monitor largo.

   CORREÇÃO (conferido com o HTML real de clientesprocura.php): todo esse
   conteúdo (cabeçalho, div de conteúdo, rodapé) vem dentro de
   <form id="inicio_procura"> — não são filhas diretas de #main, são
   netas (via form). As variantes sem "> form" abaixo nunca davam match
   nenhum, por isso o fix anterior não teve efeito nenhum na tela real. */
#main > table[width],
#main > div[align="center"] > table[width],
#main > form > table[width],
#main > form > div[align="center"] > table[width] {
	width: 97% !important;
	table-layout: fixed;
}

/* Tabelas aninhadas dentro das células do card (ex: filtros com width="800"
   dentro de um <td> do card externo) também precisam preencher o container.
   A regra acima só alcança filhas diretas de #main; esta cobre o segundo nível. */
#main td > table[width] { width: 100% !important; }

/* ---------- Tabelas de listagem/cadastro (genérico) ----------
   As tabelas antigas usam classes tipo "barraBrancaSemBorda" /
   "barraCinzaEEsemBorda" que já escondem a borda de propósito
   (por isso o nome "sem borda"). Não forçamos border-color nem
   zebra por nth-child aqui para não brigar com esse esquema. */
#main table th,
#main .th, #main td.th {
	background: #eef1f6 !important;
	color: var(--erpx-text) !important;
	font-weight: 600;
	text-shadow: none !important;
	background-image: none !important;
}

/* Cabeçalho de listagem com <td class="bg-cclaro b-cclaro"> em vez de
   <th> de verdade (~65 telas, ex: comercial/pedidos) — convenção mais
   antiga que a regra acima não pega (exige <th> ou .th). bg-cclaro/
   b-cclaro sozinhas são classes de utilidade genéricas (fundo/borda
   cinza claro, usadas em ~111 arquivos pra qualquer coisa) — por isso
   NÃO dá pra estilizar toda .bg-cclaro como cabeçalho, só quando as
   duas classes aparecem JUNTAS dentro de uma tabela de resultado
   (.zona-resultado), sinal bem mais específico de que é mesmo linha de
   cabeçalho e não outro uso qualquer da classe. Mesmo tratamento da
   regra de <th> acima, pra ficar visualmente igual (ex: comercial/
   clientes, que já usa <th> de verdade via DataTables). */
.zona-resultado .bg-cclaro.b-cclaro {
	background: #eef1f6 !important;
	border-color: #eef1f6 !important;
	color: var(--erpx-text) !important;
	font-weight: 600;
}

/* .barraRedBotton (estilo.css): divisor marrom-avermelhado (#993300, cor
   de 1999) usado em ~538 arquivos pra separar título de grupo/seção do
   conteúdo abaixo — ex: a linha "Tecnológica" antes do cabeçalho da
   listagem em comercial/pedidos. Não é bug, só destoa da paleta nova.
   Escopo só dentro de .zona-resultado de propósito (não em todo o
   sistema): a classe tem MUITOS outros usos fora de listagem, e trocar
   a cor globalmente é uma decisão maior, não pedida agora. */
.zona-resultado .barraRedBotton,
.zona-resultado .barraRedBottonTop,
.zona-resultado .barraRedBottonNoBold {
	border-color: var(--erpx-border) !important;
}

/* ---------- Respiro nos formulários de filtro / tabelas ----------
   .barraCinzaEEsemBorda e .barraBrancaSemBorda são usadas em ~1500-1700
   arquivos (formulários de filtro E tabelas de resultado ao mesmo tempo,
   sem distinção de classe entre as duas coisas) — por isso só mexemos em
   espaçamento aqui, não em zebra/cabeçalho fixo, que exigiriam saber com
   certeza que é uma tabela de dados e não uma célula de layout de form.

   .barraCinza (sem o "EEsemBorda") é o par dessa mesma zebra em telas que
   alternam linha a linha via getClass() (ex: comercial/equipamentos) --
   sem ela aqui, só a linha "barraBrancaSemBorda" ganhava os 8px de
   padding e a linha "barraCinza" ficava com os 2px antigos de
   estilo.css, criando um degrau de recuo entre linha par/ímpar. */
#main .barraCinzaEEsemBorda,
#main .barraBrancaSemBorda,
#main .barraCinza {
	padding: 6px 8px !important;
}

/* Realça a linha sob o mouse — funciona bem tanto em linha de formulário
   quanto em linha de resultado, sem precisar diferenciar as duas. */
#main table tr:hover > td.barraBrancaSemBorda,
#main table tr:hover > td.barraCinzaEEsemBorda {
	background-color: var(--erpx-navy-l) !important;
}

/* Zebra e cabeçalho fixo: só nas ~poucas telas que já usam thead/tbody
   de verdade (ex: comercial/clientes/resultado.htm) — aí sim dá pra
   confiar que é uma tabela de dados, não um form. */
#main table tbody tr:nth-child(even) > td.barraBrancaSemBorda {
	background-color: #f7f9fb !important;
}

#main table thead th,
#main table thead td {
	position: sticky;
	top: var(--erpx-topo-h);
	z-index: 5;
}

/* ---------- Zonas filtro/resultado (js/zona-filtro-resultado.js) ----------
   O JS marca .zona-filtro (campos de busca) e .zona-resultado (rodapé de
   paginação + "Resultados:" + tabela de dados) com base no botão de busca
   (input[name="procurar"]) — não existe classe nativa que distinga as
   duas coisas. Com essa separação, dá pra generalizar zebra/cabeçalho
   fixo em .zona-resultado mesmo sem thead/tbody semântico (a maioria das
   telas de resultado não tem), sem risco de pegar linha de formulário.

   Cada campo de filtro (ex: comercial/clientes) é uma tabela de 2 linhas
   — labels em cima, valores embaixo — e essas 2/3 tabelas de campo são
   .zona-filtro individualmente (T1, T2, T3). Se cada uma levasse borda
   completa + cantos arredondados, viravam 3 caixas empilhadas em vez de
   1 só. Por isso: borda só nos lados, sem topo/fundo; e canto arredondado
   + borda de topo/fundo só na primeira/última da sequência (detectado
   via combinador de irmão, não dá pra usar :first-of-type porque a
   próxima tabela — rodapé de paginação — também é <table> e entraria
   na contagem). */
.zona-filtro {
	background: #f7f9fb;
	border-left: 1px solid var(--erpx-border);
	border-right: 1px solid var(--erpx-border);
	border-top: none;
	border-bottom: none;
	padding: 0 !important;
}

.zona-filtro:first-child,
:not(.zona-filtro) + .zona-filtro {
	border-top: 1px solid var(--erpx-border);
	border-top-left-radius: var(--erpx-radius);
	border-top-right-radius: var(--erpx-radius);
}

.zona-filtro:not(:has(+ .zona-filtro)) {
	border-bottom: 1px solid var(--erpx-border);
	border-bottom-left-radius: var(--erpx-radius);
	border-bottom-right-radius: var(--erpx-radius);
}

/* Aperta o respiro vertical dentro do filtro — vale tanto pro espaço
   rótulo->campo (2 linhas empilhadas, tipo comercial/clientes) quanto
   pro espaço entre um grupo de campos e o próximo (mesma coisa: linhas
   de <tr> adjacentes). NOTA DE especificidade: "#main .barraCinzaEEsemBorda"
   usa #main (ID), que teria prioridade sobre um seletor só de classe —
   por isso o #main aqui também, senão essa regra é ignorada. */
#main .zona-filtro td {
	padding: 2px 8px !important;
}

/* Botões de busca/limpar sempre encostados na direita da própria linha,
   não importa quantas colunas de campos vierem antes (padronização pedida
   depois de ver o botão "sobrando" no meio da linha em telas com poucas
   colunas de campo, ex: comercial/contratos). */
.zona-filtro tr:has(input[name="procurar"]) > td:last-child {
	text-align: right;
}

/* Só zebra/hover em tabelas que parecem listagem de verdade (4+ linhas no
   tbody) — a zona de resultado também contém tabelas de 1 linha só
   (legenda, "Agrupar por", rodapé de paginação, cabeçalho "Resultados:"),
   e zebrar essas dava um efeito de listras aleatórias entre caixas que
   não tem nada a ver umas com as outras.

   :not([class*="bg-"]):not(.barraRed):not(.barraYellow):not(.barraGreen) —
   várias telas usam uma célula de "status" com fundo semântico (verde/
   vermelho/amarelo, ex: getClasseManutencao() em comercial/equipamentos)
   pintado via classe (bg-green, bg-red, bg-amarelo, barraRed, ...), sem
   nenhum !important próprio. Como aqui não existe <thead> de verdade (a
   linha de cabeçalho é só o primeiro <tr> do mesmo tbody), a contagem
   par/ímpar do nth-child fica deslocada em 1 em relação ao que o usuário
   vê como "1ª, 2ª linha de dados" — em telas com número par de linhas de
   dados, isso faz a linha "ímpar" (aos olhos do usuário) cair no
   nth-child(even) do CSS e o !important do zebrado apagava a cor
   semântica (texto branco em fundo quase-branco, ilegível). Excluir essas
   classes preserva o zebrado nas células normais sem brigar com status
   coloridos.

   :not(.barraCinza):not(.barraCinzaEEsemBorda):not(.barraBrancaSemBorda) —
   telas como comercial/pedidos alternam linha a linha no PHP via
   getClass() (classe .barraCinza/.barraBranca por linha, não por
   nth-child) — muitas vezes com uma linha de agrupamento ("Vendedor: ...")
   solta no meio do mesmo tbody, o que também desalinha a contagem
   par/ímpar do nth-child em relação às linhas de dado de verdade. Sem essa
   exclusão, o zebra por nth-child (!important) e a alternância do PHP
   competem linha a linha — cada uma "ganha" em pontos diferentes da
   tabela, um mosaico sem padrão (visto 2026-08-24 em erpx-b/tecnologica2:
   fundo presente nalgumas linhas, ausente noutras). Onde já existe
   alternância própria da tela, deixa ela mandar sozinha. */
.zona-resultado table tbody:has(tr:nth-child(4)) tr:nth-child(even) > td:not([class*="bg-"]):not(.barraRed):not(.barraYellow):not(.barraGreen):not(.barraCinza):not(.barraCinzaEEsemBorda):not(.barraBrancaSemBorda) {
	background-color: #f7f9fb !important;
}

/* .barraCinza nativo (estilo.css) ainda usa o cinza antigo (#EEEEEE) —
   atualiza pro tom do tema novo, já que essas linhas não recebem mais o
   zebrado por nth-child acima (exclusão logo ali em cima). Tom
   DIFERENTE do #f7f9fb usado pela regra de zebra por nth-child logo
   acima (não é o mesmo cinza): telas como comercial/pedidos alternam
   .barraCinza/.barraBrancaSemBorda linha a linha via getClass() — se
   as duas cores fossem iguais, a tabela inteira virava uma cor só (sem
   listra nenhuma), perdendo a alternância que o PHP já garante. */
#main .barraCinza {
	background-color: #e9edf2 !important;
}

/* .borderCinza (estilo.css) é o par de .barraCinza pra "esconder" a borda
   da célula sem depender de remover o atributo HTML border="1" da tabela
   (mesmo truque de .barraBrancaSemBorda/.barraCinzaEEsemBorda: define a
   borda com a MESMA cor do fundo, então ela existe mas é invisível) — só
   que .borderCinza no estilo.css só define a cor (`border: #EEE`), sem
   width/style, o que o shorthand do CSS não "completa" com os valores
   dos outros dois (1px solid) e sim RESETA pro padrão (style: none) —
   comportamento diferente do irmão dela. Resultado: linha branca some a
   borda (cor = fundo), linha cinza REMOVE a borda de vez — metade das
   linhas com contorno visível do border="1" nativo, metade sem (visto
   2026-08-24 em erpx-b/tecnologica2, comercial/pedidos). Repete o
   shorthand completo aqui, com a cor nova do zebra acima. */
#main .borderCinza {
	border: 1px solid #e9edf2 !important;
}

.zona-resultado table tbody:has(tr:nth-child(4)) tr:hover > td:not([class*="bg-"]):not(.barraRed):not(.barraYellow):not(.barraGreen) {
	background-color: var(--erpx-navy-l) !important;
}

/* Mesmo aperto de espaçamento vertical entre as caixinhas de 1 linha da
   zona de resultado (legenda, paginação, "Resultados:"). */
#main .zona-resultado td {
	padding: 2px 8px !important;
}

/* O <td> genérico que envolve as tabelas de filtro/resultado (mesma
   classe .barraCinzaEEsemBorda/.barraBrancaSemBorda usada em ~1500
   outras telas) ainda tem o padding original de 6px — isso sobra como
   um vão extra antes da primeira e depois da última tabela de dentro.
   Só aperta esse padding quando o <td> é justamente esse contêiner
   (:has), sem tocar na regra genérica que vale pro resto do sistema. */
#main td:has(> .zona-filtro),
#main td:has(> .zona-resultado) {
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

/* Colapsa a barra de erro/aviso quando não tem nada pra mostrar — é a
   maioria do tempo, e ocupava uma linha inteira só por causa do &nbsp;.
   Mesma técnica já usada pra esconder a célula vazia da linha de ícones
   de exportação (csv/imprimir/excel), mais abaixo neste arquivo. */
tr:has(> td > .msgErro:empty):has(> td > .msgAviso:empty) {
	display: none;
}

/* ---------- Caixas da zona de resultado (icones/Resultados, mala
   direta, unidade+colunas, tabela) ----------
   Tentei unificar tudo numa "caixa só" (como em .zona-filtro), mas essa
   tela repete o bloco "unidade" uma vez por empresa (Post-Bank, MGL,
   ...) e o DataTables só embrulha a primeira tabela (id duplicado nas
   repetições) — isso quebra a lógica de "primeira/última tabela do
   conjunto" de formas imprevisíveis (a borda direita sumia no meio).
   Mais robusto: cada tabela sempre com borda completa própria, em vez
   de depender de saber qual é a primeira/última. */
.zona-resultado > td > table {
	border: 1px solid var(--erpx-border) !important;
	border-radius: var(--erpx-radius);
	margin-bottom: 8px;
}

/* A tabela que o DataTables "abraça" (só a primeira, id duplicado nas
   repetições — ver nota acima) fica um pouco mais larga que o próprio
   wrapper: o DataTables força box-sizing:content-box nela (CSS dele
   mesmo) e várias colunas usam white-space:nowrap (e-mail, telefone),
   então o navegador estica a tabela pra não quebrar esse texto — e ela
   passava por cima da borda. Em vez de tentar acertar esse cálculo,
   contém: o wrapper (não a tabela) que ganha a borda/canto, com
   overflow-x:auto — se a tabela precisar de mais espaço, aparece
   rolagem em vez de estourar a borda. */
.zona-resultado > td > .dataTables_wrapper {
	border: 1px solid var(--erpx-border) !important;
	border-radius: var(--erpx-radius);
	margin-bottom: 8px;
	overflow-x: auto;
}

.zona-resultado > td > .dataTables_wrapper > table {
	border: none !important;
	border-radius: 0;
	margin-bottom: 0;
}

/* Mesma contenção do .dataTables_wrapper acima, para telas de
   resultado que não usam DataTables (ex: comercial/contratos) — a
   tabela de listagem tem colunas demais pra largura do card e sem
   esse wrapper a rolagem aparecia na página inteira, não só na tabela. */
/* Sem exigir ancestral ".zona-resultado > td" de propósito: desde que
   js/zona-filtro-resultado.js passou a criar esse wrapper automaticamente
   (envolverListagemComScroll), a estrutura real mais comum é
   "td > .tabela-scroll-x > table.zona-resultado" (zona-resultado cai
   direto na tabela, não num <tr> ancestor — ver nota em marcarZonas no
   JS), então exigir esse ancestral fazia a regra nunca bater nesse caso.
   A própria classe .tabela-scroll-x já é específica o bastante (só
   aparece onde precisa de contenção de rolagem). */
.tabela-scroll-x {
	border: 1px solid var(--erpx-border) !important;
	border-radius: var(--erpx-radius);
	margin-bottom: 8px;
	overflow-x: auto;
}

.tabela-scroll-x > table {
	border: none !important;
	border-radius: 0;
	margin-bottom: 0;
}

/* overflow-x:auto acima cria um novo contexto de rolagem pro wrapper —
   isso faz o cabeçalho "sticky" (regra genérica mais abaixo, pensada
   pra rolagem da página inteira) grudar dentro desse contexto pequeno
   em vez do topo da página, jogando o cabeçalho pro meio da tabela.
   Desativa só aqui dentro, sem mexer no sticky genérico de outras telas. */
.dataTables_wrapper thead th,
.dataTables_wrapper thead td {
	position: static !important;
}

/* Ícones (novo/imprimir/excel) + "Resultados:": a célula dos ícones tinha
   width="40"/"37"/"19" fixo do HTML de 1999, que numa tela larga e fluida
   agora estica proporcionalmente e sobra um vão enorme antes do texto.
   width:1% é o truque clássico de "encolhe pro conteúdo, o resto absorve
   a sobra". Âncora é input[name="novo"] (botão "novo registro") — está
   presente em toda tela que segue esse padrão de ícones+Resultados,
   diferente de input[name="resultado"] (nome do ícone de imprimir só em
   comercial/clientes; em comercial/contratos, por exemplo, o mesmo ícone
   se chama "todos" — por isso a âncora não pode depender do nome do
   ícone de imprimir, que muda de tela pra tela). */
.zona-resultado tr:has(> td > input[name="novo"]) > td:first-child {
	width: 1% !important;
	white-space: nowrap;
}

/* Botões de mala direta/etiqueta, movidos pro JS (resultado.htm) pra
   dentro da barra cinza de "Resultados:" — menores, pra caber na altura
   compacta dessa barra em vez da caixa grande que tinham antes.
   input[type="button"] (regra genérica de botão) tem a mesma
   especificidade — #main aqui garante que este override vença, não
   importa a ordem no arquivo. */
#main input.botao-mala-direta-inline {
	height: 22px !important;
	padding: 0 10px !important;
	font-size: 11px !important;
	margin-left: 8px;
	vertical-align: middle;
}

/* Centraliza o grupo de botões na barra inteira, sem mexer no texto
   "Resultados:" (que fica à esquerda, como sempre). flex+margin:auto
   só centralizaria no espaço QUE SOBRA depois do texto — não é a
   mesma coisa que o centro da barra toda. Posicionamento absoluto
   resolve isso de vez, sem depender do tamanho do texto ao lado. Só a
   célula que tem esse grupo específico muda — não afeta as outras
   ~1900 telas que usam .subtitulo pra outra coisa. */
td.subtitulo:has(.botoes-mala-direta-centro) {
	position: relative;
}

.botoes-mala-direta-centro {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

/* Nome da unidade (ex: "Post-Bank") ganha destaque — hoje é só texto
   solto na mesma célula dos links "Esconder colunas", sem tag própria
   pra estilizar separado. Aumenta a célula toda (pega o texto solto) e
   depois reduz de volta só a div dos links, que fica por cima. */
.zona-resultado td:has(> .a-botoes) {
	font-size: 20px !important;
	font-weight: 800;
	color: var(--erpx-navy);
	line-height: 1.4;
}

.zona-resultado td:has(> .a-botoes) .a-botoes {
	font-size: 12px !important;
	font-weight: 500;
	color: var(--erpx-text-dim);
	display: block;
	margin-top: 4px;
}

/* Campo de busca do DataTables ("Pesquisar:"), movido pro JS pra dentro
   de .a-botoes (junto de "Esconder colunas") em vez de ficar numa linha
   própria — ver script em paginas/comercial/clientes/resultado.htm. */
.campo-pesquisa-inline {
	display: inline-block !important;
	float: none !important;
	margin-left: 16px;
	font-size: 12px;
	font-weight: 500;
}

.campo-pesquisa-inline label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.campo-pesquisa-inline input[type="search"] {
	font-size: 12px;
	padding: 3px 8px !important;
}

/* ---------- Rodapé de paginação (genérico, ~322 telas) ----------
   Sempre os mesmos 5 campos, na mesma ordem (inicio, "X registros",
   anterior+proximo, "página Y de Z", fim), gerados pela mesma função
   PHP em cada tela — só a <table>/<td> em volta muda de tela pra tela.

   IMPORTANTE (achado testando com 21 mil linhas numa tabela de
   resultado real): usar :has() pra detectar essa linha custava ~200ms
   a mais, porque o navegador tem que checar TODA <tr> da página —
   inclusive as 21 mil linhas de dados, que nada tem a ver com a
   paginação. Por isso aqui NÃO tem nenhum :has(): a linha ganha a
   classe .linha-paginacao do próprio js/paginacao-btn.js (que já
   precisa achar esses inputs de qualquer jeito), e os 4 ícones são
   escondidos por seletor de atributo direto (name="inicio" etc, sem
   relação com o pai) — ambos são O(1) por elemento, não escalam com o
   tamanho da tabela. */
.linha-paginacao {
	background: #f7f9fb;
}

.linha-paginacao > td {
	padding: 8px 10px !important;
	border: none !important;
	font-size: 12px;
	vertical-align: middle;
}

/* Os 4 ícones de navegação são GIFs de 10x10px — aumentar o tamanho
   deles fica borrado (é bitmap, não vetor). Em vez de esticar a imagem,
   js/paginacao-btn.js embrulha cada <input type="image"> num <span>
   (mesmo padrão do busca-btn.js): o input original continua ali
   funcionalmente clicável (ele quem envia o form), só fica invisível e
   do tamanho do botão; quem aparece de verdade é a seta desenhada em
   CSS no ::before do <span>, nítida em qualquer tamanho.

   Essas telas recarregam a página inteira a cada clique (não é AJAX) —
   entre "página desenhou" e "JS embrulhou", existiria uma janela em que
   o ícone antigo (pequeno) apareceria e depois seria trocado, piscando.
   Por isso a regra abaixo já esconde e reserva o tamanho final do
   <input> ANTES do JS rodar (seletor de atributo puro, não depende de
   .linha-paginacao nem de estar embrulhado) — na pior das hipóteses
   fica um vão em branco por uma fração de segundo, nunca o ícone
   antigo. */
#main input[type="image"][name="inicio"],
#main input[type="image"][name="anterior"],
#main input[type="image"][name="proximo"],
#main input[type="image"][name="fim"] {
	opacity: 0;
	width: 26px !important;
	height: 26px !important;
	vertical-align: middle;
}

.pagina-btn-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--erpx-navy);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
	vertical-align: middle;
}

.pagina-btn-wrap:hover {
	background: var(--erpx-navy-l);
}

.pagina-btn-wrap input[type="image"] {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	opacity: 0;
	padding: 0 !important;
	border: none !important;
	cursor: pointer;
}

.pagina-btn-wrap::before {
	pointer-events: none;
}

.pagina-btn-wrap[data-pag="inicio"]::before   { content: "\00AB"; }
.pagina-btn-wrap[data-pag="anterior"]::before { content: "\2039"; }
.pagina-btn-wrap[data-pag="proximo"]::before  { content: "\203A"; }
.pagina-btn-wrap[data-pag="fim"]::before      { content: "\00BB"; }

/* ---------- Campos de formulário ---------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="date"], input[type="search"],
input.input2, textarea, select {
	font-family: var(--erpx-font) !important;
	border: 1px solid var(--erpx-border) !important;
	border-radius: 4px !important;
	padding: 5px 8px !important;
	background: var(--erpx-surface) !important;
	color: var(--erpx-text) !important;
	box-shadow: none !important;
}

input[type="text"]:focus, input[type="password"]:focus, input.input2:focus,
input[type="search"]:focus, textarea:focus, select:focus {
	border-color: var(--erpx-primary) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--erpx-primary-l) !important;
}

/* ---------- Botões ----------
   Cor mudada de teal (--erpx-primary) pro azul-marinho da barra
   superior (--erpx-navy) a pedido — só nos botões de verdade (esta
   regra, busca-btn-wrap, pagina-btn-wrap), não em links/foco/diálogos,
   que continuam usando --erpx-primary normalmente.
   :not(.tox *): o editor TinyMCE (".tox" é o namespace raiz dele, ver
   condicoespedido/condicoes.htm e outras telas com htmlarea3) tem seus
   próprios <button> internos (B, I, parágrafo etc.) — sem essa exclusão,
   a regra genérica vira e estica cada botão da toolbar do editor. */
.tabela-botoes button, .tabela-botoes a,
input[type="submit"], input[type="button"], button:not(.tox *) {
	font-family: var(--erpx-font) !important;
	background: var(--erpx-navy) !important;
	background-image: none !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--erpx-radius) !important;
	padding: 0 14px !important;
	height: 32px !important;
	box-sizing: border-box !important;
	font-size: 13px !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.12s ease;
}

.tabela-botoes button:hover, .tabela-botoes a:hover,
input[type="submit"]:hover, input[type="button"]:hover, button:hover:not(.tox *) {
	background: var(--erpx-navy-d) !important;
}

.tabela-botoes button:active, .tabela-botoes a:active {
	background: var(--erpx-navy-d) !important;
}

/* ---------- jQuery UI (dialogs, autocomplete, datepicker) ---------- */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea {
	font-family: var(--erpx-font) !important;
}

.ui-widget-content {
	background: var(--erpx-surface) !important;
	border: 1px solid var(--erpx-border) !important;
	color: var(--erpx-text) !important;
}

.ui-widget-header {
	background: var(--erpx-primary) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600;
}

.ui-dialog {
	box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18) !important;
	border-radius: var(--erpx-radius) !important;
	overflow: hidden;
}

.ui-state-default, .ui-widget-content .ui-state-default {
	background: var(--erpx-surface) !important;
	border: 1px solid var(--erpx-border) !important;
	color: var(--erpx-text) !important;
}

.ui-state-hover, .ui-state-active {
	background: var(--erpx-primary-l) !important;
	border-color: var(--erpx-primary) !important;
	color: var(--erpx-primary-d) !important;
}

/* ---------- Login ---------- */
.login-form {
	background: var(--erpx-surface);
	border: 1px solid var(--erpx-border);
	border-radius: 10px;
	box-shadow: var(--erpx-shadow);
	padding: 24px;
	max-width: 400px;
	/* padrao-erpx.css trava `.login-form` em height:200px/width:500px
	   (layout antigo). O width já é resolvido pelo max-width acima
	   (que sempre vence sobre um width explícito maior), mas a altura
	   fixa sobra e corta o cartão no meio da tabela — precisa de
	   height:auto explícito pra sobrescrever. */
	height: auto;
	margin: 40px auto;
}

/* #tabela-form (padrao-erpx.css) já vem com seu próprio visual de
   cartão (fundo branco, borda, sombra, cantos arredondados) — dentro
   de .login-form isso duplicava a caixa branca (uma caixa dentro da
   outra). Zera esse visual aqui pra sobrar só o cartão externo. A
   tabela também tem <td width="72">/<td width="257"> herdados do
   markup antigo de 500px; com table-layout:fixed esses valores viram
   só a proporção das colunas dentro do cartão, em vez de largura
   mínima real — sem isso a tabela vazava pra fora do cartão (o
   "quadro branco" duplicado + barra de rolagem que o Aurelio viu). */
.login-form table {
	font-family: var(--erpx-font);
	table-layout: fixed;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.login-form #eye {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-left: 6px;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.12s ease;
}

.login-form #eye:hover { opacity: 1; }

/* ---------- Barras de título de seção (.titulo, .azul) ---------- */
.titulo, .azul {
	font-family: var(--erpx-font) !important;
	background: var(--erpx-navy) !important;
	background-image: none !important;
	border: none !important;
	color: #ffffff !important;
	text-transform: none !important;
	font-weight: 600 !important;
	border-radius: 4px;
	padding: 8px 12px !important;
	text-indent: 0 !important;
	letter-spacing: 0.2px;
}

/* ---------- Subtítulo (ex: barra "Movimento:") — cinza, como no layout antigo ---------- */
.subtitulo {
	font-family: var(--erpx-font) !important;
	background: #eceff1 !important;
	background-image: none !important;
	border: none !important;
	color: var(--erpx-text) !important;
	text-transform: none !important;
	font-weight: 600 !important;
	border-radius: 4px;
	padding: 6px 12px !important;
	text-indent: 0 !important;
	font-size: 12px !important;
}

/* ---------- Linha dos ícones de exportação (csv/imprimir/excel) ----------
   Nos relatórios essa linha vem separada, com uma célula vazia cinza do
   lado (mesma classe .subtitulo da barra de cima) que sobra como um
   retângulo morto. Escondemos essa célula vazia e deixamos a linha dos
   ícones colada, alinhada à direita, logo abaixo da barra de título. */
tr:has(> td > input[name="csv"][type="image"]) {
	background: #f5f7f8;
	direction: rtl; /* inverte visualmente as colunas, sem mexer no HTML */
}

tr:has(> td > input[name="csv"][type="image"]) > td {
	direction: ltr;
	border-top: none !important;
}

tr:has(> td > input[name="csv"][type="image"]) > td.subtitulo {
	background: transparent !important;
	border: none !important;
}

tr:has(> td > input[name="csv"][type="image"]) > td:not(.subtitulo) {
	padding: 5px 10px !important;
}

/* ---------- Mensagens ---------- */
.msgErro:not(:empty) { background: var(--erpx-danger) !important; }
.msgAviso:not(:empty) { background: #12746C !important; }
.msgInfo:not(:empty)  { background: var(--erpx-primary) !important; }

/* ---------- .spc-envol (usado em ~38 telas) ----------
   No CSS original é "display:flex; justify-content:space-around",
   que espalha os elementos pela largura toda da célula. Com botões
   maiores (nosso reskin), isso cria um vão enorme e esquisito entre
   eles em células largas. Mantemos o flex, mas agrupados à direita
   (pedido do Aurelio 2026-08-04: botões Limpar/Buscar encostados na
   lateral direita da tela, não sobrando vão vazio depois deles) com
   um respiro fixo entre os itens. */
.spc-envol {
	justify-content: flex-end !important;
	gap: 10px;
}

/* ---------- Botão de busca (teste: lupa -> botão com texto) ---------- */
.busca-btn-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--erpx-navy) !important;
	color: #fff !important;
	font-family: var(--erpx-font) !important;
	font-weight: 500;
	font-size: 13px;
	height: 32px;
	box-sizing: border-box;
	padding: 0 14px 0 16px;
	border-radius: var(--erpx-radius);
	cursor: pointer;
	transition: background 0.12s ease;
}

.busca-btn-wrap:hover {
	background: var(--erpx-navy-d) !important;
}

.busca-btn-wrap input[type="image"] {
	width: 18px !important;
	height: 18px !important;
	vertical-align: middle;
}

/* Tela de entrada (procura.htm) não tem a classe .spc-envol: garante o
   mesmo respiro entre "Limpa" e o botão "Buscar" que já existe na tela
   de resultado. */
span:has(> .busca-btn-wrap) {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}

/* ---------- Botões de ação de pedido (js/acao-btn.js) ----------
   Substitui os GIFs de 90x18px (aprovarpedido/act_comprar/cancelapedido)
   por botões de verdade, no mesmo esquema do .busca-btn-wrap: o <span>
   é quem aparece, o <input type="image"> original fica por cima,
   invisível e esticado, pra continuar sendo ele a enviar o form (com o
   name que o PHP espera).

   position:absolute + inset:0 no input (em vez de só escondê-lo) garante
   que a área clicável seja o botão inteiro, não só os 18px onde o GIF
   ficaria. */
.acao-btn-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	height: 32px;
	box-sizing: border-box;
	padding: 0 16px;
	border-radius: var(--erpx-radius);
	font-family: var(--erpx-font);
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	cursor: pointer;
	transition: background 0.12s ease;
	vertical-align: middle;
}

.acao-btn-wrap input[type="image"] {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	opacity: 0;
	cursor: pointer;
}

.acao-btn-wrap[data-acao="ok"]     { background: var(--erpx-primary); }
.acao-btn-wrap[data-acao="neutro"] { background: var(--erpx-navy); }
.acao-btn-wrap[data-acao="perigo"] {
	background: var(--erpx-surface);
	color: var(--erpx-danger);
	box-shadow: inset 0 0 0 1px var(--erpx-danger);
}

.acao-btn-wrap[data-acao="ok"]:hover     { background: var(--erpx-primary-d); }
.acao-btn-wrap[data-acao="neutro"]:hover { background: var(--erpx-navy-d); }
.acao-btn-wrap[data-acao="perigo"]:hover {
	background: var(--erpx-danger);
	color: #fff;
}

/* A barra de ações aparece duas vezes (topo e rodapé da listagem) e no
   HTML antigo os botões vêm separados só por &nbsp; solto entre os
   <input> — com botões maiores isso encosta um no outro. Resolve aqui
   sem mexer no HTML das ~20 telas que usam esses ícones. */
.linha-acoes > td {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.acao-btn-wrap + .acao-btn-wrap {
	margin-left: 10px;
}

/* ---------- Scrollbar (bônus, discreto) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c7cfda; border-radius: 6px; }

/* ============================================================
   Menu lateral (sidebar) — substitui a barra horizontal antiga.
   HTML gerado por paginas/novabarra.htm (via InterfaceBase::
   oldMenuData()) + reorganizado em árvore pelo /js/sidebar-menu.js.
   #topo e #lateral viram elementos fixos (chrome persistente);
   #main e #botton recebem o respiro correspondente.
   ============================================================ */

:root {
	--erpx-topo-h:        72px;
	--erpx-sidebar-w-exp: 250px;
	--erpx-sidebar-w-col: 60px;
	--erpx-sidebar-w:     250px;
}

body.sidebar-collapsed { --erpx-sidebar-w: var(--erpx-sidebar-w-col); }

#topo {
	position: fixed !important;
	top: 0; left: 0; right: 0;
	z-index: 500;
	/* #_nomeempresa_ tem padding-top:56px (ver acima) e o conteúdo passa
	   um pouco da altura de 72px do cabeçalho. Sem isso, essa sobra
	   invisível fica por cima do topo do sidebar (z-index maior) e rouba
	   o clique do botão de recolher / campo de busca, mesmo sem aparecer
	   nada visualmente ali. */
	overflow: hidden;
}

#lateral {
	position: fixed !important;
	top: var(--erpx-topo-h);
	left: 0;
	bottom: 0;
	width: var(--erpx-sidebar-w);
	z-index: 400;
	transition: width 0.15s ease;
	overflow: visible;
}

#main {
	/* geral.css fixa #main { width: 100%; }. Com a margem do sidebar somada
	   a isso, a caixa ficava 100% da tela + 250px, sempre vazando pra
	   direita. width:auto deixa o navegador calcular certo (100% menos a
	   margem), do jeito que devia ser desde o início. */
	width: auto !important;
	overflow-x: auto;
	box-sizing: border-box;
}

/* margin-top só faz sentido quando existe #topo fixo pra desviar —
   layoutlimpo.htm (popups de procura/lookup, ver LimpoProcura.inc) usa
   <div id="main"> sem #topo/#lateral nenhum; sem esse escopo, esse
   popup ganhava um vão vazio de 72px no topo por causa de uma regra
   pensada só pro layout com menu. */
body:has(#topo) #main {
	margin-top: var(--erpx-topo-h) !important;
}

#botton {
	position: relative;
	z-index: 1;
}

/* margin-left do sidebar só faz sentido quando existe sidebar de
   verdade — em paginas/layoutpublico.htm (tela de login) #lateral
   existe no HTML mas fica sempre vazio (não tem {menu_bar}), e esse
   respiro de 250px sobrava como espaço morto à esquerda, jogando o
   cartão de login fora do centro. Uso ":has(> *)" em vez de
   ":not(:empty)" porque o <div id="lateral">\n</div> tem uma quebra
   de linha (texto em branco) dentro — isso já basta pra CSS
   considerar o elemento "não vazio" mesmo sem nenhum filho de verdade.
   IMPORTANTE: ":has()" não pode ser aninhado dentro de outro ":has()"
   (seletor inválido, a regra inteira é descartada) — por isso aqui é
   "#lateral:has(> *) ~ #main" (combinador de irmão geral), não
   "body:has(#lateral:has(> *)) #main". Isso já quebrou o app inteiro
   uma vez (margin-left sumiu de toda tela com sidebar) até eu notar
   que o seletor era inválido — sempre testar com
   `elemento.matches(seletor)` antes de confiar num :has() novo. */
#lateral:has(> *) ~ #main,
#lateral:has(> *) ~ #botton {
	margin-left: var(--erpx-sidebar-w) !important;
	transition: margin-left 0.15s ease;
}

/* ---------- Estrutura geral do sidebar ---------- */
#erpx-sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--erpx-surface);
	border-right: 1px solid var(--erpx-border);
	box-shadow: var(--erpx-shadow);
	font-family: var(--erpx-font);
	overflow: hidden;
}

#sidebar-cabecalho {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 8px;
	border-bottom: 1px solid var(--erpx-border);
	flex: 0 0 auto;
}

#sidebar-toggle {
	background: transparent !important;
	color: var(--erpx-text-dim) !important;
	border: none !important;
	width: 32px; height: 32px !important;
	min-width: 32px;
	padding: 0 !important;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--erpx-radius) !important;
	cursor: pointer;
}

#sidebar-toggle:hover { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }

#sidebar-busca-wrap {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

#sidebar-busca-wrap > svg {
	position: absolute;
	left: 8px;
	color: var(--erpx-text-dim);
	pointer-events: none;
}

#sidebar-busca {
	width: 100%;
	border: 1px solid var(--erpx-border) !important;
	border-radius: var(--erpx-radius) !important;
	padding: 6px 26px 6px 28px !important;
	font-size: 12.5px !important;
	background: var(--erpx-bg) !important;
	color: var(--erpx-text) !important;
	box-sizing: border-box;
}

#sidebar-busca:focus {
	border-color: var(--erpx-primary) !important;
	outline: none !important;
	background: var(--erpx-surface) !important;
}

#sidebar-busca-limpar {
	display: none;
	position: absolute;
	right: 4px;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	color: var(--erpx-text-dim) !important;
	border: none !important;
	border-radius: 4px !important;
	padding: 0 !important;
	cursor: pointer;
}

#sidebar-busca-limpar:hover { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }

#sidebar-busca-wrap.tem-texto #sidebar-busca-limpar { display: flex; }

body.sidebar-collapsed #sidebar-busca-wrap { display: none; }

#sidebar-lista {
	list-style: none;
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1 1 auto;
}

/* ---------- Ícones (svg injetado via JS em .sidebar-ico) ---------- */
.sidebar-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	color: var(--erpx-text-dim);
}

.sidebar-ico svg { width: 18px; height: 18px; }

/* ---------- Links fixos (Home / Suporte / Sair) ---------- */
.sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--erpx-radius);
	color: var(--erpx-text) !important;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: nowrap;
}

.sidebar-link:hover { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }
.sidebar-link.active { background: var(--erpx-primary) !important; color: #fff !important; }
.sidebar-link.active .sidebar-ico { color: #fff; }

.sidebar-item-fixo + .sidebar-item-fixo { margin-top: 1px; }
li.sidebar-item-fixo:first-child { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--erpx-border); }
#sidebar-lista > li.sidebar-item-fixo:last-child,
#sidebar-lista > li.sidebar-item-fixo:nth-last-child(2) { margin-top: 2px; }

/* ---------- Categorias (acordeão) ---------- */
.sidebar-categoria { position: relative; margin-bottom: 1px; }

/* Prefixado com #erpx-sidebar (ID) de propósito: a regra genérica de
   botões usa "button:not(.tox *)", e o :not() herda a especificidade do
   que tem dentro (.tox = uma classe), então sem esse ID aqui o botão da
   categoria acabava saindo escuro/branco (estilo de botão de ação) em
   vez de transparente. */
#erpx-sidebar .sidebar-cat-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent !important;
	color: var(--erpx-text) !important;
	border: none !important;
	border-radius: var(--erpx-radius) !important;
	padding: 8px 10px !important;
	height: auto !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer;
	text-align: left;
}

#erpx-sidebar .sidebar-cat-header:hover { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }

.sidebar-texto { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.sidebar-chevron { flex: 0 0 auto; color: var(--erpx-text-dim); transition: transform 0.15s ease; }

.sidebar-categoria.aberta > .sidebar-cat-header .sidebar-chevron { transform: rotate(-180deg); }
#erpx-sidebar .sidebar-categoria.aberta > .sidebar-cat-header { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }
#erpx-sidebar .sidebar-categoria.tem-ativo > .sidebar-cat-header { color: var(--erpx-primary-d) !important; font-weight: 600 !important; }

.sidebar-cat-painel {
	display: none;
	padding: 2px 0 6px 0;
}

.sidebar-item-link {
	display: block;
	padding: 7px 10px 7px 42px;
	border-radius: var(--erpx-radius);
	color: var(--erpx-text-dim) !important;
	font-size: 13px;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: normal;
	line-height: 1.3;
}

.sidebar-item-link:hover { background: var(--erpx-navy-l) !important; color: var(--erpx-navy) !important; }

/* Item de primeiro nível dentro da categoria (não é sub-grupo, tipo
   "Transportadoras" dentro de Comercial) — mesma tipografia dos títulos
   de sub-grupo ao lado, pra não destoar visualmente dos outros. */
.sidebar-cat-painel > a.sidebar-item-link {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.sidebar-item-link.active { background: var(--erpx-primary-l) !important; color: var(--erpx-primary-d) !important; font-weight: 600; }

/* Sub-grupo dentro de uma categoria (convenção "Categoria: Item" do banco) */
.sidebar-subgrupo-titulo {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 6px 42px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--erpx-text-dim);
	cursor: pointer;
}

.sidebar-subgrupo-titulo .sidebar-chevron { width: 11px; height: 11px; }
.sidebar-subgrupo.aberta > .sidebar-subgrupo-titulo .sidebar-chevron { transform: rotate(-180deg); }
.sidebar-subgrupo-itens { display: none; }
.sidebar-subgrupo-itens .sidebar-item-link { padding-left: 56px; }

/* Item sem resultado na busca */
.sidebar-oculto-busca { display: none !important; }

/* ---------- Modo recolhido (só ícones) ---------- */
body.sidebar-collapsed .sidebar-texto,
body.sidebar-collapsed .sidebar-chevron { display: none; }

body.sidebar-collapsed .sidebar-link,
body.sidebar-collapsed .sidebar-cat-header { justify-content: center; padding: 8px 0 !important; }

body.sidebar-collapsed .sidebar-cat-painel {
	position: absolute;
	left: 100%;
	top: 0;
	min-width: 230px;
	margin-left: 6px;
	background: var(--erpx-surface);
	border: 1px solid var(--erpx-border);
	border-radius: var(--erpx-radius);
	box-shadow: 0 8px 24px rgba(20, 30, 50, 0.18);
	padding: 6px;
	z-index: 600;
}

body.sidebar-collapsed .sidebar-item-link,
body.sidebar-collapsed .sidebar-subgrupo-titulo,
body.sidebar-collapsed .sidebar-subgrupo-itens .sidebar-item-link {
	padding-left: 12px;
}

body.sidebar-collapsed #sidebar-toggle svg { transform: rotate(180deg); }
::-webkit-scrollbar-thumb:hover { background: #aab5c4; }

/* ---------- Telas de "Listar" (somente leitura): esconde ações de edição das planilhas ---------- */
.modo-leitura a[onclick^="add"],
.modo-leitura a[href^="javascript:limpar"] {
	display: none !important;
}

/* Sem <input>, o WebFXTabPane calcula a largura da tabela só pelo
   conteúdo da aba visível — cada aba "abre" com uma largura diferente.
   Largura fixa em 100% do contêiner: elástica com a tela, mas sempre
   a mesma independente de qual aba está aberta. */
.modo-leitura {
	overflow-x: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.modo-leitura > table[width="850"] {
	width: 97% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Valores em modo leitura: simula a aparência de um campo de edição
   (mesmo visual de input.input2 em modern-theme.css), pra separar
   visualmente do rótulo em negrito ao lado. */
.modo-leitura .campo-valor-leitura {
	display: inline-block;
	min-width: 180px;
	max-width: 100%;
	box-sizing: border-box;
	height: 30px;
	line-height: 18px;
	margin: 2px 0;
	padding: 5px 8px;
	background: var(--erpx-surface);
	border: 1px solid var(--erpx-border);
	border-radius: 4px;
	color: var(--erpx-text);
	vertical-align: middle;
}