/* Fix360 — visual novo (modelo G: planilha; cabeçalho e rodapé do D).
   Carregado pelo includes/header.php e pelas telas públicas (login, cadastro,
   acompanhamento...) quando o visual novo está ligado. Tudo aqui vale só
   dentro de body.dx: com a chave desligada, este arquivo não faz nada. */

/* =================================================================
   VISUAL NOVO — modelo G
   Cabeçalho com a identidade e o usuário; menu numa faixa abaixo dele;
   uma cor de destaque só. A cor inteira do sistema sai destas
   variáveis: para trocar a paleta, mexer em --dx-accent/--dx-head e
   nas irmãs — e depois varrer os `<style>` das telas, que trazem a cor
   antiga como reserva (`var(--dx-accent, #0F766E)`).
   ================================================================= */
/* Paleta PETRÓLEO E TURQUESA, escolhida pelo Willyan em 28/09/2026 entre cinco
   propostas. Saiu do azul-marinho por dois motivos: o azul é a cor de todo
   sistema de gestão, e o verde-azulado cansa menos numa tela cheia de números,
   olhada o dia inteiro.
   Os cinzas ganharam um viés esverdeado de propósito — cinza puro ao lado de
   petróleo parece sujo, e neutro escolhido conversa com a cor da marca.
   As cores que SIGNIFICAM coisa (urgente, atrasado, finalizado) não mudaram:
   são informação, não decoração. */
body.dx {
    --dx-head:#10343A; --dx-head-ink:#A9C6C4; --dx-head-line:#24565C; --dx-head-hover:#17444B;
    --dx-accent:#0F766E; --dx-accent-hover:#0B5F59; --dx-soft:#DDF3F1; --dx-sel:#E6F5F3;
    --dx-ground:#F2F6F5; --dx-surface:#FFFFFF; --dx-ink:#1B2524; --dx-muted:#566462; --dx-faint:#86948F;
    --dx-line:#DFE7E5; --dx-line-soft:#ECF1F0;
    /* --dx-head-real-h é a altura do cabeçalho sozinho; --dx-head-h é o quanto
       existe de topo fixo (cabeçalho + faixa do menu), usado pelo `sticky` do
       cabeçalho das tabelas. No celular a faixa é sobreposta e os dois se
       igualam — ver o bloco do menu, mais abaixo. */
    --dx-head-real-h:52px; --dx-head-h:96px; --dx-foot-h:64px; --dx-aviso-h:0px;
    font-family:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    background:var(--dx-ground); color:var(--dx-ink); font-size:14px; line-height:1.45;
}
body.dx.dx-com-aviso { --dx-aviso-h:44px; }
body.dx :focus-visible { outline:2px solid var(--dx-accent); outline-offset:2px; }

