/* A Visão geral no desenho da SAG v2 (item 5.1).
 *
 * Folha própria, como a do Atendimento: o desenho desta tela não entra na folha de
 * todas, e mexer aqui não redesenha o resto. Um verde só — o da moldura (3.1). */

/* AS MESMAS MARGENS DAS OUTRAS TELAS (Henrique, 16/10: "problema de espaços e margens"):
 * sem o recuo e a largura máxima próprios — quem dá a margem é a moldura, como em Contatos
 * e Negócios — e um vão só entre os blocos. */
.visao-geral {
  color: var(--sag-ink, #17201e);
  display: grid;
  gap: 14px;
}

/* ------------------------------------------------------------------ a saudação */

.vg-saudacao {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}
.vg-sobrelinha {
  margin: 0 0 6px;
  color: var(--sag-green, #15866d);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
}
.vg-saudacao h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.7px;
}
.vg-saudacao p:not(.vg-sobrelinha) {
  margin: 5px 0 0;
  color: var(--sag-muted, #66736f);
  font-size: 12.5px;
}
.vg-acoes { display: flex; gap: 8px; }
.vg-botao {
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--sag-ink, #17201e);
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.vg-botao-principal {
  background: var(--sag-green, #15866d);
  border-color: var(--sag-green, #15866d);
  color: #fff;
}

/* ------------------------------------------------------------------ os cartões */

.vg-cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vg-cartao {
  min-height: 118px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(21, 46, 39, .025);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.vg-cartao:hover,
.vg-cartao:focus-visible {
  transform: translateY(-2px);
  border-color: #c8d9d3;
  box-shadow: 0 9px 25px rgba(24, 63, 53, .07);
}
.vg-cartao-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--sag-muted, #66736f);
  font-size: 11px;
  font-weight: 650;
}
.vg-selo {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sag-green-soft, #eaf6f2);
  color: var(--sag-green, #15866d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}
.vg-selo svg { width: 18px; height: 18px; }
.vg-sigla svg { width: 16px; height: 16px; }
.vg-atencao .vg-selo { background: #fff3dd; color: #b97817; }
/* OS NÚMEROS MAIORES E MAIS CHAMATIVOS (Henrique, 16/10). */
.vg-cartao strong {
  display: block;
  margin-top: 10px;
  font-size: 36px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--sag-ink, #17201e);
}
.vg-atencao strong { color: #b26a0e; }
.vg-cartao small {
  display: block;
  margin-top: 5px;
  color: var(--sag-soft, #91a09b);
  font-size: 10.5px;
}

/* ------------------------------------------------------------------ a grade e os painéis */

.vg-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .85fr);
  gap: 16px;
}
.vg-coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vg-painel {
  background: #fff;
  border: 1px solid var(--sag-line, #e4e9e7);
  border-radius: 15px;
  overflow: hidden;
}
.vg-painel-cabeca {
  padding: 16px 18px 13px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf0ef;
}
.vg-painel-cabeca h3 { margin: 0; font-size: 13.5px; }
.vg-painel-cabeca p {
  margin: 3px 0 0;
  color: var(--sag-soft, #91a09b);
  font-size: 10.5px;
}
.vg-painel-cabeca a {
  color: var(--sag-green, #15866d);
  text-decoration: none;
  font-size: 10.5px;
  font-weight: 750;
  white-space: nowrap;
}

.vg-vazio {
  padding: 20px 18px;
  text-align: center;
  color: var(--sag-muted, #66736f);
  font-size: 11px;
}
.vg-vazio strong { display: block; font-size: 11.5px; color: var(--sag-ink, #17201e); }
.vg-vazio p { margin: 4px 0 0; }
.vg-vazio .vg-sigla { margin: 0 auto 9px; }

/* As siglas de 32 px, na cor da v2 — e sempre com a palavra ao lado. */
.vg-sigla {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 850;
}
.vg-ambar { background: #fff1da; color: #ad711a; }
.vg-verde { background: #e7f5f0; color: #16775f; }
.vg-rosa { background: #ffeded; color: #bb4c48; }
.vg-vermelho { background: #ffeded; color: #b23b3f; }
.vg-cinza { background: #eef1f0; color: #66736f; }

/* ------------------------------------------------------------------ as prioridades */

.vg-prioridade > a {
  padding: 7px 9px;
  border-radius: 8px;
  background: #f1f7f5;
  color: #176c59;
  text-decoration: none;
  font-size: 9.5px;
  font-weight: 750;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ o funil */

.vg-funil { padding: 14px 18px; }
.vg-funil-linha {
  display: grid;
  grid-template-columns: 110px minmax(80px, 1fr) 28px;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 10.5px;
  color: var(--sag-muted, #66736f);
}
.vg-funil-linha > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vg-barra {
  height: 8px;
  border-radius: 10px;
  background: #eef2f0;
  overflow: hidden;
}
.vg-barra i {
  display: block;
  width: var(--largura, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--sag-green, #15866d);
}
.vg-funil-linha b { text-align: right; color: var(--sag-ink, #17201e); font-size: 11px; }
.vg-funil-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 12px 18px;
  background: #f8faf9;
  border-top: 1px solid #edf0ef;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
}
.vg-funil-pe b { color: var(--sag-ink, #17201e); margin-left: 4px; }

/* ------------------------------------------------------------------ a agenda */

.vg-agenda { padding: 6px 18px; }
.vg-agenda-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef1f0;
}
.vg-agenda-item:last-of-type { border-bottom: 0; }
.vg-hora { font-size: 11px; color: var(--sag-green, #15866d); }
.vg-agenda-item strong { display: block; font-size: 11.5px; }
.vg-agenda-item small {
  display: block;
  margin-top: 2px;
  color: var(--sag-soft, #91a09b);
  font-size: 9.8px;
}
.vg-feito {
  border-radius: 20px;
  padding: 4px 8px;
  background: #e7f5f0;
  color: #16775f;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}
.vg-mais {
  margin: 6px 0 10px;
  color: var(--sag-soft, #91a09b);
  font-size: 10px;
}

/* ------------------------------------------------------------------ a saúde do canal */

.vg-canal { padding: 14px 18px 16px; }
.vg-numero {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
}
.vg-logo {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #e8f6f1;
  color: #15775f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 850;
}
.vg-numero > div { min-width: 0; }
.vg-numero strong { display: block; font-size: 11.5px; }
.vg-numero small {
  display: block;
  margin-top: 2px;
  color: var(--sag-soft, #91a09b);
  font-size: 9.7px;
}
.vg-situacao {
  margin-left: auto;
  border-radius: 20px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}
.vg-fila {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
  border: 1px solid #edf0ef;
  border-radius: 11px;
  overflow: hidden;
}
.vg-fila div {
  padding: 10px;
  text-align: center;
  border-right: 1px solid #edf0ef;
}
.vg-fila div:last-child { border-right: 0; }
.vg-fila b { display: block; font-size: 11px; }
.vg-fila span {
  display: block;
  margin-top: 2px;
  color: var(--sag-soft, #91a09b);
  font-size: 8.7px;
}
.vg-ensaio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: #fff4df;
  color: #a46c17;
  font-size: 10px;
  font-weight: 750;
}
.vg-ensaio i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sag-amber, #e29c32);
}

/* ------------------------------------------------------------------ o caixa */

.vg-caixa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vg-caixa > div {
  padding: 13px 18px;
  border-bottom: 1px solid #eef1f0;
}
.vg-caixa > div:nth-child(odd) { border-right: 1px solid #eef1f0; }
.vg-caixa span:first-child {
  display: block;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
  font-weight: 650;
}
.vg-caixa b { display: block; margin: 4px 0 3px; font-size: 15px; letter-spacing: -.3px; }
.vg-variacao { color: var(--sag-soft, #91a09b); font-size: 9.5px; }
.vg-sobe { color: var(--sag-green, #15866d); }
.vg-desce { color: var(--sag-red, #dc625c); }

/* ------------------------------------------------------------------ a primeira vez */

.vg-primeira-vez {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px dashed #bad6cd;
  border-radius: 14px;
  background: #f2faf7;
  display: flex;
  align-items: center;
  gap: 12px;
}
.vg-primeira-vez > span {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #d9f0e8;
  color: #16745e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.vg-primeira-vez strong { display: block; font-size: 11.5px; }
.vg-primeira-vez small {
  display: block;
  margin-top: 2px;
  color: var(--sag-muted, #66736f);
  font-size: 10px;
}
.vg-primeira-vez a {
  margin-left: auto;
  color: var(--sag-green, #15866d);
  text-decoration: none;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ as quebras */

@media (max-width: 1100px) {
  .vg-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vg-grade { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
  .visao-geral { padding: 18px 13px 32px; }
  .vg-saudacao { display: block; }
  .vg-acoes { margin-top: 14px; }
  .vg-botao { flex: 1; justify-content: center; }
  .vg-cartoes { grid-template-columns: 1fr; gap: 8px; }
  .vg-cartao { min-height: 112px; padding: 13px; }
  .vg-cartao strong { font-size: 28px; }
  .vg-prioridade { grid-template-columns: 36px minmax(0, 1fr); }
  .vg-prioridade > a.vg-abrir-pendencia { grid-column: 2; justify-self: start; }
  .vg-funil-linha { grid-template-columns: 88px minmax(0, 1fr) 25px; }
  .vg-caixa { grid-template-columns: 1fr; }
  .vg-caixa > div:nth-child(odd) { border-right: 0; }
  .vg-primeira-vez { align-items: flex-start; flex-wrap: wrap; }
  .vg-primeira-vez a { margin-left: 46px; }
}


/* =================================================================== OPÇÃO A (16/10)
 * O Henrique escolheu a opção A nos três blocos de cima: cartões com faixa de cor no topo e
 * ícone grande, Prioridades com barrinha da gravidade e botão, Funil com a cor de cada etapa.
 * As cores são as do quadro dos Negócios, e vêm sempre com a palavra (título, etapa, gravidade). */

.vg-cor-ambar, .vg-etapa-ambar { --vg-cor: #d08a1a; --vg-claro: #fff3dd; }
.vg-cor-azul, .vg-etapa-azul { --vg-cor: #3f74c4; --vg-claro: #e8f0fb; }
.vg-cor-roxo, .vg-etapa-roxo, .vg-etapa-violeta { --vg-cor: #7a5cc4; --vg-claro: #efeafa; }
.vg-cor-verde, .vg-etapa-verde { --vg-cor: #1d8a6c; --vg-claro: #e6f5ef; }
.vg-etapa-vermelho { --vg-cor: #c2415a; --vg-claro: #fde8ec; }
.vg-etapa-cinza { --vg-cor: #8a9692; --vg-claro: #eef1f0; }

/* os cartões */
.vg-cartao[class*="vg-cor-"] { position: relative; overflow: hidden; padding: 18px 18px 16px; border-radius: 16px; box-shadow: 0 6px 18px rgba(21, 46, 39, .05); }
.vg-cartao[class*="vg-cor-"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vg-cor); }
.vg-cartao[class*="vg-cor-"] .vg-cartao-cabeca { justify-content: flex-start; gap: 10px; color: #4b5a55; font-size: 12.5px; font-weight: 700; }
.vg-cartao[class*="vg-cor-"] .vg-selo { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: var(--vg-claro); color: var(--vg-cor); }
.vg-cartao[class*="vg-cor-"] .vg-selo svg { width: 20px; height: 20px; }
.vg-cartao[class*="vg-cor-"] strong { margin-top: 14px; font-size: 38px; letter-spacing: -1.4px; line-height: 1; }
.vg-cartao[class*="vg-cor-"] small { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #66736f; font-size: 12px; }
.vg-variacao { font-style: normal; font-weight: 800; color: var(--vg-cor); white-space: nowrap; }

/* as Prioridades do dia */
.vg-quantas-pendencias { padding: 4px 10px; border-radius: 999px; background: #fde8ec; color: #c2415a; font-size: 12px; font-weight: 800; white-space: nowrap; }
.vg-prioridades { padding: 0; }
/* O GRID que a troca da C pela A tinha apagado (16/10: ícone, frase e botão empilhados). */
.vg-prioridade {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center;
  gap: 14px; padding: 14px 18px 14px 20px; border-bottom: 1px solid #eef1f0;
}
.vg-prioridade:last-child { border-bottom: 0; }
.vg-prioridade > a.vg-seta-pendencia {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid #e4e9e7; background: #fff;
  display: grid; place-items: center; color: var(--sag-green, #15866d);
}
.vg-prioridade > a.vg-seta-pendencia:hover { background: #f1f7f5; }
.vg-seta-pendencia svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.vg-prioridade::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: currentColor; }
.vg-tom-rosa::before { color: #c2415a; }
.vg-tom-ambar::before { color: #d08a1a; }
.vg-tom-verde::before { color: #1d8a6c; }
.vg-tom-cinza::before { color: #8a9692; }
.vg-prioridade .vg-sigla { width: 40px; height: 40px; border-radius: 12px; }
.vg-prioridade .vg-sigla svg { width: 20px; height: 20px; }
.vg-prioridade strong { display: block; font-size: 14px; }
.vg-prioridade small { display: block; margin-top: 4px; color: #66736f; font-size: 12px; }
.vg-prioridade small b { margin-right: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vg-texto-ambar { color: #ad711a; }
.vg-texto-rosa { color: #bb4c48; }
.vg-texto-verde { color: #16775f; }
.vg-texto-cinza { color: #66736f; }
.vg-prioridade > a.vg-abrir-pendencia {
  height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px;
  background: var(--sag-green, #15866d); color: #fff; font-size: 12.5px; font-weight: 700;
}
.vg-prioridade > a.vg-abrir-pendencia:hover { background: #0f6b56; }

/* o Funil comercial */
.vg-funil-linha { grid-template-columns: 10px minmax(90px, 130px) minmax(80px, 1fr) 92px; margin: 12px 0; font-size: 13px; }
.vg-funil-linha > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--vg-cor, #8a9692); }
.vg-funil-linha .vg-barra { height: 12px; background: var(--vg-claro, #eef2f0); }
.vg-funil-linha .vg-barra i { background: var(--vg-cor, #15866d); }
.vg-funil-numeros { text-align: right; }
.vg-funil-numeros b { display: block; font-size: 14px; }
.vg-funil-numeros small { font-size: 11px; color: #66736f; }

@media (max-width: 650px) {
  .vg-prioridade { grid-template-columns: 36px minmax(0, 1fr); }
  .vg-prioridade > a.vg-abrir-pendencia { grid-column: 2; justify-self: start; }
  .vg-funil-linha { grid-template-columns: 10px 90px minmax(0, 1fr) 70px; }
  .vg-cartao[class*="vg-cor-"] strong { font-size: 30px; }
}


/* ====================================== OPÇÃO A NA COLUNA DA DIREITA (16/10)
 * Agenda de hoje, Saúde do canal e O caixa do período no mesmo estilo dos blocos de cima. */

/* a agenda: hora num quadrado da cor do tipo (as cores da tela de Atividades) */
.vg-tipo-tarefa { --vg-cor: #356d58; --vg-claro: #e6f1ec; }
.vg-tipo-reuniao { --vg-cor: #3d6f9f; --vg-claro: #e9f1fa; }
.vg-tipo-ligacao { --vg-cor: #7056aa; --vg-claro: #f0ecf8; }
.vg-tipo-retorno { --vg-cor: #a77520; --vg-claro: #fff4df; }
.vg-agenda { padding: 4px 18px; }
.vg-agenda-item { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; }
.vg-agenda-item .vg-hora {
  height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--vg-claro, #e6f1ec); color: var(--vg-cor, #356d58); font-size: 14px; font-weight: 800;
}
.vg-agenda-item strong { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.vg-icone-do-tipo { display: inline-grid; color: var(--vg-cor, #356d58); }
.vg-icone-do-tipo svg { width: 15px; height: 15px; }
.vg-agenda-item small { margin-top: 2px; font-size: 12px; color: #66736f; }
.vg-feito { padding: 3px 9px; border-radius: 999px; background: #e6f5ef; color: #1d8a6c; font-size: 11px; font-weight: 800; font-style: normal; }

/* o canal: ícone do WhatsApp, situação em selo com bolinha, a fila em três quadros */
.vg-numero { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 18px; }
.vg-logo { width: 40px; height: 40px; border-radius: 12px; background: #e6f5ef; color: #1d8a6c; display: grid; place-items: center; }
.vg-logo svg { width: 20px; height: 20px; }
.vg-numero strong { font-size: 13.5px; }
.vg-numero small { font-size: 12px; }
.vg-situacao { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.vg-situacao::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* O número pausado ganha o "Resolver" ao lado do selo, e leva a WhatsApp › Seus números. */
.vg-situacao-e-acao { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.vg-resolver { font-size: 12px; font-weight: 800; color: var(--ruim, #b44752); text-decoration: underline; white-space: nowrap; }
.vg-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 18px; border-top: 0; }
.vg-fila div { border: 0; border-radius: 12px; padding: 12px; text-align: left; background: var(--vg-claro); }
.vg-fila b { font-size: 26px; font-weight: 800; line-height: 1; color: var(--vg-cor); }
.vg-fila span { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: #4b5a55; }
.vg-quadro-cinza { --vg-cor: #8a9692; --vg-claro: #eef1f0; }
.vg-quadro-ambar { --vg-cor: #d08a1a; --vg-claro: #fff3dd; }
.vg-quadro-rosa { --vg-cor: #c2415a; --vg-claro: #fde8ec; }

/* o caixa: quatro cartõezinhos com barrinha de cor */
.vg-caixa { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 18px; }
.vg-caixa > div,
.vg-caixa > div:nth-child(odd) {
  position: relative; overflow: hidden; padding: 12px 14px 12px 16px;
  border: 1px solid #eef2f0; border-radius: 13px;
}

.vg-caixa-verde { --vg-cor: #1d8a6c; }
.vg-caixa-rosa { --vg-cor: #c2415a; }
.vg-caixa-azul { --vg-cor: #3f74c4; }
.vg-caixa-ambar { --vg-cor: #d08a1a; }
.vg-caixa span:first-child { font-size: 12px; font-weight: 700; color: #4b5a55; }
.vg-caixa b { margin: 6px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.6px; }

@media (max-width: 650px) {
  .vg-caixa { grid-template-columns: 1fr; }
  .vg-fila b { font-size: 21px; }
}


/* =================================== O ACABAMENTO DE 16/10 (a análise brutal do Henrique)
 * Títulos e frases dos painéis legíveis, colunas que terminam juntas. */
.vg-painel-cabeca { padding: 16px 18px 12px; }
.vg-painel-cabeca h3 { font-size: 15px; }
.vg-painel-cabeca p { font-size: 12px; color: #66736f; }
.vg-painel-cabeca a { font-size: 12.5px; font-weight: 700; }
.vg-grade { align-items: stretch; }
.vg-coluna > .vg-painel:last-child { flex: 1; }
.vg-funil-pe { font-size: 12px; }


/* ============================ A REVISÃO DE ACABAMENTO (skill, 16/10): letra miúda que sobrou */
.vg-mais, .vg-ensaio, .vg-primeira-vez small, .vg-primeira-vez a { font-size: 12px; }
.vg-caixa .vg-variacao { font-size: 12px; font-weight: 800; }
.vg-prioridade small b { font-size: 11px; }

/* AS DUAS COLUNAS MEIO A MEIO (Henrique, 16/10: "a tela poderia estar dividida no meio para
 * ficar mais equilibrada") — antes a esquerda tinha 1,35 contra 0,85 da direita. */
.vg-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vg-grade { grid-template-columns: 1fr; } }

/* AS COLUNAS DA VISÃO GERAL EM TRÊS (Henrique, 16/10) — as que existirem dividem a largura. */
.vg-grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-grade-1 { grid-template-columns: minmax(0, 1fr); }
.vg-grade-3 .vg-prioridade { grid-template-columns: 40px minmax(0, 1fr); }
.vg-grade-3 .vg-prioridade > a.vg-abrir-pendencia { grid-column: 2; justify-self: start; }
.vg-grade-3 .vg-prioridade > a.vg-seta-pendencia { position: absolute; right: 18px; top: 14px; }
.vg-grade-3 .vg-funil-linha { grid-template-columns: 10px minmax(70px, 110px) minmax(40px, 1fr) 84px; gap: 8px; }
.vg-grade-3 .vg-caixa { grid-template-columns: 1fr 1fr; }
.vg-grade-3 .vg-fila b { font-size: 22px; }
@media (max-width: 1250px) { .vg-grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .vg-grade-3, .vg-grade-2 { grid-template-columns: 1fr; } }