/* App Vendas VD - base mobile-first. Nada aqui colide com a intranet. */
:root{
  --vd-azul:#0b4f9e; --vd-azul2:#1266c6; --vd-claro:#eef3f9;
  --vd-txt:#16202e; --vd-txt2:#65758c; --vd-linha:#dde5ef; --vd-fundo:#f5f7fa;
  --vd-ok:#16a34a; --vd-alerta:#d97706; --vd-erro:#dc2626;
  --vd-h-topo:68px;   /* 2 linhas desde 03/09: titulo+empresa / acesso+usuario+hora */ --vd-h-abas:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;width:100%;max-width:100%;overflow-x:hidden;
  overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  background:var(--vd-fundo); color:var(--vd-txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  overflow-x:hidden;
}
/* campos: 16px obrigatorio, senao o iOS da zoom ao focar */
input,select,textarea,button{font-family:inherit;font-size:16px}

/* ---------- casca ---------- */
/* CABECALHO DE DUAS LINHAS (03/09/2026)
   Antes era uma linha de 52 px com titulo + empresa. Agora carrega tambem a
   rota COM O NOME, o usuario logado e a hora da ultima busca - o Jhosef abriu
   o app logado na EIXOSUL e o topo dizia "Santa Rosa", que era um valor fixo
   no JS.
   Cada pedaco tem max-width propria e reticencias: em 356 px, nome comprido
   precisa ENCURTAR, nunca empurrar o vizinho para fora da caixa. */
.vd-topo{
  position:fixed;top:0;left:0;right:0;min-height:var(--vd-h-topo);z-index:20;
  background:var(--vd-azul);color:#fff;display:flex;flex-direction:column;
  justify-content:center;gap:2px;padding:6px 14px;
}
.vd-topo .vd-topo-l1{display:flex;align-items:center;gap:8px;min-width:0}
.vd-topo .vd-topo-l2{display:flex;align-items:center;gap:8px;min-width:0;
  font-size:10.5px;line-height:1.3;color:rgba(255,255,255,.82)}
.vd-topo b{font-size:16px;font-weight:600;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-topo .vd-emp{font-size:11px;background:rgba(255,255,255,.18);padding:3px 8px;
  border-radius:20px;white-space:nowrap;max-width:44%;overflow:hidden;
  text-overflow:ellipsis;flex:0 0 auto;font-weight:600;letter-spacing:.2px}
/* rota + nome: e o pedaco que pode ser longo, entao ele e o que cede espaco */
.vd-topo .vd-acesso{flex:1 1 auto;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* O USUARIO NAO ENCURTA (flex-shrink 0). Medido em 356 px com o pior nome
   de rota do cadastro (302 · LUIS HENRIQUE CARDOSO DE OLIVEIRA): com
   shrink:1 o chip virava "Jhosef V…", cortando justamente a informacao que
   responde "sou eu que estou logado?". Quem cede espaco e o nome da rota,
   que ja aparece inteiro no painel do "Mais". */
.vd-topo .vd-usu{flex:0 0 auto;max-width:46%;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  background:rgba(0,0,0,.18);padding:1px 6px;border-radius:10px}
.vd-topo .vd-atu{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums;
  opacity:.9}
.vd-topo .vd-btn-topo{background:none;border:0;color:#fff;font-size:20px;padding:6px;line-height:1;cursor:pointer}
/* BOTAO DE ATUALIZAR, ao lado do relogio da linha 2.
   ALVO DE TOQUE de 30px: a linha 2 tem 10,5 px de fonte e um botao do
   tamanho da letra seria impossivel de acertar com o dedo. O icone e
   pequeno, a area clicavel nao.
   flex:0 0 auto para nunca ser espremido - quem cede espaco continua
   sendo o nome da rota. */
.vd-topo .vd-btn-atu{flex:0 0 auto;margin-left:2px;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:0;border-radius:50%;
  color:#fff;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.vd-topo .vd-btn-atu .ic{font-size:16px;line-height:1;display:block}
.vd-topo .vd-btn-atu:active{background:rgba(255,255,255,.34)}
.vd-topo .vd-btn-atu[disabled]{opacity:.75}
.vd-topo .vd-btn-atu.girando .ic{animation:vd-gira .8s linear infinite}
@keyframes vd-gira{to{transform:rotate(360deg)}}

/* ===== BARRA "PDF PRONTO" (10/09/2026) =====
   Aparece quando o compartilhar/salvar automatico nao pode acontecer
   porque o gesto do toque ja expirou durante a busca do pedido. Os
   botoes dela sao um gesto NOVO, que o navegador aceita.
   Fica ACIMA da barra de abas (--vd-h-abas) para nao cobrir a navegacao,
   e respeita a area segura do iPhone. */
.vd-pdf-pronto{position:fixed;left:10px;right:10px;z-index:60;
  bottom:calc(var(--vd-h-abas) + 10px + env(safe-area-inset-bottom, 0px));
  background:#fff;border:1px solid var(--vd-linha);border-radius:14px;
  box-shadow:0 8px 28px rgba(16,32,54,.22);padding:11px 12px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vd-pdf-pronto .tx{flex:1 1 140px;min-width:0}
.vd-pdf-pronto .tx b{display:block;font-size:14px;color:var(--vd-txt)}
.vd-pdf-pronto .tx small{display:block;color:var(--vd-txt2);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-pdf-pronto .bt{display:flex;gap:6px;flex:0 0 auto;align-items:center}
.vd-pdf-pronto .vd-btn{padding:8px 12px;font-size:13px;text-decoration:none;
  display:inline-flex;align-items:center;cursor:pointer}
.vd-pdf-pronto .vd-btn.x{padding:8px 10px;background:none;border:0;
  color:var(--vd-txt2);font-size:15px}

.vd-corpo{
  padding:calc(var(--vd-h-topo) + 12px) 12px calc(var(--vd-h-abas) + 20px);
  max-width:100%;
}
.vd-abas{
  position:fixed;bottom:0;left:0;right:0;height:var(--vd-h-abas);z-index:20;
  background:#fff;border-top:1px solid var(--vd-linha);display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.vd-abas button{
  flex:1;background:none;border:0;color:var(--vd-txt2);font-size:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;
}
.vd-abas button .ic{font-size:20px;line-height:1}
.vd-abas button.ativo{color:var(--vd-azul);font-weight:700}

/* ---------- blocos ---------- */
.vd-card{background:#fff;border:1px solid var(--vd-linha);border-radius:12px;padding:14px;margin-bottom:12px}
.vd-card h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.4px;color:var(--vd-txt2)}
.vd-linha{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--vd-linha);font-size:14px}
.vd-linha:last-child{border-bottom:0}
.vd-linha span:first-child{color:var(--vd-txt2)}
.vd-linha span:last-child{font-weight:600;text-align:right}

.vd-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.vd-kpi{background:#fff;border:1px solid var(--vd-linha);border-radius:12px;padding:12px}
.vd-kpi small{display:block;color:var(--vd-txt2);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.vd-kpi b{display:block;font-size:20px;margin-top:4px}

.vd-busca{display:flex;gap:8px;margin-bottom:12px}
.vd-busca input{flex:1;min-width:0;padding:12px;border:1px solid var(--vd-linha);border-radius:10px;background:#fff}
.vd-btn{
  background:var(--vd-azul);color:#fff;border:0;border-radius:10px;padding:12px 16px;
  font-weight:600;cursor:pointer;
}
.vd-btn.secundario{background:#fff;color:var(--vd-azul);border:1px solid var(--vd-azul)}
.vd-btn.largo{width:100%;padding:14px}

/* ---------- linha do tempo (mesma regra da intranet) ---------- */
.vd-timeline{display:flex;flex-direction:column;gap:0}
.vd-etapa{display:flex;gap:12px;align-items:flex-start}
.vd-etapa .marca{display:flex;flex-direction:column;align-items:center;align-self:stretch}
.vd-etapa .bola{width:16px;height:16px;border-radius:50%;border:2px solid var(--vd-linha);background:#fff;flex:0 0 auto}
.vd-etapa .haste{flex:1;width:2px;background:var(--vd-linha);min-height:22px}
.vd-etapa:last-child .haste{display:none}
.vd-etapa .txt{padding-bottom:16px}
.vd-etapa .txt b{display:block;font-size:14px}
.vd-etapa .txt small{color:var(--vd-txt2)}
.vd-etapa.feito .bola{background:var(--vd-ok);border-color:var(--vd-ok)}
.vd-etapa.feito .haste{background:var(--vd-ok)}
/* A ETAPA ONDE O PEDIDO PAROU FICA VERMELHA (10/09/2026, pedido do
   Jhosef: "quando o pedido esta no status aguardando carregamento e ainda
   nao foi entregue, a bolinha deveria ficar vermelha onde esta parado").
   Era azul, e azul se le como "esta andando" - exatamente o oposto do que
   a etapa significa. Pedido entregue nao tem etapa 'agora': todas viram
   'feito' e a trilha fica verde inteira, como ja estava.
   O pulso e discreto de proposito: chamar o olho sem virar alarme, porque
   ficar em "aguardando carregamento" e normal por algumas horas. */
.vd-etapa.agora .bola{border-color:var(--vd-erro);border-width:4px;
  background:#fff;box-shadow:0 0 0 3px rgba(220,38,38,.14)}
.vd-etapa.agora .txt b{color:var(--vd-erro)}
.vd-etapa.agora .txt small{color:var(--vd-erro);opacity:.85}
/* o risquinho que SAI da etapa parada tambem nao esta cumprido */
.vd-etapa.agora .haste{background:var(--vd-linha)}
.vd-etapa.futuro .txt{opacity:.5}

/* tabela larga rola dentro da caixa, nunca a pagina */
.vd-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
/* TABELA QUE ROLA DIZ QUE ROLA (02/09/2026).
   A tabela "Por linha" tem 8 colunas (536px) numa tela de 356px e sempre
   rolou para o lado - mas coluna cortada na borda, sem sombra e sem seta,
   nao parece "tem mais aqui": parece defeito. Foi o que o Jhosef leu como
   "veio cortado mesmo?". Barra de rolagem de celular nao serve de aviso:
   ela aparece durante o arrasto, isto e, para quem ja descobriu.
   A classe 'tem-mais' e posta pelo UIVD.marcarRolagem em quem realmente
   transborda, e sai quando chega no fim. */
.vd-rolagem.tem-mais{
  /* attachment SCROLL, nao LOCAL: com 'local' o degrade anda junto com o
     conteudo e nasce fora da tela, la nos 536px. 'scroll' prende ele na
     borda visivel da caixa, que e onde o corte acontece. */
  background-image:linear-gradient(to left,rgba(11,46,92,.14),rgba(11,46,92,0));
  background-repeat:no-repeat;background-position:right center;
  background-size:24px 100%;background-attachment:scroll}
/* A DICA GRUDA NA BORDA ESQUERDA VISIVEL.
   Na primeira versao ela era text-align:right dentro da caixa que rola -
   ou seja, alinhada aos 536px do conteudo: a propria dica nascia cortada,
   o que seria comico. Com width:max-content + sticky left ela fica pequena
   e sempre visivel, ande a tabela para onde andar. */
.vd-rolagem.tem-mais::after{
  content:'arraste para o lado \2192';
  position:sticky;left:0;width:-moz-max-content;width:max-content;
  display:block;margin-top:2px;padding:3px 2px;
  font-size:11px;font-weight:700;color:var(--vd-txt2,#5c7290);
  letter-spacing:.02em}
.vd-rolagem table{border-collapse:collapse;width:100%;font-size:13px;min-width:520px}
.vd-rolagem th,.vd-rolagem td{padding:8px 10px;border-bottom:1px solid var(--vd-linha);text-align:left;white-space:nowrap}
.vd-rolagem th{background:var(--vd-claro);color:var(--vd-txt2);font-size:11px;text-transform:uppercase}

.vd-vazio{text-align:center;color:var(--vd-txt2);padding:30px 10px;font-size:14px}
.vd-tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;background:var(--vd-claro);color:var(--vd-azul);font-weight:700}
.vd-tag.ok{background:#dcfce7;color:#15803d}
.vd-tag.rota{background:#fef3c7;color:#b45309}

/* desktop: mantem a casca centralizada, sem esticar feio */
@media (min-width:900px){
  .vd-corpo{max-width:820px;margin:0 auto}
  .vd-kpis{grid-template-columns:repeat(4,1fr)}
  .vd-timeline{flex-direction:row}
  .vd-etapa{flex:1;flex-direction:column}
  .vd-etapa .marca{flex-direction:row;align-items:center;width:100%}
  .vd-etapa .haste{min-height:0;height:2px;width:auto}
  .vd-etapa .txt{padding:8px 8px 0 0}
}

/* ================= PLANEJAMENTO ================= */
.vd-topo .vd-perfil{font-size:10px;background:rgba(0,0,0,.22);padding:3px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.5px;cursor:pointer}

.vd-dia{display:flex;align-items:center;gap:12px}
.vd-dia > div:first-child{flex:1;min-width:0}
.vd-dia b{display:block;font-size:15px;text-transform:capitalize}
.vd-dia small{display:block;color:var(--vd-txt2);font-size:11.5px;line-height:1.3;
  white-space:normal;overflow-wrap:anywhere}
.vd-dia-num{text-align:center;background:var(--vd-claro);border-radius:10px;padding:6px 10px;min-width:62px}
.vd-dia-num b{font-size:20px;color:var(--vd-azul);line-height:1.1}
.vd-dia-num small{font-size:9px;line-height:1.1;color:var(--vd-txt2)}
.vd-dia-num.ok{background:#dcfce7} .vd-dia-num.ok b{color:#15803d}
.vd-dia-num.pend{background:#fee2e2} .vd-dia-num.pend b{color:#b91c1c}

.vd-ind-topo{display:flex;gap:8px;align-items:center;margin:0 0 10px;width:100%;
  background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.vd-seta{flex:0 0 14px;color:var(--vd-azul);font-size:13px;line-height:1}
.vd-ind-nome{flex:1 1 auto;min-width:0}
.vd-ind-nome b{display:block;font-size:15px;line-height:1.2}
.vd-ind-nome small{display:block;color:var(--vd-txt2);font-size:10.5px;line-height:1.25;
  /* deixa quebrar em ATE 2 linhas em vez de aparar com "...". Aparar aqui
     escondia justamente a janela de apuracao, que e a informacao que explica
     por que a meta/dia da positivacao e diferente da das outras linhas. */
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.vd-ind.fechado{padding-bottom:12px}
.vd-ind-pct{font-size:19px;font-weight:800;padding:2px 8px;border-radius:8px;background:#dcfce7;color:#15803d;white-space:nowrap}
.vd-ind-pct.baixo{background:#fef3c7;color:#b45309}

/* ANDAMENTO DE HOJE: planejado x meta/dia x digitado agora.
   Fica ACIMA do resumo do mes e com fundo proprio, porque e outra fonte
   (pedidos_avante, 5 min) e outro periodo (hoje). Se parecesse igual ao
   resumo do mes, alguem somaria os dois. */
.vd-agora{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 0 6px;
  padding:6px;background:#eef4fd;border:1px solid #cfe0f7;border-radius:10px}
.vd-agora.ok{background:#eefaf0;border-color:#b7e4c0}
.vd-agora span{text-align:center;font-size:8.5px;color:var(--vd-txt2);
  text-transform:uppercase;letter-spacing:.2px;overflow:hidden}
.vd-agora b{display:block;font-size:clamp(10.5px,3.2vw,13px);color:var(--vd-txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-agora i{display:block;font-style:normal;font-size:8px;line-height:1.2;
  color:var(--vd-txt2);text-transform:none;letter-spacing:0;white-space:nowrap}
.vd-agora .destaque b{color:var(--vd-azul);font-weight:800}
.vd-agora.ok .destaque b{color:#15803d}

.vd-ind-resumo{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:2px}
.vd-ind-resumo span{background:var(--vd-claro);border-radius:8px;padding:5px 3px;
  font-size:9px;color:var(--vd-txt2);text-align:center;text-transform:uppercase;
  letter-spacing:.2px;overflow:hidden}
.vd-ind-resumo b{display:block;color:var(--vd-txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  /* 4 colunas num aparelho de 360px: 'R$ 221 mil' em 13px NAO cabe e era
     cortado. clamp deixa a fonte acompanhar a largura em vez de aparar o
     numero - numero aparado e pior que numero pequeno. */
  font-size:clamp(10.5px, 3.2vw, 13px)}
/* dias uteis QUE SOBRARAM na janela daquele indicador: sem isso a meta/dia
   e um numero solto e o vendedor nao sabe por quanto foi dividido */
.vd-ind-resumo i{display:block;font-style:normal;font-size:8.5px;line-height:1.2;
  color:var(--vd-txt2);text-transform:none;letter-spacing:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

.vd-grade{border-top:1px solid var(--vd-linha)}
.vd-item{display:flex;gap:8px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--vd-linha)}
.vd-item:last-child{border-bottom:0}
.vd-item-esq{flex:1 1 auto;min-width:0}          /* min-width:0 = nao empurra a caixa */
.vd-item-esq > b{display:block;font-size:13.5px;line-height:1.25;
  overflow-wrap:anywhere;word-break:break-word}
.vd-item-dir{flex:0 0 84px;text-align:center}
.vd-item-dir label{display:block;font-size:9px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--vd-txt2);margin-bottom:3px}
.vd-item-dir input{width:100%;max-width:100%;padding:10px 4px;border:1px solid var(--vd-linha);
  border-radius:8px;text-align:center;font-weight:700;background:#fff}
.vd-item-dir input:focus{outline:2px solid var(--vd-azul2);border-color:var(--vd-azul2)}
.vd-item.excede .vd-item-dir input{border-color:var(--vd-erro);background:#fff5f5;color:var(--vd-erro)}
.vd-item.excede .vd-item-dir label{color:var(--vd-erro);font-weight:700}

.vd-chips-n{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.vd-chips-n span{background:var(--vd-claro);border-radius:6px;padding:3px 5px;
  font-size:10px;color:var(--vd-txt2);white-space:nowrap}
.vd-chips-n span b{color:var(--vd-txt);font-size:11.5px}
.vd-chips-n span.dia{background:#e0edff}
.vd-chips-n span.dia b{color:var(--vd-azul)}
.vd-chips-n span.alerta{background:#fef3c7}
.vd-chips-n span.alerta b{color:#b45309}

.vd-barra{position:relative;height:5px;background:var(--vd-linha);border-radius:3px;margin:3px 0}
.vd-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--vd-ok)}
.vd-barra i.atencao{background:#f59e0b} .vd-barra i.critico{background:var(--vd-erro)}
.vd-barra u{position:absolute;top:-3px;width:2px;height:11px;background:var(--vd-txt);opacity:.55}

.vd-ind-pe{display:flex;justify-content:space-between;align-items:center;gap:8px;
  border-top:1px solid var(--vd-linha);margin-top:6px;padding-top:9px;font-size:12px;color:var(--vd-txt2)}
.vd-ind-pe b{color:var(--vd-txt)}
.vd-btn-min{background:var(--vd-claro);border:1px solid var(--vd-linha);color:var(--vd-azul);
  border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}

.vd-transmitir{text-align:center}
.vd-transmitir small{display:block;color:var(--vd-txt2);font-size:11px;margin-top:8px}
.vd-status{font-size:13px;font-weight:700;padding:8px;border-radius:8px;margin-bottom:10px}
.vd-status.ok{background:#dcfce7;color:#15803d}
.vd-status.pend{background:#fef3c7;color:#b45309}

/* ---- supervisor ---- */
.vd-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.vd-chip{background:#fff;border:1px solid var(--vd-linha);color:var(--vd-txt2);border-radius:20px;
  padding:8px 14px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.vd-chip.on{background:var(--vd-azul);border-color:var(--vd-azul);color:#fff}
.vd-kpi b i{font-style:normal;font-size:12px;color:var(--vd-txt2);font-weight:600}

.vd-previsao{border-left:4px solid var(--vd-ok);background:#f8fbff;border-radius:0 10px 10px 0;
  padding:10px 12px;margin:10px 0}
.vd-previsao.ruim{border-left-color:var(--vd-erro);background:#fffafa}
.vd-previsao h3{margin:0 0 4px;font-size:12px}
.vd-sub{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--vd-txt2);
  margin:14px 0 6px;border-top:1px solid var(--vd-linha);padding-top:10px}
.vd-nota{margin:10px 0 0;font-size:12px;color:var(--vd-txt2);background:var(--vd-claro);
  padding:8px 10px;border-radius:8px;line-height:1.35}
.vd-previsao.ruim .vd-nota{background:#fef2f2;color:#b91c1c;font-weight:600}
.vd-linha i{font-style:normal;font-size:11px;color:var(--vd-txt2)}

.vd-vend{border-top:1px solid var(--vd-linha);padding:11px 0}
.vd-vend:first-of-type{border-top:0}
.vd-vend.pend{background:#fffbeb;margin:0 -14px;padding:11px 14px}
.vd-vend-topo{display:flex;gap:8px;align-items:flex-start}
.vd-vend-id{flex:1;min-width:0}
.vd-vend-id b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-vend-id small{font-size:11px;color:var(--vd-txt2)}
.vd-vend-n{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:8px}
.vd-vend-n .n{background:var(--vd-claro);border-radius:8px;padding:5px 3px;text-align:center;overflow:hidden}
.vd-vend-n .n small{display:block;font-size:9px;color:var(--vd-txt2);text-transform:uppercase}
.vd-vend-n .n b{font-size:13px;white-space:nowrap}
.vd-vend-n .n.ok b{color:#15803d} .vd-vend-n .n.ruim{background:#fee2e2} .vd-vend-n .n.ruim b{color:#b91c1c}
.vd-vend .vd-btn-min{margin-top:8px;width:100%}
.vd-tag.pendente{background:#fee2e2;color:#b91c1c}
/* semeado: plano preenchido pelo sistema, nao transmitido pelo
   vendedor. Ambar de proposito - nao e erro (vermelho) nem
   confirmacao (verde): e um aviso de que o numero e provisorio. */
.vd-tag.semeado{background:#fef3c7;color:#92400e}
.vd-legenda{display:block;margin-top:8px;font-size:11px;color:var(--vd-txt2)}
.vd-rolagem td.v-ok{color:#15803d;font-weight:700}
.vd-rolagem td.v-ruim{color:#b91c1c;font-weight:700}
.vd-rolagem td.v-baixo{color:#b45309;font-weight:700}

@media (min-width:900px){
  .vd-item-dir{flex:0 0 120px}
  .vd-chips-n span{font-size:12px}
}

/* aviso de fonte de dados (canto de baixo, some sozinho) */
.vd-aviso-fonte{position:fixed;left:12px;right:12px;bottom:calc(var(--vd-h-abas) + 12px);z-index:40;
  background:#16202e;color:#fff;font-size:12px;padding:10px 12px;border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:.97;transition:opacity .4s,transform .4s;text-align:center}
.vd-aviso-fonte.erro{background:#b91c1c;font-weight:700}
.vd-aviso-fonte.sai{opacity:0;transform:translateY(8px)}

/* ---- filtros da consulta de pedidos ---- */
.vd-filtros{padding-bottom:10px}
.vd-f-linha{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.vd-f-linha label,.vd-f-busca{display:block;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.3px;color:var(--vd-txt2)}
.vd-f-busca{margin-top:8px}
.vd-f-linha input,.vd-f-linha select,.vd-f-busca input{display:block;width:100%;max-width:100%;
  margin-top:3px;padding:10px 8px;border:1px solid var(--vd-linha);border-radius:8px;
  background:#fff;color:var(--vd-txt);font-size:15px}
.vd-f-linha input:focus,.vd-f-busca input:focus,.vd-f-linha select:focus{
  outline:2px solid var(--vd-azul2);border-color:var(--vd-azul2)}
.vd-f-pe{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.vd-f-pe span{font-size:11px;color:var(--vd-txt2)}
.vd-f-pe span.ruim{color:var(--vd-erro);font-weight:700}
.vd-f-pe .vd-btn{padding:10px 20px}

.vd-resultado{font-size:12px;color:var(--vd-txt2);margin:0 2px 10px;padding:0 2px}
.vd-resultado b{color:var(--vd-txt);font-size:14px}

.vd-ped{padding-bottom:10px}
.vd-ped-topo{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px}
.vd-ped-id{flex:1;min-width:0}
.vd-ped-id b{font-size:15px;display:block}
.vd-ped-id small{display:block;font-size:12px;color:var(--vd-txt2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-ped-det{border-top:1px solid var(--vd-linha);margin-top:10px;padding-top:10px}
.vd-ped .vd-btn-min{width:100%;margin-top:8px}

/* filtros: chips quebram linha (nada de corte na borda) */
.vd-chips.vd-chips-wrap{flex-wrap:wrap;overflow:visible}
.vd-chips.vd-chips-wrap .vd-chip{padding:7px 11px;font-size:12px}
.vd-f-bts{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.vd-f-bts .vd-btn-min{padding:10px 12px}
.vd-ped-id b i{font-style:normal;font-size:11px;color:var(--vd-txt2);font-weight:600}
.vd-ped-bts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.vd-ped-bts .vd-btn{padding:12px 6px;font-size:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* nada dentro dos cartoes pode empurrar a caixa */
.vd-card,.vd-card *{max-width:100%}
.vd-linha span:last-child{overflow-wrap:anywhere}

/* atalhos de período: 5 em UMA linha, sempre — nunca quebra, nunca corta */
.vd-chips.vd-chips-dias{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;
  overflow:visible;flex-wrap:nowrap}
.vd-chips.vd-chips-dias .vd-chip{padding:8px 2px;font-size:11px;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* título dos grupos de botões seletores */
.vd-f-titulo{font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--vd-txt2);margin:10px 0 4px}
.vd-f-titulo.primeiro{margin-top:0}

/* ---- barra de filtros: todas as caixas com a MESMA altura, um pouco mais baixas.
   font-size fica em 16px: abaixo disso o iOS dá zoom sozinho ao focar. ---- */
.vd-filtros input,
.vd-filtros select{
  height:38px;                     /* altura única para input, select e date */
  padding:0 8px;                   /* a altura vem do height, não do padding */
  line-height:38px;
  font-size:16px;
  box-sizing:border-box;
  appearance:none;-webkit-appearance:none;
  background-image:none;
}
.vd-filtros select{
  padding-right:26px;              /* espaço da setinha desenhada abaixo */
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2365758c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
}
.vd-filtros input[type=date]{padding-right:4px}
.vd-filtros .vd-chip{height:32px;padding:0 2px;line-height:32px}
.vd-filtros .vd-f-pe .vd-btn{height:38px;padding:0 20px;line-height:38px}
.vd-filtros .vd-f-pe .vd-btn-min{height:38px;padding:0 12px;line-height:38px}

/* texto de exemplo (placeholder) bem mais claro — era o que poluía */
.vd-filtros input::placeholder{color:#b6c0cd;opacity:1;font-weight:400}
.vd-filtros input::-webkit-input-placeholder{color:#b6c0cd}

/* chips: centralizar por flex (line-height deixava o texto baixo na pílula) */
.vd-filtros .vd-chip{display:flex;align-items:center;justify-content:center;line-height:1}

/* ---- alinhamento rígido: nada dentro da barra passa das bordas do cartão.
   O input[type=date] tem largura mínima intrínseca (texto + ícone do calendário)
   maior que a coluna da grade — sem min-width:0 ele empurra e vaza à direita. ---- */
.vd-f-linha{align-items:end}
.vd-f-linha > label{min-width:0;overflow:hidden}
.vd-filtros input,
.vd-filtros select{width:100%;min-width:0;max-width:100%;display:block}
.vd-filtros input[type=date]{padding-right:6px}
/* o botão nativo do calendário fica dentro da caixa, sem transbordar */
.vd-filtros input[type=date]::-webkit-calendar-picker-indicator{
  margin:0;padding:0 0 0 2px;flex:0 0 auto}
.vd-filtros input[type=date]::-webkit-datetime-edit{overflow:hidden}

/* ---- números de situação: FORA dos botões, alinhados na grade ---- */
.vd-badge{display:inline-block;padding:2px 5px;border-radius:6px;font-size:10.5px;
  font-weight:800;line-height:1.15;letter-spacing:-.2px;white-space:nowrap}
.vd-badge.ok    {background:#dcfce7;color:#15803d}
.vd-badge.med   {background:#fef3c7;color:#a16207}
.vd-badge.ruim  {background:#fee2e2;color:#b91c1c}
.vd-badge.neutro{background:#eef2f7;color:#16202e}
/* ---- SITUACAO DO PEDIDO: numero E botao na MESMA celula (03/09/2026) ----
   Antes eram duas grades separadas: .vd-sit-nums com repeat(5,1fr) e os
   botoes numa faixa flex com 7 itens. Cinco nao e sete, entao do sexto em
   diante o numero caia para outra linha e deixava de ficar sobre o seu
   botao. Manter duas grades sincronizadas na mao e um erro esperando a
   proxima situacao ser acrescentada - agora nao ha o que sincronizar.
   auto-fit + minmax deixa o navegador escolher quantas colunas cabem: em
   356 px sao 4, em tela maior sao 7, e o alinhamento e sempre correto. */
.vd-sit-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:5px 4px;margin:0 0 8px}
.vd-sit-grade .cel{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0}
.vd-sit-grade .qtd{font-size:10px;line-height:1.1;color:var(--vd-txt2);font-weight:700;
  text-align:center}
.vd-sit-grade .vd-badge{text-align:center;justify-content:center}
.vd-sit-grade .vd-chip{width:100%;padding:7px 4px;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.vd-sit-grade.prazo{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.vd-f-titulo .vd-sel-n{background:var(--vd-azul);color:#fff;font-size:9.5px;
  padding:2px 6px;border-radius:10px;margin-left:6px;font-weight:700}
.vd-sel-txt{display:inline}

/* mantida por compatibilidade: outras telas ainda usam .vd-sit-nums */
.vd-sit-nums{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:0 0 5px;
  align-items:end}
.vd-sit-nums .cel{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
  justify-content:flex-end;min-height:30px}
.vd-sit-nums .qtd{font-size:9px;line-height:1;color:var(--vd-txt2);font-weight:600}

/* ---- bolinhas das linhas de produto (identidade visual única) ---- */
.vd-bolas{display:inline-flex;gap:3px;align-items:center;background:none!important;padding:0!important}
.vd-bola{width:19px;height:19px;flex:0 0 19px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;line-height:1;letter-spacing:0}
.vd-bola.seca    {background:#1d4ed8;color:#fff}                 /* azul */
.vd-bola.garoto  {background:#f5c400;color:#4a3800}              /* amarelo */
.vd-bola.prof    {background:#7e22ce;color:#fff}                 /* roxo */
.vd-bola.grocery {background:#15803d;color:#fff}                 /* verde escuro */
.vd-bola.pet     {background:#a3e635;color:#1a4d00}              /* verde claro */
.vd-bola.bebidas {background:#ea6a1e;color:#fff}                 /* laranja */

/* cidade cede espaço para as bolinhas (texto longo quebra, bolinha não) */
.vd-chips-n span.cidade{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vd-legenda-linhas{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.vd-legenda-linhas .item{display:flex;align-items:center;gap:6px;font-size:12px;min-width:0}
.vd-legenda-linhas .item .vd-bola{flex:0 0 19px}

/* ================= GANHOS / REMUNERAÇÃO ================= */
.vd-ganho{text-align:center;background:linear-gradient(160deg,#0b4f9e,#0a3f80);color:#fff;border:0}
.vd-ganho small{display:block;font-size:11.5px;opacity:.85;text-transform:uppercase;letter-spacing:.5px}
.vd-ganho > b{display:block;font-size:34px;font-weight:800;line-height:1.15;margin:4px 0 10px}
.vd-ganho .vd-barra{background:rgba(255,255,255,.25);height:8px}
.vd-ganho .vd-barra.grande i{background:#4ade80}
.vd-ganho .vd-barra.grande i.atencao{background:#fbbf24}
.vd-ganho .vd-barra.grande i.critico{background:#f87171}
.vd-ganho-pe{display:flex;justify-content:space-between;gap:8px;font-size:11px;opacity:.9;margin-top:8px}
.vd-ganho-pe b{display:block;font-size:13px;opacity:1}

.vd-op{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--vd-linha)}
.vd-op:last-of-type{border-bottom:0}
.vd-op-ic{flex:0 0 19px}
.vd-op-tx{flex:1;min-width:0}
.vd-op-tx b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vd-op-tx small{color:var(--vd-txt2);font-size:11.5px}
.vd-op-vl{flex:0 0 auto;font-size:15px;font-weight:800;color:#15803d;background:#dcfce7;
  padding:4px 8px;border-radius:8px;white-space:nowrap}
.vd-bola.pos{background:#0b4f9e;color:#fff}

.vd-item-r{border-top:1px solid var(--vd-linha);padding:11px 0}
.vd-item-r-top{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.vd-item-r-top b{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-item-r-pe{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  margin-top:7px;font-size:11.5px;color:var(--vd-txt2)}
.vd-item-r-pe b{font-size:16px;color:var(--vd-txt)}
.vd-item-r-pe b.ok{color:#15803d}
.vd-proximo{margin-top:7px;background:#eff6ff;border-radius:8px;padding:7px 9px;
  font-size:11.5px;color:#1e40af;line-height:1.35}
.vd-proximo b{font-weight:800}
.vd-proximo.teto{background:#dcfce7;color:#15803d}

/* escada de faixas: onde ele está e para onde vai */
.vd-escada{display:flex;gap:2px;height:9px;margin:2px 0 4px}
.vd-escada i{flex:1;background:var(--vd-linha);border-radius:2px;min-width:0}
.vd-escada i.passou{background:#86efac}
.vd-escada i.eu{background:#15803d;box-shadow:0 0 0 2px rgba(21,128,61,.22)}
.vd-escada i.prox{background:#93c5fd;box-shadow:0 0 0 2px rgba(59,130,246,.25)}

.vd-linha.total{border-top:2px solid var(--vd-linha);margin-top:4px;padding-top:9px;font-size:15px}
.vd-linha.total span:last-child{font-size:18px;font-weight:800;color:#15803d}

.vd-ritmo{margin-top:7px;background:#f8fafc;border:1px dashed var(--vd-linha);border-radius:8px;
  padding:6px 9px;font-size:11.5px;color:var(--vd-txt2);line-height:1.35}
.vd-ritmo.ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.vd-ritmo b{color:inherit;font-weight:800}
.vd-ganho-pe span{min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:center}
.vd-ganho-pe span:first-child{text-align:left}
.vd-ganho-pe span:last-child{text-align:right}

.vd-diag{margin-top:10px;background:#0f1218;color:#cbd5e1;border-radius:8px;padding:10px;
  font:11px/1.4 ui-monospace,Menlo,Consolas,monospace;max-height:320px;overflow:auto;
  white-space:pre-wrap;word-break:break-word}

/* =====================================================================
   SAFARI / iOS — passada de compatibilidade
   O app roda em Android (A20/A21/A22) e no iPhone. O que o Safari faz
   diferente e como está resolvido aqui:
   ===================================================================== */

/* 1. 100vh no iOS conta a barra de endereço: a tela "vaza" e dá rolagem.
      svh = altura visível de verdade. Fallback antes, para quem não tem. */
html, body { min-height: 100%; }
@supports (height: 100svh) {
  body { min-height: 100svh; }
}

/* 2. Selects e inputs: o Safari desenha com estilo próprio (canto arredondado
      grande, sombra interna) e ignora o height. Zerar a aparência nativa. */
select, input, textarea, button {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px;                 /* o Safari força 5px em input/textarea */
}
input[type=checkbox] { -webkit-appearance: checkbox; appearance: checkbox; }
input[type=date] { -webkit-appearance: none; min-height: 38px; }
/* o iOS centraliza mal a data; alinhar à esquerda como no Android */
input[type=date]::-webkit-date-and-time-value { text-align: left; }

/* 3. Rolagem interna (tabelas largas) precisa de momentum no iOS */
.vd-rolagem, .vd-chips, .vd-diag {
  -webkit-overflow-scrolling: touch;
}

/* 4. Barras fixas: sem -webkit-transform o iOS às vezes "descola" a barra
      ao rolar. translateZ(0) força camada própria e estabiliza. */
.vd-topo, .vd-abas {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* 5. Área segura do iPhone (notch e barra de gestos) */
.vd-topo { padding-top: calc(6px + env(safe-area-inset-top)); height: auto;
            min-height: var(--vd-h-topo); }
.vd-abas { padding-bottom: env(safe-area-inset-bottom); }
.vd-corpo {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: calc(var(--vd-h-abas) + 20px + env(safe-area-inset-bottom));
}
.vd-aviso-fonte { bottom: calc(var(--vd-h-abas) + 12px + env(safe-area-inset-bottom)); }

/* 6. gap em flex/grid só existe no iOS 14.1+. Nos aparelhos antigos o layout
      ficava colado; margem negativa no container + margem nos itens é o
      fallback que funciona nos dois. */
@supports not (gap: 4px) {
  .vd-chips, .vd-chips-n, .vd-bolas, .vd-ped-bts, .vd-f-bts { margin: -2px; }
  .vd-chips > *, .vd-chips-n > *, .vd-bolas > *, .vd-ped-bts > *, .vd-f-bts > * { margin: 2px; }
  .vd-kpis > *, .vd-sit-nums > *, .vd-ind-resumo > * { margin: 2px; }
}

/* 7. O Safari não tem overscroll-behavior: o "puxa e solta" da página inteira
      aparece. Travar o corpo e rolar só o conteúdo evita o efeito. */
@supports (-webkit-touch-callout: none) {
  body { position: relative; }
  /* impede o zoom por duplo-toque em botões (o JS já bloqueia o gesto) */
  button, .vd-chip, .vd-abas button { touch-action: manipulation; }
}

/* 8. Peso de fonte: o Safari renderiza 800 mais fino que o Chrome no Android.
      Suavização desligada deixa os números com o mesmo peso visual. */
.vd-ganho > b, .vd-badge, .vd-op-vl, .vd-linha.total span:last-child {
  -webkit-font-smoothing: antialiased;
}

/* ================= CLIENTES: grade do dia e carteira ================= */
.vd-dias{display:flex;gap:5px;overflow-x:auto;padding:0 0 8px;margin-bottom:10px;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.vd-dia{flex:0 0 46px;background:#fff;border:1px solid var(--vd-linha);border-radius:10px;
  padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer}
.vd-dia small{font-size:9px;text-transform:uppercase;letter-spacing:.3px;color:var(--vd-txt2)}
.vd-dia b{font-size:16px;line-height:1.1}
.vd-dia i{font-style:normal;font-size:9px;color:var(--vd-azul);font-weight:700}
.vd-dia.fds{background:#f1f5f9;color:var(--vd-txt2)}
.vd-dia.fds i{color:var(--vd-txt2)}
.vd-dia.hoje{border-color:var(--vd-azul2)}
.vd-dia.on{background:var(--vd-azul);border-color:var(--vd-azul);color:#fff}
.vd-dia.on small,.vd-dia.on i{color:rgba(255,255,255,.9)}

.vd-dia-topo{display:flex;align-items:center;gap:10px}
.vd-dia-info{flex:1;min-width:0}
.vd-dia-info b{display:block;font-size:15px;text-transform:capitalize}
.vd-dia-info small{display:block;font-size:11.5px;line-height:1.3;
  color:var(--vd-txt2);
  /* QUEBRA em vez de aparar: aqui vai "data · rota · NOME DO VENDEDOR" e o
     nome era cortado no meio a 360px. Nome de pessoa pela metade faz o
     usuario achar que o app esta com defeito. */
  white-space:normal;overflow-wrap:anywhere}
.vd-resumo-dia{display:flex;gap:6px;margin:-4px 0 10px;padding:0 2px}
.vd-resumo-dia span{font-size:10.5px;color:var(--vd-txt2);background:var(--vd-claro);
  border-radius:6px;padding:3px 7px}
.vd-resumo-dia .emprestado{background:#fef3c7;color:#a16207;font-weight:700}

.vd-sem-grade{text-align:center}
.vd-sem-grade b{display:block;font-size:15px;margin-bottom:4px}
.vd-sem-grade small{display:block;color:var(--vd-txt2);font-size:12px;line-height:1.4}

.vd-cli{background:#fff;border:1px solid var(--vd-linha);border-radius:12px;
  padding:11px 12px;margin-bottom:8px}
.vd-cli-topo{display:flex;gap:9px;align-items:flex-start}
.vd-cli-seq{flex:0 0 34px;height:26px;border-radius:7px;background:var(--vd-claro);
  color:var(--vd-azul);font-size:12px;font-weight:800;display:flex;
  align-items:center;justify-content:center}
.vd-cli-id{flex:1;min-width:0}
.vd-cli-id b{display:block;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.vd-cli-id small{display:block;font-size:11.5px;color:var(--vd-txt2)}
.vd-cli .vd-chips-n{margin-top:7px}
.vd-cli-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.vd-tag.quinz{background:#e0edff;color:#1e40af}
.vd-tag.pet{background:#dcfce7;color:#15803d}
.vd-cli-dias{margin-top:6px;font-size:10.5px;color:var(--vd-txt2)}
.vd-cli-ficha{border-top:1px solid var(--vd-linha);margin-top:9px;padding-top:6px}
.vd-cli .vd-btn-min{width:100%;margin-top:8px}
.vd-gancho{margin-top:8px;background:#f8fafc;border:1px dashed var(--vd-linha);
  border-radius:8px;padding:8px 10px;font-size:11px;color:var(--vd-txt2);line-height:1.35}
.vd-grupo-dia{font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--vd-txt2);margin:14px 2px 7px;display:flex;gap:6px;align-items:center}
.vd-grupo-dia i{font-style:normal;background:var(--vd-claro);border-radius:20px;
  padding:1px 7px;font-size:10px;font-weight:700;color:var(--vd-azul)}
.vd-dica{display:block;font-size:10.5px;color:var(--vd-txt2);margin-top:4px;line-height:1.35}

/* chips de modo (2 opções): largura pelo texto, sem cortar */
.vd-chips.vd-chips-modo{display:flex;gap:6px;margin-bottom:10px;flex-wrap:nowrap;overflow:visible}
.vd-chips.vd-chips-modo .vd-chip{flex:0 1 auto;height:34px;padding:0 14px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:13px}


/* ---------------------------------------------------------------------
   HISTÓRICO DE COMPRAS na ficha do cliente
   Sparkline em SVG inline: nenhuma biblioteca baixada. currentColor para a
   linha herdar a cor do contexto (cinza normal, vermelho quando "parou").
   --------------------------------------------------------------------- */
.vd-hist{border-top:1px solid var(--vd-linha);margin-top:8px;padding-top:8px}
.vd-hist-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 8px;background:var(--vd-claro);border-radius:8px;margin-bottom:6px}
.vd-hist-topo b{font-size:15px}
.vd-hist-topo small{flex:1 1 auto;min-width:0;color:var(--vd-txt2);font-size:10.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-hist-linha{display:flex;align-items:center;gap:8px;padding:5px 8px;
  border-bottom:1px solid var(--vd-linha)}
.vd-hist-linha:last-child{border-bottom:0}
.vd-hist-nome{flex:1 1 auto;min-width:0}
.vd-hist-nome b{display:block;font-size:12.5px}
.vd-hist-nome small{display:block;color:var(--vd-txt2);font-size:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 'parou de comprar' é a informação mais acionável da ficha: fica vermelha
   e com etiqueta, não escondida num número */
.vd-hist-linha.parou{background:#fef2f2}
.vd-hist-linha.parou .vd-spark{color:#dc2626}
.vd-hist-alerta{background:#dc2626;color:#fff;font-size:9px;font-weight:700;
  text-transform:uppercase;border-radius:6px;padding:2px 6px;white-space:nowrap}
.vd-spark{width:74px;height:24px;flex:0 0 auto;color:var(--vd-azul);
  overflow:visible}
.vd-spark polyline{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vd-spark circle{fill:currentColor}
.vd-hist-nunca{margin-top:6px;padding:6px 8px;background:#fffbeb;
  border:1px solid #fde68a;border-radius:8px;font-size:11px;color:#92400e;
  line-height:1.4}


/* ---------------------------------------------------------------------
   RECOMENDAÇÃO DE VENDA na ficha do cliente
   Cor por TIPO, do mais fácil para o mais difícil:
     verde  = falta pouco para a cobertura (o pedido já existe)
     âmbar  = parou de comprar (já compra, é retomar)
     cinza  = nunca comprou (abertura)
   A cor carrega a prioridade sem precisar de número na tela.
   --------------------------------------------------------------------- */
.vd-rec{display:grid;gap:5px;margin:8px 0 4px}
.vd-rec-item{border-radius:8px;padding:7px 9px;border-left:4px solid}
.vd-rec-item b{display:block;font-size:12.5px;line-height:1.3}
.vd-rec-item small{display:block;font-size:10.5px;line-height:1.35;
  color:var(--vd-txt2);margin-top:2px}
.vd-rec-item.quase_cobertura{background:#eefaf0;border-color:#22a94f}
.vd-rec-item.quase_cobertura b{color:#15803d}
.vd-rec-item.parou{background:#fffbeb;border-color:#f0a000}
.vd-rec-item.parou b{color:#92400e}
.vd-rec-item.nunca{background:var(--vd-claro);border-color:#9aa5b4}


/* ---------------------------------------------------------------------
   TELA DE ERRO NO BOOT
   Bloqueante de propósito. O app não entra com dado nenhum: entrar sem dado
   é como o vendedor descobre a falha só depois de já ter planejado o dia.
   Diz o MOTIVO e oferece as duas ações possíveis.
   --------------------------------------------------------------------- */
.vd-erro-boot{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;background:var(--vd-fundo)}
.vd-erro-card{background:#fff;border-radius:16px;padding:24px 20px;max-width:390px;
  width:100%;box-shadow:0 6px 24px rgba(11,46,92,.12);text-align:center}
.vd-erro-card b{display:block;font-size:17px;color:var(--vd-txt);margin-bottom:8px}
.vd-erro-card p{margin:0 0 10px;font-size:13.5px;color:var(--vd-txt2);line-height:1.45}
.vd-erro-card small{display:block;margin:0 0 16px;font-size:11.5px;color:#b91c1c;
  background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:8px;
  word-break:break-word;text-align:left;line-height:1.4}
.vd-erro-card .vd-btn{margin-bottom:8px}
.vd-legenda.erro{color:#b91c1c}

/* =====================================================================
   FICHA DO CLIENTE - as tres grades  (31/08/2026)
   Bolinha, barra de media e barra do mes. Nenhuma imagem, nenhuma fonte
   externa, nenhuma biblioteca: o vendedor abre isto no 3G dele.
   Tudo com largura relativa e min-width 0 - nada pode furar a grade.
   ===================================================================== */
.vd-perfil { margin-top: 8px; }
.vd-perfil-msg { font-size: 12px; color: var(--vd-txt2); padding: 8px 0;
  line-height: 1.45; }
.vd-perfil-msg.erro { color: #b91c1c; }

/* uma linha no card FECHADO */
.vd-perfil-min { display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: clamp(10.5px, 3vw, 12px); color: var(--vd-txt2);
  margin-top: 6px; line-height: 1.35; }
.vd-perfil-min .alerta { color: #b91c1c; font-weight: 700; }

/* faixa de 4 numeros */
.vd-p-topo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; margin: 8px 0; }
.vd-p-cel { min-width: 0; background: #f8fafc; border: 1px solid var(--vd-linha);
  border-radius: 8px; padding: 6px 5px; text-align: center; }
.vd-p-cel small { display: block; font-size: 9.5px; color: var(--vd-txt2);
  text-transform: uppercase; letter-spacing: .3px; line-height: 1.25;
  white-space: normal; overflow-wrap: anywhere; }
.vd-p-cel b { display: block; font-size: clamp(11px, 3.4vw, 14px);
  margin-top: 2px; overflow-wrap: anywhere; }
.vd-p-cel.alerta { background: #fef2f2; border-color: #fecaca; }
.vd-p-cel.alerta b { color: #b91c1c; }
.vd-p-cel.bom { background: #f0fdf4; border-color: #bbf7d0; }
.vd-p-cel.bom b { color: #15803d; }

/* AS TRES FILAS SAO UMA UNICA GRADE (grid), nao tres grades empilhadas.
   Tres grades separadas calculavam a largura do rotulo cada uma por si e os
   numeros saiam desalinhados das bolinhas. Uma grade, tres filas: a coluna
   e a mesma por definicao. */
.vd-grades { display: grid; gap: 3px; margin: 10px 0 6px;
  align-items: center; }
.vd-gc { min-width: 0; display: flex; align-items: center;
  justify-content: center; }
.vd-g-rot { font-size: clamp(8.5px, 2.5vw, 10px); line-height: 1.15;
  padding-right: 6px; text-align: right; white-space: nowrap; }
.vd-g-rot.hist { color: #94a3b8; }
.vd-g-rot.mes { color: #111827; font-weight: 700; }

/* reaproveita .vd-bola (19px, circular) que o projeto ja usa nos pedidos.
   Aqui so os estados que a ficha acrescenta: nunca comprou / parou. */
.vd-bol.off { background: #e5e7eb !important; color: #9ca3af !important;
  box-shadow: none; }
/* ja comprou e PAROU: o unico estado que pede acao hoje */
.vd-bol.off.parou { background: #fff !important; color: #dc2626 !important;
  box-shadow: inset 0 0 0 2px #dc2626; }

.vd-num { font-style: normal; font-size: clamp(8.5px, 2.6vw, 10.5px);
  font-variant-numeric: tabular-nums; line-height: 1.2; text-align: center;
  white-space: nowrap; }
.vd-num.hist { color: #94a3b8; }
.vd-num.mes { color: #111827; font-weight: 700; }

/* bolinhas no card fechado: o vendedor le a lista do dia sem abrir nada */
.vd-bol-card { display: flex; flex-wrap: wrap; gap: 3px; margin: 7px 0 2px; }

/* comparacao com os pares do canal */
.vd-p-pares { border-radius: 8px; padding: 7px 9px; margin: 8px 0;
  font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.4;
  background: #f8fafc; border: 1px solid var(--vd-linha); }
.vd-p-pares b { font-size: clamp(13px, 4vw, 16px); }
.vd-p-pares small { display: block; color: var(--vd-txt2); font-size: 10px;
  margin-top: 2px; overflow-wrap: anywhere; }
.vd-p-pares.acima { background: #f0fdf4; border-color: #bbf7d0; }
.vd-p-pares.acima b { color: #15803d; }
.vd-p-pares.abaixo { background: #fffbeb; border-color: #fde68a; }
.vd-p-pares.abaixo b { color: #b45309; }

/* ultimo e maior pedido */
.vd-p-peds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px; margin: 8px 0; }
.vd-p-ped { min-width: 0; border: 1px solid var(--vd-linha); border-radius: 8px;
  padding: 7px; background: #fff; }
.vd-p-ped.maior { background: #f0f9ff; border-color: #bae6fd; }
.vd-p-ped small { display: block; font-size: 9.5px; color: var(--vd-txt2);
  text-transform: uppercase; letter-spacing: .3px; white-space: normal; }
.vd-p-ped b { display: block; font-size: clamp(13px, 4vw, 16px); margin: 2px 0; }
.vd-p-ped i { display: block; font-size: 10px; color: var(--vd-txt2);
  font-style: normal; }
.vd-p-ped .vd-btn-min { margin-top: 5px; width: 100%; }

.vd-p-dica { font-size: clamp(10.5px, 3vw, 12px); line-height: 1.45;
  color: #0c4a6e; background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 8px; padding: 7px 9px; margin: 6px 0; }

/* pedido sem nota / item cortado */
.vd-p-corte { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
  padding: 7px 9px; margin: 8px 0; font-size: clamp(10.5px, 3vw, 12.5px);
  line-height: 1.4; }
.vd-p-corte b { color: #b91c1c; }
.vd-p-corte small { display: block; color: var(--vd-txt2); font-size: 10px;
  margin-top: 2px; overflow-wrap: anywhere; }

/* chips de filtro do dia */
.vd-chips-filtro { margin: 6px 0 4px; }
.vd-chips-filtro .vd-chip i { font-style: normal; font-weight: 800;
  opacity: .75; margin-left: 3px; }

/* produtos de um pedido, agrupados por familia */
.vd-p-itens { margin-top: 7px; border-top: 1px dashed var(--vd-linha);
  padding-top: 7px; }
.vd-p-fam { margin-bottom: 8px; }
.vd-p-fam-t { display: flex; justify-content: space-between; gap: 6px;
  font-size: clamp(10px, 2.9vw, 11.5px); margin-bottom: 3px; }
.vd-p-fam-t b { overflow-wrap: anywhere; }
.vd-p-fam-t span { color: var(--vd-txt2); white-space: nowrap; }
.vd-p-item { display: flex; justify-content: space-between; gap: 6px;
  font-size: 10px; color: var(--vd-txt2); padding: 2px 0 2px 6px;
  line-height: 1.35; }
.vd-p-item span { overflow-wrap: anywhere; min-width: 0; }
.vd-p-item i { font-style: normal; white-space: nowrap; }

/* =====================================================================
   ESQUELETO DE CARREGAMENTO
   Pergunta do Jhosef: pesa? Nao. E uma keyframe de opacity/transform, que
   o navegador resolve na GPU sem recalcular layout - nenhuma requisicao,
   nenhuma imagem, nenhum byte a mais no 3G.
   E prefers-reduced-motion respeitado: quem desliga animacao no aparelho
   ve o bloco cinza parado, sem piscar.
   ===================================================================== */
@keyframes vd-pulsa { 0%,100% { opacity: .45 } 50% { opacity: .85 } }
@keyframes vd-gira  { to { transform: rotate(360deg) } }

.vd-esq { animation: vd-pulsa 1.25s ease-in-out infinite; }
.vd-esq-lin { height: 10px; border-radius: 5px; background: #e5e7eb;
  margin: 6px 0; }
.vd-esq-lin.curta { width: 45% }
.vd-esq-lin.media { width: 70% }
.vd-esq-bolas { display: flex; gap: 4px; margin: 8px 0 }
.vd-esq-bolas > span { flex: 1 1 0; aspect-ratio: 1/1; max-height: 30px;
  border-radius: 50%; background: #e5e7eb }
.vd-esq-cels { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px; margin: 8px 0 }
.vd-esq-cels > span { height: 42px; border-radius: 8px; background: #f1f5f9;
  border: 1px solid var(--vd-linha) }

.vd-girando { display: inline-block; width: 12px; height: 12px;
  border: 2px solid #cbd5e1; border-top-color: var(--vd-azul);
  border-radius: 50%; animation: vd-gira .7s linear infinite;
  vertical-align: -2px; margin-right: 6px }

@media (prefers-reduced-motion: reduce) {
  .vd-esq { animation: none; opacity: .6 }
  .vd-girando { animation: none }
}


/* codigo do produto: e o que o vendedor digita no Conect Sales */
.vd-p-item em { font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--vd-azul); font-weight: 700; }

/* flag verde: cliente sem pedido no mes. Verde porque e venda disponivel,
   nao defeito - vermelho aqui viraria ruido que o vendedor aprende a ignorar */
.vd-tag.sempedido { background: #dcfce7; color: #15803d; border-color: #86efac; }

/* pedido minimo do canal */
.vd-p-minimo { background: #f8fafc; border: 1px solid var(--vd-linha);
  border-radius: 8px; padding: 7px 9px; margin: 8px 0;
  font-size: clamp(10.5px, 3vw, 12.5px); }
.vd-p-minimo b { font-size: clamp(12px, 3.6vw, 15px); }
.vd-p-minimo small { display: block; color: var(--vd-txt2); font-size: 10px;
  margin-top: 2px; overflow-wrap: anywhere; }

/* BALAO DA BOLINHA - uma linha, ancorado onde o toque aconteceu.
   Compacto de proposito: e para consultar dez vezes na rua, nao para
   estudar. O '?' abre a explicacao das cores para quem nunca viu. */
.vd-balao { display: flex; align-items: center; gap: 8px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
  padding: 6px 8px; margin: 4px 0 8px; }
.vd-balao .vd-bola { flex: 0 0 19px; }
.vd-balao > span { min-width: 0; flex: 1 1 auto;
  font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.3;
  overflow-wrap: anywhere; }
.vd-balao > span small { display: block; color: var(--vd-txt2);
  font-size: clamp(9px, 2.7vw, 10.5px); margin-top: 1px; }
.vd-balao-x { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid #bae6fd; background: #fff; color: #0369a1;
  font-weight: 800; font-size: 11px; line-height: 1; cursor: pointer;
  padding: 0; }

.vd-balao-cores { background: #f8fafc; border: 1px solid var(--vd-linha);
  border-radius: 8px; padding: 8px; margin: -4px 0 8px;
  display: flex; flex-direction: column; gap: 5px; }
.vd-balao-cores span { display: flex; align-items: center; gap: 7px;
  font-size: clamp(10px, 2.9vw, 11.5px); }
.vd-balao-cores .vd-bola { flex: 0 0 19px; }
.vd-balao-cores small { color: var(--vd-txt2); font-size: 9.5px;
  line-height: 1.4; }

/* devolucao: caixa propria, nunca dentro do nao-faturado */
.vd-p-dev { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 7px 9px; margin: 8px 0; font-size: clamp(10.5px, 3vw, 12.5px); }
.vd-p-dev b { color: #b45309; }
.vd-p-dev small { display: block; color: var(--vd-txt2); font-size: 10px;
  margin-top: 2px; }

/* situacao do item no extrato */
.vd-p-item u { display: inline-block; text-decoration: none; margin-left: 6px;
  font-size: 9px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.vd-p-item u.nao-faturado { background: #fee2e2; color: #b91c1c; }
.vd-p-item u.faturou-parcial { background: #fef3c7; color: #92400e; }
.vd-p-item u.devolvido { background: #ede9fe; color: #5b21b6; }
.vd-p-corte .vd-btn-min { margin-top: 7px; }

/* SUGESTAO pelos pares do canal */
.vd-p-sug { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
  padding: 8px 9px; margin: 8px 0; }
.vd-p-sug-t { font-size: clamp(11px, 3.2vw, 13px); margin-bottom: 7px;
  color: #14532d; }
/* RITMO UNIFORME (medido em 31/08, pergunta do Jhosef "por que tem linhas
   mais altas e outras mais baixas").
   Eram duas causas:
     1. a linha encolhia 2px quando a descricao cabia em UMA linha, porque o
        bloco da direita (29px, duas linhas) e o piso da altura;
     2. a de verdade - cada FAMILIA pagava cabecalho + 7px de margem, entao
        familia com 1 produto ficava com muito mais ar em volta que um
        produto no meio de um grupo de cinco. Media: 5 itens = 215px,
        2 itens = 93px, 1 item = 57px.
   Solucao: altura minima fixa por linha (mata a variacao de 2px) e o mesmo
   espacamento entre familias e entre linhas (mata a diferenca de ritmo). */
.vd-p-sug-fam { margin-bottom: 0; }
.vd-p-sug-fam > small { display: block; font-size: 9.5px; color: #15803d;
  text-transform: uppercase; letter-spacing: .3px;
  margin: 8px 0 0; padding-bottom: 3px; overflow-wrap: anywhere; }
.vd-p-sug-fam:first-child > small { margin-top: 0; }
.vd-p-sug-it { display: flex; justify-content: space-between; gap: 8px;
  align-items: center; min-height: 40px; padding: 4px 0 4px 6px;
  border-top: 1px dashed #bbf7d0; }
.vd-p-sug-it span { min-width: 0; font-size: clamp(10px, 2.9vw, 11.5px);
  line-height: 1.35; overflow-wrap: anywhere; }
.vd-p-sug-it em { font-style: normal; font-variant-numeric: tabular-nums;
  color: var(--vd-azul); font-weight: 700; }
.vd-p-sug-it i { font-style: normal; text-align: right; white-space: nowrap;
  font-size: 9.5px; color: var(--vd-txt2); line-height: 1.3; }
.vd-p-sug-it i b { font-size: clamp(11px, 3.2vw, 13px); color: #15803d; }
.vd-p-sug-it u { display: inline-block; text-decoration: none; margin-left: 5px;
  font-size: 9px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.vd-p-sug-it u.novo { background: #dcfce7; color: #15803d; }
.vd-p-sug-it u.parou { background: #fee2e2; color: #b91c1c; }
.vd-p-sug-p { display: block; margin-top: 6px; font-size: 9.5px;
  color: var(--vd-txt2); line-height: 1.4; }

/* o botao dos itens dentro da dica do maior pedido */
.vd-p-dica .vd-btn-min { margin-top: 7px; display: block; width: 100%; }
.vd-p-dica .vd-p-itens { border-top-color: #bae6fd; }

/* na comparacao com o ultimo pedido: o que faz a diferenca ganha destaque */
.vd-p-item.destaque { background: #eff6ff; border-radius: 5px; }
.vd-p-item u.so-aqui { background: #dbeafe; color: #1e40af; }
.vd-p-item u.mais { background: #e0f2fe; color: #075985; }

/* selo do pedido minimo no card fechado */
.vd-tag.minimo { background: #eff6ff; color: #1e40af; border-color: #bfdbfe;
  font-variant-numeric: tabular-nums; }

/* corte/ruptura: informacao cinza, nunca alerta vermelho - nao se cobra
   entrega de algo que nao vai ser entregue */
.vd-p-info { background: #f8fafc; border: 1px solid var(--vd-linha);
  border-radius: 8px; padding: 7px 9px; margin: 8px 0;
  font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.4; }
.vd-p-info small { display: block; color: var(--vd-txt2); font-size: 10px;
  margin-top: 2px; overflow-wrap: anywhere; }
.vd-p-item u.quente { background: #fee2e2; color: #b91c1c; }
.vd-p-item u.corte { background: #f1f5f9; color: #475569; }
.vd-p-item u.devolvido { background: #ede9fe; color: #5b21b6; }

/* ====== VENDIDO HOJE (Avante) ======
   Amarelo em TUDO que vem do Avante, e o amarelo tem significado fixo no
   app: digitado, ainda nao faturado. Nunca soma com o "este mes". */
.vd-hoje-topo { flex: 0 0 auto; margin-left: auto; text-align: right;
  background: #fef9c3; border: 1px solid #fde047; border-radius: 8px;
  padding: 4px 8px; min-width: 0; }
.vd-hoje-topo small { display: block; font-size: 8.5px; color: #854d0e;
  text-transform: uppercase; letter-spacing: .4px; line-height: 1.1; }
.vd-hoje-topo b { display: block; font-size: clamp(12px, 3.6vw, 15px);
  color: #713f12; line-height: 1.2; }
.vd-hoje-topo i { display: block; font-style: normal; font-size: 8.5px;
  color: #854d0e; white-space: nowrap; }

/* a fila "hoje" da grade: fundo amarelo na fila inteira, rotulo incluido */
.vd-g-rot.hoje { background: #fef9c3; color: #713f12; font-weight: 700;
  border-radius: 5px 0 0 5px; padding-right: 6px; }
.vd-gc.hoje { background: #fef9c3; }
.vd-gc.hoje:last-child { border-radius: 0 5px 5px 0; }
.vd-num.hoje { color: #111827; font-weight: 800; }

/* bloco do pedido de hoje na ficha */
.vd-hoje-bloco { background: #fefce8; border: 1px solid #fde047;
  border-radius: 8px; padding: 8px 9px; margin: 8px 0; }
.vd-hoje-t { display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; flex-wrap: wrap; }
.vd-hoje-t b { font-size: clamp(12px, 3.6vw, 15px); color: #713f12; }
.vd-hoje-t span { font-size: 10px; color: #854d0e; white-space: nowrap; }
.vd-hoje-bloco > small { display: block; font-size: 9.5px; color: #854d0e;
  margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
.vd-hoje-bloco .vd-btn-min { margin-top: 7px; width: 100%; }
.vd-hoje-pg { font-size: 9.5px; color: var(--vd-txt2); padding: 0 0 3px 6px; }

/* ZERO EXPLICITO: sem venda hoje e uma AFIRMACAO, nao um espaco vazio.
   Vermelho porque o vendedor tem que ver, nao porque e erro. */
.vd-hoje-topo.zero { background: #fef2f2; border-color: #fecaca; }
.vd-hoje-topo.zero small, .vd-hoje-topo.zero i { color: #b91c1c; }
.vd-hoje-topo.zero b { color: #dc2626; }
.vd-g-rot.hoje.zero { background: #fef2f2; color: #b91c1c; }
.vd-num.hoje.zero { color: #dc2626; font-weight: 800; }
.vd-gc.hoje.zero { background: #fef2f2; }
.vd-hoje-bloco.zero { background: #fef2f2; border-color: #fecaca; }
.vd-hoje-bloco.zero .vd-hoje-t b { color: #b91c1c; }
.vd-hoje-bloco.zero .vd-hoje-t span { color: #dc2626; font-weight: 700; }
.vd-hoje-bloco.zero > small { color: #b91c1c; }

/* pedido do dia: um bloco por pedido, familias dentro */
.vd-ped-hoje { border: 1px solid #fde047; border-radius: 8px; padding: 7px;
  margin-bottom: 8px; background: #fffef5; }
.vd-ped-hoje-t { display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; flex-wrap: wrap; padding-bottom: 4px;
  border-bottom: 1px solid #fde047; margin-bottom: 4px; }
.vd-ped-hoje-t b { font-size: clamp(11px, 3.2vw, 13px); color: #713f12; }
.vd-ped-hoje-t span { font-size: 9.5px; color: #854d0e; white-space: nowrap; }
.vd-pdf-hoje { width: 100%; margin-top: 4px; }

/* =====================================================================
   FECHAMENTO DO DIA
   Tudo em grade relativa, nada com largura fixa: a tela tem tabela de
   produto (descricao longa) convivendo com celular de 360px.
   ===================================================================== */
.vd-atalho .vd-btn { font-size: clamp(13px, 4vw, 16px); }

.vd-fhead { display: flex; justify-content: space-between; gap: 8px;
  align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.vd-fhead b { font-size: clamp(13px, 4vw, 16px); }
.vd-fhead span { font-size: 11px; color: var(--vd-txt2); }

.vd-faviso { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 7px 9px; margin-bottom: 8px; font-size: clamp(10.5px, 3vw, 12.5px);
  line-height: 1.4; color: #92400e; }

.vd-fcels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; margin-bottom: 6px; }
.vd-fcels.x4, .vd-fcels:has(> :nth-child(4)) {
  grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vd-fc { min-width: 0; background: #f8fafc; border: 1px solid var(--vd-linha);
  border-radius: 8px; padding: 6px 5px; text-align: center; }
.vd-fc small { display: block; font-size: 9px; color: var(--vd-txt2);
  text-transform: uppercase; letter-spacing: .3px; line-height: 1.2;
  white-space: normal; overflow-wrap: anywhere; }
.vd-fc b { display: block; font-size: clamp(12px, 3.6vw, 16px); margin-top: 2px;
  overflow-wrap: anywhere; }
.vd-fc.bom { background: #f0fdf4; border-color: #bbf7d0; }
.vd-fc.bom b { color: #15803d; }
.vd-fc.alerta { background: #fef2f2; border-color: #fecaca; }
.vd-fc.alerta b { color: #b91c1c; }
.vd-fc.dig { background: #fefce8; border-color: #fde047; }
.vd-fc.dig b { color: #713f12; }
.vd-fc.fat { background: #eff6ff; border-color: #bfdbfe; }
.vd-fc.fat b { color: #1e40af; }

/* barra dupla: amarelo = digitado, azul = faturado. Sobrepostas, nao
   empilhadas: a leitura e "quanto do digitado ja virou nota". */
.vd-fbar { position: relative; height: 10px; background: #f1f5f9;
  border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.vd-fbar > span { position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 5px; }
.vd-fbar > span.dig { background: #fde047; }
.vd-fbar > span.fat { background: #2563eb; opacity: .85; }

.vd-flegenda { display: block; font-size: 9.5px; color: var(--vd-txt2);
  line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere; }
.vd-flegenda .dig, .vd-flegenda .fat { font-weight: 700; }
.vd-flegenda .dig::before, .vd-flegenda .fat::before { content: '';
  display: inline-block; width: 10px; height: 6px; border-radius: 3px;
  margin-right: 3px; vertical-align: middle; }
.vd-flegenda .dig::before { background: #fde047; }
.vd-flegenda .fat::before { background: #2563eb; }

.vd-find { border-top: 1px solid var(--vd-linha); padding-top: 7px;
  margin-top: 7px; }
.vd-find:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.vd-find-t { display: flex; justify-content: space-between;
  font-size: clamp(11px, 3.2vw, 13px); margin-bottom: 5px; }
.vd-find-t span { font-weight: 800; color: var(--vd-azul); }

/* secao dobravel */
.vd-fsec { padding: 0; overflow: hidden; }
.vd-fsec-t { width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 11px 12px; text-align: left;
  font: inherit; cursor: pointer; }
.vd-fsec-t b { flex: 1 1 auto; min-width: 0;
  font-size: clamp(12px, 3.5vw, 14px); overflow-wrap: anywhere; }
.vd-fsec-t i { flex: 0 0 auto; font-style: normal; font-size: 10px;
  font-weight: 800; background: #eef2ff; color: #3730a3;
  border-radius: 10px; padding: 1px 7px; }
.vd-fsec-t span { flex: 0 0 auto; color: var(--vd-txt2); }
.vd-fsec-c { padding: 0 12px 12px; }

/* tabela em linhas (nao <table>: quebra melhor em 360px) */
.vd-ftab { display: flex; flex-direction: column; }
.vd-ftr { display: flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 5px 0; border-top: 1px solid var(--vd-linha); }
.vd-ftr:first-child { border-top: 0; }
.vd-ftr.alerta { background: #fef2f2; border-radius: 6px;
  padding-left: 5px; padding-right: 5px; }
.vd-ftr .q { flex: 0 0 26px; text-align: center; font-size: 10px;
  font-weight: 800; color: var(--vd-txt2); font-variant-numeric: tabular-nums; }
.vd-ftr .n { flex: 1 1 auto; min-width: 0; }
.vd-ftr .n b { display: block; font-size: clamp(10.5px, 3vw, 12.5px);
  line-height: 1.3; overflow-wrap: anywhere; font-weight: 600; }
.vd-ftr .n b em { font-style: normal; color: var(--vd-azul);
  font-variant-numeric: tabular-nums; font-weight: 700; }
.vd-ftr .n small { display: block; font-size: 9.5px; color: var(--vd-txt2);
  line-height: 1.35; overflow-wrap: anywhere; }
.vd-ftr .v { flex: 0 0 auto; text-align: right; white-space: nowrap;
  font-size: clamp(10.5px, 3vw, 12.5px); font-weight: 700; }
.vd-ftr .v small { display: block; font-size: 9px; color: var(--vd-txt2);
  font-weight: 400; }
.vd-ftr .v u { text-decoration: none; font-size: 9.5px; color: #b91c1c;
  background: #fee2e2; border-radius: 4px; padding: 1px 5px; }

.vd-fop { margin-bottom: 10px; }
.vd-fop > b { display: block; font-size: clamp(11px, 3.2vw, 12.5px); }
.vd-fop > small { display: block; font-size: 9.5px; color: var(--vd-txt2);
  margin-bottom: 3px; line-height: 1.35; }
.vd-vazio-min { font-size: clamp(10.5px, 3vw, 12px); color: var(--vd-txt2);
  padding: 6px 0; line-height: 1.45; }

.vd-fcels.x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ABERTURA POR LINHA de um indicador - tabela, nao amontoado.
   Uma coluna por informacao, cabecalho proprio, e a barra em coluna propria
   para alinhar entre as linhas e permitir comparar de bater o olho. */
.vd-gind { margin-top: 7px; }
.vd-gind th.bar, .vd-gind td.bar { width: 34%; min-width: 60px; }
.vd-gind td.p, .vd-gind th:nth-child(2) { text-align: right; }
.vd-gind td.p { font-weight: 800; }
.vd-gind td.p.ok { color: #15803d; }
.vd-gind td.p.meio { color: #b45309; }
.vd-gind td.p.ruim { color: #b91c1c; }
.vd-gind td.al { color: #b91c1c; font-weight: 600; }
.vd-gind td.cli { min-width: 74px; max-width: 110px; font-weight: 600; }
.vd-fdb { display: block; height: 8px; background: #f1f5f9;
  border-radius: 4px; overflow: hidden; }
.vd-fdb > i { display: block; height: 100%; border-radius: 4px; }
.vd-fdb > i.ok { background: #16a34a; }
.vd-fdb > i.meio { background: #f59e0b; }
.vd-fdb > i.ruim { background: #dc2626; }
/* RISQUINHO do indicador menor (02/09/2026). Mesmo desenho do <u> da
   .vd-barra do planejamento do dia - o Jhosef pediu explicitamente "igual
   la no planejamento do dia", e usar dois desenhos para a mesma ideia
   obriga a pessoa a aprender duas vezes. */
.vd-fdb { position: relative; }
.vd-fdb > u { position: absolute; top: -3px; width: 2px; height: 14px;
  background: #0b2e5c; opacity: .6; border-radius: 1px; }
/* a coluna do indicador MENOR fica sublinhada: quem olha a barra e ve o
   risquinho precisa saber de qual dos dois numeros ele e. */
.vd-gind td.menor { text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; }

/* ====== GRADE cliente x linha ======
   A UNICA coisa do app que rola de lado, e a rolagem esta presa no wrap:
   o corpo da pagina nunca rola horizontalmente. */
.vd-gridwrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -12px; padding: 0 12px; }
table.vd-grid { border-collapse: collapse; width: 100%; min-width: 320px;
  font-variant-numeric: tabular-nums; }
table.vd-grid th, table.vd-grid td { padding: 5px 4px; text-align: right;
  font-size: clamp(9px, 2.6vw, 10.5px); border-bottom: 1px solid var(--vd-linha);
  white-space: nowrap; }
table.vd-grid thead th { position: sticky; top: 0; background: #f1f5f9;
  font-size: 9px; font-weight: 800; color: var(--vd-txt2); z-index: 1; }
table.vd-grid th.cli, table.vd-grid td.cli { text-align: left;
  white-space: normal; min-width: 118px; max-width: 160px;
  position: sticky; left: 0; background: #fff; z-index: 2; }
table.vd-grid thead th.cli { background: #f1f5f9; z-index: 3; }
table.vd-grid td.cli b { display: block; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere; }
table.vd-grid td.cli small { display: block; font-size: 8.5px;
  color: var(--vd-txt2); }
table.vd-grid td.z { color: #cbd5e1; }
table.vd-grid td.v { color: #111827; font-weight: 600; }
table.vd-grid th.tot, table.vd-grid td.tot { font-weight: 800;
  background: #f8fafc; }
table.vd-grid tbody tr:active { background: #eff6ff; }
table.vd-grid tfoot td { font-weight: 800; background: #f1f5f9;
  border-top: 2px solid var(--vd-linha); }

/* drill-down de familia */
.vd-ftr.fam { cursor: pointer; }
.vd-ftr.fam.on { background: #eff6ff; border-radius: 6px 6px 0 0; }
.vd-ftr.on { background: #eff6ff; }
.vd-famprod { background: #f8fafc; border-radius: 0 0 6px 6px;
  padding: 2px 8px 6px; margin-bottom: 4px; }
.vd-famprod .vd-ftr { min-height: 36px; }

/* planejado do dia: azul claro, para nao competir com o realizado */
.vd-fc.plan { background: #f5f3ff; border-color: #ddd6fe; }
.vd-fc.plan b { color: #5b21b6; }

/* total de oportunidade: o numero que resume a secao */
.vd-fpot { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 8px 10px; margin-bottom: 9px;
  font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.4; }
.vd-fpot b { font-size: clamp(14px, 4.2vw, 18px); color: #b45309;
  display: block; margin-top: 2px; }

/* GANHOS: o que o vendedor fez hoje. Amarelo = digitado, sem nota - o mesmo
   significado que o amarelo tem em toda a tela de clientes. */
.vd-hojeganho { background: #fefce8; border-color: #fde047; }
.vd-hojeganho-t { display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vd-hojeganho-t small { font-size: 10px; color: #854d0e; text-transform: uppercase;
  letter-spacing: .4px; }
.vd-hojeganho-t b { font-size: clamp(20px, 6vw, 28px); color: #713f12;
  line-height: 1.1; }
.vd-hojeganho-p { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px;
  font-size: clamp(10px, 2.9vw, 11.5px); color: #854d0e; }
.vd-hojeganho .vd-legenda { color: #854d0e; }

/* SEMAFORO DA EQUIPE: uma pastilha por vendedor, cabe o time num relance.
   Ordenado do pior para o melhor - quem precisa de acao vem primeiro. */
.vd-pastilhas { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.vd-past { min-width: 52px; border-radius: 8px; border: 1px solid transparent;
  padding: 5px 6px; text-align: center; cursor: pointer; font: inherit; }
.vd-past b { display: block; font-size: clamp(10px, 3vw, 12px); line-height: 1.1; }
.vd-past i { display: block; font-style: normal; font-size: 9.5px;
  font-weight: 800; }
.vd-past.bom { background: #dcfce7; border-color: #86efac; color: #14532d; }
.vd-past.meio { background: #fef9c3; border-color: #fde047; color: #713f12; }
.vd-past.ruim { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }
.vd-past.neutro { background: #f1f5f9; border-color: var(--vd-linha);
  color: var(--vd-txt2); }
.vd-past:active { transform: scale(.96); }

/* seletor de perfil no login: chips com a dica do que cada visao mostra */
#vdComoChips { display: flex; flex-direction: column; gap: 6px; }
#vdComoChips .vd-chip { width: 100%; text-align: left; padding: 9px 11px;
  line-height: 1.25; }
#vdComoChips .vd-chip small { display: block; font-size: 10px; opacity: .8;
  font-weight: 400; margin-top: 1px; }

/* LINHA SANGRANDO: fundo vermelho + icone. Reservado para "abaixo do
   planejado do dia" - se pintasse outras coisas de vermelho, o vermelho
   pararia de significar algo. */
table.vd-grid tr.sangra > td { background: #fef2f2; }
table.vd-grid tr.sangra > td.cli { background: #fee2e2; }
table.vd-grid tr.sangra > td.tot { background: #fee2e2; }
.vd-alerta { color: #dc2626; font-weight: 800; font-size: 12px; }

/* grade de tendencia: mapa de calor rota x dia */
.vd-gtend th, .vd-gtend td { text-align: center; }
.vd-gtend th.cli, .vd-gtend td.cli { text-align: left; }
.vd-gtend td.q-ok { background: #dcfce7; color: #14532d; font-weight: 700; }
.vd-gtend td.q-meio { background: #fef9c3; color: #713f12; font-weight: 700; }
.vd-gtend td.q-ruim { background: #fee2e2; color: #7f1d1d; font-weight: 800; }
.vd-gtend tr.sangra td.q-ok { background: #dcfce7; }
.vd-gtend td.al { color: #b91c1c; font-weight: 800; }

/* calendario dos ultimos fechamentos: indicador na linha, linha de produto
   escondida atras do drop down do proprio indicador. A linha do indicador
   tem peso maior porque e ela que se le de longe; a linha de produto entra
   recuada e em cinza para NAO competir com o total. */
.vd-gcal th small { display: block; font-size: 8.5px; font-weight: 500;
  color: var(--vd-txt2); text-transform: none; }
.vd-gcal tr.ind > td.cli { font-weight: 700; }
.vd-gcal tr.ind > td.cli small { display: block; font-size: 9px;
  font-weight: 400; color: var(--vd-txt2); }
.vd-gcal tr.ind[data-calind] { cursor: pointer; }
.vd-gcal tr.ind[data-calind]:active > td { filter: brightness(.97); }
.vd-gcal td.cli .dd { color: var(--vd-azul); font-weight: 800; }
.vd-gcal tr.lin > td { background: #f8fafc; }
.vd-gcal tr.lin > td.cli { padding-left: 16px; }
.vd-gcal tr.lin > td.cli i { font-style: normal; font-size: 10.5px;
  color: var(--vd-txt2); font-weight: 600; }
.vd-gcal tr.lin > td.cli small { display: block; font-size: 8.5px;
  color: var(--vd-txt2); }
.vd-gcal td.z { color: #cbd5e1; font-weight: 700; }

/* supervisao por supervisao (gerente): mesmo desenho do calendario -
   linha-mae com peso, filhas recuadas em cinza. */
.vd-gsup tr.ind > td.cli { font-weight: 700; cursor: pointer; }
.vd-gsup tr.ind > td.cli small { display: block; font-size: 9px;
  font-weight: 400; color: var(--vd-txt2); }
.vd-gsup td.cli .dd { color: var(--vd-azul); font-weight: 800; }
.vd-gsup tr.lin > td { background: #f8fafc; }
.vd-gsup tr.lin.sangra > td { background: #fef2f2; }
.vd-gsup tr.lin > td.cli { padding-left: 16px; }
.vd-gsup tr.lin > td.cli i { font-style: normal; font-size: 10.5px;
  color: var(--vd-txt2); font-weight: 600; }
.vd-gsup tr.lin > td.cli small { display: block; font-size: 8.5px;
  color: var(--vd-txt2); }

/* de quem e o pedido / o cliente (so aparece para supervisor e gerente) */
.vd-rota-tag { background: var(--vd-claro); color: var(--vd-azul);
  border: 1px solid #cfe0f2; border-radius: 5px; padding: 1px 5px;
  font-size: 9.5px; font-weight: 600; }
.vd-rota-tag b { font-weight: 800; }

/* grade de clientes da equipe (supervisor/gerente) */
.vd-geq td.zero { color: #dc2626; font-weight: 800; text-align: right; }
.vd-geq tr.z0 > td.cli { background: #fffbfb; }
.vd-geq tr[data-eqcli] { cursor: pointer; }
.vd-geq td small { display: block; font-size: 8.5px; color: var(--vd-txt2);
  font-weight: 400; }
.vd-chips-dias .vd-chip i { font-style: normal; font-weight: 800; opacity: .75; }

/* semaforo do % valendo em QUALQUER vd-grid, nao so na vd-gind: a grade da
   equipe usava as mesmas classes e vinha sem cor nenhuma. */
table.vd-grid td.p { font-weight: 800; text-align: right; }
table.vd-grid td.p.ok { color: #15803d; }
table.vd-grid td.p.meio { color: #b45309; }
table.vd-grid td.p.ruim { color: #b91c1c; }

/* a setinha do drop down tinha ficado quase invisivel dentro da celula:
   sem ela o supervisor nao descobre que a linha abre. */
.vd-gcal td.cli .dd, .vd-gsup td.cli .dd { font-size: 12px; line-height: 1;
  display: inline-block; width: 11px; }

/* TERCEIRO NIVEL do calendario: os vendedores, abaixo da linha de produto.
   Recuo maior e fundo mais escuro que o da linha, para o olho saber em que
   degrau esta sem ler o texto. */
.vd-gcal tr.maisv > td { background: #eef2f7; color: var(--vd-azul);
  font-size: 9.5px; font-weight: 700; cursor: pointer; padding: 3px 6px; }
.vd-gcal tr.maisv > td .dd { font-size: 11px; }
.vd-gcal tr.lin[data-calvend] { cursor: pointer; }
.vd-gcal tr.vend > td { background: #f1f5f9; }
.vd-gcal tr.vend.sangra > td { background: #fef2f2; }
.vd-gcal tr.vend > td.cli { padding-left: 26px; }
.vd-gcal tr.vend > td.cli u { text-decoration: none; font-size: 10.5px;
  font-weight: 800; color: var(--vd-txt); }
.vd-gcal tr.vend > td.cli small { display: block; font-size: 8.5px;
  color: var(--vd-txt2); font-weight: 400; }

/* ===== ANALISE PRONTA: DO PIOR PARA O MELHOR =====
   Cartao, nao tabela: o diagnostico e uma FRASE e frase nao tabula. A cor
   da borda esquerda carrega a nota, entao da para varrer a lista de cima a
   baixo sem ler numero nenhum. */
.vd-rk-topo { background: var(--vd-claro); border: 1px solid #cfe0f2;
  border-radius: 8px; padding: 8px 10px; margin-bottom: 8px;
  font-size: clamp(10.5px, 3vw, 12px); line-height: 1.4; }
.vd-rk-topo > b { display: block; font-size: clamp(12px, 3.6vw, 14px);
  color: var(--vd-azul); }
.vd-rk-topo > span { display: block; color: var(--vd-txt2); }
.vd-rk-topo > span.av { color: #b45309; margin-top: 3px; }

.vd-rk { border: 1px solid var(--vd-linha); border-left-width: 4px;
  border-radius: 8px; padding: 7px 9px; margin-bottom: 7px; cursor: pointer;
  background: #fff; }
.vd-rk.ruim { border-left-color: #dc2626; background: #fffafa; }
.vd-rk.meio { border-left-color: #f59e0b; }
.vd-rk.bom { border-left-color: #16a34a; }
.vd-rk.neutro { border-left-color: #94a3b8; background: #fafbfc; }
.vd-rk:active { transform: scale(.995); }

.vd-rk-t { display: flex; align-items: center; gap: 8px; }
.vd-rk-t .pos { flex: 0 0 26px; text-align: center; font-size: 11px;
  font-weight: 800; color: var(--vd-txt2); }
.vd-rk.ruim .vd-rk-t .pos { color: #dc2626; }
.vd-rk-t .n { flex: 1 1 auto; min-width: 0; }
.vd-rk-t .n b { display: block; font-size: clamp(11.5px, 3.4vw, 13px);
  line-height: 1.2; overflow-wrap: anywhere; }
.vd-rk-t .n small { display: block; font-size: 9.5px; color: var(--vd-txt2); }
.vd-rk-t .nota { flex: 0 0 auto; text-align: right; }
.vd-rk-t .nota b { display: block; font-size: clamp(15px, 4.6vw, 19px);
  font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vd-rk.ruim .vd-rk-t .nota b { color: #b91c1c; }
.vd-rk.meio .vd-rk-t .nota b { color: #b45309; }
.vd-rk.bom .vd-rk-t .nota b { color: #15803d; }
.vd-rk-t .nota small { display: block; font-size: 8px; color: var(--vd-txt2);
  text-transform: uppercase; letter-spacing: .3px; }

.vd-rk-p { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px; margin-top: 6px; }
.vd-rk-p > span { background: #f6f8fb; border-radius: 5px; padding: 3px 5px;
  font-size: 8.5px; color: var(--vd-txt2); text-align: center;
  line-height: 1.25; }
.vd-rk-p > span b { display: block; font-size: clamp(10.5px, 3.1vw, 12px);
  color: var(--vd-txt); font-variant-numeric: tabular-nums; }

.vd-rk-d { margin-top: 6px; font-size: clamp(10px, 2.9vw, 11.5px);
  color: var(--vd-txt2); line-height: 1.4; }
.vd-rk.ruim .vd-rk-d { color: #991b1b; }
.vd-rk .vd-gridwrap { margin-top: 8px; }
.vd-rk .vd-btn-min.largo { width: 100%; margin-top: 7px; }

/* gerente: a supervisao e a linha-mae e os vendedores dela entram recuados */
.vd-rk.sup { background: #f8fafc; }
.vd-rk.sup .vd-rk-t .pos { color: var(--vd-azul); font-size: 12px; }
.vd-rk-filhos { padding-left: 10px; border-left: 2px dotted var(--vd-linha);
  margin: 0 0 8px 6px; }

/* ===== A EMPRESA NO MES: total por linha de produto =====
   Bloco calmo de proposito: um numero grande em cima (o % da empresa), as
   pastilhas de contexto embaixo, e a lista de linhas com barra. Nada de
   tabela larga aqui - tabela e para comparar muitas colunas, e o que se
   pergunta desta secao e "como estamos e qual linha esta segurando". */
.vd-emp-topo { border: 1px solid var(--vd-linha); border-radius: 10px;
  padding: 10px 11px; margin-bottom: 10px; background: #fff; }
.vd-emp-topo.bom { border-color: #bbf7d0; background: #f6fefa; }
.vd-emp-topo.meio { border-color: #fde68a; background: #fffdf5; }
.vd-emp-topo.ruim { border-color: #fecaca; background: #fffafa; }
.vd-emp-cab { display: flex; align-items: baseline; gap: 8px; }
.vd-emp-cab b { font-size: clamp(24px, 8vw, 32px); font-weight: 800;
  line-height: 1; font-variant-numeric: tabular-nums; }
.vd-emp-topo.bom .vd-emp-cab b { color: #15803d; }
.vd-emp-topo.meio .vd-emp-cab b { color: #b45309; }
.vd-emp-topo.ruim .vd-emp-cab b { color: #b91c1c; }
.vd-emp-cab span { font-size: clamp(10px, 3vw, 11.5px); color: var(--vd-txt2);
  line-height: 1.3; }
.vd-emp-topo .vd-rk-p { margin-top: 8px; }

.vd-linhas { display: flex; flex-direction: column; gap: 7px; }
.vd-lin { border: 1px solid var(--vd-linha); border-left-width: 4px;
  border-radius: 8px; padding: 8px 9px; background: #fff; cursor: pointer; }
.vd-lin.bom { border-left-color: #16a34a; }
.vd-lin.meio { border-left-color: #f59e0b; }
.vd-lin.ruim { border-left-color: #dc2626; }
.vd-lin.neutro { border-left-color: #94a3b8; }
.vd-lin:active { transform: scale(.995); }
.vd-lin-t { display: flex; align-items: center; gap: 7px; }
.vd-lin-t .dd { flex: 0 0 12px; color: var(--vd-azul); font-weight: 800;
  font-size: 12px; line-height: 1; }
.vd-lin-t .n { flex: 1 1 auto; min-width: 0; }
.vd-lin-t .n b { display: block; font-size: clamp(11.5px, 3.4vw, 13px);
  line-height: 1.2; }
.vd-lin-t .n small { display: block; font-size: 9.5px; color: var(--vd-txt2);
  overflow-wrap: anywhere; }
.vd-lin-t .p { flex: 0 0 auto; font-size: clamp(13px, 4vw, 16px);
  font-weight: 800; font-variant-numeric: tabular-nums; }
.vd-lin.bom .vd-lin-t .p { color: #15803d; }
.vd-lin.meio .vd-lin-t .p { color: #b45309; }
.vd-lin.ruim .vd-lin-t .p { color: #b91c1c; }
.vd-lin-bar { height: 5px; background: #eef2f7; border-radius: 3px;
  overflow: hidden; margin-top: 6px; }
.vd-lin-bar > i { display: block; height: 100%; border-radius: 3px; }
.vd-lin.bom .vd-lin-bar > i { background: #16a34a; }
.vd-lin.meio .vd-lin-bar > i { background: #f59e0b; }
.vd-lin.ruim .vd-lin-bar > i { background: #dc2626; }
.vd-lin .vd-rk-p { margin-top: 8px; }
.vd-lin-quem { margin-top: 8px; }
.vd-lin-quem > b { display: block; font-size: 10.5px; }
.vd-lin-quem > small { display: block; font-size: 9px; color: var(--vd-txt2);
  margin-bottom: 3px; }

/* venda de hoje por linha, dentro do cartao do vendedor */
.vd-hoje-lin { margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed var(--vd-linha); }
.vd-hoje-lin > b { display: block; font-size: 10.5px; }
.vd-hoje-lin > small { display: block; font-size: 9px; color: var(--vd-txt2);
  margin-bottom: 5px; }
.vd-hl { display: flex; flex-wrap: wrap; gap: 5px; }
.vd-hl > span { background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 6px; padding: 3px 7px; line-height: 1.25; }
.vd-hl > span i { display: block; font-style: normal; font-size: 8.5px;
  color: #92400e; text-transform: uppercase; letter-spacing: .2px; }
.vd-hl > span b { font-size: 11px; color: #78350f;
  font-variant-numeric: tabular-nums; }
.vd-zero-dia { font-size: 10px; color: #b91c1c; background: #fef2f2;
  border-radius: 6px; padding: 4px 7px; }

.vd-filtro-linha .vd-chips-wrap { gap: 5px; }
.vd-fsec-sub { display: block; font-size: 9.5px; color: var(--vd-txt2);
  padding: 0 12px 6px; margin-top: -4px; }

/* ===== tabelas embutidas: o nome do vendedor nao pode comer a ultima coluna
   O defeito era visivel: "Na mesa" aparecia como "R$ 3..." cortado, porque a
   coluna do nome crescia com o nome mais longo da lista. Agora a coluna tem
   teto e o nome corta com reticencia - o numero e que nao pode faltar. */
.vd-lin-quem td.cli, .vd-gganhos td.cli { max-width: 106px; }
.vd-lin-quem td.cli small, .vd-gganhos td.cli small,
.vd-gganhos tfoot td.cli small { display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vd-gganhos tbody tr { cursor: pointer; }
.vd-gganhos tfoot td { border-top: 2px solid var(--vd-linha);
  font-weight: 700; background: #f8fafc; }
.vd-gganhos tfoot tr.sup td { background: #fffbeb; font-weight: 500; }
.vd-gganhos tfoot tr.sup td.cli { font-weight: 700; }
.vd-gganhos td.obs { font-size: 9px; color: #92400e; white-space: normal;
  line-height: 1.35; text-align: left; }
.vd-gganhos td.tot { font-weight: 800; }

/* ===== ESTADO VAZIO QUE SE EXPLICA =====
   Em 01/09 o Jhosef olhou o calendario cheio de "." e concluiu "acho que nao
   subiu alguma coisa". O comportamento estava certo e a TELA estava errada
   por ficar calada: tabela de pontos e indistinguivel de tabela quebrada.
   Regra: quando nao ha o que mostrar, dizer o que falta. */
.vd-semplano { background: var(--vd-claro); border: 1px solid #cfe0f2;
  border-radius: 9px; padding: 11px 12px; }
.vd-semplano.alerta { background: #fffbeb; border-color: #fde68a;
  margin-bottom: 9px; }
.vd-semplano > b { display: block; font-size: clamp(11.5px, 3.4vw, 13px);
  color: var(--vd-azul); line-height: 1.3; }
.vd-semplano.alerta > b { color: #92400e; }
.vd-semplano > small { display: block; margin-top: 5px;
  font-size: clamp(10px, 2.9vw, 11.5px); color: var(--vd-txt2);
  line-height: 1.45; }
.vd-semplano-real { margin-top: 9px; padding-top: 8px;
  border-top: 1px dashed #cfe0f2; display: flex; flex-wrap: wrap; gap: 6px;
  align-items: flex-end; }
.vd-semplano-real u { text-decoration: none; display: block; width: 100%;
  font-size: 9px; color: var(--vd-txt2); text-transform: uppercase;
  letter-spacing: .3px; margin-bottom: 2px; }
.vd-semplano-real > span { background: #fff; border: 1px solid #cfe0f2;
  border-radius: 6px; padding: 4px 8px; }
.vd-semplano-real > span i { display: block; font-style: normal;
  font-size: 8.5px; color: var(--vd-txt2); text-transform: uppercase; }
.vd-semplano-real > span b { font-size: clamp(11px, 3.2vw, 12.5px);
  color: var(--vd-txt); font-variant-numeric: tabular-nums; }

/* ===== O "%" DENTRO DA CELULA =====
   Pedido do Jhosef (01/09): "coloca o caractere % do lado dos numeros... o
   102, 211, 151, 935". Sem o sinal, um 935 ao lado de um 98 parece
   quantidade e o olho tenta somar. O % vai menor e mais claro que o numero:
   ele desambigua, nao compete. */
.vd-gtend td > i { font-style: normal; font-size: .72em; opacity: .6;
  margin-left: 1px; font-weight: 600; }

/* VERDE MAIS FORTE ACIMA DE 100, e um degrau a mais acima de 150.
   Bater a meta e a unica coisa desta grade que merece ser vista de longe -
   antes o verde de 102% e o amarelo de 98% tinham quase o mesmo peso. */
.vd-gtend td.q-ok { background: #bbf7d0; color: #14532d; font-weight: 800; }
.vd-gtend td.q-otimo { background: #16a34a; color: #fff; font-weight: 800; }
.vd-gtend td.q-otimo > i { opacity: .8; }
.vd-gtend tr.sangra td.q-ok { background: #bbf7d0; }
.vd-gtend tr.sangra td.q-otimo { background: #16a34a; }

/* titulos e valores centralizados nas tabelas por linha (01/09) */
table.vd-centro th, table.vd-centro td { text-align: center; }
table.vd-centro th.cli, table.vd-centro td.cli { text-align: left; }

/* ULTIMA COMPRA na lista de quem nao fez pedido (02/09/2026).
   Cor pelo tempo: ate 45 dias e ciclo de visita normal, 45-90 merece
   olhar, acima de 90 nao e mais ciclo - e cliente que parou. Sem cor, a
   lista trata igual quem nao comprou hoje e quem nao compra ha oito
   meses, e o vendedor tem que ler linha por linha para achar o que
   importa. */
.vd-ftr .v u.aten, .vd-ftr .v small.aten { color: #b45309; }
.vd-ftr .v u.ruim, .vd-ftr .v small.ruim { color: #b91c1c; font-weight: 700; }

/* CRESCIMENTO ANO x ANO na ficha do cliente (02/09/2026) */
.vd-p-ano { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border:1px solid var(--vd-linha); border-left:4px solid #94a3b8;
  border-radius:9px; padding:9px 12px; margin:10px 0; background:#fff; }
.vd-p-ano.sobe { border-left-color:#15803d; }
.vd-p-ano.cai  { border-left-color:#b91c1c; }
.vd-p-ano.novo { border-left-color:#1d4ed8; }
.vd-p-ano .n { text-align:center; min-width:74px; }
.vd-p-ano .n b { display:block; font-size:19px; font-weight:800;
  color:var(--vd-txt); line-height:1.1; }
.vd-p-ano.sobe .n b { color:#15803d; }
.vd-p-ano.cai  .n b { color:#b91c1c; }
.vd-p-ano.novo .n b { color:#1d4ed8; font-size:15px; }
.vd-p-ano .n small { font-size:9.5px; color:var(--vd-txt2);
  text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.vd-p-ano .v { display:flex; flex-direction:column; gap:2px; font-size:11.5px;
  color:var(--vd-txt2); }
.vd-p-ano .v b { color:var(--vd-txt); font-variant-numeric:tabular-nums; }
.vd-p-ano .p { flex:1 1 100%; font-size:10px; color:var(--vd-txt2);
  line-height:1.4; }

/* ---------- GANHOS EIXOSUL (modelo de pontos) ----------------------------
   Classes com prefixo eixo- : nenhuma delas e usada pela tela da Santa Rosa,
   entao acrescentar aqui nao muda um pixel do que ja existe. Ficam no mesmo
   arquivo, e nao num css proprio, para as duas telas envelhecerem juntas -
   dois temas separados divergem em um mes. */
.eixo-heroi{background:linear-gradient(135deg,var(--vd-azul),var(--vd-azul2));
  color:#fff;border-radius:14px;padding:16px;margin-bottom:12px}
.eixo-heroi .num{font-size:34px;font-weight:800;line-height:1.05}
.eixo-heroi .sub{opacity:.9;font-size:12px;margin-top:2px}
.eixo-barra{height:10px;border-radius:6px;background:rgba(255,255,255,.28);
  margin:12px 0 6px;overflow:hidden}
.eixo-barra i{display:block;height:100%;background:#fff;border-radius:6px}
.eixo-marca{display:flex;justify-content:space-between;font-size:11px;opacity:.9}
.eixo-op{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--vd-linha)}
.eixo-op:last-child{border-bottom:0}
.eixo-op .g{margin-left:auto;font-weight:800;color:var(--vd-ok);white-space:nowrap}
.eixo-op .t{font-size:13px}
.eixo-op .t small{display:block;color:var(--vd-txt2);font-size:11px}
.eixo-ind{border:1px solid var(--vd-linha);border-radius:12px;background:#fff;
  margin-bottom:10px;overflow:hidden}
.eixo-ind>button{width:100%;background:none;border:0;padding:12px 14px;
  display:flex;align-items:center;gap:10px;text-align:left;font:inherit;color:inherit}
.eixo-ind .tit{font-weight:700;font-size:14px}
.eixo-ind .tit small{display:block;font-weight:400;color:var(--vd-txt2);font-size:11px}
.eixo-ind .pts{margin-left:auto;text-align:right;white-space:nowrap}
.eixo-ind .pts b{font-size:16px}
.eixo-ind .pts small{display:block;color:var(--vd-txt2);font-size:11px}
.eixo-corpo{padding:0 14px 14px;display:none}
.eixo-ind.aberto .eixo-corpo{display:block}
.eixo-deg{display:flex;justify-content:space-between;font-size:12px;
  padding:5px 8px;border-radius:6px}
.eixo-deg.atual{background:#e7f0fb;font-weight:700}
.eixo-deg.prox{background:#f1f8ef;color:#166534}
.eixo-zero{color:var(--vd-erro);font-weight:700}
.eixo-tag{display:inline-block;font-size:10px;padding:2px 7px;border-radius:999px;
  background:var(--vd-claro);color:var(--vd-azul);font-weight:700;letter-spacing:.3px}
.eixo-sel{width:100%;padding:11px;border:1px solid var(--vd-linha);
  border-radius:10px;background:#fff;font:inherit;margin-bottom:12px}
.eixo-aviso{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
  border-radius:10px;padding:10px 12px;font-size:12px;margin-bottom:12px}

/* ---- o desfecho do pedido em uma frase (03/09/2026) ----
   Fica ANTES dos campos no detalhe do pedido: o vendedor precisa ler o que
   aconteceu antes de ler nota e data. Sem cor por padrao (a maioria dos
   casos e informacao neutra, tipo "substituido"); vermelho so quando a
   venda nao entrou. */
.vd-desfecho{background:var(--vd-claro);border-left:3px solid var(--vd-azul);
  border-radius:6px;padding:8px 10px;margin:8px 0;font-size:12px;line-height:1.45;
  color:var(--vd-txt)}
.vd-desfecho.aten{background:#fef3c7;border-left-color:#b45309}
.vd-desfecho.erro{background:#fee2e2;border-left-color:#b91c1c}

/* recado de transmissao: confirmacao que vem do SERVIDOR, nao do aparelho */
.vd-plan-aviso{position:fixed;left:8px;right:8px;bottom:64px;z-index:60;
  display:none;padding:10px 12px;border-radius:10px;font-size:13px;
  line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.18);
  background:#1f2937;color:#f9fafb}
.vd-plan-aviso.ok{background:#dcfce7;color:#15803d}
.vd-plan-aviso.ruim{background:#fee2e2;color:#b91c1c}

/* quem ainda nao transmitiu: o recado que o supervisor precisa ver sem rolar */
.vd-falta-transm{margin:8px 10px 0;padding:8px 10px;border-radius:8px;
  background:#fef3c7;color:#92400e;font-size:12px;line-height:1.35;
  display:flex;flex-direction:column;gap:2px}
.vd-falta-transm b{font-size:12.5px}
.vd-falta-transm span{opacity:.85;word-break:break-word}
.vd-falta-transm.ok{background:#dcfce7;color:#15803d}

/* seletor hoje/amanha do planejamento. Dois botoes de largura igual, sem
   nada podendo transbordar a caixa em 356px. */
.vd-dia-sel{display:flex;gap:6px;margin:8px 10px 0}
.vd-dia-bt{flex:1 1 0;min-width:0;padding:8px 4px;border:1px solid #e2e8f0;
  border-radius:9px;background:#fff;color:#334155;font-size:13px;
  font-weight:600;line-height:1.15;display:flex;flex-direction:column;
  align-items:center;gap:1px;cursor:pointer}
.vd-dia-bt small{font-size:10.5px;font-weight:400;opacity:.7;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.vd-dia-bt.at{background:#0f2f4a;border-color:#0f2f4a;color:#fff}
.vd-dia-bt.at small{opacity:.85}
.vd-dia-aviso{margin:6px 10px 0;padding:7px 9px;border-radius:8px;
  background:#e0f2fe;color:#075985;font-size:11.5px;line-height:1.35}

/* "sem cadastro" na memoria de calculo: a marca de que o sistema NAO SABE,
   e nao de que ganhou zero. Zero e um valor; ausencia de cadastro nao e. */
.vd-btn.vd-btn-on{background:#0f2f4a;color:#fff}
.vd-semvalor{font-size:11px;color:#92400e;background:#fef3c7;padding:2px 6px;
  border-radius:6px;white-space:nowrap}

/* competencia sem dado: botao desligado em vez de tela vazia */
.vd-dia-bt.vd-bt-off{opacity:.45;cursor:not-allowed}
/* ajuste manual dentro da memoria de calculo: e a linha que explica a
   diferenca contra a ficha, entao tem que se distinguir do calculo */
.vd-rolagem tr.vd-ajuste td{background:#fef3c7;color:#92400e;font-size:11.5px}