/* =============================================================================
   Sistema de Vendas — visual único (modelo G do fix360)
   =============================================================================
   Um só estilo para o sistema inteiro. Cabeçalho fixo azul-marinho com a
   marca, a tela, a empresa e o usuário; menu numa faixa logo abaixo dele
   (sem barra lateral); no celular o MESMO menu, no mesmo lugar, dobrado no
   hambúrguer. Uma cor de destaque só.

   A cor inteira do sistema sai das variáveis --dx-*: para mudar a
   identidade, mexer só nelas.

   Índice
     Parte 1 ... base, cabeçalho e menu principal (includes/layout_topo.php)
     Parte 2 ... peças das telas, classes gx-* (iguais às do fix360)
     Parte 3 ... complementos do Vendas (janela sobreposta, diálogo, toast, impressão)
     Parte 6 ... peças compartilhadas da etapa 2 (gx-qtd, gx-prods, gx-linhas, gx-auto...)
     Parte 4 ... moldura das telas de entrada (login, senhas)
     Parte 5 ... tema escuro (só redefine tokens e o que tinha cor fixa)

   Estilo que só uma tela usa fica num <style> dentro dela, com prefixo
   próprio (pdv-, cmd-...), e sempre com as variáveis — nunca cor fixa.
   ============================================================================= */

/* =============================================================================
   PARTE 1 — base, cabeçalho e menu
   ============================================================================= */
body.dx {
    /* Modelo 2 "Laranja Genialogic" (escolhido em 28/09/2026): topo grafite,
       destaque laranja da marca, fundo levemente quente. */
    --dx-head:#1F2430; --dx-head-ink:#C9CED8; --dx-head-line:#363C4A; --dx-head-hover:#2A3040;
    --dx-accent:#DD6310; --dx-accent-hover:#BF520A; --dx-soft:#FFEEDF; --dx-sel:#FFF5EC;
    --dx-ground:#F6F4F1; --dx-surface:#FFFFFF; --dx-ink:#1D2426; --dx-muted:#5E6A6E; --dx-faint:#8A9599;
    --dx-line:#E6E1DB; --dx-line-soft:#EFEBE6;
    /* --dx-head-real-h é o cabeçalho sozinho; --dx-head-h é todo o topo fixo
       (cabeçalho + faixa do menu) — é ele que o `sticky` do cabeçalho das
       tabelas usa, para o título da coluna não sumir atrás do menu. */
    --dx-head-real-h:52px; --dx-head-h:96px;
    margin:0;
    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;
}
/* Base com :where() — especificidade zero, para qualquer peça (.gx-btn-primary,
   .dx-menu a...) vencer sem precisar de body.dx na frente. */
:where(body.dx) *, :where(body.dx) *::before, :where(body.dx) *::after { box-sizing:border-box; }
:where(body.dx) a { color:inherit; text-decoration:none; }
:where(body.dx) button { font:inherit; color:inherit; }
:where(body.dx) :is(h1, h2, h3, h4) { margin:0; }
body.dx :focus-visible { outline:2px solid var(--dx-accent); outline-offset:2px; }

/* --- Cabeçalho --- */
.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; 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; cursor:pointer; }
.dx-iconbtn:hover { background:var(--dx-head-hover); }
.dx-rel { position:relative; min-width:0; }
.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); background:transparent; white-space:nowrap; max-width:280px; cursor:pointer; }
.dx-unit:hover { background:var(--dx-head-hover); }
.dx-unit b { color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.dx-unit i { font-size:12px; }
.dx-unit .dx-caret { font-size:10px; }
/* Empresa fixa (só uma empresa, ou tela que não troca): mesmo desenho, sem clique. */
span.dx-unit { cursor:default; }
span.dx-unit:hover { background:transparent; }
.dx-user { display:flex; align-items:center; gap:10px; color:#fff; padding:4px 8px 4px 4px; border-radius:8px; border:0; background:transparent; cursor:pointer; }
.dx-user:hover { background:var(--dx-head-hover); }
.dx-user-text { text-align:left; }
.dx-user-text b { display:block; font-weight:600; line-height:1.15; font-size:14px; max-width:160px; 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; }

/* Menus que abrem do cabeçalho (empresa, usuário) */
.dx-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:230px; max-height:calc(100vh - 80px); overflow-y:auto; background:var(--dx-surface); color:var(--dx-ink); border:1px solid var(--dx-line); border-radius:10px; box-shadow:0 12px 32px rgba(24,26,34,.16); padding:6px; z-index:9999; }
.dx-menu[hidden] { display:none; }
.dx-menu-esq { left:0; right:auto; }
.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; border:0; background:transparent; cursor:pointer; }
.dx-menu a:hover, .dx-menu button:hover { background:var(--dx-ground); }
.dx-menu a.is-on { font-weight:600; }
.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:var(--gx-danger); }
.dx-user .dx-caret { font-size:10px; }
.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 { display:block; color:var(--dx-muted); }

/* --- Menu principal: faixa logo abaixo do cabeçalho ---
   Diferença para o fix360: aqui os itens se juntam em grupos (Vendas,
   Estoque, Cadastros, Relatórios) que abrem uma lista, porque são 18 telas.
   Sem overflow na faixa: ele cortaria a lista que abre para baixo. */
.dx-nav { position:sticky; top:var(--dx-head-real-h); z-index:49; background:var(--dx-surface); border-bottom:1px solid var(--dx-line); }
.dx-nav-in { height:44px; max-width:1600px; margin:0 auto; display:flex; align-items:center; gap:2px; padding:0 12px; }
.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; border:0; background:transparent; cursor:pointer; }
.dx-nav-item i { font-size:14px; }
.dx-nav-item .dx-caret { font-size:10px; margin-left:1px; opacity:.7; }
.dx-nav-item:hover, .dx-nav-grp.is-open > .dx-nav-item { color:var(--dx-ink); background:var(--dx-ground); }
.dx-nav-item.is-on, .dx-nav-grp.is-on > .dx-nav-item { color:var(--dx-accent); background:var(--dx-soft); font-weight:600; }
.dx-nav-grp { position:relative; }
.dx-nav-drop { position:absolute; left:0; top:calc(100% + 5px); min-width:240px; background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:8px; box-shadow:0 12px 32px rgba(24,26,34,.14); padding:6px; z-index:60; }
.dx-nav-drop[hidden] { display:none; }
.dx-nav-drop a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-size:14px; color:var(--dx-ink); white-space:nowrap; }
.dx-nav-drop a i { width:16px; text-align:center; color:var(--dx-muted); }
.dx-nav-drop a:hover { background:var(--dx-ground); }
.dx-nav-drop a.is-on { background:var(--dx-soft); color:var(--dx-accent); font-weight:600; }
.dx-nav-drop a.is-on i { color:var(--dx-accent); }
.dx-drop-sec { font-size:11.5px; font-weight:600; color:var(--dx-faint); text-transform:uppercase; letter-spacing:.05em; padding:8px 10px 3px; }

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

