:root {
  color-scheme: light;
  --fundo: #f3f5f9;
  --fundo-2: #ffffff;
  --fundo-3: #eef1f7;
  --borda: #dce2ed;
  --texto: #1b2434;
  /* Tom do meio, entre o texto e o texto fraco: a coluna Servicos do dia a dia
     precisa ficar abaixo da Vendas e acima da Compras, e nao ha cor para isso
     sem virar semaforo. */
  --texto-2: #3c4658;
  --texto-fraco: #5f6b83;
  --acento: #2f6fe4;
  --verde: #12a05c;
  --amarelo: #c07f05;
  --vermelho: #d43535;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 16px rgba(16, 24, 40, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 15px; letter-spacing: .2px; }
hr { border: 0; border-top: 1px solid var(--borda); margin: 16px 0; }
a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- topo --- */
.topo {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 20px;
  background: var(--fundo-2);
  border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20;
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca-icone { font-size: 22px; }
.marca strong { display: block; font-size: 14px; }
.marca small { color: var(--texto-fraco); font-size: 11px; }
/* Logo do sistema (Utilitario > Alteracoes Sistema): a medida vem no `style` da
   propria imagem; `object-fit` so' age quando as DUAS foram dadas. */
.marca-logo { display: block; max-width: 600px; object-fit: fill; }
.marca-com-logo small { display: block; margin-top: 2px; }

.menu { display: flex; gap: 4px; }
.menu a {
  padding: 7px 14px; border-radius: 8px; color: var(--texto-fraco);
  font-weight: 500; transition: .15s;
}
.menu a:hover { background: var(--fundo-3); color: var(--texto); }
.menu a.ativo { background: var(--acento); color: #fff; }

.topo-acoes { margin-left: auto; display: flex; align-items: flex-end; gap: 10px; }

/* -------------------------------------------------------------- campos --- */
.campo-inline { display: flex; flex-direction: column; gap: 4px; }
.campo-inline > span, .campo > span, .rotulo-campo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-fraco);
}
select, input, textarea {
  background: var(--fundo-3); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px;
  padding: 7px 10px; font: inherit; min-width: 140px;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
input[type=file] { padding: 6px; }
/* A regra acima daria padding/borda/min-width tambem as caixas de marcacao. */
input[type=checkbox] {
  min-width: auto; width: 16px; height: 16px; flex: none;
  padding: 0; border: 0; background: none; accent-color: var(--acento);
}
textarea { resize: vertical; }

.botao {
  background: var(--acento); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-block;
}
.botao:hover { filter: brightness(1.1); }
.botao.secundario { background: var(--fundo-3); border: 1px solid var(--borda); color: var(--texto); }
.botao.perigo { background: transparent; border: 1px solid var(--vermelho); color: var(--vermelho); }
.botao.pequeno { padding: 4px 10px; font-size: 12px; }

.opcao { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.opcao input { min-width: auto; }
.dica { color: var(--texto-fraco); font-size: 12px; }

/* ------------------------------------------------------------- layout ---- */
.conteudo { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.filtros {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px;
}
.espacador { flex: 1; }

.regulamento {
  background: rgba(47, 111, 228, .08); border-left: 3px solid var(--acento);
  border-radius: 8px; padding: 10px 14px; margin: 0; color: var(--texto);
}

.cartao {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra);
  min-width: 0;
}
.cartao > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.cartao canvas { max-height: 280px; }
.cartao.alto canvas { max-height: 300px; }

.painel-duplo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 16px;
}

/* ------------------------------------------------------------- cartoes --- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.kpi {
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px;
  min-width: 0;
}
.kpi-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-fraco); }
.kpi-valor {
  font-size: 22px; font-weight: 700; margin-top: 6px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi-nota { font-size: 12px; color: var(--texto-fraco); margin-top: 4px; overflow-wrap: anywhere; }
/* Nota que guarda detalhe no `title` (as colocacoes do podio, uma por
   linha). O tracejado e' o unico sinal de que ha o que ver ali: sem ele
   ninguem para o mouse em cima de um texto cinza de 12px. */
.kpi-dica {
  border-bottom: 1px dotted currentColor; cursor: help;
}
.kpi-dica:hover, .kpi-dica:focus-visible { color: var(--texto); }
.kpi.destaque { border-color: var(--acento); }
.kpi.ok .kpi-valor { color: var(--verde); }
.kpi.alerta .kpi-valor { color: var(--amarelo); }
.kpi.ruim .kpi-valor { color: var(--vermelho); }

/* ------------------------------------------------------ tela inicial ----- */
/* Cartoes maiores que os do painel: aqui cada card e' uma loja inteira, e o
   numero do mes e' o que se le de longe. */
.inicio-cabecalho { text-align: center; padding: 8px 0 0; }
.inicio-cabecalho h1 {
  margin: 0; font-size: 28px; letter-spacing: -.4px; color: var(--texto);
}
.inicio-periodo { margin: 6px 0 0; color: var(--texto-fraco); font-size: 13px; }

/* Faixa de tres blocos iguais — mes, hoje, projecao.
   Era uma linha com tres tamanhos de letra diferentes e o "hoje" encolhido a
   direita: quem passa o olho de longe achava primeiro o numero errado. Agora
   os tres tem o mesmo peso, separados por linha vertical, e a compra vem
   rotulada embaixo de cada venda. */
.inicio-total {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0; border-color: var(--acento); overflow: hidden;
}
.inicio-bloco {
  padding: 18px 22px; border-left: 1px solid var(--borda); min-width: 0;
  text-align: center;
}
.inicio-bloco:first-child { border-left: 0; }
.inicio-bloco .kpi-rotulo { font-size: 12px; letter-spacing: .8px; }
.inicio-total-valor {
  display: block; margin-top: 6px; font-size: 34px; font-weight: 700;
  color: var(--acento); font-variant-numeric: tabular-nums;
  line-height: 1.1; overflow-wrap: anywhere;
}

/* Venda e compra lado a lado, cada uma com o proprio titulo. Dois numeros
   deste tamanho nao cabem em um terco da faixa, entao o par usa corpo menor
   que o numero solto da projecao — continua legivel de longe e para de
   quebrar linha no meio do valor. */
.inicio-par {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 14px; margin-top: 8px;
}
.inicio-lado { min-width: 0; }
.inicio-sub {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-fraco);
}
.inicio-par .inicio-total-valor { margin-top: 2px; font-size: 24px; }
/* A compra e' contraponto, nao concorrente: mesmo tamanho, cor apagada. */
.inicio-par .inicio-total-valor.compra { color: var(--texto); opacity: .72; }
.inicio-barra { color: var(--borda); font-size: 26px; line-height: 1.2; }
/* "Hoje" e' o numero que ainda muda ate a noite: fundo tenue e barra no topo
   para achar sem procurar. */
.inicio-bloco.destaque { background: rgba(47, 111, 228, .06); box-shadow: inset 0 3px 0 var(--acento); }

.inicio-compra {
  display: block; margin-top: 8px; font-size: 15px; font-weight: 600;
  color: var(--texto-fraco); font-variant-numeric: tabular-nums;
}
.etiqueta-compra {
  display: inline-block; margin-right: 6px; padding: 1px 7px;
  border-radius: 999px; background: var(--fundo-3); color: var(--texto-fraco);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  vertical-align: 2px;
}

.inicio-total-nota { display: block; margin-top: 8px; font-size: 12px; }

@media (max-width: 860px) {
  .inicio-total { grid-template-columns: 1fr; }
  .inicio-bloco { border-left: 0; border-top: 1px solid var(--borda); }
  .inicio-bloco:first-child { border-top: 0; }
}

/* ------------------------------------------------ dia a dia por unidade ---
   Uma unidade a cada sete colunas — as cinco medidas mais as duas de
   resultado (Venda liq. e Compra liq.) — e o nome dela
   centralizado por cima. Sao trinta e tantas colunas de dinheiro: o que mantem
   isso legivel nao e' cor, e' hierarquia —

   - os valores vao **com centavos**: a tabela e' conferida contra o relatorio
     de apuracao, e numero arredondado nao se confere;
   - a coluna do Dia fica **presa** a esquerda, senao ao rolar para a setima
     loja ninguem sabe mais de que dia e' a linha;
   - um traco vertical abre cada unidade, para o olho nao escorregar de um
     bloco para o outro;
   - as colunas tem pesos diferentes: venda em preto, servico um tom abaixo,
     compra em cinza e as duas devolucoes em vermelho. Quem passa o olho le a
     venda primeiro e so' depois o que anda contra;
   - valor zerado vira travessao apagado, e nao "0" — dia sem servico nao pode
     competir com dia de servico pequeno.                                    */

.tabela-diaria td.dia { white-space: nowrap; }
.tabela-diaria .forte { font-weight: 700; }

/* Coluna do Dia presa a esquerda. O `z-index` do cabecalho tem de ser maior
   que o das demais `th`, que ja sao `sticky` no topo — senao o canto superior
   esquerdo fica transparente ao rolar nos dois eixos. */
.tabela-diaria .col-dia {
  position: sticky; left: 0; z-index: 2;
  background: var(--fundo-2); border-right: 1px solid var(--borda);
}
.tabela-diaria thead .col-dia { z-index: 4; background: var(--fundo-3); }
.tabela-diaria tfoot .col-dia { z-index: 4; background: var(--fundo-3); }

/* Cabecalho preso ao rolar. Tres coisas juntas:
   - o grid rola dentro dele mesmo, na altura da tela (menos a barra do topo):
     com a rolagem na pagina o `sticky` do cabecalho nao tinha onde prender, e
     ele sumia junto com as linhas;
   - o cabecalho tem DUAS linhas (unidade e colunas). Com as duas em `top: 0`
     a de baixo cobria a de cima; a segunda desce a altura da primeira, que o
     `inicio.js` mede depois de montar (`--altura-grupo`);
   - o total do mes ("Mes") fica preso embaixo, visivel com qualquer dia na
     tela. */
.tabela-rolagem.rolagem-diaria { max-height: calc(100vh - 140px); min-height: 320px; }
.tabela-diaria thead th { z-index: 3; }
.tabela-diaria thead tr.sub th { top: var(--altura-grupo, 31px); }
.tabela-diaria tfoot th, .tabela-diaria tfoot td {
  position: sticky; bottom: 0; z-index: 3; background: var(--fundo-3);
  box-shadow: inset 0 1px 0 var(--borda);
}
/* A coluna de resultado tem fundo semitransparente: no rodape preso ela
   deixava as linhas passarem por baixo. Aqui o fundo e' opaco. */
.tabela-diaria tfoot td.resultado { background: #dde4f1; }
.tabela-diaria tbody tr:hover .col-dia { background: var(--fundo-3); }

/* Nome da unidade, centralizado sobre as tres colunas dela. */
.tabela-diaria thead th.grupo {
  text-align: center; color: var(--texto); font-weight: 700;
  letter-spacing: .3px; border-left: 2px solid var(--borda);
  border-bottom: 1px solid var(--borda);
}
.tabela-diaria thead tr.sub th { font-weight: 600; }
.tabela-diaria thead th.grupo-total,
.tabela-diaria .abre-grupo { border-left: 2px solid var(--borda); }

/* O bloco do Grupo abre a tabela: fundo proprio e traco mais forte, para nao
   se confundir com a primeira loja logo ao lado. */
.tabela-diaria thead th.grupo-total,
.tabela-diaria thead tr.sub th.grupo-total { background: #e7ecf6; color: var(--texto); }
.tabela-diaria thead th.grupo-total { border-left: 0; }

/* Zebra: com trinta colunas o olho precisa de trilho para atravessar a linha
   inteira sem pular de dia. */
.tabela-diaria tbody tr:nth-child(even) { background: rgba(238, 241, 247, .55); }
.tabela-diaria tbody tr:nth-child(even) .col-dia { background: #f6f8fc; }

.tabela-diaria .negativo { color: var(--vermelho); }
.tabela-diaria .venda   { color: var(--texto); }
.tabela-diaria .servico { color: var(--texto-2); }
/* Devolucao e' o unico numero da linha que anda contra o resultado: sai numa
   cor de alerta, discreta, para nao competir com a venda mas ser achada de
   longe quando estiver alta. O valor vai positivo, com o sinal dito no
   cabecalho — "-12.497" ao lado de "245.376" convidaria a somar errado. */
.tabela-diaria .devolucao { color: var(--vermelho); }

/* Colunas de resultado (`Venda liq.` e `Compra liq.`): fecham cada bloco e sao
   o numero que se leva da linha. Fundo proprio e negrito, para o olho parar
   nelas depois de correr as parcelas — sem cor nova, que o grid ja tem tres. */
.tabela-diaria .resultado {
  background: rgba(47, 111, 228, .05);
  color: var(--texto); font-weight: 700;
}
.tabela-diaria thead th.resultado { background: #e2e8f4; color: var(--texto); }

/* O titulo da coluna liquida e' o botao que abre e fecha as parcelas do bloco.
   O "+" / "-" na frente diz que ha o que abrir; sem ele o cabecalho nao daria
   nenhum sinal de que e' clicavel. */
.tabela-diaria thead th.alternavel { cursor: pointer; user-select: none; }
.tabela-diaria thead th.alternavel:hover,
.tabela-diaria thead th.alternavel:focus-visible {
  background: #d3ddf0; color: var(--acento); outline: none;
}
.seta-bloco {
  display: inline-block; margin-right: 5px; min-width: 9px;
  color: var(--acento); font-weight: 700;
}

/* Traco entre os dois blocos de uma unidade (venda e compra), mais fraco que o
   `abre-grupo` que separa uma unidade da seguinte. */
.tabela-diaria .abre-bloco { border-left: 1px solid var(--borda); }
.tabela-diaria tbody tr.hoje .resultado { background: rgba(47, 111, 228, .12); }
.leg-resultado { color: var(--acento); font-weight: 600; }
.tabela-diaria .compra  { color: var(--texto-fraco); }
.tabela-diaria .zero    { color: var(--borda); }

.tabela-diaria tfoot td { font-weight: 700; }
.tabela-diaria tbody tr.hoje { background: rgba(47, 111, 228, .07); }
.tabela-diaria tbody tr.hoje td { font-weight: 600; }
.tabela-diaria tbody tr.hoje .col-dia { background: #e4ecfb; }

/* Legenda do cabecalho do cartao, nas mesmas cores das colunas. */
.leg-servico { color: var(--texto-2); }
.leg-devolucao { color: var(--vermelho); }
.leg-compra  { color: var(--texto-fraco); }
.etiqueta-hoje {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: rgba(47, 111, 228, .12); color: var(--acento);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}

/* Titulo de secao solto, entre os blocos da tela inicial. */
.secao-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 2px -4px;
}

/* Um card por loja, com a projecao do mes em destaque. Mais largo que o kpi
   do painel: aqui cabem cinco numeros, e nao um. */
.cartoes.projecoes { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.cartao-projecao {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra);
  min-width: 0;
}
.cartao-projecao > header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px; padding-bottom: 8px;
  border-bottom: 1px solid var(--borda);
}
.cartao-projecao > header .kpi-rotulo {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projecao-valor {
  font-size: 26px; font-weight: 700; letter-spacing: -.5px;
  color: var(--acento); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.projecao-valor.vazio { font-size: 16px; font-weight: 600; color: var(--texto-fraco); }
.cartao-projecao .barra { margin-top: 8px; min-width: 0; }
.cartao-projecao .kpi-nota { margin-top: 0; }

.projecao-linhas {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--borda);
  display: grid; gap: 5px; font-size: 12.5px;
}
.projecao-linhas > div { display: flex; justify-content: space-between; gap: 10px; }
.projecao-linhas dt { color: var(--texto-fraco); }
.projecao-linhas dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* O "?" do card e a explicacao que ele abre. Fechada por padrao: o card e
   para ser lido de relance, e a explicacao so serve na primeira vez. */
.cartao-projecao-fim { display: inline-flex; align-items: center; gap: 8px; }
/* Unidade que nao respondeu (hoje: a NovaJP, que e' outro servidor). O card
   continua na tela zerado — sumir pareceria falha de carga —, mas nao pode
   passar por "nao vendeu nada". O motivo fica no `title`. */
.unidade-offline {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  color: #b42318; background: #fee4e2;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.ajuda-botao {
  flex: none; width: 18px; height: 18px; padding: 0; line-height: 1;
  border-radius: 50%; border: 1px solid var(--borda); background: var(--fundo-3);
  color: var(--texto-fraco); font-size: 11px; font-weight: 700; cursor: pointer;
}
.ajuda-botao:hover { border-color: var(--acento); color: var(--acento); }
.ajuda-botao[aria-expanded="true"] {
  background: var(--acento); border-color: var(--acento); color: #fff;
}
.cartao-projecao .ajuda { display: none; }
.cartao-projecao.com-ajuda .ajuda {
  display: grid; gap: 8px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--borda); font-size: 12px; color: var(--texto-fraco);
}
.cartao-projecao .ajuda dt { font-weight: 600; color: var(--texto); }
.cartao-projecao .ajuda dd { margin: 2px 0 0; }

/* As sete lojas em uma linha so. Quebra em varias quando a tela e estreita —
   o separador acompanha, entao nunca sobra um "|" no fim da linha. */
.inicio-tira {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 0; padding: 10px 14px; font-size: 13px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio);
}
.inicio-tira-loja { display: inline-flex; align-items: baseline; gap: 6px; }
.inicio-tira-loja span { color: var(--texto-fraco); }
.inicio-tira-loja b { font-variant-numeric: tabular-nums; }
.inicio-tira-sep { color: var(--borda); }

/* Variacao contra o ano passado. A cor sozinha nao basta — a seta continua
   legivel para quem nao distingue verde de vermelho. */
.variacao { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.variacao.acima  { color: var(--verde); }
.variacao.abaixo { color: var(--vermelho); }
.variacao.igual  { color: var(--texto-fraco); }
/* Seta colada no valor, dentro da celula: menor que o numero, para a coluna
   continuar lendo como coluna de dinheiro e nao como duas informacoes. */
.seta-var { font-size: .78em; margin-left: 3px; cursor: help; }

.tabela tfoot th {
  border-top: 2px solid var(--borda); background: var(--fundo-3);
  font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--texto);
}

/* ---------------------------------------- Monitoramento Status Pedido ---- */
/* Um bloco por pedido: cabecalho com numero, data e cliente, e a tabela dos
   itens logo abaixo. E' o desenho da folha — quem le procura primeiro o
   pedido, e so' depois o item. */
.sp-pedido { margin-bottom: 14px; }
/* A linha do pedido e' o que se percorre primeiro, entao ela e' maior e em
   negrito — e e' o botao que abre os itens. */
/* **Duas classes no seletor, e nao uma.** `.cartao > header` vale (0,1,1) e
   ganharia de `.sp-pedido-topo`, que vale (0,1,0): o `justify-content:
   space-between` de la espalhava os campos pela largura e a linha saia
   parecendo centralizada, junto com o `gap` e o `margin-bottom` dele. Com
   `.sp-pedido > .sp-pedido-topo` (0,2,0) o desempate vira para ca. */
.sp-pedido > .sp-pedido-topo {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: flex-start; gap: 4px 10px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  margin-bottom: 0; padding: 2px 0; border-radius: 8px;
  text-align: left;
}
/* A folga so' existe com os itens abertos: fechado, ela seria buraco. */
.sp-pedido.aberto > .sp-pedido-topo { margin-bottom: 12px; }
.sp-pedido > .sp-pedido-topo:hover { color: var(--acento); }
.sp-pedido > .sp-pedido-topo:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 3px;
}
/* O cliente e' o unico campo que pode encolher; os outros nunca espicham. A
   linha termina onde o conteudo termina, e nao na borda do cartao. */
.sp-pedido > .sp-pedido-topo > * { flex: 0 0 auto; }
.sp-pedido > .sp-pedido-topo > .sp-cliente { flex: 0 1 auto; }
/* Status, selo e valor encostam na direita; o resto fica na esquerda. O
   `margin-left: auto` come a sobra da linha entre os dois grupos — e' o que
   faz os dois blocos ficarem nas pontas sem espalhar os campos de dentro. */
.sp-direita {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  margin-left: auto;
}
.sp-sep { color: var(--borda); font-weight: 400; }
/* Recorte consultado, em duas linhas: vendedor em cima, periodo embaixo. */
.sp-recorte { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.sp-recorte .sp-sem-cadastro { color: var(--vermelho); }
/* Status de agora: so' a LETRA muda de cor, sem pastilha nem fundo. A cor vem
   por `style` porque e' dado, e nao desenho — sao 34 status, cada um com a
   sua, e ela sai do cadastro do Rsys. */
.sp-status { white-space: nowrap; }
/* O cliente cede espaco antes dos outros: numero e data sao curtos e fixos. */
.sp-cliente { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-valor { font-weight: 700; }
/* Seta do abre-e-fecha, no mesmo desenho da do CRM. */
.sp-seta {
  display: inline-block; width: 0; height: 0; flex: 0 0 auto;
  border-left: 6px solid var(--texto-fraco);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  transition: transform .12s;
}
.sp-pedido.aberto .sp-seta { transform: rotate(90deg) translateX(-1px); }
/* Os itens nascem fechados: com dezenas de pedidos, tudo aberto daria
   centenas de linhas e a lista de pedidos sumiria. */
.sp-pedido:not(.aberto) .tabela-rolagem { display: none; }
/* O selo do fim da linha, tambem so' na letra: vermelho enquanto falta compra
   chegar, azul quando tudo chegou. */
.sp-selo { white-space: nowrap; }
.sp-selo.aguardando { color: var(--vermelho); }
.sp-selo.completo   { color: var(--acento); }
.sp-selo.cancelado  { color: var(--vermelho); font-weight: 700; }
.sp-itens td { vertical-align: top; }
/* Item que o estoque nao cobre. Fundo fraco, e nao vermelho no texto: a linha
   continua legivel e o numero que importa fica sendo o da coluna QTE EST. */
.sp-itens tr.sp-falta { background: rgba(212, 53, 53, .06); }
.sp-marca { color: var(--vermelho); font-weight: 700; }
/* A rota do pedido ocupa uma celula so', ao lado de todos os itens. */
/* Com sete colunas a trilha cede largura: ela quebra em varias linhas sem
   perder leitura, e a descricao do produto nao. */
.sp-coluna-trilha { width: 26%; border-left: 1px solid var(--borda); }
.sp-itens .sp-codigo { width: 1%; white-space: nowrap; color: var(--texto-fraco); }
.sp-itens .sp-fabricante { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Codigo da marca em destaque e o nome ao lado, menor: o codigo e' a
   chave que se procura, o nome e' quem diz qual marca e'. */
.sp-marca-col { width: 1%; white-space: nowrap; font-weight: 600; }
.sp-marca-col small { font-weight: 400; color: var(--texto-fraco); }
/* `15 | 9 | 2 | 3 | 4 | 5 | 7` numa linha. O separador e' `::after`, e nao um
   caractere no HTML: assim o ultimo passo nao ganha barra sobrando e a linha
   quebra no lugar certo em tela estreita. */
.sp-rota { display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.sp-passo {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 6px;
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
  cursor: help;
}
.sp-passo + .sp-passo::before {
  content: '|'; color: var(--borda); margin: 0 5px 0 -3px; font-weight: 400;
}
/* Tres estados, e so' um deles chama atencao: onde o pedido ESTA. O andado
   fica legivel e o que ainda vem, apagado — a linha responde "quanto falta". */
.sp-passo.passou  { color: var(--texto); font-weight: 600; }
.sp-passo.adiante { color: var(--texto-fraco); opacity: .55; }
.sp-passo.atual {
  background: rgba(47, 111, 228, .12); color: var(--acento); font-weight: 700;
}
/* A bolinha azul: e' ela que responde "em que status o pedido esta". */
.sp-bolinha {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--acento); flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(47, 111, 228, .2);
}
/* Passagem por status que nao esta na rota: entra depois, atras de um traco,
   para nao empurrar a rota de lugar. */
.sp-fora-rota {
  display: inline-flex; align-items: center; margin-left: 8px;
  padding-left: 8px; border-left: 1px dashed var(--borda);
}
.sp-fora-rota .sp-passo { font-style: italic; }
.sp-agora { margin-top: 4px; font-size: 12px; color: var(--texto-fraco); }
/* Etiqueta de venda casada, na frente da descricao do item. Fica ANTES do
   texto porque e' o que muda a leitura da linha: a peca nao esta em estoque,
   foi comprada para este pedido. */
.sp-casada {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--fundo-3); color: var(--texto-fraco); cursor: help;
}
.sp-casada.ok     { background: rgba(18, 160, 92, .13);  color: var(--verde); }
.sp-casada.alerta { background: rgba(192, 127, 5, .14);  color: var(--amarelo); }
.sp-casada.ruim   { background: rgba(212, 53, 53, .12);  color: var(--vermelho); }
.sp-limite { margin-bottom: 10px; }

/* ------------------------------------------------------------ medidor ---- */
.medidor { position: relative; height: 200px; }
.medidor canvas { height: 200px !important; }
.medidor-centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
  transform: translateY(18%);
}
.medidor-centro strong { font-size: 48px; }

.lista-indicadores { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.lista-indicadores li { display: flex; justify-content: space-between; font-size: 13px; }
.lista-indicadores span { color: var(--texto-fraco); }
.lista-indicadores b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- tabela ---- */
.tabela-rolagem { overflow-x: auto; max-height: 620px; overflow-y: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th, .tabela td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.tabela thead th {
  position: sticky; top: 0; background: var(--fundo-3);
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-fraco); border-bottom: 1px solid var(--borda); z-index: 1;
}
.tabela tbody tr { border-bottom: 1px solid rgba(220, 226, 237, .8); }
.tabela tbody tr:hover { background: var(--fundo-3); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.nome { white-space: normal; min-width: 200px; }

.etiqueta { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.etiqueta.atingiu { background: rgba(18, 160, 92, .12); color: var(--verde); }
.etiqueta.proximo { background: rgba(192, 127, 5, .13); color: var(--amarelo); }
.etiqueta.abaixo  { background: rgba(212, 53, 53, .11);  color: var(--vermelho); }
.etiqueta.sem_meta{ background: var(--fundo-3); color: var(--texto-fraco); }

.barra { background: #e3e8f1; border-radius: 999px; height: 8px; overflow: hidden; min-width: 120px; }
.barra > i {
  display: block; height: 100%; border-radius: 999px; background: var(--acento);
  /* A largura entra animada (ver `animarBarra` em premiacao.js). */
  transition: width .9s ease-out;
}
.barra > i.atingiu { background: var(--verde); }
.barra > i.proximo { background: var(--amarelo); }
.barra > i.abaixo  { background: var(--vermelho); }

/* ---------------------------------------------------------- formulario --- */
.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.formulario .col-2 { grid-column: 1 / -1; }
.campo { display: flex; flex-direction: column; gap: 5px; }
/* Codigo do ERP colado a esquerda do nome: os dois sao a mesma pergunta —
   "quem e' essa pessoa" —, e o codigo e' curto. */
.linha-erp { display: flex; gap: 10px; align-items: flex-end; }
.linha-erp .campo { flex: 1; }
.linha-erp .campo-erp { flex: 0 0 104px; }
.campo input:not([type=checkbox]), .campo select, .campo textarea { width: 100%; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.acoes.coluna { flex-direction: column; align-items: stretch; }

/* --------------------------------------------------- selecao de empresas -- */
.caixa-selecao {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px 12px; max-height: 190px; overflow-y: auto;
  background: var(--fundo-3); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px;
}
.opcao-empresa {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.opcao-empresa:hover { background: rgba(47, 111, 228, .07); }
.opcao-empresa:has(input:checked) { background: rgba(47, 111, 228, .11); }
.opcao-empresa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcao-empresa b { color: var(--acento); margin-right: 4px; }
.opcao-empresa.ausente b { color: var(--amarelo); }
.acoes-selecao { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Um campo por colocacao premiada, na ordem do podio. */
.posicoes { display: flex; flex-direction: column; gap: 8px; }
.posicao-linha { display: flex; align-items: center; gap: 10px; }
.posicao-rotulo {
  flex: none; width: 88px; font-weight: 600; font-size: 13px;
}
.posicao-linha input[data-campo=valor] { flex: 0 1 130px; min-width: 0; }
.posicao-linha input[data-campo=nome] { flex: 1 1 200px; min-width: 0; }
.posicao-linha .botao { flex: none; line-height: 1; }
.posicao-linha .botao[disabled] { opacity: .4; cursor: not-allowed; }

.dialogo {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px; min-width: 340px; max-width: 460px;
  background: var(--fundo-2); color: var(--texto); box-shadow: var(--sombra);
}
.dialogo::backdrop { background: rgba(16, 24, 40, .45); }

/* ---------------------------------------------------- forca da senha ----- */
.forca-senha { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.forca-barra {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--fundo-3); overflow: hidden;
}
.forca-barra i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  transition: width .18s ease, background .18s ease;
}
.forca-barra i.abaixo { background: var(--vermelho); }
.forca-barra i.proximo { background: var(--amarelo); }
.forca-barra i.atingiu { background: var(--verde); }
.forca-senha .dica { white-space: nowrap; }

.regras-senha { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.regras-senha li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--texto-fraco);
}
.regras-senha li span { width: 13px; text-align: center; }
.regras-senha li.ok { color: var(--verde); }

.dica.ok { color: var(--verde); }
.dica.erro { color: var(--vermelho); }

/* --------------------------------- vendedores das lojas selecionadas ----- */
.caixa-selecao.alta { grid-template-columns: 1fr; max-height: 260px; gap: 2px; }
.busca-embutida {
  flex: 1 1 220px; min-width: 160px; padding: 5px 9px; font-size: 13px;
  border: 1px solid var(--borda); border-radius: 6px; background: var(--fundo-2);
  color: inherit;
}
.linha-vendedor {
  display: grid; grid-template-columns: 58px 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 5px 6px; border-radius: 6px; font-size: 13px;
}
.linha-vendedor:hover { background: rgba(47, 111, 228, .07); }
.linha-vendedor .cod { color: var(--acento); font-weight: 600; }
.linha-vendedor .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-vendedor .lojas { color: var(--texto-fraco); font-size: 11px; white-space: nowrap; }
.marca-vendedor {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; color: var(--texto-fraco); white-space: nowrap;
}
.marca-vendedor:has(input:checked) { color: var(--acento); font-weight: 600; }

/* -------------------------------------------------- cartao do vendedor --- */
.vendedor-vazio { color: var(--texto-fraco); padding: 30px 0; text-align: center; }
.vendedor-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vendedor-cabecalho h3 { font-size: 18px; }
.vendedor-progresso { margin: 16px 0 8px; }
.vendedor-progresso .barra { height: 14px; }
.vendedor-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.vendedor-numeros div { background: var(--fundo-3); border-radius: 10px; padding: 10px 12px; }
.vendedor-numeros small { display: block; color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.vendedor-numeros b { font-size: 17px; }
.falta-destaque { font-size: 34px; font-weight: 700; }

/* -------------------------------------------------------------- aviso ---- */
.aviso {
  margin: 12px 20px 0; padding: 10px 14px; border-radius: 8px;
  background: #fdeaea; border: 1px solid var(--vermelho);
  color: #8f1f1f;
}
.aviso.sucesso { background: #e7f7ee; border-color: var(--verde); color: #0c6b3e; }

/* Notificacao do sistema (ver `avisar` no comum.js). Fica no centro da tela
   porque a faixa no topo passava despercebida em tela longa. */
.modal-aviso {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo-2); color: var(--texto);
  padding: 20px; max-width: 460px; width: calc(100% - 32px);
  box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
}
.modal-aviso::backdrop { background: rgba(16, 24, 40, .45); }
.modal-aviso-corpo { display: flex; gap: 14px; align-items: flex-start; }
.modal-aviso-icone {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
  background: rgba(212, 53, 53, .12); color: var(--vermelho);
}
/* Confirmacao: icone azul de pergunta; vermelho quando a acao destroi algo. */
.modal-confirmar .modal-aviso-icone { background: rgba(47, 111, 228, .12); color: var(--acento); }
.modal-confirmar.perigo .modal-aviso-icone { background: rgba(212, 53, 53, .12); color: var(--vermelho); }
.modal-confirmar .modal-aviso-acoes { gap: 8px; }
.modal-aviso.sucesso .modal-aviso-icone { background: rgba(18, 160, 92, .14); color: var(--verde); }
/* Acesso a vendedor fora do escopo: vermelho e borda, para nao passar por
   um aviso comum de erro. */
.modal-aviso.auditoria { border-top: 4px solid var(--vermelho); }
.modal-aviso.auditoria .modal-aviso-icone { background: rgba(212, 53, 53, .14); color: var(--vermelho); }
.modal-aviso.auditoria h3 { color: var(--vermelho); }
.modal-aviso h3 { font-size: 15px; margin-bottom: 4px; }
.modal-aviso p { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.modal-aviso-acoes { display: flex; justify-content: flex-end; margin-top: 18px; }
.oculto { display: none; }

/* ------------------------------------------------ podio da campanha ------ */
/* Tres niveis: top 3 em cartao, demais ocupadas em lista, vagas numa linha. */
.podio { display: flex; flex-direction: column; gap: 14px; }
/* Cinco colunas na largura da tela: o top 5 numa linha so'. */
.podio-topo {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.podio-cartao {
  --cor: var(--borda);
  --fundo-cor: var(--fundo-2);
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px 10px;
  border: 1px solid var(--borda); border-top: 4px solid var(--cor);
  border-radius: var(--raio); background: var(--fundo-cor);
  box-shadow: var(--sombra);
  min-width: 0;
}
.podio-cartao.p1 { --cor: #c9971c; --fundo-cor: linear-gradient(180deg, rgba(201, 151, 28, .10), var(--fundo-2) 60%); }
.podio-cartao.p2 { --cor: #8a95a5; --fundo-cor: linear-gradient(180deg, rgba(138, 149, 165, .12), var(--fundo-2) 60%); }
.podio-cartao.p3 { --cor: #b0703a; --fundo-cor: linear-gradient(180deg, rgba(176, 112, 58, .10), var(--fundo-2) 60%); }
.podio-cartao.p4, .podio-cartao.p5 {
  --cor: #6b7a93; --fundo-cor: linear-gradient(180deg, rgba(107, 122, 147, .07), var(--fundo-2) 60%);
}
.podio-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.podio-posicao {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px;
  padding: 0 5px; border-radius: 13px;
  background: var(--cor, var(--fundo-3)); color: #fff;
  font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
}
.podio-medalha { font-size: 17px; line-height: 1; }
.podio-selo {
  margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.podio-selo.liberado { color: var(--verde); background: rgba(18, 160, 92, .10); }
.podio-selo.pendente { color: var(--amarelo); background: rgba(192, 127, 5, .12); }
/* Duas linhas: com cinco colunas, nome inteiro numa linha so' cortava. */
.podio-nome {
  font-size: 14px; font-weight: 600; line-height: 1.25; min-height: 2.5em;
  overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
}
.podio-cod { font-size: 11px; color: var(--texto-fraco); }
.podio-venda {
  margin-top: 6px; font-size: 19px; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.podio-barra {
  height: 6px; border-radius: 3px; background: var(--fundo-3); overflow: hidden;
}
.podio-barra span { display: block; height: 100%; background: var(--cor); border-radius: 3px; }
.podio-disputa {
  display: flex; flex-direction: column; gap: 1px; min-height: 30px;
  margin-top: 5px; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.podio-folga { color: var(--verde); }
.podio-falta { color: var(--texto-fraco); }
.podio-rodape {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--borda);
}
.podio-premio {
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
}
.podio-vago {
  flex: 1; display: grid; place-items: center; min-height: 90px;
  color: var(--texto-fraco); font-style: italic; font-size: 13px;
}
.podio-cartao.vago { box-shadow: none; border-style: dashed; border-top-style: solid; }
/* Premio que ainda depende da meta total: some o brilho, mantem o valor. */
.podio-cartao.bloqueado .podio-premio,
.podio-lista li.bloqueado .podio-premio { color: var(--texto-fraco); }
.podio-brinde { display: block; font-size: 12px; font-weight: 500; color: var(--texto-fraco); }
.podio-brinde-so { font-size: 15px; line-height: 1.25; display: inline-block; }

/* 4o lugar em diante, com vendedor */
.podio-lista {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden;
}
.podio-lista li {
  display: grid; align-items: center; gap: 12px; padding: 10px 14px;
  grid-template-columns: 40px minmax(0, 1fr) auto minmax(0, 190px) auto;
  border-top: 1px solid var(--borda); background: var(--fundo-2);
}
.podio-lista li:first-child { border-top: 0; }
.podio-lista li:nth-child(even) { background: var(--fundo); }
.podio-lista .podio-posicao {
  min-width: 30px; height: 26px; font-size: 13px; background: var(--fundo-3); color: var(--texto-2);
}
.podio-lista-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podio-lista-nome small { font-weight: 400; color: var(--texto-fraco); margin-left: 4px; }
.podio-lista .num { font-variant-numeric: tabular-nums; text-align: right; }
.podio-lista .podio-premio { font-size: 15px; }

/* Colocacoes ainda sem ninguem: uma linha so' */
.podio-vagas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px; border: 1px dashed var(--borda); border-radius: var(--raio);
  background: var(--fundo);
}
.podio-vagas-titulo { font-weight: 600; color: var(--texto-2); }
.podio-vagas-titulo small { font-weight: 400; color: var(--texto-fraco); }
.podio-vagas-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.podio-chip {
  display: inline-flex; gap: 6px; align-items: baseline;
  padding: 4px 10px; border-radius: 999px; background: var(--fundo-2);
  border: 1px solid var(--borda); font-size: 12px; font-variant-numeric: tabular-nums;
}
.podio-chip b { color: var(--texto-fraco); }
.podio-chip .podio-brinde { display: inline; }

@media (max-width: 720px) {
  .podio-lista li { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .podio-lista li > .dica { display: none; }
  .podio-lista li > .podio-premio { grid-column: 2 / -1; text-align: left; }
  .podio-vagas-itens { margin-left: 0; }
}

@media (max-width: 720px) {
  .formulario.grade-2 { grid-template-columns: 1fr; }
  .topo-acoes { margin-left: 0; width: 100%; }
}

/* ----------------------------------------Tags de marcas (campo reutilizado) ---------------------------------------- */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 1px solid #ccc;
  padding: 6px;
  border-radius: 4px;
  background-color: #fff;
  cursor: text;
}

/* Deixa o input sem borda para parecer que está dentro do container */
.tags-container input {
  border: none !important;
  outline: none !important;
  flex: 1;
  min-width: 150px;
  padding: 4px;
}

/* Estilo da Tag/Chip */
.tag-item {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  color: #333;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 14px;
}

.tag-item .btn-remove {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #888;
}

.tag-item .btn-remove:hover {
  color: #ff0000;
}
/* ----------------------- produtos por codigo e bonificacao por faixa ---- */
.tag-item.ausente { background-color: #fde7e7; color: #a12626; }
.tag-item.sem-conferencia { background-color: #fff4d6; }
.faixa-qtd-linha { flex-wrap: wrap; }
.faixa-qtd-linha input[data-campo=de],
.faixa-qtd-linha input[data-campo=ate] { flex: 0 1 80px; min-width: 0; }
.faixas-bonificacao { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.faixa-chip {
  flex: 1 1 150px; text-align: center; padding: 10px 14px;
  border: 1px solid #e3e8f1; border-radius: 10px;
}
.faixa-chip b { display: block; font-size: 1.3rem; }
.faixa-chip strong { display: block; font-size: 1.6rem; color: #c62828; }
.faixa-chip small {
  display: block; font-size: .72rem; text-transform: uppercase; color: var(--texto-fraco);
}
.celula-bonif small { display: block; color: var(--texto-fraco); white-space: nowrap; }
.celula-bonif .bonif-proxima { color: #c07f05; }
.bonificacao-vendedor { margin-top: 18px; }

/* Liberacao de menus e submenus (Cadastro de usuario, so' a conta admin). */
.coluna-cartoes { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.menus-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.menus-topo .campo { flex: 1 1 260px; }
.menus-arvore {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; margin-bottom: 10px;
}
/* O resumo fica no cabecalho do cartao, ao lado do titulo: sem isto ele
   empurrava a largura do cartao em vez de quebrar. */
#resumo-menus { min-width: 0; overflow-wrap: anywhere; text-align: right; }
.menu-grupo {
  background: var(--fundo-3); border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px;
}
/* `flex-wrap` e `min-width: 0` sao o que impede o texto de furar o cartao: a
   coluna tem 240px, e o nome da tela divide a linha com a legenda de situacao.
   Sem eles, "Sincronizacao de notas" mais a legenda passavam da borda. */
.menu-grupo-topo, .menu-item {
  display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer;
  flex-wrap: wrap;
}
.menu-grupo-topo b, .menu-item span { min-width: 0; overflow-wrap: anywhere; }
.menu-grupo-topo input, .menu-item input { min-width: auto; }
.menu-grupo-topo small, .menu-item small {
  margin-left: auto; font-size: 11px; white-space: nowrap; flex: none;
}
.menu-itens {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 6px; padding: 6px 0 0 22px; border-top: 1px solid var(--borda);
}
.menu-item { padding: 3px 4px; border-radius: 6px; }
.menu-item:hover { background: rgba(47, 111, 228, .07); }
.menu-item.bloqueado span,
.menu-grupo.bloqueado > .menu-grupo-topo b { color: var(--vermelho); text-decoration: line-through; }
/* Liberado alem do perfil: excecao desta conta, e por isso destacada — quem
   corre o olho pela arvore precisa ver o que saiu da regra do papel. */
/* Fora do perfil e ainda sem liberacao: nem aberta nem tirada — cinza. */
.menu-item.disponivel span, .menu-item.disponivel small { color: var(--texto-fraco); }
.menu-item.extra span { color: var(--verde); font-weight: 600; }
.menu-item.extra small { color: var(--verde); }
.menu-grupo.travado, .menu-item.travado { opacity: .55; }
/* Item de um grupo dentro do submenu (Estoque): recuado, com o nome do grupo
   em cima, para a arvore mostrar o menu do jeito que o cabecalho mostra. */
.menu-subgrupo { margin: 6px 0 2px 22px; color: var(--texto-fraco); font-size: 11px; }
.menu-item.do-grupo { margin-left: 22px; }

/* Perfis de acesso (CRUD) dentro do mesmo bloco da liberacao de menus. */
#cartao-perfis > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.perfil-editor {
  margin: 12px 0; padding: 12px;
  border: 1px dashed var(--acento); border-radius: 8px; background: var(--fundo-2);
}
.perfil-editor h3, .perfil-aplicar h3 { margin: 0 0 10px; font-size: 14px; }
.perfil-aplicar { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.perfil-aplicar .caixa-selecao { margin: 8px 0; }
.menu-grupo.travado .menu-grupo-topo, .menu-item.travado { cursor: not-allowed; }

/* Logo da campanha no cadastro (o mesmo que a TV mostra no rodape). */
.logo-campanha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.logo-previa {
  height: 72px; max-width: 200px; object-fit: contain; padding: 4px;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
}

/* Evolucao por item (campanha sem meta): altura escrita pelo JS conforme a
   quantidade de itens, entao o teto padrao do canvas do cartao nao vale aqui. */
.grafico-itens-caixa { position: relative; height: 260px; }
.cartao .grafico-itens-caixa canvas { max-height: none; }
#tabela-itens tr.sem-venda td { color: var(--texto-fraco); }
#tabela-itens .celula-futura { color: var(--texto-fraco); }
.var-item { font-size: 10px; margin-left: 4px; }
.var-item.sobe { color: var(--verde); }
.var-item.desce { color: var(--vermelho); }

/* Premio que o vendedor ainda nao liberou: mostrado como potencial. */
.premio-bloqueado { color: var(--texto-fraco); text-decoration: line-through; }

/* ------------------------------------ secao de detalhamento recolhivel ---- */
.cabecalho-alternavel { cursor: pointer; user-select: none; }
.cabecalho-alternavel h2 { flex: 1; }

/* Botao +/- desenhado no CSS, para nao depender de a fonte ter o glifo. */
.cabecalho-alternavel .seta {
  display: inline-block; position: relative; flex: none;
  width: 20px; height: 20px;
  background: var(--fundo-2); border: 1px solid var(--acento); border-radius: 5px;
}
.cabecalho-alternavel .seta::before,
.cabecalho-alternavel .seta::after {
  content: ''; position: absolute; background: var(--acento);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.cabecalho-alternavel .seta::before { width: 10px; height: 2px; }  /* traco do "-" */
.cabecalho-alternavel .seta::after  { width: 2px; height: 10px; }  /* haste do "+" */

.cabecalho-alternavel:hover .seta { background: rgba(47, 111, 228, .1); }

.cabecalho-alternavel.aberto .seta { background: var(--acento); }
.cabecalho-alternavel.aberto .seta::before { background: #fff; }
.cabecalho-alternavel.aberto .seta::after { display: none; }       /* vira "-" */

/* --------------------------------------------------------- tela de login -- */
.tela-login {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 20px;
}
.cartao-login {
  width: 100%; max-width: 380px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: 28px; box-shadow: var(--sombra);
}
.login-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-marca strong { display: block; font-size: 16px; }
.login-marca small { color: var(--texto-fraco); font-size: 12px; }
.cartao-login .botao { width: 100%; margin-top: 6px; }
.cartao-login .aviso { margin: 16px 0 0; }
.login-rodape { margin: 18px 0 0; text-align: center; }

/* ------------------------------------------------------- conta e usuarios -- */
.conta { display: flex; align-items: center; gap: 8px; }
.conta a {
  font-weight: 600; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--fundo-3);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conta a:hover { border-color: var(--acento); color: var(--acento); }

.titulo-menor {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-fraco); margin-bottom: 10px;
}
#link-tv { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.tabela tr.inativo td { opacity: .55; }
.tabela td select { min-width: 130px; padding: 4px 8px; font-size: 12px; }

/* ------------------------------------------------------ menu suspenso ----- */
.submenu { position: relative; }
.submenu-topo {
  padding: 7px 14px; border-radius: 8px; border: 0; cursor: pointer;
  background: none; color: var(--texto-fraco);
  font: inherit; font-weight: 500; transition: .15s;
}
.submenu-topo:hover { background: var(--fundo-3); color: var(--texto); }
.submenu-topo.ativo { background: var(--acento); color: #fff; }
.submenu-seta { font-size: 10px; margin-left: 2px; }
.submenu.aberto .submenu-seta { transform: rotate(180deg); display: inline-block; }

.submenu-itens {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 210px; padding: 6px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: var(--sombra);
}
.submenu.aberto .submenu-itens { display: block; }
.submenu-itens a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--texto); font-size: 13px; white-space: nowrap;
}
.submenu-itens a:hover { background: var(--fundo-3); }
.submenu-itens a.ativo { background: var(--acento); color: #fff; }

/* Terceiro nivel (Relatorio > Estoque > ...): abre ao lado, e nao por baixo —
   o menu ja' esta a 6px do topo da tela e uma lista dentro da outra empurraria
   os itens de baixo para fora. Fecha junto com o submenu que o contem. */
.submenu-grupo { position: relative; }
.submenu-grupo-topo {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 7px; cursor: pointer;
  background: none; color: var(--texto); font: inherit; font-size: 13px;
  text-align: left; white-space: nowrap;
}
.submenu-grupo-topo:hover { background: var(--fundo-3); }
.submenu-grupo-topo.ativo { background: var(--acento); color: #fff; }
.submenu-grupo-topo .submenu-seta { margin-left: auto; }
.submenu-grupo.aberto .submenu-grupo-topo .submenu-seta {
  transform: rotate(90deg); display: inline-block;
}
.submenu-grupo-itens {
  display: none;
  position: absolute; top: -6px; left: calc(100% + 4px); z-index: 31;
  min-width: 210px; padding: 6px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: var(--sombra);
}
.submenu-grupo.aberto .submenu-grupo-itens { display: block; }
.submenu-grupo-itens a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--texto); font-size: 13px; white-space: nowrap;
}
.submenu-grupo-itens a:hover { background: var(--fundo-3); }
.submenu-grupo-itens a.ativo { background: var(--acento); color: #fff; }

/* ------------------------------------------- banco de dados indisponivel -- */
.aviso.offline {
  display: flex; align-items: center; gap: 16px;
  background: #fff8ed; border: 1px solid #f0c26b; color: #7a4d05;
}

/* Circulo com onda saindo: comunica "tentando de novo" sem texto girando. */
.offline-farol {
  position: relative; flex: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--amarelo);
}
.offline-farol::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--amarelo); animation: offline-onda 1.8s ease-out infinite;
}
@keyframes offline-onda {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(2.8); opacity: 0; }
}

.offline-texto { flex: 1; min-width: 0; }
.offline-texto strong { display: block; font-size: 15px; letter-spacing: .2px; }
.offline-texto span { font-size: 13px; opacity: .85; }

/* Barra que percorre a largura enquanto espera a proxima tentativa. */
.offline-barra {
  height: 3px; margin-top: 8px; border-radius: 3px;
  background: rgba(122, 77, 5, .15); overflow: hidden;
}
.offline-barra i {
  display: block; width: 35%; height: 100%; border-radius: 3px;
  background: var(--amarelo); animation: offline-vaivem 1.6s ease-in-out infinite;
}
@keyframes offline-vaivem {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* Mesmo estado na TV, em escala de televisao. */
.tv-vazio.offline { flex-direction: column; gap: 2.4vh; color: var(--texto); }
.tv-vazio.offline .offline-farol { width: 2.4vh; height: 2.4vh; }
.tv-vazio.offline strong { font-size: 4vh; }
.tv-vazio.offline span { font-size: 2.4vh; color: var(--texto-fraco); }

@media (prefers-reduced-motion: reduce) {
  .offline-farol::after, .offline-barra i { animation: none; }
  .barra > i { transition: none; }
}

/* ------------------------------------------------- cartao retratil ------- */
/* `<details>` nativo: abre e fecha sem JavaScript nenhum, ja vem com teclado
   e leitor de tela. O `summary` fica com a cara do `header` do cartao. */
.cartao.retratil { padding-bottom: 16px; }
.cartao.retratil > summary {
  display: block; cursor: pointer; list-style: none; user-select: none;
  margin: -16px; padding: 16px; border-radius: var(--raio);
}
.cartao.retratil > summary .summary-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* A barra mora no `summary` porque e' a unica parte que o `<details>` deixa
   visivel com a caixa fechada. */
.cartao.retratil > summary .barra { margin-top: 12px; }
.cartao.retratil > summary::-webkit-details-marker { display: none; }
.cartao.retratil > summary:hover { background: var(--fundo-3); }
.cartao.retratil > summary h2 { margin: 0; }
/* Aberto, a margem negativa de baixo tem de sair: senao o `summary` sobe por
   cima da primeira linha da lista. */
.cartao.retratil[open] > summary {
  margin-bottom: 0; border-radius: var(--raio) var(--raio) 0 0;
}
.cartao.retratil > summary .seta {
  font-size: 11px; color: var(--texto-fraco); transition: transform .15s;
}
.cartao.retratil[open] > summary .seta { transform: rotate(180deg); }
.cartao.retratil > .corpo { padding-top: 14px; }
.cartao.retratil > summary .summary-fim {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
}
/* Conta de vendedor: da caixa da regra sobra so a barra de progresso — titulo,
   dica do recorte, seta e corpo saem junto com o texto do calculo. */
.cartao.retratil.so-barra > summary { cursor: default; }
.cartao.retratil.so-barra > summary:hover { background: none; }
.cartao.retratil.so-barra > summary .summary-topo,
.cartao.retratil.so-barra > .corpo { display: none; }
.cartao.retratil.so-barra > summary .barra { margin-top: 0; }

/* ------------------------------------------------ grid ordenavel -------- */
/* Cabecalho que ordena ao clique. A seta so aparece na coluna ativa: uma seta
   em cada coluna vira ruido e nao diz qual esta valendo. */
.tabela th.ordenavel { cursor: pointer; user-select: none; }
.tabela th.ordenavel:hover { color: var(--texto); background: var(--borda); }
.tabela th.ordenavel::after {
  content: "\2191"; font-size: 10px; margin-left: 6px; opacity: 0;
}
.tabela th.ordenavel.ordenado { color: var(--texto); }
.tabela th.ordenavel.ordenado::after { opacity: 1; }
.tabela th.ordenavel.ordenado.desc::after { content: "\2193"; }

/* ------------------------------------------------------- CRM ------------ */
/* As cinco telas do `CRM (1).pbix`: coluna de filtro fixa a esquerda e o
   conteudo a direita, como os slicers do arquivo. Abaixo de 1000px a coluna
   vira uma faixa horizontal — em tablet, 180px de filtro comem a tabela. */
.crm-layout { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: start; }
.crm-conteudo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.crm-filtros {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--fundo-2); border: 1px solid var(--borda);
  border-radius: 12px; padding: 14px;
  position: sticky; top: 16px;
}
.crm-filtros-topo { display: flex; align-items: center; justify-content: space-between; }
.crm-filtros-topo h2 { margin: 0; font-size: 13px; }
.crm-filtros select,
.crm-filtros input[type=search],
.crm-filtros input[type=date] { width: 100%; min-width: 0; }
.crm-filtros select:disabled { opacity: .55; cursor: not-allowed; }
.crm-filtros input.invalido { border-color: var(--vermelho); }
.crm-aviso { color: var(--vermelho); text-transform: none; letter-spacing: 0; }
.crm-dica { margin: 4px 0 0; line-height: 1.4; }

@media (max-width: 1000px) {
  .crm-layout { grid-template-columns: 1fr; }
  .crm-filtros { position: static; flex-direction: row; flex-wrap: wrap; }
  .crm-filtros .campo-inline { flex: 1 1 150px; }
  .crm-filtros-topo { flex: 1 1 100%; }
}

/* A matriz Cliente x mes tem uma coluna por mes: o nome do cliente fica preso
   na esquerda, senao rolar ate dezembro perde de quem e' a linha. */
.crm-matriz td.crm-nome, .crm-matriz th:nth-child(2) {
  position: sticky; left: 0; background: var(--fundo-2);
}
.tabela td.crm-nome { white-space: normal; min-width: 220px; }
.tabela .forte { font-weight: 700; }
.tabela td.vazio { text-align: center; color: var(--texto-fraco); padding: 18px; }
.tabela tr.crm-subtotal { background: var(--fundo-3); font-weight: 600; }
/* Total do ano: vive no `tfoot` para nao sumir quando os trimestres sao
   recolhidos, e e' um peso acima do trimestre — e' o numero que se le
   primeiro. Sem cursor de mao: esta linha nao filtra nem abre nada. */
.tabela tr.crm-total { font-weight: 700; border-top: 2px solid var(--borda); }
.tabela tr.crm-total td { cursor: default; }
.tabela tr.crm-pai { cursor: pointer; }
.tabela tr.crm-filho td:first-child { padding-left: 28px; color: var(--texto-fraco); }
.tabela tr.crm-pai .dica { margin-left: 8px; }

/* Seta do "abrir marca": triangulo simples, virado para baixo quando aberta. */
.tabela .seta {
  display: inline-block; width: 0; height: 0; margin-right: 8px;
  border-left: 5px solid var(--texto-fraco);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .12s;
}
.tabela .seta.aberta { transform: rotate(90deg) translateX(-1px); }

.tabela-rolagem.alta { max-height: 70vh; }
.tabela-rolagem.baixa { max-height: 240px; }
.crm-duplo { align-items: start; }
.crm-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-conteudo .cartao canvas { max-height: 320px; }

/* Enquanto a consulta roda: a tela inteira fica opaca e sem clique, para
   ninguem trocar dois filtros e ver o resultado do primeiro. */
body.carregando .crm-conteudo { opacity: .55; pointer-events: none; }

/* Grade fixa de cards da Visao Geral do CRM: quatro colunas, tres linhas.
   O lugar vago da primeira linha e' um card invisivel — sem ele o navegador
   puxaria "Devolucao" para cima e a coluna das metas sairia do lugar. */
.cartoes.crm-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartoes.crm-grade .kpi.vazio-slot { background: none; border: 0; }
.cartoes.crm-grade .kpi-valor { font-size: 20px; word-break: break-word; }
@media (max-width: 1200px) {
  .cartoes.crm-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes.crm-grade .kpi.vazio-slot { display: none; }
}

/* ---------------------------------------------- CRM: icones e animacao --- */
/* Os icones sao os mesmos do `CRM (1).pbix`, extraidos de dentro do arquivo.
   Ficam a esquerda do texto: no arquivo eram imagens soltas ao lado do card,
   e soltos aqui eles brigariam com a grade responsiva. */
/* So' o card que tem `.kpi-texto` (o do CRM, com icone) vira linha. Aplicado
   em todo `.kpi`, o flex punha rotulo, valor e nota lado a lado nos cards do
   gerencial e das premiacoes, que nao tem o invólucro — e o card estourava. */
.kpi:has(> .kpi-texto) { display: flex; align-items: center; gap: 12px; }
.kpi-texto { min-width: 0; flex: 1; }
.kpi-icone {
  width: 42px; height: 42px; flex: none; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .18));
}

/* Entrada em cascata. O painel abre "montando" em vez de piscar pronto: o olho
   acompanha a sequencia e para em cada numero. `--ordem` vem do JS. */
@keyframes kpi-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.kpi {
  animation: kpi-entra .38s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--ordem, 0) * 55ms);
}
.kpi.vazio-slot { animation: none; }

/* O card que interessa ao vendedor pulsa de leve nos primeiros segundos e
   para. Pulso sem fim vira ruido: depois de tres batidas ninguem mais ve. */
@keyframes kpi-chama {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 128, 0, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 128, 0, .16); }
}
.kpi.chamativo {
  animation: kpi-entra .38s cubic-bezier(.2, .7, .3, 1) backwards,
             kpi-chama 1.6s ease-in-out .6s 3;
}
.kpi.chamativo .kpi-icone { animation: kpi-icone-bate 1.6s ease-in-out .6s 3; }
@keyframes kpi-icone-bate {
  0%, 100% { transform: none; }
  50%      { transform: scale(1.12) rotate(-4deg); }
}

/* Passar o mouse levanta o card: diz que ele e' o assunto sem precisar clicar. */
.kpi { transition: transform .15s, box-shadow .15s; }
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

/* Quem desliga animacao no sistema recebe a tela parada — a contagem crescente
   tambem se desliga sozinha no JS. */
@media (prefers-reduced-motion: reduce) {
  .kpi, .kpi.chamativo, .kpi.chamativo .kpi-icone { animation: none; }
  .kpi:hover { transform: none; }
}

@media (max-width: 1200px) {
  .kpi-icone { width: 34px; height: 34px; }
}

/* Matriz trimestre/mes do CRM: o trimestre e' a linha forte e os meses dele
   vem recuados logo abaixo. Mes e' clicavel — filtra a pagina inteira, como o
   clique num visual do Power BI cruzava o relatorio. */
.tabela tr.crm-mes { cursor: pointer; }
.tabela tr.crm-mes td:first-child { padding-left: 30px; color: var(--texto-fraco); }
.tabela tr.crm-mes:hover td:first-child { color: var(--acento); }
.tabela tr.crm-mes.selecionado { background: rgba(47, 111, 228, .1); }
.tabela tr.crm-mes.selecionado td { font-weight: 600; }
.tabela tr.crm-mes.selecionado td:first-child {
  color: var(--acento);
  box-shadow: inset 3px 0 0 var(--acento);
}
/* Trimestre abre e fecha os meses; a seta diz o estado. O ponteiro de mao fica
   nas duas linhas, mas so' o mes filtra — por isso a seta so' no trimestre. */
.tabela tr.crm-trimestre { cursor: pointer; }
.tabela tr.crm-trimestre:hover { background: var(--borda); }
.tabela tr.crm-trimestre .seta { vertical-align: middle; }
.cartao > header #btn-trimestres { margin-left: auto; }
/* Linha de devolucao dentro da OFICINA: valor negativo, cor de alerta. */
.tabela td.num.negativo { color: var(--vermelho); }

/* Linha de Total das tabelas de operacao. A rolagem dessas duas e' curta
   (`.baixa`, 240px), entao o total gruda no rodape — se rolasse junto, sairia
   da vista justamente na tabela que tem mais linhas. */
.tabela tfoot td {
  border-top: 2px solid var(--borda); background: var(--fundo-3);
  font-weight: 600; position: sticky; bottom: 0;
}

/* Matriz de Clientes: cabecalho de dois andares (ano em cima, meses embaixo),
   como a matriz do .pbix. O `sticky` precisa de `top` diferente por andar,
   senao o segundo cobre o primeiro ao rolar. */
.crm-matriz thead th { position: sticky; top: 0; z-index: 2; background: var(--fundo-3); }
/* Os dois andares so' existem com um ano na matriz. Com varios o cabecalho tem
   uma linha so', e ai `tr:first-child` e `tr:last-child` sao a MESMA linha: sem
   o `:not()` ela recebia os dois `top` e o cabecalho descia por cima do corpo. */
.crm-matriz thead tr:first-child:not(:last-child) th { top: 0; }
.crm-matriz thead tr:last-child:not(:first-child) th { top: 30px; }
.crm-matriz th.crm-ano {
  cursor: pointer; text-align: left; color: var(--texto);
  border-bottom: 1px solid var(--borda);
}
.crm-matriz th.crm-ano:hover { background: var(--borda); }
.crm-matriz th.crm-ano .seta { vertical-align: middle; }
.crm-matriz th.crm-ano-fechado { color: var(--texto-fraco); font-weight: 400; }
/* O canto (Cod. e Cliente) fica preso nos dois eixos: e' o unico jeito de
   saber de quem e' a linha ao rolar ate dezembro. */
.crm-matriz thead th:nth-child(-n+2) { left: 0; z-index: 3; }
.crm-matriz tfoot td { z-index: 1; }

/* Clientes: seletor de anos da propria tela, selecao local e destaque. */
.crm-cabecalho-matriz { flex-wrap: wrap; gap: 10px; }
.crm-anos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crm-ano-opcao {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--texto-fraco); cursor: pointer;
}
.crm-ano-opcao input { margin: 0; }
.crm-ano-opcao:has(input:checked) { color: var(--acento); font-weight: 600; }

.crm-selecao { padding: 0 0 8px; }
.crm-chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px;
  background: rgba(47, 111, 228, .1); color: var(--acento);
  border: 1px solid var(--acento); border-radius: 999px; padding: 4px 6px 4px 12px;
}
.crm-chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.crm-chip button:hover { background: rgba(47, 111, 228, .2); }

/* O que esta selecionado tem de se enxergar sem procurar. */
.tabela th.periodo { cursor: pointer; }
.tabela th.periodo:hover { background: var(--borda); }
.tabela th.coluna-ativa, .tabela td.coluna-ativa { background: rgba(47, 111, 228, .12); }
.tabela tr.crm-linha-cliente { cursor: pointer; }
.tabela tr.crm-linha-cliente.selecionado { background: rgba(47, 111, 228, .12); }
.tabela tr.crm-linha-cliente.selecionado td:first-child {
  box-shadow: inset 3px 0 0 var(--acento);
}

/* Marca e produto da tela de Produtos: clicaveis e com a mesma marcacao da
   linha de cliente, porque fazem a mesma coisa do outro lado da tela. */
.tabela tr.crm-item { cursor: pointer; }
.tabela tr.crm-item.selecionado { background: rgba(47, 111, 228, .12); }
.tabela tr.crm-item.selecionado td:first-child {
  box-shadow: inset 3px 0 0 var(--acento);
}

/* Curva ABC: etiqueta, e nao letra solta. A cor separa o giro alto do baixo
   sem precisar ler — A e B puxam o faturamento, D, E e N sao cauda. */
.curva {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .82em;
  background: var(--borda);
  color: var(--texto-fraco);
}
.curva-A { background: rgba(22, 163, 74, .16); color: var(--verde); }
.curva-B { background: rgba(47, 111, 228, .14); color: var(--acento); }
.curva-C { background: rgba(217, 119, 6, .16); color: #b45309; }

/* Mapa de capilaridade (tela de Cidades). Altura fixa: o Leaflet precisa de
   altura em pixel — dentro de um cartao que cresce com o conteudo, `100%` da
   zero e o mapa nao aparece. */
.mapa {
  /* Sozinho no cartao (o grafico de barras saiu), o mapa fica na altura da
     tabela do lado — 320px deixava metade do cartao vazia. */
  height: 520px;
  margin-top: 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  z-index: 0;                 /* abaixo do menu: o Leaflet usa z-index alto */
}
.leaflet-container { background: var(--fundo); font: inherit; }

/* Mudador de pagina da tabela de cidades. */
.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.paginacao button[disabled] { opacity: .45; cursor: default; }
/* Posicao no ranking na frente do nome: a pagina 3 comeca na 29a cidade, e sem
   o numero quem virou a pagina perde a conta. */
.tabela .posicao {
  display: inline-block; min-width: 22px; margin-right: 6px;
  color: var(--texto-fraco); font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------ romaneio --- */

/* Cabecalho do romaneio e barra de filtros do relatorio: campos lado a lado
   que quebram sozinhos no tablet da expedicao, que e' onde a tela mais roda. */
.romaneio-cabecalho,
.romaneio-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}

.romaneio-leitura { display: flex; gap: 12px; align-items: flex-end; }
.romaneio-leitura-campo { flex: 1; min-width: 260px; }

/* A chave tem 44 digitos: fonte de largura fixa deixa conferir o numero lido
   sem contar caractere na tela. */
#campo-nfe {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  letter-spacing: .5px;
}

/* ------------------------------------ Relatorio > Monitoramento de Marcas -- */
.mm-tabela td small.mm-codigos { display: block; color: var(--texto-fraco); font-size: 11px; }
.mm-tabela tfoot th { background: var(--fundo-3); font-size: 13px; color: var(--texto); }
.mm-tabela .mm-ref { color: var(--texto-fraco); font-size: 12px; }
.mm-selo {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-weight: 600;
  background: var(--fundo-3); color: var(--texto-2);
}
.mm-selo.alta { background: rgba(18, 160, 92, .12); color: var(--verde); }
/* Operacoes: Loja, Oficina e Loja/Oficina lado a lado, na barra de filtros. */
/* Cada grupo (Loja, Oficina) numa linha so', com as operacoes lado a lado.
   Os dois grupos dividem a linha quando cabem; quando nao cabem, o segundo
   desce inteiro para baixo do primeiro — nunca quebra operacao solta. */
.mm-ops {
  order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 40px;
}
.mm-ops-grupo { display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto; max-width: 100%; }
.mm-ops .mm-empresas { flex-wrap: nowrap; overflow-x: auto; }
.mm-ops-topo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.mm-ops .mm-empresa b { color: var(--acento); }
.mm-ops-linha .mm-empresas-titulo small { text-transform: none; letter-spacing: 0; }
.mm-form {
  display: grid; gap: 10px 14px; align-items: end; margin-bottom: 14px;
  /* marca | nome | linha que entra | linha que sai | botoes */
  grid-template-columns:
    minmax(150px, 1fr) minmax(160px, 1.2fr)
    minmax(150px, .9fr) minmax(150px, .9fr) auto;
}
/* Com a caixa de criterio sao cinco campos na faixa: os botoes ganham a
   linha de baixo inteira em vez de espremer o ultimo deles. */
.mm-form .acoes { display: flex; gap: 8px; grid-column: 1 / -1; }
.mm-criterio .mm-criterio-caixa {
  display: flex; align-items: center; gap: 6px; min-height: 34px;
}
.mm-criterio input { margin: 0; }
.mm-criterio b { font-weight: 600; font-size: .86rem; line-height: 1.2; }
/* Campo sem efeito nao pode parecer campo em uso — mas tambem nao some: o
   que esta gravado continua a vista, apagado. */
.mm-form .campo.desligado { opacity: .45; }
.mm-form .campo.desligado .tags-container { pointer-events: none; }
/* Cinco campos nao cabem lado a lado antes disto: os dois de linha carregam
   etiqueta ("BAB · EMBREAGEM PESADA") e apertados nao se leem. */
@media (max-width: 1150px) {
  .mm-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mm-form { grid-template-columns: 1fr; }
}
/* Empresas numa linha, logo abaixo das datas, separadas por traco vertical. */
.mm-empresas-linha {
  flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--borda);
}
.mm-empresas-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-fraco);
}
.mm-empresas { display: flex; flex-wrap: wrap; align-items: center; order: 3; flex-basis: 100%; }
.mm-empresa {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 3px 8px; font-size: 12px; white-space: nowrap;
  border-left: 1px solid var(--borda);
}
.mm-empresa:first-child { border-left: 0; padding-left: 0; }
.mm-empresa input { margin: 0; }
.mm-empresa:has(input:not(:checked)) span { color: var(--texto-fraco); text-decoration: line-through; }
.mm-empresas-acoes { display: flex; gap: 6px; order: 2; }
.mm-empresas-titulo { order: 1; }
/* Botao Consultar na largura da pagina, entre as marcas e o quadro. */
.mm-consultar { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.mm-consultar .botao { width: 100%; padding: 12px; font-size: 15px; justify-content: center; }
.mm-consultar .dica { text-align: center; color: var(--amarelo); }
.mm-consultar .dica:empty { display: none; }
/* Quadro com filtro mexido e ainda nao consultado: apagado, para ninguem ler
   numero de um recorte que nao e' o da tela. */
.mm-desatualizado { opacity: .45; }
.mm-form .dica:empty { display: none; }
/* Marcas monitoradas no painel de filtros, abaixo das operacoes. */
.mm-marcas-corpo { order: 3; flex-basis: 100%; }
.mm-marcas-linha .mm-empresas-titulo small { text-transform: none; letter-spacing: 0; }
.mm-marcas-corpo .mm-form { margin-bottom: 10px; }
.mm-abater { align-self: center; white-space: nowrap; }
/* "Codigo(s) de marca no ERP | RE = SACHS REMAN": o nome na linha do titulo. */
.mm-codigos-nome { color: var(--acento); font-weight: 600; text-transform: none; letter-spacing: 0; }
.mm-codigos-nome:not(:empty)::before { content: " | "; color: var(--texto-fraco); font-weight: 400; }
.modal-confirmar .botao.perigo { background: var(--vermelho); color: #fff; }
.mm-sem-produto { display: block; color: var(--vermelho); font-size: 11px; font-weight: 600; }
/* Marcas monitoradas recolhido: o titulo vira botao de abrir e fechar. */
.mm-recolher {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px; text-align: left;
}
.mm-recolher b { color: var(--texto-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.mm-recolher:hover, .mm-recolher:focus-visible { color: var(--acento); }
.mm-seta { display: inline-block; transition: transform .15s; }
.mm-recolher.aberto .mm-seta { transform: rotate(90deg); }
/* Produtos com EMB na descricao fora da linha: pede atencao sem gritar. */
.mm-fora { color: var(--amarelo); font-weight: 600; cursor: help; }
.mm-fora.zero { color: var(--texto-fraco); font-weight: 400; }
/* Relogio do giro automatico, ao lado do titulo do dia a dia. */
.giro-diario { font-size: 12px; font-weight: 400; color: var(--texto-fraco); margin-left: 6px; }

/* ------------------------------ Estoque > Monitoramento Pedidos ---------- */
/* Linha clicavel: o dia abre o detalhe logo abaixo do quadro. */
.mp-linha { cursor: pointer; }
.mp-linha:hover td { background: var(--fundo-3); }
.mp-linha.aberta td { background: var(--fundo-3); box-shadow: inset 3px 0 0 var(--acento); }
/* Pedido que saiu sem passar pelo app: e' o numero que se cobra. */
.mp-falta { color: var(--vermelho); font-weight: 600; }
/* Percentual conferido com barra atras do numero: a coluna se le de longe,
   correndo o olho, sem comparar dois numeros em cada linha. */
.mp-barra {
  position: relative; display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: 96px; padding: 3px 8px; border-radius: 6px;
  background: var(--fundo-3); overflow: hidden;
}
.mp-barra-cheia {
  position: absolute; inset: 0 auto 0 0; background: var(--borda);
}
.mp-barra b { position: relative; font-variant-numeric: tabular-nums; }
.mp-barra.ok .mp-barra-cheia { background: rgba(18, 160, 92, .35); }
.mp-barra.alerta .mp-barra-cheia { background: rgba(214, 158, 46, .35); }
.mp-barra.ruim .mp-barra-cheia { background: rgba(214, 69, 69, .30); }
/* Rodape: uma linha por empresa e o total do periodo, com pesos diferentes. */
.mp-tabela tfoot .mp-resumo th { background: var(--fundo-2); font-weight: 600; }
.mp-tabela tfoot .mp-total th { background: var(--fundo-3); font-size: 13px; }
/* Detalhe do dia: uma tabela por lista, com o titulo explicando a lista. */
.mp-lista { margin-top: 14px; }
.mp-lista h3 { font-size: 14px; margin: 0 0 6px; }
.mp-lista h3 small { color: var(--texto-fraco); font-weight: 400; margin-left: 6px; }