/* ==========================================================================
   Gestão — linguagem visual do KingPan aplicada ao vocabulário `g-`.

   Os nomes de classe são os mesmos de antes, de propósito: nenhuma página
   precisou mudar para ganhar a aparência nova. O que muda é a matéria-prima —
   tipografia, raios, sombras, tints e espaçamento.

   O ACENTO é o do KingPan (`--navy`/`--navy-700`), e não a cor da
   empresa: ela fica no caixa e no programa, onde o cliente vê.
   ========================================================================== */

:root {
  /* ---- Tipografia ---- */
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* ---- Superfícies e neutros ----
     Três níveis, como no KingPan: `--app` é a moldura, `--bg` é o fundo do
     conteúdo e `--surface` é o card. Com dois níveis só, o card branco sobre
     fundo branco sumia e a página perdia a profundidade. */
  --app: #EBEDF1;
  --bg: #FBFBFC;
  --surface: #FFFFFF;
  --surface-2: #F7F8FA;
  --dark: #13161D;            /* painel escuro (previsão, destaques) */
  --row: #FAFBFC;
  --ink: #11151C;
  --ink-2: #6B7484;
  --muted: #9AA3B2;
  --label: #AEB6C2;
  --line: #ECEEF2;
  --line-2: #EEF0F4;
  --line-3: #E6E9EF;
  --neutral-tint: #F1F3F6;
  --menu-tinta: #454545;
  --on-dark: #C9D1DE;
  --switch-off: #D5DAE2;      /* interruptor desligado: mais escuro que a linha, senão some no branco */
  color-scheme: light;

  /* ---- Acento ----
     Fixo, e não mais derivado da paleta da empresa: a gestão é uma
     ferramenta de escritório, e cor de marca ali muda o contraste dos
     estados sem melhorar o trabalho. A identidade visual do lojista vale
     onde o cliente vê — o caixa e o programa. */
  --navy: #3B5BDB;
  --navy-700: #3450C4;
  /* Três regras (`.g-callout--info`, o cabeçalho do login e a prévia do
     logotipo) usam os tons escuros do caixa: sem eles aqui, ficavam com
     `var()` sem valor, e a prévia escrevia cinza-claro sobre branco. */
  --deep: #2A3A5C;
  --top: #13161D;
  --red-600: #CF4636;
  --accent-tint: #EEF1FE;
  --accent-line: #D9E0FB;

  /* ---- Status, cada um com o seu tint ---- */
  --green: #1F9D6B;   --green-ink: #157C53;  --green-50: #E7F6EF;
  --teal: #0E9F8E;    --teal-50: #E4F6F2;
  --amber: #DE8A1E;   --amber-ink: #B57A12;  --amber-50: #FBF3E3;
  --red: #E1574A;     --red-ink: #C0392B;    --red-50: #FCEDEB;
  --blue: #2F86C5;    --blue-50: #EAF4FB;
  --violet: #7C5BE8;  --violet-50: #F1ECFB;
  --pink: #EC5B8A;    --pink-50: #FBEFF5;
  --indigo: #6E86FF;
  --focus: var(--navy);  --focus-50: #E4E9FD;

  /* ---- Raios ---- */
  --r-lg: 18px;  --r-md: 13px;  --r: 11px;  --r-sm: 9px;

  /* ---- Sombras ---- */
  --shadow-card: 0 1px 2px rgba(17, 21, 28, .03);
  --shadow-pop: 0 16px 32px -20px rgba(17, 21, 28, .40);
  --shadow-btn: 0 6px 16px -6px rgba(59, 91, 219, .55);
  --shadow-frame: 0 1px 2px rgba(17, 21, 28, .04), 0 30px 70px -38px rgba(17, 21, 28, .30);

  --side: 232px;
}


* { box-sizing: border-box; }

/* O atributo `hidden` precisa ganhar de qualquer classe. A regra do navegador
   (`[hidden]{display:none}`) tem a mesma especificidade de um seletor de
   atributo e perde para `.g-field{display:flex}` — campo escondido por JS
   continuava aparecendo, sem erro nenhum para denunciar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--app);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ---------- Estrutura ---------- */
.g-shell { display: flex; min-height: 100vh; }

/* A barra lateral é clara, como no modelo: a gestão é trabalho de
   escritório, lida de perto e por horas. O escuro fica no caixa, que se lê
   de longe. A cor da empresa aparece no item ativo e nos acentos. */
.g-side {
  width: var(--side); flex: none;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line-2);
  position: sticky; top: 0; height: 100vh;
  transition: width .18s ease;
  /* Acima da barra superior, que também é sticky: o botão de recolher fica
     montado na borda direita e seria cortado por ela. */
  z-index: 40;
}

/* ---------- Topo: a marca da LOJA ---------- */
.g-side__top { position: relative; display: flex; align-items: center; padding: 16px 16px 12px; }
.g-side__marca { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; color: var(--ink); }
.g-side__quad {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--navy), #5B73E8);
  color: #fff; font-family: var(--font-mono); font-weight: 700; font-size: 17px;
  box-shadow: 0 6px 16px -4px rgba(59, 91, 219, .5);
}
/* Com logotipo enviado o degradê sai de cena: ele competiria com a arte do
   cliente, e logo com fundo claro somia dentro do azul. */
.g-side__quad--img { background: var(--neutral-tint); box-shadow: none; }
.g-side__quad img { width: 100%; height: 100%; object-fit: contain; }
.g-side__nome { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.g-side__nome strong {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-side__nome span { font-size: 11px; color: var(--muted); }

/* O botão fica montado na borda, meio dentro meio fora: é a única peça que
   pertence às duas colunas, e dentro da barra ele sumiria no trilho estreito. */
.g-side__toggle {
  position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; flex: none; border-radius: 50%; z-index: 30;
  background: var(--surface); border: 1px solid var(--line-3); color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(17, 21, 28, .08); transition: .14s;
}
.g-side__toggle:hover { color: var(--navy); border-color: var(--accent-line); }
.g-side__toggle::before {
  content: ''; width: 6px; height: 6px;
  border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}

.g-side__foot {
  margin-top: auto; padding: 14px 18px; font-size: 11px; color: var(--label);
  border-top: 1px solid var(--line-2); white-space: nowrap; overflow: hidden;
}

/* ---------- Menu ---------- */
.g-menu { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px 16px; overflow-y: auto; overflow-x: hidden; }
/* Coluna flex encolhe os filhos quando a lista não cabe na altura da tela, e
   aí o divisor de 1px some e os itens ficam achatados. Quem tem de ceder é a
   rolagem, não o tamanho de cada linha. */
.g-menu > * { flex: none; }
.g-menu__sec {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--label); padding: 16px 10px 6px; white-space: nowrap;
}
.g-menu__risco { display: none; }
/* `--menu-tinta` é mais escura que `--ink-2` de propósito: o menu é lido de
   relance, em diagonal, e com o cinza do texto de apoio os itens somem no
   branco da barra. É o mesmo tom do KingPan (#454545). */
.g-menu a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--menu-tinta);
  transition: .15s; position: relative;
}
.g-menu a:hover { background: var(--row); color: var(--ink); }
.g-menu a.is-active { background: var(--accent-tint); color: var(--navy); font-weight: 700; }
/* O ícone não tem caixa atrás: o alinhamento vem do tamanho fixo dele, e um
   quadrado por item engordava a linha em 6 px sem dizer nada. */
.g-menu__ic { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.g-menu__lbl { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-menu .ic { width: 20px; height: 20px; flex: none; }

/* ---------- Trilho (menu recolhido) ----------
   O rótulo continua visível, só que pequeno e embaixo do ícone. Um trilho de
   ícones puros obriga a passar o mouse item por item para lembrar o que é
   cada desenho — e quem usa a gestão não usa todos os dias. */
:root[data-menu="trilho"] { --side: 96px; }
:root[data-menu="trilho"] .g-side__top { justify-content: center; padding: 16px 0 12px; }
:root[data-menu="trilho"] .g-side__marca { flex: none; justify-content: center; }
:root[data-menu="trilho"] .g-side__nome { display: none; }
:root[data-menu="trilho"] .g-side__toggle { right: -11px; }
:root[data-menu="trilho"] .g-side__toggle::before { transform: rotate(-135deg) translate(1px, -1px); }
:root[data-menu="trilho"] .g-menu { padding: 4px 0 16px; align-items: center; }
:root[data-menu="trilho"] .g-menu__sec { display: none; }
/* A seção vira um risco: o agrupamento continua legível sem o texto, que não
   caberia em 96 px sem quebrar em três linhas. */
:root[data-menu="trilho"] .g-menu__risco {
  display: block; width: 42px; height: 1px; background: var(--line-2); margin: 9px 0;
}
:root[data-menu="trilho"] .g-menu__risco:first-child { display: none; }
:root[data-menu="trilho"] .g-menu a {
  width: 66px; flex-direction: column; gap: 5px; padding: 9px 0;
  border-radius: 14px; text-align: center;
}
:root[data-menu="trilho"] .g-menu__lbl { font-size: 9.5px; line-height: 1.15; white-space: normal; }
/* Barrinha à esquerda: no trilho o fundo tingido sozinho some, porque o item
   é quase quadrado e a cor fica pouco visível de relance. */
:root[data-menu="trilho"] .g-menu a.is-active::before {
  content: ''; position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 3px; background: var(--navy);
}
:root[data-menu="trilho"] .g-side__foot { padding: 14px 8px; text-align: center; font-size: 10px; }

/* Item que o perfil vê e o plano trava: fica no menu, clicável, com um
   cadeado pequeno no fim da linha e o rótulo um tom abaixo. Sumir com ele
   faria a função desaparecer sem explicação. No trilho o cadeado vira um
   selo no canto do ícone, porque o rótulo embaixo não tem onde recebê-lo. */
.g-menu a.is-plano:not(.is-active) { color: var(--ink-2); }
.g-menu__trava { margin-left: auto; flex: none; display: grid; place-items: center; color: var(--muted); }
.g-menu .g-menu__trava .ic { width: 13px; height: 13px; }
:root[data-menu="trilho"] .g-menu__trava {
  position: absolute; top: 5px; right: 11px; margin: 0;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 1px var(--line-3);
}
:root[data-menu="trilho"] .g-menu .g-menu__trava .ic { width: 10px; height: 10px; }

.g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.g-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 66px; padding: 12px 26px;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  position: sticky; top: 0; z-index: 20;
}
.g-top__titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-top__title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.g-top__sub { font-size: 12.5px; color: var(--ink-2); }
.g-top__right { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.g-top__eu:hover { color: var(--ink); }

.g-main { padding: 26px 30px 40px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Cards ---------- */
.g-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.g-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 15px 20px; border-bottom: 1px solid var(--line-2);
}
/* No KingPan o cabeçalho do card é uma frase de 16px quase preta; aqui era
   uma etiqueta de 12px em caixa alta cinza — 4px menor, sem contraste. É a
   diferença que mais fazia a gestão "sussurrar" ao lado do modelo. */
.g-card__title { font-size: 16px; font-weight: 700; color: var(--ink); }
.g-card__body { padding: 18px 20px; }
.g-card__body--flush { padding: 0; }
.g-card__body + .g-card__body { border-top: 1px solid var(--line-2); }

.g-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.g-grow { flex: 1; min-width: 300px; }
.g-grid { display: grid; gap: 14px; }
.g-grid--2 { grid-template-columns: repeat(2, 1fr); }
.g-grid--3 { grid-template-columns: repeat(3, 1fr); }
.g-grid--4 { grid-template-columns: repeat(4, 1fr); }
.g-grid--6 { grid-template-columns: repeat(6, 1fr); }
.g-span-1 { grid-column: span 1; } .g-span-2 { grid-column: span 2; }
.g-span-3 { grid-column: span 3; } .g-span-4 { grid-column: span 4; }
.g-span-6 { grid-column: span 6; }

/* ---------- Indicadores ----------
   Duas formas. A simples é um card branco com rótulo e número. A colorida
   (`--tom`) pinta o card inteiro com o tint do assunto, põe o chip sólido no
   topo e a curva dos últimos doze meses no pé: numa fileira de oito, a cor é
   o que deixa achar o número certo sem ler todos os rótulos, e a curva conta
   se ele vinha subindo ou caindo.

   O número é sempre MONOESPAÇADO. Num painel financeiro os valores são lidos
   em coluna, e com fonte proporcional as casas não se alinham — a vírgula de
   um card cai no meio dos centavos do outro. */
.g-kpi { padding: 16px 18px; display: flex; align-items: flex-start; gap: 12px; }
.g-kpi__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-kpi__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.g-kpi__value {
  font-family: var(--font-mono);
  font-size: clamp(18px, 1.6vw, 26px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1; white-space: nowrap;
}
.g-kpi__sub { font-size: 12px; color: var(--ink-2); }
.g-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.g-kpi__chip {
  width: 36px; height: 36px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; color: #fff;
}
.g-kpi__chip .ic { width: 19px; height: 19px; }
.g-kpi__spark { margin-top: 2px; }
.g-spark-mini { display: block; overflow: visible; }

/* Na lista simples (clientes, estoque, relatórios) o rótulo vem ANTES do
   número e faz papel de cabeçalho de coluna, então continua em caixa alta. */
.g-kpi > .g-kpi__label:first-child {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--label);
}
.g-kpi:not(.g-kpi--tom) { flex-direction: column; gap: 3px; }

/* Card colorido: o tom traz a cor sólida (chip) e `--tom-50` o fundo diluído.
   Os dois são literais, e não derivados: o tint do tema escuro não é o pastel
   do claro clareado, é a própria cor sobre fundo escuro.

   Sem borda, como no KingPan: o tint já separa o card do fundo, e uma linha
   em volta de oito retângulos coloridos vira grade. */
.g-kpi--tom {
  flex-direction: column; align-items: stretch; gap: 13px; padding: 18px;
  background: var(--tom-50); border: none; box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.g-kpi--tom:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.g-kpi--tom .g-kpi__chip { background: var(--tom); }
.g-kpi--tom .g-kpi__texto { flex: none; gap: 3px; }
.g-kpi--verde    { --tom: var(--green);  --tom-50: var(--green-50); }
.g-kpi--azul     { --tom: var(--navy);   --tom-50: var(--accent-tint); }
.g-kpi--ambar    { --tom: var(--amber);  --tom-50: var(--amber-50); }
.g-kpi--vermelho { --tom: var(--red);    --tom-50: var(--red-50); }
.g-kpi--violeta  { --tom: var(--violet); --tom-50: var(--violet-50); }
.g-kpi--ceu      { --tom: var(--blue);   --tom-50: var(--blue-50); }
.g-kpi--teal     { --tom: var(--teal);   --tom-50: var(--teal-50); }
.g-kpi--rosa     { --tom: var(--pink);   --tom-50: var(--pink-50); }
/* Sem movimento no período: o número perde o peso visual em vez de sumir. */
.g-kpi.is-zero .g-kpi__value { color: var(--muted); }

/* ---------- Cards compactos ----------
   Oito cards inteiros ocupam meia tela. Compactado, o card vira uma faixa
   com rótulo e valor à esquerda e o chip à direita — a cor continua guiando
   o olho, mas o painel inteiro cabe sem rolar. Some a curva, que é leitura
   demorada, e não o número. */
.g-secao { display: flex; flex-direction: column; gap: 10px; }
.g-secao__toggle {
  align-self: flex-end; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; cursor: pointer; transition: .15s;
}
.g-secao__toggle:hover { background: var(--row); color: var(--ink); }
.g-secao__toggle .ic { width: 12px; height: 12px; transition: transform .2s ease; }
.g-secao.is-compacto .g-secao__toggle .ic { transform: rotate(-90deg); }

.g-secao.is-compacto .g-kpi--tom {
  flex-direction: row; align-items: center; justify-content: space-between;
  padding: 10px 14px; gap: 0;
}
.g-secao.is-compacto .g-kpi--tom:hover { transform: none; box-shadow: none; }
.g-secao.is-compacto .g-kpi__top { order: 2; }
.g-secao.is-compacto .g-kpi__chip { width: 26px; height: 26px; border-radius: var(--r-sm); }
.g-secao.is-compacto .g-kpi__chip .ic { width: 13px; height: 13px; }
/* O rótulo sobe e o valor desce: na faixa, quem identifica o card é o texto,
   e o número grande em cima empurraria o rótulo para fora da linha de leitura. */
.g-secao.is-compacto .g-kpi__texto { flex-direction: column-reverse; gap: 1px; min-width: 0; }
.g-secao.is-compacto .g-kpi__value { font-size: 16px; }
.g-secao.is-compacto .g-kpi__label { font-size: 11px; }
.g-secao.is-compacto .g-kpi__spark { display: none; }

/* ---------- Botões ---------- */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: .16s; white-space: nowrap;
}
.g-btn:not([class*="--"]) { border-color: var(--line-3); }
.g-btn:not([class*="--"]):hover { background: var(--row); }
.g-btn--sm { height: 31px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.g-btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }
/* A ação principal do sistema. Faltava a regra — `--shadow-btn` estava
   definido e sem nenhuma referência —, então `.g-btn--primary` caía no botão
   branco de borda transparente: um "Salvar" sem contorno nenhum. O verde de
   confirmação continua para o que CONCLUI algo (enviar, finalizar). */
.g-btn--primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-btn); }
.g-btn--primary:hover { background: var(--navy-700); }
.g-btn--confirm { background: var(--green); color: #fff; box-shadow: 0 6px 16px -6px rgba(31, 157, 107, .5); }
.g-btn--confirm:hover { background: #198A5D; }
.g-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-3); }
.g-btn--ghost:hover { background: var(--row); }
.g-btn--ghost-danger { background: var(--surface); color: var(--red-ink); border-color: var(--line-3); }
.g-btn--ghost-danger:hover { background: var(--red-50); border-color: var(--red); }
.g-btn .ic { width: 17px; height: 17px; }
.g-btn[disabled], .g-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- Campos ---------- */
.g-field { display: flex; flex-direction: column; gap: 6px; }
.g-field--grow { flex: 1; min-width: 240px; }
/* Botão numa linha de campos: desce até a base dos inputs, não fica na altura do rótulo. */
.g-field--acao { justify-content: flex-end; }
.g-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.req { color: var(--red); }