@media (max-width:767px) {
    body.dx { --dx-head-h:var(--dx-head-real-h); }   /* no celular a faixa é 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; cursor:pointer; }
    .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(24,26,34,.18); }
    .dx-nav[hidden] { display:none; }
    .dx-nav-in { height:auto; flex-direction:column; align-items:stretch; gap:0; padding:6px 8px; }
    .dx-nav-item { justify-content:flex-start; gap:12px; padding:12px; font-size:15px; border-radius:8px; width:100%; }
    .dx-nav-item i { font-size:16px; width:20px; text-align:center; }
    .dx-nav-item .dx-caret { margin-left:auto; }
    .dx-nav-drop { position:static; box-shadow:none; border:0; padding:0 0 6px 32px; min-width:0; }
    .dx-nav-drop a { font-size:15px; padding:10px; }
    .dx-sem-m { display:none !important; }
    .dx-so-m { display:revert; }
    .dx-unit { max-width:190px; }
}

/* =============================================================================
   PARTE 2 — peças das telas (classes gx-*), iguais às do fix360
   (fix360/assets/css/visual-novo.css). Ao mudar uma peça aqui, avaliar se
   a mudança vale lá também.
   ============================================================================= */
body.dx {
    --gx-ctrl:#D6D0C9; --gx-line-strong:#CEC7BF; --gx-row-line:#EDE8E2; --gx-group:#F4EFE9;
    --gx-label:#56626C; --gx-hover:#FFF9F3; --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;
    /* Etapa 2 (M2): as cores que estavam escritas direto nas peças viraram
       tokens — fundo claro + texto de cada situação, rodapé de painel, fundo
       de campo. O tema escuro (Parte 5) só redefine os tokens. */
    --gx-ok-bg:#E3F3E9; --gx-ok-ink:#17603A; --gx-warn-bg:#FFF1D6; --gx-warn-ink:#7A4A00;
    --gx-danger-bg:#FBE6E1; --gx-danger-ink:#9A2E1B; --gx-danger-line:#F0C9C3; --gx-info-ink:#1B4A8F;
    --gx-neutro-bg:#E9EDEE; --gx-neutro-ink:#4E5A5E; --gx-atencao-ink:#9A6200;
    --gx-ink-2:#34404A; --gx-btn-ink:#2A3640; --gx-mono-ink:#44505A; --gx-foot:#FBF9F7; --gx-campo:#FFFFFF;
    /* Cores dos ícones dos indicadores (.gx-kpi > i), em rodízio — Parte 10. */
    --gx-k1:#16A34A; --gx-k1-bg:#DCFCE7; --gx-k2:#2563EB; --gx-k2-bg:#DBEAFE; --gx-k3:#7C3AED; --gx-k3-bg:#EDE9FE;
    --gx-k4:#EA580C; --gx-k4-bg:#FFEDD5; --gx-k5:#DB2777; --gx-k5-bg:#FCE7F3;
    /* Paleta curta para marcar itens lado a lado (ex.: comandas: id % 6). */
    --gx-pal-0:#1E5BB8; --gx-pal-1:#1F8A4C; --gx-pal-2:#C98A12; --gx-pal-3:#7A4FB5; --gx-pal-4:#2F8C99; --gx-pal-5:#B5476B;
}

/* --- 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:var(--gx-ink-2); border-right:1px solid var(--gx-ctrl); white-space:nowrap; background:var(--dx-surface); }
.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:var(--gx-neutro-bg); color:var(--gx-neutro-ink); border-radius:999px; padding:0 7px; line-height:18px; }
.gx-tab-n.is-alerta { background:var(--gx-danger-bg); color:var(--gx-danger-ink); }

/* --- 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:var(--gx-foot); }
.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:var(--gx-campo); 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:color-mix(in srgb, var(--dx-accent) 15%, transparent); }
.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:var(--gx-btn-ink); 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:var(--gx-danger-line); }
.gx-btn-perigo:hover { background:var(--gx-danger-bg); }
/* -zap: espelho do fix360 (WhatsApp), sem uso no Vendas. */
.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:var(--dx-surface); border-color:var(--gx-ctrl); color:var(--dx-ink); }
.gx-ico-perigo:hover { color:var(--gx-danger); border-color:var(--gx-danger-line); background:var(--gx-danger-bg); }
.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:var(--gx-ok-bg); color:var(--gx-ok-ink); }
.gx-aviso-erro { background:var(--gx-danger-bg); color:var(--gx-danger-ink); }
.gx-aviso-atencao { background:var(--gx-warn-bg); color:var(--gx-warn-ink); }
.gx-aviso-info { background:var(--dx-soft); color:var(--gx-info-ink); }

/* --- 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:var(--dx-surface); 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:var(--gx-mono-ink); 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: 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:var(--gx-foot); 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:var(--gx-neutro-bg); color:var(--gx-neutro-ink); }
.gx-pill.is-accent { background:var(--dx-accent); color:#fff; }
.gx-pill.is-warn { background:var(--gx-warn-bg); color:var(--gx-warn-ink); }
.gx-pill.is-danger { background:var(--gx-danger-bg); color:var(--gx-danger-ink); }
.gx-pill.is-ok { background:var(--gx-ok-bg); color:var(--gx-ok-ink); }
.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:var(--gx-foot); 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:var(--gx-ink-2); }
.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:var(--gx-campo); 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:var(--gx-atencao-ink); } .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(24,26,34,.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:var(--gx-ink-2); background:var(--dx-surface); 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:var(--gx-campo); }
/* Bloco de campos dependentes (espelho do fix360; sem uso no Vendas por enquanto). */
.gx-bloco { gap:10px; padding:10px 12px; background:var(--gx-foot); border:1px solid var(--dx-line); border-radius:6px; }
/* A classe .hidden do Tailwind saiu (etapa 2): nenhuma tela usa mais. O atributo
   hidden vence qualquer peça pela regra geral da Parte 6. */

/* --- Ajustes pedidos ao levar as telas para o G --- */
/* 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; }

/* =============================================================================
   PARTE 3 — complementos do Vendas
   ============================================================================= */

/* --- Janela sobreposta: fundo escuro + .gx-modal no meio ---
   <div class="gx-overlay" id="modalX" hidden><div class="gx-modal">
       <div class="gx-panel-head"><h2>Título</h2><button class="gx-ico" data-gx-fechar>×</button></div>
       <div class="gx-panel-body">…</div>
       <div class="gx-panel-foot">…</div>
   </div></div>
   Abre com gxAbrir('#modalX'); fecha com gxFechar('#modalX'), Esc ou clique no fundo. */
