:root{
  --verde-escuro:#004735;
  --verde-medio:#007A5A;
  --verde-titulo:#006C50;
  --verde-neon:#00EE72;
  --verde-ok:#53FF53;
  --verde-cel:#BDFFBD;
  --vermelho-cel:#FFB3B3;
  --vermelho-forte:#FF8585;
  --vinho:#9A0000;
  --amarelo:#FFFF00;
  --grade:#BFC8C0;
  --grade-forte:#8FA396;
  --texto:#1A1A1A;
  --cinza:#5E6B63;
  --destaque:var(--verde-neon);           /* verde claro do botão de equipe — substitui o amarelo fora do Ponto de Atenção e da grade */
  --destaque-hover:#00D468;
  --aberto-bg:#C9E6FF;                    /* cor própria dos "grupos em aberto", pra não se confundir com o resto da página (agora mais verde) */
  --aberto-texto:#003A66;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#FFFFFF;color:var(--texto);
  font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-size:13px;line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.envelope{max-width:1460px;margin:0 auto;padding:0 16px 56px}

/* ---------- barra superior ---------- */
.topo{background:var(--verde-escuro);color:#fff;position:sticky;top:0;z-index:40}
.topo-interno{max-width:1460px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end}
.marca{display:flex;align-items:baseline;gap:12px;margin-right:auto}
.marca .sigla{font-size:30px;font-weight:bold;color:var(--verde-neon);letter-spacing:.5px;line-height:1}
.marca .legenda{font-size:12px;color:#B7D3C7}
.campo{display:flex;flex-direction:column;gap:3px}
.campo label{font-size:11px;color:#B7D3C7;font-weight:bold}
.campo select{
  font-family:inherit;font-size:13px;font-weight:bold;color:#000;
  background:var(--verde-neon);border:1px solid #00A84F;border-radius:0;padding:6px 26px 6px 8px;min-width:172px;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0l4.5 6L9 0z' fill='%23004735'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
}
select:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amarelo);outline-offset:1px}
.acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{
  font-family:inherit;font-size:12px;font-weight:bold;cursor:pointer;border-radius:0;
  padding:8px 13px;border:1px solid var(--verde-escuro);background:var(--verde-medio);color:#fff;
}
.btn:hover{background:#00916B}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-amarelo{background:var(--destaque);color:#000;border-color:#00A84F}
.btn-amarelo:hover{background:var(--destaque-hover)}
.btn-vazado{background:transparent;color:#CFE6DA;border-color:#2C6E58}
.btn-vazado:hover{background:#01573F}

/* ---------- blocos ---------- */
.bloco{border:1px solid var(--grade-forte);margin-top:14px}
.faixa{background:var(--verde-escuro);color:#fff;font-weight:bold;font-size:13px;padding:6px 10px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.faixa .direita{margin-left:auto;display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;font-weight:normal}

/* cabeçalho do vendedor, espelhando a aba VENDEDOR */
.cartao-vendedor{display:grid;grid-template-columns:minmax(260px,1.3fr) 190px;gap:0}
.cv-nome{background:var(--verde-escuro);color:#fff;font-size:17px;font-weight:bold;padding:10px 12px;border-right:1px solid var(--grade-forte)}
.cv-nome small{display:block;font-size:11.5px;font-weight:normal;color:#B7D3C7;margin-top:3px}
.cv-pct{background:var(--verde-medio);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:8px 12px}
.cv-pct .rot{font-size:11px;font-weight:bold;color:#CDEFE2}
.cv-pct .val{font-size:30px;font-weight:bold;line-height:1.1}
.cv-pct.ok{background:var(--verde-ok);color:#000}
.cv-pct.ok .rot{color:#00401E}
.cv-pct.ruim{background:var(--vermelho-forte);color:var(--vinho)}
.cv-pct.ruim .rot{color:var(--vinho)}
.totais{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--grade-forte)}
.total-cel{border-right:1px solid var(--grade);text-align:center}
.total-cel:last-child{border-right:0}
.total-cel .rot{background:var(--verde-escuro);color:#fff;font-size:11px;font-weight:bold;padding:4px 6px}
.total-cel .val{font-size:22px;font-weight:bold;padding:7px 6px}
.total-cel.amarelo .rot{background:var(--destaque);color:#000}
.total-cel.amarelo .val{color:#00401E}

/* ---------- ponto de atenção (única faixa que continua amarela) ---------- */
.faixa-atencao{background:var(--amarelo);color:#000;border-bottom:1px solid var(--grade-forte)}
.faixa-atencao .direita{font-size:11.5px;color:#4A3B00}

/* ---------- resumo por cliente (mesmo verde do botão de equipe, não mais amarelo) ---------- */
.faixa-resumo{background:var(--destaque);color:#000;border-bottom:1px solid var(--grade-forte)}
.faixa-resumo .direita{font-size:11.5px;color:#00401E}
.atencao-grade{display:grid;grid-template-columns:repeat(4,1fr);background:#fff}
.at-card{border-right:1px solid var(--grade);padding:8px 10px;cursor:pointer;display:flex;gap:9px;align-items:flex-start}
.at-card:last-child{border-right:0}
.at-card:hover,.at-card.marcada{background:#FFF9C4}
.at-pos{background:var(--vermelho-forte);color:var(--vinho);font-weight:bold;font-size:14px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--vinho);flex:none}
.at-corpo{min-width:0}
.at-nome{font-weight:bold;font-size:12.5px;line-height:1.2;word-break:break-word}
.at-meta{color:var(--cinza);font-size:11px;margin-top:2px}
.at-numeros{display:flex;align-items:baseline;gap:8px;margin-top:5px}
.at-pct{background:var(--vermelho-forte);color:var(--vinho);font-weight:bold;font-size:15px;padding:1px 6px;border:1px solid var(--grade-forte)}
.at-falta{font-size:11.5px;color:var(--vinho);font-weight:bold}
.atencao-vazio{padding:12px;background:var(--verde-cel);color:#00401E;font-weight:bold;font-size:12.5px}


/* ---------- resumo de grupos em aberto ---------- */
.res-cliente{border-bottom:2px solid var(--verde-escuro)}
.res-cliente:last-child{border-bottom:0}
.res-cab{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:6px 10px;background:#F4F7F3;border-bottom:1px solid var(--grade)}
.res-loja{font-weight:bold;font-size:13px}
.res-meta{font-size:11.5px;color:var(--cinza)}
.res-contagem{margin-left:auto;font-weight:bold;font-size:12px;background:var(--vermelho-forte);color:var(--vinho);padding:1px 8px;border:1px solid var(--grade-forte)}
.res-contagem.zero{background:var(--verde-cel);color:#00401E}
table.res-tabela{font-size:12px}
table.res-tabela thead th{background:var(--verde-medio)}
.res-grupo{font-weight:bold;white-space:nowrap;width:86px}
.res-item{line-height:1.3}
.res-ean{color:var(--cinza);font-size:11px;display:inline-block;min-width:104px}
.res-dica{font-size:11px;color:var(--vinho);font-weight:bold;margin-top:2px}
.res-secao{border-top:1px solid var(--grade)}
.res-titulo{background:var(--destaque);color:#000;font-weight:bold;font-size:11.5px;padding:4px 10px}
/* grupos em aberto (nenhum item vendido): cor própria, pra não se confundir
   com o resto da página, que agora usa o mesmo verde do botão de equipe */
.res-titulo-aberto{background:var(--aberto-bg);color:var(--aberto-texto)}

/* ---------- tabelas ---------- */
.rolagem{overflow:auto;background:#fff}
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{border-left:1px solid var(--grade);border-right:1px solid var(--grade);border-top:0;border-bottom:1px solid var(--grade-forte);padding:5px 7px}
table:not(.grade) tbody tr:hover td{background:var(--destaque)!important}
thead th{background:var(--verde-escuro);color:#fff;font-weight:bold;text-align:left;white-space:nowrap;border-color:#0A5C46}
td.num,th.num{text-align:right}
td.meio,th.meio{text-align:center}
table:not(.grade) tbody tr:nth-child(even) td{background:#F4F7F3}
tbody tr.marcada td{background:#DFFFEA}
.cel-ok{background:var(--verde-ok)!important;font-weight:bold;text-align:right}
.cel-ruim{background:var(--vermelho-forte)!important;color:var(--vinho);font-weight:bold;text-align:right}
.selo{display:inline-block;padding:1px 6px;border:1px solid var(--grade-forte);font-size:11px;white-space:nowrap}
.loja-nome{font-weight:bold}
.loja-cod{color:var(--cinza);font-size:11px}
.clicavel{cursor:pointer}
.falta-ok{color:#046B2E;font-weight:bold}
.falta-nao{color:var(--vinho);font-weight:bold}

/* ---------- grade produto × loja (mesmo desenho da planilha) ---------- */
.grade-caixa{overflow:auto;max-height:80vh;background:#fff;-webkit-overflow-scrolling:touch}
table.grade{font-size:16px;border-collapse:collapse;width:auto;min-width:100%}
table.grade th,table.grade td{border:1px solid var(--grade-forte);padding:7px 8px;line-height:1.35}
table.grade .fixa{position:sticky;left:0;z-index:2}
table.grade .fixa-ean{left:0;min-width:104px;width:104px;max-width:104px}
table.grade .fixa-prod{left:104px;min-width:86px;width:86px;max-width:86px}
table.grade .fixa-desc{left:190px;white-space:nowrap}
/* cabeçalho: células que ocupam as colunas 1+2 juntas (colspan=2) não tinham
   largura própria e cresciam conforme o texto ("TODOS OS CLUSTERS" etc.),
   empurrando a coluna GRUPO/DESCRIÇÃO pra fora do alinhamento com o corpo
   da tabela e comendo o espaço que deveria sobrar pra rolagem dos clientes. */
table.grade thead th.fixa[colspan]{width:190px;min-width:190px;max-width:190px;white-space:normal;overflow-wrap:break-word;word-break:break-word}
table.grade thead th{background:var(--verde-escuro);color:#fff;font-weight:bold;text-align:center}
table.grade thead .fixa{z-index:4}
.lin-nome th{font-size:20px;padding:10px}
.rot-nome{text-align:center!important;letter-spacing:.3px}
.lin-pctv th{font-size:18px}
.cel-codigo{background:var(--verde-neon)!important;color:#000!important;font-size:15px}
.cel-valor{background:#fff!important;color:#000!important;font-size:18px}
.cel-cluster{background:#7BE8A0!important;color:#000!important;font-size:34px;font-weight:bold;text-align:center!important;letter-spacing:1px}
th.rot-amarelo{background:var(--amarelo)!important;color:#000!important;font-size:14px}
th.vpct-ok{background:var(--verde-ok)!important;color:#000!important;font-size:18px}
th.vpct-ruim{background:var(--vermelho-forte)!important;color:var(--vinho)!important;font-size:18px}
th.vfalta{background:var(--amarelo)!important;color:var(--vinho)!important;font-size:18px}
th.vfalta.zero{background:var(--verde-cel)!important;color:#00401E!important}
td.cel-ean{background:var(--verde-escuro);color:#fff;font-weight:bold;text-align:center;font-size:14px}
td.cel-prod{background:var(--verde-escuro);color:#fff;font-weight:bold;text-align:center;font-size:14px}
td.cel-desc{background:#fff;color:#000;text-align:left}
table.grade tbody tr:nth-child(even) td.cel-desc{background:#EDF1EC}
table.grade tbody tr:hover td.cel-desc{background:var(--amarelo)}
td.q{text-align:center;font-weight:bold;font-size:19px;min-width:80px}
td.q.ok{background:var(--verde-cel)}
td.q.ruim{background:var(--vermelho-cel);color:var(--vinho)}
td.q.fora{background:repeating-linear-gradient(45deg,#F2F4F1,#F2F4F1 4px,#E4E8E3 4px,#E4E8E3 8px);color:#9AA79F;font-weight:normal}
.col-cliente{min-width:74px}

.legenda{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 10px;font-size:11.5px;color:var(--cinza);border-top:1px solid var(--grade)}
.legenda span{display:flex;align-items:center;gap:6px}
.chave{width:14px;height:14px;border:1px solid var(--grade-forte);display:inline-block}
.chave.ok{background:var(--verde-cel)}
.chave.ruim{background:var(--vermelho-cel)}
.chave.fora{background:repeating-linear-gradient(45deg,#F2F4F1,#F2F4F1 4px,#E4E8E3 4px,#E4E8E3 8px)}
.alternador{display:flex;align-items:center;gap:6px;font-size:12px;color:#fff;cursor:pointer;font-weight:normal}
.alternador input{width:15px;height:15px;accent-color:var(--verde-neon);margin:0}
.busca{font-family:inherit;font-size:12px;padding:4px 7px;border:1px solid var(--grade-forte);background:#fff;min-width:170px}
.btn-expandir{font-family:inherit;font-size:12px;font-weight:bold;padding:5px 10px;border:1px solid #fff;background:transparent;color:#fff;cursor:pointer;white-space:nowrap}
.btn-expandir:hover{background:rgba(255,255,255,.15)}
#bloco-grade.grade-tela-cheia{position:fixed;inset:0;z-index:1000;margin:0;background:#fff;display:flex;flex-direction:column;overflow:hidden}
#bloco-grade.grade-tela-cheia .grade-caixa{flex:1;max-height:none}
#bloco-grade.grade-tela-cheia .legenda{flex:0 0 auto}
body.grade-tela-cheia-ativa{overflow:hidden}
.vazio{padding:30px 18px;text-align:center;color:var(--cinza)}
.vazio strong{display:block;color:var(--texto);margin-bottom:4px}

/* ---------- aviso discreto de "sem dados" ---------- */
.aviso-sem-dados{display:none;background:#FFF9C4;color:#4A3B00;border-bottom:1px solid var(--grade-forte);font-size:12.5px;padding:8px 16px;text-align:center}
.aviso-sem-dados.ativo{display:block}
.aviso-sem-dados a{color:var(--verde-titulo);font-weight:bold;cursor:pointer;text-decoration:underline}

/* ============================================================
   RODAPÉ + carregamento do Excel (função administrativa/discreta)
   ============================================================ */
.rodape{margin-top:16px;font-size:11.5px;color:var(--cinza);border-top:2px solid var(--verde-escuro);padding-top:10px}
.rodape p{margin:0 0 5px;max-width:96ch}
.rodape-dados{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--grade)}
.rodape-dados .sep{color:var(--grade-forte)}
.rodape-dados .arquivo{font-weight:bold;color:var(--texto)}
.link-discreto{
  font-family:inherit;font-size:11.5px;font-weight:bold;color:var(--verde-titulo);
  background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline;
  display:inline-flex;align-items:center;gap:4px;
}
.link-discreto:hover{color:var(--verde-escuro)}
.link-discreto .icone{display:inline-block;transition:transform .3s}
.link-discreto[aria-expanded="true"] .icone{transform:rotate(180deg)}

.painel-atualizar{
  display:none;margin-top:10px;border:1px dashed var(--grade-forte);background:#F9FBF9;
  padding:14px;max-width:520px;
}
.painel-atualizar.aberto{display:block}
.painel-atualizar .zona{
  border:2px dashed var(--grade-forte);padding:18px;text-align:center;background:#fff;cursor:pointer;
}
.painel-atualizar .zona.sobre-arraste{border-color:var(--verde-medio);background:#EFFAF5}
.painel-atualizar .zona strong{display:block;color:var(--texto);margin-bottom:4px;font-size:12.5px}
.painel-atualizar .zona span{font-size:11.5px;color:var(--cinza)}
.painel-atualizar .aceitos{margin-top:8px;font-size:10.5px;color:var(--cinza);text-align:center}
.vinculo-auto{margin-top:8px;font-size:11px}
.vinculo-info{color:var(--cinza)}
.vinculo-info strong{color:var(--texto)}
.painel-status{margin-top:8px;font-size:11.5px;font-weight:bold;min-height:16px}
.painel-status.processando{color:var(--verde-titulo)}
.painel-status.sucesso{color:#046B2E}
.painel-status.erro{color:var(--vinho)}

.mapa-erro{margin-top:10px;padding:10px;background:#FFF3F3;border:1px solid var(--vermelho-forte)}
.mapa-erro p{margin:0 0 8px;font-size:12px;color:var(--vinho)}
.mapa-linha{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.mapa-linha label{font-size:11.5px;font-weight:bold;min-width:150px}
.mapa-linha select{font-family:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--grade-forte);flex:1;min-width:180px}

@media (max-width:900px){
  .cartao-vendedor{grid-template-columns:1fr}
  .cv-nome{border-right:0;border-bottom:1px solid var(--grade-forte)}
  .totais{grid-template-columns:repeat(2,1fr)}
  .atencao-grade{grid-template-columns:repeat(2,1fr)}
  .at-card:nth-child(2n){border-right:0}
  .at-card:nth-child(-n+2){border-bottom:1px solid var(--grade)}
  .marca{flex:1 1 100%}
  .campo{flex:1 1 150px}
  .campo select{min-width:0;width:100%}
  .painel-atualizar{max-width:none}
}
/* celular: a coluna fixa de descrição não tinha limite de largura e
   "vazava" pra fora da tela, sem sobrar espaço pra rolar até os clientes.
   Aqui EAN + PRODUTO + GRUPO/DESCRIÇÃO ficam travados numa faixa estreita
   com quebra de linha, e o resto da grade (clientes e quantidades) rola
   normalmente pra direita. */
@media (max-width:640px){
  table.grade{font-size:12px}
  table.grade .fixa-ean{width:46px;min-width:46px;max-width:46px;font-size:8.5px;padding:5px 3px;white-space:normal;word-break:break-all;line-height:1.15}
  table.grade .fixa-prod{left:46px;width:54px;min-width:54px;max-width:54px;font-size:9.5px;padding:5px 3px;white-space:normal;word-break:break-word;line-height:1.15}
  table.grade .fixa-desc{left:100px;width:120px;min-width:120px;max-width:120px;white-space:normal;font-size:10.5px;line-height:1.2;padding:5px 4px}
  table.grade thead th.fixa[colspan]{width:100px;min-width:100px;max-width:100px;font-size:8.5px;padding:5px 3px}
  table.grade .cel-cluster{font-size:11px;padding:5px 3px}
  .col-cliente{min-width:62px}
  .cel-codigo{font-size:10.5px}
  .cel-valor{font-size:14px}

  /* expandido em tela cheia: sobra mais espaço, então aumenta tudo de novo
     pra ficar mais fácil de ler no celular */
  #bloco-grade.grade-tela-cheia table.grade{font-size:14px}
  #bloco-grade.grade-tela-cheia table.grade .fixa-ean{width:56px;min-width:56px;max-width:56px;font-size:10px}
  #bloco-grade.grade-tela-cheia table.grade .fixa-prod{left:56px;width:64px;min-width:64px;max-width:64px;font-size:11px}
  #bloco-grade.grade-tela-cheia table.grade .fixa-desc{left:120px;width:150px;min-width:150px;max-width:150px;font-size:12px}
  #bloco-grade.grade-tela-cheia table.grade thead th.fixa[colspan]{width:120px;min-width:120px;max-width:120px;font-size:10px}
  #bloco-grade.grade-tela-cheia table.grade .cel-cluster{font-size:13px}
  #bloco-grade.grade-tela-cheia .col-cliente{min-width:78px}
  #bloco-grade.grade-tela-cheia .cel-codigo{font-size:12px}
  #bloco-grade.grade-tela-cheia .cel-valor{font-size:16px}
  #bloco-grade.grade-tela-cheia .faixa{flex-wrap:wrap;gap:6px}
  #bloco-grade.grade-tela-cheia .btn-expandir{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- impressão A4 retrato ----------
   As regras ficam numa classe para que o JS possa aplicá-las na tela,
   medir a altura real e reduzir a escala até caber numa folha só. */
@page{size:A4 portrait;margin:8mm}
body.impressao{font-size:8.5pt}
body.impressao .topo,body.impressao .acoes,body.impressao .ferramentas,body.impressao .legenda-tela,
body.impressao #bloco-vendedor,body.impressao #bloco-atencao,body.impressao #bloco-clientes,
body.impressao .rodape,body.impressao .aviso-sem-dados,body.impressao #bloco-grade>.faixa{display:none!important}
body.impressao .envelope{max-width:none;padding:0}
body.impressao .bloco{margin-top:0;border:0}
body.impressao .rolagem{overflow:visible}
body.impressao .grade-caixa{max-height:none;overflow:visible}
body.impressao table.grade{font-size:13pt;width:100%;table-layout:auto}
body.impressao td.cel-desc,body.impressao .fixa-desc{font-family:"Arial Narrow","Liberation Sans Narrow","DejaVu Sans Condensed",Arial,sans-serif;letter-spacing:-.1px}
body.impressao table.grade .fixa,body.impressao table.grade thead th{position:static}
body.impressao table.grade th,body.impressao table.grade td{padding:3px 4px;line-height:1.35;height:auto}
body.impressao table.grade .fixa-ean{min-width:0;width:auto}
body.impressao table.grade .fixa-prod{min-width:0;width:auto}
body.impressao table.grade .fixa-desc{min-width:0;max-width:none}
body.impressao .lin-nome th{font-size:17pt;padding:6px}
body.impressao .lin-pctv th,body.impressao .cel-valor,body.impressao th.vpct-ok,
body.impressao th.vpct-ruim,body.impressao th.vfalta,body.impressao td.q{font-size:14pt}
body.impressao .cel-cluster{font-size:26pt}
body.impressao td.cel-ean,body.impressao td.cel-prod,body.impressao .cel-codigo,
body.impressao th.rot-amarelo{font-size:10pt;padding:3px 3px}
body.impressao td.q{padding:3px 5px;min-width:0}
body.impressao #bloco-resumo .faixa-atencao{border:1px solid var(--grade-forte)}
body.impressao table.res-tabela{font-size:8.5pt}
body.impressao table.res-tabela th,body.impressao table.res-tabela td{padding:1px 4px;line-height:1.15}
body.impressao .res-item{line-height:1.15}
body.impressao .res-cab{padding:3px 8px}
body.impressao .res-titulo{padding:3px 8px;font-size:9pt}

@media print{
  html,body,*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  #bloco-grade{break-inside:avoid;break-after:auto;page-break-after:auto}
  #bloco-resumo{break-before:page;page-break-before:always;break-after:auto;border:0}
  .res-cliente{break-inside:avoid}
  tr{break-inside:avoid}
  thead{display:table-header-group}
}