/* 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 no rodapé; uma cor de
   destaque só. A cor inteira do sistema sai destas variáveis: para
   trocar para petróleo, basta mudar --dx-accent/--dx-head e as irmãs.
   ================================================================= */
body.dx {
    --dx-head:#12294A; --dx-head-ink:#C3CFE0; --dx-head-line:#2A4670; --dx-head-hover:#1B3660;
    --dx-accent:#1E5BB8; --dx-accent-hover:#184C9A; --dx-soft:#E7EEF9; --dx-sel:#EAF1FB;
    --dx-ground:#F3F5F7; --dx-surface:#FFFFFF; --dx-ink:#1D2426; --dx-muted:#5E6A6E; --dx-faint:#8A9599;
    --dx-line:#E1E5EA; --dx-line-soft:#EDF0F3;
    --dx-head-h:52px; --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-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; }

.dx-foot-space { height:calc(var(--dx-foot-h) + env(safe-area-inset-bottom)); }
.dx-foot { position:fixed; left:0; right:0; bottom:0; z-index:990; background:var(--dx-surface); border-top:1px solid var(--dx-line); padding-bottom:env(safe-area-inset-bottom); }
.dx-foot-in { height:var(--dx-foot-h); max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; }
.dx-foot-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:84px; padding:7px 8px; border-radius:8px; color:var(--dx-muted); font-size:12px; line-height:1.1; white-space:nowrap; }
.dx-foot-item i { font-size:17px; }
.dx-foot-item:hover { color:var(--dx-ink); background:var(--dx-ground); }
.dx-foot-item.is-on { color:var(--dx-accent); background:var(--dx-soft); font-weight:600; }
.dx-mais { position:relative; }
.dx-mais-menu { position:absolute; right:0; bottom:calc(100% + 10px); min-width:200px; background:#fff; border:1px solid var(--dx-line); border-radius:10px; box-shadow:0 -8px 28px rgba(16,32,58,.14); padding:6px; }
.dx-mais-menu a { display:flex; align-items:center; gap:10px; padding:10px; border-radius:6px; font-size:15px; color:var(--dx-ink); }
.dx-mais-menu a i { width:18px; text-align:center; color:var(--dx-muted); }
.dx-mais-menu a.is-on, .dx-mais-menu a.is-on i { color:var(--dx-accent); font-weight:600; }
.dx-mais-menu a:hover { background:var(--dx-ground); }
@media (max-width:767px) {
    .dx-foot-item { min-width:0; flex:1; padding:6px 2px; font-size:11px; }
}
@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); }
.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 aparecem ao passar o mouse na linha (sempre, em tela de toque). */
.gx-sec { opacity:0; }
.gx-row:hover .gx-sec, .gx-row:focus-within .gx-sec { opacity:1; }
@media (hover:none) { .gx-sec { 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; }
}