.gx-overlay { position:fixed; inset:0; background:rgba(24,26,34,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:100; }
.gx-overlay[hidden] { display:none; }
.gx-modal-lg { max-width:860px; }
body.gx-travado { overflow:hidden; }

/* Página estreita (formulário único, configuração) */
.gx.gx-estreita { max-width:960px; }
.gx.gx-media { max-width:1200px; }

/* Texto de apoio e utilitários pequenos */
.gx-centro { text-align:center; }
.gx-direita { text-align:right; }
.gx-nowrap { white-space:nowrap; }
.gx-cor-ok { color:var(--gx-ok); } .gx-cor-perigo { color:var(--gx-danger); } .gx-cor-atencao { color:var(--gx-atencao-ink); }
.gx-linha { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gx-entre { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }

/* --- Ranking com barra de proporção (ex.: mais vendidos no painel) ---
   <div class="gx-rank"><span>1. Produto</span><span class="gx-mono">86 un</span></div>
   <div class="gx-barra"><i style="width:48%"></i></div> */
.gx-rank { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.gx-barra { height:6px; background:var(--gx-group); border-radius:3px; margin:5px 0 12px; overflow:hidden; }
.gx-barra i { display:block; height:100%; background:var(--dx-accent); }

/* Campo solto em barra de ferramentas (data, select) com a altura dos botões */
body.dx .gx-campo { height:31px; border:1px solid var(--gx-ctrl); border-radius:5px; padding:0 8px; font:inherit; font-size:13.5px; background:var(--gx-campo); color:var(--dx-ink); max-width:100%; }
body.dx .gx-campo:focus { outline:none; border-color:var(--dx-accent); box-shadow:0 0 0 3px var(--dx-soft); }

/* --- Janela de confirmação/aviso do sistema (gxConfirmar / gxAvisar no app.js) ---
   Substitui alert()/confirm() do navegador. Fica acima de qualquer outra janela. */
.gx-dialogo { z-index:200; }
.gx-dialogo .gx-modal { max-width:440px; }
.gx-dlg-corpo { display:flex; gap:14px; align-items:flex-start; padding:20px 20px 16px; }
.gx-dlg-corpo > div { min-width:0; }
.gx-dlg-ico { width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:17px; background:var(--dx-soft); color:var(--dx-accent); }
.gx-dlg-ico.is-perigo, .gx-dlg-ico.is-erro { background:var(--gx-danger-bg); color:var(--gx-danger); }
.gx-dlg-ico.is-atencao { background:var(--gx-warn-bg); color:var(--gx-atencao-ink); }
.gx-dlg-ico.is-ok { background:var(--gx-ok-bg); color:var(--gx-ok); }
.gx-dlg-titulo { font-size:16px; font-weight:600; line-height:1.3; margin:6px 0 0; color:var(--dx-ink); overflow-wrap:anywhere; }
.gx-dlg-texto { margin:6px 0 0; color:var(--dx-muted); font-size:14px; overflow-wrap:anywhere; }
.gx-dialogo .gx-panel-foot { border-radius:0 0 10px 10px; }
/* Aviso rápido (gxToast): canto inferior, some sozinho, não trava a tela. */
.gx-toasts { position:fixed; right:16px; bottom:16px; z-index:300; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none; }
.gx-toast { display:flex; align-items:center; gap:9px; background:var(--dx-head); color:#fff; border-radius:8px; padding:10px 14px; font-size:14px; box-shadow:0 12px 32px rgba(24,26,34,.22); transition:opacity .35s, transform .35s; }
.gx-toast i { font-size:15px; }
.gx-toast.is-ok i { color:#7FD8A4; } .gx-toast.is-erro i { color:#FFB4A8; } .gx-toast.is-atencao i { color:#FFD27A; } .gx-toast.is-info i { color:#A9C6F2; }
.gx-toast.is-saindo { opacity:0; transform:translateY(6px); }
@media (max-width:767px) { .gx-toasts { left:12px; right:12px; bottom:12px; align-items:stretch; } }

/* Botão de ação destrutiva confirmada (vermelho cheio). */
.gx-btn-perigo-cheio { background:var(--gx-danger); border-color:var(--gx-danger); color:#fff; font-weight:600; }
.gx-btn-perigo-cheio:hover { background:var(--gx-danger-ink); }
@media (max-width:767px) {
    .gx-dialogo { align-items:flex-end; padding:0; }
    .gx-dialogo .gx-modal { max-width:none; border-radius:14px 14px 0 0; }
    .gx-dialogo .gx-panel-foot > .gx-btn { flex:1; padding:10px 12px; }
    /* Na lista do celular o detalhe fica à esquerda, mesmo quando a coluna é numérica. */
    .gx-resp .gx-row > td.gx-m-meta { text-align:left; }
}

/* --- Imagem ilustrativa do produto (includes/produto_imagem.php) ---
   Pictograma gerado pelo nome: ícone do tipo sobre a cor da categoria.
   Com foto (imagem_url), a foto ocupa o quadro. Tamanho padrão 44px;
   .gx-pim-lg para o quadro grande dos cartões de escolha. */
.gx-pim { --pim-bg:var(--gx-group); --pim-ink:var(--gx-label); width:44px; height:44px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--pim-bg); color:var(--pim-ink); font-size:19px; overflow:hidden; }
.gx-pim img { width:100%; height:100%; object-fit:cover; display:block; }
.gx-pim-lg { width:100%; height:auto; aspect-ratio:16/10; font-size:30px; border-radius:6px; }
.gx-pim-sm { width:32px; height:32px; font-size:14px; border-radius:6px; }
.gx-pim.is-bebida     { --pim-bg:#E4EEFB; --pim-ink:#1E5BB8; }
.gx-pim.is-energetico { --pim-bg:#FFF1D6; --pim-ink:#9A6200; }
.gx-pim.is-cafe       { --pim-bg:#F3E9E1; --pim-ink:#7A4A2A; }
.gx-pim.is-suplemento { --pim-bg:#E3F3E9; --pim-ink:#17603A; }
.gx-pim.is-doce       { --pim-bg:#FBE8EF; --pim-ink:#9A2E5B; }
.gx-pim.is-refeicao   { --pim-bg:#FDEBDD; --pim-ink:#A0461A; }
.gx-pim.is-vestuario  { --pim-bg:#EFE9FB; --pim-ink:#5B3FA0; }
.gx-pim.is-acessorio  { --pim-bg:#E6F0F2; --pim-ink:#2F6570; }

/* Larguras de campo que faltavam na grade de 12 (gx-w6/w4/w3/w8 vêm do fix360). */
.gx-field.gx-w2 { grid-column:span 2; } .gx-field.gx-w5 { grid-column:span 5; } .gx-field.gx-w9 { grid-column:span 9; }
@media (max-width:767px) { .gx-field.gx-w2, .gx-field.gx-w5, .gx-field.gx-w9 { grid-column:span 12; } }

/* Número em mono dentro do total (fundo marinho) herda o branco. */
.gx-total .gx-mono, .gx-total td { color:#fff; }
@media (max-width:767px) {
    /* Total no celular: uma faixa só, rótulo à esquerda e valores à direita. */
    .gx-resp .gx-total { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; background:var(--dx-head); border-radius:0 0 7px 7px; }
    .gx-resp .gx-total td { display:block; padding:8px 12px; background:transparent; }
}

/* <button> usado como aba ou segmento não traz a borda padrão do navegador. */
button.gx-tab { border:0; border-bottom:2px solid transparent; padding:5px 0; }
button.gx-tab.is-on { border-bottom-color:var(--dx-accent); }
.gx-seg > button { border:0; border-right:1px solid var(--gx-ctrl); cursor:pointer; }
.gx-seg > button:last-child { border-right:0; }

/* Campos só de leitura / desligados: fundo cinza, sem parecer editável. */
/* !important: a regra geral dos campos tem quatro :not() e venceria por especificidade. */
body.dx .gx-field :is(input, select, textarea):is([readonly], :disabled) { background:var(--dx-ground) !important; color:var(--dx-muted) !important; }
body.dx .gx-field textarea, body.dx textarea.gx-input { font-family:inherit; }
/* .gx-field dentro de outra grade (linhas de itens) não ocupa as 12 colunas. */
.gx-grade-livre > .gx-field { grid-column:auto; }

/* --- Impressão: sai o topo fixo, fica a tela --- */
@media print {
    .dx-head, .dx-nav, .gx-noprint { display:none !important; }
    body.dx { background:#fff; }
    .gx { padding:0; max-width:none; }
    .gx-bar, .gx-card, .gx-panel, .gx-kpis { border-color:#bbb; }
    .gx-table thead th { position:static; }
    /* Fundos de total, grupo, situação e barra saem no papel (senão o total branco some). */
    .gx-total td, .gx-group td, .gx-tag::before, .gx-barra, .gx-barra i { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    tr.gx-row { break-inside:avoid; }
}

/* =============================================================================
   PARTE 6 — peças compartilhadas (etapa 2, 28/09/2026)
   -----------------------------------------------------------------------------
   Antes cada tela tinha a sua cópia (pdv-qtd e cmd-qtd, pdv-prod e cmd-prod,
   apc-grade e aeg-grade, ent-item e prd-ing-row...), com diferenças pequenas
   que ninguém escolheu. Agora é uma peça só, com as variáveis (acompanha o
   tema escuro sozinha). Uso em PADRAO-TELAS.md.
   ============================================================================= */

/* O atributo hidden sempre vence o display de qualquer peça. O JS das telas
   esconde com el.hidden = true (M3: nada de style.display); sem isto, peças com
   display próprio (.gx-row no celular, .gx-prod, display:contents) apareciam. */
body.dx [hidden] { display:none !important; }

/* --- Quantidade −/+ (PDV, comandas) ---
   <div class="gx-qtd" role="group" aria-label="Quantidade de Café">
     <button type="button" aria-label="Diminuir Café">−</button><output>2</output>
     <button type="button" aria-label="Aumentar Café">+</button></div> */
.gx-qtd { display:inline-flex; align-items:center; flex:none; border:1px solid var(--gx-ctrl); border-radius:5px; background:var(--dx-surface); }
.gx-qtd > button { width:28px; height:28px; border:0; border-radius:4px; background:transparent; color:var(--dx-ink); font-weight:600; cursor:pointer; }
.gx-qtd > button:hover { background:var(--dx-ground); }
.gx-qtd > output, .gx-qtd > span { min-width:32px; padding:0 4px; text-align:center; font-family:var(--gx-mono); font-size:13px; line-height:28px; color:var(--dx-ink);
    border-left:1px solid var(--gx-ctrl); border-right:1px solid var(--gx-ctrl); }

/* --- Cartões de produto para escolher (PDV, janela da comanda) ---
   HTML pronto: produto_cartao_html() em includes/produto_imagem.php.
   <div class="gx-prods"> button.gx-prod > .gx-pim + .gx-prod-nome + .gx-prod-pe(.gx-prod-est + .gx-mono) */
.gx-prods { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; align-content:start; }
.gx-prods > .gx-vazio { grid-column:1 / -1; }
.gx-prod { display:flex; flex-direction:column; justify-content:flex-start; gap:6px; min-height:92px; padding:8px; text-align:left; font:inherit; color:var(--dx-ink);
    background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:6px; cursor:pointer; }
.gx-prod:hover { border-color:var(--dx-accent); background:var(--gx-hover); }
.gx-prod:active { background:var(--dx-sel); }
.gx-prod-nome { font-weight:500; font-size:13.5px; line-height:1.3; color:var(--dx-ink); overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.gx-prod-pe { display:flex; justify-content:space-between; align-items:flex-end; gap:6px; margin-top:auto; }
.gx-prod-pe .gx-mono { font-weight:600; font-size:13.5px; color:var(--dx-ink); }
.gx-prod-est { font-size:11.5px; color:var(--gx-label); }

/* --- Grade de caixas de marcar (permissões do cargo, empresas do grupo) ---
   <div class="gx-checks is-grade"> label.gx-check(.is-off) > input + span(texto + small) */
.gx-checks.is-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:6px; padding:0; border:0; background:transparent; }
.gx-checks.is-grade > .gx-check { align-items:flex-start; padding:8px 10px; border:1px solid var(--dx-line); border-radius:6px; background:var(--dx-surface); }
.gx-checks.is-grade > .gx-check:hover { border-color:var(--dx-accent); background:var(--dx-sel); }
.gx-checks.is-grade > .gx-check input { margin-top:2px; flex:none; }
.gx-checks.is-grade small { display:block; font-family:var(--gx-mono); font-size:11.5px; color:var(--dx-faint); }
.gx-checks.is-grade > .gx-check.is-off { cursor:not-allowed; background:var(--dx-ground); color:var(--dx-muted); }
.gx-checks.is-grade > .gx-check.is-off:hover { border-color:var(--dx-line); }

/* --- Linhas de itens com campos lado a lado (itens da nota, ficha técnica, pagamentos) ---
   <div class="gx-linhas is-caixa"> .gx-lin > .gx-field ×n + button.gx-ico </div>
   O primeiro campo é o largo (produto); .is-iguais divide por igual. */
.gx-linhas { display:flex; flex-direction:column; gap:8px; }
.gx-linhas.is-caixa { padding:10px 12px; border:1px solid var(--dx-line); border-radius:6px; background:var(--dx-ground); }
.gx-linhas:empty { display:none; }
.gx-linhas > .gx-lin + .gx-lin { padding-top:8px; border-top:1px dashed var(--gx-line-strong); }
.gx-lin { display:flex; align-items:flex-end; gap:10px; }
.gx-lin > .gx-field { flex:1 1 0; min-width:0; grid-column:auto; }
.gx-lin > .gx-field:first-child { flex-grow:2.5; }
.gx-lin.is-iguais > .gx-field:first-child { flex-grow:1; }
.gx-lin > :not(.gx-field) { flex:none; }
.gx-lin > .gx-ico { margin-bottom:4px; }
.gx-lin > .gx-btn { height:36px; }

/* --- Busca com sugestões (gxAutocomplete no app.js) ---
   <div class="gx-field gx-auto"> label + input (+ ul.gx-auto-lista, criada pelo JS se faltar) */
.gx-auto { position:relative; }
.gx-auto-lista { list-style:none; margin:0; padding:4px; position:absolute; top:calc(100% + 2px); left:0; right:0; z-index:30; max-height:260px; overflow-y:auto;
    background:var(--dx-surface); border:1px solid var(--gx-line-strong); border-radius:6px; box-shadow:0 12px 32px rgba(24,26,34,.14); }
.gx-auto-lista > li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border-radius:5px; cursor:pointer; font-size:14px; color:var(--dx-ink); }
.gx-auto-lista > li:hover, .gx-auto-lista > li.is-on { background:var(--dx-sel); color:var(--dx-accent); }
.gx-auto-lista > li > span { font-weight:500; min-width:0; overflow-wrap:anywhere; }
.gx-auto-lista small { font-family:var(--gx-mono); font-size:12px; color:var(--dx-muted); white-space:nowrap; }
.gx-auto-lista > li.gx-auto-msg { cursor:default; color:var(--dx-muted); background:transparent; }

/* --- Lista de caixas que abre num botão (empresas do produto novo) ---
   JS: data-gx-multi (app.js) — teclado e leitor de tela; o texto do botão
   acompanha as marcadas. */
.gx-multi { position:relative; }
.gx-multi-btn { width:100%; height:36px; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:0 10px; text-align:left; font-size:14px;
    border:1px solid var(--gx-ctrl); border-radius:5px; background:var(--gx-campo); color:var(--dx-ink); cursor:pointer; }
.gx-multi-btn > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gx-multi-btn > i { font-size:11px; color:var(--dx-muted); }
.gx-multi-btn:hover { border-color:var(--gx-line-strong); }
body.dx .gx-multi-btn[aria-expanded="true"], body.dx .gx-multi-btn:focus-visible { outline:none; border-color:var(--dx-accent); box-shadow:0 0 0 3px var(--dx-soft); }
.gx-multi-lista { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:30; max-height:260px; overflow-y:auto; display:flex; flex-direction:column; padding:4px;
    background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:6px; box-shadow:0 12px 32px rgba(24,26,34,.14); }
.gx-multi-lista > .gx-check { padding:7px 8px; border-radius:5px; }
.gx-multi-lista > .gx-check:hover, .gx-multi-lista > .gx-check:focus-within { background:var(--gx-hover); }
.gx-multi-lista > .gx-check.is-todas { font-weight:600; border-bottom:1px solid var(--dx-line-soft); border-radius:5px 5px 0 0; }

/* --- Painel lateral que acompanha a rolagem (carrinho do PDV, lista de comandas) ---
   section.gx-panel.gx-lateral > .gx-panel-head + .gx-lateral-rola + .gx-panel-foot */
.gx-lateral { position:sticky; top:calc(var(--dx-head-h) + 12px); display:flex; flex-direction:column; max-height:calc(100vh - var(--dx-head-h) - 24px); min-width:0; }
.gx-lateral > .gx-panel-head, .gx-lateral > .gx-panel-foot { flex:none; }
.gx-lateral-rola { flex:1 1 auto; min-height:80px; overflow-y:auto; }

/* --- Form dentro das ações da linha (inativar, excluir por POST) ---
   <form method="post" class="gx-inline" data-gx-confirma="..."> — no lugar do style="display:inline". */
.gx-inline { display:inline; margin:0; }

/* --- Linha de detalhe que abre embaixo da linha (data-gx-toggle) ---
   <tr id="det_5" class="gx-row-det" hidden><td colspan="7">…</td></tr> */
.gx-row-det > td { background:var(--gx-hover); padding:10px 16px; box-shadow:inset 3px 0 0 var(--dx-accent); }

/* --- Variantes --- */
.gx-vazio.is-compacto { padding:20px 12px; font-size:13.5px; }
.gx-vazio.is-compacto b { font-size:14.5px; }
.gx-search.is-full { width:100%; }
/* Setinha pequena ao lado de um link de linha ("abre o detalhe"). */
.gx-seta { font-size:11px; }
/* Link de texto na cor de destaque (ex.: "Esqueci a senha"). */
a.gx-link { color:var(--dx-accent); }
a.gx-link:hover { text-decoration:underline; text-underline-offset:2px; }
/* Campo alinhado ao pé da linha da grade (caixa de marcar ou botão ao lado de campos com rótulo). */
.gx-field.is-fim { justify-content:flex-end; min-height:36px; }
.gx-field.is-fim > .gx-check { min-height:36px; }
.gx-field.is-fim > .gx-btn { height:36px; }

/* --- Paleta curta (marca de cor de comandas etc.): classe .gx-pal-N (N = id % 6) define --gx-pal --- */
.gx-pal-0 { --gx-pal:var(--gx-pal-0); } .gx-pal-1 { --gx-pal:var(--gx-pal-1); } .gx-pal-2 { --gx-pal:var(--gx-pal-2); }
.gx-pal-3 { --gx-pal:var(--gx-pal-3); } .gx-pal-4 { --gx-pal:var(--gx-pal-4); } .gx-pal-5 { --gx-pal:var(--gx-pal-5); }

@media (max-width:767px) {
    .gx-prods { grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); }
    .gx-prod { min-height:84px; }
    .gx-checks.is-grade { grid-template-columns:minmax(0, 1fr); }
    .gx-lin { flex-wrap:wrap; }
    .gx-lin > .gx-field:first-child { flex-basis:100%; }
    .gx-lateral { position:static; max-height:none; }
    .gx-resp tr.gx-row-det:not([hidden]), .gx-resp tr.gx-row-det:not([hidden]) > td { display:block; }
}

/* =============================================================================
   PARTE 4 — moldura das telas de entrada (login, senhas)
   HTML em includes/entrada.php (entrada_abrir / entrada_fechar). À esquerda a
   faixa marinho com grade discreta de planilha; à direita o formulário, sem
   cartão. Igual à do fix360.
   ============================================================================= */
body.dx.dx-entrada { background:var(--dx-surface); }
.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(0,0,0,.22); }
.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:#9AA1AE; border-right:1px solid var(--dx-head-line); background:rgba(0,0,0,.22); }
.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:#9AA1AE; padding-right:16px; white-space:nowrap; }
.gxe-lado-pe { display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:#9AA1AE; 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 5 — TEMA ESCURO (28/09/2026, mesmo esquema do fix360)
   -----------------------------------------------------------------------------
   Preferência de quem olha a tela (menu do usuário → Tema escuro/claro),
   guardada no cookie vendas_tema. O padrão é o claro. Só vale quando o <html>
   tem data-tema="escuro" — sem o atributo nada aqui roda.

   Os tokens claros moram em body.dx; por isso os escuros são declarados no
   mesmo elemento (:root[...] body.dx), senão o body reescreveria tudo de volta.
   As peças gx-* já usam var(--dx-*); abaixo só vão as que tinham cor fixa.
   Estilo de tela (<style> com prefixo) deve usar as variáveis para acompanhar.
   As telas de entrada (login, senhas) ficam sempre claras.
   ============================================================================= */
:root[data-tema="escuro"] { color-scheme: dark; }
:root[data-tema="escuro"] body.dx {
    --dx-head:#15181F; --dx-head-ink:#B7BDC8; --dx-head-line:#2B303B; --dx-head-hover:#22262F;
    --dx-accent:#F58A3A; --dx-accent-hover:#F9A263; --dx-soft:#33241A; --dx-sel:#2A1F17;
    --dx-ground:#111318; --dx-surface:#1A1D24; --dx-ink:#ECE9E6; --dx-muted:#A5ABB5; --dx-faint:#7C838D;
    --dx-line:#2C3039; --dx-line-soft:#242830;
    --gx-ctrl:#3C414C; --gx-line-strong:#3E434E; --gx-row-line:#262A32; --gx-group:#21252D;
    --gx-label:#A5ABB5; --gx-hover:#22262E;
    --gx-ok:#3FBF75; --gx-warn:#E0A83C; --gx-danger:#F1746A; --gx-info:#6EA0F0; --gx-off:#7D8A96;
    --gx-k1:#4ADE80; --gx-k1-bg:#15291D; --gx-k2:#7AA7F5; --gx-k2-bg:#18233A; --gx-k3:#B49BF5; --gx-k3-bg:#241D3A;
    --gx-k4:#F7A15E; --gx-k4-bg:#33241A; --gx-k5:#F28AB8; --gx-k5-bg:#351B28;
    /* Tokens da etapa 2 (antes eram regras uma a uma para avisos, selos, rodapés...). */
    --gx-ok-bg:#122A1E; --gx-ok-ink:#7FD3A0; --gx-warn-bg:#2C2413; --gx-warn-ink:#E8C57A;
    --gx-danger-bg:#2E1715; --gx-danger-ink:#F4A69E; --gx-danger-line:#5A2A26; --gx-info-ink:#A9C6F2;
    --gx-neutro-bg:#25313D; --gx-neutro-ink:#C2CDD8; --gx-atencao-ink:#E8C57A;
    --gx-ink-2:#C2CDD8; --gx-btn-ink:#E4E9EF; --gx-mono-ink:#B9C5D1; --gx-foot:#16191F; --gx-campo:#14171D;
    --gx-pal-0:#6EA0F0; --gx-pal-1:#3FBF75; --gx-pal-2:#E0A83C; --gx-pal-3:#A987E0; --gx-pal-4:#4FB7C4; --gx-pal-5:#E07A9C;
}

/* --- Menus: links com a cor do texto (o :where da base os deixava herdar) --- */
:root[data-tema="escuro"] body.dx .dx-menu :is(a, button), :root[data-tema="escuro"] body.dx .dx-nav-drop a { color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .gx-total .gx-mono { color:#F0EDEA; }
:root[data-tema="escuro"] body.dx .gx-total td { background:#2A2F3A; color:#F0EDEA; }
:root[data-tema="escuro"] body.dx .gx-ico:hover { background:var(--gx-hover); }

/* --- Campos --- */
:root[data-tema="escuro"] body.dx :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
    background-color:#14171D !important; border-color:var(--gx-ctrl); color:var(--dx-ink); }
/* Botão do campo de arquivo (foto da NF) vinha cinza-claro do navegador. */
:root[data-tema="escuro"] body.dx input[type="file"]::file-selector-button { background:#22262E; color:var(--dx-ink); border:1px solid var(--gx-ctrl); border-radius:5px; padding:4px 10px; margin-right:8px; }
/* Busca: o campo fica transparente dentro da moldura (os :not() igualam a força da regra acima). */
:root[data-tema="escuro"] body.dx .gx-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { background:transparent !important; }
:root[data-tema="escuro"] body.dx :is(input, textarea)::placeholder { color:#6E7B87; }
:root[data-tema="escuro"] body.dx .gx-field :is(input, select, textarea):is([readonly], :disabled) { background-color:#181B21 !important; color:var(--dx-faint) !important; }

/* --- Botões --- */
:root[data-tema="escuro"] body.dx .gx-btn { background:#22262E; border-color:var(--gx-ctrl); color:var(--dx-ink); }
:root[data-tema="escuro"] body.dx .gx-btn:hover { background:#2A2F38; }
:root[data-tema="escuro"] body.dx .gx-btn-primary { background:var(--dx-accent); border-color:var(--dx-accent); color:#1A1206; }
:root[data-tema="escuro"] body.dx .gx-btn-primary:hover { background:var(--dx-accent-hover); }
:root[data-tema="escuro"] body.dx .gx-btn-perigo { color:var(--gx-danger); border-color:var(--gx-danger-line); }
:root[data-tema="escuro"] body.dx .gx-btn-perigo:hover { background:var(--gx-danger-bg); }
:root[data-tema="escuro"] body.dx .gx-btn-perigo-cheio { background:#C8453A; border-color:#C8453A; color:#fff; }
:root[data-tema="escuro"] body.dx :is(.gx-seg > .is-on, .gx-seg-op > input:checked + span, .gx-pag a.is-on) { background:var(--dx-accent); border-color:var(--dx-accent); color:#1A1206; }

/* --- Avisos, selos e etiquetas: vêm dos tokens --gx-*-bg/-ink acima. Só o selo de destaque muda o texto. --- */
:root[data-tema="escuro"] body.dx .gx-pill.is-accent { background:var(--dx-accent); color:#1A1206; }

/* --- Ilustração do produto: mesma cor de categoria, fundo escurecido --- */
:root[data-tema="escuro"] body.dx .gx-pim { background:color-mix(in srgb, var(--pim-ink) 22%, #1A1D24); color:color-mix(in srgb, var(--pim-ink) 55%, #ffffff); }

/* --- Sombras: no escuro quem separa é a linha --- */
:root[data-tema="escuro"] body.dx :is(.dx-menu, .dx-nav-drop, .gx-modal) { box-shadow:0 12px 32px rgba(0,0,0,.5); border-color:var(--dx-line); }
:root[data-tema="escuro"] body.dx .gx-overlay { background:rgba(0,0,0,.6); }
:root[data-tema="escuro"] body.dx img { opacity:.94; }

/* =============================================================================
   PARTE 7 — relatórios e impressão (28/09/2026)
   -----------------------------------------------------------------------------
   Peças dos relatórios (relatorios.php, relatorio_*.php — <main class="rel-tela">)
   e o jeito de imprimir. HTML das peças em includes/relatorio.php.
   Antes cada relatório copiava o seu @media print; agora fica tudo aqui.
   ============================================================================= */

/* --- Textos das tabelas de relatório --- */
.rel-tela .gx-row > td { vertical-align:top; }
.rel-itens { font-size:13px; color:var(--dx-muted); line-height:1.35; }
.rel-origem { font-family:var(--gx-mono); font-size:11.5px; color:var(--dx-accent); white-space:nowrap; }   /* "Comanda #N" */
.rel-parte { font-size:11.5px; color:var(--dx-faint); }                                                   /* "de R$ X" (venda inteira) */
.rel-nota { display:flex; gap:6px; align-items:baseline; color:var(--gx-label); }
.rel-nota i { color:var(--dx-accent); }
.rel-sub-formas { color:var(--gx-label); }
.rel-tela .gx-total .rel-sub-formas { color:inherit; opacity:.85; }
.rel-tela .gx-total .gx-mono { color:inherit; }
/* Filtros dos relatórios têm 2 campos: não esticar em 4 colunas vazias. */
.rel-filtros { grid-template-columns:repeat(2, minmax(0, 260px)) 1fr; }
.rel-filtros .gx-filtros-acoes { justify-content:flex-end; }
@media (max-width:767px) { .rel-filtros { grid-template-columns:1fr 1fr; } }

/* --- Cabeçalho de impressão (relatorio_cabecalho_impressao): só no papel --- */
.rel-impressao { display:none; }

@media print {
    /* Relatório sai deitado (tabelas largas); as outras telas seguem o padrão do navegador. */
    @page relatorio { size:landscape; margin:1cm; }
    main.rel-tela { page:relatorio; }

    /* No papel quem diz o que é a folha é o cabeçalho de impressão: a barra
       da tela (título, filtros, botões) some junto com o topo e o menu. */
    .rel-tela > .gx-bar { display:none !important; }
    .rel-impressao { display:block; margin:0 0 6px; padding:0 0 8px; border-bottom:2px solid #1D2426; color:#1D2426; font-size:12px; line-height:1.45; }
    .rel-impressao-topo { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
    .rel-impressao-topo strong { font-size:17px; font-weight:600; }
    .rel-impressao-topo span { font-size:11px; color:#5E6A6E; }
    .rel-impressao-filtros b { font-weight:600; }
    .rel-impressao-sep { color:#8A9599; }
    .rel-impressao-emissao { font-size:11px; color:#5E6A6E; }

    .rel-tela .gx-kpis { break-inside:avoid; }
    .rel-tela .gx-group { break-after:avoid; }
    .rel-tela .gx-panel-head { break-after:avoid; }

    /* Tema escuro não vai para o papel: volta às cores claras na impressão
       (senão sai texto claro em folha branca e fundos escuros gastando tinta). */
    :root[data-tema="escuro"] body.dx {
        --dx-head:#1F2430; --dx-accent:#DD6310; --dx-soft:#FFEEDF;
        --dx-ground:#FFFFFF; --dx-surface:#FFFFFF; --dx-ink:#1D2426; --dx-muted:#5E6A6E; --dx-faint:#8A9599;
        --dx-line:#E6E1DB; --dx-line-soft:#EFEBE6;
        --gx-ctrl:#D6D0C9; --gx-line-strong:#CEC7BF; --gx-row-line:#EDE8E2; --gx-group:#F4EFE9;
        --gx-label:#56626C; --gx-hover:#FFFFFF;
        --gx-ok:#1F8A4C; --gx-warn:#C98A12; --gx-danger:#B42318; --gx-info:#1E5BB8; --gx-off:#98A2AB;
        --gx-k1:#16A34A; --gx-k1-bg:#DCFCE7; --gx-k2:#2563EB; --gx-k2-bg:#DBEAFE; --gx-k3:#7C3AED; --gx-k3-bg:#EDE9FE;
        --gx-k4:#EA580C; --gx-k4-bg:#FFEDD5; --gx-k5:#DB2777; --gx-k5-bg:#FCE7F3;
        /* Tokens da etapa 2 (avisos, selos, rodapés, campos) também voltam ao claro. */
        --gx-ok-bg:#E3F3E9; --gx-ok-ink:#17603A; --gx-warn-bg:#FFF1D6; --gx-warn-ink:#7A4A00;
        --gx-danger-bg:#FBE6E1; --gx-danger-ink:#9A2E1B; --gx-danger-line:#F0C9C3; --gx-info-ink:#1B4A8F;
        --gx-neutro-bg:#E9EDEE; --gx-neutro-ink:#4E5A5E; --gx-atencao-ink:#9A6200;
        --gx-ink-2:#34404A; --gx-btn-ink:#2A3640; --gx-mono-ink:#44505A; --gx-foot:#FAFBFC; --gx-campo:#FFFFFF;
        color-scheme:light;
    }
    :root[data-tema="escuro"] body.dx .gx-mono { color:#44505A; }
    :root[data-tema="escuro"] body.dx .gx-table thead th { background:#fff; }
    :root[data-tema="escuro"] body.dx .gx-sub td { background:#FAFBFC; }
    :root[data-tema="escuro"] body.dx .gx-total td, :root[data-tema="escuro"] body.dx .gx-total .gx-mono { background:#1F2430; color:#fff; }
    :root[data-tema="escuro"] body.dx .gx-total .gx-mono { background:transparent; }
}

/* =============================================================================
   PARTE 9 — etapa 3B (28/09/2026): foto do produto e "Minha conta"
   ============================================================================= */

/* --- Campo de foto com prévia (cadastro de produto) ---
   .gx-foto > .gx-foto-previa(.gx-pim.gx-pim-foto) + .gx-foto-lado(input[type=file] + .gx-ajuda + botão)
   A prévia usa a própria peça .gx-pim: sem foto mostra a ilustração automática. */
.gx-foto { display:flex; align-items:flex-start; gap:14px; }
.gx-foto-lado { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; flex:1; }
.gx-pim-foto { width:112px; height:112px; font-size:40px; border-radius:8px; border:1px solid var(--dx-line); }
body.dx .gx-field input[type="file"] { max-width:100%; font-size:13.5px; color:var(--gx-ink-2); }
body.dx .gx-field input[type="file"]::file-selector-button {
    height:34px; margin-right:10px; padding:0 12px; border:1px solid var(--gx-ctrl); border-radius:5px;
    background:var(--dx-surface); color:var(--gx-btn-ink); font:inherit; font-weight:500; cursor:pointer;
}
body.dx .gx-field input[type="file"]::file-selector-button:hover { background:var(--dx-ground); }
body.dx .gx-field input[type="file"]:focus-visible { outline:2px solid var(--dx-accent); outline-offset:2px; border-radius:5px; }
@media (max-width:767px) {
    /* Celular: prévia menor ao lado; o botão de escolher ocupa a largura (dedo). */
    .gx-pim-foto { width:84px; height:84px; font-size:30px; }
    body.dx .gx-field input[type="file"] { width:100%; }
    body.dx .gx-field input[type="file"]::file-selector-button { height:40px; }
}

/* --- Minha conta: lista de empresas dentro da ficha (dl.gx-kv) --- */
.gx-lista-tags { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }

/* =============================================================================
   PARTE 8 — etapa 3A (28/09/2026): paginação, busca de produto, históricos de estoque
   -----------------------------------------------------------------------------
   Complementos das peças que já existiam (.gx-pag da Parte 2, .gx-auto da
   Parte 6) para os históricos paginados (includes/paginacao.php) e a busca de
   produto (produtos_busca.php) no acerto, entrada, transferência e grupos.
   ============================================================================= */

/* Âncora #hist (links da paginação): a lista não para escondida debaixo do topo fixo. */
.gx-card[id] { scroll-margin-top:calc(var(--dx-head-h) + 12px); }

/* --- Paginação ---
   A seta desativada era #C4CBCD fixo: no tema escuro ficava clara e parecia ativa. */
body.dx .gx-pag .gx-off { color:var(--dx-faint); opacity:.45; }
body.dx .gx-pag select { background:var(--gx-campo); color:var(--dx-ink); }
.gx-pag a:not(.is-on):hover { background:var(--gx-hover); }
.gx-pag a:focus-visible { outline:2px solid var(--dx-accent); outline-offset:1px; }
.gx-pag-gap { color:var(--dx-faint); padding:0 2px; }
.gx-pag-total { font-variant-numeric:tabular-nums; }

@media (max-width:767px) {
    /* Celular: total em cima, botões grandes (dedo) centralizados embaixo; só a
       página atual e as vizinhas (+ primeira e última) — cabe em 375px. */
    .gx-pag { flex-direction:column; align-items:stretch; gap:8px; padding:10px 8px; }
    .gx-pag-total { text-align:center; }
    .gx-pag-nav { justify-content:center; gap:4px; }
    .gx-pag a, .gx-pag .gx-off { min-width:40px; height:44px; font-size:15px; }
    .gx-pag .gx-pag-longe { display:none; }

    /* Busca com sugestões: lista que cabe na tela com o teclado aberto e itens da altura do dedo. */
    .gx-auto-lista { max-height:min(260px, 42vh); }
    .gx-auto-lista > li { min-height:44px; padding:8px 10px; flex-wrap:wrap; row-gap:0; }
    .gx-auto-lista > li > span { flex:1 1 60%; }
}
.gx-kv dd .gx-meta { margin-left:0; }
.gx-kv dd small { display:block; margin-top:4px; font-size:12.5px; color:var(--dx-muted); }

/* =============================================================================
   PARTE 10 — modelo 2 "Laranja Genialogic" (escolhido em 28/09/2026)
   -----------------------------------------------------------------------------
   O usuário achou o visual "sério demais": mesma estrutura do fix360, com cor.
   As cores moram nos tokens (Partes 1, 2 e 5); aqui ficam os detalhes do modelo:
   cantos mais redondos, marca laranja, ícones do menu na cor da marca,
   indicadores em cartões com ícone colorido e traço laranja nos títulos.
   ============================================================================= */
.gx-bar, .gx-card, .gx-panel { border-radius:12px; }
.gx-card > .gx-table:last-child .gx-total td:first-child { border-bottom-left-radius:11px; }
.gx-card > .gx-table:last-child .gx-total td:last-child { border-bottom-right-radius:11px; }
.gx-modal { border-radius:12px; }
.gx-btn { border-radius:7px; }

/* Marca: quadradinho laranja com a letra branca (cabeçalho e telas de entrada). */
.dx-logo, .gxe-logo { background:var(--dx-accent); color:#fff; }
/* Ícones da faixa do menu na cor da marca. */
.dx-nav-item > i:first-child { color:var(--dx-accent); }
/* Barras (mais vendidos etc.): degradê âmbar → laranja. */
.gx-barra i { background:linear-gradient(90deg, #F5A524, var(--dx-accent)); }
/* Título de painel com um traço laranja na frente. */
.gx-panel-head > :is(h2, h3):first-child { display:flex; align-items:center; gap:9px; }
.gx-panel-head > :is(h2, h3):first-child::before { content:""; width:4px; height:16px; border-radius:2px; background:var(--dx-accent); flex:none; }
.gx-modal .gx-panel-head > :is(h2, h3):first-child::before { display:none; }

/* --- Indicadores: cada número no seu cartão; com <i> ganha o ícone colorido ---
   <div class="gx-kpis"><div class="gx-kpi"><i class="fa-solid fa-sack-dollar"></i><b>R$ 1,00</b><span>Rótulo</span></div>…
   A cor do ícone vai em rodízio (verde, azul, roxo, laranja, rosa); .is-danger fica vermelho. */
.gx-kpis { background:transparent; border:0; border-radius:0; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.gx-kpi { background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:12px; padding:12px 16px; }
.gx-kpi:last-child { border-right:1px solid var(--dx-line); }
a.gx-kpi:hover { background:var(--dx-surface); border-color:var(--dx-accent); }
.gx-kpi:has(> i) { display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center; }
.gx-kpi > i { grid-row:span 2; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:17px;
    --k:var(--gx-k1); --k-bg:var(--gx-k1-bg); background:var(--k-bg); color:var(--k); }
.gx-kpi:nth-child(5n+2) > i { --k:var(--gx-k2); --k-bg:var(--gx-k2-bg); }
.gx-kpi:nth-child(5n+3) > i { --k:var(--gx-k3); --k-bg:var(--gx-k3-bg); }
.gx-kpi:nth-child(5n+4) > i { --k:var(--gx-k4); --k-bg:var(--gx-k4-bg); }
.gx-kpi:nth-child(5n+5) > i { --k:var(--gx-k5); --k-bg:var(--gx-k5-bg); }
.gx-kpi.is-danger > i { --k:var(--gx-danger); --k-bg:var(--gx-danger-bg); }
.gx-kpi.is-warn > i { --k:var(--gx-warn); --k-bg:var(--gx-warn-bg); }
.gx-kpi > b, .gx-kpi > span { min-width:0; overflow-wrap:anywhere; }
@media (max-width:767px) {
    .gx-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .gx-kpi { border-bottom:1px solid var(--dx-line); padding:10px 12px; }
    .gx-kpi > i { width:34px; height:34px; font-size:15px; border-radius:10px; }
    .gx-kpi b { font-size:18px; }
}

/* Avatar com as iniciais (lista de vendedores do Painel), mesmas cores dos ícones. */
.gx-ini { width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; flex:none; margin-right:8px; vertical-align:middle;
    font-size:11px; font-weight:700; font-family:"IBM Plex Sans", system-ui, sans-serif; background:var(--gx-k1-bg); color:var(--gx-k1); }
.gx-ini.k2 { background:var(--gx-k2-bg); color:var(--gx-k2); } .gx-ini.k3 { background:var(--gx-k3-bg); color:var(--gx-k3); }
.gx-ini.k4 { background:var(--gx-k4-bg); color:var(--gx-k4); } .gx-ini.k5 { background:var(--gx-k5-bg); color:var(--gx-k5); }

@media print {
    .gx-kpi { border-color:#bbb; }
    .gx-kpi > i, .gx-ini { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* =============================================================================
   PARTE 11 — Assistente "Sacolinha" (29/09/2026)
   -----------------------------------------------------------------------------
   Botão com a cabeça no cabeçalho; painel encostado à direita (no celular, folha
   que sobe de baixo) com o corpo inteiro e as expressões. Desenho em
   includes/avatar_assistente.php; cérebro em includes/assistente.php.
   ============================================================================= */
body.dx {
    --sac-bolsa:var(--dx-accent); --sac-dobra:color-mix(in srgb, var(--dx-accent) 78%, #000);
    --sac-traco:#1F2430; --sac-olho:#FFFFFF; --sac-pupila:#1F2430; --sac-mao:#F5A524; --sac-claro:#FFF4E8;
}
:root[data-tema="escuro"] body.dx { --sac-traco:#D9D4CE; }
.dx-head .sac { --sac-traco:#E8E3DD; }

/* --- O desenho: todas as expressões estão lá, data-exp escolhe qual aparece --- */
.sac { display:block; overflow:visible; }
.sac-cabeca { overflow:hidden; }
.sac .sac-sombra { fill:#000; opacity:.08; }
.sac .sac-traco { stroke:var(--sac-traco); fill:none; stroke-linecap:round; }
.sac .sac-pe { fill:var(--sac-traco); }
.sac .sac-mao { fill:var(--sac-mao); }
.sac .sac-bolsa { fill:var(--sac-bolsa); }
.sac .sac-dobra { fill:var(--sac-dobra); }
.sac .sac-ilhos { fill:var(--sac-claro); }
.sac .sac-marca { fill:var(--sac-claro); font:700 16px "IBM Plex Sans", system-ui, sans-serif; opacity:.9; }
.sac .sac-olho { fill:var(--sac-olho); }
.sac .sac-pupila, .sac .sac-boca-cheia { fill:var(--sac-pupila); }
.sac .sac-boca { stroke:var(--sac-pupila); fill:none; stroke-linecap:round; }
.sac .sac-lingua { fill:#F59E8B; }
.sac .sac-bochecha { fill:var(--sac-mao); opacity:.8; }
.sac .sac-pontos { fill:var(--sac-traco); }
.sac .sac-duvida { fill:var(--sac-traco); font:700 34px "IBM Plex Sans", system-ui, sans-serif; }

.sac [class^="sx-"], .sac [class*=" sx-"] { display:none; }
.sac .sx-bracos, .sac .sx-ilhos { display:inline; }
.sac[data-exp="normal"] .sx-normal, .sac[data-exp="pensando"] .sx-pensando, .sac[data-exp="surpreso"] .sx-surpreso,
.sac[data-exp="feliz"] .sx-feliz, .sac[data-exp="acenando"] .sx-feliz { display:inline; }
.sac[data-exp="acenando"] .sx-bracos, .sac[data-exp="pensando"] .sx-bracos { display:none; }
.sac[data-exp="acenando"] .sx-braco-esq, .sac[data-exp="acenando"] .sx-braco-acena,
.sac[data-exp="pensando"] .sx-braco-esq, .sac[data-exp="pensando"] .sx-braco-queixo { display:inline; }
/* Na cabeça (botão do cabeçalho) os braços não aparecem. */
.sac-cabeca [class*="sx-bra"] { display:none !important; }

/* Vida: pisca, acena, os pontinhos do "pensando" piscam, pula de alegria. */
.sac .sac-pisca { transform-box:fill-box; transform-origin:center; animation:sac-piscar 4.5s infinite; }
.sac[data-exp="acenando"] .sx-braco-acena { transform-box:view-box; transform-origin:152px 150px; animation:sac-acena .9s ease-in-out infinite; }
.sac[data-exp="pensando"] .sac-pontos circle { animation:sac-ponto 1.2s infinite; }
.sac[data-exp="pensando"] .sac-pontos circle:nth-child(2) { animation-delay:.2s; }
.sac[data-exp="pensando"] .sac-pontos circle:nth-child(3) { animation-delay:.4s; }
.sac-corpo[data-exp="feliz"] { animation:sac-pula .6s ease-out 1; }
.sac-corpo[data-exp="surpreso"] { animation:sac-treme .4s ease-in-out 1; }
@keyframes sac-piscar { 0%, 93%, 100% { transform:scaleY(1); } 96% { transform:scaleY(.1); } }
@keyframes sac-acena { 0%, 100% { transform:rotate(0deg); } 50% { transform:rotate(-16deg); } }
@keyframes sac-ponto { 0%, 100% { opacity:.25; } 50% { opacity:1; } }
@keyframes sac-pula { 0% { transform:translateY(0); } 40% { transform:translateY(-10px); } 100% { transform:translateY(0); } }
@keyframes sac-treme { 0%, 100% { transform:rotate(0); } 25% { transform:rotate(-3deg); } 75% { transform:rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .sac, .sac * { animation:none !important; } }

/* --- Botão do cabeçalho --- */
.asst-botao { position:relative; width:40px; height:40px; padding:2px; background:var(--dx-head-hover); }
.asst-botao .sac { width:34px; height:34px; }
.asst-botao:hover .sac { transform:rotate(-6deg); transition:transform .15s; }
.asst-botao[aria-expanded="true"] { border-color:var(--dx-accent); }
.asst-online { position:absolute; right:3px; top:3px; width:9px; height:9px; border-radius:50%; background:#4ADE80; border:2px solid var(--dx-head); }

/* --- Painel --- */
.asst { position:fixed; top:var(--dx-head-real-h); right:0; bottom:0; width:min(420px, 100vw); z-index:70; display:flex; flex-direction:column;
    background:var(--dx-surface); border-left:1px solid var(--dx-line); box-shadow:-12px 0 32px rgba(24,26,34,.14); }
.asst[hidden] { display:none; }
.asst-fundo { display:none; }
.asst-topo { position:relative; display:flex; align-items:flex-end; gap:4px; padding:12px 14px 0; min-height:178px; flex:none;
    background:linear-gradient(180deg, var(--dx-soft), var(--dx-surface)); border-bottom:1px solid var(--dx-line-soft); }
.asst-topo .sac-corpo { width:112px; height:168px; flex:none; margin-bottom:-4px; }
.asst-balao { position:relative; align-self:center; margin-bottom:24px; background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:14px 14px 14px 4px;
    padding:10px 12px; font-size:14px; line-height:1.4; box-shadow:0 6px 16px rgba(24,26,34,.06); }
.asst-balao b { color:var(--dx-accent); }
.asst-acoes { position:absolute; right:8px; top:8px; display:flex; gap:2px; }
.asst-conversa { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; font-size:14px; overscroll-behavior:contain; }
.asst-eu { align-self:flex-end; max-width:85%; background:var(--dx-accent); color:#fff; border-radius:14px 14px 4px 14px; padding:8px 12px; overflow-wrap:anywhere; }
.asst-ele { align-self:flex-start; max-width:100%; width:100%; background:var(--gx-group); border-radius:14px 14px 14px 4px; padding:10px 12px; overflow-wrap:anywhere; }
.asst-ele p { margin:0 0 6px; }
.asst-ele p:last-child { margin-bottom:0; }
.asst-ele b { font-weight:600; }
.asst-lista { margin:8px 0 4px; }
.asst-lista-t { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--gx-label); margin:0 0 4px; }
.asst-lista ul { list-style:none; margin:0; padding:0; background:var(--dx-surface); border:1px solid var(--dx-line); border-radius:10px; overflow:hidden; }
.asst-lista li { border-top:1px solid var(--dx-line-soft); }
.asst-lista li:first-child { border-top:0; }
.asst-lista li > a, .asst-lista li > div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:7px 10px; min-height:40px; color:inherit; }
.asst-lista li > a:hover { background:var(--gx-hover); }
.asst-lista li > * > span { min-width:0; }
.asst-item-t { display:block; font-weight:500; }
.asst-lista small { display:block; color:var(--dx-muted); font-size:12.5px; line-height:1.35; }
.asst-lista em { font-style:normal; font-family:var(--gx-mono); font-size:13px; white-space:nowrap; color:var(--gx-mono-ink); }
.asst-lista-pe { display:block; margin-top:4px; color:var(--dx-muted); }
.asst-ir { display:inline-flex; align-items:center; gap:6px; margin-top:6px; color:var(--dx-accent); font-weight:600; }
.asst-ir:hover { text-decoration:underline; }
.asst-digitando { display:inline-flex; gap:4px; padding:4px 0; }
.asst-digitando i { width:7px; height:7px; border-radius:50%; background:var(--dx-muted); animation:sac-ponto 1s infinite; }
.asst-digitando i:nth-child(2) { animation-delay:.15s; } .asst-digitando i:nth-child(3) { animation-delay:.3s; }
.asst-chips { display:flex; gap:6px; overflow-x:auto; padding:0 14px 10px; flex:none; scrollbar-width:none; }
.asst-chips button { flex:none; border:1px solid var(--dx-line); background:var(--dx-surface); color:var(--gx-ink-2); border-radius:999px; padding:5px 11px; font-size:13px; cursor:pointer; white-space:nowrap; }
.asst-chips button:hover { border-color:var(--dx-accent); color:var(--dx-accent); }
.asst-form { display:flex; gap:8px; padding:10px 14px 14px; border-top:1px solid var(--dx-line-soft); flex:none; }
body.dx .asst-form input { flex:1; min-width:0; height:44px; border:1px solid var(--gx-ctrl); border-radius:10px; padding:0 12px; font-size:15px; background:var(--gx-campo); color:var(--dx-ink); }
.asst-form button { width:44px; height:44px; flex:none; border:0; border-radius:10px; background:var(--dx-accent); color:#fff; cursor:pointer; font-size:16px; }
.asst-form button:hover { background:var(--dx-accent-hover); }

@media (max-width:767px) {
    .asst { top:auto; left:0; width:100%; height:min(88vh, 88dvh); border-left:0; border-radius:18px 18px 0 0; box-shadow:0 -12px 32px rgba(24,26,34,.22); }
    .asst-fundo { display:block; position:fixed; inset:0; z-index:69; background:rgba(24,26,34,.45); }
    .asst-fundo[hidden] { display:none; }
    .asst-topo { min-height:132px; border-radius:18px 18px 0 0; }
    .asst-topo .sac-corpo { width:84px; height:126px; }
    .asst-balao { font-size:13.5px; margin-bottom:16px; }
}
@media print { .asst, .asst-fundo, .asst-botao { display:none !important; } }

/* =============================================================================
   PARTE 12 — Localizar produto (30/09/2026)
   Busca que só consulta: estoque, preço de venda e custo, com Editar e Dar entrada.
   HTML: includes/localizar_produto.php · JS: gxLocalizar (app.js).
   ============================================================================= */
.gx-loc-busca { width:100%; height:44px; border-radius:10px; }
body.dx .gx-loc-busca input { font-size:15px; }
.gx-loc-status { margin:8px 0 0; font-size:13px; color:var(--dx-muted); }
.gx-loc-lista { list-style:none; margin:10px 0 0; padding:0; border:1px solid var(--dx-line); border-radius:10px; overflow:hidden; }
.gx-loc-lista[hidden] { display:none; }
.gx-loc-lista li { display:grid; grid-template-columns:minmax(0,1fr) 110px 110px 110px auto; align-items:center; gap:12px; padding:9px 12px; border-top:1px solid var(--dx-line-soft); }
.gx-loc-lista li:first-child { border-top:0; }
.gx-loc-lista li:hover { background:var(--gx-hover); }
.gx-loc-nome b { display:block; font-weight:600; }
.gx-loc-nome small { color:var(--dx-muted); font-size:12.5px; }
.gx-loc-num { text-align:right; }
.gx-loc-num small { display:block; font-size:11.5px; color:var(--gx-label); }
.gx-loc-num span { font-family:var(--gx-mono); font-size:14px; }
.gx-loc-num .is-zero { color:var(--gx-danger); font-weight:600; }
.gx-loc-num .is-baixo { color:var(--gx-atencao-ink); font-weight:600; }
.gx-loc-acoes { display:flex; gap:6px; justify-content:flex-end; }
.gx-loc-acoes .gx-btn { white-space:nowrap; }
@media (max-width:767px) {
    .gx-loc-lista li { grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px 10px; padding:10px 12px; }
    .gx-loc-nome, .gx-loc-acoes { grid-column:1 / -1; }
    .gx-loc-num { text-align:left; }
    .gx-loc-acoes { justify-content:stretch; }
    .gx-loc-acoes .gx-btn { flex:1; justify-content:center; min-height:40px; }
}