.dx-head { position:sticky; top:0; z-index:50; background:var(--dx-head); color:var(--dx-head-ink); height:var(--dx-head-real-h); }
.dx-head-in { height:100%; max-width:1600px; margin:0 auto; padding:0 16px; display:flex; align-items:center; gap:12px; }
.dx-left { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.dx-right { display:flex; align-items:center; gap:8px; flex:none; }
.dx-brand { display:flex; align-items:center; gap:9px; color:#fff; font-weight:700; font-size:17px; letter-spacing:-.01em; text-decoration:none; flex:none; }
.dx-logo { width:28px; height:28px; border-radius:7px; background:#fff; color:var(--dx-head); display:grid; place-items:center; font-size:14px; font-weight:700; }
.dx-sep { color:var(--dx-head-line); font-size:18px; flex:none; }
.dx-page { color:#fff; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.dx-iconbtn { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; color:#fff; border:1px solid var(--dx-head-line); background:transparent; flex:none; position:relative; }
.dx-iconbtn:hover { background:var(--dx-head-hover); }
.dx-unit { display:flex; align-items:center; gap:7px; border:1px solid var(--dx-head-line); border-radius:6px; padding:5px 10px; font-size:14px; color:var(--dx-head-ink); white-space:nowrap; max-width:260px; }
.dx-unit:hover { background:var(--dx-head-hover); }
.dx-unit b { color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.dx-pill { display:flex; align-items:center; gap:7px; color:#fff; border:1px solid var(--dx-head-line); border-radius:6px; padding:6px 10px; font-size:14px; font-weight:600; white-space:nowrap; }
.dx-pill:hover { background:var(--dx-head-hover); }
.dx-badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; border-radius:999px; background:#D93A2B; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--dx-head); }
/* O JS das notificações liga e desliga a classe `hidden` do Tailwind;
   o display:flex acima não pode vencer ela. */
.dx-badge.hidden { display:none; }
.dx-user { display:flex; align-items:center; gap:10px; color:#fff; padding:4px 8px 4px 4px; border-radius:8px; }
.dx-user:hover { background:var(--dx-head-hover); }
.dx-user-text b { display:block; font-weight:600; line-height:1.15; font-size:14px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dx-user-text small { display:block; color:var(--dx-head-ink); font-size:12px; line-height:1.15; }
.dx-avatar { width:32px; height:32px; border-radius:50%; background:#fff; color:var(--dx-head); display:grid; place-items:center; font-weight:700; font-size:12px; flex:none; overflow:hidden; }
.dx-avatar img { width:100%; height:100%; object-fit:cover; }
.dx-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:230px; background:#fff; color:var(--dx-ink); border:1px solid var(--dx-line); border-radius:10px; box-shadow:0 12px 32px rgba(16,32,58,.16); padding:6px; z-index:9999; }
.dx-menu a, .dx-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:6px; font-size:14px; color:var(--dx-ink); text-align:left; }
.dx-menu a:hover, .dx-menu button:hover { background:var(--dx-ground); }
.dx-menu i { width:16px; text-align:center; color:var(--dx-muted); }
.dx-menu hr { border:0; border-top:1px solid var(--dx-line-soft); margin:5px 0; }
.dx-menu .dx-perigo, .dx-menu .dx-perigo i { color:#B42318; }
.dx-menu-head { padding:8px 10px 10px; border-bottom:1px solid var(--dx-line-soft); margin-bottom:4px; }
.dx-menu-head b { display:block; font-weight:600; }
.dx-menu-head small { color:var(--dx-muted); }

.dx-aviso { height:var(--dx-aviso-h); background:#FFF6E5; border-bottom:1px solid #F3D9A4; color:#7A4A00; display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; padding:0 16px; }
.dx-aviso a { color:#7A4A00; font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* -----------------------------------------------------------------
   MENU PRINCIPAL — faixa logo abaixo do cabeçalho (24/09/2026)
   -----------------------------------------------------------------
   Estava no rodapé; subiu para cá para que navegação e identificação
   fiquem num bloco só. `--dx-head-h` passou a valer cabeçalho + faixa,
   porque é essa altura que o cabeçalho fixo das tabelas usa para não
   ficar escondido atrás do topo.

   No celular é o MESMO menu, no mesmo lugar, dobrado no hambúrguer —
   não é outra forma de navegar. Foi decisão do Willyan em 24/09/2026:
   o que é padrão num tamanho de tela vale no outro.            */
.dx-nav { position:sticky; top:var(--dx-head-real-h); z-index:49; background:var(--dx-surface); border-bottom:1px solid var(--dx-line); }
/* A régua é a MESMA do cabeçalho (.dx-head-in): 1600px e 16px de recuo.
   Estava 1180px/12px, e numa tela larga isso jogava o menu 200px para dentro —
   "Painel" começava bem depois da marca "Fix360", como se fossem dois blocos
   desalinhados. Largura de container é o tipo de valor que precisa ser o mesmo
   em todo elemento que se alinha na vertical. */
.dx-nav-in { height:44px; max-width:1600px; margin:0 auto; display:flex; align-items:center; gap:2px; padding:0 16px; overflow-x:auto; scrollbar-width:none; }
.dx-nav-in::-webkit-scrollbar { display:none; }
.dx-nav-item { display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:6px; color:var(--dx-muted); font-size:13.5px; line-height:1.1; white-space:nowrap; }
.dx-nav-item i { font-size:14px; }
.dx-nav-item:hover { color:var(--dx-ink); background:var(--dx-ground); }
.dx-nav-item.is-on { color:var(--dx-accent); background:var(--dx-soft); font-weight:600; }

/* O hambúrguer só existe no celular; no computador a faixa está aberta. */
.dx-burger { display:none; }

@media (max-width:767px) {
    body.dx { --dx-head-h:var(--dx-head-real-h); }   /* sem a faixa somando, ela é sobreposta */
    .dx-burger { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:8px; color:#fff; border:1px solid var(--dx-head-line); background:transparent; font-size:16px; }
    .dx-burger:hover { background:var(--dx-head-hover); }
    .dx-nav { position:fixed; top:var(--dx-head-real-h); left:0; right:0; max-height:calc(100vh - var(--dx-head-real-h)); overflow-y:auto; box-shadow:0 16px 32px rgba(16,32,58,.18); }
    .dx-nav[hidden] { display:none; }
    .dx-nav-in { height:auto; flex-direction:column; align-items:stretch; gap:0; padding:6px 8px; max-width:none; overflow-x:visible; }
    .dx-nav-item { justify-content:flex-start; gap:12px; padding:12px; font-size:15px; border-radius:8px; }
    .dx-nav-item i { font-size:16px; width:20px; text-align:center; }
}

/* -----------------------------------------------------------------
   PAINEL DO ASSISTENTE (24/09/2026)
   -----------------------------------------------------------------
   Abre encostado à direita, por cima da tela em que a pessoa está —
   ela continua vendo a lista enquanto procura. No celular sobe de
   baixo, como uma folha: mesma peça, versão estreita. A tela cheia
   (assistente.php) continua existindo, pelo botão de expandir.   */
.asstx { position:fixed; top:var(--dx-head-h); right:0; bottom:0; width:420px; max-width:100vw; background:var(--dx-surface); border-left:1px solid var(--dx-line); box-shadow:-12px 0 32px rgba(16,32,58,.10); display:flex; flex-direction:column; z-index:60; }
.asstx[hidden] { display:none; }
.asstx-head { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-bottom:1px solid var(--dx-line-soft); }
.asstx-quem { flex:1; min-width:0; }   /* o rosto fica fixo; o nome empurra as ações para a direita */
.asstx-head b { display:block; font-size:15px; font-weight:600; }
.asstx-head small { display:block; color:var(--dx-muted); font-size:13px; margin-top:2px; }
.asstx-acoes { display:flex; gap:4px; flex:none; }
.asstx-busca { display:flex; gap:8px; padding:12px 16px; border-bottom:1px solid var(--dx-line-soft); margin:0; }
body.dx .asstx-busca input { flex:1; min-width:0; height:38px; border:1px solid var(--gx-ctrl); border-radius:6px; padding:0 12px; font-size:14px; background:var(--dx-surface); color:var(--dx-ink); }
.asstx-corpo { flex:1; overflow-y:auto; padding:4px 16px 16px; }
.asstx-secao { margin:14px 0 6px; font-size:12.5px; font-weight:600; color:var(--gx-label); }
.asstx-item { display:block; text-decoration:none; color:inherit; border-top:1px solid var(--gx-row-line); padding:10px 0; }
.asstx-item:first-of-type { border-top:0; }
.asstx-item:hover { background:var(--gx-hover); }
.asstx-item b { display:block; font-size:14.5px; font-weight:600; }
.asstx-item small { display:block; color:var(--dx-muted); font-size:13px; margin-top:2px; line-height:1.4; }
.asstx-acao { display:block; font-size:12.5px; color:var(--dx-muted); margin-top:3px; padding-left:14px; position:relative; }
.asstx-acao::before { content:"›"; position:absolute; left:3px; color:var(--dx-faint); }
.asstx-vazio { padding:26px 0; text-align:center; color:var(--dx-muted); font-size:14px; }
/* O que o assistente entendeu da frase, em etiquetas (25/09/2026). */
.asstx-pistas { display:flex; flex-wrap:wrap; gap:5px; margin:12px 0 2px; }
.asstx-pista { display:inline-flex; align-items:center; gap:5px; font-size:12px; border:1px solid var(--dx-line);
               background:var(--gx-group); color:var(--dx-ink); border-radius:6px; padding:2px 8px; }
.asstx-pista i { font-style:normal; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--dx-muted); }
.asstx-pe { padding:10px 16px; border-top:1px solid var(--dx-line-soft); font-size:12.5px; color:var(--dx-faint); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.asstx-pe button { font-size:12.5px; border:1px solid var(--dx-line); background:var(--dx-surface); border-radius:999px; padding:3px 10px; color:var(--dx-accent); cursor:pointer; }
.asstx-pe button:hover { background:var(--dx-soft); }

@media (max-width:767px) {
    .asstx { top:auto; left:0; right:0; bottom:0; height:82vh; width:auto; border-left:0; border-top:1px solid var(--dx-line); border-radius:14px 14px 0 0; box-shadow:0 -12px 32px rgba(16,32,58,.18); }
}
@media (prefers-reduced-motion:reduce) { body.dx * { transition:none !important; animation:none !important; } }

/* =================================================================
   CAMADA DO VISUAL NOVO PARA O SISTEMA INTEIRO
   As telas foram escritas com classes do Tailwind que dão o ar
   infantil: letra de 7 a 11px em caixa alta e negrito pesado (mais de
   2.500 ocorrências somadas), cantos de 20 a 32px, sombras coloridas,
   degradês, botões que pulam. Em vez de reescrever 48 arquivos, esta
   camada reinterpreta essas classes quando o visual novo está ligado.
   Nenhuma regra de negócio muda; desligando a chave, tudo volta.
   `body.dx .classe` tem mais especificidade que a `.classe` do
   Tailwind, então vence independente da ordem dos estilos.
   ================================================================= */

/* --- Tipografia: peso, caixa e espaçamento --- */
body.dx .font-black, body.dx .font-extrabold { font-weight:600; }
body.dx .uppercase { text-transform:none; }
/* Valores que chegam do banco em minúsculo ("urgente") ganham a
   inicial maiúscula; só em elementos que aceitam ::first-letter. */
body.dx .uppercase::first-letter { text-transform:uppercase; }
body.dx span.uppercase:not([class*="hidden"]):not([class*="flex"]):not([class*="block"]):not([class*="grid"]):not([class*="inline"]):not(.truncate) { display:inline-block; }
body.dx .tracking-widest, body.dx .tracking-wider, body.dx .tracking-wide,
body.dx .tracking-tighter, body.dx .tracking-tight,
body.dx .tracking-\[0\.2em\], body.dx .tracking-\[0\.3em\] { letter-spacing:normal; }
body.dx .italic { font-style:normal; }

/* --- Tamanhos de letra: nada abaixo de 12px --- */
body.dx .text-\[6px\], body.dx .text-\[7px\], body.dx .text-\[8px\], body.dx .text-\[9px\] { font-size:12px; line-height:1.35; }
body.dx .text-\[10px\] { font-size:12.5px; line-height:1.4; }
body.dx .text-\[11px\] { font-size:13px; line-height:1.4; }
body.dx .text-xs { font-size:13px; line-height:1.4; }
@media (min-width:640px) {
    body.dx .sm\:text-\[9px\] { font-size:12px; }
    body.dx .sm\:text-\[10px\] { font-size:12.5px; }
    body.dx .sm\:text-\[11px\] { font-size:13px; }
    body.dx .sm\:text-xs { font-size:13px; }
}
@media (min-width:1024px) {
    body.dx .lg\:text-\[10px\] { font-size:12.5px; }
}

/* --- Cantos: de 20–32px para 6–10px --- */
body.dx .rounded-\[32px\], body.dx .rounded-\[30px\], body.dx .rounded-\[28px\],
body.dx .rounded-\[24px\], body.dx .rounded-\[22px\], body.dx .rounded-\[20px\],
body.dx .rounded-3xl, body.dx .rounded-2xl { border-radius:10px; }
body.dx .rounded-\[18px\], body.dx .rounded-\[16px\], body.dx .rounded-\[14px\],
body.dx .rounded-xl { border-radius:8px; }
body.dx .rounded-\[12px\], body.dx .rounded-\[10px\], body.dx .rounded-lg { border-radius:6px; }
body.dx .rounded-b-\[30px\], body.dx .rounded-b-\[40px\] { border-bottom-left-radius:10px; border-bottom-right-radius:10px; }

/* --- Sombras: neutras e discretas; só o que flutua tem elevação --- */
body.dx .shadow-sm, body.dx .shadow, body.dx .shadow-md,
body.dx .shadow-lg, body.dx .shadow-xl { box-shadow:0 1px 2px rgba(16,32,58,.06); }
body.dx .shadow-2xl { box-shadow:0 12px 32px rgba(16,32,58,.16); }
body.dx .shadow-inner, body.dx .drop-shadow-md, body.dx .drop-shadow-sm { box-shadow:none; filter:none; }
body.dx .hover\:shadow-md:hover, body.dx .hover\:shadow-xl:hover, body.dx .hover\:shadow-lg:hover { box-shadow:0 2px 6px rgba(16,32,58,.10); }

/* --- Movimento: nada de botão que pula nem selo que pisca --- */
body.dx .active\:scale-90:active, body.dx .active\:scale-95:active, body.dx .active\:scale-\[0\.98\]:active,
body.dx .hover\:scale-105:hover, body.dx .hover\:scale-95:hover,
body.dx .group:hover .group-hover\:scale-110,
body.dx .hover\:-translate-y-1:hover, body.dx .hover\:-translate-y-0\.5:hover { transform:none; }
body.dx .animate-pulse, body.dx .animate-bounce { animation:none; }

/* --- Degradês viram cor sólida da marca --- */
body.dx [class*="bg-gradient-to-"] { background-image:none; background-color:var(--dx-head); }
body.dx [class*="bg-gradient-to-"][class*="from-red-"] { background-color:#B42318; }
/* Atalhos clicáveis que eram blocos em degradê (ex.: Unidades, Categorias
   em Configurações): quatro blocos escuros lado a lado pesavam demais.
   Viram cartões claros, com o ícone na cor de destaque. */
body.dx a[class*="bg-gradient-to-"] { background-color:var(--dx-surface); color:var(--dx-ink); border:1px solid var(--dx-line); }
body.dx a[class*="bg-gradient-to-"]:hover { border-color:var(--dx-accent); }
body.dx a[class*="bg-gradient-to-"] .text-white, body.dx a[class*="bg-gradient-to-"].text-white { color:var(--dx-ink); }
body.dx a[class*="bg-gradient-to-"] i { color:var(--dx-accent); }

/* --- Opções escolhidas em grupos de botões (ex.: prioridade na Nova OS) --- */
body.dx .peer:checked ~ .peer-checked\:bg-blue-600,
body.dx .peer:checked ~ .peer-checked\:bg-blue-500,
body.dx .peer:checked ~ .peer-checked\:bg-emerald-600,
body.dx .peer:checked ~ .peer-checked\:bg-amber-500 { background-color:var(--dx-accent); border-color:var(--dx-accent); color:#fff; }

/* --- Uma cor de destaque só --- */
body.dx .text-blue-500, body.dx .text-blue-600, body.dx .text-blue-700,
body.dx .text-indigo-500, body.dx .text-indigo-600 { color:var(--dx-accent); }
body.dx .bg-blue-50, body.dx .bg-indigo-50 { background-color:var(--dx-soft); }
body.dx .border-blue-100, body.dx .border-blue-200, body.dx .border-indigo-100 { border-color:#C9D8EF; }
/* Botões de ação principal vinham em azul, índigo, roxo, verde-esmeralda
   e âmbar — cada tela de uma cor. Viram todos a cor de destaque. Vermelho
   (excluir) e verde do WhatsApp continuam: ali a cor significa algo. */
body.dx :is(a, button).bg-blue-500, body.dx :is(a, button).bg-blue-600, body.dx :is(a, button).bg-blue-700,
body.dx :is(a, button).bg-indigo-600, body.dx :is(a, button).bg-purple-600,
body.dx :is(a, button).bg-emerald-500, body.dx :is(a, button).bg-emerald-600,
body.dx :is(a, button).bg-amber-500, body.dx :is(a, button).bg-amber-600 { background-color:var(--dx-accent); color:#fff; }
body.dx :is(a, button)[class*="hover:bg-blue-"]:hover.bg-blue-600,
body.dx :is(a, button).bg-blue-600:hover, body.dx :is(a, button).bg-indigo-600:hover,
body.dx :is(a, button).bg-emerald-600:hover, body.dx :is(a, button).bg-amber-500:hover,
body.dx :is(a, button).bg-purple-600:hover { background-color:var(--dx-accent-hover); }

/* --- Bordas quase invisíveis sobre o fundo novo --- */
body.dx .border-slate-100 { border-color:var(--dx-line); }

/* --- Campos de formulário: texto normal, 15px (evita zoom no iPhone) --- */
body.dx input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.dx select, body.dx textarea { font-weight:400; font-size:14px; }
/* Sem forçar a cor: há campos claros sobre fundo escuro (ex.: seletor de
   cliente em Configurações) e a cor escura os deixava ilegíveis. */
body.dx input::placeholder, body.dx textarea::placeholder { color:#98A2A6; font-weight:400; }
body.dx label { letter-spacing:normal; }

/* --- Classes próprias de algumas telas (fora do Tailwind) --- */
/* .glass-card: cartão do login e do esqueci a senha, com canto de 32px e sombra pesada. */
body.dx .glass-card { border-radius:12px; background:var(--dx-surface); backdrop-filter:none; border:1px solid var(--dx-line); box-shadow:0 12px 32px rgba(16,32,58,.10); }
/* .card-neo: cartões do acompanhamento público e da cotação do prestador. */
body.dx .card-neo { border-radius:10px; border-color:var(--dx-line); box-shadow:0 1px 2px rgba(16,32,58,.06); }

/* --- Telas públicas --- */
/* Faixas de topo pintadas de azul-elétrico (ex.: cadastro) viram a cor do cabeçalho. */
body.dx-publico div.bg-blue-600 { background-color:var(--dx-head); }

/* --- Janelas do SweetAlert --- */
body.dx .swal2-popup { border-radius:12px !important; font-family:inherit; }
body.dx .swal2-title { font-weight:600 !important; font-size:21px !important; }
body.dx .swal2-styled { border-radius:6px !important; font-weight:600 !important; box-shadow:none !important; }

/* =================================================================
   PEÇAS DO MODELO G — compartilhadas por todas as telas
   Classes gx-*. Só existem quando o visual novo está ligado (este
   arquivo só carrega nesse caso). Cada tela monta a página com elas,
   em vez de estilo próprio: assim o sistema inteiro fica igual.

   Página ........ .gx (largura e respiro)
   Barra de título .gx-bar > .gx-bar-top (.gx-title, .gx-sub, ações)
                           > .gx-bar-tools (abas, agrupar, busca, filtros)
   Botões ........ .gx-btn, .gx-btn-primary, .gx-btn-perigo, .gx-ico
   Tabela ........ .gx-card > table.gx-table[.gx-resp]
                   linhas .gx-row, grupo .gx-group, subtotal .gx-sub,
                   total .gx-total; células .gx-num .gx-mono .gx-acoes
   Celular ....... com .gx-resp a tabela vira lista: aparecem só
                   .gx-ck, .gx-m-title, .gx-m-side, .gx-m-meta e .gx-acoes
                   (.gx-only-m some no computador)
   Painel ........ .gx-panel > .gx-panel-head (h2) + .gx-panel-body
   Ficha ......... .gx-kv (pares rótulo/valor)
   Formulário .... .gx-form (grade de 12) > .gx-field[.gx-w6|gx-w4|gx-w3|gx-w8] (label + campo)
   Resumo ........ .gx-kpis > .gx-kpi (número em mono + rótulo)
   Situação ...... .gx-tag.is-ok|is-warn|is-danger|is-info|is-muted
   ================================================================= */
body.dx {
    --gx-ctrl:#CFD6DD; --gx-line-strong:#C9D0D7; --gx-row-line:#E7EBEE; --gx-group:#EDF0F3;
    --gx-label:#56626C; --gx-hover:#F6F8FB; --gx-mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
    --gx-ok:#1F8A4C; --gx-warn:#C98A12; --gx-danger:#B42318; --gx-info:#1E5BB8; --gx-off:#98A2AB;
}

/* --- Página e barra de título --- */
.gx { max-width:1600px; margin:0 auto; padding:16px 16px 24px; display:flex; flex-direction:column; gap:12px; }
.gx-estreita { max-width:960px; }
.gx-bar { background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:8px; }
.gx-bar-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px 10px; flex-wrap:wrap; }
.gx-bar-top > div:first-child { min-width:0; }
.gx-bar-acoes { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gx-title { margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.2; color:var(--dx-ink); text-wrap:balance; }
.gx-sub { margin:1px 0 0; font-size:13px; color:var(--dx-muted); }
.gx-voltar { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--dx-muted); margin-bottom:2px; }
.gx-voltar:hover { color:var(--dx-accent); }
.gx-bar-tools { display:flex; align-items:center; gap:10px; padding:8px 16px; border-top:1px solid var(--dx-line-soft); flex-wrap:wrap; }
.gx-lbl { font-size:13px; color:var(--dx-muted); }
.gx-grow { flex:1; }
.gx-seg { display:inline-flex; border:1px solid var(--gx-ctrl); border-radius:5px; overflow:hidden; }
.gx-seg > a, .gx-seg > button { padding:5px 11px; font-size:13px; color:#34404A; border-right:1px solid var(--gx-ctrl); white-space:nowrap; background:#fff; }
.gx-seg > :last-child { border-right:0; }
.gx-seg > a:hover, .gx-seg > button:hover { background:var(--dx-ground); }
.gx-seg > .is-on { background:var(--dx-head); color:#fff; font-weight:600; }
.gx-tabs { display:flex; gap:16px; overflow-x:auto; scrollbar-width:none; }
.gx-tabs::-webkit-scrollbar { display:none; }
.gx-tab { display:flex; align-items:center; gap:6px; padding:5px 0; font-size:14px; color:var(--dx-muted); white-space:nowrap; border-bottom:2px solid transparent; background:none; cursor:pointer; }
.gx-tab:hover { color:var(--dx-ink); }
.gx-tab.is-on { color:var(--dx-ink); font-weight:600; border-color:var(--dx-accent); }
.gx-tab-n { font-family:var(--gx-mono); font-size:11px; font-weight:500; background:#E9EDEE; color:#4E5A5E; border-radius:999px; padding:0 7px; line-height:18px; }
.gx-tab-n.is-alerta { background:#FBE6E1; color:#9A2E1B; }

/* --- Busca, filtros e etiquetas de filtro --- */
.gx-search { display:flex; align-items:center; gap:8px; border:1px solid var(--gx-ctrl); border-radius:5px; padding:0 9px; background:var(--dx-surface); width:300px; max-width:100%; }
.gx-search:focus-within { border-color:var(--dx-accent); box-shadow:0 0 0 3px var(--dx-soft); }
.gx-search i { color:var(--dx-faint); font-size:12px; }
body.dx .gx-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; padding:6px 0; font-size:14px; box-shadow:none; height:auto; }
body.dx .gx-search input:focus, body.dx .gx-search input:focus-visible { outline:none; box-shadow:none; border:0; }
.gx-filtros { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:10px; align-items:end; padding:10px 16px 12px; border-top:1px solid var(--dx-line-soft); background:#FAFBFC; }
.gx-filtros[hidden] { display:none; }
.gx-filtros label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--dx-muted); min-width:0; }
body.dx .gx-filtros input, body.dx .gx-filtros select { box-sizing:border-box; height:34px; margin:0; border:1px solid var(--gx-ctrl); border-radius:5px; padding:0 8px; font-size:14px; background:#fff; width:100%; min-width:0; }
.gx-filtros-acoes { display:flex; gap:6px; }
.gx-chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; padding:0 16px 10px; }
.gx-chip { display:inline-flex; align-items:center; gap:6px; background:var(--dx-soft); color:var(--dx-accent); border-radius:999px; padding:2px 6px 2px 10px; font-size:13px; font-weight:600; }
.gx-chip i { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; font-size:10px; }
.gx-chip:hover i { background:rgba(30,91,184,.15); }
.gx-limpar { font-size:13px; color:var(--dx-muted); text-decoration:underline; text-underline-offset:2px; background:none; border:0; cursor:pointer; }
.gx-dot-n { background:var(--dx-accent); color:#fff; border-radius:999px; font-size:11px; padding:0 6px; line-height:17px; }

/* --- Botões --- */
.gx-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--gx-ctrl); background:var(--dx-surface); color:#2A3640; border-radius:5px; padding:6px 12px; font-size:13.5px; font-weight:500; white-space:nowrap; line-height:1.3; cursor:pointer; text-decoration:none; }
.gx-btn:hover { background:var(--dx-ground); }
.gx-btn:disabled, .gx-btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }
.gx-btn-primary { background:var(--dx-accent); border-color:var(--dx-accent); color:#fff; font-weight:600; }
.gx-btn-primary:hover { background:var(--dx-accent-hover); }
.gx-btn-perigo { color:var(--gx-danger); border-color:#F0C9C3; }
.gx-btn-perigo:hover { background:#FDF1EF; }
.gx-btn-zap { color:#127A45; border-color:#BFE3CD; }
.gx-btn-zap:hover { background:#EAF7EF; }
.gx-btn-sm { padding:3px 9px; font-size:12.5px; }
.gx-ico { width:28px; height:28px; display:inline-grid; place-items:center; border-radius:5px; border:1px solid transparent; color:var(--gx-label); background:transparent; cursor:pointer; text-decoration:none; }
.gx-ico:hover { background:#fff; border-color:var(--gx-ctrl); color:var(--dx-ink); }
.gx-ico-perigo:hover { color:var(--gx-danger); border-color:#F0C9C3; background:#FDF1EF; }
.gx-ico-zap:hover { color:#127A45; border-color:#BFE3CD; background:#EAF7EF; }

/* --- Avisos --- */
.gx-aviso { padding:8px 12px; border-radius:6px; font-size:14px; display:flex; gap:8px; align-items:center; }
.gx-aviso-ok { background:#EAF6EE; color:#17603A; }
.gx-aviso-erro { background:#FDF0EE; color:#9A2E1B; }
.gx-aviso-atencao { background:#FFF6E5; color:#7A4A00; }
.gx-aviso-info { background:var(--dx-soft); color:#1B4A8F; }

/* --- Tabela --- */
/* Sem overflow:hidden no cartão: ele prenderia o cabeçalho fixo da tabela. */
.gx-card { background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:8px; }
.gx-rolagem { overflow-x:auto; }
.gx-rolagem .gx-table thead th { position:static; }
.gx-table { width:100%; border-collapse:collapse; font-size:14px; }
.gx-table thead th { position:sticky; top:var(--dx-head-h); z-index:5; background:#fff; text-align:left; font-weight:600; font-size:12.5px; color:var(--gx-label); padding:8px 10px; border-bottom:1px solid var(--gx-line-strong); white-space:nowrap; }
.gx-table thead th:first-child { border-top-left-radius:8px; }
.gx-table thead th:last-child { border-top-right-radius:8px; }
.gx-table thead th.gx-num { text-align:right; }
.gx-table td { padding:6px 10px; border-bottom:1px solid var(--gx-row-line); vertical-align:middle; }
.gx-table tbody:last-child tr:last-child td { border-bottom:0; }
.gx-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gx-mono { font-family:var(--gx-mono); font-size:12.5px; color:#44505A; white-space:nowrap; }
.gx-forte { font-weight:500; color:var(--dx-ink); }
.gx-forte a { color:inherit; }
.gx-forte a:hover { text-decoration:underline; text-underline-offset:2px; }
.gx-fraco, .gx-muted { color:var(--gx-off); }
/* Coluna "Envio" (28/09/2026): um risco = saiu do sistema, dois riscos verdes =
   o prestador abriu o link. A leitura é a mesma do WhatsApp, de propósito. */
.gx-env { white-space:nowrap; font-size:12.5px; }
.gx-env-sent { color:var(--gx-off); }
.gx-env-ok   { color:var(--gx-ok); font-weight:600; }
.gx-env i { font-size:11px; }
.gx-quebra { white-space:normal; max-width:420px; }
.gx-ck { width:36px; text-align:center; }
.gx-ck input { width:15px; height:15px; accent-color:var(--dx-accent); cursor:pointer; vertical-align:middle; }
.gx-thumb { width:32px; height:32px; border-radius:5px; object-fit:cover; background:var(--gx-group); display:inline-grid; place-items:center; color:var(--gx-off); font-size:12px; vertical-align:middle; }

.gx-group td { background:var(--gx-group); padding:0; border-top:1px solid var(--gx-line-strong); border-bottom:1px solid var(--gx-line-strong); }
.gx-group-btn { all:unset; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:4px; padding:7px 12px; cursor:pointer; font-weight:600; color:var(--dx-ink); flex-wrap:wrap; }
.gx-group-btn:hover { background:#E6EAEE; }
.gx-group-btn:focus-visible { outline:2px solid var(--dx-accent); outline-offset:-2px; }
.gx-group-rot { display:flex; align-items:center; gap:4px; padding:7px 12px; font-weight:600; flex-wrap:wrap; }
.gx-caret { display:inline-block; width:16px; color:var(--gx-label); transition:transform .15s; }
.gx-group.is-closed .gx-caret { transform:rotate(-90deg); }
.gx-meta { font-weight:400; color:var(--gx-label); margin-left:10px; font-size:13px; }
.gx-meta b { font-weight:600; color:var(--gx-danger); }

.gx-row[data-href] { cursor:pointer; }
.gx-row:hover td { background:var(--gx-hover); }
.gx-row.is-inativa { opacity:.55; }
.gx-row.is-hidden, .gx-sub.is-hidden { display:none; }
.gx-row.is-destaque td:first-child { box-shadow:inset 3px 0 0 var(--dx-accent); }
.gx-acoes { width:1%; white-space:nowrap; text-align:right; }
.gx-acoes-in { display:inline-flex; gap:4px; align-items:center; }
/* Ações secundárias: SEMPRE visíveis (24/09/2026).
   Antes elas só apareciam ao passar o mouse na linha, para a tabela ficar
   limpa. Na prática, quem usa precisava varrer a lista com o mouse para
   descobrir o que dava para fazer em cada linha — e num sistema de trabalho
   isso custa mais do que o ganho visual. Ficam em cinza, mais discretas que
   o botão principal, e ganham a cor de destaque quando o mouse chega. */
.gx-sec { opacity:.62; }
.gx-row:hover .gx-sec, .gx-row:focus-within .gx-sec, .gx-sec:hover, .gx-sec:focus-visible { opacity:1; }

.gx-sub td { background:#FAFBFC; font-size:12.5px; color:var(--gx-label); border-bottom:1px solid var(--gx-line-strong); padding:5px 10px; }
.gx-total td { background:var(--dx-head); color:#fff; padding:9px 12px; font-size:13.5px; }
.gx-total b { font-family:var(--gx-mono); font-weight:500; }
.gx-total .gx-late-t { color:#FFC9BF; }
.gx-card > .gx-table:last-child .gx-total td:first-child { border-bottom-left-radius:7px; }
.gx-card > .gx-table:last-child .gx-total td:last-child { border-bottom-right-radius:7px; }

.gx-vazio { padding:48px 20px; text-align:center; color:var(--dx-muted); }
.gx-vazio b { display:block; color:var(--dx-ink); font-size:16px; font-weight:600; margin-bottom:2px; }
.gx-pag { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-top:1px solid var(--dx-line); font-size:13px; color:var(--dx-muted); flex-wrap:wrap; }
.gx-pag-nav { display:flex; align-items:center; gap:4px; }
.gx-pag a, .gx-pag .gx-off { min-width:30px; height:30px; padding:0 6px; display:grid; place-items:center; border:1px solid var(--gx-ctrl); border-radius:5px; color:var(--dx-ink); }
.gx-pag a.is-on { background:var(--dx-head); border-color:var(--dx-head); color:#fff; font-weight:600; }
.gx-pag .gx-off { color:#C4CBCD; }
body.dx .gx-pag select { border:1px solid var(--gx-ctrl); border-radius:5px; padding:4px 6px; font-size:13px; background:#fff; }

/* --- Situação, prioridade, contadores --- */
.gx-tag { --c:var(--gx-off); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gx-tag::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--c); flex:none; }
.gx-tag.is-ok { --c:var(--gx-ok); } .gx-tag.is-warn { --c:var(--gx-warn); } .gx-tag.is-danger { --c:var(--gx-danger); }
.gx-tag.is-info { --c:var(--gx-info); } .gx-tag.is-muted { --c:var(--gx-off); color:var(--dx-muted); }
.gx-pri, .gx-st { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.gx-pri i { width:8px; height:8px; border-radius:2px; flex:none; }
.gx-st i { width:7px; height:7px; border-radius:50%; flex:none; }
.gx-pill { display:inline-block; font-size:11.5px; font-weight:600; border-radius:999px; padding:0 8px; line-height:19px; white-space:nowrap; background:#E9EDEE; color:#4E5A5E; }
.gx-pill.is-accent { background:var(--dx-accent); color:#fff; }
.gx-pill.is-warn { background:#FFF1D6; color:#7A4A00; }
.gx-pill.is-danger { background:#FBE6E1; color:#9A2E1B; }
.gx-pill.is-ok { background:#E3F3E9; color:#17603A; }
.gx-late { color:var(--gx-danger); font-weight:600; }

/* --- Painel (seção de tela de detalhe/formulário) --- */
.gx-panel { background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:8px; }
.gx-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; border-bottom:1px solid var(--dx-line-soft); flex-wrap:wrap; }
.gx-panel-head h2, .gx-panel-head h3 { margin:0; font-size:15px; font-weight:600; color:var(--dx-ink); }
.gx-panel-head small { color:var(--dx-muted); font-size:13px; }
.gx-panel-body { padding:14px 16px; }
.gx-panel-body > * + * { margin-top:10px; }
.gx-panel-foot { display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; border-top:1px solid var(--dx-line-soft); background:#FAFBFC; border-radius:0 0 8px 8px; flex-wrap:wrap; }
.gx-cols { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; align-items:start; }
.gx-cols-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start; }
.gx-stack { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* --- Ficha rótulo/valor --- */
.gx-kv { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; margin:0; font-size:14px; }
.gx-kv dt { color:var(--gx-label); font-size:13px; }
.gx-kv dd { margin:0; color:var(--dx-ink); min-width:0; overflow-wrap:anywhere; }

/* --- Formulário --- */
.gx-form { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px 14px; }
.gx-field { grid-column:span 12; display:flex; flex-direction:column; gap:4px; min-width:0; }
/* gx-w6 e não w-6: w-6 é uma classe do Tailwind (largura 24px). */
.gx-field.gx-w6 { grid-column:span 6; } .gx-field.gx-w4 { grid-column:span 4; } .gx-field.gx-w3 { grid-column:span 3; } .gx-field.gx-w8 { grid-column:span 8; }
.gx-field > label, .gx-label { font-size:13px; font-weight:500; color:#34404A; }
.gx-field .gx-ajuda { font-size:12.5px; color:var(--dx-muted); }
body.dx .gx-input, body.dx .gx-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), body.dx .gx-field select, body.dx .gx-field textarea {
    box-sizing:border-box; width:100%; min-width:0; height:36px; border:1px solid var(--gx-ctrl); border-radius:5px; padding:0 10px; font-size:14px; background:#fff; color:var(--dx-ink); box-shadow:none;
}
body.dx .gx-field textarea, body.dx textarea.gx-input { height:auto; min-height:88px; padding:8px 10px; line-height:1.45; resize:vertical; }
body.dx .gx-input:focus, body.dx .gx-field :is(input, select, textarea):focus { outline:none; border-color:var(--dx-accent); box-shadow:0 0 0 3px var(--dx-soft); }
.gx-check { display:inline-flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.gx-check input { width:16px; height:16px; accent-color:var(--dx-accent); }
.gx-form-acoes { grid-column:span 12; display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; padding-top:4px; }

/* --- Resumo numérico em faixa (cara de planilha, não de "cards") --- */
.gx-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:8px; }
.gx-kpi { padding:10px 16px; border-right:1px solid var(--dx-line-soft); min-width:0; display:block; color:inherit; }
.gx-kpi:last-child { border-right:0; }
a.gx-kpi:hover { background:var(--gx-hover); }
.gx-kpi b { display:block; font-family:var(--gx-mono); font-weight:500; font-size:22px; line-height:1.2; color:var(--dx-ink); font-variant-numeric:tabular-nums; }
.gx-kpi span { display:block; font-size:12.5px; color:var(--gx-label); }
.gx-kpi.is-danger b { color:var(--gx-danger); } .gx-kpi.is-warn b { color:#9A6200; } .gx-kpi.is-ok b { color:var(--gx-ok); }

/* --- Janela (modal) desenhada no G --- */
.gx-modal { background:var(--dx-surface); border-radius:10px; border:1px solid var(--dx-line); box-shadow:0 16px 40px rgba(16,32,58,.22); width:100%; max-width:560px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; }
.gx-modal > .gx-panel-body { overflow-y:auto; }

.gx-only-m { display:none; }
.gx-table td.gx-only-m { display:none; }

/* --- Celular --- */
@media (max-width:767px) {
    .gx { padding:10px 10px 16px; }
    .gx-search { width:100%; }
    .gx-bar-tools .gx-grow { display:none; }
    .gx-filtros { grid-template-columns:1fr 1fr; }
    .gx-filtros-acoes { grid-column:1/-1; justify-content:flex-end; }
    .gx-cols, .gx-cols-2 { grid-template-columns:minmax(0,1fr); }
    .gx-field.gx-w6, .gx-field.gx-w4, .gx-field.gx-w3, .gx-field.gx-w8 { grid-column:span 12; }
    .gx-kv { grid-template-columns:minmax(0,1fr); gap:0; }
    .gx-kv dd { margin-bottom:8px; }
    .gx-kpi { border-bottom:1px solid var(--dx-line-soft); }
    .gx-only-m { display:revert; }

    /* Tabela .gx-resp vira lista: título e lado em cima; detalhe e ações embaixo. */
    .gx-resp thead { display:none; }
    .gx-resp, .gx-resp tbody, .gx-resp tfoot, .gx-resp .gx-group, .gx-resp .gx-total, .gx-resp .gx-group td, .gx-resp .gx-total td { display:block; }
    .gx-resp .gx-group { position:sticky; top:var(--dx-head-h); z-index:4; }
    .gx-resp .gx-sub { display:none; }
    .gx-resp .gx-row { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title side" "meta acts"; column-gap:10px; row-gap:2px; padding:9px 12px; border-bottom:1px solid var(--gx-row-line); }
    .gx-resp .gx-row:has(> td.gx-ck) { grid-template-columns:24px minmax(0,1fr) auto; grid-template-areas:"ck title side" "ck meta acts"; padding-left:8px; }
    .gx-resp .gx-row.is-hidden { display:none; }
    .gx-resp .gx-row > td { display:none; padding:0; border:0; background:transparent; }
    .gx-resp .gx-row > td.gx-ck { display:block; grid-area:ck; width:auto; text-align:left; padding-top:2px; }
    .gx-resp .gx-row > td.gx-m-title { display:block; grid-area:title; max-width:none; white-space:normal; }
    .gx-resp .gx-row > td.gx-m-side { display:block; grid-area:side; text-align:right; }
    .gx-resp .gx-row > td.gx-m-meta { display:block; grid-area:meta; font-size:13px; color:var(--gx-label); white-space:normal; }
    .gx-resp .gx-row > td.gx-acoes { display:block; grid-area:acts; width:auto; align-self:end; }
    .gx-resp .gx-row:hover td { background:transparent; }
    .gx-resp .gx-row.is-destaque td:first-child { box-shadow:none; }
    .gx-resp .gx-row.is-destaque { box-shadow:inset 3px 0 0 var(--dx-accent); }
    /* No celular as ações secundárias ficam dentro do registro; só as marcadas .gx-keep-m ficam. */
    .gx-resp .gx-sec:not(.gx-keep-m) { display:none; }
}

/* --- Complementos de formulário --- */
/* Grupo de opções (radio) com cara de .gx-seg: o input fica escondido e o span pinta. */
.gx-seg-op { position:relative; display:inline-flex; cursor:pointer; border-right:1px solid var(--gx-ctrl); }
.gx-seg-op:last-child { border-right:0; }
.gx-seg-op > span { padding:6px 14px; font-size:13.5px; color:#34404A; background:#fff; white-space:nowrap; }
.gx-seg-op:hover > span { background:var(--dx-ground); }
.gx-seg-op > input:checked + span { background:var(--dx-head); color:#fff; font-weight:600; }
.gx-seg-op > input:focus-visible + span { outline:2px solid var(--dx-accent); outline-offset:-2px; }
/* Lista de caixas de marcar (ex.: unidades atendidas). */
.gx-checks { display:flex; flex-wrap:wrap; gap:6px 16px; padding:8px 10px; border:1px solid var(--gx-ctrl); border-radius:5px; background:#fff; }
/* Bloco de campos dependentes (ex.: contato da empresa). */
.gx-bloco { gap:10px; padding:10px 12px; background:#F7F9FB; border:1px solid var(--dx-line); border-radius:6px; }
/* A classe hidden do Tailwind precisa vencer o display das peças (o JS das telas usa ela). */
body.dx .gx-field.hidden, body.dx .gx-bloco.hidden, body.dx .gx-panel.hidden, body.dx .gx-aviso.hidden { display:none; }

/* --- Ajustes pedidos ao levar as telas para o G --- */
/* hidden (Tailwind ou atributo) sempre vence o display das peças: os scripts das telas dependem disso. */
body.dx :is(.gx-btn, .gx-form, .gx-search, .gx-kpis, .gx-cols, .gx-card, .gx-tabs, .gx-seg).hidden,
body.dx :is(.gx-btn, .gx-form, .gx-search, .gx-kpis, .gx-cols, .gx-card, .gx-tabs, .gx-seg, .gx-panel, .gx-field, .gx-aviso)[hidden] { display:none; }
/* Cor de alerta dentro da ficha rótulo/valor. */
.gx-kv dd.gx-late { color:var(--gx-danger); }
/* Número em mono dentro do título herda o tamanho do título. */
.gx-title .gx-mono { font-size:inherit; color:inherit; }
/* Dentro de janela a rolagem é da janela: cabeçalho de tabela fixo no topo da página ficaria errado. */
.gx-modal .gx-table thead th { position:static; }
/* =================================================================
   MOLDURA DAS TELAS DE ENTRADA (login, senhas, cadastro)
   HTML em includes/entrada_publica.php. À esquerda a faixa marinho com
   uma grade discreta de planilha; à direita o formulário, sem cartão.
   ================================================================= */
body.dx-publico:has(> .gxe) { display:block !important; min-height:100vh; margin:0; padding:0 !important; background:var(--dx-surface) !important; }
.gxe { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); font-size:15px; }
.gxe-lado { position:relative; background:var(--dx-head); color:var(--dx-head-ink); padding:40px 56px; display:flex; flex-direction:column; overflow:hidden; }
.gxe-lado::before { content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(to right, rgba(143,163,192,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(143,163,192,.10) 1px, transparent 1px);
    background-size:120px 36px; background-position:-1px -1px;
    -webkit-mask-image:linear-gradient(135deg, #000 10%, transparent 75%); mask-image:linear-gradient(135deg, #000 10%, transparent 75%); }
.gxe-lado > * { position:relative; }
.gxe-marca { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:20px; letter-spacing:-.01em; align-self:flex-start; }
.gxe-logo { width:34px; height:34px; border-radius:8px; background:#fff; color:var(--dx-head); display:grid; place-items:center; font-size:17px; font-weight:700; }
.gxe-lado-corpo { margin:auto 0; max-width:30em; padding-block:48px; }
.gxe-frase { margin:0 0 14px; color:#fff; font-size:clamp(26px, 2.5vw, 36px); line-height:1.15; letter-spacing:-.02em; font-weight:600; text-wrap:balance; }
.gxe-apoio { margin:0 0 30px; font-size:16px; }
.gxe-etapas { border:1px solid var(--dx-head-line); border-radius:8px; overflow:hidden; background:rgba(11,27,51,.35); }
.gxe-etapa { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; border-top:1px solid var(--dx-head-line); }
.gxe-etapa:first-child { border-top:0; }
.gxe-n { align-self:stretch; display:grid; place-items:center; font-family:var(--gx-mono); font-size:12px; color:#8FA3C0; border-right:1px solid var(--dx-head-line); background:rgba(11,27,51,.35); }
.gxe-etapa div { padding:11px 16px; }
.gxe-etapa b { display:block; color:#fff; font-weight:600; font-size:15px; }
.gxe-etapa span { font-size:13.5px; }
.gxe-etapa em { font-style:normal; font-family:var(--gx-mono); font-size:12px; color:#8FA3C0; padding-right:16px; white-space:nowrap; }
.gxe-lado-pe { display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:#8FA3C0; flex-wrap:wrap; }
.gxe-lado-pe a { color:var(--dx-head-ink); }
.gxe-lado-pe a:hover { color:#fff; }

.gxe-main { background:var(--dx-surface); display:flex; flex-direction:column; padding:40px 56px; }
.gxe-form { margin:auto 0; width:100%; max-width:380px; align-self:center; padding-block:32px; display:flex; flex-direction:column; gap:18px; }
.gxe-form.gxe-larga { max-width:520px; }
.gxe-pe { font-size:12.5px; color:var(--dx-faint); display:flex; gap:6px; justify-content:center; align-items:center; }
.gxe-ajuda { margin:4px 0 0; font-size:13.5px; color:var(--dx-muted); text-align:center; }
.gxe-ajuda a { color:var(--dx-accent); font-weight:500; }

/* O cartão das telas vira página: sem borda, sem fundo, com respiro maior. */
.gxe .gxp-marca { display:none; }
.gxe .gx-panel { border:0; background:transparent; border-radius:0; }
.gxe .gx-panel-body { padding:0 !important; }
.gxe .gx-panel-body > * + * { margin-top:18px; }
.gxe .gx-panel-foot { background:transparent; border-top:1px solid var(--dx-line); border-radius:0; padding:18px 0 0; margin-top:24px; justify-content:center; }
.gxe .gxp-titulo { font-size:28px; letter-spacing:-.02em; }
.gxe .gxp-sub { font-size:15px; margin-top:6px; }
.gxe .gx-form { gap:16px 14px; }
.gxe .gx-field > label, .gxe .gx-label { font-size:14px; }
body.dx .gxe .gx-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), body.dx .gxe .gx-field select { height:46px; font-size:15.5px; padding:0 14px; }
.gxe .gx-btn-primary.gxp-full, .gxe .gxp-full { height:48px; font-size:16px; }
/* Botão de mostrar a senha dentro do campo. */
.gxe-senha { position:relative; }
body.dx .gxe .gxe-senha input { padding-right:84px !important; }
.gxe-senha button { position:absolute; right:6px; top:6px; height:34px; padding:0 10px; border:0; border-radius:5px; background:transparent; color:var(--dx-muted); font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; }
.gxe-senha button:hover { background:var(--dx-ground); color:var(--dx-ink); }
.gxe-sep { display:flex; align-items:center; gap:12px; color:var(--dx-faint); font-size:13px; margin:8px 0 0; }
.gxe-sep::before, .gxe-sep::after { content:""; flex:1; height:1px; background:var(--dx-line); }

@media (max-width:900px) {
    .gxe { grid-template-columns:minmax(0,1fr); min-height:0; }
    .gxe-lado { padding:16px 20px; }
    .gxe-lado-corpo, .gxe-lado-pe { display:none; }
    .gxe-main { padding:28px 20px 28px; min-height:calc(100vh - 66px); }
    .gxe-form { margin:0 0 auto; padding-block:8px 24px; }
}


/* ===================================================================
   PARTE 3 — TEMA ESCURO (24/09/2026)
   -------------------------------------------------------------------
   Vale só para o visual novo (body.dx) e só quando o <html> tem
   data-tema="escuro" — sem o atributo, nada aqui roda e o sistema
   continua exatamente como está.

   São dois blocos:
     1. os tokens de cor trocam de valor (é o que pinta as peças gx-*,
        que já usam var(--dx-...) em tudo);
     2. as classes do Tailwind que trazem cor fixa no HTML das telas
        (bg-white, text-slate-700, border-slate-200...) são reescritas,
        do mesmo jeito que a Parte 2 faz com as classes "infantis".
   =================================================================== */
/* Os tokens claros são declarados em body.dx (e não em :root), então a versão
   escura precisa vir no mesmo elemento — senão o body reescreve tudo de volta. */
:root[data-tema="escuro"] { color-scheme: dark; }
:root[data-tema="escuro"] body.dx {
    /* A versão escura do petróleo. O destaque clareia bastante (#3BB8AA): o
       turquesa fechado do tema claro, sobre fundo escuro, ficaria ilegível. */
    --dx-head:#0C2A2E; --dx-head-ink:#A3BEBC; --dx-head-line:#1D4045; --dx-head-hover:#143539;
    --dx-accent:#3BB8AA; --dx-accent-hover:#55CCC0; --dx-soft:#12312F; --dx-sel:#102B2A;
    --dx-ground:#0C1614; --dx-surface:#14201F; --dx-ink:#E2EBE9; --dx-muted:#97A9A6; --dx-faint:#72847F;
    --dx-line:#25332F; --dx-line-soft:#1E2B28;
    --gx-ctrl:#364744; --gx-line-strong:#3A4B48; --gx-row-line:#212E2B; --gx-group:#1B2725;
    --gx-label:#97A9A6; --gx-hover:#1A2523;
    --gx-ok:#3FBF75; --gx-warn:#E0A83C; --gx-danger:#F1746A; --gx-info:#4C8DF6; --gx-off:#7D8A96;
}

/* --- Superfícies: tudo que era branco ou cinza-claro no HTML das telas --- */
:root[data-tema="escuro"] body.dx { background:var(--dx-ground); color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .bg-white,
:root[data-tema="escuro"] body.dx .bg-slate-50,
:root[data-tema="escuro"] body.dx .bg-gray-50,
:root[data-tema="escuro"] body.dx .bg-slate-100,
:root[data-tema="escuro"] body.dx .bg-gray-100 { background-color:var(--dx-surface); }
:root[data-tema="escuro"] body.dx .bg-slate-200, :root[data-tema="escuro"] body.dx .bg-gray-200 { background-color:var(--gx-group); }
:root[data-tema="escuro"] body.dx .bg-slate-800, :root[data-tema="escuro"] body.dx .bg-slate-900 { background-color:#0A121C; }

/* --- Texto: a escala do Tailwind é clara para escuro; aqui ela inverte --- */
:root[data-tema="escuro"] body.dx .text-slate-900, :root[data-tema="escuro"] body.dx .text-gray-900,
:root[data-tema="escuro"] body.dx .text-slate-800, :root[data-tema="escuro"] body.dx .text-gray-800,
:root[data-tema="escuro"] body.dx .text-slate-700, :root[data-tema="escuro"] body.dx .text-gray-700 { color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .text-slate-600, :root[data-tema="escuro"] body.dx .text-gray-600,
:root[data-tema="escuro"] body.dx .text-slate-500, :root[data-tema="escuro"] body.dx .text-gray-500 { color:var(--dx-muted); }
:root[data-tema="escuro"] body.dx .text-slate-400, :root[data-tema="escuro"] body.dx .text-gray-400,
:root[data-tema="escuro"] body.dx .text-slate-300 { color:var(--dx-faint); }

/* --- Linhas --- */
:root[data-tema="escuro"] body.dx [class*="border-slate-"],
:root[data-tema="escuro"] body.dx [class*="border-gray-"] { border-color:var(--dx-line); }
:root[data-tema="escuro"] body.dx [class*="divide-slate-"] > * + * { border-color:var(--dx-line); }

/* --- Selos e avisos coloridos: fundo claro vira fundo escuro da mesma cor --- */
:root[data-tema="escuro"] body.dx .bg-emerald-50, :root[data-tema="escuro"] body.dx .bg-green-50 { background-color:#122A1E; }
:root[data-tema="escuro"] body.dx .bg-amber-50, :root[data-tema="escuro"] body.dx .bg-yellow-50, :root[data-tema="escuro"] body.dx .bg-orange-50 { background-color:#2C2413; }
:root[data-tema="escuro"] body.dx .bg-red-50, :root[data-tema="escuro"] body.dx .bg-rose-50 { background-color:#2E1715; }
:root[data-tema="escuro"] body.dx .text-emerald-600, :root[data-tema="escuro"] body.dx .text-emerald-700, :root[data-tema="escuro"] body.dx .text-green-600 { color:var(--gx-ok); }
:root[data-tema="escuro"] body.dx .text-amber-600, :root[data-tema="escuro"] body.dx .text-amber-700, :root[data-tema="escuro"] body.dx .text-yellow-600 { color:var(--gx-warn); }
:root[data-tema="escuro"] body.dx .text-red-500, :root[data-tema="escuro"] body.dx .text-red-600, :root[data-tema="escuro"] body.dx .text-red-700 { color:var(--gx-danger); }

/* --- Campos --- */
:root[data-tema="escuro"] body.dx input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root[data-tema="escuro"] body.dx select,
:root[data-tema="escuro"] body.dx textarea { background-color:#101A25; border-color:var(--gx-ctrl); color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx input::placeholder, :root[data-tema="escuro"] body.dx textarea::placeholder { color:#6E7B87; }

/* --- Sombras: no escuro elas somem; quem separa é a linha --- */
:root[data-tema="escuro"] body.dx [class*="shadow"] { box-shadow:none; }
:root[data-tema="escuro"] body.dx .gx-panel, :root[data-tema="escuro"] body.dx .gx-modal-box { box-shadow:0 8px 24px rgba(0,0,0,.35); }

/* --- Imagem e miniatura não ficam estourando no fundo escuro --- */
:root[data-tema="escuro"] body.dx img { opacity:.94; }

/* --- Peças gx-* que trazem branco fixo (escritas antes de existir tema) --- */
:root[data-tema="escuro"] body.dx .gx-table thead th,
:root[data-tema="escuro"] body.dx .gx-seg > a, :root[data-tema="escuro"] body.dx .gx-seg > button,
:root[data-tema="escuro"] body.dx .gx-seg-op > span,
:root[data-tema="escuro"] body.dx .gx-checks,
:root[data-tema="escuro"] body.dx .dx-menu, :root[data-tema="escuro"] body.dx .dx-mais-menu { background:var(--dx-surface); color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .gx-table thead th { color:var(--gx-label); }
:root[data-tema="escuro"] body.dx .gx-sub td { background:#131C26; }
:root[data-tema="escuro"] body.dx .gx-mono { color:#B9C5D1; }
:root[data-tema="escuro"] body.dx .gx-tab-n { background:#25313D; color:#C2CDD8; }
:root[data-tema="escuro"] body.dx .gx-ico:hover { background:var(--gx-hover); }
:root[data-tema="escuro"] body.dx .gx-aviso-atencao { background:#2C2413; color:#E8C57A; }
/* As outras três faltavam (29/09/2026): no escuro ficavam com o fundo claro do
   tema claro — um bloco branco no meio da tela. Apareceu ao criar o aviso de
   envio grande demais, que usa a variante de erro. */
:root[data-tema="escuro"] body.dx .gx-aviso-erro { background:#2E1714; color:#F1A79A; }
:root[data-tema="escuro"] body.dx .gx-aviso-ok   { background:#122A1D; color:#8ED9AC; }
:root[data-tema="escuro"] body.dx .gx-aviso-info { background:var(--dx-soft); color:#7FD6CA; }
:root[data-tema="escuro"] body.dx .gx-pill.is-warn { background:#2C2413; color:#E8C57A; }
:root[data-tema="escuro"] body.dx .dx-aviso { background:#2C2413; border-bottom-color:#4A3D1C; color:#E8C57A; }

/* --- Botões de contorno: no claro eram brancos sobre cinza --- */
:root[data-tema="escuro"] body.dx .gx-btn { background:#1C2733; border-color:var(--gx-ctrl); color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .gx-btn:hover { background:#233040; }
:root[data-tema="escuro"] body.dx .gx-btn-primary { background:var(--dx-accent); border-color:var(--dx-accent); color:#0B1420; }
:root[data-tema="escuro"] body.dx .gx-btn-primary:hover { background:var(--dx-accent-hover); }
:root[data-tema="escuro"] body.dx .gx-seg > .is-on,
:root[data-tema="escuro"] body.dx .gx-seg-op > input:checked + span,
:root[data-tema="escuro"] body.dx .gx-pag a.is-on { background:var(--dx-accent); border-color:var(--dx-accent); color:#0B1420; }
:root[data-tema="escuro"] body.dx .gx-total td { background:#12312F; color:#D8E8E5; }
:root[data-tema="escuro"] body.dx .gx-panel-foot { background:#131C26; }
:root[data-tema="escuro"] body.dx .gx-pill { background:#25313D; color:#C2CDD8; }
:root[data-tema="escuro"] body.dx .gx-pill.is-ok { background:#122A1E; color:#7FD3A0; }
:root[data-tema="escuro"] body.dx .gx-pill.is-accent { background:var(--dx-accent); color:#0B1420; }

/* Campo desligado: no claro ele clareia; no escuro precisa escurecer. */
:root[data-tema="escuro"] body.dx input:disabled,
:root[data-tema="escuro"] body.dx select:disabled,
:root[data-tema="escuro"] body.dx textarea:disabled { background-color:#141D28; color:var(--dx-faint); }

/* Peças de tela que nasceram com branco fixo antes de existir tema. Os
   seletores por pedaço do nome (-anexar, -thumb) pegam as variantes de cada
   tela (nos-, eos-, gxa-...) e as que vierem depois. */
:root[data-tema="escuro"] body.dx [class*="-anexar"],
:root[data-tema="escuro"] body.dx [class*="-thumb"],
:root[data-tema="escuro"] body.dx .gxusu-codigo { background:#131C26; color:var(--dx-ink); }