/* TrackPDV — painel da plataforma. Mesma base da gestão com acento próprio. */

body.is-admin {
  --navy: #4B2E83;
  --navy-700: #6A45B0;
  --focus: #7C5DC7;
  --focus-50: #F0EAFA;
  --ground: #F2EEF8;
  --top: #2A1A4A;
  /* Os tints do acento são literais na gestão; aqui o acento é roxo, então
     eles precisam ser redefinidos junto — senão o item ativo e os selos
     ficariam com o fundo azul da gestão sob texto roxo. */
  --accent-tint: #F0EAFA;
  --accent-line: #DCCDF2;
  --serie-0: #6A45B0;
}
body.is-admin .g-side__quad { background: linear-gradient(150deg, #4B2E83, #7C5DC7); box-shadow: 0 6px 16px -4px rgba(75, 46, 131, .5); }
body.is-admin .g-side__quad .ic { width: 22px; height: 22px; }
body.is-admin .g-menu a.is-active .g-menu__ic { background: rgba(106, 69, 176, .14); }
body.is-admin .g-badge--navy { background: #F0EAFA; color: #4B2E83; }

:root[data-tema="escuro"] body.is-admin { --accent-tint: #241B38; --accent-line: #3C2C5C; }

/* Cartão de empresa na listagem em grade */
.a-empresa { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.a-empresa__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.a-empresa__nome { font-weight: 700; font-size: 17px; line-height: 1.2; }
.a-empresa__slug { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.a-empresa__uso { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--ink-2); }
.a-empresa__uso b { font-variant-numeric: tabular-nums; }

/* Barra de uso contra o limite do plano */
.a-limite { display: flex; flex-direction: column; gap: 4px; }
.a-limite__topo { display: flex; justify-content: space-between; font-size: 13px; }
.a-limite__barra { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.a-limite__fill { height: 100%; background: var(--navy); }
.a-limite__fill.is-cheio { background: var(--amber); }
.a-limite__fill.is-estourado { background: var(--red); }

/* Planos: um cartão por plano, como o editor do VetLogy */
.a-planos__acoes { display: flex; align-items: center; gap: 10px; }
.a-planos__acoes .g-select { width: auto; min-width: 170px; }
.a-planos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.a-plano { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; transition: box-shadow .16s; }
.a-plano:hover { box-shadow: var(--shadow-pop); }
.a-plano.is-destaque { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.a-plano.is-destaque:hover { box-shadow: inset 0 0 0 1px var(--navy), var(--shadow-pop); }
.a-plano.is-off { background: var(--surface-2); }
.a-plano.is-off .a-plano__preco { color: var(--ink-2); }
.a-plano__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.a-plano__nome { font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.a-plano__slug { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.a-plano__selos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.a-plano__desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.a-plano__preco { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.a-plano__preco small { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.a-plano__sub { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.a-plano__uso { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.a-plano__uso .ic { width: 15px; height: 15px; }
.a-plano__limites { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.a-plano__limites > div { padding: 9px 4px; border-radius: var(--r-sm); background: var(--surface-2); text-align: center; }
.a-plano.is-off .a-plano__limites > div { background: var(--surface); }
.a-plano__limites strong { display: block; font-family: var(--font-mono); font-size: 17px; font-weight: 700; }
.a-plano__limites span { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.a-plano__modulos { display: flex; flex-wrap: wrap; gap: 5px; }
.a-plano__acoes { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.a-plano__acoes .g-btn--ghost-danger { margin-left: auto; }
.a-plano__exibe { align-items: end; }
.a-plano__exibe .g-check { min-height: 42px; }

/* Etiqueta de módulo: ligado em verde, desligado apagado. O "em breve" leva
   o contorno tracejado — está no plano, mas ainda não faz nada. */
.a-mod-tag { display: inline-block; padding: 3px 9px; border: 1px solid transparent; border-radius: 999px; background: var(--neutral-tint); color: var(--muted); font-size: 11.5px; font-weight: 600; }
.a-mod-tag.is-on { background: var(--green-50); color: var(--green-ink); }
.a-mod-tag.is-breve { border-style: dashed; border-color: currentColor; }

/* Grade de módulos do editor: um interruptor por módulo, agrupado como no Catalogo */
.a-modgrupo { display: flex; flex-direction: column; gap: 8px; }
.a-modgrupo__t { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.a-modgrade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.g-check.a-modulo { align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line-3); border-radius: var(--r); transition: background .14s, border-color .14s; }
.g-check.a-modulo:hover { background: var(--row); }
.g-check.a-modulo:has(input:checked) { border-color: var(--accent-line); background: var(--accent-tint); }
.g-check.a-modulo input { margin-top: 4px; }
.a-modulo__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.g-check.a-modulo:has(input:checked) .a-modulo__ic { background: var(--surface); color: var(--navy); }
.a-modulo__ic .ic { width: 15px; height: 15px; }
.a-modulo__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-modulo__txt strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.a-modulo__txt > span { font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }

/* O que todo plano tem: só leitura, o painel não desliga */
.a-base { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.a-base li { display: flex; gap: 9px; font-size: 13px; }
.a-base li > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--green); }
.a-base strong { display: block; font-weight: 700; }
.a-base li span:not(.ic) { font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* Módulos do plano na ficha da empresa */
.a-plano-da-empresa { display: flex; flex-direction: column; gap: 14px; }

/* Link dentro de um aviso (o caminho para resolver o que ele diz) */
body.is-admin .g-callout a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Guia de publicação (Programa do caixa → Como publicar): texto, teclas e
   comandos para copiar. O comando rola dentro da caixa dele: quebrado em
   duas linhas, o PowerShell colado receberia dois comandos. */
.a-guia { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.a-guia p, .a-guia ul { margin: 0; }
.a-guia ul { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; }
.a-guia strong { color: var(--ink); }
.a-guia a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.a-guia code { padding: 1px 5px; border-radius: 5px; background: var(--surface-2); font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.a-guia kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--line-3); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; line-height: 1.6; color: var(--ink); text-align: center; }
.a-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.a-cmd pre { flex: 1; min-width: 0; margin: 0; overflow-x: auto; font: 600 12.5px/1.5 var(--font-mono); color: var(--ink); }
.a-cmd .g-btn { flex: none; }

/* Base de produtos: a busca num site e a base. A foto de outro site vem no
   tamanho que ele tiver: a caixa fixa impede a linha de crescer com ela. */
.a-coleta__site { flex: 1 1 280px; }
.a-coleta__termo { flex: 1 1 220px; }
.a-coleta td { vertical-align: middle; }
.a-coleta a.b { color: var(--ink); text-decoration: none; }
.a-coleta a.b:hover { text-decoration: underline; text-underline-offset: 2px; }
.a-foto { display: block; width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line-3); border-radius: 8px; background: #fff; }
.a-foto--vazia { background: var(--surface-2); }
.a-preco { white-space: nowrap; }
.a-puxar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.a-puxar__campos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.a-puxar__campos .g-label { margin: 0; }
.a-puxar__acoes { display: flex; align-items: center; gap: 12px; }
.a-puxar__acoes .g-label { margin: 0; white-space: nowrap; }
.a-puxar__nota { flex-basis: 100%; margin: 0; }
.a-puxar__pular { white-space: nowrap; }
/* O produto que o próximo passo do "Gravar tudo" grava. */
.a-coleta tr.is-atual td { background: var(--accent-tint); }

/* O "Gravar tudo": onde está, as barras (a página e a parte), o que já fez e o
   que deu errado. Os números não dançam de largura enquanto contam. */
.a-grav__cab { display: inline-flex; align-items: center; gap: 10px; }
.a-grav__corpo { display: flex; flex-direction: column; gap: 12px; }
.a-grav__onde { font-size: 14px; font-weight: 600; color: var(--ink); }
.a-grav__barras { display: grid; gap: 8px; }
.a-grav__barra { display: grid; grid-template-columns: 84px minmax(0, 1fr) 130px; align-items: center; gap: 10px; }
.a-grav__barra .g-help { margin: 0; }
.a-grav__trilho { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.a-grav__trilho span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--navy); transition: width .3s; }
.a-grav__num { font-size: 12px; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
.a-grav__conta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.a-grav__conta b { color: var(--ink); }
.a-grav__msg { margin: 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--accent-tint); color: var(--ink); font-size: 13px; font-weight: 600; }
.a-grav__msg.is-aviso { background: var(--amber-50); color: var(--amber-ink); }
.a-grav__ocorrencias summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--amber-ink); }
.a-grav__ocorrencias ul { max-height: 240px; overflow: auto; margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.a-grav__ocorrencias li { padding: 2px 0; }
.a-grav__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .a-grav__barra { grid-template-columns: 1fr; gap: 4px; }
  .a-grav__num { text-align: left; }
}

/* A árvore de categorias do site: o triângulo abre, a caixa marca. Marcar
   uma de cima trava as de dentro, que ela já traz. */
.a-arvore { max-height: 440px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line-3); border-radius: var(--r); }
.a-arvore ul { margin: 0; padding: 0; list-style: none; }
.a-arvore ul ul { padding-left: 24px; }
.a-arvore li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 1px 0; }
.a-arvore li > ul { flex-basis: 100%; }
.a-arvore label { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px; font-size: 13.5px; cursor: pointer; }
.a-arvore label:has(input:disabled) { opacity: .6; cursor: default; }
.a-arvore__abre { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 12px; cursor: pointer; }
.a-arvore__abre:hover { background: var(--surface-2); }
.a-arvore__folha { width: 24px; }
.a-arvore__nota { margin: 0 0 10px; }

/* As nossas categorias: um bloco por departamento, cada linha um campo que
   salva ao sair. A contagem fica entre o nome e o excluir, alinhada. */
.a-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.a-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.a-cats__dep { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); }
.a-cats__linha { display: grid; grid-template-columns: minmax(0, 1fr) 40px auto; align-items: center; gap: 8px; }
.a-cats__linha > .muted { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.a-cats__linha.is-dep .g-input { font-weight: 700; }
form.a-cats__linha { grid-template-columns: minmax(0, 1fr) auto; }
.a-cats__novo { flex-direction: row; align-items: center; background: none; border-style: dashed; }
.a-cats__novo .g-input { flex: 1; }
.a-cats__ajuda { flex: 1 1 360px; margin: 0; }
.a-mapa td { vertical-align: middle; }
.a-mapa .g-select { min-width: 260px; }
.a-mapa tr.is-ligada td { background: var(--accent-tint); }

@media (max-width: 720px) {
  .a-modgrade, .a-base { grid-template-columns: minmax(0, 1fr); }
  .a-plano__limites { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Apagar dados (ficha da empresa): cada grupo com a contagem do que sai, e embaixo o que ele leva. */
.a-dados { margin: 16px 0 10px; row-gap: 18px; }
.a-dados .g-badge { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 760px) {
  .a-dados { grid-template-columns: minmax(0, 1fr); }
}

/* Instalação e login do painel */
.a-code { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing: .08em; padding: 8px 12px; border-radius: 6px; background: var(--surface-2); display: inline-block; }