.g-input, .g-select, .g-textarea {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--line-3); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  transition: .14s;
}
.g-textarea { resize: vertical; min-height: 64px; font-weight: 500; }
.g-select { cursor: pointer; }
.g-input:focus, .g-select:focus, .g-textarea:focus {
  outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-50);
}
.g-input::placeholder, .g-textarea::placeholder { color: var(--muted); font-weight: 500; }
.g-input--mono { font-family: var(--font-mono); }
.g-input--r { text-align: right; font-variant-numeric: tabular-nums; }
.g-input[type="file"] { padding: 8px 10px; font-weight: 500; }
/* O botão nativo do campo de arquivo vinha cinza do sistema operacional, fora da paleta e do tema. */
.g-input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 1px solid var(--line-3); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
.g-input[type="file"]::file-selector-button:hover { border-color: var(--label); }
.g-input[readonly] { background: var(--row); color: var(--ink-2); }

/* Liga/desliga. A caixa de seleção vira um interruptor só pelo desenho: o
   HTML é o mesmo, então o valor enviado, o Espaço do teclado e o clique no
   rótulo continuam os da caixa nativa, e nenhum formulário precisou mudar.
   Vale também para `radio` — uma escolha entre poucas (a identificação do
   operador): cada opção é um interruptor, e ligar uma desliga as outras, que
   é o que o radio já faz sozinho. */
.g-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.g-check :is(input[type="checkbox"], input[type="radio"]) {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; width: 36px; height: 20px; margin: 0;
  border-radius: 999px; background: var(--switch-off); cursor: pointer;
  transition: background .18s;
}
.g-check :is(input[type="checkbox"], input[type="radio"])::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 21, 28, .28);
  transition: transform .18s;
}
.g-check :is(input[type="checkbox"], input[type="radio"]):checked { background: var(--navy); }
.g-check :is(input[type="checkbox"], input[type="radio"]):checked::before { transform: translateX(16px); }
.g-check :is(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.g-check :is(input[type="checkbox"], input[type="radio"]):disabled { opacity: .5; cursor: default; }
/* Interruptor que o plano trava: desligado, sem clique, e o cadeado diz por quê. */
.g-check.is-plano { cursor: default; color: var(--ink-2); }
.g-check__trava { display: inline-grid; place-items: center; margin-left: -4px; color: var(--muted); }
.g-check__trava .ic { width: 13px; height: 13px; }
/* A ajuda embaixo do interruptor (o `span` logo depois dele) começa onde
   começa o texto dele. A nota geral de um grupo é um `div` e fica na margem. */
.g-check + span.g-help { display: block; padding-left: 46px; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .g-check :is(input[type="checkbox"], input[type="radio"]),
  .g-check :is(input[type="checkbox"], input[type="radio"])::before { transition: none; }
}

/* Barra de proporção nas tabelas de relatório. */
.g-barra { height: 10px; border-radius: 5px; background: var(--navy); min-width: 2px; }

.g-help { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.g-actions { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
.g-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 16px 20px; }
.g-filters .g-field { min-width: 160px; }
/* O atalho de período que está valendo ("Este mês"), para ninguém conferir as datas à mão. */
.g-filters .g-btn.is-active { background: var(--accent-tint); color: var(--navy); border-color: var(--accent-line); }
/* Os botões de criar, à direita mesmo quando a barra quebra em duas linhas. */
.g-filters__acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.g-inline-form { display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- Tabelas ---------- */
.g-table-wrap { overflow-x: auto; }
.g-table { width: 100%; border-collapse: collapse; }
.g-table th {
  position: sticky; top: 0; z-index: 1;
  height: 40px; padding: 0 14px; text-align: left; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--label);
}
.g-table td {
  height: 48px; padding: 6px 14px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; vertical-align: middle; font-variant-numeric: tabular-nums;
}
.g-table tbody tr:hover { background: var(--row); }
.g-table tbody tr:last-child td { border-bottom: none; }
/* O que vai à direita é dinheiro ou quantidade: quebrado, o R$ ficava numa linha e o valor na outra. */
.g-table .r { text-align: right; white-space: nowrap; }
.g-table .c { text-align: center; }
.g-table .b { font-weight: 700; }
.g-table .code { font-family: var(--font-mono); font-size: 12.5px; }
.g-table .acoes { text-align: right; white-space: nowrap; }
.g-table .acoes > * + * { margin-left: 6px; }
.g-table tr.is-off td { opacity: .55; }
.muted { color: var(--muted); }
/* Segunda linha dentro de uma célula: quem é o registro em cima, o detalhe
   que só se lê quando preciso embaixo. */
.g-sub { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.t-green { color: var(--green-ink); font-weight: 700; }
.t-amber { color: var(--amber-ink); font-weight: 700; }
.t-red { color: var(--red-ink); font-weight: 700; }

.g-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-2); background: var(--row);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.g-pager__btns { display: flex; gap: 8px; }

.g-empty { padding: 34px 20px; text-align: center; color: var(--ink-2); font-size: 13.5px; }
.g-empty strong { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* ---------- Selos ---------- */
.g-badge {
  display: inline-block; padding: 4px 9px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.g-badge--gray { background: var(--neutral-tint); color: var(--ink-2); }
.g-badge--navy { background: var(--accent-tint); color: var(--navy-700); }
.g-badge--blue { background: var(--blue-50); color: var(--blue); }
.g-badge--green { background: var(--green-50); color: var(--green-ink); }
.g-badge--amber { background: var(--amber-50); color: var(--amber-ink); }
.g-badge--red { background: var(--red-50); color: var(--red-ink); }

/* ---------- Avisos ---------- */
.g-callout {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13px; line-height: 1.5;
  background: #F1F3F6; color: var(--ink-2);
  border: 1px solid transparent;
}
.g-callout strong { display: block; color: var(--ink); font-weight: 700; }
.g-callout--info { background: var(--accent-tint); border-color: var(--accent-line); color: var(--deep); }
.g-callout--green { background: var(--green-50); border-color: #CCE9DB; color: var(--green-ink); }
.g-callout--amber { background: var(--amber-50); border-color: #F0E0BF; color: var(--amber-ink); }
.g-callout--red { background: var(--red-50); border-color: #F6D5D0; color: var(--red-ink); }
.g-callout .ic { flex: none; margin-top: 1px; }

/* ---------- Bloco recolhido ---------- */
.g-detalhes { border-top: 1px solid var(--line-2); padding-top: 14px; margin-top: 4px; }
.g-detalhes > summary {
  cursor: pointer; list-style: none; user-select: none; padding: 4px 0;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.g-detalhes > summary::-webkit-details-marker { display: none; }
.g-detalhes > summary::before { content: '▸ '; }
.g-detalhes[open] > summary::before { content: '▾ '; }
.g-detalhes > summary:hover { color: var(--ink); }
.g-detalhes > * + * { margin-top: 11px; }

/* ---------- Lista chave/valor ---------- */
.g-kv { display: flex; flex-direction: column; gap: 9px; }
.g-kv > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.g-kv dt, .g-kv > div > span:first-child { color: var(--ink-2); }
.g-kv dd, .g-kv > div > span:last-child { margin: 0; font-weight: 700; }
.g-kv dd small { margin-left: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* ---------- Abas ---------- */
.g-tabs { display: flex; gap: 6px; padding: 0 20px; border-bottom: 1px solid var(--line-2); }
.g-tabs :is(a, button) {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; cursor: pointer; transition: color .16s;
}
.g-tabs :is(a, button):hover { color: var(--ink); }
.g-tabs .is-active { color: var(--navy); border-bottom-color: var(--navy); }
.g-tabs .ic { width: 16px; height: 16px; flex: none; }
/* Abas da própria página (Configurações), fora de card. Rolam na
   horizontal quando não cabem: quebradas em duas linhas, o traço da aba
   ativa ficaria solto no meio da faixa. */
.g-tabs--pagina { padding: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.g-tabs--pagina::-webkit-scrollbar { display: none; }
/* Contador de pendências da aba (eventos com erro, rotinas atrasadas): a aba
   avisa que há o que olhar sem precisar abri-la. */
.g-tabs__conta { margin-left: 2px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--red-50); color: var(--red-ink); }
/* Aba que o plano trava: continua na faixa, com o cadeado depois do rótulo. */
.g-tabs .g-tabs__trava { display: inline-grid; place-items: center; margin-left: -3px; color: var(--muted); }
.g-tabs .g-tabs__trava .ic { width: 12px; height: 12px; }

/* ---------- Abas internas ----------
   Abas dentro de uma aba, como Configurações → Produtos no VetLogy: um card
   com a faixa das abas no alto (cada uma com o seu contador), e em cada
   painel a barra da lista e a tabela colada. Marcação:
     <div class="g-subabas" data-subabas>
       <?= Gestao::subNav(...) ?>                      a faixa (.g-subabas__nav)
       <section class="g-subabas__painel" data-subpainel="x">
         <div class="g-subabas__barra">…</div>             total, busca, ações
         <div class="g-table-wrap">…</div>
       </section>
     </div>
   O controle é do gestao.js (ligarSubabas): a aba interna vai para o endereço
   (?sub=x), e o F5 e a volta de outra aba caem nela. */
.g-subabas { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.g-subabas__nav { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.g-subabas__nav::-webkit-scrollbar { display: none; }
.g-subabas__nav button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap; cursor: pointer; transition: color .16s;
}
.g-subabas__nav button:hover { color: var(--ink); }
.g-subabas__nav button.is-active { color: var(--ink); border-bottom-color: var(--navy); }
.g-subabas__nav .ic { width: 15px; height: 15px; flex: none; }
.g-subabas__conta { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--neutral-tint); color: var(--ink-2); }
.g-subabas__nav .is-active .g-subabas__conta { background: var(--accent-tint); color: var(--navy); }
.g-subabas__barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.g-subabas__barra .g-select { width: auto; min-width: 150px; }
.g-subabas__total { font-size: 13px; color: var(--ink-2); }
.g-subabas__total strong { color: var(--ink); font-weight: 700; }
.g-subabas__nota { padding: 14px 16px; border-top: 1px solid var(--line-2); }

/* Busca com lupa, para a barra de uma lista. Com `data-filtra` ela filtra as
   linhas ali mesmo (listas curtas, que vieram inteiras); dentro de um form GET
   ela manda a busca ao servidor (listas paginadas). */
.g-procura { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.g-procura .ic { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.g-procura .g-input { width: 100%; padding-left: 34px; }
.g-espaco { flex: 1; }

/* ---------- Configurações → Lojas e caixas ----------
   A matriz no alto, as filiais penduradas nela por uma linha, e dentro de
   cada loja os caixas dela, também pendurados. As linhas saem dos ícones: a
   da loja aberta desce do ícone dela até os caixas, e a das filiais desce do
   ícone da matriz. O último nó (.is-ultimo, e não :last-child: a busca
   esconde nós) fecha a linha com a curva. A abertura anima só depois de a
   página aplicar as lojas guardadas (.is-pronta), para não piscar. */
.g-lojas { --lj-cy: 35px; --lj-ml: 67px; --lj-ind: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.g-lojas__topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 18px 0; }
.g-lojas__chips, .g-lojas__plano { display: flex; flex-wrap: wrap; gap: 8px; }
.g-lojas__chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--neutral-tint); color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.g-lojas__chip .ic { width: 14px; height: 14px; color: var(--muted); }
.g-lojas__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-50); }
.g-lojas__barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.g-lojas__barra .g-btn .ic, .g-loja__acoes .g-btn .ic { width: 15px; height: 15px; }
.g-lojas__arvore { padding: 18px; }
.g-lojas__nota { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 18px; }
.g-lojas__vazio { padding: 40px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }
.g-lojas__vazio strong { display: block; margin-bottom: 6px; font-size: 15px; color: var(--ink); }

.g-loja { background: var(--surface); border: 1px solid var(--line-3); border-radius: var(--r-md); }
.g-loja.is-matriz { border-color: var(--accent-line); }
.g-loja.is-aberta { box-shadow: var(--shadow-pop); }
.g-loja.is-off > .g-loja__cab > :not(.g-loja__acoes):not(.g-loja__seta) { opacity: .6; }
.g-loja.is-apagada { opacity: .55; }
.g-lojas.is-pronta .g-loja { transition: box-shadow .15s; }

.g-loja__cab {
  display: grid; grid-template-columns: 24px 38px minmax(170px, 1.2fr) minmax(0, 2.4fr) auto auto;
  grid-template-areas: "seta ico id meta est acoes"; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--r-md); cursor: pointer;
}
.g-loja__cab:hover { background: var(--row); }
.g-loja__seta { grid-area: seta; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.g-loja__seta .ic { width: 16px; height: 16px; transform: rotate(-90deg); }
.g-lojas.is-pronta .g-loja__seta .ic { transition: transform .18s; }
.g-loja.is-aberta > .g-loja__cab .g-loja__seta .ic { transform: none; }
.g-loja__seta:focus-visible, .g-loja__novo-cx:focus-visible, .g-lojas__nova:focus-visible, .g-loja__nota:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.g-loja__ico { grid-area: ico; position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--neutral-tint); color: var(--ink-2); }
.g-loja__ico .ic { width: 19px; height: 19px; }
.g-loja.is-matriz .g-loja__ico { background: var(--accent-tint); color: var(--navy); }
.g-loja.is-aberta > .g-loja__cab .g-loja__ico::after { content: ""; position: absolute; left: 50%; top: 100%; height: 16px; margin-left: -1px; border-left: 2px solid var(--line-3); }
.g-loja__id { grid-area: id; min-width: 0; }
.g-loja__nome { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.g-loja__sub { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.g-loja__sub > span { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-loja__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 8px 26px; min-width: 0; margin: 0; }
.g-loja__meta dt { margin-bottom: 2px; font-size: 11.5px; color: var(--muted); }
.g-loja__meta dd { margin: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.g-loja__nota { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.g-loja__nota:hover .g-badge { filter: brightness(.95); text-decoration: underline; }
.g-loja__estado { grid-area: est; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.g-loja__acoes { grid-area: acoes; display: flex; gap: 6px; }

.g-loja__corpo { display: grid; grid-template-rows: 0fr; }
.g-lojas.is-pronta .g-loja__corpo { transition: grid-template-rows .22s ease; }
.g-loja.is-aberta > .g-loja__corpo { grid-template-rows: 1fr; }
.g-loja__corpo > div { min-height: 0; overflow: hidden; }
.g-loja__caixas { margin: 0 14px 14px 66px; padding-left: 26px; }
.g-loja__cxi { position: relative; padding-top: 8px; }
.g-loja__cxi::before { content: ""; position: absolute; left: -26px; top: 0; bottom: 0; border-left: 2px solid var(--line-3); }
.g-loja__cxi:not(.is-ultimo)::after { content: ""; position: absolute; left: -26px; top: 33px; width: 22px; border-top: 2px solid var(--line-3); }
.g-loja__cxi.is-ultimo::before { bottom: auto; width: 20px; height: 34px; border-bottom: 2px solid var(--line-3); border-bottom-left-radius: 9px; }

/* As ações têm largura fixa: um caixa sem o programa tem menos botões, e as colunas das linhas não podem sair do prumo. */
.g-caixa {
  display: grid; grid-template-columns: 34px minmax(130px, 1.4fr) minmax(110px, 1fr) minmax(80px, .8fr) 70px 236px;
  grid-template-areas: "ico id est ult ver acoes"; align-items: center; gap: 6px 12px;
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2);
}
.g-caixa.is-achado { border-color: var(--accent-line); background: var(--accent-tint); }
.g-caixa.is-off > :not(.g-caixa__acoes) { opacity: .6; }
.g-caixa__ico { grid-area: ico; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink-2); }
.g-caixa__ico .ic { width: 17px; height: 17px; }
.g-caixa__id { grid-area: id; min-width: 0; }
.g-caixa__id strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.g-caixa__id span { display: block; overflow: hidden; font-size: 12px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.g-caixa__estado { grid-area: est; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; }
.g-caixa__estado i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.g-caixa__estado--online { color: var(--green-ink); }
.g-caixa__estado--online i { box-shadow: 0 0 0 3px var(--green-50); }
.g-caixa__estado--offline, .g-caixa__estado--off { color: var(--ink-2); }
.g-caixa__estado--pendente { color: var(--amber-ink); }
.g-caixa__info { min-width: 0; overflow: hidden; font-size: 13px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.g-caixa__info span { display: block; font-size: 11.5px; color: var(--muted); }
.g-caixa__ult { grid-area: ult; }
.g-caixa__ver { grid-area: ver; }
.g-caixa__acoes { grid-area: acoes; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.g-btn--ic { width: 31px; padding: 0; justify-content: center; }
.g-btn--ic .ic { width: 15px; height: 15px; }
.g-caixa__avisos { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }

.g-loja__novo-cx {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 46px; padding: 0 14px;
  border: 1.5px dashed var(--line-3); border-radius: 10px; background: none;
  color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.g-loja__novo-cx .ic { width: 16px; height: 16px; }
.g-loja__novo-cx:hover { border-color: var(--navy); background: var(--accent-tint); color: var(--navy); }

.g-lojas__filiais { margin-left: var(--lj-ml); padding-left: var(--lj-ind); }
.g-lojas__soltas { display: flex; flex-direction: column; }
.g-lojas__no { position: relative; padding-top: 12px; }
.g-lojas__filiais > .g-lojas__no::before { content: ""; position: absolute; left: calc(var(--lj-ind) * -1); top: 0; bottom: 0; border-left: 2px solid var(--line-3); }
.g-lojas__filiais > .g-lojas__no:not(.is-ultimo)::after { content: ""; position: absolute; left: calc(var(--lj-ind) * -1); top: calc(12px + var(--lj-cy)); width: calc(var(--lj-ind) - 2px); border-top: 2px solid var(--line-3); }
.g-lojas__filiais > .g-lojas__no.is-ultimo::before { bottom: auto; width: calc(var(--lj-ind) - 4px); height: calc(13px + var(--lj-cy)); border-bottom: 2px solid var(--line-3); border-bottom-left-radius: 10px; }
.g-lojas__nova {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 70px; padding: 10px 14px 10px 48px;
  border: 1.5px dashed var(--line-3); border-radius: var(--r-md); background: none;
  color: var(--ink-2); font: inherit; text-align: left; cursor: pointer;
}
.g-lojas__nova .g-loja__ico { flex: none; background: none; border: 1.5px dashed var(--line-3); }
.g-lojas__nova strong { display: block; font-size: 14px; color: var(--ink); }
.g-lojas__nova small { font-size: 12.5px; }
.g-lojas__nova:hover { border-color: var(--navy); background: var(--accent-tint); }
.g-lojas__nova:hover .g-loja__ico { border-color: var(--navy); color: var(--navy); }

@media (max-width: 1240px) {
  .g-caixa { grid-template-columns: 34px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) 70px; grid-template-areas: "ico id est ult ver" "ico acoes acoes acoes acoes"; }
  .g-caixa__acoes { justify-content: flex-start; }
}
@media (max-width: 1180px) {
  .g-loja__cab { grid-template-columns: 24px 38px minmax(0, 1fr) auto; grid-template-areas: "seta ico id est" ". . meta meta" ". . acoes acoes"; }
  .g-loja__acoes { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .g-caixa { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico id est" "ico acoes acoes"; }
  .g-caixa__info { display: none; }
}
@media (max-width: 640px) {
  .g-lojas { --lj-ml: 14px; --lj-ind: 18px; --lj-cy: 32px; }
  .g-lojas__arvore { padding: 12px; }
  .g-loja__cab { padding: 12px; align-items: start; }
  .g-loja__caixas { margin: 0 12px 12px; padding-left: 0; }
  .g-loja__cxi::before, .g-loja__cxi::after, .g-loja.is-aberta > .g-loja__cab .g-loja__ico::after { display: none; }
  .g-lojas__nova { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-lojas.is-pronta .g-loja, .g-lojas.is-pronta .g-loja__corpo, .g-lojas.is-pronta .g-loja__seta .ic { transition: none; }
}

/* A nota fiscal da loja, no modal dela: os fatos em grade, e a ajuda que acompanha um campo, alinhada com ele. */
.g-kv--grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 18px; margin: 4px 0 0; }
.g-kv--grade > div { flex-direction: column; justify-content: flex-start; gap: 3px; }
.g-help--campo { align-self: end; padding-bottom: 10px; }
.g-falta { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.g-falta strong { color: var(--ink); }
.g-falta ul { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; columns: 2 260px; column-gap: 28px; }

/* O painel de cada aba respira como o conteúdo da página: as abas são
   telas inteiras, com as mesmas linhas e cards. */
.g-abas, .g-abas__painel { display: flex; flex-direction: column; gap: 20px; }

/* ---------- Guia de configuração inicial ----------
   Uma faixa de cards que rola na horizontal, e não uma lista vertical: os
   passos são atalhos para telas diferentes, não etapas de um formulário, e
   em pé eles empurravam o painel inteiro para baixo da dobra. */
.g-guia {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 16px 18px;
}
.g-guia__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.g-guia__t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.g-guia__t .ic { width: 16px; height: 16px; color: var(--navy); }
.g-guia__s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.g-guia__x {
  border: 0; background: transparent; color: var(--label); cursor: pointer;
  padding: 4px 6px; border-radius: 6px; display: grid; place-items: center;
}
.g-guia__x:hover { background: var(--row); color: var(--ink-2); }
.g-guia__x .ic { width: 15px; height: 15px; }

.g-guia__bar { height: 4px; border-radius: 999px; background: var(--line-2); margin: 12px 0 14px; overflow: hidden; }
.g-guia__bar span { display: block; height: 100%; border-radius: 999px; background: var(--navy); transition: width .3s; }

.g-guia__trilho { display: flex; align-items: center; gap: 6px; }
/* As setas só entram quando a faixa transborda — botão que não faz nada é
   ruído, e a lista cabe inteira numa tela larga. */
.g-guia__seta {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line-3); background: var(--surface); color: var(--ink-2);
  cursor: pointer; display: none; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transition: .14s;
}
.g-guia__seta.is-on { display: inline-flex; }
.g-guia__seta:disabled { opacity: .3; cursor: default; }
.g-guia__seta:not(:disabled):hover { border-color: var(--navy); color: var(--navy); }

.g-guia__lista {
  flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 10px;
  overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.g-guia__lista::-webkit-scrollbar { height: 6px; }
.g-guia__lista::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 999px; }

.g-passo {
  flex: 0 0 244px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 7px; padding: 13px;
  border: 1px solid var(--line-3); border-radius: var(--r-md);
  color: inherit; transition: .14s;
}
.g-passo:hover { border-color: var(--navy); background: var(--accent-tint); }
.g-passo__top { display: flex; align-items: center; gap: 9px; }
.g-passo__ic {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center; background: var(--neutral-tint); color: var(--navy);
}
.g-passo__ic .ic { width: 16px; height: 16px; }
.g-passo__top strong { font-size: 13px; font-weight: 700; line-height: 1.25; }
.g-passo small { flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.g-passo__btn { font-size: 11.5px; font-weight: 700; color: var(--navy); }

/* Passo cumprido sai do caminho sem sair da lista: quem chegou até aqui quer
   ver o que já andou, e um card que some faria o trilho pular de lugar. */
.g-passo.is-feito { border-color: var(--green-50); background: var(--green-50); }
.g-passo.is-feito:hover { border-color: var(--green); background: var(--green-50); }
.g-passo.is-feito .g-passo__ic { background: var(--green); color: #fff; }
.g-passo.is-feito .g-passo__top strong { color: var(--green-ink); }
.g-passo__ok { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--green-ink); }
.g-passo__ok .ic { width: 13px; height: 13px; }

.g-guia__chave {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r);
  background: var(--accent-tint); font-size: 12.5px; color: var(--ink-2);
}
.g-guia__chave strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* Cartão de escolha: um rádio com título e explicação, para opções que
   precisam de uma frase para serem entendidas (ex.: identificação do
   operador). Mesmo desenho das paletas da Identidade visual. */
.g-opcao { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: pointer; border: 2px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; transition: .16s; }
.g-opcao:hover { border-color: var(--line-3); }
.g-opcao.is-active { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-50); }
.g-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.g-opcao strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.g-opcao span { font-size: 13px; line-height: 1.45; color: var(--ink-2); }

/* ---------- Usuários ----------
   A pessoa na lista: as iniciais no quadrado com a cor do nível (o
   entity-avatar do VetLogy), o nome e, embaixo, o e-mail. */
.g-pessoa { display: flex; align-items: center; gap: 11px; }
.g-pessoa__ini { font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
/* Contagem dentro do botão de filtro: juntar a equipe por perfil é
   escolher o botão, e o número diz quantos há antes de clicar. */
.g-conta {
  margin-left: 2px; padding: 1px 7px; border-radius: 999px;
  background: var(--neutral-tint); color: var(--ink-2); font-size: 11px; font-weight: 700;
}
.g-btn--primary .g-conta { background: rgba(255, 255, 255, .22); color: #fff; }

/* Editor de permissões, agrupado como o do VetLogy: cada grupo recolhe e
   diz quantos módulos libera; cada módulo, uma linha com as ações dele e o
   "Todos". */
.g-perms { display: flex; flex-direction: column; gap: 10px; }
.g-perm { border: 1px solid var(--line-3); border-radius: var(--r-md); overflow: hidden; }
.g-perm > summary {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  background: var(--row); cursor: pointer; font-size: 13.5px; list-style: none;
}
.g-perm > summary::-webkit-details-marker { display: none; }
.g-perm > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .16s; }
.g-perm:not([open]) > summary::after { transform: rotate(-90deg); }
.g-perm__conta { font-size: 12px; font-weight: 500; color: var(--muted); }
.g-perm__mod {
  display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 12px 18px;
  padding: 11px 16px; border-top: 1px dashed var(--line-2);
}
.g-perm__nome { display: flex; flex-direction: column; gap: 2px; }
.g-perm__nome strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.g-perm__nome span { font-size: 12px; color: var(--ink-2); }
.g-perm__acoes { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.g-perm__todos { color: var(--ink-2); }
@media (max-width: 900px) {
  .g-perm__mod { grid-template-columns: 1fr; }
}

/* ---------- Identidade visual ---------- */
.g-paletas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
.g-paleta { display: block; cursor: pointer; border: 2px solid var(--line); border-radius: var(--r-md); padding: 9px; transition: .16s; }
.g-paleta:hover { border-color: var(--line-3); }
.g-paleta.is-active { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-50); }
.g-paleta input { position: absolute; opacity: 0; pointer-events: none; }
.g-paleta__amostra { display: flex; gap: 4px; align-items: flex-end; height: 44px; border-radius: var(--r-sm); padding: 6px; }
.g-paleta__amostra span { flex: 1; height: 16px; border-radius: 3px; }
.g-paleta__nome { display: block; margin-top: 7px; font-size: 12.5px; font-weight: 700; }

.g-cor { display: flex; align-items: center; gap: 10px; }
.g-cor__pick { width: 44px; height: 38px; padding: 3px; border: 1px solid var(--line-3); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
.g-tema-demo { border-radius: var(--r-md); padding: 16px; color: #fff; }

.g-logo-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 110px; margin-bottom: 14px; padding: 16px;
  /* Fundo escuro na prévia: é nele que o logo vai aparecer no caixa. */
  background: var(--top); border-radius: var(--r-md);
}
.g-logo-preview img { max-height: 78px; max-width: 100%; object-fit: contain; }
.g-logo-preview .g-empty { color: var(--on-dark); padding: 0; }
.g-logo-preview .g-empty strong { color: #fff; }

/* Prévia da foto do produto: fundo claro, porque a imagem de embalagem
   costuma ter fundo branco e sumiria num card branco. */
.g-foto-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; padding: 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--line);
}
.g-foto-preview img { max-height: 200px; max-width: 100%; object-fit: contain; }
.g-foto-preview .g-empty { text-align: center; padding: 0; }

/* ---------- Menu suspenso ---------- */
.g-drop { position: relative; }
.g-drop__menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px;
}
.g-drop__menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; }
.g-drop__menu a:hover { background: var(--row); }

/* ---------- Login ---------- */
.g-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--app); }
.g-login__card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-frame); overflow: hidden; }
.g-login__head { padding: 26px 26px 18px; background: var(--top); }
.g-login__body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; }
.g-login__links { font-size: 12.5px; color: var(--ink-2); text-align: center; }
.g-login__links a { color: var(--navy); font-weight: 700; }

/* ---------- Ícones ---------- */
.ic { display: inline-block; width: 20px; height: 20px; vertical-align: -.2em; }
.ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Toast ----------
   Os nomes são `.toasts`/`.toast`, sem prefixo: é o que o `gestao.js` cria. */
.toasts { position: fixed; right: 22px; bottom: 22px; z-index: 1000; display: flex; flex-direction: column; gap: 9px; pointer-events: none; }
.toast {
  min-width: 260px; max-width: 420px; padding: 13px 17px;
  border-radius: var(--r-md); background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(10px); transition: opacity .22s, transform .22s;
}
.toast.is-in { opacity: 1; transform: none; }
.toast--success { background: var(--green); }
.toast--danger { background: var(--red); }
/* `info` é a cor padrão do `api.js`: sem este modificador valia a regra
   base (fundo `--ink`), que no tema escuro é quase branco — texto branco
   sobre fundo branco, o aviso mais comum do sistema invisível. */
.toast--info { background: var(--navy); }
.toast--warning { background: var(--amber); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Peças que as páginas ainda usam ---------- */
.g-btn--danger { background: var(--red); color: #fff; box-shadow: 0 6px 16px -6px rgba(225, 87, 74, .5); }
/* `--red-ink` inverte no escuro: o hover clareava o botão de excluir e o
   contraste do texto branco despencava. `--red-600` é cor de marca e não
   muda com o tema. */
.g-btn--danger:hover { background: var(--red-600); }
/* Opacidade sozinha lê-se como "desabilitado", não como "carregando". O
   texto some e o giro entra no lugar, sem mudar a largura do botão — senão a
   barra de ações pula a cada clique. Vale para todo botão, e não só o
   `.g-btn`: quem liga é o gestao.js, no botão que chamou a API, e a aba de
   Configurações que está carregando também é um botão. */
.is-loading:is(button, .g-btn) { position: relative; color: transparent !important; pointer-events: none; cursor: progress; }
.is-loading:is(button, .g-btn) > * { visibility: hidden; }
.is-loading:is(button, .g-btn)::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  color: var(--ink-2); animation: ssGira .6s linear infinite;
}
.is-loading:is(.g-btn--primary, .g-btn--confirm, .g-btn--danger)::after { color: #fff; }
.g-btn--sm.is-loading::after { width: 12px; height: 12px; }

.g-input--sm, .g-select--sm { padding: 7px 11px; font-size: 12.5px; }

.g-fieldset {
  margin: 0; padding: 15px 17px 17px;
  border: 1px solid var(--line-3); border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 12px;
}
.g-fieldset legend {
  padding: 0 7px; font-size: 11px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}

.mono { font-family: var(--font-mono); font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
.r { text-align: right; }

.g-tema-demo { height: 108px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); padding: 0; }
.g-tema-demo__top { height: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.g-tema-demo__corpo { display: flex; gap: 8px; padding: 12px; }
.g-tema-demo__corpo span { flex: 1; height: 56px; border-radius: var(--r-sm); }

.php-error {
  margin: 8px 24px; padding: 9px 13px; border-radius: var(--r-sm);
  background: var(--red-50); color: var(--red-ink);
  font-family: var(--font-mono); font-size: 12px;
}

/* ---------- Barra de rolagem ---------- */
* { scrollbar-width: thin; scrollbar-color: #CDD3DC transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #CDD3DC; border-radius: 6px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Telas estreitas ---------- */
@media (max-width: 1100px) {
  .g-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: .2s; z-index: 50; }
  .g-shell.is-open .g-side { transform: none; }
  .g-main, .g-top { padding-left: 18px; padding-right: 18px; }
  .g-grid--4, .g-grid--6 { grid-template-columns: repeat(2, 1fr); }
}
@media print {
  .g-side, .g-top, .g-filters, .g-actions, .g-pager__btns { display: none !important; }
  .g-card { box-shadow: none; border-color: #ddd; }
}

/* ==========================================================================
   Modo escuro
   --------------------------------------------------------------------------
   O tema é escolhido antes do CSS carregar (script no <head> do layout), para
   a tela não piscar branco. Sem escolha guardada, segue o sistema.

   Os tints não são os pastéis do claro escurecidos: no escuro eles são a cor
   da marca SOBRE o fundo escuro, por isso a mistura vira contra `--tint-base`
   e a força cai — pastel sobre preto some, e o texto em cima precisaria de
   contraste que o claro não pede. Os tons de texto sobre tint também mudam:
   o verde escuro do claro fica ilegível num fundo escuro.
   ========================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;

  --app: #0C1017;
  --bg: #10151D;
  --surface: #171D26;
  --surface-2: #1C232E;
  --dark: #0A0E14;
  --row: #1C232E;
  --ink: #E8EBF0;
  --ink-2: #A7B0BF;
  --muted: #7B8698;
  --label: #69748A;
  --line: #242C38;
  --line-2: #1E252F;
  --line-3: #2C3540;
  --neutral-tint: #242C38;
  --menu-tinta: #C3CAD6;
  --switch-off: #3A4453;

  /* Os tints escuros são a própria cor sobre fundo escuro, não o pastel do
     claro: pastel aqui vira mancha clara e perde a leitura do estado. */
  --accent-tint: #1B2547;  --accent-line: #2C3A6B;
  --green-50: #12291F;  --green-ink: #4FD296;
  --teal-50:  #0F2723;
  --amber-50: #2B2113;  --amber-ink: #E9A94A;
  --red-50:   #2E1A18;  --red-ink:   #F0796B;
  --blue-50:  #14232E;
  --violet-50:#211A38;
  --pink-50:  #2B1722;
  --focus-50: #1B2547;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-pop: 0 16px 32px -20px rgba(0, 0, 0, .8);
  --shadow-frame: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 70px -38px rgba(0, 0, 0, .7);
}


/* A barra lateral e o topo acompanham a superfície, em vez de ficarem
   brancos ilhados no escuro. */
:root[data-tema="escuro"] .g-side,
:root[data-tema="escuro"] .g-top { background: var(--surface); }

/* Selo neutro: no claro é cinza-claro, no escuro precisa de fundo próprio. */
:root[data-tema="escuro"] .g-badge--gray,
:root[data-tema="escuro"] .g-callout { background: #242C38; color: var(--ink-2); }

/* No escuro o azul da marca fica fraco como TEXTO sobre fundo escuro; o
   fundo (`--accent-tint`) já escureceu junto, então só o texto sobe de tom. */
:root[data-tema="escuro"] .g-menu a.is-active,
:root[data-tema="escuro"] .g-badge--navy,
:root[data-tema="escuro"] .g-login__links a,
:root[data-tema="escuro"] .g-tabs .is-active { color: #8FA2FF; }

:root[data-tema="escuro"] * { scrollbar-color: #39424F transparent; }
:root[data-tema="escuro"] *::-webkit-scrollbar-thumb { background: #39424F; }

/* O botão que alterna o tema. */
.g-tema {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--line-3); border-radius: var(--r);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; transition: .16s;
}
.g-tema:hover { background: var(--row); color: var(--ink); }
.g-tema .ic { width: 18px; height: 18px; }

/* ==========================================================================
   Select com busca (BuscaSelect)
   --------------------------------------------------------------------------
   Vindo do KinGpan, com as variáveis traduzidas para os tokens daqui — assim
   ele acompanha a cor da empresa e o modo escuro sem regra própria.
   ========================================================================== */
.ss-component{position:relative;display:block}
.ss-wrap{position:relative}
.ss-trigger{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:10px 12px;cursor:pointer;
  border:1.5px solid var(--line-3);border-radius:10px;background:var(--surface);font-size:13.5px;transition:.16s}
.ss-trigger:hover{border-color:var(--label)}
.ss-trigger:focus-visible,.ss-trigger.ss-open{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 4px color-mix(in oklab,var(--navy),transparent 88%)}
.ss-trigger-icon{color:var(--muted);flex:0 0 auto;font-size:13px}
.ss-trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ss-trigger-text.ss-placeholder{color:var(--muted);font-weight:400}
.ss-trigger-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;font-weight:700;padding:2px 8px;
  border-radius:6px;background:var(--row);color:var(--ink-2)}
.ss-trigger-clear {
  display: grid; place-items: center;
  width: 20px; height: 20px; flex: none;
  border: 0; border-radius: 999px; padding: 0;
  background: transparent; color: var(--muted); cursor: pointer;
}
.ss-trigger-clear:hover { background: var(--red-50); color: var(--red-ink); }
.ss-trigger-clear svg { width: 13px; height: 13px; }

.ss-trigger-arrow{flex:0 0 auto;color:var(--muted);font-size:11px;transition:transform .18s}
.ss-trigger.ss-open .ss-trigger-arrow{transform:rotate(180deg)}
.ss-disabled .ss-trigger{opacity:.55;cursor:not-allowed;background:var(--row)}

.ss-multi-tags{flex:1;display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.ss-multi-placeholder{color:var(--muted)}
.ss-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 5px 3px 9px;
  border-radius:7px;background:var(--row);border:1px solid var(--line)}
.ss-tag-remove{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:10px;padding:2px}
.ss-tag-remove:hover{color:var(--red)}

.ss-dropdown{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:80;overflow:hidden;
  min-width:100%;width:max-content;max-width:min(380px,92vw);
  background:var(--surface);border:1px solid var(--line-3);border-radius:12px;box-shadow:var(--shadow-pop)}
/* Campo colado na borda direita: a lista mais larga que ele abre para dentro. */
.ss-dropdown.ss-esq{left:auto;right:0}
/* Dentro de modal a lista flutua: o busca-select.js calcula a posição a partir do campo. */
.ss-dropdown.ss-flutua{position:fixed;right:auto}
.ss-dropdown.ss-show{display:block}
.ss-search-wrap{padding:9px;border-bottom:1px solid var(--line)}
.ss-search-input-wrap{position:relative;display:flex;align-items:center}
.ss-search-icon{position:absolute;left:10px;color:var(--muted);font-size:12px;pointer-events:none}
.ss-search-input{width:100%;padding:9px 30px 9px 30px;border:1.5px solid var(--line-3);border-radius:9px;
  font-family:inherit;font-size:13px;background:var(--app);color:var(--ink)}
.ss-search-input:focus{outline:none;border-color:var(--navy)}
.ss-search-spinner{position:absolute;right:30px;color:var(--muted);font-size:12px}
.ss-search-clear{display:none;position:absolute;right:8px;border:0;background:transparent;cursor:pointer;
  color:var(--muted);font-size:11px;padding:4px}
.ss-search-clear.ss-visible{display:block}

.ss-results{overflow-y:auto;padding:5px}
.ss-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:.12s}
.ss-item:hover,.ss-item.ss-focused{background:var(--row)}
.ss-item.ss-active{background:color-mix(in oklab,var(--navy),transparent 92%)}
.ss-item-icon,.ss-item-check{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;background:var(--row);color:var(--muted);font-size:11px}
.ss-item.ss-checked .ss-item-check{background:var(--navy);color:#fff}
.ss-item-check i{opacity:0}
.ss-item.ss-checked .ss-item-check i{opacity:1}
.ss-item-content{flex:1;min-width:0;line-height:1.3}
.ss-item-main{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-item-sub{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-item-badge{flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;font-weight:700;padding:2px 7px;
  border-radius:6px;background:var(--row);color:var(--ink-2)}

.ss-empty,.ss-loading{display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px 14px;
  font-size:12.5px;color:var(--muted);text-align:center}
.ss-empty i,.ss-loading i{font-size:16px;opacity:.6}
.ss-empty.ss-error{color:var(--red)}
.ss-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;
  border-top:1px solid var(--line);background:var(--row);font-size:11px;color:var(--muted);white-space:nowrap}
.ss-footer kbd{font-family:var(--font-mono);font-size:10px;padding:1px 4px;border-radius:4px;
  background:var(--surface);border:1px solid var(--line-3)}


/* O girinho de "buscando", que no original vinha da fonte de ícones. */
.ss-spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid var(--line-3); border-top-color: var(--navy);
  border-radius: 50%; animation: ssGira .6s linear infinite;
}
@keyframes ssGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ss-spin { animation-duration: 2s; } }

/* Os ícones são SVG, não glifo de fonte: precisam de tamanho explícito. */
.ss-trigger-icon svg, .ss-trigger-arrow svg, .ss-item-icon svg,
.ss-search-icon svg, .ss-item-check svg, .ss-tag-remove svg { width: 15px; height: 15px; display: block; }
.ss-trigger-arrow svg { transition: transform .16s; }
.ss-trigger.ss-open .ss-trigger-arrow svg { transform: rotate(180deg); }


/* ==========================================================================
   Painel de resultado (início da gestão)

   Os blocos abaixo existem só nesta tela e na de despesas. Ficam aqui, e não
   inline na página, porque os dois temas precisam alcançá-los.
   ========================================================================== */

/* Cores das séries do gráfico e dos rankings. Oito, na ordem em que entram —
   a nona categoria repetiria a primeira, e é por isso que o resumo agrupa o
   excedente em "Outras" em vez de deixar duas fatias com a mesma cor. */
:root {
  --serie-0: #3B5BDB; --serie-1: #0E9F8E; --serie-2: #DE8A1E; --serie-3: #7C5BE8;
  --serie-4: #E1574A; --serie-5: #1F9D6B; --serie-6: #2F86C5; --serie-7: #EC5B8A;
}

/* ---------- Títulos ---------- */
.g-h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.g-h3 { margin: 0; display: block; font-size: 16px; font-weight: 700; }
.g-sub-lg { font-size: 13.5px; color: var(--ink-2); }
.g-mb { margin-bottom: 14px; }
.g-secao-tit { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.g-link { font-size: 12.5px; font-weight: 700; color: var(--navy); }
button.g-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
button.g-link:hover { text-decoration: underline; }

/* ---------- Classificação do IBS/CBS (Produtos) ---------- */
.g-rt-sug + .g-rt-sug { margin-top: 6px; }
.g-rt-aplicar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.g-rt-aplicar .g-select { max-width: 280px; }
.g-rt-resultado { margin-top: 14px; font-size: 13px; line-height: 1.5; }
.g-rt-resultado p { margin: 4px 0; }

/* ---------- Seletor de competência ---------- */
.g-periodo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.g-periodo__form { display: flex; align-items: center; gap: 8px; }
.g-periodo__form .g-select { width: auto; }

/* ---------- Cards ---------- */
.g-card--pad { padding: 18px 22px; }
.g-card__head-t { display: flex; align-items: center; gap: 11px; }
.g-card__head-t > div { display: flex; flex-direction: column; line-height: 1.2; }

/* O painel escuro é o contraponto da fileira clara: um bloco só, com o
   fechamento do mês. Ele não segue o tema — é escuro nos dois, porque o papel
   dele é ser a âncora visual da tela. */
.g-card--dark {
  background: var(--dark); color: #fff; border: none;
  border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 15px;
}
.g-dark__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.g-dark__t { display: block; font-size: 13px; font-weight: 700; }
.g-dark__s { display: block; font-size: 11px; color: #8A93A3; }
.g-dark__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.g-dark__grid > div { display: flex; flex-direction: column; gap: 2px; }
.g-dark__v { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.g-dark__l { font-size: 11px; color: #8A93A3; }

/* ---------- Chips de ícone ---------- */
.g-chip {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
}
.g-chip .ic { width: 18px; height: 18px; }
.g-chip--sm { width: 30px; height: 30px; border-radius: var(--r-sm); }
.g-chip--sm .ic { width: 16px; height: 16px; }
.g-chip--azul     { background: var(--accent-tint); color: var(--navy); }
.g-chip--verde    { background: var(--green-50);  color: var(--green); }
.g-chip--teal     { background: var(--teal-50);   color: var(--teal); }
.g-chip--ambar    { background: var(--amber-50);  color: var(--amber); }
.g-chip--vermelho { background: var(--red-50);    color: var(--red); }
.g-chip--ceu      { background: var(--blue-50);   color: var(--blue); }
.g-chip--violeta  { background: var(--violet-50); color: var(--violet); }
.g-chip--cinza    { background: var(--neutral-tint); color: var(--ink-2); }
/* Cor fixa nos dois temas: `--ink` vira claro no escuro, e o chip com
   ícone branco sumiria dentro do próprio fundo. */
.g-chip--escuro   { background: #13161D; color: #fff; }
:root[data-tema="escuro"] .g-chip--escuro { background: #2C3540; }
.g-chip--vidro    { background: rgba(110, 134, 255, .16); color: #8FA2FF; }

/* ---------- Cards de situação ---------- */
.g-status { padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.g-status__top { display: flex; align-items: center; justify-content: space-between; }
/* Zero aqui é boa notícia (nada vencido, nada cancelado): o número recua em
   vez de gritar, senão o painel parece cheio de alerta quando está tudo bem. */
.is-nulo { color: var(--muted); }

/* ---------- Gráfico ---------- */
.g-legenda { display: flex; flex-wrap: wrap; gap: 14px; }
.g-legenda__i { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.g-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }


.g-resumo-linha { display: flex; gap: 30px; flex-wrap: wrap; }
.g-resumo-linha > div { display: flex; flex-direction: column; gap: 2px; }
.t-18 { font-size: 18px; }

.g-catres__nome { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }

/* ---------- Linha dos 12 meses ---------- */
.g-spark { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.g-spark__svg { width: 100%; height: 46px; display: block; }
.g-spark__x { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }

/* ---------- Listas de números ---------- */
.g-stats { display: flex; flex-direction: column; }
.g-stat {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.g-stat:last-child { border-bottom: none; }
.g-stat__l { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.g-stat__v { font-size: 13.5px; font-weight: 700; }

/* Barra de proporção. Fica DENTRO da célula, sob o nome: uma coluna própria
   para ela roubaria largura do que é lido, e o que importa aqui é a comparação
   relativa — o valor exato já está na coluna ao lado. */
.g-barra { display: block; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 5px; }
.g-barra i { display: block; height: 100%; border-radius: 3px; background: var(--navy); }
.g-barra--fina { flex: 1; max-width: 90px; margin: 0; }
/* No card de número a coluna alinha pelo começo, e a barra encolheria até o
   próprio conteúdo (nenhum): ela ocupa a largura do card. */
.g-kpi > .g-barra { align-self: stretch; margin-top: 8px; }

.g-rank { display: flex; flex-direction: column; gap: 14px; }
.g-rank__item { display: flex; align-items: center; gap: 11px; }
.g-rank__pos {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  display: grid; place-items: center; background: var(--neutral-tint);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-2);
}
.g-rank__meio { flex: 1; min-width: 0; }
.g-rank__nome { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-rank__dir { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; line-height: 1.3; }
.g-rank__dir .mono { font-size: 13px; }

.g-caixa-linha { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; border-top: 1px solid var(--line-2); font-size: 12.5px; }

/* ---------- Indicadores ---------- */
.g-ind-card { display: flex; flex-direction: column; gap: 14px; }
.g-ind { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.g-ind__l { font-size: 12.5px; color: var(--ink-2); }
.g-ind__v { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.g-selo {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  background: var(--neutral-tint); color: var(--ink-2);
}
.g-selo--bom { background: var(--green-50); color: var(--green-ink); }
.g-selo--ruim { background: var(--red-50); color: var(--red-ink); }

/* ---------- Cascata do resultado ---------- */
.g-dre { display: flex; flex-direction: column; }
.g-dre__l {
  display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(80px, 1fr) 130px;
  align-items: center; gap: 16px;
  padding: 13px 22px; border-bottom: 1px solid var(--line-2);
}
.g-dre__l:last-child { border-bottom: none; }
.g-dre__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.g-dre__r { font-size: 13.5px; font-weight: 600; }
.g-dre__a { font-size: 11px; color: var(--muted); }
.g-dre__b { display: block; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.g-dre__b i { display: block; height: 100%; border-radius: 4px; background: var(--ink-2); }
.g-dre__v { text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; }

.g-dre__l--receita  .g-dre__b i { background: var(--navy); }
.g-dre__l--custo    .g-dre__b i { background: var(--amber); }
.g-dre__l--despesa  .g-dre__b i { background: var(--violet); }
/* As duas linhas de soma ganham fundo próprio: são conclusão, não mais um
   item da lista, e sem destaque o olho não acha onde a conta fecha. */
.g-dre__l--sub, .g-dre__l--total { background: var(--row); }
.g-dre__l--sub .g-dre__r, .g-dre__l--total .g-dre__r { font-weight: 800; }
.g-dre__l--sub .g-dre__b i { background: var(--teal); }
.g-dre__l--total .g-dre__b i { background: var(--green); }
.g-dre__l--total .g-dre__v { font-size: 17px; }
/* Mês no vermelho: a barra da linha de fecho acompanha o sinal, senão o
   verde diz "deu certo" ao lado de um número negativo. */
.g-dre__l.is-negativo .g-dre__b i { background: var(--red); }

/* ---------- Colunas ---------- */
.g-split { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 18px; align-items: start; }
.g-split--wide { grid-template-columns: minmax(0, 1fr) 360px; }
.g-col-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.g-table--sm td { padding: 9px 14px; }
/* Tabela ao lado de um formulário: sem piso de largura o navegador espreme as
   colunas até a palavra quebrar no meio, o que é pior que rolar na horizontal. */
.g-table--larga { min-width: 840px; }
/* Piso menor, para a tabela que divide a linha com um card lateral: 840px
   empurrava a última coluna para fora da vista, e ali ela é o alerta de
   ruptura de estoque — justamente o que não pode ficar escondido. */
.g-table--media { min-width: 700px; }
.g-table--larga .mono { white-space: nowrap; }

@media (max-width: 1180px) {
  .g-split, .g-split--wide { grid-template-columns: minmax(0, 1fr); }
  .g-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .g-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .g-dre__l { grid-template-columns: 1fr 110px; }
  .g-dre__b { display: none; }
}

/* ---------- Botão "i" e a janela de explicação ----------
   Um número que não se entende é um número que não se usa: "markup" e "ponto
   de equilíbrio" não são termos de quem toca um mercado. O botão fica no
   cabeçalho do card, discreto, e só quem precisa abre. */
.g-info {
  margin-left: auto; width: 22px; height: 22px; flex: none;
  border-radius: 50%; border: 1px solid var(--line-3);
  background: var(--surface); color: var(--muted);
  font: 700 11px/1 var(--font-mono); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: .14s;
}
.g-info:hover { color: var(--navy); border-color: var(--navy); background: var(--accent-tint); }

/* ---------- Modais ----------
   O padrão do VetLogy (ce-header / ce-body / ce-footer) sobre <dialog>: o
   navegador já põe o modal por cima de tudo, prende o foco nele e fecha no
   Esc; o gestao.js cuida do resto (pilha, clique fora, página sem rolar).
   Aberto, o modal é uma coluna: cabeçalho e rodapé fixos, e só o corpo rola —
   num formulário comprido o "Salvar" continua à vista. */
.g-modal {
  width: min(560px, 92vw); max-height: 88vh; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-frame);
}
.g-modal[open] { display: flex; flex-direction: column; }
.g-modal::backdrop { background: rgba(17, 21, 28, .45); }
.g-modal--sm { width: min(440px, 94vw); }
.g-modal--md { width: min(680px, 94vw); }
.g-modal--lg { width: min(880px, 95vw); }
.g-modal--xl { width: min(1100px, 96vw); }
.g-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line-2); flex: none;
}
.g-modal__head > div { display: flex; flex-direction: column; gap: 2px; }
.g-modal__x {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 0; background: transparent; color: var(--muted);
  cursor: pointer; display: grid; place-items: center;
}
.g-modal__x:hover { background: var(--row); color: var(--ink); }
.g-modal__x .ic { width: 15px; height: 15px; }
.g-modal__body {
  padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px;
  flex: 1; min-height: 0; overflow-y: auto;
}
/* O formulário é o próprio modal: envolve cabeçalho, corpo e rodapé. */
.g-modal__form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Modal de cadastro (o de data-form): corpo mais arejado, e as abas e os
   formulários de dentro empilham as seções no mesmo ritmo. */
.g-modal--form .g-modal__body { gap: 18px; padding: 20px 22px; }
.g-modal--form [data-modal-painel], .g-modal--form [data-modal-painel] > form { display: flex; flex-direction: column; gap: 18px; }
.g-modal__head > .g-modal__titulo { flex-direction: row; align-items: center; gap: 12px; }
.g-modal__titulo > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-modal__titulo strong { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.g-modal__titulo span.g-sub { font-size: 12.5px; color: var(--ink-2); }
.g-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: none;
  padding: 14px 22px; border-top: 1px solid var(--line-2); background: var(--surface);
}
.g-modal__foot > .g-help { margin-right: auto; }
.g-modal__secao { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.g-modal__secao:last-child { padding-bottom: 0; border-bottom: 0; }
.g-modal__secao-t { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
/* Abas dentro do modal (produto, cliente): logo abaixo do cabeçalho. */
.g-tabs--modal { padding: 0 20px; flex: none; }
/* A seção já traz a linha que separa; o recolhível não precisa da dele. */
.g-modal__secao > .g-detalhes { border-top: 0; padding-top: 0; margin-top: 0; }
/* Fora do card, a tabela precisa da própria moldura para não se misturar
   com os campos da seção de cima. */
.g-modal__body .g-table-wrap { border: 1px solid var(--line-2); border-radius: var(--r-md); }
.g-modal__body .g-table tr:last-child td { border-bottom: 0; }
/* No escuro o fundo da página já é escuro: o véu precisa ser mais fechado
   para o modal se destacar, senão a tabela atrás compete com o formulário. */
:root[data-tema="escuro"] .g-modal::backdrop { background: rgba(0, 0, 0, .62); }

.g-info-bloco {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--row);
}
.g-info-bloco__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.g-info-bloco__top strong { font-size: 13px; font-weight: 700; }
.g-info-bloco__agora { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.g-info-bloco p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
/* A conta aparece em monoespaçada: é fórmula, e alinhada ela se lê como tal. */
.g-info-bloco__conta {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--navy);
  background: var(--accent-tint); border-radius: 7px; padding: 4px 8px; align-self: flex-start;
}
.g-info-bloco__nota { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Gráfico de área ----------
   Sobreposto, com grade e gradiente. A escala fica fora do SVG porque o
   `preserveAspectRatio: none` estica o desenho para preencher a largura — e
   esticaria o texto junto, deixando os números deformados. */
.g-chart-wrap { overflow-x: auto; }
.g-chart {
  position: relative; min-width: 620px;
  display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto;
  gap: 0 8px;
}
.g-chart__escala {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 0 6px; text-align: right;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--label);
}
.g-chart__svg { grid-column: 2; grid-row: 1; width: 100%; height: 232px; display: block; }
.g-chart__grid { stroke: var(--line); }
.g-chart__x {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: repeat(12, 1fr); margin-top: 6px;
}
.g-chart__x span { text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-2); }

/* A dica segue o mouse e lê a coluna inteira de uma vez; o `<title>` nativo
   do SVG demora a aparecer e mostra uma série por vez. */
.g-dica {
  position: absolute; z-index: 5; pointer-events: none; top: 8px;
  display: flex; flex-direction: column; gap: 4px;
  background: #11151C; color: #fff; border-radius: 10px; padding: 9px 11px;
  font-size: 12px; box-shadow: var(--shadow-pop); white-space: nowrap;
}
.g-dica b { font-size: 11px; color: #9AA3B2; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.g-dica span { display: flex; align-items: center; gap: 6px; }
.g-dica em { font-family: var(--font-mono); font-style: normal; font-weight: 700; margin-left: auto; padding-left: 14px; }
.g-dica__cor { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.g-dica__vazio { color: #9AA3B2; }
.g-dica__guia { position: absolute; width: 1px; background: var(--line-3); pointer-events: none; z-index: 4; }

/* ---------- Linha do ranking de produtos ----------
   A miniatura é o que faz o olho achar o item sem ler: quem trabalha na loja
   conhece a embalagem antes do nome. Sem foto fica o ícone neutro, nunca uma
   imagem quebrada. */
.g-prod { display: flex; align-items: center; gap: 11px; min-width: 0; }
.g-prod__foto {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-sm);
  object-fit: cover; background: var(--neutral-tint);
}
.g-prod__foto--vazia { display: grid; place-items: center; color: var(--label); }
.g-prod__foto--vazia .ic { width: 18px; height: 18px; }
.g-prod__txt { min-width: 0; flex: 1; }

/* A pílula de estoque sai do estoque MÍNIMO do produto, não de um número
   fixo: 40 unidades é muito para um vinho e pouco para um arroz. */
.g-pill {
  display: inline-block; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 7px;
}
.g-pill--verde    { background: var(--green-50); color: var(--green-ink); }
.g-pill--ambar    { background: var(--amber-50); color: var(--amber-ink); }
.g-pill--vermelho { background: var(--red-50);   color: var(--red-ink); }

.g-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; border-top: 1px solid var(--line-2);
}
.g-pager__info { font-size: 12px; color: var(--muted); }
.g-pager__btns { display: flex; align-items: center; gap: 8px; }
.g-pager__num { font-size: 12px; color: var(--muted); min-width: 48px; text-align: center; }
.g-pager .g-btn[disabled] { opacity: .4; cursor: default; }

/* ---------- Plano e assinatura ----------
   Cartões de plano, checkout e a espera do Pix. Porte da aba Plano e do
   checkout do VetLogy, no vocabulário da gestão. */
.g-btn--block { width: 100%; justify-content: center; }
.g-nowrap { white-space: nowrap; }
.g-nowrap .g-btn + .g-btn { margin-left: 6px; }
.g-actions--fim { margin-top: 4px; }
.g-plano-alerta { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.g-plano-alerta > div { flex: 1; }
.g-plano-topo { align-items: stretch; }
.g-plano-atual { width: 340px; flex: none; }
.g-plano-atual .g-card__body { display: flex; flex-direction: column; gap: 14px; }
.g-plano-nome { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }

/* Seletor mensal/anual: dois rótulos num trilho, o escolhido em relevo. */
.g-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--neutral-tint); }
.g-seg label { cursor: pointer; }
.g-seg input { position: absolute; opacity: 0; pointer-events: none; }
.g-seg span { display: block; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.g-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }

.g-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.g-plano {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.g-plano.is-destaque { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-tint); }
.g-plano.is-atual { background: var(--row); }
.g-plano__topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-plano__topo strong { font-size: 15px; font-weight: 800; }
.g-plano__preco { display: flex; align-items: baseline; gap: 4px; color: var(--ink); }
.g-plano__preco span { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.g-plano__preco b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-plano__preco small { font-size: 12.5px; color: var(--muted); }
.g-plano__economia { font-size: 12px; font-weight: 700; color: var(--green-ink); }
.g-plano__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.g-plano__lista li { position: relative; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.g-plano__lista li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 5px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.g-plano__acao { padding-top: 4px; }

/* ---------- Tela do plano ----------
   O que aparece no lugar da tela ou da aba que o plano não libera
   (Gestao::telaDoPlano): o cadeado, o que o módulo faz, o plano que o libera
   com o preço, o que continua valendo e o caminho para contratar. É uma
   vitrine, não um erro: o tom é o do acento, não o vermelho. A versão
   compacta divide a tela com outros cards (o Início sem o financeiro). */
.g-plano-trava { display: grid; place-items: center; padding: 44px 24px; }
.g-plano-trava__corpo { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 460px; text-align: center; }
.g-plano-trava__ic {
  width: 52px; height: 52px; margin-bottom: 4px; display: grid; place-items: center;
  border-radius: 15px; background: var(--accent-tint); color: var(--navy);
}
.g-plano-trava__ic .ic { width: 24px; height: 24px; }
.g-plano-trava__t { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.g-plano-trava__d { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.g-plano-trava__preco { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }
.g-plano-trava__preco b { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.g-plano-trava__nota {
  margin: 2px 0 0; padding: 9px 12px; border-radius: var(--r);
  background: var(--neutral-tint); font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
}
.g-plano-trava .g-btn { margin-top: 6px; }
.g-plano-trava--compacto { padding: 18px 20px; place-items: stretch; }
.g-plano-trava--compacto .g-plano-trava__corpo { align-items: flex-start; max-width: none; gap: 7px; text-align: left; }
.g-plano-trava--compacto .g-plano-trava__ic { width: 34px; height: 34px; margin: 0; border-radius: 10px; }
.g-plano-trava--compacto .g-plano-trava__ic .ic { width: 18px; height: 18px; }
.g-plano-trava--compacto .g-plano-trava__t { font-size: 15px; }
.g-plano-trava--compacto .g-plano-trava__d { font-size: 12.5px; }
.g-plano-trava--compacto .g-btn { margin-top: 4px; }
/* No escuro o azul do acento fica fraco como traço sobre o tint escuro. */
:root[data-tema="escuro"] .g-plano-trava__ic { color: #8FA2FF; }

.g-checkout { width: min(520px, 94vw); }
.g-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-forma {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r); transition: .14s;
}
.g-forma input { position: absolute; opacity: 0; pointer-events: none; }
.g-forma strong { font-size: 13.5px; font-weight: 800; }
.g-forma span { font-size: 11.5px; color: var(--muted); }
.g-forma.is-active, .g-forma:has(input:checked) { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-50); }
.g-cartao { display: flex; flex-direction: column; gap: 10px; }
.g-pix { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.g-pix img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.g-pix__copia { display: flex; gap: 8px; width: 100%; }
.g-pix__copia input { flex: 1; min-width: 0; font-size: 12px; }

.g-avisos { display: flex; flex-direction: column; gap: 10px; }
.g-aviso { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: var(--r); border: 1px solid var(--line); border-left-width: 3px; }
.g-aviso--info { border-left-color: var(--blue); }
.g-aviso--alerta { border-left-color: var(--amber); }
.g-aviso--erro { border-left-color: var(--red); }
.g-aviso__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.g-aviso__top strong { font-size: 13px; font-weight: 700; }
.g-aviso__top span { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.g-aviso p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.g-aviso a { font-size: 12.5px; font-weight: 700; color: var(--navy); }

/* ---------- Adicionar da base: os produtos em cartões ----------
   A foto grande faz a loja reconhecer o produto antes de ler o nome: é a
   visão de partida, e a lista fica como opção. O cartão inteiro marca e
   desmarca, e o preço aparece embaixo quando ele está marcado. */
.g-vitrine { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; padding: 16px 20px; }
.g-vitrine__item {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; transition: border-color .14s, box-shadow .14s;
}
.g-vitrine__item:hover { border-color: var(--accent-line); }
.g-vitrine__item.is-marcado { border-color: var(--navy); box-shadow: 0 0 0 2px var(--accent-tint); }
.g-vitrine__item.is-travado, .g-vitrine__item.is-travado:hover { cursor: default; border-color: var(--line); }
.g-vitrine__foto {
  aspect-ratio: 1; display: grid; place-items: center; padding: 14px; overflow: hidden;
  background: #FFFFFF; border-bottom: 1px solid var(--line-2); border-radius: var(--r-md) var(--r-md) 0 0;
}
.g-vitrine__foto img { width: 100%; height: 100%; object-fit: contain; }
.g-vitrine__foto--vazia { background: var(--neutral-tint); color: var(--label); font-size: 12px; }
.g-vitrine__check { position: absolute; top: 10px; left: 10px; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.g-vitrine__selo { position: absolute; top: 9px; right: 9px; }
.g-vitrine__corpo { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; padding: 10px 12px 12px; }
.g-vitrine__nome {
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.g-vitrine__marca, .g-vitrine__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.g-vitrine__marca { font-size: 12.5px; }
.g-vitrine__meta { font-family: var(--font-mono); font-size: 11.5px; }
.g-vitrine__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--muted); }
.g-vitrine__rodape .g-input { width: 104px; text-align: right; }
.g-mais { padding: 14px 20px 20px; text-align: center; font-size: 12.5px; color: var(--muted); }

/* Faixa de cobrança no topo da gestão: o tom sobe conforme a régua. */
.g-faixa-cobranca { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.g-faixa-cobranca > div { flex: 1; }

/* ---------- Compras: a conferência da NF-e do fornecedor ---------- */
.g-compra { display: flex; flex-direction: column; gap: 16px; }
.g-compra > .g-grid { gap: 16px; }
.g-compra__topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.g-compra__topo .ic[data-icon="chevron"] { transform: rotate(90deg); }
.g-compra__chave { font-size: 12px; text-align: right; }
.g-compra__nota { margin-top: 12px; }
.g-compra__itens td { vertical-align: top; }
.g-compra__itens tr.is-ignorado td:not(:last-child) { opacity: .45; }
.g-compra__produto { min-width: 260px; }
.g-compra__produto small, .g-compra__produto .g-link { display: block; margin-top: 5px; }
.g-compra__fator { width: 84px; text-align: right; }
.g-compra__itens [data-custo] { white-space: nowrap; }
.g-compra__rodape { display: flex; align-items: center; justify-content: flex-end; gap: 14px; border-top: 1px solid var(--line-2); }
.g-compra [data-lancamento] .g-card__body > * + * { margin-top: 14px; }
.g-compra__parcelas .g-table { max-width: 760px; }
.g-compra__parcelas input[type="date"] { min-width: 150px; }
.g-compra__parcelas .g-input[data-valor] { width: 130px; margin-left: auto; }

/* A escolha que é uma frase com a explicação embaixo (a manifestação da NF-e). */
.g-check--bloco { align-items: flex-start; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md); }
.g-check--bloco + .g-check--bloco { margin-top: 8px; }
.g-check--bloco > span { display: flex; flex-direction: column; gap: 2px; }
.g-check--bloco:has(input:checked) { border-color: var(--accent-line); background: var(--accent-tint); }
.g-check--bloco:has(input:disabled) { opacity: .55; cursor: default; }
.g-inline-form--centro { align-items: center; justify-content: flex-end; }

/* Contas a pagar: a baixa das marcadas, e o formulário que só se lê. */
.g-pagar__lote { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 20px; background: var(--accent-tint); border-top: 1px solid var(--line-2); }
.g-pagar__lote > strong { align-self: center; margin-right: auto; font-size: 13.5px; }
.g-solto { border: 0; margin: 0; padding: 0; min-width: 0; }
.g-nowrap { white-space: nowrap; }

/* ---------- Curva ABC (Relatórios) ---------- */
.g-abc { min-width: 22px; text-align: center; }
.g-abc__corte { min-width: 0 !important; width: 84px; }
.g-abc__guardada { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g-abc__guardada > div { display: flex; flex-direction: column; gap: 3px; }
.g-abc-curva { display: grid; grid-template-columns: 44px 1fr; gap: 8px; height: 220px; }
.g-abc-curva__eixo-y { position: relative; font-size: 11px; color: var(--ink-2); }
.g-abc-curva__eixo-y span { position: absolute; right: 0; transform: translateY(-50%); }
.g-abc-curva__eixo-y span:last-child { bottom: 0; top: auto; transform: none; }
.g-abc-curva__area { position: relative; border-left: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }
.g-abc-curva__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-abc-curva__a { fill: var(--green-50); }
.g-abc-curva__b { fill: var(--amber-50); }
.g-abc-curva__c { fill: var(--neutral-tint, var(--line-2)); }
.g-abc-curva__corte { stroke: var(--ink-2); stroke-width: .3; stroke-dasharray: 1 1; vector-effect: non-scaling-stroke; }
.g-abc-curva__linha { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; }
.g-abc-curva__legenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0 52px; font-size: 12.5px; color: var(--ink-2); }
.g-abc-curva__chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.g-abc-curva__chip--a { background: var(--green-50); border: 1px solid var(--green); }
.g-abc-curva__chip--b { background: var(--amber-50); border: 1px solid var(--amber); }
.g-abc-curva__chip--c { background: var(--line-2); border: 1px solid var(--muted); }

/* ---------- Alertas ---------- */
.g-alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; margin-bottom: 8px; }
.g-alertas__nivel { margin: 22px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.g-alertas__pe { margin-top: 18px; }
.g-alerta { display: flex; flex-direction: column; padding: 16px 18px 14px; border-left: 4px solid var(--line-3); }
.g-alerta--alto { border-left-color: var(--red); }
.g-alerta--medio { border-left-color: var(--amber); }
.g-alerta--baixo { border-left-color: var(--muted); }
.g-alerta__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.g-alerta__grupo { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.g-alerta__titulo { margin: 2px 0 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.g-alerta__num { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.g-alerta__num small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.g-alerta--alto .g-alerta__num { color: var(--red-ink); }
.g-alerta__texto { margin: 8px 0 10px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.g-alerta__itens { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line-2); }
.g-alerta__itens li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.g-alerta__itens li a { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-alerta__itens li small { flex: none; max-width: 60%; text-align: right; color: var(--ink-2); }
.g-alerta__pe { margin-top: auto; display: flex; justify-content: flex-end; }
.g-alertas-home { padding: 14px 18px; margin-bottom: 18px; }
.g-alertas-home__cab { display: flex; align-items: center; gap: 12px; }
.g-alertas-home__cab > div { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.g-alertas-home__lista { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.g-alertas-home__item { display: flex; justify-content: space-between; gap: 10px; padding-left: 10px; border-left: 3px solid var(--muted); font-size: 13px; }
.g-alertas-home__item--alto { border-left-color: var(--red); }
.g-alertas-home__item--medio { border-left-color: var(--amber); }
.g-alertas-home__item a { font-weight: 600; }
.g-alertas-home__item span { color: var(--ink-2); white-space: nowrap; }
@media (max-width: 720px) { .g-alertas { grid-template-columns: 1fr; } }

/* O campo com a unidade ao lado (dias, %, horas). */
.g-campo-unidade { display: flex; align-items: center; gap: 8px; }
.g-campo-unidade .g-input { max-width: 110px; }
.g-campo-unidade span { font-size: 13px; color: var(--ink-2); }

/* ---------- Preços ---------- */
.g-filters--solto { padding: 0; margin-bottom: 18px; }
.g-card__body > .g-modal__secao-t { margin-bottom: 10px; }
.g-actions--inicio { justify-content: flex-start; margin: 4px 0 16px; }
.g-precos__categorias { margin-top: 16px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.g-precos__categorias thead th { position: sticky; top: 0; z-index: 1; }
.g-table td.g-precos__sub { padding-left: 30px; color: var(--ink-2); }
.g-campo-unidade--fim { justify-content: flex-end; }
.g-campo-unidade--fim .g-input { max-width: 90px; }
.g-preco-conta { margin-top: -4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.g-preco-conta.is-ruim { color: var(--red-ink); font-weight: 700; }
.g-etiquetas__origem { display: flex; flex-direction: column; margin-bottom: 18px; }
.g-etiquetas__origem .g-check--bloco { cursor: default; }
.g-etiquetas__origem .g-check--bloco label { cursor: pointer; }
.g-etiquetas__origem .g-help { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.g-etiquetas__data { width: auto; }
.g-etiquetas__escolha { display: block; max-width: 440px; margin-top: 6px; }
.g-etiquetas__lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.g-etiquetas__lista:empty { display: none; }
.g-etiquetas__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: var(--accent-tint); color: var(--navy-700); font-size: 12.5px; font-weight: 600; }
.g-etiquetas__chip button { padding: 0 6px; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.g-lista-num { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.g-lista-num :is(b, code) { color: var(--ink); }

/* ---------- Financeiro ---------- */
.g-flc__tipos { margin-bottom: 14px; }
.g-flc__tipos .g-check--bloco + .g-check--bloco { margin-top: 0; }
.g-receb { position: relative; display: inline-block; }
.g-receb > summary { list-style: none; }
.g-receb > summary::-webkit-details-marker { display: none; }
.g-receb__form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; flex-direction: column; gap: 8px; min-width: 240px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); text-align: left; }
.g-receb__form .g-label { display: flex; flex-direction: column; gap: 4px; }
.g-receb__lote { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 20px 14px; font-size: 13px; }
.g-receb__lote .g-input { width: auto; }
.g-fluxo__conta { display: flex; flex-direction: column; align-items: flex-end; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 12px; color: var(--ink-2); text-decoration: none; }
.g-fluxo__conta b { font-size: 13.5px; color: var(--ink); }
.g-fluxo__conta.is-ativa { border-color: var(--accent-line); background: var(--accent-tint); }
.g-fluxo__svg { display: block; width: 100%; height: 220px; }
.g-fluxo__real, .g-fluxo__prev { fill: none; stroke: var(--navy); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.g-fluxo__prev { stroke-dasharray: 6 5; opacity: .8; }
.g-fluxo__hoje { stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.g-fluxo__zero { stroke: var(--red); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.g-fluxo__eixo { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); }
.g-fluxo__legenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--ink-2); }
.g-fluxo__legenda .is-real::before, .g-fluxo__legenda .is-prev::before { content: ''; display: inline-block; width: 22px; margin: 0 6px 3px 0; border-top: 2.5px solid var(--navy); vertical-align: middle; }
.g-fluxo__legenda .is-prev::before { border-top-style: dashed; }
.g-table tr.g-fluxo__neg td { background: var(--red-50); }
.g-fluxo__itens summary { cursor: pointer; font-size: 12.5px; color: var(--navy); font-weight: 600; }
.g-fluxo__itens ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.g-fluxo__itens li { display: flex; justify-content: space-between; gap: 12px; }
.g-dre-tab .g-table td:first-child { white-space: nowrap; }
.g-dre-tab .g-table td { padding-top: 7px; padding-bottom: 7px; }
.g-dre-tab .g-table th, .g-dre-tab .g-table td.mono { padding-left: 10px; padding-right: 10px; }
.g-dre-tab .g-table td.mono { font-size: 12.5px; white-space: nowrap; }
/* O ano inteiro não cabe na largura: a coluna dos rótulos fica presa na rolagem lateral, como numa planilha. */
.g-dre-tab .g-table th:first-child, .g-dre-tab .g-table td:first-child { position: sticky; left: 0; background: var(--surface); box-shadow: inset -1px 0 0 var(--line-2); }
.g-dre-tab .g-table th:first-child { z-index: 2; background: var(--surface-2); }
.g-dre-tab .g-table tbody tr:hover td:first-child { background: var(--row); }
.g-dre-tab .g-table tr.g-dre-tab__total td:first-child { background: var(--accent-tint); }
.g-dre-tab__titulo td { font-weight: 700; }
.g-dre-tab__total td { font-weight: 800; background: var(--accent-tint); color: var(--navy-700); }
.g-dre-tab__filha td:first-child { padding-left: 34px; color: var(--ink-2); }
.g-dre-tab__fora td { font-style: italic; color: var(--ink-2); }
.g-dre-tab__margem td { font-size: 12px; color: var(--ink-2); }
.g-dre-tab__notas { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.g-dre-tab__notas p { margin: 0; }
.g-dre-tab sup { color: var(--amber-ink); font-weight: 800; cursor: help; }
.g-conc__contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; }
.g-conc__contas .g-kpi { text-decoration: none; color: inherit; }
.g-conc__contas .g-kpi.is-ativa { border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-line) inset; }
.g-conc__import { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.g-conc__import .g-input[type=file] { max-width: 360px; }
.g-conc__linhas { display: flex; flex-direction: column; }
.g-conc__linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px 18px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line-2); }
.g-conc__linha.is-conciliado { background: var(--green-50); }
.g-conc__linha.is-ignorado { opacity: .6; }
.g-conc__banco { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.g-conc__data { font-size: 12.5px; color: var(--ink-2); }
.g-conc__desc { display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.g-conc__desc small { font-weight: 500; font-size: 11.5px; }
.g-conc__valor { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; }
.g-conc__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.g-conc__sug { max-width: 100%; white-space: normal; text-align: left; }
.g-conc__ligado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.g-conc__mais { position: relative; }
.g-conc__mais > summary { list-style: none; }
.g-conc__mais > summary::-webkit-details-marker { display: none; }
.g-conc__mais[open] { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.g-conc__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.g-conc__form .g-label { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 900px) { .g-conc__linha { grid-template-columns: 1fr; } .g-conc__acoes { justify-content: flex-start; } }

/* ---------- Delivery ---------- */
.g-quadro__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; }
.g-quadro__filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.g-quadro__loja, .g-quadro__loja-sel { display: flex; align-items: center; gap: 8px; }
.g-quadro__loja-sel { margin-bottom: 14px; }
.g-quadro__vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.g-quadro__ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.g-quadro__vivo.is-parado .g-quadro__ponto { background: var(--amber); animation: dlPulsa 1.4s ease-in-out infinite; }
/* Cinco colunas lado a lado; na tela estreita o quadro rola de lado, como os quadros de pedido do mercado. */
.g-quadro { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.g-quadro__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: var(--r-lg); background: var(--neutral-tint); }
.g-quadro__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 4px; font-size: 13px; font-weight: 700; }
.g-quadro__conta { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface); font-size: 11.5px; text-align: center; color: var(--ink-2); }
.g-quadro__conta.is-alerta { background: var(--amber); color: #fff; }
.g-quadro__vazio { padding: 16px 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.g-pedido { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .14s, box-shadow .14s; }
.g-pedido:hover, .g-pedido:focus-visible { border-color: var(--accent-line); box-shadow: var(--shadow-pop); outline: none; }
.g-pedido.is-novo { border-color: var(--amber); }
.g-pedido.is-chegou { animation: dlChegou 1.2s ease-out 3; }
.g-pedido.is-atrasado .g-pedido__tempo { color: var(--red-ink); font-weight: 700; }
.g-pedido.is-off { opacity: .6; }
.g-pedido__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.g-pedido__num { font-weight: 800; font-size: 14px; }
.g-pedido__tempo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.g-pedido__tempo .ic { width: 13px; height: 13px; }
.g-pedido__cli { overflow: hidden; font-weight: 600; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
.g-pedido__info { overflow: hidden; font-size: 12px; color: var(--ink-2); white-space: nowrap; text-overflow: ellipsis; }
.g-pedido__rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-pedido__total { font-family: var(--font-mono); font-size: 13px; font-weight: 700; white-space: nowrap; }
@keyframes dlChegou { 0% { box-shadow: 0 0 0 0 rgba(222, 138, 30, .55); } 100% { box-shadow: 0 0 0 10px rgba(222, 138, 30, 0); } }
@keyframes dlPulsa { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .g-pedido.is-chegou, .g-quadro__vivo.is-parado .g-quadro__ponto { animation: none; } }
.g-pedido-modal__end { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 13.5px; }
.g-pedido-modal__end > .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--navy); }
.g-pedido-modal__end > span { flex: 1; }
.g-pedido-modal__obs { margin: 10px 0 0; font-size: 13.5px; }
.g-pedido-modal__acoes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.g-pedido-modal__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.g-pedido-modal__link > a:first-child { min-width: 0; overflow-wrap: anywhere; font-weight: 600; color: var(--navy); }
.g-pedido-modal__acoes .g-conc__form { flex-basis: 100%; }
.g-pedido-modal__tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 22px; }
.g-pedido-modal__tipo .g-check + .g-check { margin-top: 0; }
.g-pedido-modal__pago { display: flex; align-items: center; padding-top: 22px; }
.g-pedido-modal__busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 10px; }
.g-pedido-modal__itens td .g-input--sm { margin-top: 4px; max-width: 320px; }
.g-pedido-modal__sep td .g-input { width: 110px; }
.g-pedido-modal__tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.g-pedido-modal__tempo li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.g-pedido-modal__tempo li small { display: block; margin-top: 2px; }
.g-horarios { display: flex; flex-direction: column; gap: 8px; }
.g-horarios__dia { display: grid; grid-template-columns: 120px 110px auto 110px; align-items: center; gap: 8px; }
.g-horarios__dia .g-check { margin: 0; }
.g-areas { align-items: start; }
.g-areas__regras { display: flex; flex-direction: column; gap: 10px; }
.g-catalogo__no-ar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 18px 20px; }
.g-catalogo__qr { flex: none; width: 132px; height: 132px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.g-catalogo__qr svg { display: block; width: 100%; height: 100%; }
.g-catalogo__link { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.g-catalogo__url { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.g-catalogo__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.g-catalogo__slug { display: flex; align-items: center; gap: 4px; }
.g-catalogo__slug .muted { white-space: nowrap; font-size: 12.5px; }
.g-catalogo__ocultas { margin-top: 12px; }
.g-catalogo__ocultas > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.g-catalogo__cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; max-height: 280px; margin: 10px 0 6px; overflow: auto; }
.g-catalogo__cats .g-check { margin: 0; }
.g-acerto > summary { cursor: pointer; }
.g-acerto__lista { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; font-weight: 500; }
.g-acerto__nota { padding: 0 20px 16px; }
@media (max-width: 700px) { .g-horarios__dia { grid-template-columns: 1fr 1fr; } .g-pedido-modal__tempo li { grid-template-columns: 1fr; gap: 2px; } }

/* A NF-e modelo 55 (Notas fiscais → NF-e) */
.g-nfe__itens td .g-input--sm { width: 110px; margin-left: auto; }
.g-nfe__itens td:first-child small { margin-left: 4px; }
.g-nfe__totais { margin-top: 14px; }
.g-nfe__total { text-align: right; font-size: 14px; }
.g-nfe__total strong { font-family: var(--font-mono); font-size: 16px; }
.g-nfe__texto { margin: 8px 0 0; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.g-nfe__erros { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }
.g-nfe__busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin-bottom: 10px; }
.g-nfe__tempo { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.g-nfe__tempo li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.g-nfe__tempo li small { display: block; margin-top: 2px; }
.g-nfe__ops td .g-input { min-width: 64px; }
.g-nfe__ops td .g-input--nat { min-width: 220px; }
@media (max-width: 700px) { .g-nfe__tempo li { grid-template-columns: 1fr; gap: 2px; } }

/* O inventário por coletor (Estoque → Inventários) */
.g-inv__coletor { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; padding: 18px 20px; }
.g-inv__qr { flex: none; width: 128px; height: 128px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.g-inv__qr svg { display: block; width: 100%; height: 100%; }
.g-inv__coletor > div:last-child { flex: 1; min-width: 240px; }
.g-inv__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.g-inv__link a { font-family: var(--font-mono); font-weight: 700; color: var(--navy); overflow-wrap: anywhere; }
.g-inv__itens tr.is-recontar td { background: var(--amber-50); }
.g-inv__lotes { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-2); }

/* Validade e lote: o topo do modal do lote, o estoque sem lote dito e o lote vencido nas listas */
.g-lote__topo { display: flex; align-items: flex-start; gap: 18px; }
.g-lote__topo .g-kv { flex: 1; min-width: 0; }
.g-lote__sem td { background: var(--app); }
.g-validades tr.is-vencido td { background: var(--red-50); }
.g-compra__lotes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.g-compra__lotes > span { padding: 1px 7px; border-radius: 999px; background: var(--app); border: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; }
.g-compra__lotes-tr > td { padding-top: 0; }
.g-compra__lotes-ed { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 760px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--app); }
.g-compra__lotes-ed [data-lotes-linhas] { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.g-compra__lote { display: grid; grid-template-columns: minmax(120px, 1.4fr) repeat(2, minmax(150px, 1fr)) minmax(90px, .8fr) auto; gap: 6px; align-items: center; }

/* A prévia da produção: o resumo, o aviso da falta e as duas tabelas, com o rótulo de cada uma */
.g-producao__previa > * + * { margin-top: 14px; }
.g-producao__previa .g-label { margin-bottom: 6px; }

/* O coletor do inventário (estoque/coletor/<id>): a página do celular de quem conta */
.g-col { min-height: 100vh; background: var(--app); }
.g-col__topo { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--navy); color: #fff; }
.g-col__topo > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-col__topo strong { font-size: 16px; }
.g-col__topo span { font-size: 12.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-col__progresso { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.g-col__corpo { max-width: 640px; margin: 0 auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 12px; }
.g-col__form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.g-col__linha { display: flex; gap: 10px; align-items: flex-end; }
.g-col__codigo { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 18px; padding: 14px; }
.g-col__camera { flex: none; width: 52px; height: 52px; padding: 0; justify-content: center; }
.g-col__camera .ic { width: 24px; height: 24px; }
.g-col__qtd { width: 120px; }
.g-col__dica { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); }
/* 16 px no mínimo: abaixo disso o Safari do iPhone aproxima a tela ao tocar no campo. */
.g-col .g-input { font-size: 16px; }
.g-col .g-input.g-col__codigo { font-size: 18px; }
.g-col__contar { padding: 15px; font-size: 16px; }
.g-col__video { width: 100%; max-height: 260px; border-radius: var(--r-md); background: #000; object-fit: cover; }
.g-col__retorno { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.g-col__retorno strong { font-size: 16px; }
.g-col__retorno small { color: var(--ink-2); font-size: 13px; }
.g-col__retorno.is-ok { border-color: #CCE9DB; background: var(--green-50); }
.g-col__retorno.is-aviso { border-color: #F0E0BF; background: var(--amber-50); }
.g-col__retorno.is-erro { border-color: #F6D5D0; background: var(--red-50); }
.g-col__mais { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--green-ink); }
.g-col__fila { padding: 9px 12px; border-radius: var(--r-md); background: var(--amber-50); color: var(--amber-ink); font-size: 13px; font-weight: 600; }
.g-col__titulo { margin: 8px 0 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.g-col__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.g-col__lista li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }
.g-col__lista li:first-child { border-top: 0; }
.g-col__lista li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-col__lista li strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-col__lista li small { color: var(--ink-2); font-size: 12px; }
.g-col__lista li .mono { font-weight: 700; }
.g-col__lista li.is-off { opacity: .5; }
.g-col__lista li.is-off strong { text-decoration: line-through; }