/* GPD - Gerenciador de Vendas e Clientes. Estilos específicos desta página,
   além do que já é reaproveitado de css/styles.css (tema, .card, tabelas,
   .auth-gate/.auth-card, .pf-modal). */

/* Convenção backdrop-filter (mesma de css/styles.css): só usar sobre fundo
   translúcido de verdade (alpha < 1 em toda parada/camada do
   background, inclusive a de baixo). Sobre fundo opaco não tem efeito
   visual e já causou bug real de texto borrado em WebView Android (ver
   .auth-submit em styles.css). Confirme a translucidez do background
   antes de adicionar backdrop-filter num componente novo aqui. */

.gpd-top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 28px;
  max-width:1680px;
  margin:0 auto;
}
.gpd-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
/* Geometria comum de TODOS os botões do header, copiada da pílula
   "Mês / Setembro de 2026" (.gpd-plano-mes-pill, mais abaixo) — pedido do
   usuário 2026-09-03 ("deixe os cards neste modelo"): cantos totalmente
   arredondados, respiro lateral maior e a mesma luz interna no topo. A COR
   continua sendo o que separa cada função (dourado = planilha, vermelho =
   sair/voltar), só o formato passa a ser único na linha. */
.gpd-header-actions .excel-btn{
  margin-top:0;
  border-radius:999px;
  padding:8px 18px;
  line-height:1.1;
  white-space:nowrap;
}
/* No celular só sobram os dois vermelhos (os de planilha somem, ver regra
   com #gpdPlanoPickFileBtn lá embaixo) e eles viram largura total: a regra
   acima tem especificidade maior que a do breakpoint em styles.css, então o
   alvo de toque precisa ser devolvido aqui, senão o botão fica mais baixo
   que os 40px de sempre. */
@media (max-width: 640px){
  .gpd-header-actions .excel-btn{ padding:11px 18px; }
}

/* Mesma receita liquid-glass vermelha do .gpd-access-card-lg.gpd-access-card-red
   (css/styles.css, usada nos atalhos Almoxarifado/Produção), no formato
   pílula acima — botões de utilidade do header (voltar/sair), não atalhos de
   navegação. */
.gpd-header-actions .excel-btn.gpd-header-btn-red{
  color:var(--text);
  border-color: rgba(225,89,90,0.35);
  background:linear-gradient(180deg, rgba(225,89,90,0.20), rgba(225,89,90,0.05));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.gpd-header-actions .excel-btn.gpd-header-btn-red:hover{
  background:linear-gradient(180deg, rgba(225,89,90,0.28), rgba(225,89,90,0.08));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.26);
}
/* Mesma receita liquid-glass acima, na cor verde clara já usada em
   .auth-field-glow-green (rgba(79,174,124)) — botão "Visita fora da
   carteira" pedido pra se destacar dos outros excel-btn cinza da linha. */
.excel-btn.gpd-btn-glass-green{
  color:var(--text);
  border-color: rgba(79,174,124,0.4);
  background:linear-gradient(180deg, rgba(79,174,124,0.24), rgba(79,174,124,0.06));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.excel-btn.gpd-btn-glass-green:hover{
  border-color: rgba(79,174,124,0.55);
  background:linear-gradient(180deg, rgba(79,174,124,0.32), rgba(79,174,124,0.09));
  color:var(--text);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.26);
}
/* Mesmo bug de texto "apagado" do .gpd-access-card-lg (ver nota grande no
   topo de css/styles.css e ao lado dessa classe lá): .gpd-header-btn-red e
   .gpd-btn-glass-green têm backdrop-filter no PRÓPRIO elemento, e
   "← Painel Comercial"/"Sair"/"Visita fora da carteira" eram texto solto
   sem wrapper. Precisa do <span> em volta do texto + isto aqui pra
   promover ele pra própria camada de composição. */
/* Botoes que agem sobre o .xlsx inteiro (selecionar/baixar/substituir
   planilha): agora usam EXATAMENTE o vidro dourado da pilula do mes
   (.gpd-plano-mes-pill) — mesma borda, mesmo gradiente, mesmo blur e mesma
   sombra interna. Antes eram vidro neutro e o dourado so aparecia no hover;
   o usuario pediu (2026-09-03) que ficassem no modelo da pilula. O vermelho
   continua reservado pra sair/voltar. */
.gpd-header-actions .excel-btn.gpd-header-btn-glass{
  color:var(--text);
  border-color:rgba(242,183,5,0.32);
  background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.04));
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 4px 10px rgba(0,0,0,0.18);
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  text-decoration:none;
}
.gpd-header-actions .excel-btn.gpd-header-btn-glass:hover{
  border-color:rgba(242,183,5,0.55);
  color:var(--accent);
  background:linear-gradient(180deg, rgba(242,183,5,0.26), rgba(242,183,5,0.07));
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 14px rgba(0,0,0,0.26);
}

.gpd-header-btn-red span, .gpd-btn-glass-green span, .gpd-header-btn-glass span{ position:relative; z-index:1; }
/* "Faturamento geral (PDF)" — mesmo vidro dos vizinhos, em azul pra se
   destacar das ações de planilha (dourado) e de sair (vermelho). */
.gpd-header-actions .excel-btn.gpd-header-btn-abc-geral{
  border-color:rgba(79,154,192,0.5);
  background:linear-gradient(180deg, rgba(79,154,192,0.3), rgba(79,154,192,0.08));
}
.gpd-header-actions .excel-btn.gpd-header-btn-abc-geral:hover{
  color:#bfe3f5;
  border-color:rgba(79,154,192,0.75);
  background:linear-gradient(180deg, rgba(79,154,192,0.42), rgba(79,154,192,0.12));
}

.gpd-dev-banner{
  background: var(--accent-soft);
  border:1px solid rgba(242,183,5,0.32);
  color: var(--accent);
  border-radius:10px;
  padding:10px 14px;
  font-size:12.5px;
  font-family:'JetBrains Mono', monospace;
  margin:24px 0 20px;
}

.gpd-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:2px;
}
.gpd-toolbar-summary{
  display:flex;
  align-items:baseline;
  gap:16px;
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  color: var(--text-dim);
}
/* Por id, não :last-child — #gpdTotalVendidoPct (o selo de %) veio depois
   dele no HTML e passaria a herdar esse tamanho grande por engano. */
#gpdTotalVendido{
  color: var(--text);
  font-weight:800;
  font-size:20px;
}
.gpd-toolbar-summary .pill{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
}
.gpd-toolbar-summary .pill.accent{ background: rgba(242,183,5,0.16); color: var(--accent); }

.gpd-empty-state{
  padding:32px 12px;
  text-align:center;
  color: var(--text-faint);
  font-size:13px;
}

/* ---------- Modal "Visitas" — busca das observações/fotos registradas ao
   marcar visita (ver gpdPlanoRenderVisitas em js/gpd-plano.js), cruzando
   GPD_PLANO_VISITAS com o nome do cliente pelo rowNum. Aberto pelo botão
   "Buscar visitas" na toolbar de Clientes & Vendas — não fica expandido
   permanente na página pra não somar mais rolagem embaixo da tabela de 60+
   clientes. Avatar reaproveita .gpd-clientes-avatar (mesma cor/fonte do
   círculo de iniciais da tabela) só um pouco maior, já que aqui não compete
   por espaço com 12 colunas de mês. ---------- */
#gpdVisitasOpenBtn{
  background: linear-gradient(180deg, rgba(79,154,192,0.22), rgba(79,154,192,0.08));
  border-color: rgba(79,154,192,0.4);
  color: var(--text);
}
#gpdVisitasOpenBtn:hover{ border-color: var(--steel); color: var(--steel); }
#gpdVisitasOpenBtn .pill{
  background: rgba(242,183,5,0.18);
  color: var(--accent);
  margin-left:2px;
}
/* Total (amarelo, regra acima) vs. visitas do mês ativo (verde) — precisa
   ganhar da regra acima em especificidade pra não ficar amarelo também. */
#gpdVisitasOpenBtn .pill.good{
  background: rgba(79,174,124,0.18);
  color: var(--good);
}
/* Sem visita no mês ativo (vermelho pulsando) — mesmo motivo de
   especificidade da regra .good acima, senão o amarelo padrão vence. */
#gpdVisitasOpenBtn .pill.bad{
  background: rgba(225,89,90,0.18);
  color: var(--bad);
}
/* "?" = não consegui confirmar as visitas (falha ao buscar do servidor),
   não "confirmei que é zero" — mesmo motivo de especificidade acima. Laranja
   pra não ser confundido nem com o amarelo padrão (total) nem com o
   vermelho de "sem visita no mês" (.bad). */
#gpdVisitasOpenBtn .pill.warn{
  background: rgba(225,148,60,0.18);
  color: var(--warn);
}
/* Pedido explicito do usuario: badge de contagem do botao "Localização" em
   vidro 3D verde cheio, mesma receita do gradiente/sombra dourado da aba
   ativa da sidebar (nav.tabs.tabs-sidebar button.active, styles.css),
   só recolorida — não a versão translúcida/orb do auth-show-pass.is-correct. */
#gpdLocalizacaoCount{
  color:#0c2417;
  background:linear-gradient(160deg, #8fe6b8 0%, #4FAE7C 55%, #1f6b45 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -6px 8px -2px rgba(9,60,32,0.4),
    0 3px 6px rgba(0,0,0,0.3),
    0 6px 14px -6px rgba(79,174,124,0.55);
}
.gpd-visitas-modal-card{ max-height:88vh; }
.gpd-visitas-header-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.gpd-visitas-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:4px 0 16px;
}
.gpd-visitas-search,
.gpd-visitas-month-select{
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  padding:10px 14px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  outline:none;
}
/* min-width>0 de propósito: sem isso o input encolhe até quase sumir (só
   cabe 3-4 letras do placeholder) pra caber ao lado do select+botão na
   mesma linha em ~390px, em vez de quebrar pro layout de duas linhas
   (que fica legível). */
.gpd-visitas-search{ flex:1; min-width:140px; }
/* 150px cortava a última letra de "Todos os meses" (a opção padrão) contra
   a seta nativa do select — 176px sobra espaço sem roubar linha do
   .gpd-visitas-search ao lado (min-width:140px reservado acima). */
.gpd-visitas-month-select{ flex:none; width:176px; }
/* .excel-btn vira width:100% no breakpoint mobile de styles.css (pensado pra
   botao empilhado sozinho, tipo login/rodape) — aqui o botao ("Exportar
   PDF"/"Copiar tudo") fica ao lado do select+busca na mesma linha, e virar
   100% empurra a linha inteira pra fora do card (titulo/select cortados na
   borda). Especificidade 0,2,0 > 0,1,0 do .excel-btn garante a prioridade
   independente da ordem de carregamento dos arquivos. */
.gpd-visitas-filters .excel-btn{
  width:auto;
  flex:none;
  margin-top:0;
}
.gpd-visitas-search:focus,
.gpd-visitas-month-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}
/* Par "De/Até" pra filtrar por dia(s) exato(s) (além do filtro de mês
   inteiro acima). Era <input type="date"> nativo (calendário do SO/
   navegador, fora do DOM — sem controle nenhum de visual, ver mesmo motivo
   documentado em almoxarifado.css sobre .almox-date-input) — pedido do
   usuário 2026-08-28 ("use o mesmo padrão", apontando o calendário 3D do
   Almoxarifado): vira input[type=text] com o mesmo mecanismo de popup
   próprio (JS, gpdDp* em js/gpd-plano.js, porta de almoxDp*), só que com
   paleta CLARA em vez de escura e "hoje"/selecionado em vidro VERDE em vez
   de dourado — variação de tema pedida explicitamente pra este contexto,
   não erro de cópia do padrão original. */
.gpd-visitas-date-range{
  display:flex;
  align-items:center;
  gap:6px;
}
.gpd-visitas-date-sep{
  font-size:11.5px;
  color: var(--text-faint);
}
.gpd-visitas-date-input{
  cursor:text;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  padding:9px 28px 9px 10px;
  font-size:13px;
  font-family:'Inter', sans-serif;
  outline:none;
  width:132px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C636E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position: right 8px center;
  background-size:14px 14px;
}
.gpd-visitas-date-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}

/* Popup do calendário (gpdDp*, ver js/gpd-plano.js) — mesma estrutura do
   .almox-datepicker (almoxarifado.css), paleta CLARA + vidro VERDE em vez
   de escura/dourada (pedido do usuário 2026-08-28). Sem backdrop-filter em
   nenhum elemento aqui, de propósito — mesma doutrina de segurança do
   resto do projeto (ver comentário em .almox-date-input sobre esse bug já
   ter custado caro 3x). */
.gpd-datepicker{
  position:fixed;
  z-index:500;
  width:264px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.08);
  background:#FFFFFF;
  box-shadow:0 24px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.6);
  font-family:'Inter', sans-serif;
}
.gpd-datepicker.hidden{ display:none; }
.gpd-datepicker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.gpd-datepicker-title{
  font-family:'Oswald', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:#1B2430;
}
.gpd-datepicker-nav{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  background:#F3F5F7;
  color:#5C636E;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.gpd-datepicker-nav:hover{ border-color:var(--good); color:var(--good); }
.gpd-datepicker-weekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  margin-bottom:4px;
}
.gpd-datepicker-weekdays span{
  text-align:center;
  font-size:10.5px;
  color:#8A93A0;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.gpd-datepicker-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:2px;
}
.gpd-datepicker-day{
  height:32px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:#1B2430;
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gpd-datepicker-day:hover{ background:#F0F2F4; }
.gpd-datepicker-day--outside{ color:#B7BEC7; }
.gpd-datepicker-day--today,
.gpd-datepicker-day--selected{
  border-radius:999px;
  color:#FFFFFF;
  font-weight:700;
  background:linear-gradient(160deg, #7EE0A8 0%, #4FAE7C 55%, #2F7A54 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -5px 7px -3px rgba(20,60,40,0.35),
    0 2px 4px rgba(0,0,0,0.18),
    0 6px 12px -4px rgba(79,174,124,0.45),
    0 10px 18px -10px rgba(0,0,0,0.35);
  transform:translateY(-1px);
}
.gpd-datepicker-day--today:hover,
.gpd-datepicker-day--selected:hover{ background:linear-gradient(160deg, #7EE0A8 0%, #4FAE7C 55%, #2F7A54 100%); }
.gpd-datepicker-day:disabled{ cursor:default; }
.gpd-datepicker-foot{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,0.08);
}
.gpd-datepicker-today,
.gpd-datepicker-clear{
  border:1px solid rgba(0,0,0,0.12);
  background:#F3F5F7;
  color:#5C636E;
  border-radius:8px;
  padding:6px 10px;
  font-size:11.5px;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
}
.gpd-datepicker-today:hover{ border-color:var(--good); color:var(--good); }
.gpd-datepicker-clear:hover{ border-color:var(--bad); color:var(--bad); }
.gpd-visitas-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:56vh;
  overflow-y:auto;
  padding-right:4px;
}
/* Cores abaixo pensadas pro fundo CLARO do .pf-modal-card (branco/cinza
   claro) — diferente da tabela de Clientes & Vendas (fundo escuro), onde
   var(--text)/var(--steel) já contrastam bem. Aqui precisam do próprio
   tom, senão o texto claro do tema escuro vira quase invisível em cima de
   branco (era o caso antes desse ajuste). */
.gpd-visita-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ECEEF3;
  background:#FFFFFF;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gpd-visita-item:hover{
  border-color: rgba(79,154,192,0.5);
  background:#F5F8FC;
}
.gpd-visita-avatar{
  width:34px;
  height:34px;
  font-size:12px;
  background: var(--steel);
  color:#FFFFFF;
  border:none;
}
.gpd-visita-info{
  flex:1;
  min-width:0;
}
.gpd-visita-top{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:2px;
}
.gpd-visita-cliente{
  font-weight:700;
  color:#1B2233;
  font-size:13.5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gpd-visita-month{
  flex:none;
  font-size:11px;
  color: var(--steel);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
/* Visita registrada fora da carteira (cliente/prospect sem linha na
   planilha, ver #gpdVisitaAvulsaModal) — mesma pílula dourada de
   .gpd-sale-visita-tag ("amarelo"), pra reconhecer de longe qual visita não
   tem vínculo com célula/valor nenhum. */
/* "3 visitas no mes" na lista de Visitas — mesma familia visual da tag
   "Fora da carteira", cor do acento pra ler como contagem, nao como alerta. */
.gpd-visita-qtd-tag{
  flex:none;
  display:inline-block;
  background:rgba(242,183,5,0.16);
  border:1px solid rgba(242,183,5,0.45);
  color:var(--accent);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px;
  font-weight:700;
  padding:1px 7px;
  border-radius:999px;
  margin-left:6px;
}
.gpd-visita-avulsa-tag{
  flex:none;
  display:inline-block;
  background:#ffe066;
  color:#5c4a00;
  font-weight:700;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  padding:2px 7px;
  border-radius:999px;
}
.gpd-visita-nota{
  font-size:12.5px;
  color:#5A6270;
  line-height:1.4;
}
.gpd-visita-nota-empty{ color:#9AA1B0; font-style:italic; }
.gpd-visita-local{ font-size:11px; color:#8B93A0; margin-top:3px; }
.gpd-visita-foto-link{ flex:none; display:block; line-height:0; }
.gpd-visita-foto{
  width:52px;
  height:52px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #ECEEF3;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.gpd-visita-foto-link:hover .gpd-visita-foto{
  transform: scale(1.05);
  border-color: var(--accent);
}

.gpd-loc-coords{
  display:inline-block;
  font-size:11px;
  color: var(--steel);
  margin-top:4px;
  text-decoration:none;
}
.gpd-loc-coords:hover{ text-decoration:underline; }
/* Especificidade 0,2,0 (não só .gpd-loc-copy-btn) de propósito: precisa
   ganhar do .excel-btn{width:100%} do breakpoint mobile de styles.css (ver
   nota em .gpd-visitas-filters acima) — senão o botão vira uma pílula
   full-width que cobre o endereço da linha de baixo em ~390px. */
.gpd-visita-item .gpd-loc-copy-btn{
  flex:none;
  width:auto;
  margin-top:0;
  padding:8px 12px;
  font-size:12.5px;
  white-space:nowrap;
}

/* Corrigir/excluir uma visita registrada (botao "Editar" de cada item do
   modal de Visitas, 2026-09-04). Envolve o .gpd-visita-item num
   .gpd-visita-entry porque o item e uma linha flex horizontal - o editor
   precisa cair ABAIXO dele, nao virar mais uma coluna espremida ao lado da
   foto. Mesma paleta de fundo claro do resto do modal. */
.gpd-visita-entry{
  display:flex;
  flex-direction:column;
  gap:0;
}
.gpd-visita-edit-open{
  flex:none;
  border:1px solid #D9DEE7;
  background:#F3F5F9;
  color:#5A6270;
  border-radius:8px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  white-space:nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.gpd-visita-edit-open:hover{
  border-color: var(--steel);
  color:#1B2233;
  background:#E9EEF6;
}
.gpd-visita-edit{
  border:1px solid #DCE2EC;
  border-radius:12px;
  background:#F4F7FB;
  padding:12px 14px;
  margin-top:6px;
}
.gpd-visita-edit-fields{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
.gpd-visita-edit-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 220px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#8B93A0;
  font-weight:700;
}
.gpd-visita-edit-field input{
  border:1px solid #D9DEE7;
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  color:#1B2233;
  background:#FFFFFF;
  text-transform:none;
  letter-spacing:normal;
  font-weight:500;
  font-family:inherit;
}
.gpd-visita-edit-field input:focus{
  outline:none;
  border-color: var(--steel);
  box-shadow:0 0 0 3px rgba(79,154,192,0.16);
}
.gpd-visita-edit-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.gpd-visita-edit-acao{
  border:1px solid #D9DEE7;
  background:#FFFFFF;
  color:#5A6270;
  border-radius:8px;
  padding:7px 12px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.gpd-visita-edit-acao:disabled{ opacity:0.55; cursor:default; }
.gpd-visita-edit-salvar{ border-color: rgba(47,122,84,0.45); color:#2F7A54; }
.gpd-visita-edit-salvar:hover:not(:disabled){ background:#EAF6EF; }
.gpd-visita-edit-menos{ border-color: rgba(242,183,5,0.5); color:#8A6A00; }
.gpd-visita-edit-menos:hover:not(:disabled){ background:#FFF7E0; }
/* Excluir e a acao irreversivel da tela (visita e prova de trabalho de
   campo) - fica vermelha e por ultimo, longe do "Salvar correcao". */
.gpd-visita-edit-excluir{ border-color: rgba(200,60,60,0.45); color:#B23434; }
.gpd-visita-edit-excluir:hover:not(:disabled){ background:#FDECEC; }
.gpd-visita-edit-erro{
  color:#B23434;
  font-size:12px;
  margin-top:8px;
}
.gpd-visita-edit-erro:empty{ display:none; }

.gpd-row-actions{ width:36px; text-align:center; }
.gpd-remove-btn{
  background:none;
  border:none;
  color: var(--text-faint);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
}
.gpd-remove-btn:hover{
  color: var(--bad);
  background: var(--bad-soft);
}

.gpd-sale-modal-card{
  width:min(420px, 92vw);
}
.gpd-sale-form{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}
/* .auth-field input (styles.css) é escuro-translúcido, pensado pro fundo
   escuro do .auth-gate — dentro do .pf-modal-card claro (branco) desse
   modal, o mesmo input vira um cinza-azulado desbotado com o número quase
   na mesma cor do fundo (baixo contraste). Fundo sólido claro + número
   escuro corrige, sem depender do que está atrás. */
#gpdClienteVendaValorField input{
  background:#eef1f5;
  border:1px solid #d5dae1;
  color:#151515;
}
#gpdClienteVendaValorField input::placeholder{ color:#9aa2ad; }
#gpdClienteVendaValorField input:focus{
  background:#ffffff;
  border-color:var(--steel);
  box-shadow:0 0 0 3px rgba(79,154,192,0.18);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
/* ---- Modal "Incluir venda": de onde vem o valor da célula (11/09/2026) ----
   Pedido do usuário: "diferencie o que é do cliente com compra do que é
   informado manual" e "deixe também mais visível". Antes era uma frase miúda
   no subtítulo ("base: R$ X · já somado aqui: R$ Y"), fácil de não ler.

   ATENÇÃO ÀS CORES: o .pf-modal-card é BRANCO nos DOIS temas (ver
   css/styles.css e as notas em gpd.css:433 e 3505). Nada de var(--text)/
   var(--accent) aqui: texto claro e dourado somem no branco — foi o que
   aconteceu na primeira versão desta tela, pega na prévia antes de publicar.
   Tons escuros, como o resto do que vive dentro deste modal. */
.gpd-sale-resumo{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:14px 0 2px;
}
.gpd-sale-resumo-linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-radius:10px;
  border:1px solid #DDE2E9;
  background:#F4F6F9;
}
.gpd-sale-resumo-rot{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.02em;
  color:#151515;
}
.gpd-sale-resumo-rot em{
  font-style:normal;
  font-size:12.5px;
  font-weight:600;
  color:#6B6A63;
}
.gpd-sale-resumo-val{
  font-family:'JetBrains Mono', monospace;
  font-size:17px;
  font-weight:700;
  white-space:nowrap;
  color:#151515;
}
/* Aço = veio da planilha (mesma cor que o painel usa pra dado importado). */
.gpd-sale-resumo-linha--importado{
  border-color: rgba(42,123,168,0.40);
  background: linear-gradient(180deg, rgba(42,123,168,0.14), rgba(42,123,168,0.05));
}
.gpd-sale-resumo-linha--importado .gpd-sale-resumo-val{ color:#1C5E86; }
/* Dourado = informado à mão por aqui (mesma cor da marcação manual). */
.gpd-sale-resumo-linha--manual{
  border-color: rgba(185,134,0,0.45);
  background: linear-gradient(180deg, rgba(242,183,5,0.22), rgba(242,183,5,0.07));
}
.gpd-sale-resumo-linha--manual .gpd-sale-resumo-val{ color:#7A5800; }
.gpd-sale-resumo-linha--total{
  border-color:#CFD5DE;
  background:#EDF1F6;
}
/* Cada soma manual, com data e quem lançou. O cabeçalho abre/fecha a lista;
   a lista rola sozinha (~6 itens visíveis): uma célula pode ter dezenas de
   lançamentos no mês e o modal não pode crescer sem fim. Fundo branco nos dois
   temas (ver nota acima), então só tons escuros. */
.gpd-sale-lancs{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.gpd-sale-lancs.hidden{ display:none; }
.gpd-sale-lancs-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(185,134,0,0.45);
  background:#FFF8E1;
  color:#5A4300;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  text-align:left;
}
.gpd-sale-lancs-toggle:hover{ background:#FFF1C2; }
.gpd-sale-lancs-seta{ font-size:13px; }
.gpd-sale-lancs-lista{
  max-height:200px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
  -webkit-overflow-scrolling:touch;
}
.gpd-sale-lancs-lista.hidden{ display:none; }
.gpd-sale-lanc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid rgba(185,134,0,0.30);
  background: rgba(242,183,5,0.12);
  font-size:13.5px;
}
.gpd-sale-lanc-quando{ color:#3F4650; font-family:'JetBrains Mono', monospace; font-size:12.5px; }
.gpd-sale-lanc-quem{ color:#6B6A63; }
.gpd-sale-lanc-valor{ font-family:'JetBrains Mono', monospace; font-weight:700; color:#7A5800; white-space:nowrap; }
/* Lançamento negativo é correção — vermelho, pra não parecer venda somada. */
.gpd-sale-lanc--negativo{ border-color: rgba(198,58,59,0.35); background: rgba(198,58,59,0.10); }
.gpd-sale-lanc--negativo .gpd-sale-lanc-valor{ color:#C63A3B; }
/* Acumulado de antes do histórico existir: cinza, só pra fechar a conta. */
.gpd-sale-lanc--antigo{ border-color:#CFD5DE; background:#EDF1F6; }
.gpd-sale-lanc--antigo .gpd-sale-lanc-valor{ color:#3F4650; }
.gpd-sale-lancs-aviso{ font-size:12px; color:#7A5800; padding:2px 2px 0; }
.gpd-sale-lancs-vazio{ font-size:12px; color:#6B6A63; padding:2px; }

.gpd-sale-visita-field{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:#3a3f47;
  cursor:pointer;
  user-select:none;
}
.gpd-sale-visita-field input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#e6b800;
  cursor:pointer;
}
/* "Registrar mais uma visita": so aparece pra cliente que ja tem visita no
   mes (ver updateVisitaMaisField em js/gpd-plano.js). */
.gpd-sale-visita-mais{ margin-top:-4px; border-radius:8px; }
/* Pisca quando o vendedor tenta salvar sem mudar nada numa visita que ja
   existe — e esse o campo que ele estava procurando. */
.gpd-sale-visita-mais-hint{
  animation: gpdSaleVisitaMaisHint 0.9s ease-in-out 2;
}
@keyframes gpdSaleVisitaMaisHint{
  0%, 100%{ background:transparent; }
  50%{ background:rgba(242,183,5,0.22); }
}
@media (prefers-reduced-motion: reduce){
  .gpd-sale-visita-mais-hint{ animation:none; background:rgba(242,183,5,0.18); }
}
.gpd-sale-visita-qtd{
  display:inline-block;
  background:rgba(242,183,5,0.16);
  border:1px solid rgba(242,183,5,0.45);
  color:var(--accent);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:10px;
  font-weight:700;
  padding:1px 7px;
  border-radius:999px;
  margin-left:4px;
}
/* Cabecalho do card de Frete do vendedor: titulo/subtitulo a esquerda e o
   seletor de mes a direita. */
.gpd-frete-vendor-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.gpd-frete-vendor-head h3{ margin:0; }
.gpd-frete-vendor-head .gpd-frete-mes-select{ flex:0 0 auto; }

/* "base Ago" ao lado do rotulo de Custo KM/Tick Medio quando a venda do mes
   corrente ainda esta zerada (virada de mes) — ver gpdPlanoLoadFreteVendorCard. */
.gpd-frete-tile-nota{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(79,154,192,0.16);
  border:1px solid rgba(79,154,192,0.4);
  color:var(--steel);
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:0.02em;
  text-transform:none;
  vertical-align:middle;
}
.gpd-sale-visita-tag{
  display:inline-block;
  background:#ffe066;
  color:#5c4a00;
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:2px 8px;
  border-radius:999px;
  margin-left:2px;
}
/* Foto + observação só aparecem com "Marcar como visita" ligado — some
   quando desmarca, junto com a explicação de que ambas são descartadas
   nesse caso (ver setVisita em lib/gpdClienteVendaVisitas.js). */
.gpd-sale-visita-extra{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px 12px 2px;
  margin-top:-2px;
  border-left:2px solid #ffe066;
}
.gpd-sale-visita-extra.hidden{ display:none; }
.gpd-sale-visita-extra .auth-field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel-2);
  color:var(--text);
  padding:10px 14px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  resize:vertical;
  outline:none;
}
.gpd-sale-visita-extra .auth-field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}
.gpd-sale-nota-counter{
  align-self:flex-end;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:#8a8f99;
}
/* Palco da foto/câmera — só ocupa espaço quando tem algo pra mostrar (prévia
   já salva ou o vídeo ao vivo); vazio (visita nova, sem foto) fica sem
   altura nenhuma, então o campo abre enxuto igual o de nota. */
.gpd-sale-foto-stage:has(.gpd-sale-foto-media:not(.hidden)){ margin-top:2px; }
.gpd-sale-foto-media{
  display:block;
  width:100%;
  max-height:200px;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:cover;
  background:#0b0e13;
}
.gpd-sale-foto-media.hidden{ display:none; }
/* Prévia AO VIVO da câmera (video, não a foto já tirada) — pedido do usuário
   (2026-09-22): "aumente o campo de visão da câmera". A regra genérica acima
   (object-fit:cover + max-height:200px pequeno) RECORTA o que a câmera
   enxerga na prévia, mesmo a captura (gpdPlanoSnapshotVideoFrame) já usando
   o quadro inteiro — o vendedor via só um pedaço na tela e achava que a
   câmera via menos do que via de verdade. Seletor por TAG (video.…), não por
   id, pra valer nos dois modais que têm essa prévia (venda/visita normal e
   "Fora da carteira") sem duplicar a regra — e sem tocar no <img> da foto já
   tirada (mesma classe .gpd-sale-foto-media), que continua com cover/200px
   de propósito (prévia de resultado final, não de enquadramento). */
video.gpd-sale-foto-media{
  max-height:320px;
  object-fit:contain;
  background:#000;
}
@media (max-width:640px){
  video.gpd-sale-foto-media{ max-height:45vh; }
}
.gpd-sale-foto-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  row-gap:6px;
  gap:12px;
  margin-top:8px;
}
.gpd-sale-foto-actions.hidden{ display:none; }
.gpd-sale-foto-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.gpd-sale-foto-btn:hover{ border-color:var(--accent); color:var(--accent); }
.gpd-sale-foto-link{
  border:none;
  background:none;
  color:#8a8f99;
  font-size:12px;
  text-decoration:underline;
  cursor:pointer;
  padding:4px;
}
.gpd-sale-foto-link:hover{ color:var(--text); }
.gpd-sale-foto-link.hidden{ display:none; }

/* Câmera em TELA CHEIA enquanto está aberta (pedido do usuário, 2026-09-22:
   "ampliar mais para capturar a imagem e após voltar a tela normal") — a
   prévia de 320px/45vh acima já mostra o quadro inteiro (object-fit:contain),
   mas continua pequena pra enquadrar direito. As classes abaixo são postas
   por JS (setCameraFullscreen em js/gpd-plano.js, nos dois modais que tem
   câmera ao vivo) só enquanto cameraStream existe, e SEMPRE desligadas por
   stopCamera() — capturou, cancelou, fechou o modal, trocou de cliente, ESC
   ou erro fatal ao abrir passam todos por ali, então não existe caminho que
   deixe a tela preta travada. De propósito SEM :has() aqui (o WebView do app
   Android pode ser antigo demais pra suportar).
   z-index bem acima do maior já usado no projeto (.pf-modal é 120, o mais
   alto de resto é 1200) — é overlay de câmera, precisa cobrir tudo, modal
   incluso. `margin:0 !important` porque a regra
   `.gpd-sale-foto-stage:has(.gpd-sale-foto-media:not(.hidden))` (linha ~935)
   tem especificidade MAIOR que uma classe só (o :has() soma a do próprio
   argumento) e continuaria empurrando 2px do topo por cima de
   `position:fixed; inset:0` sem isso — único !important deste bloco, de
   propósito. */
.gpd-sale-foto-stage--cheia{
  position:fixed;
  inset:0;
  margin:0 !important;
  z-index:3000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  border:none;
  border-radius:0;
}
.gpd-sale-foto-stage--cheia video.gpd-sale-foto-media{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:contain;
  border:none;
  border-radius:0;
  background:#000;
}
/* Barra "Capturar"/"cancelar" sai do fluxo normal (ficaria atrás do vídeo em
   tela cheia) e vira uma faixa fixa colada embaixo, por CIMA do vídeo —
   degradê escuro só pra dar contraste ao texto/botão sem esconder a cena.
   env(safe-area-inset-bottom): sem isso, o botão nasce embaixo da barra de
   gestos do iPhone. */
.gpd-sale-foto-actions--cheia{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:3001;
  margin:0;
  justify-content:center;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.82) 100%);
}
/* Alvo de toque maior no celular — botões pequenos de formulário ficam
   difíceis de acertar por cima de uma foto ao vivo, com o dedo tampando a
   própria mira. Cores claras de propósito: o resto do botão/link usa
   var(--text)/cinza pensado pro card branco do modal, ilegível sobre o
   vídeo preto de fundo. */
.gpd-sale-foto-actions--cheia .gpd-sale-foto-btn{
  padding:14px 28px;
  font-size:14px;
  background:rgba(255,255,255,0.94);
  border-color:transparent;
  color:#141414;
}
.gpd-sale-foto-actions--cheia .gpd-sale-foto-link{
  color:#fff;
  font-size:13px;
  padding:10px 8px;
}
.gpd-sale-foto-actions--cheia .gpd-sale-foto-link:hover{ color:#fff; opacity:0.8; }
/* Aviso de câmera (permissão negada, captura falhou etc.) também precisa
   ficar visível por cima do vídeo — sem isto o texto continuava no fluxo
   normal, atrás da tela cheia, e o vendedor via a câmera travar sem
   explicação nenhuma na tela. Ancorado acima da barra de botões. */
.gpd-cam-aviso--cheia{
  position:fixed;
  left:16px;
  right:16px;
  bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:3002;
  margin:0;
}

/* ---------- Plano de Ação (reproduz a "parte de cima" de cada aba da
   planilha GPD2607: header, Objetivo/Responsável, gráfico, tabela de metas)

   Escala de raio própria do bloco, pra manter consistência interna:
   10px = controles compactos (select), 14px = painéis de conteúdo
   (meta-box, chart-wrap), pill (999px) = badges de status/contexto. ---------- */
.gpd-plano-card{
  padding:26px 28px 30px;
}

/* Faixa de indicadores-resumo no topo do bloco (mês mais recente com
   resultado real lançado) — reaproveita .kpi-strip/.kpi do painel principal
   pra ficar visualmente idêntico, só com colunas iguais em vez da 1ª coluna
   larga (que lá é reservada pro gauge "Meta Mês", que não existe aqui). */
.gpd-plano-kpis{
  grid-template-columns: repeat(5, 1fr);
  margin-top:0;
  margin-bottom:26px;
  background:transparent;
  border:none;
  gap:14px;
}
/* Cada tile vira um cartão de vidro flutuante (fundo translúcido + blur),
   em vez do fundo sólido + hairline de 1px do .kpi-strip original — mesmo
   vocabulário "vidro Apple" já usado em .pf-modal-card/.pie-click-hint.
   Tom azul (--steel) igual ao card colorido de #panel-telha-eps #epsBox
   .detail-item, só trocando o tom verde (--good) por azul. */
.gpd-plano-kpis .kpi{
  background: linear-gradient(180deg, rgba(79,154,192,0.16), rgba(79,154,192,0.05) 58%, rgba(255,255,255,0.02));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border:1px solid rgba(79,154,192,0.35);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(79,154,192,0.18), 0 10px 24px -14px rgba(0,0,0,0.55);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gpd-plano-kpis .kpi:hover{
  border-color: rgba(79,154,192,0.55);
  transform: translateY(-1px);
}
.gpd-plano-kpis .kpi .val,
.gpd-plano-kpis .kpi .val.good,
.gpd-plano-kpis .kpi .val.bad{
  color: var(--steel);
}
/* "% Acumulado" avisa quando fica abaixo da meta do trimestre — só o
   número vira vermelho; batendo a meta continua no azul padrão da
   faixa (não vira verde, pra não destoar do resto dos cartões). */
.gpd-plano-kpis .kpi.gpd-plano-kpi-pct .val.bad{ color: var(--bad); }

/* Card de Frete na página do vendedor (ver gpdFreteVendorCard em gpd.html)
   — mesmo vidro azul de .gpd-plano-kpis .kpi, só 7 tiles em vez de 5 (então
   grid-template-columns próprio) — pedido do usuário 2026-08-28. */
.gpd-frete-vendor-tiles{ grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
/* 8ª tile ("Custo Operacional") entrou em 2026-08-28 e apertou a fileira:
   o clamp(20px, 1.45vw, 26px) + padding 20px 22px do .kpi genérico não cabe
   mais valores como "R$ 10.707,00"/"R$ 3.248,40" (JetBrains Mono, nowrap) em
   cada uma das 8 colunas — cortava o final do número mesmo tendo espaço
   sobrando na tela. Fonte/padding menores só aqui, sem mexer no
   .kpi-strip/.gpd-plano-kpis genérico das outras abas. */
.gpd-frete-vendor-tiles .kpi{ padding:16px 14px; }
.gpd-frete-vendor-tiles .kpi .val{ font-size:clamp(14px, 1.1vw, 18px); }
.gpd-frete-vendor-tiles .kpi .label{ font-size:11px; }
/* Subtítulo do card ("Pagamento de frete deste mês...") ficava apagado
   demais com o --text-faint padrão do .card-sub global — pedido do usuário
   2026-08-28, mesmo ajuste já feito em outros cards específicos (ver
   #panel-insumos/#panel-vendedores .card-sub em styles.css). */
#gpdFreteVendorCard .card-sub{ color: var(--text-dim); }

.gpd-plano-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
  position:relative;
}
.gpd-plano-toolbar label{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-dim);
  font-weight:600;
}
.gpd-plano-toolbar select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B93A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center,
    var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 32px 8px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.25);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gpd-plano-toolbar select:hover{ border-color: rgba(242,183,5,0.4); }
.gpd-plano-toolbar select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
/* #gpdVendorSelect (Vendedor/Região) tem ~26 opções — em janela/tela mais
   baixa o popup nativo do navegador não cabe tudo sem rolar, e não dá pra
   controlar a ALTURA do popup nativo via CSS. O ajuste de font-size/padding
   do <option> abaixo foi a 1ª tentativa (pedido do usuário 2026-08-28:
   "Resumo", último da lista, ficava sempre cortado exigindo rolar) mas não
   teve efeito nenhum no Chromium usado aqui (confirmado por print) — o
   <option> de um <select> nativo simplesmente ignora esse CSS nesse
   ambiente. Mantido por não atrapalhar em nada, mas quem resolve de fato o
   problema agora é o dropdown customizado logo abaixo (#gpdVendorSelect,
   .gpd-select-custom*) que substitui a CAMADA VISUAL de escolha por cima
   deste <select>, que segue vivo/escondido como fonte de verdade. */
#gpdVendorSelect option{
  font-size:12px;
  padding:2px 6px;
}
/* <select> real: escondido visualmente (NÃO display:none — precisa
   continuar presente/focável/lido via .value pelos dezenas de pontos de
   js/gpd-plano.js que fazem document.getElementById('gpdVendorSelect')).
   position:absolute com top/left:0 dentro de .gpd-plano-toolbar (que ganhou
   position:relative acima só por causa disso) pra não sobrar espaço vazio
   nem empurrar o layout do dropdown customizado ao lado. */
#gpdVendorSelect{
  position:absolute;
  top:0; left:0;
  opacity:0;
  pointer-events:none;
}
/* Dropdown customizado do Vendedor/Região (ver gpdPlanoSetupVendorCustomDropdown
   em js/gpd-plano.js) — botão com a MESMA cara do select nativo antigo
   (.gpd-plano-toolbar select acima) + painel de opções compacto, posicionado
   com position:fixed (calculado via JS a partir do retângulo do botão) pra
   nunca ser cortado pelo overflow:hidden de .card (ver css/styles.css) nem
   sair da tela — abre pra cima sozinho se não houver espaço suficiente
   embaixo (ver positionPanel no JS). */
.gpd-select-custom{
  position:relative;
}
.gpd-select-custom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:210px;
  max-width:260px;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B93A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center,
    var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 32px 8px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.25);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gpd-select-custom-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gpd-select-custom-btn:hover{ border-color: rgba(242,183,5,0.4); }
.gpd-select-custom-btn.is-open,
.gpd-select-custom-btn:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
.gpd-select-custom-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}
.gpd-select-custom-panel{
  position:fixed;
  z-index:60;
  overflow-y:auto;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 16px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  padding:6px;
}
.gpd-select-custom-option{
  padding:4px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  line-height:1.15;
  color:var(--text);
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
}
.gpd-select-custom-option:hover{
  background: rgba(59,130,246,0.32);
}
/* Item escolhido em verde (18/09/2026, "use verde" — antes dourado). */
.gpd-select-custom-option.is-selected{
  color:var(--good);
  font-weight:600;
  background: rgba(79,174,124,0.16);
}
.gpd-plano-status{
  padding:32px 12px;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
  letter-spacing:0.01em;
}
/* Botão "Tentar de novo" do aviso de falha ao carregar (16/10/2026). */
.gpd-plano-status-retry{ margin-top:10px; }
/* Faixa do mesmo aviso no alto da tela (visível no celular do vendedor,
   onde o card do Plano de Ação fica escondido). Vermelho translúcido +
   texto do tema: lê nos dois temas. */
.gpd-falha-carga{
  margin:14px 0;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(229,72,77,0.5);
  background:rgba(229,72,77,0.14);
  color:var(--text);
  font-size:14px;
  line-height:1.45;
  text-align:center;
}

.gpd-plano-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:26px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.gpd-plano-title-band{
  flex:1;
  display:flex;
  align-items:center;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}
/* Pílula "Mês" escolhível (01/10/2026): o <select> fica invisível por cima
   da pílula inteira, e a setinha avisa que dá pra clicar. */
.gpd-plano-mes-escolha{ position:relative; cursor:pointer; }
.gpd-plano-mes-escolha i{ width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:0.8; margin-left:2px; }
.gpd-plano-mes-escolha select{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  border:0; font-size:16px; /* 16px: o iPhone não dá zoom ao abrir */
}
.gpd-plano-mes-escolha:focus-within{ outline:2px solid var(--accent); outline-offset:3px; }
.gpd-plano-mes-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(242,183,5,0.32);
  background:linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.04));
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-radius:999px;
  padding:8px 18px;
  white-space:nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.18);
}
.gpd-plano-mes-pill span{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--accent);
  font-weight:600;
}
.gpd-plano-mes-pill strong{
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--text);
}

.gpd-plano-meta-row{
  display:flex;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}
.gpd-plano-meta-box{
  flex:1;
  min-width:240px;
  background:
    linear-gradient(160deg, rgba(79,154,192,0.24), rgba(79,154,192,0.06) 65%),
    rgba(26,31,38,0.5);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(79,154,192,0.38);
  border-radius:14px;
  padding:16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px -12px rgba(0,0,0,0.5);
  transition: border-color 0.2s ease;
}
.gpd-plano-meta-box:hover{ border-color: rgba(79,154,192,0.6); }
.gpd-plano-meta-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--steel);
  font-weight:700;
  margin-bottom:8px;
}
.gpd-plano-meta-value{
  font-size:17px;
  line-height:1.5;
  color:#FFFFFF;
  font-weight:700;
}

.gpd-plano-chart-wrap{
  height:300px;
  margin-bottom:30px;
  padding:18px 18px 6px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 60%),
    rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
}

/* Envelope de vidro em volta da tabela, igual aos outros blocos do card
   (KPIs, meta-box, gráfico) — antes a tabela ficava "nua" direto no fundo
   do card. */
.gpd-plano-table-wrap{
  /* position:relative — vira o containing block do
     .gpd-plano-sticky-overlay (position:absolute), o reforço anti-vazamento
     descrito no comentário acima de .gpd-plano-sticky-overlay mais abaixo.
     Não interfere no position:sticky das células (thead th:first-child /
     td.name): sticky calcula sua área de contenção pelo ancestral com
     overflow (este próprio wrap), independente do valor de position dele. */
  position:relative;
  overflow-x:auto;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) 60%), rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
  padding:6px;
  /* --gpd-plano-name-col-w: largura travada da coluna presa (rótulos) —
     usada aqui E no width do td.name/th:first-child logo abaixo, pra manter
     as duas em sincronia via uma única fonte de verdade. Precisa ser >= a
     largura natural do maior rótulo ("Positivação Carteira" etc, hoje
     ~194.9px de conteúdo); veja o comentário em scroll-snap-align abaixo
     pra entender por que ela precisa ser exata. */
  --gpd-plano-name-col-w: 196px;
  /* Largura mínima de cada coluna de mês — mesma lógica de fonte única de
     verdade do rótulo acima. Precisa caber o maior valor monetário real sem
     quebrar linha nem vazar pra célula vizinha: nas linhas de destaque
     (Resultado Mensal/Acumulado, headline-desafio) a fonte é JetBrains Mono
     15.5px/700 (o 800 pedido no CSS cai pra 700, a variante mais pesada que
     a família tem) — medido, "R$ 19.598.667,31" (maior valor real visto até
     hoje, aba TOTAL GERAL) ocupa ~151px de conteúdo; 190px dá margem até
     ~R$ 99.999.999,99 (8 dígitos inteiros — a "Meta/Resultado Acumulado"
     reseta por trimestre, então não deve chegar nem perto disso). */
  --gpd-plano-month-col-w: 190px;
  /* scroll-snap trava a rolagem horizontal pra sempre parar exatamente na
     borda de um mês — sem isso, qualquer posição intermediária de scroll
     deixa a coluna Jan/Fev/etc parcialmente encoberta pela coluna presa
     (mesmo fundo 100% opaco), cortando o "R$" ou o primeiro dígito no meio
     do glifo (bug visual real, não é vazamento de transparência: number
     fields são right-aligned, e cada linha tem um total de dígitos
     diferente, então o corte cai em pontos diferentes por linha — dá a
     falsa impressão de "vazamento" quando na verdade é sempre o mesmo
     texto sendo cortado no mesmo x). scroll-padding-left usa a MESMA
     variável da largura da coluna presa: sem isso o browser calcula os
     pontos de parada a partir da posição bruta (sem descontar a área
     coberta pela coluna sticky) e trava exatamente no meio do problema
     que queremos evitar. Soma +6px (o padding:6px desta mesma regra,
     acima) porque scroll-padding conta a partir da borda do próprio wrap,
     e esse padding entra no meio do caminho antes do conteúdo da tabela
     começar — sem somar, todo ponto de parada fica ~6px adiantado (medido:
     ficava parando em 5px/156px/307px em vez de 0/151/302px). */
  scroll-snap-type: x mandatory;
  scroll-padding-left: calc(var(--gpd-plano-name-col-w) + 6px);
}

.gpd-plano-table{
  /* width = coluna presa + 12 colunas de mês na largura mínima garantida
     acima — sem isso o navegador encolhe as colunas de mês bem abaixo do
     que os valores em destaque precisam (medido: só ~148px numa tela de
     1024px), forçando números como "R$ 11.706.098,63" a vazar por cima da
     célula vizinha (nowrap já vem de td.num em styles.css).
     table-layout:AUTO, não fixed, de propósito: com table-layout:fixed e as
     13 larguras de coluna explícitas abaixo somando exatamente esta mesma
     largura, o Chromium (confirmado isolando cada variável — não é
     var()/calc(), não é position:sticky, sobrevive até com width em px cru
     e !important) redistribuía sozinho ~50px das 12 colunas de mês pra
     dentro da coluna do rótulo (196px virava ~246px, 190px virava ~185.8px
     em cada mês) MESMO com a largura total batendo certinho — provavelmente
     uma particularidade do algoritmo de fixed-layout do Chromium pra esta
     combinação (sticky column + muitas colunas com largura explícita). Como
     a coluna do rótulo (--gpd-plano-name-col-w) é reaproveitada por
     scroll-padding-left e pela largura do .gpd-plano-sticky-overlay logo
     abaixo, esse desvio de ~50px descasava os três, abrindo uma faixa onde
     o overlay/scroll-snap não cobriam mais a largura real da coluna presa —
     e ERA EXATAMENTE ISSO que cortava o "R$" de alguns valores (o bug
     original que motivou esta mudança). table-layout:auto, com os mesmos
     hints de largura abaixo e conteúdo sempre nowrap mais estreito que eles,
     rende os 196px/190px exatos (confirmado) sem essa redistribuição. */
  width: calc(var(--gpd-plano-name-col-w) + (var(--gpd-plano-month-col-w) * 12));
  /* Linhas soltas, mesmo principio ja aplicado em Clientes & Vendas
     (10/09/2026): 4px SO no eixo Y separam uma metrica da outra. No eixo X
     fica 0 — vao horizontal deixaria ver o valor passando por tras da coluna
     presa no scroll, e partiria a faixa dourada do trimestre em pedacos.
     ATENCAO: o overlay da coluna presa mede a posicao de cada linha real (ver
     gpdPlanoSyncStickyOverlay); se este valor mudar, ele acompanha sozinho —
     mas so porque ele mede em vez de empilhar. Nao voltar a empilhar. */
  border-spacing:0 4px;
  table-layout:auto;
}
.gpd-plano-table thead th{
  text-align:right;
  letter-spacing:0.07em;
  padding:12px 14px;
  color:var(--text);
  font-weight:700;
  font-size:12.5px;
  background: rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.1);
}
/* Cabecalho fecha os 4 cantos: com o espaco entre linhas ele deixou de
   encostar no corpo da tabela e virou uma barra propria. */
.gpd-plano-table thead th:first-child{ text-align:left; border-radius:10px 0 0 10px; }
/* Mesmo em table-layout:auto, a largura da célula do cabeçalho (1ª linha)
   funciona como HINT de largura pra coluna inteira — como o conteúdo de
   todas as linhas é nowrap e mais estreito que este valor (ver comentário
   de --gpd-plano-month-col-w acima), a coluna renderiza exatamente nesta
   largura em vez de crescer por conteúdo, sem precisar repetir em cada td. */
.gpd-plano-table thead th:not(:first-child){ width: var(--gpd-plano-month-col-w); }
.gpd-plano-table thead th:last-child{ border-radius:0 10px 10px 0; }
/* Alvo do scroll-snap (ver .gpd-plano-table-wrap acima) — um th por mês já
   basta pra definir o ponto de parada da coluna inteira (todas as linhas
   compartilham a mesma largura de coluna numa table auto-layout), não
   precisa repetir em cada td do corpo. */
.gpd-plano-table thead th:not(:first-child){ scroll-snap-align:start; }
.gpd-plano-table tbody td{ padding:11px 14px; transition: filter 0.15s ease; }
/* Pontas arredondadas so nas extremidades da linha — o miolo continua colado,
   entao a faixa de cor da metrica atravessa a linha inteira sem emenda. */
.gpd-plano-table tbody td:first-child{ border-radius:12px 0 0 12px; }
.gpd-plano-table tbody td:last-child{ border-radius:0 12px 12px 0; }
/* :not(.name) — a coluna presa (sticky) fica de fora do brilho de hover.
   `filter` cria o próprio contexto de empilhamento; aplicado numa célula que
   já é sticky+isolate+transform (ver comentário abaixo), a troca de filter
   a cada hover/saída do mouse fazia o Chromium reavaliar a camada de
   composição da coluna presa a cada passada de mouse, um dos gatilhos do
   bug de "aparece atrás" ao rolar. As outras células da linha continuam
   destacando normalmente. */
.gpd-plano-table tbody tr:hover td:not(.name){ filter: brightness(1.16); }
/* Coluna dos rótulos (Meta de Produtos, Resultado Mensal etc.) fica fixa ao
   rolar a tabela pro lado — senão, com 12 meses de largura, some da tela e
   fica impossível saber qual linha é qual. */
.gpd-plano-table thead th:first-child,
.gpd-plano-table td.name{
  position:sticky;
  left:0;
  z-index:2;
  /* Largura travada na mesma variável usada no scroll-padding-left do wrap
     (ver comentário lá) — trava a coluna presa num valor fixo e conhecido
     em vez de deixá-la variar por conteúdo, senão o scroll-snap por mês
     abaixo não teria como saber quanto descontar. Como todas as linhas já
     cabem hoje dentro desse valor (maior rótulo natural ~194.9px), a coluna
     não muda de aparência — só deixa de crescer/encolher por conta própria. */
  width: var(--gpd-plano-name-col-w);
  /* isolation:isolate força um contexto de empilhamento próprio pra essa
     célula — sem isso, o navegador às vezes pinta a coluna presa como se
     estivesse ATRÁS das células que passam rolando por baixo dela (mesmo
     com z-index maior e fundo opaco), deixando o texto dos meses vazando
     por trás do rótulo. */
  isolation:isolate;
  /* transform:translateZ(0) + will-change:transform — promove a coluna
     presa pra sua própria camada de composição (GPU), em vez de depender
     só do isolation:isolate (que cria contexto de empilhamento mas não
     necessariamente uma camada composta própria). Sem isso, ao rolar pra
     ESQUERDA (voltando de uma posição já rolada), o reposicionamento da
     célula sticky é recalculado na main thread e pode ficar 1-2 frames
     atrás do scroll já aplicado pelo compositor nas células de baixo —
     nessa janela ela pinta como se estivesse atrás do conteúdo que "volta"
     por baixo dela. Ficar na camada composta evita essa defasagem. */
  transform: translateZ(0);
  will-change: transform;
  /* contain:paint trava o pintado da célula estritamente dentro da própria
     caixa — sem isso, mesmo com isolation+translateZ, sobrou um recorte à
     direita da célula (mais visível quanto mais escuro o fundo do rótulo
     fica) onde o fundo de trás vazava por cima da célula presa. */
  contain: paint;
}
/* Fundo 100% opaco (alpha:1) — com qualquer transparência aqui, o texto da
   coluna de mês que passa rolando por baixo "vaza" através da coluna presa
   (visível sobretudo com números em negrito/branco, que ficam legíveis
   mesmo a poucos % de opacidade). Já foi reportado como bug visual. */
.gpd-plano-table thead th:first-child{ z-index:3; background: rgb(20,24,30); }
.gpd-plano-table td.name{
  font-weight:600;
  white-space:nowrap;
  color:var(--text-dim);
  box-shadow: 2px 0 6px -2px rgba(0,0,0,0.4);
}
.gpd-plano-table td.num{
  font-weight:700;
  color:var(--text);
}
.gpd-plano-blank{ color:var(--text-faint); }

/* Faixas de cor por linha, seguindo exatamente o padrão do Excel original:
   "Meta ..." = pêssego, "Resultado ..." simples = neutro/branco (alternando
   pêssego/branco/pêssego/branco), Meta Desafio = verde, Resultado Mensal
   (linha de destaque) = azul — só que suavizadas pro tema escuro. */
.gpd-plano-row-meta-produto td:first-child{ box-shadow: inset 3px 0 0 rgba(242,183,5,0.9); }
.gpd-plano-row-meta-produto td{ background: rgba(242,183,5,0.22); }
/* Coluna do nome sempre 100% opaca (ver nota em thead th:first-child acima)
   — evita o número da coluna que rolou por baixo "vazar" através dela. */
.gpd-plano-row-meta-produto td.name{ background: rgb(42,35,9); }
.gpd-plano-row-resultado-neutro td:first-child{ box-shadow: inset 3px 0 0 rgba(255,255,255,0.14); }
.gpd-plano-row-resultado-neutro td{ background: rgba(255,255,255,0.02); }
.gpd-plano-row-resultado-neutro td.name{ background: rgb(22,26,32); }
.gpd-plano-row-headline-desafio td:first-child{ box-shadow: inset 3px 0 0 rgba(79,174,124,0.7); }
.gpd-plano-row-headline-desafio td{ background: rgba(79,174,124,0.16); }
.gpd-plano-row-headline-desafio td.name{ background: rgb(20,42,32); }
.gpd-plano-row-headline-resultado td:first-child{ box-shadow: inset 3px 0 0 rgba(79,154,192,0.75); }
.gpd-plano-row-headline-resultado td{
  background: linear-gradient(180deg, rgba(21,45,64,0.95), rgba(15,33,48,0.95));
  font-weight:800;
  font-size:15.5px;
  color:#FFFFFF;
  letter-spacing:0.01em;
}
.gpd-plano-row-headline-resultado td.name{ color:#FFFFFF; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); }
.gpd-plano-row-resultado-acumulado td:first-child{ box-shadow: inset 3px 0 0 rgba(79,154,192,0.75); }
.gpd-plano-row-resultado-acumulado td{
  background: linear-gradient(180deg, rgba(21,45,64,0.95), rgba(15,33,48,0.95));
  font-weight:800;
  font-size:15.5px;
  color:#FFFFFF;
  letter-spacing:0.01em;
}
.gpd-plano-row-resultado-acumulado td.name{ color:#FFFFFF; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); }
.gpd-plano-row-pct td:first-child{ box-shadow: inset 3px 0 0 rgba(79,154,192,0.75); }
.gpd-plano-row-pct td{
  background: linear-gradient(180deg, rgba(21,45,64,0.95), rgba(15,33,48,0.95));
  font-weight:800;
  font-size:15.5px;
  color:#FFFFFF;
  letter-spacing:0.01em;
}
.gpd-plano-row-pct td.name{ color:#FFFFFF; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); }
.gpd-plano-row-vendas-ant td:first-child{ box-shadow: inset 3px 0 0 rgba(255,255,255,0.14); }
.gpd-plano-row-vendas-ant td{ background: rgba(255,255,255,0.02); }
.gpd-plano-row-vendas-ant td.name{ background: rgb(22,26,32); }
.gpd-plano-row-variacao td:first-child{ box-shadow: inset 3px 0 0 rgba(79,154,192,0.4); }
.gpd-plano-row-variacao td{ background: rgba(79,154,192,0.05); }
.gpd-plano-row-variacao td.name{ background: rgb(16,32,42); }
.gpd-plano-row-tonelagem td:first-child{ box-shadow: inset 3px 0 0 rgba(255,255,255,0.14); }
.gpd-plano-row-tonelagem td{ background: rgba(255,255,255,0.02); }
.gpd-plano-row-tonelagem td.name{ background: rgb(22,26,32); }
.gpd-plano-row-positivacao td:first-child{ box-shadow: inset 3px 0 0 rgba(242,183,5,0.7); }
.gpd-plano-row-positivacao td{ background: var(--accent-soft); }
.gpd-plano-row-positivacao td.name{ background: rgb(42,35,9); }
/* Mesmo badge arredondado (.pill) usado nas variações %, só num tom dourado
   próprio — não é "bom/ruim" como as outras, é só o valor em destaque.
   Tamanho aumentado (o padrão de 11px/2px-8px do painel principal fica
   pequeno demais perto dos números em negrito desta tabela). */
.gpd-plano-table .pill.accent{ background: rgba(242,183,5,0.16); color: var(--accent); }
.gpd-plano-table .pill{
  font-size:15px;
  padding:5px 14px;
  border-radius:20px;
  font-weight:700;
}
.gpd-plano-row-default td:first-child{ box-shadow: inset 3px 0 0 rgba(255,255,255,0.08); }
.gpd-plano-row-default td{ background: transparent; }
.gpd-plano-row-default td.name{ background: rgb(22,26,32); }

/* "Prejuízo Incobráveis" (aba Inadimplência, pedido do usuário 2026-08-28)
   — no Excel real a célula em si é branca, só a FONTE é vermelha (não um
   pill/fundo vermelho como variação/atingimento no resto do painel), por
   isso é um grupo à parte em vez de reaproveitar .pill.bad. */
.gpd-plano-row-prejuizo td:first-child{ box-shadow: inset 3px 0 0 rgba(225,89,90,0.5); }
.gpd-plano-row-prejuizo td{ background: transparent; color: var(--bad); }
.gpd-plano-row-prejuizo td.name{ background: rgb(22,26,32); color: var(--bad); }
/* .gpd-plano-medida-input tem "color:var(--text)" fixo (ver bloco de edição
   mais abaixo), que sobrescreveria o vermelho herdado assim que esta linha
   virou editável (pedido do usuário 2026-08-28: "deixe os campos
   editáveis") — reforça o vermelho especificamente aqui. */
.gpd-plano-row-prejuizo .gpd-plano-medida-input{ color: var(--bad); }

/* "Prejuízo Incobráveis %" — linha própria, diferente da acima: pedido do
   usuário 2026-08-28 foi "deixe toda a linha em vermelho vidro 3D" (não só a
   fonte). Mesma receita "vidro 3D" já usada na tabela de Inconformidade
   (gradiente + sombra em camadas, SEM backdrop-filter — ver comentário
   grande em .gpd-inconformidade-table pras lições já aprendidas nesta
   tela). td.name 100% opaca (sem alpha na cor sólida de base), mesma razão
   de sempre: evita o número da coluna que rola por baixo vazar através da
   coluna presa. */
.gpd-plano-row-prejuizo-pct td:first-child{ box-shadow: inset 3px 0 0 rgba(225,89,90,0.8); }
.gpd-plano-row-prejuizo-pct td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.34), rgba(225,89,90,0.14) 60%),
    rgba(64,26,26,0.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.32),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  color:#FFFFFF;
  font-weight:700;
}
.gpd-plano-row-prejuizo-pct td.name{
  color:#FFFFFF;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.34), rgba(225,89,90,0.14) 60%),
    rgb(58,20,20);
}

/* ---------- Overlay de reforço da coluna presa (anti-vazamento em celular) ----------
   Bug real reportado em viewport de celular (390/414px, retrato): mesmo com
   TODA a receita em thead th:first-child/td.name acima (sticky + z-index +
   isolation + transform:translateZ(0) + will-change + contain:paint + fundo
   100% opaco), ao rolar a tabela pro lado o Chromium ainda pinta um fiapo
   (poucos px) do texto da coluna de mês que passou por baixo POR CIMA da
   coluna presa. Investigação isolada (headless Chrome com device metrics
   mobile, dpr 3, em várias larguras) provou, testando uma propriedade por
   vez, que NENHUMA combinação de contain/isolation/transform/will-change/
   z-index/backdrop-filter na própria célula muda o resultado — inclusive
   hit-test (elementFromPoint) confirma que a área pertence ao td.name, mas
   o PIXEL pintado ali é do td.num vizinho mesmo assim. É um bug de ORDEM DE
   PINTURA específico de <td class="name"> position:sticky sobreposta a
   outras <td> da mesma tabela ao rolar — não algo que CSS na própria
   célula consiga corrigir (confirmado: um <div> comum, fora da tabela,
   absolutamente posicionado por cima, cobre o vazamento por completo,
   mesmo quando a célula sticky sozinha não cobre).
   Por isso este overlay: um <div> comum (não é <td>, não sofre do bug de
   pintura de tabela), construído/sincronizado via JS em
   gpdPlanoSyncStickyOverlay (js/gpd-plano.js), espelhando cada linha real
   (label + cor de fundo) por cima da tabela. Ele NÃO substitui o
   sticky/isolation/contain acima — continuam lá como 1ª linha de defesa
   (fallback caso o JS deste overlay falhe por algum motivo); este overlay é
   só reforço, redundante de propósito. */
.gpd-plano-sticky-overlay{
  position:absolute;
  top:0;
  /* left:0 (não 6px, o padding do wrap) + largura maior que a coluna real
     de propósito: o teste isolado mostrou que replicar exatamente a caixa
     do td.name (mesma largura/mesmo left) ainda deixa passar o fiapo de
     1-2px em algum sub-pixel de arredondamento entre o containing block do
     <div> absoluto e o do <td> sticky. "Estourando" a área alguns px pra
     cada lado (inclusive um pouco por cima do próprio padding do wrap, área
     que já é só fundo mesmo) garante cobertura total independente desse
     arredondamento. */
  left:0;
  width: calc(var(--gpd-plano-name-col-w) + 14px);
  pointer-events:none;
  z-index:20;
}
.gpd-plano-sticky-overlay-row{
  box-sizing:border-box;
  /* Ancorada, nao empilhada (10/09/2026): desde que a tabela ganhou espaco
     entre as linhas, empilhar acumulava 4px de erro por linha — na 16a o
     rotulo ja estava 60px fora do lugar. O topo e a altura de cada uma vem
     medida da linha real, em gpdPlanoSyncStickyOverlay. */
  position:absolute;
  left:0;
  width:100%;
  display:flex;
  align-items:center;
  padding:11px 14px;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  color:var(--text-dim);
  box-shadow: 2px 0 6px -2px rgba(0,0,0,0.4);
}
.gpd-plano-sticky-overlay-row.gpd-plano-sticky-overlay-head{
  font-family:'Oswald', sans-serif;
  text-align:left;
  letter-spacing:0.07em;
  font-weight:700;
  font-size:12.5px;
  color:var(--text);
  background: rgb(20,24,30);
  border-radius:10px 0 0 10px;
}
/* Mesmas cores 100% opacas por linha que .gpd-plano-table td.name já usa
   (ver bloco "Faixas de cor por linha" acima) — duplicadas de propósito:
   este overlay não é célula da tabela, não tem como herdar via um único
   seletor compartilhado. Se as cores de lá mudarem, atualizar aqui também. */
.gpd-plano-sticky-overlay-row.gpd-plano-row-meta-produto{ background: rgb(42,35,9); box-shadow: inset 3px 0 0 rgba(242,183,5,0.9), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-resultado-neutro{ background: rgb(22,26,32); box-shadow: inset 3px 0 0 rgba(255,255,255,0.14), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-desafio{ background: rgb(20,42,32); box-shadow: inset 3px 0 0 rgba(79,174,124,0.7), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado{ color:#FFFFFF; font-weight:800; font-size:15.5px; letter-spacing:0.01em; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); box-shadow: inset 3px 0 0 rgba(79,154,192,0.75), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-resultado-acumulado{ color:#FFFFFF; font-weight:800; font-size:15.5px; letter-spacing:0.01em; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); box-shadow: inset 3px 0 0 rgba(79,154,192,0.75), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-pct{ color:#FFFFFF; font-weight:800; font-size:15.5px; letter-spacing:0.01em; background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48)); box-shadow: inset 3px 0 0 rgba(79,154,192,0.75), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-vendas-ant{ background: rgb(22,26,32); box-shadow: inset 3px 0 0 rgba(255,255,255,0.14), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-variacao{ background: rgb(16,32,42); box-shadow: inset 3px 0 0 rgba(79,154,192,0.4), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-tonelagem{ background: rgb(22,26,32); box-shadow: inset 3px 0 0 rgba(255,255,255,0.14), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-positivacao{ background: rgb(42,35,9); box-shadow: inset 3px 0 0 rgba(242,183,5,0.7), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-default{ background: rgb(22,26,32); box-shadow: inset 3px 0 0 rgba(255,255,255,0.08), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-prejuizo{ background: rgb(22,26,32); color: var(--bad); box-shadow: inset 3px 0 0 rgba(225,89,90,0.5), 2px 0 6px -2px rgba(0,0,0,0.4); }
.gpd-plano-sticky-overlay-row.gpd-plano-row-prejuizo-pct{
  color:#FFFFFF;
  font-weight:700;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.05) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.34), rgba(225,89,90,0.14) 60%),
    rgb(58,20,20);
  box-shadow: inset 3px 0 0 rgba(225,89,90,0.8), 2px 0 6px -2px rgba(0,0,0,0.4);
}

/* Trimestre vigente (Jan/Abr/Jul/Out reset, mesma janela usada no Resultado
   Acumulado) em destaque principal — cabeçalho dourado sólido pra achar as
   3 colunas de bate-olho, e uma lavagem dourada leve (box-shadow inset em
   vez de background) por cima de QUALQUER cor de linha já existente, sem
   brigar de especificidade com as faixas .gpd-plano-row-*. Bordas grossas
   nas pontas "abraçam" o grupo de 3 colunas. */
.gpd-plano-table thead th.gpd-plano-col-current-q{
  background: rgba(242,183,5,0.32);
  color:#fff;
  box-shadow: inset 0 -3px 0 rgba(242,183,5,0.95), inset 0 1px 0 rgba(255,255,255,0.1);
}
.gpd-plano-table tbody td.gpd-plano-col-current-q{
  box-shadow: inset 0 0 0 999px rgba(242,183,5,0.1);
}
.gpd-plano-table tbody tr:hover td.gpd-plano-col-current-q{
  box-shadow: inset 0 0 0 999px rgba(242,183,5,0.18);
}
.gpd-plano-table th.gpd-plano-col-current-q-start,
.gpd-plano-table td.gpd-plano-col-current-q-start{ border-left:2px solid rgba(242,183,5,0.65); }
.gpd-plano-table th.gpd-plano-col-current-q-end,
.gpd-plano-table td.gpd-plano-col-current-q-end{ border-right:2px solid rgba(242,183,5,0.65); }

/* Coluna "Média" (Inadimplência/Produção/TOTAL — as abas que têm essa coluna
   na planilha). Mostra a média do TRIMESTRE VIGENTE, não do ano (ver
   gpdPlanoMediaTrimestre em js/gpd-plano.js), então herda o dourado do
   trimestre — mais claro que o das 3 colunas de mês, pra ler como "resumo
   daquele bloco" e não como um 4º mês dele. Borda grossa à esquerda separa
   dos meses de fora do trimestre (Out/Nov/Dez ficam entre um e outro).
   Override de largura só nesta variante: a regra base de .gpd-plano-table
   calcula a largura em cima de 12 colunas de mês e tem um comentário longo
   sobre por que ela é auto-layout e não fixed — não mexer nela, só somar a
   13ª coluna aqui. */
.gpd-plano-table.gpd-plano-table-has-media{
  width: calc(var(--gpd-plano-name-col-w) + (var(--gpd-plano-month-col-w) * 13));
}
.gpd-plano-table thead th.gpd-plano-col-media{
  background: rgba(242,183,5,0.2);
  color:#fff;
  border-left:2px solid rgba(242,183,5,0.5);
  box-shadow: inset 0 -3px 0 rgba(242,183,5,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
}
/* Rótulo do trimestre embaixo de "Média" — mesma dobra de duas linhas do
   cabeçalho da tabela de Frete, sem alterar a altura do <thead> (o
   line-height apertado cabe no padding que já existe). */
.gpd-plano-table thead th.gpd-plano-col-media .gpd-plano-col-media-sub{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:0.12em;
  opacity:0.7;
  margin-top:2px;
}
/* Seletor de trimestre da média (01/10/2026). Herda a cor do cabeçalho, que
   muda conforme o tema, e só ganha um aro; trimestre diferente do vigente
   fica preenchido em dourado, pra ninguém ler a média de um trimestre
   passado como se fosse a do atual. */
.gpd-plano-table thead th.gpd-plano-col-media .gpd-plano-col-media-sub:has(.gpd-plano-media-tri-select){ opacity:1; }
.gpd-plano-media-tri-select{
  font:inherit;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:inherit;
  background:transparent;
  border:1px solid rgba(242,183,5,0.55);
  border-radius:999px;
  padding:1px 6px;
  cursor:pointer;
  text-align:center;
}
.gpd-plano-media-tri-select:focus-visible{ outline:2px solid rgba(242,183,5,0.9); outline-offset:1px; }
.gpd-plano-media-tri-select.gpd-plano-media-tri-outro{
  background:#F2B705;
  border-color:#F2B705;
  color:#1A1408;
}
.gpd-plano-media-tri-select option{ color:#1A1408; background:#fff; text-transform:none; }
/* Mesmo seletor acima da tabela, nas abas sem coluna "Média" (02/10/2026,
   gpdPlanoTriBarra em js/gpd-plano.js): canto direito, logo acima de Dez.
   Maior que o do cabeçalho porque fica sozinho e precisa ser achado de cara. */
.gpd-plano-tri-barra{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:4px 2px 8px;
}
.gpd-plano-tri-barra[hidden]{ display:none; }
.gpd-plano-tri-barra-rotulo{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.7;
}
.gpd-plano-tri-barra .gpd-plano-media-tri-select{
  font-size:12px;
  padding:4px 12px;
}
.gpd-plano-table tbody td.gpd-plano-col-media{
  border-left:2px solid rgba(242,183,5,0.5);
  box-shadow: inset 0 0 0 999px rgba(242,183,5,0.07);
  font-weight:700;
}
.gpd-plano-table tbody tr:hover td.gpd-plano-col-media{
  box-shadow: inset 0 0 0 999px rgba(242,183,5,0.14);
}
/* Célula da Média que na verdade mostra o fechamento do ANO, não a média do
   trimestre (Meta/Resultado Acumulado, % Acumulado, as duas comparativas e
   Positivação — ver gpdPlanoValorDoAno). O cabeçalho da coluna diz "3º Tri",
   então sem uma marca a pessoa leria -8,4% como número do trimestre. A
   etiqueta "ano" resolve na hora; o title diz o período exato. */
.gpd-plano-table tbody td.gpd-plano-col-media-ano{
  box-shadow: inset 0 0 0 999px rgba(79,154,192,0.10);
}
.gpd-plano-table tbody tr:hover td.gpd-plano-col-media-ano{
  box-shadow: inset 0 0 0 999px rgba(79,154,192,0.18);
}
.gpd-plano-media-ano-tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  background: rgba(79,154,192,0.22);
  border:1px solid rgba(79,154,192,0.4);
  color: var(--steel);
  font-family:'Inter', sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  vertical-align:middle;
}

/* Positivação Carteira agora é editável — o valor vira um <input>, mas o
   pill inteiro (input + "%") continua com a mesma cara uniforme e
   arredondada do badge dourado (.pill.accent) de antes, igual às outras
   pills da tabela (ex.: as de variação % ao lado). Wrapper <span> em vez
   do <td> direto: display:table-cell no <td> tem que ficar intacto pro
   layout de tabela não quebrar, então o pill (inline-flex) fica um nível
   abaixo. */
.gpd-plano-positivacao-cell{ text-align:center; white-space:nowrap; }
.gpd-plano-positivacao-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  background: rgba(242,183,5,0.16);
  border:1px solid rgba(242,183,5,0.35);
  border-radius:20px;
  padding:5px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gpd-plano-positivacao-pill:hover{ border-color: rgba(242,183,5,0.55); }
.gpd-plano-positivacao-pill:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.18);
  background: rgba(242,183,5,0.22);
}
.gpd-plano-positivacao-pill:has(.gpd-plano-medida-saved){
  border-color: rgba(79,174,124,0.7);
  box-shadow:0 0 0 3px rgba(79,174,124,0.18);
  background: rgba(79,174,124,0.14);
}
.gpd-plano-positivacao-pill:has(.gpd-plano-medida-saved) .gpd-plano-positivacao-input,
.gpd-plano-positivacao-pill:has(.gpd-plano-medida-saved) .gpd-plano-positivacao-suffix{ color: var(--good); }
.gpd-plano-positivacao-pill:has(.gpd-plano-medida-error){
  border-color: rgba(225,89,90,0.75);
  box-shadow:0 0 0 3px rgba(225,89,90,0.16);
}
/* Positivação >= 70% vira verde — mesmo tom "good" usado no resto do
   painel pra indicar meta batida, só que aqui é fixo pelo valor em si. */
.gpd-plano-positivacao-pill-high{
  background: rgba(79,174,124,0.16);
  border-color: rgba(79,174,124,0.45);
}
.gpd-plano-positivacao-pill-high .gpd-plano-positivacao-input,
.gpd-plano-positivacao-pill-high .gpd-plano-positivacao-suffix{ color: var(--good); }
.gpd-plano-positivacao-pill-high:hover{ border-color: rgba(79,174,124,0.65); }
.gpd-plano-positivacao-input{
  width:40px;
  text-align:right;
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  font-weight:700;
  color: var(--accent);
  background:transparent;
  border:none;
  padding:0;
}
.gpd-plano-positivacao-input:focus{ outline:none; }
.gpd-plano-positivacao-input:disabled{ opacity:0.55; }
/* Linha "Positivação Carteira" da TOTAL GERAL: travada, mas é média real
   (não um campo comum desabilitado) — mantém leitura clara em vez do
   esmaecimento padrão de :disabled, que deixava os números quase
   invisíveis sobre o fundo dourado translúcido. */
.gpd-plano-positivacao-pill-readonly{ background: rgba(242,183,5,0.22); border-color: rgba(242,183,5,0.5); }
.gpd-plano-positivacao-pill-readonly .gpd-plano-positivacao-input:disabled,
.gpd-plano-positivacao-pill-readonly .gpd-plano-positivacao-suffix{ opacity:1; }
.gpd-plano-positivacao-pill-readonly.gpd-plano-positivacao-pill-high{ background: rgba(79,174,124,0.22); border-color: rgba(79,174,124,0.55); }
.gpd-plano-positivacao-suffix{
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  font-weight:700;
  color: var(--accent);
}

/* Separadores de trimestre nas colunas de mês (após Mar, Jun e Set) —
   linha #1 é o rótulo, então os meses são as colunas 2 a 13 (nth-child
   2..13); a borda vem depois de Mar (4ª), Jun (7ª) e Set (10ª). */
.gpd-plano-table th:nth-child(4),
.gpd-plano-table td:nth-child(4),
.gpd-plano-table th:nth-child(7),
.gpd-plano-table td:nth-child(7),
.gpd-plano-table th:nth-child(10),
.gpd-plano-table td:nth-child(10){
  border-right:2px solid rgba(242,183,5,0.4);
}

/* ---------- Medidas (ações individuais, Objetivo/Atingido editáveis) ---------- */
.gpd-plano-medidas-wrap{ margin-top:20px; }
.gpd-plano-medidas-wrap.hidden{ display:none; }
.gpd-plano-medidas-title{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:10px;
}
.gpd-plano-medidas-table-wrap{
  overflow-x:auto;
  /* overflow-y explícito em "visible" — sem isso, o navegador força os dois
     eixos pra "auto" (spec: overflow-x != visible puxa overflow-y junto), e
     o dropdown do combo de Concorrente (position:absolute, filho de uma
     <td>) fica cortado porque elemento posicionado não conta na altura
     automática do wrap, então "vaza" pra fora da área que o overflow mede
     e é cortado. Perde-se só o clip vertical; o scroll horizontal continua. */
  overflow-y:visible;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) 60%), rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px -16px rgba(0,0,0,0.55);
  padding:6px;
}
/* border-spacing vertical (sem horizontal) separa as linhas em "cards"
   individuais flutuando dentro do wrap, sem abrir vão entre as colunas de
   uma mesma linha — cada <tr> vira um bloco arredondado próprio. */
.gpd-plano-medidas-table{ min-width:900px; width:100%; border-collapse:separate; border-spacing:0 11px; }
.gpd-plano-medidas-table thead th{
  text-align:left;
  letter-spacing:0.07em;
  padding:15px 18px;
  color:var(--text);
  font-weight:700;
  font-size:12.5px;
  background: rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.1);
  /* Rótulo mais longo que a coluna (table-layout:fixed) quebra linha em vez
     de vazar por cima do cabeçalho vizinho — já aconteceu com "Numero de
     pedido" numa coluna estreita demais. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
.gpd-plano-medidas-table thead th.num{ text-align:center; }
.gpd-plano-medidas-table thead th:first-child{ border-radius:10px 0 0 0; }
.gpd-plano-medidas-table thead th:last-child{ border-radius:0 10px 0 0; }
.gpd-plano-medidas-table tbody td{
  padding:17px 18px;
  color:var(--text);
  vertical-align:middle;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 65%),
    rgba(255,255,255,0.025);
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gpd-plano-medidas-table tbody td:first-child{
  border-left:1px solid rgba(255,255,255,0.08);
  border-radius:12px 0 0 12px;
}
.gpd-plano-medidas-table tbody td:last-child{
  border-right:1px solid rgba(255,255,255,0.08);
  border-radius:0 12px 12px 0;
}
.gpd-plano-medidas-table tbody tr:hover td{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 65%),
    rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.16);
}
.gpd-plano-medidas-table td.name{ min-width:280px; color:var(--text); font-weight:500; }
.gpd-plano-medidas-table td.num{ text-align:center; }
/* A <tr> nunca tem fundo nas tabelas do GPD (11/09/2026, "revise para
   todas, ainda tem"). css/styles.css tem `tbody tr:hover{ background:
   var(--panel-2) }` pra toda tabela do site; aqui as linhas são "cards" com
   pontas arredondadas nas células, e esse fundo retangular da <tr> sobrava
   pra fora da curva — um canto quadrado claro na ponta da linha sob o
   mouse (visto na Auxiliar de Cobrança e em Clientes & Vendas). Quem pinta
   o hover aqui são as células (cada tabela tem o seu `tr:hover td`). */
.gpd-plano-table tbody tr,
.gpd-plano-table tbody tr:hover,
.gpd-plano-medidas-table tbody tr,
.gpd-plano-medidas-table tbody tr:hover{ background:transparent; }

/* ---------- Auxiliar de Cobrança (lista de clientes em atraso) ----------
   Reaproveita a mesma "família" de card/tabela do resto (.gpd-plano-medidas-
   table) — só a coluna "Situação" precisa de tratamento próprio: no Excel
   real a célula é branca, só a FONTE fica vermelha (mesma doutrina já usada
   em "Prejuízo Incobráveis" da Inadimplência, ver .gpd-plano-row-prejuizo
   .gpd-plano-medida-input acima), não um pill colorido — cartório/
   Protestado/cheque devolvido/vencido são todos a mesma cor no Excel de
   origem. Fica num <input> (editável, pedido do usuário 2026-08-28), não
   texto solto — por isso mira a classe do input, não um td. */
.gpd-cobranca-table .gpd-plano-cobranca-situacao-input{ color:var(--bad); }
.gpd-plano-cobranca-actions{ display:flex; gap:8px; }
/* Cabeçalho clicável pra ordenar — "igual ao painel" (pedido do usuário
   2026-08-28): mesmo padrão de #vendTable em index.html/js/app.js
   (<th data-key>, classe .sorted, seta "▾" via thead th.sorted::after, já
   definida em css/styles.css como regra GLOBAL — não duplica aqui). Só
   reforça o hover dourado (empatava em especificidade com o color:var(--text)
   de .gpd-plano-medidas-table thead th, que carrega DEPOIS de styles.css e
   ganhava até no :hover) e desliga o cursor de "clicável" nas 2 colunas sem
   data-key (índice/excluir). */
.gpd-cobranca-table thead th:hover{ color:var(--accent); }
.gpd-cobranca-table thead th:not([data-key]){ cursor:default; }
/* Seta "▾" maior, em "vidro 3D" (pedido do usuário 2026-08-28: "deixe
   maior o efeito 3d vidro") — sobrescreve só AQUI o "▾" de texto plano
   herdado de thead th.sorted::after (css/styles.css, regra global, não
   mexe nela pro resto do painel continuar igual). Vira um badge redondo
   dourado com gradiente + sombra em camadas (destaque por cima, sombra por
   baixo, glow externo) — mesma receita "vidro 3D" já usada em
   .gpd-inconformidade-table/gauge do Resumo, SEM backdrop-filter (lição já
   aprendida nesta tela: borra texto de overlay vizinho). */
.gpd-cobranca-table thead th.sorted::after{
  content: "▾";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  color: rgb(38,30,4);
  background: linear-gradient(180deg, rgba(255,229,140,0.98) 0%, rgba(242,183,5,0.92) 55%, rgba(184,132,0,0.95) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.75),
    inset 0 -3px 4px -1px rgba(0,0,0,0.4),
    0 2px 5px -1px rgba(0,0,0,0.5),
    0 0 10px -1px rgba(242,183,5,0.55);
  vertical-align: middle;
}
/* Texto maior/legível nos campos de texto (Cliente/Vendedor/Situação/Forma
   Pgto) — pedido do usuário 2026-08-28 ("amplie os textos para ficar
   visivel texto + card"): nome de cliente cortado ("Marco An...") porque a
   coluna herdava a largura fixa de 84px/fonte monospace centralizada de
   .gpd-plano-medida-input (pensada pra número curto, não texto livre).
   Mesma receita já usada em .gpd-plano-negocios-table (table-layout:fixed +
   input:100% + Inter à esquerda) — largura de verdade vem do colgroup em
   gpdPlanoRenderCobranca (Cliente 260px/Vendedor 160px/Situação+Forma
   150px cada), aqui só o texto/alinhamento em cima dessa largura maior. */
/* Busca por nome do cliente (pedido do usuário 2026-09-10) — filtra as
   linhas já carregadas (GPD_COBRANCA_LAST_MERGED), sem ida ao servidor;
   mesmo campo/paleta de .gpd-visitas-search pra não inventar um terceiro
   visual de busca dentro do GPD. Some junto com "+ Mês"/"+ Cliente" na
   visão "Total por vendedor" (linha somada não tem nome de cliente pra
   filtrar) — ver gpdPlanoRenderCobranca. */
.gpd-cobranca-search-row{ margin:0 0 14px; }
.gpd-cobranca-search{
  width:100%;
  max-width:360px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  padding:10px 14px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  outline:none;
}
.gpd-cobranca-search:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}
.gpd-cobranca-search::placeholder{ color:var(--text-faint); }
.gpd-cobranca-search::-webkit-search-cancel-button{ cursor:pointer; }
.gpd-cobranca-sem-resultado td{
  text-align:center;
  padding:22px 12px;
  color:var(--text-faint);
  font-size:13.5px;
}

/* Chave entre "Total por vendedor" e "Detalhado" — dois cards clicáveis, o
   ativo em dourado (mesma cor de seleção do resto do painel). Não é um pill
   pequeno de propósito: a troca muda a tabela inteira, então precisa ler como
   escolha de tela, não como filtro. */
.gpd-cobranca-view-switch{
  display:flex;
  gap:10px;
  margin:0 0 14px;
  flex-wrap:wrap;
}
.gpd-cobranca-view-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:flex-start;
  min-width:196px;
  padding:11px 18px;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  /* <button> não herda fonte nem cor do documento — sem isto os dois cards
     saem na fonte padrão do sistema, destoando do resto da tela. */
  font-family:inherit;
  color:inherit;
  /* Card inativo: vidro escuro — gradiente sutil + linha de luz no topo,
     mesma gramática dos cards do painel. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02) 60%),
    rgba(18,22,28,0.72);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 2px 6px -3px rgba(0,0,0,0.5);
  transition: transform .12s ease, border-color .15s ease, box-shadow .18s ease;
}
.gpd-cobranca-view-card:hover{
  transform:translateY(-1px);
  border-color: rgba(255,255,255,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 6px 14px -6px rgba(0,0,0,0.6);
}
/* Card ativo: o mesmo bloco de vidro âmbar do botão dourado do painel
   (.auth-submit em css/styles.css) — gradiente opaco, cúpula especular no
   topo (::before) e texto escuro. Glow mais contido que o do botão de ação:
   isto é uma escolha de visão, não a chamada principal da tela. */
.gpd-cobranca-view-card.is-active{
  border-color: rgba(255,238,190,0.5);
  color:#241a02;
  background:linear-gradient(180deg, #FFDA6B 0%, var(--accent) 58%, var(--accent-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -10px 14px -6px rgba(120,80,0,0.4),
    0 0 26px rgba(242,183,5,0.28),
    0 10px 20px -10px rgba(242,183,5,0.5),
    0 2px 4px rgba(0,0,0,0.35);
}
.gpd-cobranca-view-card.is-active:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -10px 14px -6px rgba(120,80,0,0.4),
    0 0 34px rgba(242,183,5,0.38),
    0 12px 24px -10px rgba(242,183,5,0.6),
    0 2px 4px rgba(0,0,0,0.35);
}
.gpd-cobranca-view-card.is-active::before{
  content:"";
  position:absolute;
  left:5%; right:5%; top:3px;
  height:42%;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:1;
}
/* O texto SEMPRE acima da cúpula, explicitamente. Sem z-index a ordem de
   pintura decide, e é ela que varia entre navegador e WebView Android — é
   assim que o botão dourado deste painel já ficou ilegível várias vezes (ver
   o comentário longo em .auth-submit span, css/styles.css). */
.gpd-cobranca-view-card span{ position:relative; z-index:2; }
.gpd-cobranca-view-card-title{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text);
}
.gpd-cobranca-view-card-sub{ font-size:11.5px; color:var(--text-faint); letter-spacing:0.02em; }
/* Cor repetida no card ativo (e no hover dele) porque o dourado do texto
   herdado de .excel-btn/:hover sobre fundo dourado é exatamente o modo como
   esse botão some — mesma armadilha documentada em .auth-submit:hover. */
.gpd-cobranca-view-card.is-active .gpd-cobranca-view-card-title,
.gpd-cobranca-view-card.is-active:hover .gpd-cobranca-view-card-title{ color:#241a02; }
.gpd-cobranca-view-card.is-active .gpd-cobranca-view-card-sub,
.gpd-cobranca-view-card.is-active:hover .gpd-cobranca-view-card-sub{ color:rgba(36,26,2,0.66); }
.gpd-cobranca-view-card:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  .gpd-cobranca-view-card, .gpd-cobranca-view-card:hover{ transform:none; transition-duration:.01ms; }
}

.gpd-cobranca-table{ table-layout:fixed; min-width:1200px; }
/* A visão de total tem 2 colunas + os meses; o min-width de 1200px da tabela
   detalhada esticaria essas poucas colunas por toda a largura. Aqui a largura
   vem do colgroup e nada mais. */
.gpd-cobranca-total-table{ min-width:0; width:auto; }
/* A visão de total é estreita (2 colunas + meses), então sobra painel à
   direita da tabela — coisa que não acontece nas outras telas, onde a tabela
   ocupa a largura toda e esse fundo nunca aparece como área vazia. Num tom
   mais claro a sobra lê como superfície do card, não como buraco escuro.
   Escopado por :has() pra não mexer no fundo já validado de
   Medidas/Negócios/Inconformidade e da própria visão detalhada. */
.gpd-plano-medidas-table-wrap:has(.gpd-cobranca-total-table){
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035) 60%),
    rgba(46,54,66,0.55);
  border-color: rgba(255,255,255,0.12);
}
/* Cliente sem vendedor preenchido vira um balde próprio — aparece apagado
   porque é pendência de cadastro, não um vendedor de verdade, mas NÃO some:
   escondê-lo faria a soma da tela não bater com o TOTAL. */
.gpd-cobranca-total-table tbody tr.gpd-cobranca-total-sem-vendedor td{ opacity:0.7; font-style:italic; }
/* Visão "Incobráveis" (2026-09-11): usa o layout estreito da visão de total
   (classe gpd-cobranca-total-table na mesma tabela); o valor do prejuízo sai
   em vermelho, fiel à planilha — mesmo var(--bad) da coluna Situação. */
.gpd-cobranca-incobraveis-table td.gpd-cobranca-incobravel-valor{ color:var(--bad); font-weight:700; }
/* ...e o mesmo vermelho dentro do campo, quando a lista está editável (admin,
   lista já no banco — ver gpdPlanoCarregarIncobraveis). */
.gpd-cobranca-incobraveis-table .gpd-cobranca-incobravel-input{ color:var(--bad); font-weight:700; text-align:right; }
/* Seletor de mês dos Incobráveis no canto de cima à direita do painel da
   tabela (lugar marcado pelo usuário). A tabela é estreita, então o canto
   fica livre; em tela estreita, onde a tabela ocupa tudo, ele vira uma
   linha própria acima dela. */
.gpd-cobranca-wrap--incobraveis{ position:relative; }
/* Lista + somatório por vendedor lado a lado (2026-09-11), no espaço vazio
   à direita da lista. O somatório desce 48px pra começar abaixo do seletor
   de mês (que fica no canto, em position:absolute). Tela estreita: um
   embaixo do outro. */
.gpd-incob-layout{ display:flex; align-items:flex-start; gap:28px; flex-wrap:wrap; }
.gpd-incob-layout > table{ flex:0 0 auto; }
.gpd-incob-resumo{ flex:0 0 auto; margin-top:48px; }
@media (max-width: 900px){
  .gpd-incob-resumo{ margin-top:0; }
}
.gpd-cobranca-wrap--incobraveis .gpd-incob-mes-select{ position:absolute; top:14px; right:16px; z-index:3; }
@media (max-width: 900px){
  .gpd-cobranca-wrap--incobraveis .gpd-incob-mes-select{ position:static; display:block; margin:0 0 10px auto; }
}
.gpd-cobranca-table input{ width:100%; box-sizing:border-box; }
/* A coluna de mês do Detalhado alarga pra só 3 meses ocuparem o meio
   (gpdPlanoCobrancaJanelaTresMeses em js/gpd-plano.js); a caixinha do valor
   fica do tamanho de sempre (130px de coluna - 2x18px de padding), centrada. */
.gpd-cobranca-table td.gpd-cobranca-mes .gpd-plano-medida-input{ max-width:94px; }
.gpd-cobranca-table .gpd-plano-medida-input{ font-size:15px; }
.gpd-plano-cobranca-input-text{ text-align:left; font-family:'Inter', sans-serif; font-weight:500; }
/* Destaque verde só na coluna Cliente de cada linha (pedido do usuário
   2026-08-28: primeiro "toda a linha", depois corrigido pra "só a coluna
   Cliente" via print com seta apontando pro cabeçalho CLIENTE) — todas as
   linhas de cliente, sempre, sem condição. Exclui a linha TOTAL
   (.gpd-plano-row-headline-resultado, azul-marinho próprio) via :not().
   Mira nth-child(2) — não first-child: a 1ª coluna é o índice numerado
   (.gpd-plano-medida-idx-cell, ver "+ Mês"/"+ Adicionar cliente" virou
   linha editável), a Cliente é a 2ª. */
/* O verde e o MESMO de sempre, so que agora sobre uma base OPACA: esta
   coluna virou fixa (ver .gpd-cobranca-fixa) e, com fundo translucido, o
   valor dos meses passava por baixo do nome do cliente durante a rolagem
   (2026-09-10). Nao da pra resolver do lado da regra de sticky: este
   seletor tem especificidade maior (0,3,3) e venceria de qualquer jeito --
   por isso a correcao mora aqui, na propria regra que pinta. */
.gpd-cobranca-table tbody tr:not(.gpd-plano-row-headline-resultado) td:nth-child(2){
  background: linear-gradient(0deg, rgba(79,174,124,0.16), rgba(79,174,124,0.16)), #1B2027;
  box-shadow: inset 3px 0 0 rgba(79,174,124,0.7);
}
.gpd-cobranca-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td:nth-child(2){
  background: linear-gradient(0deg, rgba(79,174,124,0.24), rgba(79,174,124,0.24)), #20262E;
}
.gpd-plano-medida-idx{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px; height:24px;
  border-radius:50%;
  background: rgba(242,183,5,0.16);
  color:var(--accent);
  font-weight:700;
  font-size:12px;
}
/* Índice + botão de excluir juntos na 1ª coluna (Negócios não Realizados) —
   fica sempre visível mesmo com a tabela rolada pro lado, diferente da
   versão antiga que jogava o "x" pra última coluna, fora da área visível. */
.gpd-plano-medidas-table tbody td.gpd-plano-medida-idx-cell{
  /* Coluna fixa de 64px (colgroup do Negócios) — o padding maior do resto
     da tabela não cabe aqui junto com o círculo do índice + botão de
     excluir, então essa célula mantém padding horizontal reduzido. */
  padding-left:8px;
  padding-right:8px;
}
.gpd-plano-medida-idx-cell{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.gpd-plano-medida-idx-cell .gpd-remove-btn{
  width:22px; height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  border-radius:50%;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  padding:0;
  opacity:0.6;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gpd-plano-medidas-table tbody tr:hover .gpd-plano-medida-idx-cell .gpd-remove-btn{ opacity:1; }
.gpd-plano-medida-idx-cell .gpd-remove-btn:hover{
  color: var(--bad);
  background: var(--bad-soft);
  border-color: rgba(225,89,90,0.4);
}

/* Medida/Responsável/Prazo viraram editáveis (input) — colgroup fixo (ver
   gpdPlanoRenderMedidas) só resolve largura de coluna de forma confiável com
   table-layout:fixed, mesma razão já documentada em .gpd-plano-negocios-table
   (sem isso, table-layout:auto ignora largura de <col> quando o conteúdo do
   input "pede" mais espaço). Escopado por id (não pela classe
   .gpd-plano-medidas-table, reaproveitada por outras tabelas sem colgroup)
   pra não afetar nada fora da tabela de Medidas. */
#gpdPlanoMedidas{ table-layout:fixed; }
#gpdPlanoMedidas input{ width:100%; box-sizing:border-box; }
.gpd-plano-medida-field-input{
  text-align:left;
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:13.5px;
}

/* Aba "Inconformidade" (categoria x região) — mesma razão do table-layout:
   fixed acima (colgroup só resolve largura de forma confiável assim), mas
   escopado por classe própria (não pela .gpd-plano-medidas-table
   compartilhada) porque essa tabela tem número de colunas dinâmico (uma por
   região, lido do cabeçalho da própria aba) e larguras diferentes de
   Medidas/Negócios. min-width cobre as 7 regiões observadas hoje + as
   colunas fixas — cresce sozinho se um dia tiver mais regiões (o wrap já
   rola por cima, ver .gpd-plano-medidas-table-wrap). */
.gpd-inconformidade-table{ table-layout:fixed; min-width:1400px; }
.gpd-inconformidade-table input{ width:100%; box-sizing:border-box; }
.gpd-plano-inconformidade-total-name{ color:#FFFFFF; }

/* Coluna R$ da categoria: edição no próprio lugar (pedido do usuário). O
   <input> se parece com texto puro — sem borda nem fundo em repouso, só o
   valor acumulado. Clicar nele já edita, sem abrir campo/caixa separada;
   hover e foco dão um leve destaque só pra sinalizar que é editável. O
   comportamento é aditivo: ao focar, o JS esvazia o campo (placeholder
   "+ ou −") pra digitar um delta — ver setupGpdPlanoInconformidadeEditing. */
.gpd-inconformidade-rmoney-cell{ vertical-align:middle; }
.gpd-inconformidade-rmoney{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  border:1px solid transparent;
  border-radius:8px;
  cursor:text;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.gpd-inconformidade-rmoney:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14);
}
/* Foco: mesmo contorno neutro dos outros campos da linha (colunas de
   região) — nada de dourado. */
.gpd-inconformidade-rmoney:has(.gpd-plano-inconformidade-rmoney-input:focus){
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.26);
  box-shadow: none;
}
.gpd-inconformidade-rmoney:has(.gpd-plano-inconformidade-rmoney-input:disabled){
  cursor:default;
}
.gpd-inconformidade-rmoney:has(.gpd-plano-inconformidade-rmoney-input:disabled):hover{
  background:transparent;
  border-color:transparent;
}
/* Delta inválido: o input em si não tem borda/sombra (transparent
   !important), então o aviso de erro fica no wrapper. */
.gpd-inconformidade-rmoney:has(.gpd-plano-medida-error){
  background: rgba(225,89,90,0.14);
  border-color: rgba(225,89,90,0.7);
  box-shadow: 0 0 0 3px rgba(225,89,90,0.16);
}
.gpd-inconformidade-rmoney-prefix{
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:600;
  color:#0F1B2D;
  flex-shrink:0;
}
/* Esconde o "R$" enquanto o campo está vazio (placeholder à mostra). */
.gpd-inconformidade-rmoney:has(.gpd-plano-inconformidade-rmoney-input:placeholder-shown) .gpd-inconformidade-rmoney-prefix{
  display:none;
}
/* O input em si: transparente, sem moldura — herda o visual de texto. O
   !important derruba o fundo escuro que .gpd-inconformidade-table
   .gpd-plano-medida-input aplica às colunas de região. */
.gpd-inconformidade-table .gpd-plano-inconformidade-rmoney-input{
  flex:1 1 auto;
  min-width:0;
  width:auto;
  margin:0;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:right;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:#0F1B2D;
}
.gpd-inconformidade-table .gpd-plano-inconformidade-rmoney-input::placeholder{
  color: rgba(15,27,45,0.45);
  font-weight:600;
}

/* Linha de categoria comum (não-TOTAL): Total/%/regiões/R$ em relevo
   "vidro 3D" azul (pedido explícito do usuário), formando um cartão único
   por linha nessas colunas. Só gradiente + sombra em camadas, SEM
   backdrop-filter (esse bug já custou caro nesse projeto 3x, ver histórico
   em styles.css/almoxarifado.css: qualquer overlay/blur no mesmo stacking
   context ou num irmão borra o texto por cima). Escopado com
   :not(.gpd-plano-row-headline-resultado) — a linha TOTAL/TOTAL GERAL usa
   outro estilo (azul-marinho sólido, ver .gpd-plano-row-headline-resultado
   e .gpd-plano-inconformidade-total-name mais abaixo) e não deve ser
   tocada por esta regra. A coluna Categoria (td:first-child/td.name) NÃO
   entra aqui — pedido explícito do usuário (2026-08-27): ela é vermelha,
   ver regra própria logo abaixo, com prioridade sobre esta por vir depois
   no arquivo. */
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td{
  position:relative;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.10) 100%),
    linear-gradient(180deg, rgba(120,190,230,0.34), rgba(120,190,230,0.14) 60%),
    rgba(96,112,132,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.45),
    inset 0 -8px 14px -8px rgba(0,0,0,0.4);
  border-top:1px solid rgba(255,255,255,0.18);
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td:first-child{
  border-radius:14px 0 0 14px;
  border-left:1px solid rgba(255,255,255,0.18);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td:last-child{
  border-radius:0 14px 14px 0;
  border-right:1px solid rgba(255,255,255,0.18);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0.12) 100%),
    linear-gradient(180deg, rgba(120,190,230,0.40), rgba(120,190,230,0.18) 60%),
    rgba(96,112,132,0.72);
  border-color: rgba(255,255,255,0.26);
}
/* Pedido do usuário 2026-08-28: "só os cards deixa escuro como estava
   antes, o fundo deixe claro como está" — o input numérico (.gpd-plano-
   medida-input, base em rgba(255,255,255,0.05) translúcido) só parecia
   escuro antes porque o fundo da célula por trás dele também era escuro;
   como esse fundo clareou (regra acima), o card passou a herdar o mesmo
   claro por transparência. Aqui ele ganha um fundo próprio bem mais opaco
   e escuro, voltando a se destacar como um card separado sobre o vidro
   claro — em vez de continuar só refletindo o que está atrás. Escopado a
   .gpd-inconformidade-table pra não mudar o input padrão usado em
   Medidas/Negócios/Frete (mesma classe, visual diferente lá). */
.gpd-inconformidade-table .gpd-plano-medida-input{
  background: rgba(16,20,26,0.85);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -3px 6px -2px rgba(0,0,0,0.45),
    0 2px 5px -2px rgba(0,0,0,0.4);
}
.gpd-inconformidade-table .gpd-plano-medida-input:hover{
  border-color: rgba(255,255,255,0.22);
}
.gpd-inconformidade-table .gpd-plano-medida-input:focus{
  background: rgba(16,20,26,0.92);
}
/* Coluna "R$" (pedido do usuário 2026-08-28: "aqui também deixe escuro") —
   usa um elemento diferente das colunas de região (o card
   .gpd-plano-negocio-money, não o <input> direto), então a regra acima não
   alcançava: o <input> por dentro dele tem fundo transparent!important (ver
   .gpd-plano-negocio-money .gpd-plano-negocio-input-valor em outra seção
   deste arquivo), deixando o vidro claro do PRÓPRIO card aparecer por
   trás. Mesmo tom escuro aplicado direto no card aqui. */
.gpd-inconformidade-table .gpd-plano-negocio-money{
  background: rgba(16,20,26,0.85);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -3px 6px -2px rgba(0,0,0,0.45),
    0 2px 5px -2px rgba(0,0,0,0.4);
}
.gpd-inconformidade-table .gpd-plano-negocio-money:has(.gpd-plano-negocio-input-valor:focus){
  background: rgba(16,20,26,0.92);
}
/* TOTAL e % (pedido do usuário 2026-08-28: "aqui também deixe como estava")
   voltam pro tom original de antes do clareamento acima — só essas 2
   colunas; regiões e R$ continuam no vidro mais claro. Maior especificidade
   (:nth-child além do :not) garante que estas ganham da regra genérica
   acima pras linhas 3+ (as 2 primeiras continuam com o dourado próprio,
   regra logo abaixo, que já tinha prioridade sobre a genérica). */
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td:nth-child(2),
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td:nth-child(3){
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.035) 100%),
    linear-gradient(180deg, rgba(79,154,192,0.16), rgba(79,154,192,0.05) 60%),
    rgba(24,29,37,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -8px 14px -8px rgba(0,0,0,0.55);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td:nth-child(2),
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td:nth-child(3){
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(79,154,192,0.22), rgba(79,154,192,0.07) 60%),
    rgba(24,29,37,0.72);
  border-color: rgba(255,255,255,0.18);
}

/* Total e % em vidro 3D dourado, mas SÓ nas 2 primeiras linhas de
   categoria de cada bloco (pedido do usuário 2026-08-27, confirmado após
   idas e voltas: "é só as duas linhas de cima, as debaixo fica normal" —
   ou seja "Erro no pedido do Cliente - Produtos" e "Erro de produção", que
   sempre aparecem em 1º/2º na planilha; da 3ª categoria em diante Total/%
   ficam azuis feito o resto da linha, via a regra genérica
   :not(.gpd-plano-row-headline-resultado) td mais acima — não precisa de
   regra própria pra elas, só as 2 primeiras precisam do override). Cantos
   totalmente arredondados (flutuam como pílula entre a Categoria vermelha e
   as regiões azuis). Célula de altura fixa (número/pílula de 1 linha, não
   texto que quebra) — sem o problema de tom variável por altura que tirou o
   radial da coluna Categoria. */
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2) td:nth-child(2),
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2) td:nth-child(3){
  border-radius:12px;
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.20), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.22), rgba(242,183,5,0.06) 60%),
    rgba(30,26,15,0.7);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.26),
    inset 0 -8px 14px -8px rgba(0,0,0,0.55),
    0 6px 12px -8px rgba(0,0,0,0.55);
  border:1px solid rgba(242,183,5,0.22);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2):hover td:nth-child(2),
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2):hover td:nth-child(3){
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.26), rgba(255,255,255,0) 55%),
    linear-gradient(155deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.04) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.28), rgba(242,183,5,0.08) 60%),
    rgba(30,26,15,0.7);
  border-color: rgba(242,183,5,0.32);
}

/* Coluna Categoria (não-TOTAL) em vidro 3D vermelho, SEM o brilho radial
   posicional que a coluna tinha antes — esse radial "at 12% -25%" muda de
   proporção conforme a altura da célula (categorias com nome de 2 linhas
   ficam mais altas que as de 1 linha), o que fazia linhas de altura
   diferente lerem como tons ligeiramente diferentes ("essa coluna precisa
   ficar em uma cor só", pedido do usuário 2026-08-27). Aqui é só gradiente
   linear (escala com a altura sem distorcer a cor) — mesmo tom exato em
   toda linha, curta ou longa. Vermelho = var(--bad) #E1595A. */
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td.name{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.035) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.22), rgba(225,89,90,0.08) 60%),
    rgba(24,29,37,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -8px 14px -8px rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(255,255,255,0.06),
    0 8px 16px -10px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.3);
}
.gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td.name{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.30), rgba(225,89,90,0.11) 60%),
    rgba(24,29,37,0.72);
  border-color: rgba(225,89,90,0.35);
}
/* Linha TOTAL/TOTAL GERAL inteira em vidro 3D vermelho (pedido do usuário
   2026-08-27: primeiro só a última célula, depois "toda ela" — a linha
   inteira). Escopado só pra .gpd-inconformidade-table: a classe
   .gpd-plano-row-headline-resultado é reaproveitada também no Resultado
   Mensal/Acumulado do Plano de Ação, que não deve mudar (a regra genérica
   .gpd-plano-row-headline-resultado td, sem esse prefixo, continua
   controlando aquelas outras tabelas). Regra base cobre as colunas de
   região (sem seletor próprio); Categoria/Total/%/R$ têm override mais
   específico logo abaixo por causa de regras concorrentes com a mesma
   especificidade (nth-child/classe/:last-child) que senão ganhariam. Cada
   regra também repete o seletor com "tbody tr:hover.gpd-plano-row-
   headline-resultado" — sem isso, passar o mouse por cima "apagava" a cor
   (pedido do usuário 2026-08-27: "quando o mouse clica esconde a cor,
   deixe sem excluir"): a regra genérica de hover compartilhada por toda
   .gpd-plano-medidas-table (linha ~1118, fundo bem clarinho translúcido)
   tem mais peso que "td"/"td.classe" sozinhos, então ganhava justamente no
   hover e revelava o fundo escuro por baixo em vez do vermelho. */
.gpd-inconformidade-table tr.gpd-plano-row-headline-resultado td,
.gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td{
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(235,120,120,0.42), rgba(235,120,120,0.2) 60%),
    rgba(110,58,58,0.78);
  border-color: rgba(225,89,90,0.4);
}
.gpd-inconformidade-table td.gpd-plano-inconformidade-total-name,
.gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td.gpd-plano-inconformidade-total-name{
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(235,120,120,0.42), rgba(235,120,120,0.2) 60%),
    rgba(110,58,58,0.78);
  border-color: rgba(225,89,90,0.4);
}
.gpd-inconformidade-table tr.gpd-plano-row-headline-resultado td:last-child,
.gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td:last-child{
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(235,120,120,0.42), rgba(235,120,120,0.2) 60%),
    rgba(110,58,58,0.78);
  border-color: rgba(225,89,90,0.4);
}

/* Cabeçalho da tabela em "vidro 3D" verde (pedido explícito do usuário) —
   mesma receita (gradiente + sombra em camadas, sem backdrop-filter) só que
   com verde (--good) em vez do azul de Total/%/regiões/R$. Aplicado em cada
   <th> (não no <thead>/<tr> como um todo) porque table-layout:fixed +
   border-collapse:separate faz cada célula pintar seu próprio fundo — como
   o gradiente é o MESMO em todas (sem componente radial que mude por
   posição), as células ficam coladas (border-spacing:0 no eixo horizontal)
   e o cabeçalho inteiro lê como uma barra única, não colunas separadas.
   Cantos arredondados só em cima (mesmo esquema já usado pelo cabeçalho
   padrão de .gpd-plano-medidas-table — o cabeçalho fica colado no topo do
   card, sem o respiro vertical que cada linha do corpo tem). */
.gpd-inconformidade-table thead th{
  background:
    linear-gradient(180deg, rgba(140,235,185,0.30) 0%, rgba(79,174,124,0.16) 55%, rgba(79,174,124,0.10) 100%),
    rgba(18,30,24,0.8);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -7px 12px -7px rgba(0,0,0,0.55);
  border-bottom:1px solid rgba(79,174,124,0.45);
  color:#EAF8EF;
}
.gpd-inconformidade-table thead th:first-child{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -7px 12px -7px rgba(0,0,0,0.55),
    inset -1px 0 0 rgba(79,174,124,0.45);
}
.gpd-inconformidade-table thead th:last-child{
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -7px 12px -7px rgba(0,0,0,0.55),
    inset 1px 0 0 rgba(79,174,124,0.45);
}

/* Total e % da linha TOTAL/TOTAL GERAL (não das categorias comuns, essas
   têm seu próprio vidro dourado/azul acima) forçados pro mesmo vidro
   vermelho sólido do resto da linha — nth-child(2)/(3) por padrão herdaria o cinza
   genérico de .gpd-plano-medidas-table tbody td (mais específico que
   .gpd-plano-row-headline-resultado td sozinho, ver nota de especificidade
   em .gpd-clientes-table mais abaixo), então precisa de override próprio. */
.gpd-inconformidade-table tr.gpd-plano-row-headline-resultado td:nth-child(2),
.gpd-inconformidade-table tr.gpd-plano-row-headline-resultado td:nth-child(3),
.gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td:nth-child(2),
.gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td:nth-child(3){
  background:
    radial-gradient(120% 160% at 12% -25%, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(235,120,120,0.42), rgba(235,120,120,0.2) 60%),
    rgba(110,58,58,0.78);
  border-color: rgba(225,89,90,0.4);
}

/* ---------- Aba "Frete" (tabela "Pagamento de Frete por Região/Vendedor")
   ---------- Mesma receita "vidro 3D" da Inconformidade (gradiente + sombra
   em camadas, table-layout:fixed + colgroup, SEM backdrop-filter — ver
   comentário grande na seção .gpd-inconformidade-table acima pras 4 lições
   já aprendidas nesta tela, todas valem aqui também). Diferença: aqui a cor
   de destaque de cada célula vem do PRÓPRIO Excel (fill lido ao vivo, ver
   js/gpd-plano.js::GPD_FRETE_HL_CLASS), não de uma coluna fixa — por isso
   as classes .gpd-frete-hl-* abaixo são aplicadas célula a célula pelo
   render, em vez de por nth-child como na Inconformidade. */
.gpd-frete-table{ table-layout:fixed; min-width:1220px; }

/* Faixa de título (linhas 34-35 da planilha, "PAGAMENTO DE FRETE POR
   REGIÃO/VENDEDOR" + "JANEIRO/2026*") em vidro oliva — na planilha real o
   fundo oliva só cobre as colunas A-D (não a linha inteira), mas aqui vira
   uma faixa única acima da tabela (mesmo espírito visual, sem tentar
   reproduzir o merge parcial dentro do <table>). */
.gpd-frete-title-band{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:12px 12px 0 0;
  padding:14px 20px 12px;
  margin-bottom:6px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(128,128,0,0.55), rgba(128,128,0,0.28) 65%),
    rgba(30,30,10,0.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border:1px solid rgba(191,191,0,0.35);
  border-bottom:none;
}
.gpd-frete-title-text{ min-width:0; }
/* Seletor de mês do histórico da aba Frete (ver GPD_FRETE_SELECTED_MES em
   js/gpd-plano.js) — pedido do usuário 2026-08-27. Mesmo padrão de select
   sem estilo nativo de .gpd-plano-toolbar select, com paleta clara pra
   ficar legível em cima do vidro oliva da faixa de título em vez do painel
   escuro padrão. */
.gpd-frete-mes-select{
  flex:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23FBFBE6' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center,
    rgba(0,0,0,0.28);
  color:#FBFBE6;
  border:1px solid rgba(251,251,230,0.35);
  border-radius:10px;
  padding:7px 30px 7px 12px;
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.gpd-frete-mes-select:hover{ border-color: rgba(251,251,230,0.6); }
.gpd-frete-mes-select:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(251,251,230,0.18);
}
.gpd-frete-mes-select option{ color:#111; background:#FBFBE6; }
.gpd-frete-title-main{
  font-family:'Oswald', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#FBFBE6;
}
.gpd-frete-title-sub{
  margin-top:4px;
  font-size:11.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(251,251,230,0.75);
  font-weight:600;
}

/* Cabeçalho em duas linhas (linha 36 + linha 37 da planilha empilhadas no
   mesmo <th>) — mesmo vidro verde já usado no cabeçalho da Inconformidade. */
.gpd-frete-table thead th{
  background:
    linear-gradient(180deg, rgba(140,235,185,0.30) 0%, rgba(79,174,124,0.16) 55%, rgba(79,174,124,0.10) 100%),
    rgba(18,30,24,0.8);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.30),
    inset 0 -7px 12px -7px rgba(0,0,0,0.55);
  border-bottom:1px solid rgba(79,174,124,0.45);
  color:#EAF8EF;
}
.gpd-frete-table thead th:first-child{ border-radius:0; }
.gpd-frete-table thead th:last-child{ border-radius:0; }
.gpd-frete-th-main{ display:block; font-size:12.5px; font-weight:700; letter-spacing:0.04em; }
/* Cor herdada do cabecalho (01/10/2026): o verde-claro fixo sumia no tema claro ("REGIAO", "TOTAL", "EMPRESA", "POR ENTREGA", "MEDIO" ilegiveis). */
.gpd-frete-th-sub{ display:block; margin-top:3px; font-size:10.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:inherit; opacity:0.62; }
.gpd-frete-th-badge{
  display:block;
  margin-bottom:3px;
  font-size:10px;
  font-weight:700;
  color:var(--accent);
  opacity:0.9;
}

/* Célula neutra (sem destaque no Excel) — mesmo tratamento translúcido já
   usado no resto de .gpd-plano-medidas-table (herdado), só reforça
   table-layout:fixed aqui. Linhas de subtotal/TOTAL ficam em negrito
   independente de terem ou não uma célula com destaque de cor. */
.gpd-frete-table tbody td{ position:relative; }
.gpd-frete-table tbody tr.gpd-frete-row-subtotal td,
.gpd-frete-table tbody tr.gpd-frete-row-total td{ font-weight:700; }
.gpd-frete-table tbody tr.gpd-frete-row-subtotal td.name,
.gpd-frete-table tbody tr.gpd-frete-row-total td.name{ color:#FFFFFF; }

/* Linhas "Regiões - X%"/"Passo Fundo - X%" inteiras em vermelho vidro 3D
   (pedido do usuário 2026-08-27: primeiro só a célula "Total pago pela
   empresa" das 3, depois "toda a linha card" nas 3 — mesma evolução de
   pedido já vista na linha TOTAL da Inconformidade). A linha "TOTAL - X%"
   tinha essa mesma cor até 2026-08-28, quando o usuário pediu pra ficar em
   laranja pra se diferenciar visualmente das duas linhas de subtotal acima
   (ver regra .gpd-frete-row-total logo abaixo, mesma receita de vidro 3D,
   só trocando pra rgba(255,152,0,*) — o mesmo laranja já usado em
   .gpd-frete-hl-laranja). Sobrescreve qualquer destaque vindo do Excel
   nessas linhas (dourado no nome, verde no Custo KM, laranja no Custo
   médio) — decisão de estilo explícita do usuário pra essas linhas, não
   "siga as cores da planilha". Especificidade: 1 classe .gpd-frete-table +
   tbody + tr + 1 classe de linha + td = (0,2,3), mais específico que as
   classes .gpd-frete-hl-* (0,2,2) e que a regra genérica de hover de
   .gpd-plano-medidas-table (0,2,3, empate resolvido por vir depois no
   arquivo) — ainda assim repete com "tbody tr:hover" por clareza e pra não
   depender de ordem no arquivo, mesma lição já aprendida na Inconformidade. */
.gpd-frete-table tbody tr.gpd-frete-row-subtotal td,
.gpd-frete-table tbody tr:hover.gpd-frete-row-subtotal td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.34), rgba(225,89,90,0.10) 60%),
    rgba(32,18,18,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(225,89,90,0.35);
  border-bottom:1px solid rgba(225,89,90,0.35);
}
.gpd-frete-table tbody tr:hover.gpd-frete-row-subtotal td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.40), rgba(225,89,90,0.13) 60%),
    rgba(32,18,18,0.72);
}
.gpd-frete-table tbody tr.gpd-frete-row-total td,
.gpd-frete-table tbody tr:hover.gpd-frete-row-total td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.34), rgba(242,183,5,0.10) 60%),
    rgba(30,26,15,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(242,183,5,0.35);
  border-bottom:1px solid rgba(242,183,5,0.35);
}
.gpd-frete-table tbody tr:hover.gpd-frete-row-total td{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.40), rgba(242,183,5,0.13) 60%),
    rgba(30,26,15,0.72);
}

/* Coluna Vendedor/Região (A) em vidro 3D azul claro — pedido do usuário
   2026-08-27, mesmo tom já usado em .gpd-frete-hl-azul (o azul pastel real
   da linha TOTAL no Excel, #B9CDE5), só que aqui como identidade fixa da
   coluna inteira, não um destaque pontual. Precisa vir ANTES dos
   .gpd-frete-hl-* abaixo (mesma especificidade — 1 classe .name vs 1 classe
   .gpd-frete-hl-*, empate resolvido por ordem no arquivo): linhas de
   subtotal/TOTAL que JÁ têm destaque de verdade vindo do Excel na coluna A
   (ex.: "Regiões - 3,30%" em amarelo) continuam ganhando por cima disso —
   só as linhas sem destaque nenhum no Excel (regiões/vendedores comuns)
   ficam com esse azul. Repete com "tbody tr:hover" pela mesma razão de
   sempre nessa tabela (regra genérica de hover do .gpd-plano-medidas-table
   tem mais especificidade que "td.name" sozinho e apagaria a cor). */
.gpd-frete-table tbody td.name{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(185,205,229,0.30), rgba(185,205,229,0.09) 60%),
    rgba(18,24,32,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(185,205,229,0.32);
  border-bottom:1px solid rgba(185,205,229,0.32);
}
.gpd-frete-table tbody tr:hover td.name{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(185,205,229,0.36), rgba(185,205,229,0.12) 60%),
    rgba(18,24,32,0.72);
}

/* Texto em vermelho nas colunas "Custo KM" (%), "Custo médio por entrega" e
   "Tick médio" — cor de FONTE (não fundo), reproduzindo o print original;
   independente de a célula também ter um fundo de destaque (ver classes
   .gpd-frete-hl-* abaixo, que só mudam o fundo). */
.gpd-frete-table tbody td.gpd-frete-red-text{ color:#E08A8A; }
.gpd-frete-table tbody tr:hover td.gpd-frete-red-text{ color:#EBA3A3; }

/* Destaques de fundo lidos ao vivo do Excel (fill de cada célula) — mesma
   receita "vidro 3D" (gradiente linear, sem componente radial: colunas como
   a de nome/região podem ter texto que ocupa alturas diferentes entre
   linhas, e um radial posicional lê como tom diferente conforme a altura —
   lição já aprendida na Inconformidade, ver comentário lá). */
.gpd-frete-table tbody td.gpd-frete-hl-amarelo{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.34), rgba(242,183,5,0.10) 60%),
    rgba(30,26,15,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.26),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(242,183,5,0.32);
  border-bottom:1px solid rgba(242,183,5,0.32);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-amarelo{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.40), rgba(242,183,5,0.13) 60%),
    rgba(30,26,15,0.72);
}
.gpd-frete-table tbody td.gpd-frete-hl-verde{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(79,174,124,0.34), rgba(79,174,124,0.10) 60%),
    rgba(15,30,22,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.26),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(79,174,124,0.32);
  border-bottom:1px solid rgba(79,174,124,0.32);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-verde{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(79,174,124,0.40), rgba(79,174,124,0.13) 60%),
    rgba(15,30,22,0.72);
}
.gpd-frete-table tbody td.gpd-frete-hl-laranja{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(255,152,0,0.34), rgba(255,152,0,0.10) 60%),
    rgba(32,24,12,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.26),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(255,152,0,0.32);
  border-bottom:1px solid rgba(255,152,0,0.32);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-laranja{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(255,152,0,0.40), rgba(255,152,0,0.13) 60%),
    rgba(32,24,12,0.72);
}
/* Salmão pálido — bem mais claro/dessaturado que o vidro vermelho
   (var(--bad) #E1595A) já usado na coluna Categoria da Inconformidade,
   propositalmente: são cores visualmente distintas na planilha original. */
.gpd-frete-table tbody td.gpd-frete-hl-salmao{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(230,185,184,0.30), rgba(230,185,184,0.09) 60%),
    rgba(32,22,22,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(230,185,184,0.30);
  border-bottom:1px solid rgba(230,185,184,0.30);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-salmao{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(230,185,184,0.36), rgba(230,185,184,0.12) 60%),
    rgba(32,22,22,0.72);
}
.gpd-frete-table tbody td.gpd-frete-hl-azul{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(185,205,229,0.30), rgba(185,205,229,0.09) 60%),
    rgba(18,24,32,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(185,205,229,0.32);
  border-bottom:1px solid rgba(185,205,229,0.32);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-azul{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(185,205,229,0.36), rgba(185,205,229,0.12) 60%),
    rgba(18,24,32,0.72);
}
/* "Total pago pela empresa" das 3 linhas de subtotal/TOTAL — vermelho fixo
   por pedido do usuário (não vem do Excel, ver GPD_FRETE_TOTAL_PAGO_HL_ROWS
   em js/gpd-plano.js), mesmo var(--bad) #E1595A já usado na coluna
   Categoria da Inconformidade. */
.gpd-frete-table tbody td.gpd-frete-hl-vermelho{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.34), rgba(225,89,90,0.10) 60%),
    rgba(32,18,18,0.72);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5);
  border-top:1px solid rgba(225,89,90,0.35);
  border-bottom:1px solid rgba(225,89,90,0.35);
}
.gpd-frete-table tbody tr:hover td.gpd-frete-hl-vermelho{
  background:
    linear-gradient(155deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.045) 100%),
    linear-gradient(180deg, rgba(225,89,90,0.40), rgba(225,89,90,0.13) 60%),
    rgba(32,18,18,0.72);
}

.gpd-plano-medida-cell{ position:relative; }
.gpd-plano-medida-input{
  width:84px;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  padding:7px 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gpd-plano-medida-input:hover{ border-color: rgba(255,255,255,0.26); }
.gpd-plano-medida-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
  background: rgba(255,255,255,0.08);
}
.gpd-plano-medida-input:disabled{ opacity:0.55; }
.gpd-plano-medida-suffix{
  margin-left:4px;
  font-size:12px;
  color:var(--text-faint);
}

/* Objetivo sempre em azul (--steel); Atingido muda entre verde (meta batida,
   Atingido >= Objetivo) e vermelho (ainda aberta) — recalculado ao vivo em
   gpdPlanoRecomputeMedidaRowPct conforme o usuário digita. */
.gpd-plano-medida-input--objetivo{
  border-color: rgba(79,154,192,0.45);
  background: rgba(79,154,192,0.12);
  color: var(--steel);
}
.gpd-plano-medida-input--objetivo:focus{
  border-color: var(--steel);
  box-shadow:0 0 0 3px rgba(79,154,192,0.2);
  background: rgba(79,154,192,0.16);
}
.gpd-plano-medida-input--atingido.is-fechado{
  border-color: rgba(79,174,124,0.5);
  background: rgba(79,174,124,0.14);
  color: var(--good);
}
.gpd-plano-medida-input--atingido.is-fechado:focus{
  border-color: var(--good);
  box-shadow:0 0 0 3px rgba(79,174,124,0.2);
}
.gpd-plano-medida-input--atingido.is-aberto{
  border-color: rgba(225,89,90,0.5);
  background: rgba(225,89,90,0.14);
  color: var(--bad);
}
.gpd-plano-medida-input--atingido.is-aberto:focus{
  border-color: var(--bad);
  box-shadow:0 0 0 3px rgba(225,89,90,0.2);
}

.gpd-plano-medida-input.gpd-plano-medida-saved{
  border-color: rgba(79,174,124,0.7);
  box-shadow:0 0 0 3px rgba(79,174,124,0.18);
  background: rgba(79,174,124,0.12);
}
.gpd-plano-medida-input.gpd-plano-medida-error{
  border-color: rgba(225,89,90,0.75);
  box-shadow:0 0 0 3px rgba(225,89,90,0.16);
}
.gpd-plano-medidas-table .pill{
  font-size:13px;
  padding:4px 11px;
  border-radius:16px;
  font-weight:700;
  white-space:nowrap;
}
/* Coluna "%" dos Negócios não Realizados é estreita (largura fixa da
   colgroup) — o padding padrão de célula (18px cada lado) some com quase
   todo o espaço e o pill ("▲ 15,0%") vazava pra fora da coluna. Reduz o
   padding só nessa célula e encolhe um pouco o pill. */
.gpd-plano-negocios-table td.gpd-plano-negocio-pct-cell{
  padding-left:6px;
  padding-right:6px;
}
.gpd-plano-negocios-table .gpd-plano-negocio-pct-cell .pill{
  font-size:16px;
  font-weight:700;
  padding:6px 10px;
}

/* ---------- Negócios não Realizados (herda o essencial de .gpd-plano-medida-*
   acima; só o que é diferente daqui pra baixo) ---------- */
.gpd-plano-medidas-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.gpd-plano-medidas-title-row .gpd-plano-medidas-title{ margin-bottom:0; }
.gpd-plano-add-row-btn{ margin-top:0; padding:7px 14px; font-size:12.5px; }
/* "+ Adicionar cliente" (Auxiliar de Cobrança) em azul 3D — pedido do
   usuário 14/09/2026: "deixe o card melhor 3D com azul". Só este botão, pelo
   id: .gpd-plano-add-row-btn é compartilhada com "+ Adicionar linha" de
   Medidas/Negócios e "+ Mês", que ficam como estão. Mesmo azul-aço do card
   "m a produzir" e do botão "Rota". Sem backdrop-filter; o :hover repinta a
   cor do texto porque .excel-btn:hover pinta de dourado. */
#gpdCobrancaAddClienteBtn{
  color:#fff;
  font-weight:700;
  letter-spacing:0.03em;
  border:1px solid #1f6690;
  border-radius:999px;
  padding:8px 18px;
  background:linear-gradient(180deg, #5fa8cf 0%, #3a8bb8 48%, #2a7ba8 52%, #1f6690 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -4px 7px -3px rgba(5,30,48,0.55),
    0 2px 3px rgba(0,0,0,0.35),
    0 8px 16px -6px rgba(42,123,168,0.55);
  text-shadow:0 1px 1px rgba(0,0,0,0.35);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
#gpdCobrancaAddClienteBtn:hover{
  color:#fff;
  border-color:#1f6690;
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -4px 7px -3px rgba(5,30,48,0.55),
    0 3px 5px rgba(0,0,0,0.35),
    0 12px 22px -8px rgba(79,154,192,0.7);
}
#gpdCobrancaAddClienteBtn:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(5,30,48,0.5), 0 1px 2px rgba(0,0,0,0.3);
}
/* table-layout:fixed + colgroup (no JS, ver gpdPlanoRenderNegocios) — cada
   coluna tem largura definida no <col>, menos "Negócio", que fica sem width
   de propósito: o navegador reparte automaticamente o espaço que sobra pra
   ela, é como ela "ocupa o resto do card". Isso também resolve a
   instabilidade de width:100% que tínhamos antes: em table-layout:auto a
   coluna podia colapsar; em fixed, a largura já está definida de antemão
   pelo <col>, então width:100% no input sempre resolve de forma confiável. */
.gpd-plano-negocios-table{ min-width:1210px; width:100%; table-layout:fixed; }
.gpd-plano-negocios-table input{ width:100%; box-sizing:border-box; }
.gpd-plano-negocio-input-text{ text-align:left; font-family:'Inter', sans-serif; font-weight:500; font-size:13.5px; }
.gpd-plano-negocio-input-negocio{ text-align:left; font-family:'Inter', sans-serif; font-weight:500; font-size:13.5px; }
.gpd-plano-negocio-input-pedido{ text-align:center; }
/* Letras maiores nos campos da tabela de Negócios, sem tocar em padding/
   largura das colunas (colgroup) — só o tamanho do texto dentro do mesmo
   card. */
.gpd-plano-negocios-table .gpd-plano-medida-input{ font-size:15px; }
.gpd-plano-negocios-table .gpd-plano-negocio-input-text,
.gpd-plano-negocios-table .gpd-plano-negocio-input-negocio{ font-size:15px; }
.gpd-plano-negocios-table .gpd-plano-negocio-money-prefix{ font-size:15px; }
/* "R$" fixo antes do input — não faz parte do valor editado/gravado, só
   visual, pra não atrapalhar o parse do número (Number("R$ 100") é NaN).
   Sempre dentro de .gpd-plano-negocio-money, que vira a "caixa" visível
   (borda/fundo/estados); o <input> em si fica transparente por dentro. */
.gpd-plano-negocio-money{
  display:flex;
  align-items:center;
  gap:4px;
  width:100%;
  box-sizing:border-box;
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:8px;
  padding:7px 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.gpd-plano-negocio-money:has(.gpd-plano-negocio-input-valor:focus){
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
  background: rgba(255,255,255,0.08);
}
.gpd-plano-negocio-money:has(.gpd-plano-medida-saved){
  border-color: rgba(79,174,124,0.7);
  box-shadow:0 0 0 3px rgba(79,174,124,0.18);
  background: rgba(79,174,124,0.12);
}
.gpd-plano-negocio-money:has(.gpd-plano-medida-error){
  border-color: rgba(225,89,90,0.75);
  box-shadow:0 0 0 3px rgba(225,89,90,0.16);
}
/* Só mostra o "R$" quando o campo tem valor de verdade — :placeholder-shown
   é uma pseudo-classe viva (atualiza a cada tecla), diferente do seletor de
   atributo [value], que só reflete o HTML inicial e não acompanha digitação. */
.gpd-plano-negocio-money-prefix{
  display:none;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:700;
  color: var(--text);
  flex-shrink:0;
}
.gpd-plano-negocio-money:not(:has(.gpd-plano-negocio-input-valor:placeholder-shown)) .gpd-plano-negocio-money-prefix{
  display:inline;
}
.gpd-plano-negocio-money .gpd-plano-negocio-input-valor{
  text-align:left;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
  /* flex:1 1 auto derruba a largura FIXA de 84px que .gpd-plano-medida-input
     traz. Só min-width:0 deixava o input encolher, mas nada o fazia CRESCER:
     o card ocupava a célula inteira e o campo por dentro continuava com 84px,
     cortando o fim do número — "R$ 6.988.775,00" virava "R$ 6.988.775," na
     Inadimplência.
     width:100%, não width:auto: em <input>, "auto" cai na largura intrínseca
     do atributo `size` (20 caracteres por padrão, ~170px), e isso entra na
     conta de min-content da COLUNA — as colunas de mês passavam dos 190px, a
     tabela inteira alargava e a coluna de Média era empurrada pra fora da
     tela. Porcentagem não conta pra largura intrínseca, então preenche o card
     sem mexer no tamanho da coluna. */
  flex:1 1 auto;
  width:100%;
  min-width:0;
}

/* Inadimplência: o card acompanha o NÚMERO em vez de esticar até a borda da
   célula (pedido do usuário 2026-09-03). Escopado pelo input daquela aba —
   em Negócios/Frete/Inconformidade o card cheio continua como está.
   field-sizing:content faz o campo medir o próprio conteúdo; o min-width
   segura um alvo clicável decente quando o valor está vazio, e o max-width
   impede que um número absurdo estoure a célula. Fallback pra navegador sem
   field-sizing: largura fixa em ch, dimensionada pelo maior caso real
   ("11.706.098,63" = 13 caracteres). */
.gpd-plano-medida-cell .gpd-plano-negocio-money:has(.gpd-plano-resultado-manual-input){
  display:inline-flex;
  width:auto;
  max-width:100%;
}
.gpd-plano-negocio-money .gpd-plano-resultado-manual-input{
  field-sizing:content;
  width:auto;
  min-width:5ch;
  max-width:100%;
}
@supports not (field-sizing: content){
  .gpd-plano-negocio-money .gpd-plano-resultado-manual-input{ width:13ch; }
}

/* Combo de Concorrente (autocomplete + inclusão livre) — estilo próprio,
   azul, pedido explicitamente pelo usuário como referência (dropdown de
   seleção "estilo formulário"), diferente do resto da paleta dourada/vidro
   do painel. */
.gpd-plano-combo-cell{ position:relative; }
.gpd-plano-combo-input{
  background: rgba(13,23,42,0.9);
  border:1px solid rgba(47,143,255,0.4);
}
.gpd-plano-combo-input:hover{ border-color: rgba(47,143,255,0.6); }
.gpd-plano-combo-input:focus{
  outline:none;
  border-color:#2F8FFF;
  box-shadow:0 0 0 3px rgba(47,143,255,0.22);
  background: rgba(13,23,42,0.96);
}
.gpd-plano-combo-input::placeholder{ color: var(--text-faint); }
.gpd-plano-combo-list{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:20;
  max-height:220px;
  overflow-y:auto;
  list-style:none;
  margin:0;
  padding:4px;
  background: rgba(9,16,30,0.98);
  border:1px solid rgba(47,143,255,0.4);
  border-radius:10px;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.6), 0 0 0 1px rgba(47,143,255,0.1);
}
.gpd-plano-combo-list.hidden{ display:none; }
.gpd-plano-combo-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 6px 9px 12px;
  border-radius:7px;
  cursor:pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.gpd-plano-combo-option-label{
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  font-weight:500;
  color:#D8E4F5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gpd-plano-combo-option:hover .gpd-plano-combo-option-label,
.gpd-plano-combo-option.active .gpd-plano-combo-option-label{ color:#fff; }
.gpd-plano-combo-remove{
  flex-shrink:0;
  width:20px; height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:none;
  background:transparent;
  color: rgba(216,228,245,0.45);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease;
}
.gpd-plano-combo-option:hover .gpd-plano-combo-remove,
.gpd-plano-combo-option.active .gpd-plano-combo-remove{ opacity:1; }
.gpd-plano-combo-remove:hover{
  background: rgba(225,89,90,0.85);
  color:#fff;
}
.gpd-plano-combo-option:hover,
.gpd-plano-combo-option.active{ background:#2F8FFF; color:#fff; }
.gpd-plano-combo-empty{
  padding:10px 12px;
  font-size:12px;
  font-style:italic;
  color: var(--text-faint);
  white-space:normal;
}
.gpd-plano-negocio-row-local td{ background: rgba(242,183,5,0.04); }
.gpd-plano-negocio-row-local .gpd-plano-medida-idx{ background: rgba(255,255,255,0.08); color: var(--text-dim); }

/* Rodapé de totais (Total não Realizado / Total de pedidos fechados /
   Participação / Positivações / % Perdido / R$ Médio) — tudo fórmula da
   planilha, só leitura; mesmo vocabulário de vidro dos tiles de KPI do
   topo, só compacto. */
.gpd-plano-negocios-summary{ margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.gpd-plano-negocios-summary.hidden{ display:none; }
.gpd-plano-negocios-summary-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.gpd-plano-negocios-summary-box{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 60%),
    rgba(26,31,38,0.4);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:12px 16px;
}
.gpd-plano-negocios-summary-box--accent{
  background: linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.05));
  border-color: rgba(242,183,5,0.32);
}
.gpd-plano-negocios-summary-box--good{
  background: linear-gradient(180deg, rgba(79,174,124,0.18), rgba(79,174,124,0.05));
  border-color: rgba(79,174,124,0.32);
}
.gpd-plano-negocios-summary-box--good .gpd-plano-negocios-summary-val{ color: var(--good); }
.gpd-plano-negocios-summary-box--warn{
  background: linear-gradient(180deg, rgba(225,148,60,0.2), rgba(225,148,60,0.06));
  border-color: rgba(225,148,60,0.35);
}
.gpd-plano-negocios-summary-box--warn .gpd-plano-negocios-summary-val{ color: var(--warn); }
.gpd-plano-negocios-summary-box--steel{
  background: linear-gradient(180deg, rgba(79,154,192,0.18), rgba(79,154,192,0.05));
  border-color: rgba(79,154,192,0.32);
}
.gpd-plano-negocios-summary-box--steel .gpd-plano-negocios-summary-val{ color: var(--steel); }
.gpd-plano-negocios-summary-box--yellow{
  background: linear-gradient(180deg, rgba(230,210,20,0.24), rgba(230,210,20,0.07));
  border-color: rgba(230,210,20,0.4);
}
.gpd-plano-negocios-summary-label{
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  font-weight:700;
  margin-bottom:7px;
}
.gpd-plano-negocios-summary-val{ font-family:'JetBrains Mono', monospace; font-size:19px; font-weight:800; color:#FFFFFF; }
.gpd-plano-negocios-summary-box--accent .gpd-plano-negocios-summary-val{ color: var(--accent); }
.gpd-plano-negocios-summary-val--bad{ color: var(--bad); }

/* Título/subtítulo do card "Clientes & Vendas" maiores que o padrão
   .card h3/.card-sub do resto do site (14px/12px) — escopado só a essa
   aba pra não mexer nos outros cards do painel. */
.gpd-clientes-card h3{ font-size:19px; }
/* Busca de cliente no canto de cima à direita do card (02/10/2026). Fechada
   é a lupa dourada do js/busca-recolhe.js; aberta, campo no estilo das buscas
   do GPD. Só computador: no celular a lista tem a busca dela. */
.gpd-clientes-card{ position:relative; }
.gpd-clientes-busca{
  position:absolute;
  top:18px;
  right:22px;
  z-index:3;
  width:300px;
  height:40px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  background-color:var(--panel-2);
  color:var(--text);
  padding:0 14px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  outline:none;
}
.gpd-clientes-busca:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.12);
}
.gpd-clientes-busca::placeholder{ color:var(--text-faint); }
.gpd-clientes-busca::-webkit-search-cancel-button{ cursor:pointer; }
#gpdSalesTable tr.gpd-clientes-row--oculta{ display:none; }
#gpdSalesTable tr.gpd-clientes-busca-vazia td{
  text-align:center;
  padding:22px 12px;
  color:var(--text-faint);
  font-size:13.5px;
}
@media (max-width:640px){
  .gpd-clientes-busca{ display:none; }
}
.gpd-clientes-card .card-sub{ font-size:13px; margin-bottom:4px; }

/* Linha 1 do toolbar: resumo (nº clientes/total/% constantes) à esquerda,
   mês + botões de ação à direita. Em telas largas cabe numa linha só; em
   telas de tablet (~900px, sobretudo depois do botão "+ Fora da carteira"
   que somou mais um item nessa fileira) o conjunto de botões estoura a
   largura e quebra pra uma 2ª linha — justify-content:flex-end garante que
   ESSA 2ª linha também fique colada na borda direita do card (mesmo lado
   pro qual os cards de estatística logo abaixo, .gpd-clientes-stat-cards,
   já quebram), em vez de cair pra esquerda e destoar da linha de cards de
   baixo (era isso que lia como "bagunçado" — duas fileiras quebradas
   alinhadas em bordas opostas). Não afeta a 1ª linha quando tudo cabe numa
   linha só (não sobra espaço livre pra mover). */
.gpd-clientes-stat-actions-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
/* Linha 2: 3 cards de resumo (mesmo vocabulário de vidro compacto dos boxes
   de Negócios acima), sempre sobre UM mês (não o ano inteiro) — o select da
   linha 1 escolhe qual, começando no mês corrente real. Largura cheia própria
   em vez de espremidos atrás dos botões. */
.gpd-clientes-stat-month-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B93A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center,
    var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 36px 11px 16px;
  font-family:'JetBrains Mono', monospace;
  font-size:15px;
  cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 2px rgba(0,0,0,0.25);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Buscar visitas/Gerar relatório/Importar Faturamento — mesma linha do
   select acima, então crescem juntos (base .excel-btn é usada em vários
   lugares do site, então o aumento fica escopado só a essa linha). */
.gpd-clientes-stat-actions-row .excel-btn{
  margin-top:0;
  font-size:13px;
  padding:9px 14px;
  border-radius:12px;
  white-space:nowrap;
}
/* Card "Visitas" 10% maior que os outros botões da linha — só ele, os
   demais (Relatório PDF, Faturamento) ficam no tamanho padrão. */
#gpdVisitasOpenBtn{
  font-size:14.3px;
  padding:9.9px 15.4px;
  border-radius:13.2px;
}
#gpdVisitasOpenBtn .pill{
  font-size:15.4px;
  padding:3.3px 11px;
}
#gpdVisitasOpenBtn .pill.bad.pulse{
  font-size:17.6px;
  font-weight:800;
  padding:3.3px 13.2px;
}
.gpd-clientes-stat-month-select:hover{ border-color: rgba(242,183,5,0.4); }
.gpd-clientes-stat-month-select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
/* Linha de baixo (pedido do usuário 2026-08-28): mês + Visitas + Localização
   (.gpd-clientes-bottom-controls) à esquerda, cards de estatística
   (.gpd-clientes-stat-cards) à direita, mesma linha — space-between empurra
   os dois grupos pras bordas opostas quando cabe tudo numa linha só, e cada
   grupo quebra pra linha própria quando não cabe (mesmo padrão já usado em
   .gpd-toolbar acima, resumo + trio de botões). */
.gpd-clientes-bottom-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.gpd-clientes-bottom-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.gpd-clientes-bottom-controls .excel-btn{
  margin-top:0;
  font-size:13px;
  padding:9px 14px;
  border-radius:12px;
  white-space:nowrap;
}
.gpd-clientes-stat-cards{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
/* Cards de estatistica em vidro (10/09/2026): cada um mantem a SUA cor
   (pedido do usuario) e ganha a cupula especular no topo — o brilho vem por
   CIMA do tingimento, nao no lugar dele. O blur saiu junto: o fundo atras
   deles e cor solida do painel, entao ele nao mudava nada visualmente e
   custava composicao (mesmo motivo ja documentado no .auth-submit). */
.gpd-clientes-stat-card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 60%),
    rgba(26,31,38,0.4);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:8px 14px;
  min-width:150px;
}
.gpd-clientes-stat-card::before{
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:2px;
  height:42%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  pointer-events:none;
}
/* o texto fica ACIMA do brilho — sem isto o ::before come o conteudo, que e
   o bug que ja voltou tres vezes no botao dourado deste projeto. */
.gpd-clientes-stat-label,
.gpd-clientes-stat-val{ position:relative; z-index:1; }
.gpd-clientes-stat-card--neutral{
  background: linear-gradient(180deg, rgba(139,147,160,0.16), rgba(139,147,160,0.04));
  border-color: rgba(139,147,160,0.28);
}
.gpd-clientes-stat-card--neutral .gpd-clientes-stat-val{ color: var(--text); }
.gpd-clientes-stat-card--good{ box-shadow:inset 0 1px 0 rgba(190,255,220,0.22), 0 8px 18px -14px rgba(79,174,124,0.8); }
.gpd-clientes-stat-card--bad{ box-shadow:inset 0 1px 0 rgba(255,200,200,0.22), 0 8px 18px -14px rgba(225,89,90,0.8); }
.gpd-clientes-stat-card--steel{ box-shadow:inset 0 1px 0 rgba(196,232,247,0.22), 0 8px 18px -14px rgba(79,154,192,0.8); }
.gpd-clientes-stat-card--gold{ box-shadow:inset 0 1px 0 rgba(255,236,170,0.24), 0 8px 18px -14px rgba(242,183,5,0.8); }
.gpd-clientes-stat-card--good{
  background: linear-gradient(180deg, rgba(79,174,124,0.18), rgba(79,174,124,0.05));
  border-color: rgba(79,174,124,0.32);
}
.gpd-clientes-stat-card--good .gpd-clientes-stat-val{ color: var(--good); }
.gpd-clientes-stat-card--bad{
  background: linear-gradient(180deg, rgba(225,89,90,0.18), rgba(225,89,90,0.05));
  border-color: rgba(225,89,90,0.32);
}
.gpd-clientes-stat-card--bad .gpd-clientes-stat-val{ color: var(--bad); }
.gpd-clientes-stat-card--steel{
  background: linear-gradient(180deg, rgba(79,154,192,0.18), rgba(79,154,192,0.05));
  border-color: rgba(79,154,192,0.32);
}
.gpd-clientes-stat-card--steel .gpd-clientes-stat-val{ color: var(--steel); }
.gpd-clientes-stat-card--gold{
  background: linear-gradient(180deg, rgba(242,183,5,0.18), rgba(242,183,5,0.05));
  border-color: rgba(242,183,5,0.32);
}
.gpd-clientes-stat-card--gold .gpd-clientes-stat-val{ color: var(--accent); }
.gpd-clientes-stat-label{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-dim);
  font-weight:700;
  margin-bottom:4px;
  white-space:nowrap;
}
.gpd-clientes-stat-val{ font-family:'JetBrains Mono', monospace; font-size:17px; font-weight:800; color:#FFFFFF; }

/* Modal "Importar Faturamento (PDF)" — escolher arquivo + mês, prévia com
   os mesmos cards compactos de Clientes & Vendas, tabela de conferência. */
.gpd-abc-import-modal-card{ width:min(760px, 94vw); }
/* Import geral do ABC (15/09/2026): seletor de tipo + prévia por vendedor.
   Modal é claro (pf-modal-card), por isso cores escuras sobre branco. */
.gpd-abc-modo{ display:inline-flex; gap:4px; padding:4px; margin:4px 0 12px; border-radius:999px; background:#eef0f3; border:1px solid #e2e5ea; flex-wrap:wrap; }
.gpd-abc-modo-btn{ border:0; background:transparent; color:#5a6270; font:600 13px 'Inter', sans-serif; padding:7px 14px; border-radius:999px; cursor:pointer; }
.gpd-abc-modo-btn:hover{ color:#151515; }
.gpd-abc-modo-btn[aria-pressed="true"]{ background:#fff; color:#151515; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.gpd-abc-geral-nota{ font-size:12px; color:#5a6270; margin:8px 0 10px; line-height:1.45; }
.gpd-abc-geral-lista{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; }
.gpd-abc-geral-grupo{ border:1px solid #e2e5ea; border-radius:10px; background:#fff; }
.gpd-abc-geral-grupo > summary{ display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; list-style:none; }
.gpd-abc-geral-grupo > summary::-webkit-details-marker{ display:none; }
.gpd-abc-geral-grupo > summary::before{ content:'▸'; color:#8b93a0; transition:transform .12s; }
.gpd-abc-geral-grupo[open] > summary::before{ transform:rotate(90deg); }
.gpd-abc-geral-vend{ font-weight:700; color:#151515; flex:1; }
.gpd-abc-geral-qtd{ font-size:12px; color:#5a6270; }
.gpd-abc-geral-total{ font-family:'JetBrains Mono', monospace; font-weight:700; color:#151515; min-width:120px; text-align:right; }
.gpd-abc-geral-grupo--sem .gpd-abc-geral-vend{ color:#9aa0a8; font-weight:600; }
.gpd-abc-geral-grupo .gpd-abc-import-table-wrap{ margin:0 10px 10px; }
.gpd-abc-geral-secao{ margin-top:12px; border:1px solid rgba(225,149,60,0.45); background:rgba(225,149,60,0.08); border-radius:10px; padding:10px 12px; }
.gpd-abc-geral-secao-tit{ font-weight:700; color:#8a5a14; margin-bottom:6px; font-size:13px; }
.gpd-abc-geral-conflito{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 0; flex-wrap:wrap; font-size:13px; color:#151515; }
.gpd-abc-import-upload{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0;
}
.gpd-abc-import-filename{
  font-size:12.5px;
  color:var(--text-dim);
  font-family:'JetBrains Mono', monospace;
}
.gpd-abc-import-preview{ margin-top:6px; }
.gpd-abc-import-preview.hidden{ display:none; }
.gpd-abc-import-summary{
  display:flex;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.gpd-abc-import-table-wrap{
  max-height:320px;
  overflow-y:auto;
  border-radius:12px;
}
.gpd-abc-import-table-wrap table{ width:100%; }
/* .gpd-plano-medidas-table (reaproveitada aqui pela grade/linhas-card) foi
   desenhada pra ficar sobre o fundo escuro do app — texto claro
   (color:var(--text)) quase invisível em cima do .pf-modal-card branco
   deste modal. Sobrescreve só aqui pra virar texto escuro legível, sem
   mexer na tabela original usada no resto do painel. */
.gpd-abc-import-table-wrap thead th{
  color:#5a6270;
  background: rgba(20,24,30,0.05);
  border-bottom-color: rgba(20,24,30,0.1);
}
.gpd-abc-import-table-wrap tbody td{
  color:#1c1f24;
  background: rgba(20,24,30,0.03);
  border-top-color: rgba(20,24,30,0.08);
  border-bottom-color: rgba(20,24,30,0.08);
}
.gpd-abc-import-table-wrap tbody td:first-child{ border-left-color: rgba(20,24,30,0.08); }
.gpd-abc-import-table-wrap tbody td:last-child{ border-right-color: rgba(20,24,30,0.08); }
.gpd-abc-import-table-wrap tbody tr:hover td{
  background: rgba(20,24,30,0.07);
  border-color: rgba(20,24,30,0.16);
}
.gpd-abc-import-table-wrap td.mono{ color:#5a6270; }
.gpd-abc-import-table-wrap .gpd-abc-row--unmatched td{ color:#9aa0a8; }
.gpd-abc-unmatched-tag{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(20,24,30,0.08);
  color:#9aa0a8;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:700;
  vertical-align:middle;
}
.gpd-abc-via-nome{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(242,183,5,0.14);
  border:1px solid rgba(242,183,5,0.4);
  color:#8a6a00;
  font-size:10px;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  vertical-align:middle;
}
.gpd-plano-negocios-summary-sub{ font-family:'JetBrains Mono', monospace; font-size:13.5px; font-weight:600; color:var(--text); margin-top:3px; }
/* R$ do Total não Realizado: 25% maior e em vermelho (pedido 18/09/2026). */
/* 18/09/2026 de novo ("MAIOR"): 17px -> 24px, acima do número de cima (19px);
   20px no celular pra "R$ 5.745.628,46" caber na caixa. */
#gpdNaoRealizadoValorVal{ font-size:24px; font-weight:800; color:var(--bad); line-height:1.15; margin-top:4px; }
@media (max-width:640px){ #gpdNaoRealizadoValorVal{ font-size:20px; } }
/* "Total de pedidos fechados" (quantidade) editável — mesma tipografia do
   número só-leitura, sem parecer um <input> até o hover/focus. */
.gpd-plano-negocios-summary-val-input{
  display:block;
  width:64px;
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  padding:1px 4px;
  margin:0 0 0 -5px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gpd-plano-negocios-summary-val-input:hover{ border-color: rgba(255,255,255,0.16); }
.gpd-plano-negocios-summary-val-input:focus{
  outline:none;
  border-color:var(--accent);
  background: rgba(255,255,255,0.06);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
.gpd-plano-negocios-summary-val-input.gpd-plano-medida-saved{
  border-color: rgba(79,174,124,0.7);
  background: rgba(79,174,124,0.14);
}
.gpd-plano-negocios-summary-val-input.gpd-plano-medida-error{
  border-color: rgba(225,89,90,0.75);
  background: rgba(225,89,90,0.12);
}

/* ---------- Clientes & Vendas (bloco "Clientes" da planilha, por vendedor)
   60+ linhas × 16 colunas — denso demais pro visual "card flutuante" (gaps
   de 11px, padding 17px) do .gpd-plano-medidas-table padrão, então essa
   tabela específica troca por border-collapse normal e padding bem menor.
   table-layout:fixed + colgroup (gerado no JS) pra caber as 12 colunas de
   mês sem esmagar; 1ª coluna (nome do cliente) fica sticky pra continuar
   legível rolando pelos meses. ---------- */
.gpd-clientes-table{
  table-layout:fixed;
  border-collapse:separate;
  /* Espaco SO no eixo Y (ver "A LINHA E A PECA" logo abaixo). No eixo X ele
     abriria vao ENTRE as colunas, e a coluna fixa do cliente (sticky) deixaria
     ver o numero passando por tras dela no scroll horizontal. */
  border-spacing:0 4px;
  min-width:1400px;
}
.gpd-clientes-table thead th,
.gpd-clientes-table tbody td{
  padding:9px 10px;
  font-size:13.5px;
}
/* Rótulo do cabeçalho não parte no meio da palavra. A regra base
   (.gpd-plano-medidas-table thead th) liga word-break:break-word pra rótulo
   longo não vazar por cima da coluna vizinha — faz sentido lá, onde os
   rótulos são frases ("Negócio não Realizado"). Aqui são todos curtos e
   indivisíveis, e o break-word cortava "MÉDIA/26" em "MÉDIA/2" + "6".
   Com nowrap, quem garante que cabe é a largura da coluna no colgroup
   (js/gpd-plano.js) — se um rótulo novo entrar aqui, conferir os dois. */
.gpd-clientes-table thead th{
  white-space:nowrap;
  word-break:normal;
  overflow-wrap:normal;
}
/* ---- Faixa do cabecalho (pedido do usuario, 10/09/2026: "deixar esta linha
   em outra cor pra destacar os meses") ----
   ESCURA E FRIA, nao clara: as duas cores com significado nesta tabela ja
   estao ocupadas — dourado e VISITA registrada, azul e o MES CORRENTE (a
   coluna do SET, com o chip "atual"). Pintar o cabecalho de qualquer uma
   delas brigaria justamente com o destaque que elas existem pra dar. Entao a
   separacao vem por SUPERFICIE, nao por matiz: a faixa desce pra um grafite
   frio bem mais escuro que as linhas, e o mes sobe em contraste em cima
   dela. De quebra, o azul do SET continua sendo a coisa mais clara do
   cabecalho inteiro — que e exatamente o que ele precisa ser.
   O fio de aco embaixo e o mesmo idioma da linha TOTAL (--steel), que ja
   quer dizer "estrutura, nao dado". */
.gpd-clientes-table thead th{
  background: linear-gradient(180deg, #12363A, #0C2427);
  color:#BFE3E0;
  font-weight:700;
  /* 12px, nao os 13.5px do corpo: o cabecalho e rotulo, nao dado, e o
     letter-spacing abaixo engorda a palavra — em 13.5px "MEDIA/26" voltaria
     a nao caber nos 104px da coluna (e agora, com nowrap, nao quebra: vaza). */
  font-size:12px;
  letter-spacing:0.09em;
  border-bottom:0;
  box-shadow: inset 0 -2px 0 rgba(90,197,190,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.gpd-clientes-table tbody td.num{ font-weight:600; color: var(--text); }
/* A LINHA E A PECA (10/09/2026, prototipo aprovado pelo usuario).
   Antes cada celula tinha borda embaixo e a grade fechava a tabela inteira:
   16 tracos por linha, centenas na tela, competindo com o numero. Agora o
   espaco vertical do border-spacing separa as linhas, cada uma com seu
   proprio fundo e as pontas arredondadas — o olho segue o cliente da esquerda
   ate o Resultado sem a grade no caminho.
   O fundo e de proposito quase invisivel (2,2%): ele so precisa dizer onde a
   linha comeca e termina; qualquer coisa mais forte volta a disputar com o
   valor, que e o unico dado que importa aqui. */
.gpd-clientes-table tbody td{
  border-radius:0;
  background: rgba(255,255,255,0.022);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.gpd-clientes-table tbody td:first-child{ border-radius:12px 0 0 12px; }
.gpd-clientes-table tbody td:last-child{ border-radius:0 12px 12px 0; }
/* Hover na linha do cliente = destaque "vidro" (gradiente translúcido),
   igual família visual do .glass-hit/.glass-miss do Mix. TOTAL/% têm hover
   próprio logo abaixo (clareiam a cor azul/amarela que já têm) em vez de
   herdar esse overlay neutro — por isso toda linha reage ao passar o
   mouse, não só as de cliente. Sem backdrop-filter/blur aqui de propósito:
   numa linha com 7+ células borrando ao mesmo tempo (62 linhas na tabela),
   o navegador engasgava e borrava o dígito num frame da transição — o
   gradiente + inset shadow sozinho já dá o efeito sem esse glitch. */
.gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover td{
  background: linear-gradient(165deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.1) 55%, rgba(255,255,255,0.04) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover .gpd-clientes-sticky-col{
  background: rgba(255,255,255,0.18);
}
.gpd-clientes-sticky-col{
  position:sticky;
  left:0;
  z-index:1;
  isolation:isolate;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background: rgba(20,24,30,0.97);
  display:flex;
  align-items:center;
  gap:10px;
}
/* A celula presa do cabecalho: mesmo gradiente das outras, e 100% opaco (sem
   alpha) — ela fica por cima das colunas de mes que passam por tras no
   scroll, e qualquer transparencia deixa o numero vazar.

   display:table-cell, NAO block (corrigido em 10/09/2026): a regra base de
   .gpd-clientes-sticky-col poe display:flex (pro avatar do cliente ficar do
   lado do nome, no corpo da tabela), e o cabecalho anulava isso com block.
   Só que um bloco dentro de <tr> nao estica ate a altura da linha — e a linha
   do cabecalho e mais alta que o proprio texto por causa do chip "atual"
   embaixo do mes corrente. Resultado: o fio de baixo da celula "Cliente"
   ficava alguns px acima do fio dos meses, com uma faixa escura sobrando
   embaixo. table-cell devolve o comportamento normal de celula, que estica
   sozinha. */
thead .gpd-clientes-sticky-col{
  background: linear-gradient(180deg, #12363A, #0C2427);
  display: table-cell;
  vertical-align: middle;
}
/* Avatar circular com as iniciais do cliente + nome/código empilhados —
   estilo inspirado numa lista de agenda (avatar + nome em destaque, dado
   secundário embaixo) em vez da antiga coluna "Código" separada. */
.gpd-clientes-avatar{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background: var(--steel-soft);
  border:1px solid rgba(79,154,192,0.35);
  color: var(--steel);
  font-family:'JetBrains Mono';
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gpd-clientes-name-wrap{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.gpd-clientes-name{
  font-weight:700;
  color: var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gpd-clientes-code-sub{
  font-size:11.5px;
  color: var(--text-faint);
}
/* Vendedor do cliente nas abas de região (15/09/2026, posição e acabamento
   ajustados em 16/09 a pedido do usuário: "pode ser maior, 3D vidro no padrão
   de sempre, no lado direito no final da célula"): bolinha com a inicial no
   fim da célula Cliente — margin-left:auto alinha todas na mesma coluna,
   independente do tamanho do nome — e legenda de chips acima da tabela.
   Vidro 3D é a MESMA receita do resto do painel (gradiente 160deg + brilho
   inset em cima + sombra inset embaixo + sombras externas), só recolorida
   por data-vend-cor (ordem alfabética do nome na aba, ver corDoVendedor em
   js/gpd-plano.js). Sem backdrop-filter: esse bug já pegou este projeto. */
.gpd-clientes-vend-badge{
  flex:none;
  margin-left:auto;
  width:26px;
  height:26px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'JetBrains Mono';
  font-size:13px;
  font-weight:700;
  line-height:1;
  color:#11161A;
  background:linear-gradient(160deg, #cfe0ea 0%, #8FA3AE 55%, #5a6d78 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -5px 7px -3px rgba(10,30,45,0.35),
    0 2px 4px rgba(0,0,0,0.35),
    0 6px 12px -4px rgba(0,0,0,0.35);
}
.gpd-clientes-vend-badge[data-vend-cor="1"]{
  background:linear-gradient(160deg, #b7e2f7 0%, #4F9AC0 55%, #2b607d 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -5px 7px -3px rgba(8,50,70,0.4), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(79,154,192,0.45);
}
.gpd-clientes-vend-badge[data-vend-cor="2"]{
  background:linear-gradient(160deg, #ffe066 0%, #D9A441 55%, #a06f13 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.65), inset 0 -5px 7px -3px rgba(120,80,0,0.35), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(217,164,65,0.45);
}
.gpd-clientes-vend-badge[data-vend-cor="3"]{
  background:linear-gradient(160deg, #a9edc6 0%, #4FAE7C 55%, #1f6b45 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -5px 7px -3px rgba(9,60,32,0.4), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(79,174,124,0.45);
}
.gpd-clientes-vend-badge[data-vend-cor="4"]{
  background:linear-gradient(160deg, #e3caf3 0%, #B98CD1 55%, #6f4a88 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -5px 7px -3px rgba(50,20,70,0.4), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(185,140,209,0.45);
}
.gpd-clientes-vend-badge[data-vend-cor="5"]{
  background:linear-gradient(160deg, #ffc9ab 0%, #E08A63 55%, #99502f 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -5px 7px -3px rgba(80,30,10,0.4), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(224,138,99,0.45);
}
.gpd-clientes-vend-badge[data-vend-cor="6"]{
  background:linear-gradient(160deg, #c6efF2 0%, #7FBFC4 55%, #427e83 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), inset 0 -5px 7px -3px rgba(10,60,65,0.4), 0 2px 4px rgba(0,0,0,0.35), 0 6px 12px -4px rgba(127,191,196,0.45);
}
/* Na legenda a bolinha é só ilustrativa: sem o margin-left:auto da tabela,
   senão empurraria o nome pro outro lado do chip. */
.gpd-clientes-vend-chip .gpd-clientes-vend-badge{ margin-left:0; }
/* Card do celular com bolinha do vendedor (so nas abas de regiao): ganha uma
   4a coluna, senao o 4o filho cairia numa segunda linha do grid e o card
   cresceria. Classe propria em vez de mexer no grid base: em aba sem
   vendedor o card fica exatamente como ja estava (inclusive o gap).
   Duas classes de propósito (16/09/2026): com uma só, a regra base
   .gpd-clientes-mobile-row, mais abaixo no arquivo, vencia e o botão
   Visitar caía pra fora do card, à esquerda. */
.gpd-clientes-mobile-row.gpd-clientes-mobile-row--vend{ column-gap:10px; grid-template-columns: 26px minmax(0, 1fr) auto auto; }
.gpd-clientes-vendedores{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
}
.gpd-clientes-vend-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 14px 5px 6px;
  border-radius:999px;
  background: var(--panel-2);
  border:1px solid rgba(255,255,255,0.10);
  font-size:12.5px;
  font-weight:700;
  color: var(--text);
}
/* .gpd-clientes-table prefixado em tudo abaixo de propósito: a base
   .gpd-plano-medidas-table tbody td (classe+tbody+td = 3 seletores) é mais
   específica que .gpd-clientes-total-row td sozinho (classe+td = 2
   seletores) e vencia essas cores por especificidade, mesmo vindo depois no
   arquivo — o fundo ficava sempre o cinza/branco padrão da tabela, nunca o
   azul/amarelo. Prefixar com .gpd-clientes-table (2 classes + td) resolve. */
.gpd-clientes-table .gpd-clientes-total-row td{
  background: linear-gradient(180deg, rgba(79,154,192,0.22), rgba(79,154,192,0.1));
  color:#FFFFFF;
  font-weight:700;
  border-top:2px solid rgba(79,154,192,0.4);
}
.gpd-clientes-table .gpd-clientes-total-row .gpd-clientes-sticky-col{ background: rgba(31,58,79,0.98); }
/* Hover do TOTAL clareia a própria cor azul em vez do overlay neutro das
   linhas de cliente (que fica quase invisível em cima desse fundo já
   colorido). */
.gpd-clientes-table .gpd-clientes-total-row:hover td{
  background: linear-gradient(180deg, rgba(79,154,192,0.36), rgba(79,154,192,0.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.gpd-clientes-table .gpd-clientes-total-row:hover .gpd-clientes-sticky-col{ background: rgba(41,74,100,0.98); }
.gpd-clientes-pct-row td{
  font-size:12.5px;
}
/* Mesmo padrão de cor do Excel original: "% Sobre o Realizado" fica na
   mesma família azul do TOTAL (só mais clara/discreta), "% s/ mês anterior"
   fica em amarelo — não são as duas a mesma cor "genérica de rodapé". */
.gpd-clientes-table .gpd-clientes-pct-row--blue td{
  background: rgba(79,154,192,0.1);
  color: var(--steel);
}
.gpd-clientes-table .gpd-clientes-pct-row--blue .gpd-clientes-sticky-col{ background: rgba(24,40,54,0.97); color: var(--steel); }
.gpd-clientes-table .gpd-clientes-pct-row--blue:hover td{
  background: rgba(79,154,192,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.gpd-clientes-table .gpd-clientes-pct-row--blue:hover .gpd-clientes-sticky-col{ background: rgba(33,55,72,0.98); }
.gpd-clientes-table .gpd-clientes-pct-row--yellow td{
  background: rgba(242,183,5,0.1);
  color: var(--accent);
}
.gpd-clientes-table .gpd-clientes-pct-row--yellow .gpd-clientes-sticky-col{ background: rgba(38,32,12,0.97); color: var(--accent); }
.gpd-clientes-table .gpd-clientes-pct-row--yellow:hover td{
  background: rgba(242,183,5,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.gpd-clientes-table .gpd-clientes-pct-row--yellow:hover .gpd-clientes-sticky-col{ background: rgba(51,43,15,0.98); }
/* Abas de região (Carazinho, Erechim, Lagoa, Marau, Panambi, Soledade):
   bloco de Clientes vem agrupado por cidade na planilha — linha de Total
   da cidade em âmbar/laranja (--accent, mesma cor já usada em
   .gpd-clientes-pct-row--yellow e nas linhas Meta/Positivação da tabela do
   Plano) pra não ser confundida com o TOTAL geral (azul) nem com as linhas
   de cliente comuns. Só leitura: sem gpd-clientes-add-cell, é soma de
   fórmula.
   Cor 100% opaca (não rgba) nas DUAS regras (célula normal e coluna presa)
   de propósito, com o MESMO valor literal nas duas: o cartão ".card" por
   trás da tabela é um "vidro" translúcido com backdrop-filter (blur+
   saturate) e um brilho radial no canto — uma cor com alpha por cima disso
   nunca fica igual numa coluna sticky opaca (ela não pode deixar esse vidro
   borrado aparecer atrás, senão o conteúdo vaza ao rolar a tabela). Usando
   o mesmo valor sólido nos dois lugares, os dois ficam idênticos por
   definição, em vez de tentar aproximar uma cor sólida que pareça igual a
   um efeito de vidro/blur — o que nunca bate exatamente. */
.gpd-clientes-table .gpd-clientes-city-row td,
.gpd-clientes-table .gpd-clientes-city-row .gpd-clientes-sticky-col{
  background: linear-gradient(180deg, rgb(107,82,18), rgb(66,52,15));
  color:#FFFFFF;
  font-weight:700;
}
.gpd-clientes-table .gpd-clientes-city-row td{
  border-top:2px solid rgba(242,183,5,0.45);
}
.gpd-clientes-table .gpd-clientes-city-row .gpd-clientes-sticky-col{ color: var(--accent); }
.gpd-clientes-table .gpd-clientes-city-row:hover td,
.gpd-clientes-table .gpd-clientes-city-row:hover .gpd-clientes-sticky-col{
  background: linear-gradient(180deg, rgb(133,103,25), rgb(84,66,20));
}
.gpd-clientes-table .gpd-clientes-city-row:hover td{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
/* Linha "Cidade" (rótulo original da planilha — vendas do mês não
   atribuídas a um cliente específico dessa cidade): itálico + texto
   apagado deixa claro visualmente que não é nome de cliente de verdade,
   mas ainda dentro do grupo da cidade (levemente recuado).
   MESMO problema/mesma solução do comentário da linha Total de cidade logo
   acima: td e coluna presa (.gpd-clientes-sticky-col) precisam do MESMO
   valor sólido de fundo. Antes, td usava rgba(255,255,255,0.03) (quase
   invisível, deixa o "vidro" do card por trás aparecer) e a coluna presa
   usava rgba(20,24,30,0.97) (opaca, bem mais escura) — como as duas cores
   não tinham nenhuma relação entre si, sobrava uma costura vertical bem
   visível exatamente na borda da coluna presa, cortando a linha "Cidade" ao
   meio (era essa costura, não a indentação, que fazia a tabela parecer
   "fora de simetria" comparada às linhas de cliente/Total ao redor, que já
   usam a mesma cor nos dois lados). rgb(60,64,70) é o tom realmente
   renderizado por trás do 0.03 antigo (conferido pixel a pixel) — mantém a
   aparência quase igual à de antes, só que idêntica dos dois lados. */
.gpd-clientes-table .gpd-clientes-city-unassigned-row td,
.gpd-clientes-table .gpd-clientes-city-unassigned-row .gpd-clientes-sticky-col{
  background: rgb(60,64,70);
  color: var(--text);
}
.gpd-clientes-table .gpd-clientes-city-unassigned-row td{
  font-style: italic;
  font-size:12.5px;
}
.gpd-clientes-table .gpd-clientes-city-unassigned-row .gpd-clientes-sticky-col{
  font-weight:600;
  padding-left:18px;
}
.gpd-clientes-table .gpd-clientes-city-unassigned-row:hover td,
.gpd-clientes-table .gpd-clientes-city-unassigned-row:hover .gpd-clientes-sticky-col{
  background: rgb(74,79,86);
}
/* Resultado (última coluna) é % de variação e pode ficar bem grande quando
   a Média/25 do cliente é pequena (ex.: "439.600,0%") — a coluna já foi
   alargada (colgroup, gpd-plano.js) para caber isso confortavelmente, mas
   o pill continua com max-width/ellipsis como rede de segurança pra nunca
   vazar da coluna nem quebrar linha num caso ainda mais extremo. */
.gpd-clientes-table .pill{
  font-size:12px;
  padding:3px 8px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}

/* Celular: a tabela de 16 colunas com scroll horizontal não serve pra
   lançar visita rápido no bolso — abaixo de 640px troca pra uma lista só
   de cliente, cada linha tocável abrindo o mesmo modal de venda/visita
   (gpdClienteVendaModal) já com o mês corrente real pré-selecionado (ver
   gpdPlanoRealCurrentMonthIndex em gpd-plano.js), sem precisar navegar
   até a coluna do mês certo. Lista escondida em telas maiores porque a
   tabela cheia (com todos os meses) continua sendo a visão de trabalho lá. */
.gpd-clientes-mobile-list{ display:none; flex-direction:column; gap:8px; padding-top:2px; }
/* Busca por nome/código só aparece no mobile, acima da lista de visitas —
   filtro client-side sobre as linhas já renderizadas (ver
   gpdPlanoFilterClientesMobileList em gpd-plano.js), sem pedir dado novo ao
   servidor. Fica FORA do innerHTML de #gpdClientesMobileList de propósito:
   essa lista é reconstruída inteira a cada troca de mês/atualização de
   dados, e um <input> dentro dela perderia foco/valor digitado a cada
   re-render. */
.gpd-clientes-mobile-search{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  padding:9px 12px;
  margin:2px 0 8px;
}
.gpd-clientes-mobile-search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
.gpd-clientes-mobile-search-icon{
  flex:none;
  width:16px;
  height:16px;
  color:var(--text-dim);
}
.gpd-clientes-mobile-search-input{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  font-family:'Inter', sans-serif;
  outline:none;
}
.gpd-clientes-mobile-search-input::placeholder{ color:var(--text-faint); }
/* Especificidade dupla (duas classes) de propósito: .gpd-clientes-mobile-row
   base (mais abaixo neste arquivo) também define display:flex com a mesma
   especificidade de uma classe só — sem isso, a ordem no arquivo faz o
   display:flex da linha base vencer o display:none do filtro, mesmo com o
   termo buscado não batendo (bug real, pego no teste visual em mobile). */
.gpd-clientes-mobile-row.gpd-clientes-mobile-row--hidden{ display:none; }
.gpd-clientes-mobile-search-empty{
  padding:14px 4px;
  text-align:center;
  font-size:12.5px;
  color:var(--text-dim);
}
@media (max-width:640px){
  /* No celular o vendedor só precisa lançar a visita — o bloco inteiro
     "Plano de Ação" (KPIs, gráfico, faixa Mês, Objetivo/Responsável,
     tabelas) some. Desde 11/09/2026 (pedido do usuário, print com setas:
     "na versão mobile das visitas deixe de fora estes") somem também
     Relatório PDF, Faturamento (PDF) e os cards de estatística (Clientes
     constantes, Compra >R$10k, Sem compra, Ativados, Reativado). Ficam:
     Visita fora da carteira, mês, Visitas, Localização, busca e a lista.
     A tela também abre já rolada nessa parte — ver
     gpdPlanoAbrirNasVisitasNoCelular em js/gpd-plano.js. */
  .gpd-plano-card{ display:none; }
  #gpdClientesReportBtn,
  #gpdAbcImportOpenBtn,
  #gpdClientesStatCards{ display:none; }
  .gpd-frete-vendor-card{ display:none; }
  #gpdSalesTableWrap{ display:none; }
  .gpd-clientes-card .card-sub{ display:none; }
  .gpd-toolbar-summary{ display:none; }
  .gpd-clientes-mobile-list{ display:flex; }
  .gpd-clientes-mobile-search{ display:flex; }
  /* Modal de venda/visita aberto pela lista mobile é só pra confirmar
     visita (ver botão "Confirmar visita" em gpd-plano.js) — o campo de
     valor lançado não faz sentido nesse fluxo. */
  #gpdClienteVendaValorField{ display:none; }

  .gpd-clientes-stat-actions-row{
    width:100%;
  }
  .gpd-clientes-stat-actions-row .excel-btn{
    flex:1 1 calc(50% - 4px);
    text-align:center;
  }
  .gpd-clientes-bottom-row{
    width:100%;
  }
  .gpd-clientes-bottom-controls{
    width:100%;
  }
  .gpd-clientes-bottom-controls .gpd-clientes-stat-month-select{
    flex:1 1 100%;
  }
  .gpd-clientes-bottom-controls .excel-btn{
    flex:1 1 calc(50% - 4px);
    text-align:center;
  }
  /* "Visitas 19 19 · Meta 50" não cabe numa linha só nesse espaço de 50% —
     deixa quebrar em vez de estourar a borda do botão (white-space:nowrap
     da regra base é pensado pros outros botões da linha, mais curtos). */
  #gpdVisitasOpenBtn{
    white-space:normal;
    line-height:1.5;
  }
  /* Em celular real (~360-414px) o botão fica com ~50% da largura da linha
     (~150-185px) — os pills 10% maiores (regra base, linha ~2016-2024)
     continuam largos/altos demais pra esse espaço e a pill "24" (total)
     acaba encostando/sobrepondo a linha de baixo ("5 · Meta 90"), porque um
     inline-block mais alto que o line-height não ganha respiro extra entre
     linhas quebradas. Encolhe os pills só aqui (perto do tamanho padrão
     usado no resto do site) pra "Visitas [total]" caber numa linha e
     "[ativas] · Meta [meta]" na de baixo, e soma margem vertical pra
     garantir respiro mesmo se algum nome/número for maior que o previsto. */
  #gpdVisitasOpenBtn .pill{
    font-size:12px;
    padding:2px 8px;
    margin:2px 2px;
  }
  #gpdVisitasOpenBtn .pill.bad.pulse{
    font-size:13px;
    font-weight:800;
    padding:2px 9px;
  }
  /* "5 · Meta 90" precisa ficar sempre na mesma linha (pedido do usuário
     2026-08-27, print mostrando "90" caindo pra uma 3ª linha sozinho) —
     agrupa esse trecho (ver <span class="gpd-visitas-meta-group"> em
     gpd.html) num bloco que não quebra internamente. "Visitas [total]"
     continua podendo ficar em linha própria (não faz parte do grupo), já
     que isso nunca incomodou. Aperta ainda mais as margens/tamanho desse
     grupo especificamente pra garantir que cabe na largura do botão
     (~150-180px reais) sem estourar a borda. */
  #gpdVisitasOpenBtn .gpd-visitas-meta-group{
    display:inline-block;
    white-space:nowrap;
    font-size:11px;
  }
  #gpdVisitasOpenBtn .gpd-visitas-meta-group .pill{
    margin:2px 1px;
    padding:1px 6px;
  }
  .gpd-clientes-stat-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    justify-content:stretch;
  }
  /* min-width:0 evita que o grid alargue a coluna pra caber o rótulo
     inteiro numa linha só (comportamento padrão de grid item) — sem isso
     o texto de um card vazava por cima do vizinho (nowrap sem quebra).
     white-space:normal deixa o rótulo quebrar em 2 linhas dentro do
     próprio card em vez de vazar. */
  .gpd-clientes-stat-card{ min-width:0; overflow:hidden; }
  .gpd-clientes-stat-label{ white-space:normal; }

  /* Admin (rafael/valmir/luciano) continua podendo trocar de
     consultor/região no celular — só o seletor, sem os botões de
     planilha (Selecionar/Baixar/Substituir), que são fluxo de desktop. */
  html.gpd-is-admin .gpd-plano-card{ display:block; }
  html.gpd-is-admin .gpd-plano-card > h3,
  html.gpd-is-admin .gpd-plano-card > .card-sub,
  html.gpd-is-admin #gpdPlanoReplaceStatus,
  html.gpd-is-admin #gpdPlanoStatus,
  html.gpd-is-admin #gpdPlanoContent{
    display:none;
  }
  html.gpd-is-admin .gpd-plano-toolbar{
    display:flex;
    margin-bottom:0;
  }
  /* "Selecionar/Baixar/Substituir planilha" agora moraram pro header
     (.gpd-header-actions, fora de .gpd-plano-card), então já não dependem
     do card estar escondido pra sumir no celular — precisam de regra
     própria aqui. Sem scope de .gpd-is-admin de propósito: são fluxo de
     desktop pra qualquer sessão que chegue a vê-los (inclusive o caso raro
     de vendedor sem gpdSheet cadastrado, que também enxergava "Selecionar
     planilha…" antes — ver gpdPlanoRestrictedSheet em gpd-plano.js). */
  #gpdPlanoPickFileBtn,
  #gpdPlanoDownloadBtn,
  #gpdPlanoReplaceBtn{
    display:none;
  }

  /* Card de Frete do vendedor (ver .gpd-frete-vendor-tiles acima) — em
     celular real (320-414px) o "repeat(auto-fit, minmax(120px, 1fr))" da
     regra base cabia 2 por linha, mas 2 colunas nesse espaço sobram ~120px
     pro valor: pouco pra "R$ 13.955,44"/"R$ 10.707,00" (JetBrains Mono,
     nowrap) — cortava o final do número (print do usuário 2026-08-28: "R$
     10.707,0" faltando o zero). O rótulo mais longo ("Custo Operacional
     Frete") também sofria: quebrava em 3 linhas onde os vizinhos da mesma
     fileira ficavam em 1-2, esticando a fileira inteira do grid. 1 coluna
     só aqui resolve os dois de uma vez (largura de sobra pro valor mais
     longo plausível, sem depender de adivinhar quantos cabem) — escopo só
     em .gpd-frete-vendor-tiles, não mexe no .kpi-strip/.gpd-plano-kpis
     genérico usado nas outras abas do Plano de Ação. */
  .gpd-frete-vendor-tiles{
    grid-template-columns: 1fr;
  }
}
.gpd-clientes-mobile-header{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color: var(--text-faint);
  padding:4px 2px 6px;
}
/* Cada cliente vira um cartão próprio (mesma família visual "vidro" dos
   .gpd-clientes-stat-card) em vez de linha com fio embaixo — separação
   clara pra tocar sem errar o alvo, com a cor da borda já entregando o
   status (vermelho = falta visitar, verde = visitado) sem precisar ler o
   badge. */
.gpd-clientes-mobile-row{
  /* Grid de 3 colunas (avatar | cliente | acao) em vez de flex com wrap: no
     flex, nome comprido empurrava o botao "Visitar" pra uma segunda linha e
     cada card ganhava uma altura diferente — e o pior, o nome AINDA saia
     cortado com reticencias. Aqui a coluna do meio e a unica elastica
     (minmax(0,1fr)), entao o botao fica sempre ancorado na direita, na mesma
     posicao em todos os cards, e o nome usa duas linhas quando precisa. */
  display:grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items:center;
  column-gap:12px;
  padding:12px 14px;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 60%),
    rgba(26,31,38,0.4);
  cursor:pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.gpd-clientes-mobile-row:active{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 60%),
    rgba(26,31,38,0.4);
}
.gpd-clientes-mobile-row--pending{ border-color: rgba(225,89,90,0.3); }
/* Cliente já visitado: o CARD inteiro fica verde (pedido do usuário,
   11/09/2026: "deixe em verde o card quando visitado") — antes só a borda
   mudava e o verde vivia no selo "Visitado", fácil de não ver rolando a
   lista. Mesmo verde do selo/flash (rgba(79,174,124)).
   A regra de :active precisa da sua própria versão verde: `:active` pesa
   uma pseudo-classe a mais e, sem isso, o card voltava ao cinza no toque.
   Continua perdendo pro amarelo de "ausente" (que vem depois, com
   !important) e pro flash de confirmação, de propósito. */
.gpd-clientes-mobile-row--visitado{
  border-color: rgba(79,174,124,0.45);
  background:
    linear-gradient(160deg, rgba(79,174,124,0.20), rgba(79,174,124,0.07) 60%),
    rgba(26,31,38,0.4);
}
.gpd-clientes-mobile-row--visitado:active{
  background:
    linear-gradient(160deg, rgba(79,174,124,0.28), rgba(79,174,124,0.11) 60%),
    rgba(26,31,38,0.4);
}
.gpd-clientes-mobile-row .gpd-clientes-name-wrap{ min-width:0; gap:3px; }
/* O nome quebra em ate duas linhas em vez de virar reticencias: em celular,
   "FERTAL COMERCIO DE PROD M..." nao identifica cliente nenhum. overflow-wrap
   cobre o codigo/razao social que vem numa palavra so, sem espaco pra quebrar.
   Isso substitui o antigo min-width:120px + flex-wrap, que existia so pra
   impedir que o selo "ausente" ao lado do "Visitar" espremesse o nome ate
   zero — hoje o selo nao disputa mais essa linha, ele desceu pra linha do
   codigo (ver .gpd-clientes-mobile-meta). */
.gpd-clientes-mobile-row .gpd-clientes-name{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Codigo + selo "ausente" dividem a segunda linha do bloco do cliente. */
.gpd-clientes-mobile-meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.gpd-clientes-mobile-row .gpd-clientes-code-sub{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gpd-clientes-mobile-row .gpd-clientes-mobile-visita-badge{ justify-self:end; }
.gpd-clientes-mobile-visita-badge{
  flex:none;
  font-family:'JetBrains Mono';
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  background: var(--good-soft);
  color: var(--good);
}
.gpd-clientes-mobile-visita-badge--pending{
  background: rgba(225,89,90,0.18);
  color: var(--bad);
  animation: gpd-pill-pulse 1.3s ease-in-out infinite;
}

/* Célula de valor mensal por cliente é clicável ("incluir venda" — soma em
   cima do que já está lançado, sem apagar). Sublinhado pontilhado avisa que
   dá pra clicar sem precisar de um ícone extra ocupando espaço na coluna
   estreita. */
/* Sem o sublinhado tracejado desde 10/09/2026: ele era a pista de "da pra
   clicar aqui" enquanto a tabela tinha grade fechada, e virou ruido quando a
   linha passou a ser uma peca so. Quem avisa que a celula e clicavel agora e
   o cursor + o anel dourado do hover (logo abaixo); no celular, o toque. */
.gpd-clientes-add-cell{
  cursor:pointer;
  transition: background-color 0.15s ease;
}
/* Hover da celula: anel dourado que "abre" pra fora da celula (efeito
   pedido pelo usuario em 2026-09-01, no espirito do btn16 —
   ":hover::before { inset:-7px }" — o anel cresce 7px PRA FORA da celula,
   escolha do usuario entre as duas leituras possiveis). Feito com outline +
   outline-offset em
   vez de um ::before absoluto de proposito: assim NAO precisa de
   position:relative em toda celula da tabela, que e justamente o que
   bagunca a composicao desta tela (ver a nota do botao dourado ilegivel em
   #gpdClienteVendaSubmitBtn). O outline tambem nao ocupa espaco no layout,
   entao a tabela nao "pula" ao passar o mouse. */
.gpd-clientes-add-cell{
  outline:2px solid transparent;
  outline-offset:0;
  transition: background-color .15s ease, outline-color .18s ease, outline-offset .18s ease;
}
.gpd-clientes-add-cell:hover{
  background: rgba(242,183,5,0.14);
  color: var(--accent);
  outline-color: rgba(242,183,5,0.75);
  outline-offset:7px;
}
.gpd-clientes-add-cell.gpd-clientes-visita:hover{
  outline-color: rgba(242,183,5,0.95);
}
@media (prefers-reduced-motion: reduce){
  .gpd-clientes-add-cell{ transition:none; }
}
/* Mês fechado pro vendedor (só o mês corrente real fica clicável) — sem
   sublinhado pontilhado nem cursor de "clicável", só um pouco apagada pra
   não competir visualmente com a coluna liberada. Admin nunca recebe essa
   classe (continua vendo gpd-clientes-add-cell em todo mês). */
.gpd-clientes-locked-cell{
  cursor: not-allowed;
  opacity: 0.62;
}
/* Célula marcada como "visita" no modal de Incluir venda — mesmo cartão de
   vidro amarelo já usado no resto do painel (.gpd-plano-mes-pill/.kpi:
   gradiente translúcido + blur + borda interna), não um bloco sólido opaco,
   ocupando a célula inteira em vez de ficar restrito a uma pill pequena.
   Aplica tanto na célula clicável quanto na travada (mês antigo com visita
   já registrada continua mostrando o destaque, só perde o clique). */
.gpd-clientes-visita{
  background: linear-gradient(180deg, rgba(242,183,5,0.32), rgba(242,183,5,0.1));
  color: var(--accent);
  font-weight:800;
}
/* Visita registrada (10/09/2026, escolha do usuario no prototipo): a celula
   amarela continua sendo a marca principal, e ganhou mais DUAS — faixa na
   lateral e ponto no canto. Redundancia de proposito: visita e o comprovante
   de campo do vendedor, e e melhor sobrar sinal do que passar batido. A
   faixa e o que se acha varrendo a coluna do mes; o ponto confirma de perto.

   SEM backdrop-filter, ao contrario do que estava aqui ate 10/09/2026: o
   blur rodava em CADA celula com visita (dezenas por tela), e e o mesmo
   efeito que o hover desta tabela ja tinha abandonado por engasgar o
   navegador (ver a nota do hover mais acima) e que deixou o botao dourado
   ilegivel varias vezes neste projeto. O gradiente + inset shadow entrega o
   mesmo amarelo sem custo nenhum de composicao. */
.gpd-clientes-add-cell.gpd-clientes-visita{
  position:relative;
  background: linear-gradient(180deg, rgba(242,183,5,0.32), rgba(242,183,5,0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(242,183,5,0.5);
  color: var(--accent) !important;
  font-weight:800;
}
/* faixa na lateral esquerda da celula */
.gpd-clientes-add-cell.gpd-clientes-visita::before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:3px;
  width:3px;
  border-radius:0 3px 3px 0;
  background: var(--accent);
  box-shadow:0 0 8px rgba(242,183,5,0.55);
  pointer-events:none;
}
/* ponto no canto — creme claro pra ler por cima do proprio amarelo. NAO
   aparece quando a celula tem o selo de contagem (mais de uma visita no
   mes): ali quem ocupa o canto e o numero, que diz mais que o ponto. */
.gpd-clientes-add-cell.gpd-clientes-visita:not(.gpd-clientes-visita-multi)::after{
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#FFF1C4;
  box-shadow:0 0 6px rgba(255,225,140,0.9);
  pointer-events:none;
}
/* Escala de brilho pelo tamanho da venda (10/09/2026). Ate aqui R$ 111 e
   R$ 32.983 chegavam iguais ao olho — todo numero com o mesmo peso. O nivel
   vem do JS (data-venda, 1 a 4, ver gpdPlanoNivelVenda) e so muda cor e
   peso da fonte: nada de fundo novo, nada de elemento novo, zero custo.
   Celula com visita fica de fora — ali o dourado ja e o recado. */
.gpd-clientes-table tbody td.num[data-venda]:not(.gpd-clientes-visita){
  transition: color 0.15s ease;
}
.gpd-clientes-table tbody td.num[data-venda="1"]:not(.gpd-clientes-visita){ color:#79818D; font-weight:500; }
.gpd-clientes-table tbody td.num[data-venda="2"]:not(.gpd-clientes-visita){ color:#A2ABB7; font-weight:500; }
.gpd-clientes-table tbody td.num[data-venda="3"]:not(.gpd-clientes-visita){ color:#D5DCE4; font-weight:600; }
.gpd-clientes-table tbody td.num[data-venda="4"]:not(.gpd-clientes-visita){ color:#FFFFFF; font-weight:700; }
/* Mes sem venda: o travessao recua. Numa aba onde 39 dos 62 clientes nao
   compraram no mes, ele e o que mais aparece na tela — apagando-o, os meses
   com venda saltam sozinhos, sem precisar de negrito em nada. */
.gpd-clientes-table tbody td.num[data-venda="0"]{ color:#454C56; }
/* ...menos na coluna do mês ATUAL: no começo do mês quase toda venda ali
   ainda está abaixo de 1.500 (nível 1), e a coluna que o vendedor mais olha
   ficava inteira apagada sobre o azul ("texto está bem apagado", 11/09/2026).
   Mesma escala, degraus mais claros: maior continua mais claro. O
   travessão (nível 0) segue recuado. Peso (0,5,2), acima da escala. */
.gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="1"]:not(.gpd-clientes-visita){ color:#C2CEDD; font-weight:600; }
.gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="2"]:not(.gpd-clientes-visita){ color:#D9E3EF; font-weight:600; }
.gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="3"]:not(.gpd-clientes-visita){ color:#EEF3F9; font-weight:700; }

/* Selo com a quantidade quando o mesmo cliente foi visitado mais de uma vez
   no mes (pedido do usuario, 2026-09-01) — circulo dourado no canto de cima
   da celula, no estilo do contador de notificacao. A celula ja e
   position:relative por causa do destaque de edicao; o selo nao intercepta
   clique (a celula inteira continua abrindo o modal). */
/* Abre espaco pro selo no canto: sem isso o numero (alinhado a direita)
   passava POR BAIXO dele. position:relative fica SO aqui (nas poucas
   celulas que realmente tem selo) e nao em toda .gpd-clientes-add-cell:
   encher a tabela de elementos posicionados mexe na composicao da pagina
   inteira, e esta e a tela onde o botao dourado do modal ja ficou ilegivel
   varias vezes por causa de composicao/blur. */
.gpd-clientes-visita-multi{
  position:relative;
  padding-right:24px !important;
}
.gpd-clientes-visita-count{
  position:absolute;
  top:1px;
  right:2px;
  min-width:15px;
  height:15px;
  padding:0 3px;
  border-radius:999px;
  background:linear-gradient(180deg, #ffd75e 0%, #f2b705 55%, #b8860b 100%);
  color:#2a1e00;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:9.5px;
  font-weight:800;
  line-height:15px;
  text-align:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 3px rgba(0,0,0,0.45);
  pointer-events:none;
}
.gpd-clientes-add-cell.gpd-clientes-visita:hover{
  background: linear-gradient(180deg, rgba(242,183,5,0.42), rgba(242,183,5,0.16)) !important;
  color: var(--accent) !important;
}
/* Célula com o modal de Incluir venda aberto nela agora — destaque verde
   temporário só enquanto o modal está aberto (pedido do usuário 2026-08-26:
   deixar claro qual célula está sendo editada); some sozinho ao fechar o
   modal (ver closeModal em gpd-plano.js), volta pro visual normal (ou pro
   amarelo de visita, se for o caso). Vence a cor de visita enquanto ativa. */
.gpd-clientes-add-cell.gpd-clientes-cell-active{
  background: linear-gradient(180deg, rgba(79,174,124,0.34), rgba(79,174,124,0.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(79,174,124,0.55);
  color: var(--good) !important;
}

/* ---- Coluna do mês corrente (pedido do usuário, 2026-09-09) ----
   "Que fique em destaque o mês corrente para não confundir na hora do
   lançamento." A coluna inteira sobe, no mesmo idioma de vidro 3D já usado
   no resto do GPD, e o cabeçalho ganha um chip "atual" — sem ele a cor
   sozinha exige que a pessoa saiba o que aquele azul significa.

   AZUL, nunca dourado: nesta tabela o dourado JÁ quer dizer visita
   registrada (.gpd-clientes-visita logo acima). Reusar o tom aqui criaria
   exatamente a confusão que o destaque veio resolver — por isso o mês usa
   uma cor fria, que convive com o dourado na mesma célula (cliente com
   visita lançada dentro do mês corrente) sem virar sopa.

   Qual coluna é "a atual" vem da data do sistema em gpd-plano.js
   (gpdPlanoRealCurrentMonthIndex), não do último mês com venda: em outubro
   o destaque anda sozinho. Sem backdrop-filter aqui, pelo mesmo motivo
   documentado no hover da tabela — 62 linhas borrando ao mesmo tempo faz o
   dígito piscar no meio da transição. */
/* A tabela do "Auxiliar de Cobranca" entrou nestes MESMOS seletores em
   2026-09-10 ("utilize o mesmo padrao da tabela de vendas") — a alternativa
   era um segundo azul, que sairia do lugar na primeira vez que este fosse
   ajustado. La as celulas de mes tem <input> por dentro; o input e
   translucido (rgba .05), entao o realce da coluna aparece por tras dele. */
.gpd-clientes-table thead th.gpd-clientes-col-atual,
.gpd-cobranca-table thead th.gpd-clientes-col-atual{
  color:#DCEBFF;
  background: linear-gradient(180deg, rgba(95,168,255,0.42), rgba(95,168,255,0.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 1px 0 0 rgba(95,168,255,0.7),
    inset -1px 0 0 rgba(95,168,255,0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gpd-clientes-table tbody td.gpd-clientes-col-atual,
.gpd-cobranca-table tbody td.gpd-clientes-col-atual{
  background: linear-gradient(180deg, rgba(95,168,255,0.16), rgba(95,168,255,0.05));
  box-shadow:
    inset 1px 0 0 rgba(95,168,255,0.5),
    inset -1px 0 0 rgba(95,168,255,0.5);
}
.gpd-clientes-table tbody tr:last-child td.gpd-clientes-col-atual,
.gpd-cobranca-table tbody tr:last-child td.gpd-clientes-col-atual{
  box-shadow:
    inset 1px 0 0 rgba(95,168,255,0.5),
    inset -1px 0 0 rgba(95,168,255,0.5),
    inset 0 -1px 0 rgba(95,168,255,0.5);
}
/* Visita dentro do mês corrente: o dourado continua mandando na célula (é o
   dado mais específico), o azul fica só nas laterais marcando a coluna. */
.gpd-clientes-table tbody td.gpd-clientes-visita.gpd-clientes-col-atual{
  background: linear-gradient(180deg, rgba(242,183,5,0.32), rgba(242,183,5,0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 0 0 1px rgba(242,183,5,0.5),
    inset 1px 0 0 rgba(95,168,255,0.5),
    inset -1px 0 0 rgba(95,168,255,0.5);
}
.gpd-clientes-col-atual-chip{
  /* Bloco próprio, não inline: antes ele ficava do lado de "SET" e só caía
     pra linha de baixo porque não cabia — quebra de linha por acidente. Desde
     que o cabeçalho virou nowrap (ver .gpd-clientes-table thead th) esse
     acidente não acontece mais, e como bloco ele fica embaixo de propósito,
     com a largura da própria pílula. */
  display:block;
  width:max-content;
  margin:3px auto 0;
  padding:1px 5px;
  border-radius:999px;
  background:#5FA8FF;
  color:#0B1017;
  font-family:'Inter', system-ui, sans-serif;
  font-size:9px;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  vertical-align:1px;
}
/* Enquanto o verde de "acabei de lancar" esta na celula, o anel do hover
   acompanha a cor — passar o mouse ali no meio dos 2s nao pode devolver o
   dourado e confundir a leitura. */
.gpd-clientes-add-cell.gpd-clientes-cell-active:hover{
  outline-color: rgba(79,174,124,0.85);
}

/* Mesmo "acabei de lancar" da tabela, na linha da lista do celular. */
.gpd-clientes-mobile-row--flash{
  background: linear-gradient(180deg, rgba(79,174,124,0.34), rgba(79,174,124,0.1)) !important;
  box-shadow: inset 0 0 0 1px rgba(79,174,124,0.55);
}

/* ---------- Aba "RESUMO" (pedido do usuário 2026-08-28: "vamos abrir a aba
   Resumo, esta fica por último" + "no gráfico use muito 3D vidro Apple,
   coisa bonita") — scorecard geral do GPD (Metas avaliadas/Desempenho
   Atingido/Resultado) + gauge tipo velocímetro (Ruim/Regular/Bom/Ótimo),
   ver gpdPlanoRenderResumo em js/gpd-plano.js. Mesma receita "vidro 3D" já
   usada dezenas de vezes acima (.gpd-frete-table tbody tr.gpd-frete-row-total
   td, .gpd-clientes-stat-card, etc): gradiente translúcido + blur + borda
   interna clara + sombra externa suave, cor de destaque por --chip-rgb
   (custom property setada inline por segmento/faixa, ver JS). */
.gpd-resumo-title-band{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text);
  text-align:center;
  margin-bottom:18px;
  text-shadow:0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.4);
}
.gpd-resumo-tiles{
  display:grid;
  grid-template-columns:repeat(3, minmax(160px, 1fr));
  gap:14px;
  margin-bottom:22px;
}
.gpd-resumo-tile{
  position:relative;
  border-radius:18px;
  padding:16px 18px;
  text-align:center;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(var(--chip-rgb,139,147,160),0.34), rgba(var(--chip-rgb,139,147,160),0.10) 60%),
    rgba(24,27,32,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.24),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.2);
  border:1px solid rgba(var(--chip-rgb,139,147,160),0.34);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gpd-resumo-tile:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.3),
    inset 0 -8px 14px -8px rgba(0,0,0,0.5),
    0 8px 18px rgba(0,0,0,0.28);
}
.gpd-resumo-tile--neutro{ --chip-rgb:139,147,160; }
.gpd-resumo-tile--steel{ --chip-rgb:79,154,192; }
.gpd-resumo-tile-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  margin-bottom:8px;
  font-weight:600;
}
.gpd-resumo-tile-val{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:26px;
  color:var(--text);
}

/* Card do gauge: mesmo "vidro" dos tiles acima, mas mais fundo/espaçoso pra
   dar profundidade ao velocímetro (canvas + agulha desenhados em JS). */
.gpd-resumo-gauge-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:28px 24px 24px;
  border-radius:22px;
  background:
    linear-gradient(155deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.015) 45%, rgba(255,255,255,0.02) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.14), rgba(242,183,5,0.03) 60%),
    rgba(18,20,25,0.78);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.16),
    inset 0 -10px 20px -12px rgba(0,0,0,0.6),
    0 12px 30px -10px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.08);
}
/* Gauge maior (pedido do usuário 2026-08-28, 2 rodadas: primeiro +30%,
   depois "continua pequeno, mais uns 40%") — base era 213px, mesmo tamanho
   do gauge "Meta Mês" (ver comentário em gpdPlanoRenderResumoGauge,
   js/gpd-plano.js); 213 -> 277 (+30%) -> 388px (+40% sobre 277) só pro
   Resumo, sem tocar no "Meta Mês" original. Sombra/posição do centro/
   tipografia interna e ponteiro/pivô (js) escalam junto (mesma proporção)
   pra continuar com a mesma cara, só maior — não é só esticar o círculo e
   deixar o texto pequeno demais dentro dele. */
/* 213 -> 277 -> 388 -> 466 (+20%) -> 513px (+10%, pedido do usuário
   2026-08-28: "pode aumentar mais 10% o tamanho do gráfico") — sombra
   abaixo escalada na mesma proporção (top 269->296, height 50->55) pra
   continuar alinhada com a base do arco maior. */
.gpd-resumo-gauge-canvas-wrap{
  position:relative;
  width:513px;
  /* 15/10/2026 ("melhore a aparência, está horrível"): o canvas é 513x513,
     mas o meio-arco só ocupa a faixa de 128px a 405px dele — sobrava ~130px
     vazio em cima e embaixo. O canvas sobe 104px (margin-top abaixo) e a
     caixa corta no tamanho do arco + a etiqueta da faixa embaixo. O pino do
     ponteiro fica em y=279 desta caixa. */
  height:372px;
}
/* Sombra de "profundidade" projetada sob a base do arco — mesmo truque do
   gauge "Meta Mês" em css/styles.css (.gauge-canvas-wrap::before). */
.gpd-resumo-gauge-canvas-wrap::before{
  content:"";
  position:absolute;
  left:50%; top:192px; /* 296 - 104 do canvas que subiu */
  width:64%; height:55px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 72%);
  filter:blur(2px);
  z-index:0;
}
.gpd-resumo-gauge-canvas-wrap canvas{
  position:relative; z-index:1;
  margin-top:-104px;
  width:513px !important; height:513px !important;
  filter: drop-shadow(0 5px 8px rgba(6,9,22,0.55)) drop-shadow(0 0 16px rgba(242,183,5,0.22)) drop-shadow(0 -1px 0 rgba(255,255,255,0.12));
}
/* Número dentro do arco, ACIMA do pino, e a etiqueta (BOM/RUIM...) abaixo
   da base do arco (15/10/2026: antes os dois ficavam empilhados no centro e
   o pino + a agulha cobriam a etiqueta). Posições fixas porque o arco
   também é fixo (513px). */
.gpd-resumo-gauge-center{
  position:absolute; inset:0;
  text-align:center; pointer-events:none; z-index:2;
}
.gpd-resumo-gauge-center .gpd-resumo-gauge-value{
  position:absolute; left:0; right:0; top:172px;
  line-height:1;
}
.gpd-resumo-gauge-center .gpd-resumo-gauge-tag{
  position:absolute; left:50%; top:316px;
  translate:-50% 0; /* translate e não transform: o pulso usa transform */
  margin-top:0;
  line-height:1.3;
}
.gpd-resumo-faixa-cor{ color:var(--faixa-cor); }
.gpd-resumo-gauge-value{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:64px; /* 58px -> 64px, mesma proporção +10% do gauge */
  text-shadow:0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.45);
}
.gpd-resumo-gauge-tag{
  margin-top:5px; /* 4px -> 5px, +20% (pedido do usuário 2026-08-28: "aumente o tamanho dos dois 20%") */
  font-size:31px; /* 26px -> 31px, +20% */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:2px 12px; /* 10px -> 12px, +20% */
  border-radius:999px;
  color:#fff;
  background: rgba(var(--chip-rgb,139,147,160),0.28);
  border:1px solid rgba(var(--chip-rgb,139,147,160),0.5);
}
/* Pulsa quando a faixa é "Bom" (pedido do usuário 2026-08-28: "quando bom
   deixe pulsante") — usa a mesma --chip-rgb já setada inline pra cor da
   faixa (ver gpdPlanoRenderResumo), então o brilho acompanha a cor certa
   sem precisar de uma cor fixa aqui. */
@keyframes gpdResumoTagPulse{
  0%, 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(var(--chip-rgb,139,147,160),0.55); }
  50%{ transform:scale(1.08); box-shadow:0 0 0 12px rgba(var(--chip-rgb,139,147,160),0); }
}
.gpd-resumo-gauge-tag--pulse{
  animation: gpdResumoTagPulse 1.6s ease-in-out infinite;
}

/* Legenda das 4 faixas (F8:F11 na planilha) — chip "pill" em vidro 3D, mesmo
   espírito de .info-chip-3d (css/styles.css), adaptado ao tema escuro do
   GPD (fundo translúcido escuro + borda/texto na cor da faixa, em vez do
   chip claro do painel principal). */
.gpd-resumo-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
.gpd-resumo-legend-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 13px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  background:
    linear-gradient(155deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(255,255,255,0.03) 100%),
    linear-gradient(180deg, rgba(var(--chip-rgb),0.30), rgba(var(--chip-rgb),0.08) 60%),
    rgba(20,22,26,0.7);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -6px 10px -6px rgba(0,0,0,0.5);
  border:1px solid rgba(var(--chip-rgb),0.4);
}
.gpd-resumo-legend-dot{
  width:9px; height:9px;
  border-radius:999px;
  background: rgb(var(--chip-rgb));
  box-shadow: 0 0 6px rgba(var(--chip-rgb),0.8), inset 0 1px 0 rgba(255,255,255,0.5);
  flex-shrink:0;
}
@media (max-width:640px){
  .gpd-resumo-tiles{ grid-template-columns:1fr; }
}
/* Resumo no TEMA CLARO (15/10/2026, print do usuário: "melhore a aparência,
   está horrível"). Tudo acima tem fundo escuro fixo (rgba(18..24,...)), feito
   quando o GPD só tinha o escuro: no claro o texto (var(--text) escuro)
   ficava escuro sobre escuro e a legenda sumia. Aqui: cartões brancos com a
   cor da faixa só no topo e na borda, sem backdrop-filter (regra do tema
   claro), e a cor da faixa no tom "ink" (mais fechado) pra ler no branco. */
body.gpd-tema-claro .gpd-resumo-title-band{ color:#2B2A26; text-shadow:none; }
body.gpd-tema-claro .gpd-resumo-tile{
  background:
    linear-gradient(180deg, rgba(var(--chip-rgb,139,147,160),0.16), rgba(var(--chip-rgb,139,147,160),0.03) 70%),
    #FFFFFF;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(var(--chip-rgb,139,147,160),0.40);
  box-shadow:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(20,30,50,0.06), 0 10px 24px -14px rgba(20,30,50,0.30);
}
body.gpd-tema-claro .gpd-resumo-tile:hover{
  box-shadow:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(20,30,50,0.06), 0 16px 30px -14px rgba(20,30,50,0.36);
}
body.gpd-tema-claro .gpd-resumo-tile-label{ color:#4A4944; }
body.gpd-tema-claro .gpd-resumo-faixa-cor{ color:var(--faixa-tinta, var(--faixa-cor)); }
body.gpd-tema-claro .gpd-resumo-gauge-card{
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(242,183,5,0.08), rgba(242,183,5,0) 65%),
    linear-gradient(180deg, #FFFFFF, #F5F6F8);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(20,30,50,0.06), 0 18px 40px -22px rgba(20,30,50,0.38);
}
/* A sombra elíptica do escuro cai atrás do número; no branco vira mancha. */
body.gpd-tema-claro .gpd-resumo-gauge-canvas-wrap::before{ display:none; }
body.gpd-tema-claro .gpd-resumo-gauge-canvas-wrap canvas{
  filter: drop-shadow(0 6px 10px rgba(20,30,50,0.20)) drop-shadow(0 -1px 0 rgba(255,255,255,0.7));
}
body.gpd-tema-claro .gpd-resumo-gauge-value{ text-shadow:0 1px 0 rgba(255,255,255,0.9); }
body.gpd-tema-claro .gpd-resumo-gauge-tag{
  color:#FFFFFF;
  background:var(--faixa-tinta, rgb(var(--chip-rgb)));
  border-color:transparent;
  text-shadow:0 1px 1px rgba(0,0,0,0.25);
}
body.gpd-tema-claro .gpd-resumo-legend-chip{
  color:#2B2A26;
  background:
    linear-gradient(180deg, rgba(var(--chip-rgb),0.14), rgba(var(--chip-rgb),0.04)),
    #FFFFFF;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(var(--chip-rgb),0.50);
  box-shadow:0 1px 2px rgba(20,30,50,0.08);
}
body.gpd-tema-claro .gpd-resumo-legend-dot{ box-shadow:none; }

/* ---------- Botao "Confirmar e gravar" do modal Importar Faturamento ----- */
/* 4a ocorrencia do botao dourado ilegivel (usuario, 2026-08-31). Aqui o
   <span> ja existia e styles.css ja tem ".auth-submit span{position:relative;
   z-index:1}", entao a causa das vezes anteriores estava descartada — nao
   deu pra reproduzir a origem exata sem inspecionar o DOM, entao esta regra
   e deliberadamente defensiva e cobre as tres causas possiveis que sobraram,
   travadas por ID (maior especificidade que qualquer .excel-btn/.auth-submit
   e depois de styles.css na ordem de carga):
     1. cor clara herdada de .excel-btn vencendo a cascata -> color fixo;
     2. texto por baixo do sheen (::after) -> z-index:2, acima do 1 padrao;
     3. -webkit-text-fill-color transparente herdado -> fixado junto.
   Escopo so deste botao: nao altera .auth-submit nas outras telas, que estao
   validadas. */
/* 5a ocorrencia do botao dourado ilegivel (usuario, 2026-09-01) — agora o
   "Somar ao valor lancado" do modal de venda/visita. Mesmo tratamento
   defensivo do #gpdAbcImportApplyBtn logo abaixo: cor travada, texto acima
   do brilho (::before) e do sheen (::after), e -webkit-text-fill-color
   fixado. Travado por ID pra nao mexer no .auth-submit das outras telas,
   que estao validadas. */
/* 2026-09-09: as regras defensivas do "Somar ao valor lancado" sairam daqui
   junto com as classes .excel-btn/.auth-submit desse botao — ele virou
   .gpd-glance__btn (ver o bloco Glance no fim deste arquivo), que nao tem
   ::before/::after decorativos nenhum, entao as tres causas do texto dourado
   ilegivel (heranca de cor clara, texto por baixo do sheen,
   -webkit-text-fill-color transparente) deixaram de existir aqui. A doutrina
   continua valendo: .gpd-glance__btn pinta color EXPLICITO em todo estado, e
   o texto so herda dele. Nao devolver .excel-btn a este botao sem reler isto.
   O #gpdAbcImportApplyBtn abaixo continua igual — aquele ainda e dourado. */

#gpdAbcImportApplyBtn{ color:#241a02; }
#gpdAbcImportApplyBtn > span{
  position:relative;
  z-index:2;
  color:#241a02;
  -webkit-text-fill-color:#241a02;
  opacity:1;
}

/* Aviso de visita registrada sem sinal, ainda na fila do aparelho (ver
   gpdVisitaFilaAtualizarAviso em js/gpd-plano.js). Fica fixo no rodape de
   proposito: visita pendente nao pode passar despercebida -- o vendedor
   precisa saber, antes de fechar o app, que aquilo ainda nao chegou no
   servidor. Some sozinho quando a fila zera.
   safe-area-inset-bottom porque o alvo e celular com barra de gestos. */
.gpd-visita-fila-aviso{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  max-width:min(92vw, 420px);
  padding:10px 16px;
  border-radius:999px;
  background:#3a2c07;
  border:1px solid #7a5f12;
  color:#f5d97a;
  font-size:13px;
  font-weight:600;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  pointer-events:none;
}

/* ---------------- "Cliente não presente" (ausência) — 2026-09-04 ----------
   Registro à parte da visita: o vendedor foi e não achou o cliente. Nunca
   entra na contagem de visitas (ver lib/gpdAusencias.js). */

/* Botão no modal de visita. Vermelho de propósito: é o oposto do dourado do
   "Confirmar visita" logo abaixo, e não pode ser clicado por engano no lugar
   dele. Largura total e um respiro em cima pra não colar na observação. */
.gpd-sale-ausente-btn{
  display:block;
  width:100%;
  margin-top:12px;
  padding:11px 16px;
  border-radius:12px;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#ffe8e8;
  background: linear-gradient(180deg, rgba(225,89,90,0.30), rgba(160,42,44,0.42));
  border:1px solid rgba(225,89,90,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 16px -10px rgba(225,89,90,0.7);
  transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}
.gpd-sale-ausente-btn:hover{ transform:translateY(-1px); border-color: rgba(225,89,90,0.8); }
.gpd-sale-ausente-btn:disabled{ opacity:0.55; cursor:default; transform:none; }
.gpd-sale-ausente-hint{
  margin-top:6px;
  font-size:11.5px;
  color: var(--text-faint);
  line-height:1.3;
}

/* Selo no card do cliente. Dourado (pedido do usuário) — a visita continua
   mandando no verde/vermelho do badge "Visitado/Visitar", e o selo entra ao
   lado sem apagar nada, porque os dois registros convivem. */
.gpd-clientes-mobile-ausente-badge{
  flex:none;
  font-family:'JetBrains Mono';
  font-size:10.5px;
  font-weight:700;
  padding:3px 8px;
  border-radius:20px;
  background: rgba(242,183,5,0.18);
  border:1px solid rgba(242,183,5,0.5);
  color: var(--accent);
  white-space:nowrap;
}
/* A linha inteira ganha um tom dourado quando há ausência no mês. */
.gpd-clientes-mobile-row--ausente{
  border-color: rgba(242,183,5,0.45) !important;
  background: linear-gradient(180deg, rgba(242,183,5,0.10), rgba(242,183,5,0.03)) !important;
}

/* Correcao de visita em tela de celular: os botoes de acao viram uma coluna
   de alvos largos (o dedo erra "Excluir" quando eles disputam a mesma linha
   de ~390px), e os campos ocupam a largura inteira em vez de dividir a
   linha com o nome do cliente. */
@media (max-width:640px){
  .gpd-visita-edit-actions{ flex-direction:column; }
  .gpd-visita-edit-acao{ width:100%; padding:11px 12px; }
  .gpd-visita-edit-field{ flex:1 1 100%; }
  .gpd-visita-edit-open{ padding:8px 10px; }
}

/* Status do GPS dentro do modal de visita (ver gpdPlanoAcompanharGeo em
   js/gpd-plano.js). Fundo escuro do .gpd-sale-modal-card -- cores claras.
   "falhou" e ambar, nao vermelho: nao e erro que impede gravar a visita, e
   um aviso de que ela vai sem endereco. */
.gpd-geo-status{
  font-size:12px;
  line-height:1.45;
  border-radius:10px;
  padding:8px 11px;
  margin-top:2px;
  border:1px solid transparent;
}
.gpd-geo-status--buscando{
  color:#9AA1B0;
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
.gpd-geo-status--ok{
  color:#7FD3A6;
  background:rgba(79,174,124,0.10);
  border-color:rgba(79,174,124,0.32);
  font-family:'JetBrains Mono', ui-monospace, monospace;
}
.gpd-geo-status--falhou{
  color:#F5D97A;
  background:rgba(242,183,5,0.10);
  border-color:rgba(242,183,5,0.34);
}

/* Aviso de camera bloqueada (2026-09-09). Reaproveita a caixa do status de
   GPS, mas com contraste maior: este texto e uma INSTRUCAO que o vendedor
   precisa ler e seguir no aparelho, no meio da rua e muitas vezes no sol —
   o tom pálido do aviso de GPS (que e so informativo) sumia na tela. */
.gpd-cam-aviso{
  color:#FFE9A8;
  background:rgba(242,183,5,0.16);
  border-color:rgba(242,183,5,0.55);
  font-weight:500;
}

/* Faixa de aviso das linhas de Negocios presas no aparelho (localStorage).
   Ambar de propósito: não é erro — é dado de verdade que ainda não chegou
   na planilha, e o vendedor precisa reparar nisso antes de fechar o mês. */
.gpd-negocios-locais-aviso{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 12px;
  padding:11px 14px;
  border-radius:12px;
  border:1px solid rgba(242,183,5,0.45);
  background: linear-gradient(180deg, rgba(242,183,5,0.12), rgba(242,183,5,0.04));
  color: var(--text);
  font-size:12.5px;
  line-height:1.45;
}
.gpd-negocios-locais-aviso strong{ color: var(--accent); }
.gpd-negocios-locais-aviso .excel-btn{ flex:none; }
@media (max-width:640px){
  .gpd-negocios-locais-aviso{ align-items:stretch; flex-direction:column; }
  .gpd-negocios-locais-aviso .excel-btn{ width:100%; }
}

/* ============================ GLANCE (2026-09-09) ========================
   Botao cuja VARREDURA E a requisicao: pilula -> puck -> feixe varrendo
   enquanto o servidor responde -> veredito -> desenrola com a resposta.
   Usado no modal de venda/visita (Confirmar visita, dourado) e no
   "Cliente nao presente" (vermelho). Orquestracao: gpdPlanoGlance em
   js/gpd-plano.js; a marcacao esta em gpd.html.

   Tres decisoes que NAO podem ser trocadas por conveniencia:
   1. Pilula e puck sao UM elemento so, e o que anima e a WIDTH. scaleX
      achataria as pontas arredondadas (vira elipse) e clip-path cortaria a
      borda nos lados. Por isso overflow:hidden no proprio botao (o clip) e
      white-space:nowrap no texto — ele e CORTADO pelo puck, nao espremido.
   2. A aura fica FORA do clip (irmao do botao, nao filho): e a metade da luz
      que precisa escapar. Filha do botao, o overflow:hidden a comeria.
   3. Todo estado pinta `color` EXPLICITO no botao — o texto so herda. Ver o
      comentario sobre o botao dourado ilegivel mais acima neste arquivo. */
.gpd-glance{
  --h:50px;
  --t-w:280ms;
  --e-w:cubic-bezier(.2,.75,.25,1);
  --e-spring:cubic-bezier(.18,1.1,.28,1);
  --cycle:900ms;                 /* mesmo valor de GPD_GLANCE_CICLO no JS */
  --tone:var(--accent);
  display:grid;
  justify-items:center;
  gap:9px;
  width:100%;
  margin-top:12px;
}
.gpd-glance__track{
  position:relative;
  width:100%;
  height:var(--h);
  display:flex;
  justify-content:center;
}
.gpd-glance__aura{
  position:absolute;
  inset:50% auto auto 50%;
  translate:-50% -50%;
  width:100%;
  height:var(--h);
  border-radius:999px;
  pointer-events:none;
  background:var(--tone);
  filter:blur(17px);
  opacity:0;
  transition:width var(--t-w) var(--e-w), opacity 240ms linear, background 200ms linear;
}
.gpd-glance__btn{
  width:100%;
  height:var(--h);
  border-radius:999px;
  overflow:hidden;               /* o clip */
  contain:layout style;
  position:relative;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  border:1px solid var(--accent-deep);
  color:#241a02;
  background:linear-gradient(180deg,#F7C93B,var(--accent) 55%,var(--accent-deep));
  transition:width var(--t-w) var(--e-w), border-color 220ms linear, background 220ms linear, color 200ms linear;
}
.gpd-glance__btn:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.gpd-glance__btn:disabled{ cursor:default; }
.gpd-glance__scan{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  opacity:0;
  transition:opacity 160ms linear;
}
.gpd-glance__beam{
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:0;
  width:44%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.85),transparent);
  filter:blur(2px);
  translate:-120% 0;
}
.gpd-glance__ink{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
}
.gpd-glance__layer{
  grid-area:1/1;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  font-family:'Oswald','Inter',sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:inherit;
  transition:opacity 200ms linear, translate 320ms var(--e-w);
}
.gpd-glance__layer--end{ opacity:0; translate:0 8px; }
.gpd-glance__layer svg{ width:18px; height:18px; flex:none; stroke:currentColor; }

/* --- os estados (data-state, escrito pelo JS) --- */
/* A LARGURA e escrita direto em cada estado, nao por uma custom property
   (--w) trocada no elemento pai. Motivo (relatado no iPhone, 2026-09-09: "nao
   fez a acao nos botoes"): o Safari NAO dispara transition quando o que muda
   e o valor de uma variavel CSS — a propriedade dependente pula pro valor
   novo sem animar, entao a pilula nunca virava puck. Com a declaracao de
   `width` mudando de regra pra regra, a transicao roda em todo navegador.
   Nao voltar a centralizar isso numa variavel. */
.gpd-glance[data-state="idle"] .gpd-glance__btn,
.gpd-glance[data-state="flare"] .gpd-glance__btn,
.gpd-glance[data-state="idle"] .gpd-glance__aura,
.gpd-glance[data-state="flare"] .gpd-glance__aura{ width:100%; }
.gpd-glance[data-state="furl"] .gpd-glance__btn,
.gpd-glance[data-state="scan"] .gpd-glance__btn,
.gpd-glance[data-state="pass"] .gpd-glance__btn,
.gpd-glance[data-state="fail"] .gpd-glance__btn,
.gpd-glance[data-state="furl"] .gpd-glance__aura,
.gpd-glance[data-state="scan"] .gpd-glance__aura,
.gpd-glance[data-state="pass"] .gpd-glance__aura,
.gpd-glance[data-state="fail"] .gpd-glance__aura{ width:var(--h); }   /* um puck */
.gpd-glance[data-state="open"] .gpd-glance__btn,
.gpd-glance[data-state="done"] .gpd-glance__btn,
.gpd-glance[data-state="open"] .gpd-glance__aura,
.gpd-glance[data-state="done"] .gpd-glance__aura{
  width:100%;
  --e-w:var(--e-spring);
  --t-w:520ms;                                          /* a resposta */
}
.gpd-glance[data-state="flare"] .gpd-glance__aura{ opacity:0.5; }
.gpd-glance[data-state="furl"] .gpd-glance__aura{ opacity:0.34; }
.gpd-glance[data-state="scan"] .gpd-glance__aura{ opacity:0.38; }
.gpd-glance[data-state="pass"] .gpd-glance__aura,
.gpd-glance[data-state="fail"] .gpd-glance__aura{ opacity:0.55; }
.gpd-glance[data-state="open"] .gpd-glance__aura{ opacity:0.28; }
.gpd-glance[data-state="done"] .gpd-glance__aura{ opacity:0.14; }
.gpd-glance[data-state="scan"] .gpd-glance__scan{ opacity:1; }
.gpd-glance[data-state="scan"] .gpd-glance__beam{ animation:gpd-glance-sweep var(--cycle) linear infinite; }
@keyframes gpd-glance-sweep{
  from{ translate:-120% 0; }
  to{ translate:250% 0; }
}
.gpd-glance:not([data-state="idle"]):not([data-state="flare"]) .gpd-glance__layer--start{ opacity:0; }
.gpd-glance[data-state="open"] .gpd-glance__layer--end,
.gpd-glance[data-state="done"] .gpd-glance__layer--end{ opacity:1; translate:0 0; }

/* --- o veredito pinta a peca inteira --- */
.gpd-glance[data-verdict="pass"]{ --tone:var(--good); }
.gpd-glance[data-verdict="fail"]{ --tone:var(--bad); }
.gpd-glance[data-verdict="pass"][data-state="pass"] .gpd-glance__btn,
.gpd-glance[data-verdict="pass"][data-state="open"] .gpd-glance__btn,
.gpd-glance[data-verdict="pass"][data-state="done"] .gpd-glance__btn{
  background:linear-gradient(180deg,#63C692,var(--good));
  border-color:#2F7B55;
  color:#06180E;
}
.gpd-glance[data-verdict="fail"][data-state="fail"] .gpd-glance__btn,
.gpd-glance[data-verdict="fail"][data-state="open"] .gpd-glance__btn,
.gpd-glance[data-verdict="fail"][data-state="done"] .gpd-glance__btn{
  background:linear-gradient(180deg,#EC7B7C,var(--bad));
  border-color:#9C3536;
  color:#1B0708;
}

/* --- "Cliente nao presente": mesma mecanica, identidade propria ---
   Vermelho de contorno em repouso (o oposto do dourado — nunca tocado por
   engano no lugar dele), varredura vermelha, e o ACERTO cai em DOURADO: o
   mesmo dourado do selo "ausente" que o cliente ganha no card. Verde aqui
   seria mentira — ausencia nao e visita e nao entra na contagem do mes. */
.gpd-glance--aus{ --h:46px; --tone:var(--bad); }
/* Vidro 3D vermelho (pedido do usuario 2026-09-09: "no vermelho ... deixe 3d
   vidro" — a versao translucida anterior lavava sobre o card BRANCO deste
   modal e virava rosa claro com texto ilegivel). Receita: vermelho cheio por
   baixo + brilho especular so na metade de cima + fio de luz no topo por
   dentro + sombra colorida por fora. Sem backdrop-filter DE PROPOSITO: este
   botao tem um irmao borrado (.gpd-glance__aura), e backdrop-filter no mesmo
   contexto de empilhamento ja borrou texto duas vezes neste projeto. */
.gpd-glance--aus .gpd-glance__btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 47%),
    linear-gradient(180deg, #D8494B 0%, #B2373A 58%, #93292D 100%);
  border-color:rgba(120,30,33,0.7);
  color:#FFF1F1;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 8px 18px -8px rgba(147,41,45,0.75),
    0 2px 4px rgba(0,0,0,0.18);
}
.gpd-glance--aus .gpd-glance__beam{
  background:linear-gradient(90deg,transparent,rgba(236,123,124,0.9),transparent);
}
/* clamp por vw: "Mais uma ausencia (2x)" e mais comprido que "Cliente nao
   presente", e o texto e cortado pelo clip do puck (nao espremido) — em tela
   estreita ele encostaria nas bordas da pilula. */
.gpd-glance--aus .gpd-glance__layer{
  font-family:'Inter',sans-serif;
  font-size:clamp(11px, 3.2vw, 12.5px);
  font-weight:700;
  letter-spacing:0.05em;
  padding:0 12px;
}
.gpd-glance--aus[data-verdict="pass"]{ --tone:var(--warn); }
.gpd-glance--aus[data-verdict="pass"][data-state="pass"] .gpd-glance__btn,
.gpd-glance--aus[data-verdict="pass"][data-state="open"] .gpd-glance__btn,
.gpd-glance--aus[data-verdict="pass"][data-state="done"] .gpd-glance__btn{
  background:linear-gradient(180deg,#EFAF66,var(--warn));
  border-color:#9A6520;
  color:#1B1004;
}
.gpd-glance--aus[data-verdict="fail"][data-state="fail"] .gpd-glance__btn,
.gpd-glance--aus[data-verdict="fail"][data-state="open"] .gpd-glance__btn,
.gpd-glance--aus[data-verdict="fail"][data-state="done"] .gpd-glance__btn{
  background:linear-gradient(180deg,#EC7B7C,var(--bad));
  border-color:#9C3536;
  color:#1B0708;
}

.gpd-glance__hint{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--text-faint);
  text-align:center;
  min-height:0;
}
.gpd-glance__hint:empty{ display:none; }

@media (prefers-reduced-motion:reduce){
  .gpd-glance{ --t-w:1ms; }
  .gpd-glance__beam{ animation:none !important; translate:0 0; opacity:0.55; }
  .gpd-glance__layer{ transition-duration:1ms; }
}

/* "desmarcar ausencia" (2026-09-09). Corrigir um engano nao pode ser tao
   visivel quanto marcar: fica como link discreto embaixo do vidro vermelho,
   mesmo peso do "remover" da foto. O modal deste fluxo tem card BRANCO — por
   isso a cor sai do vermelho escuro, nao do --bad claro do tema. */
.gpd-sale-ausente-remover{
  display:block;
  margin:6px auto 0;
  padding:4px 2px;
  background:none;
  border:0;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-size:12px;
  color:#93292D;
  text-decoration:underline;
  text-underline-offset:2px;
}
.gpd-sale-ausente-remover:hover{ color:#6E1E21; }
.gpd-sale-ausente-remover:disabled{ opacity:0.5; cursor:default; }

/* "obrigatoria" no rotulo da foto da visita (2026-09-09): visita so grava com
   foto -- ver a checagem em js/gpd-plano.js. Vermelho do tema, mas escurecido
   pro card BRANCO deste modal, no mesmo peso do rotulo. */
.gpd-sale-foto-req{
  color:#93292D;
  font-weight:700;
  letter-spacing:0.06em;
}
/* Este mesmo campo de foto alimenta tanto "Confirmar visita" (obrigatoria,
   badge acima) quanto "Cliente nao presente" (ausencia, opcional, 2026-09-22)
   -- tom neutro/discreto de proposito, pra nao competir com o vermelho da
   obrigatoriedade da visita. */
.gpd-sale-foto-opt{
  color:#8a8f99;
  font-weight:600;
}

/* Campo editavel dentro da coluna do mes corrente (Auxiliar de Cobranca): a
   borda acompanha o azul da coluna, senao o input branco-esmaecido "fura" o
   realce bem no lugar onde a pessoa vai digitar. */
.gpd-cobranca-table tbody td.gpd-clientes-col-atual .gpd-plano-medida-input{
  border-color: rgba(95,168,255,0.55);
  background: rgba(95,168,255,0.10);
}
.gpd-cobranca-table tbody td.gpd-clientes-col-atual .gpd-plano-medida-input:focus{
  border-color: rgba(95,168,255,0.9);
}

/* ---- Colunas fixas do "Auxiliar de Cobranca" (2026-09-10) ----
   A tabela rola na horizontal pra mostrar os meses antigos (ver
   gpdPlanoCobrancaRolarParaOsUltimos em js/gpd-plano.js) e, sem isto, o
   nome do cliente ia embora junto com a rolagem -- sobrava uma linha de
   numeros sem dono. Mesma ideia do .gpd-clientes-sticky-col da tabela de
   Clientes & Vendas, com a diferenca de que aqui sao DUAS colunas presas: a
   do indice (40px, onde tambem vive o "x" de excluir) e a do nome.

   Fundo OPACO e obrigatorio: o padrao das celulas desta tabela e
   translucido, e celula sticky translucida deixa o conteudo que passa por
   baixo aparecer atraves do nome. Por isso a cor de baixo e solida, nao
   rgba -- e por isso o hover e a linha de TOTAL precisam de regra propria,
   senao a translucidez volta por ali (o seletor de hover da tabela tem
   especificidade maior que a classe sozinha).

   `left` da segunda coluna = largura da primeira no <colgroup> (40px). Se
   aquele numero mudar no HTML, este tem que mudar junto -- nao ha como o
   CSS descobrir sozinho. */
/* `td.`/`th.` no seletor NAO sao enfeite: a regra base desta tabela
   (.gpd-plano-medidas-table tbody td) tem especificidade 0,2,1 e ganhava de
   uma classe sozinha (0,2,0) -- o fundo translucido dela voltava, e o valor
   dos meses passava POR BAIXO do nome do cliente enquanto a tabela rolava
   (visto na tela em 2026-09-10). Celula presa precisa de fundo opaco, e o
   opaco precisa vencer a cascata. */
.gpd-cobranca-table tbody td.gpd-cobranca-fixa{
  position:sticky;
  z-index:2;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015) 65%),
    #1B2027;
}
.gpd-cobranca-table thead th.gpd-cobranca-fixa{
  position:sticky;
  z-index:3;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    #1B2027;
}
.gpd-cobranca-table .gpd-cobranca-fixa-1{ left:0; }
.gpd-cobranca-table .gpd-cobranca-fixa-2{ left:40px; }
/* Fio de luz na borda direita da area presa: e o que faz ler como "esta
   parte nao anda", em vez de parecer coluna sobrepondo coluna por acidente. */
.gpd-cobranca-table .gpd-cobranca-fixa-2{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14), 6px 0 10px -8px rgba(0,0,0,0.75);
}
.gpd-cobranca-table tbody tr:hover td.gpd-cobranca-fixa{
  background:
    linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03) 65%),
    #20262E;
}
.gpd-cobranca-table tbody tr.gpd-plano-row-headline-resultado td.gpd-cobranca-fixa{
  background: linear-gradient(180deg, rgb(21,45,64), rgb(15,33,48));
}

/* ---- Janela de 3 meses por rolagem (2026-09-10) ----
   Decisao do usuario: "sempre 3 por vez, o resto rolando". Antes a tabela
   simplesmente ocupava a largura disponivel e mostrava todos os meses que
   coubessem -- com 5 meses cabia tudo, e a rolagem so comecaria a existir
   em dezembro, o que fazia o painel mudar de comportamento sozinho no meio
   do ano.
   A largura maxima e a soma EXATA das colunas presas + 3 meses. Se alguma
   largura mudar no <colgroup> do render, este calculo muda junto -- por isso
   as contas estao escritas aqui em vez de um numero magico:
     Total por vendedor: 40 (indice) + 260 (vendedor) + 3x130
     Detalhado:          40 + 260 (cliente) + 160 (vendedor)
                         + 3x130 + 150 (situacao) + 150 (forma) + 36 (x)
   +14px de padding (6+6) e borda (1+1) do proprio wrap. */
/* Largura CHEIA nas duas visoes (decisao do usuario, 2026-09-10: "deixe como
   estava ate o final nos dois"). Existiu por algumas horas um teto de 3
   colunas de mes aqui, que deixava a tabela terminando no meio do card com
   um vazio a direita -- ficou pior que o problema que resolvia. A tabela
   volta a ocupar o card inteiro e mostra os meses que couberem; quando nao
   couberem, rola (e a barra de cima existe justamente pra isso). */

/* Colunas presas na DIREITA (so na visao Detalhado): sem elas, limitar a
   largura acima jogaria Situacao e Forma Pgto pra fora da tela -- a pessoa
   teria que rolar ate o fim so pra ver se o titulo esta em cartorio.
   Os `right` sao as larguras acumuladas de tras pra frente: 0 / 36 / 186. */
.gpd-cobranca-table .gpd-cobranca-fixa-r1{ right:0; }
.gpd-cobranca-table .gpd-cobranca-fixa-r2{ right:36px; }
.gpd-cobranca-table .gpd-cobranca-fixa-r3{ right:186px; }
/* Fio de luz do lado de dentro, espelhando o da area presa a esquerda. */
.gpd-cobranca-table .gpd-cobranca-fixa-r3{
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.14), -6px 0 10px -8px rgba(0,0,0,0.75);
}
/* Terceira coluna presa a esquerda (Vendedor, so no Detalhado) -- o fio de
   luz passa pra ela, que agora e a ultima da area parada. */
.gpd-cobranca-table .gpd-cobranca-fixa-3{ left:300px; }
.gpd-cobranca-table .gpd-cobranca-fixa-3{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14), 6px 0 10px -8px rgba(0,0,0,0.75);
}
.gpd-cobranca-total-table .gpd-cobranca-fixa-2{
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14), 6px 0 10px -8px rgba(0,0,0,0.75);
}
/* No Detalhado quem marca a borda e a coluna do Vendedor, entao a do nome
   volta a ser uma coluna presa comum. */
.gpd-cobranca-table:not(.gpd-cobranca-total-table) .gpd-cobranca-fixa-2{ box-shadow:none; }

/* ---- Barra de rolagem espelhada, acima da tabela (2026-09-10) ----
   A nativa fica no rodape de uma lista que pode ter 60 clientes: pra andar
   nos meses a pessoa descia a pagina inteira e voltava. Esta e uma div com
   a mesma largura interna da tabela, sincronizada por listener em
   gpdPlanoCobrancaRolarParaOsUltimos -- nao existe "scrollbar em cima" em
   CSS puro. `overflow-y:hidden` porque ela nao tem altura pra rolar; a
   altura vem do proprio scrollbar do sistema.
   As larguras acompanham as do wrap (mesma conta, ver .gpd-cobranca-wrap). */
.gpd-cobranca-scroll-topo{
  overflow-x:auto;
  overflow-y:hidden;
  margin-bottom:6px;
  /* Firefox/Chrome: barra fina e visivel mesmo sem hover, senao a pessoa nao
     descobre que ela existe. */
  scrollbar-width:thin;
  scrollbar-color: rgba(242,183,5,0.55) rgba(255,255,255,0.06);
}
.gpd-cobranca-scroll-topo > div{ height:1px; }
.gpd-cobranca-scroll-topo::-webkit-scrollbar{ height:10px; }
.gpd-cobranca-scroll-topo::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.06);
  border-radius:999px;
}
.gpd-cobranca-scroll-topo::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(242,183,5,0.75), rgba(185,134,0,0.75));
  border-radius:999px;
}
.gpd-cobranca-scroll-topo::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(242,183,5,0.95), rgba(185,134,0,0.95));
}

/* =====================================================================
   VIDRO LÍQUIDO nas linhas de Clientes & Vendas — EM TESTE, só para o
   login "rafael" (11/09/2026). Pedido do usuário depois de aprovar o
   protótipo: "aplique somente para meu usuário para eu ver finalizado no
   painel". Quem liga é a classe body.gpd-vidro-liquido, posta em
   gpdApplyAuthMode (js/gpd.js) a partir da lista GPD_VIDRO_LIQUIDO_USUARIOS.
   Pra liberar pra todo mundo: tirar o "body.gpd-vidro-liquido" da frente
   dos seletores (ou pôr todos os logins na lista). Pra desligar: esvaziar
   a lista.

   O QUE NÃO MUDA (de propósito — o usuário pediu "no mesmo padrão"): coluna
   do mês atual em azul, visita amarela com faixa e ponto, escala de brilho
   dos valores, confirmação verde de 2s, faixa petróleo do cabeçalho, linhas
   de TOTAL/%. Por isso o fundo de vidro das linhas usa :where(), que zera o
   peso do seletor: fica (0,2,1), abaixo do td.gpd-clientes-col-atual (0,2,2),
   e perde pra visita/verde, que são !important. Sem o :where, o vidro
   pintaria por cima da coluna azul.

   Sem backdrop-filter, como em todo o resto do GPD: o vidro é gradiente
   opaco + brilho interno. Opaco também porque a coluna do cliente é presa
   (sticky) e não pode deixar o número vazar por trás no scroll.
   ===================================================================== */
body.gpd-vidro-liquido .gpd-clientes-table{
  border-spacing:0 6px;
}
body.gpd-vidro-liquido .gpd-clientes-table :where(tbody td){
  padding-top:13px;
  padding-bottom:13px;
}
/* linha de cliente = pílula de vidro */
body.gpd-vidro-liquido .gpd-clientes-table :where(tbody tr:not(.gpd-clientes-total-row, .gpd-clientes-pct-row, .gpd-clientes-city-row, .gpd-clientes-city-unassigned-row) td){
  /* por variável pra o tema claro (fim do arquivo) trocar a cor sem subir o
     peso deste seletor — ele PRECISA continuar abaixo da coluna azul */
  background:var(--gpd-vl-row, linear-gradient(180deg, #282C33, #1D2026));
  box-shadow:var(--gpd-vl-row-shadow, inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -3px 6px rgba(0,0,0,0.32));
}
/* hover SEM cor na linha de cliente (pedido do usuário, 11/09/2026: "deixe
   incolor para não aparecer"). O hover clássico clareia a linha com branco
   translúcido; com a tabela rolada pro lado, as células dos meses passam
   POR BAIXO da coluna presa, e o canto quadrado delas, clareado, aparecia
   atrás da ponta redonda do cliente ("ponta atrás do card"). Aqui a linha
   fica com o mesmo vidro de sempre. A célula do mês atual tem regra
   própria logo abaixo, senão perderia o azul no hover; visita e o verde de
   confirmação são !important e não mudam. */
/* ...e a causa de verdade do canto (a 1ª tentativa, só nas células, não
   resolveu): css/styles.css tem `tbody tr:hover{ background: var(--panel-2) }`
   pra TODA tabela do site. Esse fundo é da <tr>, um retângulo — nas pontas
   redondas da pílula (999px) ele sobra pra fora da curva. Na tabela de
   vidro a linha em si nunca tem fundo; quem pinta são as células. */
body.gpd-vidro-liquido .gpd-clientes-table tbody tr,
body.gpd-vidro-liquido .gpd-clientes-table tbody tr:hover{ background:transparent; }
body.gpd-vidro-liquido .gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):not(.gpd-clientes-city-row):not(.gpd-clientes-city-unassigned-row):hover td:not(.gpd-clientes-col-atual){
  background:var(--gpd-vl-row, linear-gradient(180deg, #282C33, #1D2026));
  box-shadow:var(--gpd-vl-row-shadow, inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -3px 6px rgba(0,0,0,0.32));
}
body.gpd-vidro-liquido .gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):not(.gpd-clientes-city-row):not(.gpd-clientes-city-unassigned-row):hover td.gpd-clientes-col-atual{
  background:var(--gpd-vl-atual, linear-gradient(180deg, rgba(95,168,255,0.16), rgba(95,168,255,0.05)));
  box-shadow:inset 1px 0 0 rgba(95,168,255,0.5), inset -1px 0 0 rgba(95,168,255,0.5);
}
/* pontas redondas de pílula (eram 12px) */
body.gpd-vidro-liquido .gpd-clientes-table tbody td:first-child{
  border-radius:999px 0 0 999px;
  padding-left:14px;
}
body.gpd-vidro-liquido .gpd-clientes-table tbody td:last-child{
  border-radius:0 999px 999px 0;
  padding-right:18px;
}
/* números e nomes na tipografia do protótipo (Manrope, já carregada pelo
   login novo), com algarismos de largura fixa pra coluna não dançar */
body.gpd-vidro-liquido .gpd-clientes-table td.num{
  font-family:Manrope, Inter, system-ui, sans-serif;
  font-variant-numeric:tabular-nums;
  font-size:14px;
}
body.gpd-vidro-liquido .gpd-clientes-table .gpd-clientes-name{
  font-family:Manrope, Inter, system-ui, sans-serif;
  font-weight:700;
  font-size:14px;
}
body.gpd-vidro-liquido .gpd-clientes-table .gpd-clientes-code-sub{
  font-family:Manrope, Inter, system-ui, sans-serif;
  font-weight:600;
  font-size:11.5px;
}
/* avatar: círculo claro com a inicial escura (no protótipo, escuro no tema
   claro e claro no escuro — o GPD é escuro) */
body.gpd-vidro-liquido .gpd-clientes-table .gpd-clientes-avatar{
  width:32px;
  height:32px;
  border:0;
  background:#F1F1EE;
  color:#15171B;
  font-family:'Oswald', sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.03em;
}
/* linha da cidade (total da cidade, abas de região) e linha "Cidade" (venda
   sem cliente): ficam com a COR ORIGINAL do GPD — faixa dourada no total da
   cidade, cinza na "Cidade" (regras clássicas, mais acima). O vidro só
   troca a fonte do nome. Histórico de 11/09/2026: a primeira versão deixava
   o total "afundado" e a "Cidade" cinza-escuro; o usuário pediu "mantenha a
   mesma cor", viraram o vidro das linhas de cliente, e ele corrigiu: "deixe
   na cor que estava antes" — era a cor clássica. Sem fundo pintado aqui, a
   coluna azul do mês atual também segue a regra original (ela pesa mais que
   a da linha da cidade), sem precisar de conserto. */
body.gpd-vidro-liquido .gpd-clientes-table .gpd-clientes-city-row .gpd-clientes-sticky-col{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* =====================================================================
   TEMA CLARO do GPD — EM TESTE, só para quem está em
   GPD_VIDRO_LIQUIDO_USUARIOS (js/gpd.js), pedido do usuário em 11/09/2026
   ("faltou opção claro e escuro"). O botão (#gpdTemaBtn, canto do cartão do
   Plano de Ação) liga body.gpd-tema-claro; tudo abaixo fica atrás dela.

   Como está feito: o GPD nasceu só escuro e tem ~1.100 cores fixas no CSS.
   Primeiro os TOKENS (--bg, --panel, --text...) são redefinidos pro claro —
   isso já vira boa parte da página. O resto são correções por seção, cada
   uma com o comentário do porquê. Sem backdrop-filter aqui também.
   ===================================================================== */
.gpd-tema-btn{
  position:absolute; top:16px; right:18px; z-index:3;
  height:38px; padding:0 14px 0 11px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px;
  font:600 12.5px Manrope, Inter, sans-serif; color:var(--text);
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.22);
  background:linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.18), inset 0 -3px 6px rgba(0,0,0,0.35), 0 10px 22px rgba(0,0,0,0.4);
}
/* No celular o botão mora no cabeçalho, ao lado de "Sair"
   (gpdTemaPosicionar em js/gpd.js) — lá ele entra no fluxo em vez de
   flutuar, e vira só o ícone (☀/☾, o aria-label continua dizendo o que
   faz). Com o texto "Claro" não cabia: os dois vermelhos dividem a linha
   (width:100% de .excel-btn no celular, styles.css) e, deixando quebrar
   linha, cada um passava a ocupar uma linha inteira. */
.gpd-header-actions > .gpd-tema-btn{
  position:static; flex:none;
  width:40px; height:40px; padding:0; justify-content:center;
}
.gpd-header-actions > .gpd-tema-btn span{ display:none; }
.gpd-tema-btn i{ font-style:normal; font-size:16px; line-height:1; }
.gpd-tema-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

body.gpd-tema-claro{
  --bg:#E6E9EE; --bg-2:#DCE0E7;
  --panel:#FFFFFF; --panel-2:#F2F4F7;
  --line:#D3D8E0; --line-soft:#E3E7ED;
  --text:#14130F; --text-dim:#4A4944; --text-faint:#77766F;
  --accent-soft:rgba(242,183,5,0.20);
  --steel:#2A7BA8; --steel-soft:rgba(42,123,168,0.12);
  --good:#1E8A55; --good-soft:rgba(30,138,85,0.12);
  --bad:#C63A3B; --bad-soft:rgba(198,58,59,0.12);
  --warn:#B96A12;
  background:var(--bg);
  color:var(--text);
}
body.gpd-tema-claro .gpd-tema-btn{
  border-color:#FFFFFF;
  background:linear-gradient(180deg, #FFFFFF, #EEF1F5);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -3px 6px rgba(60,70,90,0.12), 0 10px 22px rgba(40,45,60,0.16);
  /* Cor travada, não var(--text) (19/09/2026: "não aparece o sol"): no tema
     claro o botão fica no cabeçalho (celular), e header.top redefine
     --text:#FFFFFF pro texto branco sobre a chapa turquesa — o ☀/☾ saía
     branco EM CIMA do botão branco, sumindo. O fundo do botão é claro nos
     dois lugares onde ele mora, então o ícone é sempre escuro aqui. */
  color:#0E3B4B;
}
body.gpd-tema-claro header.top{
  background:linear-gradient(180deg, #F4F6F9, #E6E9EE);
  border-bottom-color:#D3D8E0;
}
/* Vidro do card 20% mais escuro (pedido do usuário, 12/09/2026: "deixe 20%
   mais escuro o vidro", aplicado em TODOS os cards): o branco de antes
   (#FFFFFF -> #F6F7F9) misturado com 20% de preto. Vale para Plano Mensal,
   Frete e Clientes & Vendas; o modo escuro não muda. */
body.gpd-tema-claro .card{
  background:linear-gradient(180deg, #CCCCCC, #C5C6C7);
  border-color:#D6D6D6;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(40,45,60,0.08), 0 16px 32px -14px rgba(40,45,60,0.22);
}
/* Subtítulo dos cards: o --text-faint (#77766F) lia bem no branco, mas some no
   vidro mais escuro acima — mesmo tom fechado nos três cards. */
body.gpd-tema-claro .card-sub,
body.gpd-tema-claro #gpdFreteVendorCard .card-sub{ color:#3A3935; }

/* ---- claro: faixa de "somente leitura" — texto dourado sobre bege ficava
   ilegível; o dourado vira o tom fechado */
body.gpd-tema-claro .gpd-dev-banner{ color:#7A5800; border-color:rgba(185,134,0,0.45); }

/* ---- claro: caixas Objetivo/Responsável, gráfico e envelope da tabela —
   eram vidro escuro translúcido (rgba sobre o fundo), que no claro virava
   um cinza sujo */
body.gpd-tema-claro .gpd-plano-meta-box,
body.gpd-tema-claro .gpd-plano-chart-wrap,
body.gpd-tema-claro .gpd-plano-table-wrap{
  background:linear-gradient(180deg, #FFFFFF, #F3F5F8);
  border-color:#DDE2E9;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #FFFFFF, 0 10px 22px -16px rgba(40,45,60,0.35);
}
body.gpd-tema-claro .gpd-plano-meta-box{ border-color:rgba(42,123,168,0.35); }
body.gpd-tema-claro .gpd-plano-meta-value{ color:var(--text); }

/* ---- claro: tabela do Plano Mensal. Cada linha tem a SUA cor (dourado =
   meta, azul = resultado, verde = desafio) — mantidas, só que em versão
   clara. A coluna dos nomes aparece em DOIS lugares: td.name e o overlay
   anti-vazamento (.gpd-plano-sticky-overlay-row, que é quem se vê de fato);
   os dois recebem a mesma cor, sempre sólida (coluna presa). */
body.gpd-tema-claro .gpd-plano-table thead th,
body.gpd-tema-claro .gpd-plano-table thead th:first-child,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-sticky-overlay-head{
  background:#EDF0F4;
  color:#14130F;
  border-bottom-color:#D3D8E0;
}
body.gpd-tema-claro .gpd-plano-table thead th.gpd-plano-col-current-q{ background:rgba(242,183,5,0.38); color:#14130F; }
body.gpd-tema-claro .gpd-plano-table td.name{ color:#2B2A26; }

body.gpd-tema-claro .gpd-plano-row-meta-produto td.name,
body.gpd-tema-claro .gpd-plano-row-positivacao td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-meta-produto,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-positivacao{ background:rgb(251,236,190); color:#4A3600; }

body.gpd-tema-claro .gpd-plano-row-resultado-neutro td.name,
body.gpd-tema-claro .gpd-plano-row-vendas-ant td.name,
body.gpd-tema-claro .gpd-plano-row-tonelagem td.name,
body.gpd-tema-claro .gpd-plano-row-default td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-resultado-neutro,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-vendas-ant,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-tonelagem,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-default{ background:#F4F5F8; color:#2B2A26; }

body.gpd-tema-claro .gpd-plano-row-headline-desafio td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-headline-desafio{ background:rgb(216,239,226); color:#10412A; }

body.gpd-tema-claro .gpd-plano-row-headline-resultado td,
body.gpd-tema-claro .gpd-plano-row-resultado-acumulado td,
body.gpd-tema-claro .gpd-plano-row-pct td{ color:#0B2A40; }
body.gpd-tema-claro .gpd-plano-row-headline-resultado td.name,
body.gpd-tema-claro .gpd-plano-row-resultado-acumulado td.name,
body.gpd-tema-claro .gpd-plano-row-pct td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-resultado-acumulado,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-pct{
  background:linear-gradient(180deg, rgb(214,233,245), rgb(197,221,238));
  color:#0B2A40;
}

body.gpd-tema-claro .gpd-plano-row-variacao td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-variacao{ background:rgb(226,238,246); color:#0B2A40; }

body.gpd-tema-claro .gpd-plano-row-prejuizo td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-prejuizo{ background:#F4F5F8; color:var(--bad); }

/* ---- claro: Resultado Mensal / Acumulado / % Acumulado — as células de
   valor também eram azul-noite sólido (só o nome tinha sido trocado) */
body.gpd-tema-claro .gpd-plano-row-headline-resultado td,
body.gpd-tema-claro .gpd-plano-row-resultado-acumulado td,
body.gpd-tema-claro .gpd-plano-row-pct td{
  background:linear-gradient(180deg, rgb(214,233,245), rgb(197,221,238));
}

/* ---- claro: pílula da Positivação — número dourado sobre fundo dourado
   sumia; o número vira o dourado fechado, o fundo fica mais firme */
body.gpd-tema-claro .gpd-plano-positivacao-pill{ background:rgba(242,183,5,0.24); border-color:rgba(185,134,0,0.45); }
body.gpd-tema-claro .gpd-plano-positivacao-input,
body.gpd-tema-claro .gpd-plano-positivacao-suffix{ color:#6B4B00; }
body.gpd-tema-claro .gpd-plano-positivacao-pill-high{ background:rgba(30,138,85,0.16); border-color:rgba(30,138,85,0.45); }
body.gpd-tema-claro .gpd-plano-positivacao-pill-high .gpd-plano-positivacao-input,
body.gpd-tema-claro .gpd-plano-positivacao-pill-high .gpd-plano-positivacao-suffix{ color:var(--good); }

/* ---- claro: Medidas, Negócios não Realizados (e as outras tabelas que
   usam a mesma família .gpd-plano-medidas-*). O envelope era vidro escuro
   translúcido e as linhas branco a 2-5% — sobre o claro, virava cinza sujo
   com linha invisível. Envelope cinza-claro, linha branca com fio. */
body.gpd-tema-claro .gpd-plano-medidas-table-wrap{
  background:#E9ECF1;
  border-color:#DDE2E9;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 2px rgba(40,45,60,0.08);
}
/* :not(.gpd-clientes-table): lá o cabeçalho é a faixa petróleo dos meses,
   que fica igual nos dois temas (escolha do usuário, 10/09/2026) */
body.gpd-tema-claro .gpd-plano-medidas-table:not(.gpd-clientes-table) thead th{
  background:#DDE2E9;
  color:#2B2A26;
  border-bottom-color:#CBD1DA;
}
body.gpd-tema-claro .gpd-plano-medidas-table tbody td{
  background:#FFFFFF;
  border-color:#DDE2E9;
  color:var(--text);
}
body.gpd-tema-claro .gpd-plano-medidas-table tbody tr:hover td{
  background:#F7F9FC;
  border-color:#C9D0DA;
}
/* Frete no tema claro: linhas de RESULTADO (Regiões, Passo Fundo e TOTAL)
   em verde (01/10/2026, print do Rafael: "destaque as linhas dos resultados e
   corrija a cor da letra, pode ser em verde"). A regra de cima pintava toda
   célula de branco por cima do vidro vermelho/amarelo dessas linhas, e o
   nome delas seguia em branco (#FFF, feito pro tema escuro) — "Regiões",
   "Passo Fundo" e "TOTAL" sumiam. Subtotais em verde claro, TOTAL em verde
   mais forte; letra verde-escura. Tema escuro não muda (vermelho/amarelo,
   pedidos de 27-28/08). Pílulas coloridas dentro das células ficam como são. */
body.gpd-tema-claro .gpd-frete-table tbody tr.gpd-frete-row-subtotal td,
body.gpd-tema-claro .gpd-frete-table tbody tr.gpd-frete-row-subtotal td.name,
body.gpd-tema-claro .gpd-frete-table tbody tr:hover.gpd-frete-row-subtotal td,
body.gpd-tema-claro .gpd-frete-table tbody tr:hover.gpd-frete-row-subtotal td.name{
  background:linear-gradient(180deg, #EAF8F0 0%, #D3EFDF 100%);
  border-top:1px solid #A9DBBF;
  border-bottom:1px solid #A9DBBF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
  color:#0E5A33;
}
body.gpd-tema-claro .gpd-frete-table tbody tr.gpd-frete-row-total td,
body.gpd-tema-claro .gpd-frete-table tbody tr.gpd-frete-row-total td.name,
body.gpd-tema-claro .gpd-frete-table tbody tr:hover.gpd-frete-row-total td,
body.gpd-tema-claro .gpd-frete-table tbody tr:hover.gpd-frete-row-total td.name{
  background:linear-gradient(180deg, #CFF0DD 0%, #A9E0C0 100%);
  border-top:1px solid #6FC394;
  border-bottom:1px solid #6FC394;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85);
  color:#0A4A29;
}
/* Inconformidade e "Prejuízo Incobráveis %" no TEMA CLARO (15/10/2026, prints
   do usuário: "corrija, ficou ruim... deixe claro e bem visível as letras").
   As duas tabelas tinham só o vidro ESCURO (receita de 27-28/08, feita quando
   o GPD só tinha o escuro) e a regra genérica do claro só trocava a cor do
   texto pra escuro: letra azul-escura sobre vinho/cinza-chumbo, % vermelho
   sobre cinza, e as 2 primeiras linhas douradas sobre fundo escuro.
   Aqui: linhas brancas com fio, Categoria em vermelho-claro com letra
   vermelho-escuro, 2 primeiras linhas (Total/%) em dourado-claro, TOTAL em
   rosa-claro. !important porque as regras escuras usam :nth-child/:hover em
   cadeia e têm especificidade maior; escopo só nestas 2 tabelas. */
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td,
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td{
  background:#FFFFFF !important;
  border-color:#DDE2E9 !important;
  box-shadow:none !important;
  color:#1F2430;
}
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td{ background:#F4F7FB !important; }
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado) td.name,
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td.name{
  background:#FDE9E9 !important;
  border-color:#F2BDBD !important;
  box-shadow:inset 3px 0 0 #E1595A !important;
  color:#7A1517;
  font-weight:700;
}
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2) td:nth-child(2),
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2) td:nth-child(3),
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2):hover td:nth-child(2),
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:not(.gpd-plano-row-headline-resultado):nth-child(-n+2):hover td:nth-child(3){
  background:#FFF3C4 !important;
  border-color:#EBCB62 !important;
  color:#4A3600;
}
body.gpd-tema-claro .gpd-inconformidade-table tr.gpd-plano-row-headline-resultado td,
body.gpd-tema-claro .gpd-inconformidade-table tbody tr:hover.gpd-plano-row-headline-resultado td{
  background:#F8D9D9 !important;
  border-color:#EBA9A9 !important;
  box-shadow:none !important;
  color:#5E0F11;
  font-weight:800;
}
body.gpd-tema-claro .gpd-inconformidade-table .gpd-inconformidade-rmoney-prefix,
body.gpd-tema-claro .gpd-inconformidade-table .gpd-plano-inconformidade-rmoney-input{ color:#1F2430; }
body.gpd-tema-claro .gpd-inconformidade-table .gpd-plano-inconformidade-rmoney-input::placeholder{ color:rgba(31,36,48,0.5); }
/* Pílulas de % em tons fechados (o --bad/--good claros não leem no branco) */
body.gpd-tema-claro .gpd-inconformidade-table .pill.bad{ background:#FBDADA; color:#A3201F; }
body.gpd-tema-claro .gpd-inconformidade-table .pill.warn{ background:#FFE9C2; color:#8A4B00; }
body.gpd-tema-claro .gpd-inconformidade-table .pill.good{ background:#D6F0E1; color:#14683F; }
body.gpd-tema-claro .gpd-inconformidade-table .pill:not(.good):not(.warn):not(.bad){ color:#1F2430; }
/* Prejuízo Incobráveis %: vermelho-claro firme, letra vermelho-escuro */
body.gpd-tema-claro tr.gpd-plano-row-prejuizo-pct td,
body.gpd-tema-claro tr.gpd-plano-row-prejuizo-pct:hover td{
  background:#FBE0E0 !important;
  box-shadow:none !important;
  border-color:#EBA9A9 !important;
  color:#7A1517;
  font-weight:800;
}
body.gpd-tema-claro tr.gpd-plano-row-prejuizo-pct td:first-child{ box-shadow:inset 3px 0 0 #E1595A !important; }
body.gpd-tema-claro tr.gpd-plano-row-prejuizo-pct td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-prejuizo-pct{
  background:#F8CFCF !important;
  color:#5E0F11;
}
body.gpd-tema-claro tr.gpd-plano-row-prejuizo-pct .gpd-plano-medida-input{ color:#7A1517; }

/* Chave "Total por vendedor / Detalhado": o card INATIVO era vidro escuro
   (rgba(18,22,28,.72)) com o texto em var(--text) — no claro o texto vira
   quase preto e sumia no cinza-chumbo (print do usuário, 11/09/2026:
   "melhore a visualização"). Vira o mesmo botão branco em relevo do
   .gpd-tema-btn. `:not(.is-active)`: o dourado do ativo não muda. */
body.gpd-tema-claro .gpd-cobranca-view-card:not(.is-active){
  background:linear-gradient(180deg, #FFFFFF, #EEF1F5);
  border-color:#CFD5DE;
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -3px 6px rgba(60,70,90,0.08), 0 2px 6px -2px rgba(40,45,60,0.18);
}
body.gpd-tema-claro .gpd-cobranca-view-card:not(.is-active):hover{
  border-color:#AEB6C2;
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -3px 6px rgba(60,70,90,0.08), 0 8px 16px -8px rgba(40,45,60,0.3);
}
body.gpd-tema-claro .gpd-cobranca-view-card:not(.is-active) .gpd-cobranca-view-card-title{ color:#2B2A26; }
body.gpd-tema-claro .gpd-cobranca-view-card:not(.is-active) .gpd-cobranca-view-card-sub{ color:#6B6A63; }
/* Auxiliar de Cobrança, coluna do nome (Cliente no Detalhado, Vendedor no
   Total) e linha TOTAL nas colunas presas: o fundo OPACO escuro (#1B2027 e o
   azul-noite) é obrigatório por causa do sticky e tem especificidade alta
   (0,3,3), então passava por cima da regra genérica do claro — nome escuro
   sobre verde-chumbo, ilegível (print do usuário, 11/09/2026). Aqui o mesmo
   verde, mas sobre BRANCO sólido (continua opaco, a rolagem não vaza). */
body.gpd-tema-claro .gpd-cobranca-table tbody tr:not(.gpd-plano-row-headline-resultado) td:nth-child(2){
  background: linear-gradient(0deg, rgba(30,138,85,0.12), rgba(30,138,85,0.12)), #FFFFFF;
  box-shadow: inset 3px 0 0 rgba(30,138,85,0.7);
  color:#10412A;
}
body.gpd-tema-claro .gpd-cobranca-table tbody tr:not(.gpd-plano-row-headline-resultado):hover td:nth-child(2){
  background: linear-gradient(0deg, rgba(30,138,85,0.18), rgba(30,138,85,0.18)), #FFFFFF;
}
body.gpd-tema-claro .gpd-cobranca-table tbody tr.gpd-plano-row-headline-resultado td{
  background:linear-gradient(180deg, rgb(214,233,245), rgb(197,221,238));
}
/* Lista de visitas do celular: a base é um vidro ESCURO
   (rgba(26,31,38,0.4)), que no claro virava cartão cinza-sujo — e o verde
   de "visitado" (11/09/2026) por cima dele saía cinza-esverdeado. Aqui os
   cards viram brancos e o verde fica sobre branco. O amarelo de "ausente"
   continua mandando (tem !important) e o flash de confirmação também. */
body.gpd-tema-claro .gpd-clientes-mobile-row{
  background:linear-gradient(180deg, #FFFFFF, #F4F6F9);
  border-color:#DDE2E9;
}
body.gpd-tema-claro .gpd-clientes-mobile-row:active{
  background:linear-gradient(180deg, #FFFFFF, #E9EDF3);
}
body.gpd-tema-claro .gpd-clientes-mobile-row--pending{ border-color:rgba(198,58,59,0.38); }
body.gpd-tema-claro .gpd-clientes-mobile-row--visitado{
  border-color:rgba(30,138,85,0.45);
  background:linear-gradient(160deg, rgba(30,138,85,0.16), rgba(30,138,85,0.06) 60%), #FFFFFF;
}
body.gpd-tema-claro .gpd-clientes-mobile-row--visitado:active{
  background:linear-gradient(160deg, rgba(30,138,85,0.24), rgba(30,138,85,0.09) 60%), #FFFFFF;
}
body.gpd-tema-claro .gpd-plano-medida-input,
body.gpd-tema-claro .gpd-plano-negocio-money{
  background:#F4F6F9;
  border-color:#CFD5DE;
}
body.gpd-tema-claro .gpd-plano-medida-input:hover{ border-color:#AEB6C2; }
body.gpd-tema-claro .gpd-plano-medida-input:focus,
body.gpd-tema-claro .gpd-plano-negocio-money:has(.gpd-plano-negocio-input-valor:focus){ background:#FFFFFF; }
body.gpd-tema-claro .gpd-plano-medida-input--objetivo{ background:rgba(42,123,168,0.10); border-color:rgba(42,123,168,0.45); }
body.gpd-tema-claro .gpd-plano-medida-input--atingido.is-fechado{ background:rgba(30,138,85,0.10); border-color:rgba(30,138,85,0.45); }
body.gpd-tema-claro .gpd-plano-medida-input--atingido.is-aberto{ background:rgba(198,58,59,0.08); border-color:rgba(198,58,59,0.45); }
/* combo de Concorrente: era azul-marinho quase preto */
body.gpd-tema-claro .gpd-plano-combo-input,
body.gpd-tema-claro .gpd-plano-combo-input:focus{ background:#EEF4FC; border-color:rgba(47,143,255,0.45); }
body.gpd-tema-claro .gpd-plano-combo-list{
  background:#FFFFFF;
  border-color:rgba(47,143,255,0.35);
  box-shadow:0 14px 30px -10px rgba(40,45,60,0.28);
}
body.gpd-tema-claro .gpd-plano-combo-option-label{ color:#1F2A3A; }
body.gpd-tema-claro .gpd-plano-combo-option:hover .gpd-plano-combo-option-label,
body.gpd-tema-claro .gpd-plano-combo-option.active .gpd-plano-combo-option-label{ color:#0B4FA8; }

/* ---- claro: quadros de resumo dos Negócios e cards de Clientes & Vendas.
   Os coloridos já são tinta translúcida e funcionam no claro; o neutro
   era vidro escuro e os números eram branco fixo. */
body.gpd-tema-claro .gpd-plano-negocios-summary-box,
body.gpd-tema-claro .gpd-clientes-stat-card{
  background:linear-gradient(180deg, #FFFFFF, #F1F3F6);
  border-color:#DDE2E9;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.gpd-tema-claro .gpd-plano-negocios-summary-box--accent{ background:linear-gradient(180deg, rgba(242,183,5,0.22), rgba(242,183,5,0.08)); border-color:rgba(185,134,0,0.35); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--good,
body.gpd-tema-claro .gpd-clientes-stat-card--good{ background:linear-gradient(180deg, rgba(30,138,85,0.16), rgba(30,138,85,0.05)); border-color:rgba(30,138,85,0.32); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--warn{ background:linear-gradient(180deg, rgba(225,148,60,0.2), rgba(225,148,60,0.06)); border-color:rgba(185,106,18,0.35); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--steel,
body.gpd-tema-claro .gpd-clientes-stat-card--steel{ background:linear-gradient(180deg, rgba(42,123,168,0.16), rgba(42,123,168,0.05)); border-color:rgba(42,123,168,0.32); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--yellow{ background:linear-gradient(180deg, rgba(230,210,20,0.26), rgba(230,210,20,0.08)); border-color:rgba(185,160,0,0.4); }
body.gpd-tema-claro .gpd-clientes-stat-card--bad{ background:linear-gradient(180deg, rgba(198,58,59,0.14), rgba(198,58,59,0.04)); border-color:rgba(198,58,59,0.3); }
body.gpd-tema-claro .gpd-clientes-stat-card--gold{ background:linear-gradient(180deg, rgba(242,183,5,0.22), rgba(242,183,5,0.08)); border-color:rgba(185,134,0,0.35); }
body.gpd-tema-claro .gpd-plano-negocios-summary-val,
body.gpd-tema-claro .gpd-clientes-stat-val{ color:var(--text); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--accent .gpd-plano-negocios-summary-val,
body.gpd-tema-claro .gpd-clientes-stat-card--gold .gpd-clientes-stat-val{ color:#8A6400; }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--good .gpd-plano-negocios-summary-val,
body.gpd-tema-claro .gpd-clientes-stat-card--good .gpd-clientes-stat-val{ color:var(--good); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--warn .gpd-plano-negocios-summary-val{ color:var(--warn); }
body.gpd-tema-claro .gpd-plano-negocios-summary-box--steel .gpd-plano-negocios-summary-val,
body.gpd-tema-claro .gpd-clientes-stat-card--steel .gpd-clientes-stat-val{ color:var(--steel); }
body.gpd-tema-claro .gpd-clientes-stat-card--bad .gpd-clientes-stat-val,
body.gpd-tema-claro .gpd-plano-negocios-summary-val--bad{ color:var(--bad); }
body.gpd-tema-claro .gpd-plano-negocios-summary-val-input:hover{ border-color:#CFD5DE; }

/* ---- claro: tabela de Clientes & Vendas. O vidro líquido troca de cor
   pelas variáveis --gpd-vl-row* (ver o bloco VIDRO LÍQUIDO), assim a coluna
   azul do mês atual e a visita dourada continuam por cima, como no escuro.
   A faixa petróleo do cabeçalho fica igual: ela é o destaque dos meses. */
body.gpd-tema-claro{
  --gpd-vl-row:linear-gradient(180deg, #FFFFFF, #EEF1F5);
  --gpd-vl-row-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 #D5DAE2;
  --gpd-vl-row-hover:linear-gradient(180deg, #FFFFFF, #E4E9F0);
  --gpd-vl-atual:linear-gradient(180deg, rgb(226,237,252), rgb(212,227,249));
}
body.gpd-tema-claro .gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover td{
  background:linear-gradient(180deg, #FFFFFF, #E4E9F0);
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 #C9D0DA;
}
body.gpd-tema-claro .gpd-clientes-table tbody tr:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover .gpd-clientes-sticky-col{ background:#F4F6FA; }
/* cabeçalho dos meses: a faixa petróleo do escuro vira verde-claro (pedido
   do usuário, 11/09/2026: "esta linha também é verde claro") — mesma cor,
   versão clara, como as outras linhas. Opaco na célula presa "Cliente". */
body.gpd-tema-claro .gpd-clientes-table thead th,
body.gpd-tema-claro .gpd-clientes-table thead .gpd-clientes-sticky-col{
  background:linear-gradient(180deg, #DDF1EE, #C8E6E2);
  color:#0E4A4C;
  box-shadow:inset 0 -2px 0 rgba(26,140,132,0.55), inset 0 1px 0 rgba(255,255,255,0.7);
}
body.gpd-tema-claro.gpd-vidro-liquido .gpd-clientes-table .gpd-clientes-avatar{ background:#1B1D22; color:#F1F1EE; }
/* linha da cidade e linha "Cidade": a MESMA cor clássica do escuro (faixa
   dourada / cinza), em versão clara — o fundo escuro original com texto
   escuro não lia. Mesmo valor sólido na célula e na coluna presa. Peso
   (0,3,2): perde pra coluna azul do mês atual no claro (0,3,3). */
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-city-row td,
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-city-row .gpd-clientes-sticky-col,
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-city-row:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover td,
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-city-row:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover .gpd-clientes-sticky-col{
  background:linear-gradient(180deg, #F6E3A6, #EAD07A);
  color:#14130F;
  border-top-color:rgba(160,116,0,0.45);
}
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-city-row .gpd-clientes-sticky-col,
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-city-row:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover .gpd-clientes-sticky-col{ color:#5E4608; }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-city-unassigned-row td,
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-city-unassigned-row .gpd-clientes-sticky-col,
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-city-unassigned-row:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover td,
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-city-unassigned-row:not(.gpd-clientes-total-row):not(.gpd-clientes-pct-row):hover .gpd-clientes-sticky-col{
  /* azul-claro, não cinza (pedido do usuário, 11/09/2026: "deixe azul claro") */
  background:linear-gradient(180deg, #E3EFF9, #D3E5F4);
  color:#24506F;
}
/* escala de brilho dos valores, invertida: no claro, venda maior = mais
   ESCURA (mesmos degraus 1.500 / 5.000 / 10.000) */
body.gpd-tema-claro .gpd-clientes-table tbody td.num[data-venda="0"]{ color:#A9A8A2; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num[data-venda="1"]:not(.gpd-clientes-visita){ color:#8A8983; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num[data-venda="2"]:not(.gpd-clientes-visita){ color:#5E5D58; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num[data-venda="3"]:not(.gpd-clientes-visita){ color:#2E2D29; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num[data-venda="4"]:not(.gpd-clientes-visita){ color:#0B0A08; }
/* coluna do mês atual mais legível, como no escuro (ver a regra logo abaixo
   da escala original) */
body.gpd-tema-claro .gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="1"]:not(.gpd-clientes-visita){ color:#3F4A58; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="2"]:not(.gpd-clientes-visita){ color:#2A333F; }
body.gpd-tema-claro .gpd-clientes-table tbody td.num.gpd-clientes-col-atual[data-venda="3"]:not(.gpd-clientes-visita){ color:#161B22; }
/* TOTAL e as linhas de %: texto branco/dourado e coluna presa azul-noite
   no escuro — no claro, azul e dourado claros com texto fechado */
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-total-row td{ color:#0B2A40; }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-total-row .gpd-clientes-sticky-col{ background:rgb(214,233,245); }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-total-row:hover .gpd-clientes-sticky-col{ background:rgb(197,221,238); }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--blue .gpd-clientes-sticky-col{ background:rgb(230,240,247); }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--blue:hover .gpd-clientes-sticky-col{ background:rgb(214,233,245); }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--yellow td,
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--yellow .gpd-clientes-sticky-col{ color:#7A5800; }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--yellow .gpd-clientes-sticky-col{ background:rgb(252,243,214); }
body.gpd-tema-claro .gpd-clientes-table .gpd-clientes-pct-row--yellow:hover .gpd-clientes-sticky-col{ background:rgb(250,234,186); }
/* coluna do mês atual: o azul translúcido quase some sobre o branco — no
   claro vira azul-claro sólido (a visita dourada continua por cima, ela é
   !important) */
body.gpd-tema-claro .gpd-clientes-table tbody td.gpd-clientes-col-atual{
  background:linear-gradient(180deg, rgb(226,237,252), rgb(212,227,249));
  box-shadow:inset 1px 0 0 rgba(60,130,240,0.45), inset -1px 0 0 rgba(60,130,240,0.45);
}
body.gpd-tema-claro .gpd-clientes-table thead th.gpd-clientes-col-atual{
  background:linear-gradient(180deg, rgb(200,222,252), rgb(178,207,247));
  color:#0B3F8A;
  text-shadow:none;
  box-shadow:inset 0 -2px 0 rgba(26,140,132,0.55), inset 1px 0 0 rgba(60,130,240,0.55), inset -1px 0 0 rgba(60,130,240,0.55);
}
/* visita: número dourado sobre célula dourada não lia no claro — número em
   dourado fechado, faixa e ponto mais escuros (mesmo recado, 3 marcas) */
body.gpd-tema-claro .gpd-clientes-visita,
body.gpd-tema-claro .gpd-clientes-add-cell.gpd-clientes-visita{
  background:linear-gradient(180deg, rgba(242,183,5,0.42), rgba(242,183,5,0.18)) !important;
  color:#6B4700 !important;
}
body.gpd-tema-claro .gpd-clientes-add-cell.gpd-clientes-visita{
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(200,145,0,0.65);
}
body.gpd-tema-claro .gpd-clientes-add-cell.gpd-clientes-visita::before{ background:#D9A200; }
body.gpd-tema-claro .gpd-clientes-add-cell.gpd-clientes-visita:not(.gpd-clientes-visita-multi)::after{
  background:#FFFFFF;
  box-shadow:0 0 6px rgba(217,162,0,0.9);
}

/* ---- Negócios não Realizados: linha em pílula igual à de Clientes & Vendas
   (pedido do usuário, 12/09/2026: "deixe a linha igual aos dos clientes",
   aprovado na prévia nos dois temas). Mesma receita e mesmo gate
   (body.gpd-vidro-liquido) do bloco VIDRO LÍQUIDO da tabela de clientes: a
   cor vem das variáveis --gpd-vl-row*, que o tema claro troca. Fica no FIM do
   arquivo de propósito — empata em peso com a regra do claro
   `body.gpd-tema-claro .gpd-plano-medidas-table tbody td` e precisa vencer
   pela ordem. Hover sem cor, como nos clientes.
   A célula do índice (.gpd-plano-medida-idx-cell) é display:flex na base, o
   que a tira do fluxo de tabela: ela virava uma caixinha baixa, solta do
   resto da linha (print do usuário, com o "4 ×" destacado). Aqui ela volta a
   ser table-cell; o padding cabe nos 64px do colgroup sem cortar o "×". */
/* Medidas (#gpdPlanoMedidas) entrou no mesmo bloco no mesmo dia — o usuário
   mandou print mostrando que a linha dela tinha ficado com a caixinha solta
   ("faltou"). Mesma estrutura de célula de índice e colgroup de 64px. */
body.gpd-vidro-liquido .gpd-plano-negocios-table,
body.gpd-vidro-liquido #gpdPlanoMedidas{ border-spacing:0 6px; }
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td,
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody tr:hover td,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody tr:hover td{
  background:var(--gpd-vl-row, linear-gradient(180deg, #282C33, #1D2026));
  box-shadow:var(--gpd-vl-row-shadow, inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -3px 6px rgba(0,0,0,0.32));
  border-color:transparent;
}
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td:first-child,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td:first-child{ border-radius:999px 0 0 999px; padding-left:14px; }
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td:last-child,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td:last-child{ border-radius:0 999px 999px 0; padding-right:18px; }
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td.gpd-plano-medida-idx-cell,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell{
  display:table-cell;
  white-space:nowrap;
  padding-left:8px;
  padding-right:4px;
}
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td.gpd-plano-medida-idx-cell .gpd-plano-medida-idx,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell .gpd-plano-medida-idx,
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td.gpd-plano-medida-idx-cell .gpd-remove-btn,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell .gpd-remove-btn{ vertical-align:middle; }
body.gpd-vidro-liquido .gpd-plano-negocios-table tbody td.gpd-plano-medida-idx-cell .gpd-remove-btn,
body.gpd-vidro-liquido #gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell .gpd-remove-btn{ margin-left:6px; }
/* Cabeçalho "Valor Total R$" do Negócios (4ª coluna, 150px no colgroup)
   quebrava em duas linhas: o rótulo em 12,5px negrito precisa de ~120px e o
   padding de 18px de cada lado só deixava 114px (print do usuário, 12/09/2026,
   "ajuste"). Padding menor só nessa coluna, sem mexer na largura do colgroup
   em js/gpd-plano.js. nowrap depois do padding: o texto cabe nos 130px. */
.gpd-plano-negocios-table thead th:nth-child(4){
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
}

/* Seletor de mês das Medidas automáticas (2026-09-12) — encosta à direita,
   antes do "+ Adicionar linha". */
.gpd-plano-medidas-mes{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
/* Atingido que vem sozinho (visitas na carteira / %Acessórios): só leitura.
   Borda tracejada = "não é pra digitar aqui"; a cor verde/vermelha do
   fechado/aberto continua valendo por cima. */
.gpd-plano-medida-input--auto{
  border-style:dashed !important;
  cursor:default;
}
.gpd-plano-medida-input--auto:focus{ outline:none; }

/* Quadrinhos do Frete no modo claro em cinza-claro vidro (pedido do usuário,
   12/09/2026: "deixe os cards em cinza claro vidro vai ficar melhor",
   aprovado na prévia). O vidro azul de .gpd-plano-kpis .kpi ficava apagado
   sobre o card cinza 20% mais escuro. Só o Frete e só no claro: os KPIs do
   Plano de Ação usam a mesma regra azul e ficam como estão. Sem
   backdrop-filter: atrás é o .card sólido, e é a causa conhecida de texto
   borrado no Android. Número segue no azul-aço do --steel. */
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi{
  background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(238,241,245,0.58));
  border:1px solid rgba(255,255,255,0.9);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60,70,90,0.08), 0 8px 18px -12px rgba(40,45,60,0.40);
}
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi:hover{ border-color:#FFFFFF; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi .label{ color:#4A4944; }

/* ---- Clientes & Vendas (modo claro) no padrão dos quadrinhos do Frete
   (pedido do usuário, 12/09/2026: "deixe os demais igual" + "ajustar a tabela
   de clientes com o mesmo padrão", aprovado na prévia). Só no claro; o
   escuro não muda. Cards coloridos (Compra acima/Sem compra/Ativados/
   Reativado) e o verde de "Visita fora da carteira" ficam de fora de
   propósito: a cor é o que diferencia cada um.
   Controles: mesmo vidro cinza-claro de .gpd-frete-vendor-tiles .kpi. O
   seletor de mês repete a seta SVG da regra base — o `background` abaixo
   substitui a camada inteira e, sem ela, a seta sumia (visto na prévia). */
body.gpd-tema-claro #gpdClientesStatMonth,
body.gpd-tema-claro #gpdVisitasOpenBtn,
body.gpd-tema-claro #gpdLocalizacaoOpenBtn,
body.gpd-tema-claro #gpdClientesReportBtn,
body.gpd-tema-claro #gpdAbcImportOpenBtn,
body.gpd-tema-claro .gpd-clientes-stat-card--neutral{
  background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(238,241,245,0.58));
  border:1px solid rgba(255,255,255,0.9);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60,70,90,0.08), 0 8px 18px -12px rgba(40,45,60,0.40);
}
body.gpd-tema-claro #gpdClientesStatMonth{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B93A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center,
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(238,241,245,0.58));
}
body.gpd-tema-claro #gpdClientesStatMonth:hover,
body.gpd-tema-claro #gpdVisitasOpenBtn:hover,
body.gpd-tema-claro #gpdLocalizacaoOpenBtn:hover,
body.gpd-tema-claro #gpdClientesReportBtn:hover,
body.gpd-tema-claro #gpdAbcImportOpenBtn:hover{ border-color:#FFFFFF; }
/* Tabela: some a caixa cinza em volta das linhas (elas ficam direto no card,
   como os quadrinhos) e cada linha ganha a sombra leve deles. Variáveis
   redefinidas SÓ na #gpdSalesTable: as mesmas --gpd-vl-row* pintam as linhas
   em pílula do Negócios/Medidas, que não entraram neste pedido. Fundo segue
   opaco — a coluna do cliente é sticky e precisa de fundo sólido. */
body.gpd-tema-claro #gpdSalesTableWrap{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
body.gpd-tema-claro #gpdSalesTable{
  --gpd-vl-row:linear-gradient(180deg, #FFFFFF, #ECEFF3);
  --gpd-vl-row-shadow:inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(60,70,90,0.10), 0 8px 16px -14px rgba(40,45,60,0.45);
}

/* Anel do hover das células de Clientes & Vendas no modo claro: vermelho
   forte e 3px (pedido do usuário, 12/09/2026: "realce mais o vermelho",
   opção C da prévia). O dourado translúcido de 2px sumia sobre as linhas
   brancas e a coluna azul do mês. Só o anel muda — o fundo da célula fica
   (tingir junto encardia com o azul do mês atual, visto na prévia).
   :not(.gpd-clientes-cell-active): o verde de "acabei de lançar" continua
   mandando no anel durante os 2s (regra irmã mais acima). */
body.gpd-tema-claro .gpd-clientes-add-cell:not(.gpd-clientes-cell-active):hover{
  outline-color:#D63A3B;
  outline-width:3px;
}

/* Cabeçalho do GPD com letras maiores (pedido do usuário, 12/09/2026:
   "retire e aumente as letras" — saiu o "· em desenvolvimento" do gpd.html).
   Escopado em .gpd-top-inner: o .brand-text de css/styles.css é o mesmo do
   Painel Comercial, que não muda. No celular cresce menos, pra não empurrar
   os botões do header. */
.gpd-top-inner .brand-text .name{ font-size:30px; }
.gpd-top-inner .brand-text .tag{ font-size:14px; margin-top:6px; }
@media (max-width:640px){
  .gpd-top-inner .brand-text .name{ font-size:24px; }
  .gpd-top-inner .brand-text .tag{ font-size:12px; margin-top:4px; }
}

/* Topo do card Plano de Ação com letras maiores (pedido do usuário,
   12/09/2026: "aumente também", aprovado na prévia). Título no mesmo tamanho
   do card Clientes & Vendas (19px); subtítulo, rótulo "Vendedor / Região" e o
   seletor customizado sobem junto. `> h3`/`> .card-sub`: só o cabeçalho do
   card, não os títulos internos (Medidas, Negócios...). */
.gpd-plano-card > h3{ font-size:19px; }
.gpd-plano-card > .card-sub{ font-size:13.5px; }
.gpd-plano-toolbar label{ font-size:13.5px; }
.gpd-plano-toolbar .gpd-select-custom-btn{
  font-size:15px;
  padding:10px 36px 10px 16px;
  min-width:240px;
  max-width:300px;
}

/* ---- Plano Mensal (modo claro): Meta Mensal, Meta Acumulada e Resultado
   Acumulado em maior destaque (pedido do usuário, 12/09/2026, aprovado na
   prévia). Classes vêm de gpdPlanoRowDestaqueCls em js/gpd-plano.js, na <tr>
   E na linha do overlay da coluna presa (.gpd-plano-sticky-overlay-row) —
   é o overlay que aparece por cima do td.name, então os dois recebem a
   mesma cor, sempre opaca. O tom do trimestre atual (box-shadow em
   td.gpd-plano-col-current-q) continua por cima. Modo escuro não muda. */
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque td,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-destaque{
  font-weight:800;
  font-size:15.5px;
}
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque-meta td{ background:rgba(242,183,5,0.42); color:#3A2A00; }
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque-meta td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-destaque-meta{
  background:rgb(247,216,120);
  color:#3A2A00;
  box-shadow:inset 5px 0 0 #D9A200;
}
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque-resultado td,
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque-resultado td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-destaque-resultado{
  background:linear-gradient(180deg, rgb(178,213,236), rgb(156,199,229));
  color:#06263D;
}
body.gpd-tema-claro .gpd-plano-table tr.gpd-plano-row-destaque-resultado td.name,
body.gpd-tema-claro .gpd-plano-sticky-overlay-row.gpd-plano-row-destaque-resultado{ box-shadow:inset 5px 0 0 #2A7BA8; }

/* ---- Clientes & Vendas (modo claro): TOTAL, "% Sobre o Realizado" e
   "% s/ mês anterior" com a cor até o fim da linha (pedido do usuário,
   12/09/2026: "mantenha as cores até o fim", aprovado na prévia). Antes só a
   coluna presa tinha cor: `body.gpd-tema-claro .gpd-plano-medidas-table
   tbody td{ background:#FFF }` pesa mais que `.gpd-clientes-total-row td`.
   Mesmos valores opacos já usados na coluna presa dessas linhas. A marca da
   coluna do mês atual (bordas azuis por box-shadow) continua. */
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-total-row td{ background:rgb(214,233,245); }
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-total-row:hover td{ background:rgb(197,221,238); }
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-pct-row--blue td{ background:rgb(230,240,247); }
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-pct-row--blue:hover td{ background:rgb(214,233,245); }
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-pct-row--yellow td{ background:rgb(252,243,214); }
body.gpd-tema-claro .gpd-clientes-table tbody tr.gpd-clientes-pct-row--yellow:hover td{ background:rgb(250,234,186); }

/* ---------- Prévia da tela que substitui "Negócios não Realizados" ----------
   16/09/2026, ainda com números de exemplo: só aparece com ?mix=1 na URL
   (ver js/gpd-mix-preview.js). O bloco antigo é escondido por esta classe no
   <body>, e não por .hidden nele, porque o GPD tira o .hidden a cada troca de
   vendedor e o bloco voltaria sozinho. Sem backdrop-filter em nada disto. */
body.gpd-mix-on #gpdPlanoNegociosWrap{ display:none !important; }

.gpd-mix-preview-tag{
  padding:4px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#241a03;
  background:linear-gradient(160deg, #ffe066 0%, #D9A441 55%, #a06f13 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), 0 2px 5px rgba(0,0,0,0.35);
}
.gpd-mix-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  margin:4px 0 16px;
}
.gpd-mix-card{
  padding:14px 16px;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 16px -10px rgba(0,0,0,0.7);
}
.gpd-mix-card-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.gpd-mix-card-val{
  margin-top:6px;
  font-size:26px;
  font-weight:800;
  color:var(--text);
  line-height:1.1;
}
.gpd-mix-card-unit{
  margin-left:6px;
  font-size:12px;
  font-weight:700;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.gpd-mix-card-sub{ margin-top:4px; font-size:12.5px; color:var(--text-dim, var(--text-faint)); }
.gpd-mix-card-pct{ margin-top:5px; font-size:11.5px; color:var(--text-faint); }
.gpd-mix-bar{
  margin-top:9px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.09);
  overflow:hidden;
}
.gpd-mix-bar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #4F9AC0, #7FBFC4);
}
.gpd-mix-bar--row{ margin:0; min-width:70px; }
.gpd-mix-card--grupo[data-grupo="Serralheria"] .gpd-mix-card-val{ color:#9ED0E6; }
.gpd-mix-card--grupo[data-grupo="Telhas"] .gpd-mix-card-val{ color:#F0C868; }
.gpd-mix-card--grupo[data-grupo="Acessórios"] .gpd-mix-card-val{ color:#8FD8AE; }
.gpd-mix-livre{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin-bottom:18px;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.08);
}
.gpd-mix-livre-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.gpd-mix-livre label{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text-faint); }
.gpd-mix-livre input{
  width:120px;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  font-weight:700;
}
.gpd-mix-livre-result{ margin-left:auto; font-size:14px; color:var(--text); }
.gpd-mix-title-2{ margin-top:6px; }
.gpd-mix-linha-nome{ display:flex; align-items:center; gap:8px; }
.gpd-mix-grupo-chip{
  padding:2px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:#0C1013;
  background:#8FA3AE;
}
.gpd-mix-grupo-chip[data-grupo="Serralheria"]{ background:#9ED0E6; }
.gpd-mix-grupo-chip[data-grupo="Telhas"]{ background:#F0C868; }
.gpd-mix-grupo-chip[data-grupo="Acessórios"]{ background:#8FD8AE; }
.gpd-mix-table tbody .gpd-mix-total-row td{ font-weight:800; background:rgba(79,154,192,0.16); }
@media (max-width: 640px){
  .gpd-mix-livre-result{ margin-left:0; width:100%; }
  .gpd-mix-card-val{ font-size:22px; }
}

/* Dois cards de entrada da tela nova (16/09/2026): a seção abre só com eles
   e o detalhe (faixas de valor ou linhas de produto) aparece embaixo. São
   <button> de verdade, então já respondem a teclado e leitor de tela. */
.gpd-mix-entradas{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
  margin:4px 0 16px;
}
.gpd-mix-entrada{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  width:100%;
  padding:18px 20px;
  border-radius:18px;
  cursor:pointer;
  text-align:left;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px -14px rgba(0,0,0,0.85);
  transition:transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.gpd-mix-entrada:hover{ transform:translateY(-1px); border-color:rgba(79,154,192,0.45); }
.gpd-mix-entrada--ativa{
  border-color:rgba(79,154,192,0.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 10px 22px -12px rgba(79,154,192,0.6);
}
.gpd-mix-entrada-label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.gpd-mix-entrada-val{ font-size:30px; font-weight:800; line-height:1.15; color:#9ED0E6; }
.gpd-mix-entrada--produtos .gpd-mix-entrada-val{ color:#F0C868; }
.gpd-mix-entrada-unit{
  margin-left:7px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.gpd-mix-entrada-sub{ font-size:12.5px; color:var(--text-faint); }
.gpd-mix-entrada-cta{
  margin-top:8px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#9ED0E6;
}
.gpd-mix-entrada--produtos .gpd-mix-entrada-cta{ color:#F0C868; }
.gpd-mix-entrada--ativa .gpd-mix-entrada-cta::after{ content:' ▴'; }
.gpd-mix-entrada:not(.gpd-mix-entrada--ativa) .gpd-mix-entrada-cta::after{ content:' ▾'; }
.gpd-mix-detalhe{ margin-top:2px; }

/* Modal "Importar PDFs" da tela nova (prévia, 16/09/2026). Sem
   backdrop-filter em nada aqui: já custou caro neste projeto três vezes
   (texto do botão borrado por filtro em elemento irmão). */
.gpd-mix-modal{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:18px; }
.gpd-mix-modal.hidden{ display:none; }
.gpd-mix-modal-backdrop{ position:absolute; inset:0; background:rgba(4,8,12,0.72); }
.gpd-mix-modal-card{
  position:relative;
  width:min(720px, 100%);
  max-height:86vh;
  overflow:auto;
  padding:22px 24px 24px;
  border-radius:20px;
  background:var(--panel);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.9);
}
.gpd-mix-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.gpd-mix-modal-title{ font-size:18px; font-weight:800; color:var(--text); }
.gpd-mix-modal-sub{ margin-top:3px; font-size:12.5px; color:var(--text-faint); }
.gpd-mix-modal-close{
  flex:none;
  width:32px; height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.gpd-mix-slot{
  padding:14px 16px;
  border-radius:16px;
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.08);
}
.gpd-mix-slot + .gpd-mix-slot{ margin-top:12px; }
.gpd-mix-slot-titulo{ font-size:14px; font-weight:800; color:var(--text); }
.gpd-mix-slot-ajuda{ margin-top:2px; font-size:12.5px; color:var(--text-faint); }
.gpd-mix-slot-file{ display:inline-block; margin-top:10px; }
.gpd-mix-slot-file input{ display:none; }
.gpd-mix-slot-file span{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:700;
  color:#0C1013;
  background:linear-gradient(160deg, #b7e2f7 0%, #4F9AC0 55%, #2b607d 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.6), 0 3px 8px -3px rgba(0,0,0,0.6);
}
.gpd-mix-slot-status{ margin-top:9px; font-size:12.5px; color:var(--text-faint); }
.gpd-mix-slot-out{
  margin-top:10px;
  max-height:240px;
  overflow:auto;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,0.35);
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  line-height:1.5;
  color:var(--text);
  white-space:pre;
}
.gpd-mix-slot-out.hidden{ display:none; }

/* Tela "Pedidos e Produtos" com PDF importado (16/09/2026). */
.gpd-mix-preview-tag--real{
  color:#0c2417;
  background:linear-gradient(160deg, #a9edc6 0%, #4FAE7C 55%, #1f6b45 100%);
}
.gpd-mix-entrada-origem{ margin-top:2px; font-size:11.5px; color:var(--text-faint); opacity:0.85; }
.gpd-mix-table tbody .gpd-mix-grupo-row td{ font-weight:800; background:rgba(255,255,255,0.05); }
.gpd-mix-grupo-chip[data-grupo^="ACESSORIOS"]{ background:#8FD8AE; }
.gpd-mix-grupo-chip[data-grupo="SERRALHERIA"]{ background:#9ED0E6; }
.gpd-mix-grupo-chip[data-grupo="TELHAS"]{ background:#F0C868; }
.gpd-mix-card--grupo[data-grupo^="ACESSORIOS"] .gpd-mix-card-val{ color:#8FD8AE; }
.gpd-mix-card--grupo[data-grupo="SERRALHERIA"] .gpd-mix-card-val{ color:#9ED0E6; }
.gpd-mix-card--grupo[data-grupo="TELHAS"] .gpd-mix-card-val{ color:#F0C868; }
.gpd-mix-slot-status--erro{ color:#F08A7A; font-weight:700; }
.gpd-mix-limpar{
  margin-top:14px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:transparent;
  color:var(--text-faint);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

/* Faixa livre em vidro 3D (16/09/2026, "melhore o card e as flechas, use
   mais 3D vidro"): card com brilho em cima e sombra funda, campo de valor
   afundado (inset) e botões − / + redondos na receita de vidro do painel
   (gradiente 160deg + brilho inset + sombra externa). Sem backdrop-filter. */
.gpd-mix-livre{
  gap:14px 18px;
  padding:16px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 45%, rgba(0,0,0,0.10) 100%), var(--panel-2);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    inset 0 -8px 14px -8px rgba(0,0,0,0.35),
    0 10px 24px -14px rgba(0,0,0,0.75);
}
.gpd-mix-step{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.gpd-mix-step-rotulo{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text-faint);
}
.gpd-mix-livre .gpd-mix-step-input{
  width:118px;
  padding:9px 14px;
  border-radius:999px;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  font-weight:800;
  color:var(--text);
  background:linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.12));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.10),
    0 1px 0 rgba(255,255,255,0.08);
  outline:none;
}
.gpd-mix-livre .gpd-mix-step-input:focus{
  border-color:rgba(79,154,192,0.8);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.45),
    0 0 0 3px rgba(79,154,192,0.28);
}
.gpd-mix-step-btn{
  flex:none;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:800;
  line-height:1;
  color:#0C1013;
  background:linear-gradient(160deg, #b7e2f7 0%, #4F9AC0 55%, #2b607d 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -5px 7px -3px rgba(8,50,70,0.45),
    0 2px 4px rgba(0,0,0,0.35),
    0 6px 12px -4px rgba(79,154,192,0.5);
  transition:transform 90ms ease, box-shadow 90ms ease;
}
.gpd-mix-step-btn:hover{ transform:translateY(-1px); }
.gpd-mix-step-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 5px rgba(8,50,70,0.55),
    0 1px 2px rgba(0,0,0,0.35);
}
.gpd-mix-livre-result{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 10px;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  color:var(--text-faint);
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
}
.gpd-mix-livre-num{ font-size:15px; font-weight:800; color:var(--text); }
.gpd-mix-livre-sep{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.3); }
@media (max-width: 640px){
  .gpd-mix-livre .gpd-mix-step-input{ width:100px; }
}

/* Barras de participação maiores e visíveis nos dois temas (16/09/2026).
   Trilho escuro translúcido (o branco translúcido sumia no tema claro) e
   preenchimento em vidro 3D na cor do grupo. */
.gpd-mix-bar{
  height:10px;
  background:rgba(20,30,40,0.18);
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
}
.gpd-mix-bar span{
  background:linear-gradient(180deg, #b7e2f7 0%, #4F9AC0 55%, #2b607d 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 3px rgba(79,154,192,0.45);
}
.gpd-mix-bar--row{
  width:100%;
  min-width:160px;
  height:12px;
}
.gpd-mix-bar--row[data-grupo="TELHAS"] span{
  background:linear-gradient(180deg, #ffe39a 0%, #D9A441 55%, #a06f13 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(217,164,65,0.45);
}
.gpd-mix-bar--row[data-grupo^="ACESSORIOS"] span{
  background:linear-gradient(180deg, #b9f0d0 0%, #4FAE7C 55%, #1f6b45 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 3px rgba(79,174,124,0.45);
}
.gpd-mix-table td.num:has(.gpd-mix-bar--row){ min-width:190px; }

/* Cards de resumo da seção antiga, movidos pra dentro da prévia (16/09/2026). */
.gpd-mix-wrap #gpdPlanoNegociosSummary{ margin-top:18px; }
.gpd-mix-origem-pdf{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:0.05em;
  color:#0c2417;
  background:linear-gradient(160deg, #a9edc6 0%, #4FAE7C 55%, #1f6b45 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  vertical-align:middle;
}

/* Legibilidade da prévia (16/09/2026, "melhore a visualização"): os textos
   de apoio estavam em 11-12px com a cor apagada do tema e sumiam no escuro.
   Valor em R$ ganhou linha própria e em destaque; rótulos e percentuais
   subiram de tamanho e de contraste. Cards das faixas em vidro 3D, mesma
   receita do card da faixa livre. */
.gpd-mix-card{
  padding:16px 18px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.08) 100%), var(--panel-2);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    inset 0 -8px 14px -10px rgba(0,0,0,0.35),
    0 10px 22px -14px rgba(0,0,0,0.75);
}
.gpd-mix-card-label{ font-size:12.5px; color:var(--text); opacity:0.75; }
.gpd-mix-card-val{ font-size:30px; }
.gpd-mix-card-unit{ font-size:12.5px; color:var(--text); opacity:0.6; }
.gpd-mix-card-money{
  margin-top:4px;
  font-size:16px;
  font-weight:800;
  color:#9ED0E6;
  font-variant-numeric:tabular-nums;
}
.gpd-mix-card-sub{ margin-top:2px; font-size:13.5px; font-weight:600; color:var(--text); opacity:0.8; }
.gpd-mix-card .gpd-mix-bar{ margin-top:12px; height:10px; }
.gpd-mix-card-pct{ margin-top:7px; font-size:13px; color:var(--text); opacity:0.75; }
.gpd-mix-card-pct b{ font-size:14px; font-weight:800; opacity:1; color:var(--text); }

.gpd-mix-entrada-label{ font-size:13px; color:var(--text); opacity:0.75; }
.gpd-mix-entrada-val{ font-size:34px; }
.gpd-mix-entrada-unit{ font-size:13px; color:var(--text); opacity:0.6; }
.gpd-mix-entrada-money{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.gpd-mix-entrada-sub{ font-size:14px; font-weight:600; color:var(--text); opacity:0.8; }
.gpd-mix-entrada-origem{ font-size:12px; color:var(--text); opacity:0.55; }
.gpd-mix-entrada-cta{ margin-top:10px; font-size:12.5px; }

/* Resultado da faixa livre legível (16/09/2026, "aqui também"): os rótulos
   "pedido(s)" e "cliente(s)" estavam na cor apagada do tema e sumiam no
   escuro. */
.gpd-mix-livre-result{
  gap:6px 12px;
  padding:9px 18px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.gpd-mix-livre-result .gpd-mix-livre-num{ font-size:17px; font-weight:800; color:#9ED0E6; }
.gpd-mix-livre-result .gpd-mix-livre-num:last-child{ color:var(--text); }
.gpd-mix-livre-sep{ width:5px; height:5px; background:rgba(158,208,230,0.55); }

/* Cards de faixa clicáveis + lista de clientes da faixa (16/09/2026). */
.gpd-mix-card--faixa{
  display:block;
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.gpd-mix-card--faixa:hover{ transform:translateY(-1px); border-color:rgba(79,154,192,0.5); }
/* Faixa aberta: precisa ficar claro QUAL card está mostrando a lista abaixo
   (23/09/2026: "não mudou a visualização do card marcado" — a borda azul de
   antes praticamente sumia no tema claro). Fundo tingido, borda forte, o card
   sobe um pouco e ganha uma tarja no topo. */
.gpd-mix-card--ativo{
  border-color:#2A7FA6;
  background:
    linear-gradient(180deg, rgba(79,154,192,0.22) 0%, rgba(79,154,192,0.10) 55%, rgba(79,154,192,0.06) 100%),
    var(--panel-2);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.25),
    0 0 0 3px rgba(79,154,192,0.30),
    0 16px 30px -14px rgba(42,127,166,0.65);
  transform:translateY(-2px);
  position:relative;
  overflow:hidden;
}
.gpd-mix-card--ativo::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, #2A7FA6, #7FC3DD);
}
.gpd-mix-card--ativo .gpd-mix-card-label,
.gpd-mix-card--ativo .gpd-mix-card-cta{ color:#1F6A8C; }
html.tema-vidro .gpd-mix-card--ativo .gpd-mix-card-label,
html.tema-vidro .gpd-mix-card--ativo .gpd-mix-card-cta{ color:#9FD8F0; }
.gpd-mix-card--ativo:hover{ transform:translateY(-2px); }
.gpd-mix-card-cta{
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#9ED0E6;
}
.gpd-mix-card-cta::after{ content:' ▾'; }
.gpd-mix-card--ativo .gpd-mix-card-cta::after{ content:' ▴'; }

.gpd-mix-livre-result{ font:inherit; cursor:pointer; }
.gpd-mix-livre-result:hover{ border-color:rgba(79,154,192,0.55); }
.gpd-mix-livre-result--ativo{
  border-color:rgba(79,154,192,0.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 2px rgba(79,154,192,0.3);
}

.gpd-mix-clientes{
  margin:0 0 18px;
  padding:14px 16px 6px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(79,154,192,0.10), rgba(79,154,192,0.03)), var(--panel-2);
  border:1px solid rgba(79,154,192,0.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 22px -14px rgba(0,0,0,0.75);
}
.gpd-mix-clientes-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 16px;
  margin-bottom:10px;
}
.gpd-mix-clientes-titulo{ font-size:15px; font-weight:800; color:var(--text); }
.gpd-mix-clientes-resumo{ font-size:13.5px; font-weight:600; color:var(--text); opacity:0.85; }
.gpd-mix-clientes-resumo b{ color:#9ED0E6; font-size:15px; }
/* Filtro da lista de clientes (28/09/2026) — mesmo campo da busca da
   Cobrança (.gpd-cobranca-search), só com variáveis de tema: vale no claro e
   no escuro. Fica entre o título e o resumo; no celular desce pra linha
   própria, largura cheia. */
.gpd-mix-clientes-busca{
  flex:1 1 240px;
  max-width:380px;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  color:var(--text);
  padding:8px 12px;
  font-size:13.5px;
  font-family:'Inter', sans-serif;
  outline:none;
  align-self:center;
}
.gpd-mix-clientes-busca:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,183,5,0.12); }
.gpd-mix-clientes-busca::placeholder{ color:var(--text-faint); }
.gpd-mix-clientes-busca::-webkit-search-cancel-button{ cursor:pointer; }
@media (max-width:640px){ .gpd-mix-clientes-busca{ flex-basis:100%; max-width:none; order:3; } }
.gpd-mix-clientes-vazio{ padding:6px 0 12px; font-size:13.5px; color:var(--text); opacity:0.7; }
.gpd-mix-clientes-table td{ font-size:13.5px; }
.gpd-mix-cliente-nome{ font-weight:700; }
.gpd-mix-cliente-valor{ font-weight:800; }
/* Linha do cliente clicável: abre a sub-tela com os orçamentos dele um a um
   (24/09/2026, "permita clicar em cima e mostrar os pedidos individuais"). A
   dica "ver um a um" só aparece no hover no mouse; no toque ela fica sempre
   visível (não existe hover no celular), ver a regra hover:none abaixo. */
.gpd-mix-cli-linha{ cursor:pointer; }
.gpd-mix-cli-linha:hover > td{ background:rgba(255,255,255,0.05); }
.gpd-mix-cli-qtd{
  display:inline-block;
  min-width:26px;
  padding:1px 8px;
  border-radius:999px;
  font-weight:800;
  background:rgba(158,208,230,0.16);
  border:1px solid rgba(158,208,230,0.32);
}
.gpd-mix-cli-ver{
  display:inline-block;
  margin-left:4px;
  font-size:11px;
  font-weight:800;
  letter-spacing:0.02em;
  color:#9ED0E6;
  opacity:0;
  transition:opacity 0.15s ease;
}
.gpd-mix-cli-linha:hover .gpd-mix-cli-ver{ opacity:1; }
@media (hover: none){ .gpd-mix-cli-ver{ opacity:0.75; } }
body.gpd-tema-claro .gpd-mix-cli-linha:hover > td{ background:rgba(14,111,134,0.07); }
body.gpd-tema-claro .gpd-mix-cli-qtd{ background:rgba(14,111,134,0.10); border-color:rgba(14,111,134,0.28); }
body.gpd-tema-claro .gpd-mix-cli-ver{ color:#0E6F86; }

/* Sub-tela dos orçamentos do cliente. Fica ABAIXO do card de situação
   (z-index 60), que abre por cima dela sem fechá-la. */
.gpd-mix-modal--sub{ z-index:58; }
.gpd-mix-pedidos-card{ width:min(760px, 100%); }
/* Sem barra de rolagem lateral aqui (pedido do usuário 24/09/2026: "sem a
   barra de rolagem, use o espaço da tela"): a tabela cabe no card, então o
   wrap não precisa rolar. overflow-x:visible mantém o dropdown do card de
   situação livre pra vazar, como a nota do wrap original pede. */
.gpd-mix-pedidos-card .gpd-plano-medidas-table-wrap{ overflow-x:visible; }
/* A tabela grande nasce com min-width:900px (é feita pra largura da tela
   inteira). Dentro do modal isso empurrava a coluna Valor pra fora do card —
   o usuário via só Nº e Situação, com o resto escondido atrás do scroll
   lateral. Aqui ela se ajusta ao card e as colunas ficam todas à vista. */
.gpd-mix-pedidos-table{ min-width:0; width:100%; table-layout:auto; border-spacing:0 8px; }
.gpd-mix-pedidos-table thead th{ padding:10px 12px; font-size:11.5px; }
.gpd-mix-pedidos-table tbody td,
.gpd-mix-pedidos-table tfoot td{ padding:10px 12px; }
.gpd-mix-pedidos-table .gpd-mix-sit-cell{ width:1%; white-space:nowrap; }
.gpd-mix-pedidos-num{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}
.gpd-mix-pedidos-cidade{ font-size:12.5px; color:var(--text); opacity:0.85; }
@media (max-width: 520px){
  .gpd-mix-pedidos-table thead th,
  .gpd-mix-pedidos-table tbody td,
  .gpd-mix-pedidos-table tfoot td{ padding:8px 9px; }
  /* Em tela de celular o Município sai da tabela — ele já está no
     cabeçalho do card ("PASSO FUNDO · 2 orçamento(s)") e é sempre o mesmo
     cliente. Some a coluna inteira (th e td têm a mesma classe) em vez de
     apertar quatro colunas e trazer a barra de rolagem de volta. */
  .gpd-mix-pedidos-table .gpd-mix-pedidos-cidade{ display:none; }
  .gpd-mix-pedidos-table .gpd-mix-sit-btn{ padding:7px 10px; }
  .gpd-mix-pedidos-table .gpd-mix-cliente-valor{ font-size:12.5px; white-space:nowrap; }
}
.gpd-mix-pedidos-table tfoot td{
  font-weight:800;
  border-top:1px solid rgba(255,255,255,0.16);
}
body.gpd-tema-claro .gpd-mix-pedidos-table tfoot td{ border-top-color:rgba(14,32,60,0.18); }
.gpd-mix-pedidos-faixa{
  margin-top:5px;
  font-size:11.5px;
  color:var(--text-faint);
}
.gpd-mix-pedidos-faixa b{ color:var(--text); opacity:0.9; }
.gpd-mix-pedidos-ajuda{
  margin-top:12px;
  font-size:12px;
  line-height:1.45;
  color:var(--text-faint);
}

.gpd-mix-pedidos-nums{ white-space:normal; }
.gpd-mix-pedidos-nums span{
  display:inline-block;
  margin:2px 4px 2px 0;
  padding:1px 8px;
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  color:var(--text);
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
}

/* Card de Frete — acabamento novo (16/09/2026, "neste também dá pra
   melhorar"): validado em prévia (?mix=1) e aprovado pelo usuário no mesmo
   dia, agora vale pra todo mundo. Mesma linha da tela Pedidos e Produtos: tiles em
   vidro 3D, rótulo e subtítulo legíveis no escuro, valor maior; percentual
   em azul, dinheiro em branco, contagem em dourado (data-fmt do tile). */
.gpd-frete-vendor-head h3{ font-size:17px; letter-spacing:0.02em; }
#gpdFreteVendorSub{ font-size:13.5px; color:var(--text); opacity:0.78; }
.gpd-frete-vendor-tiles{ gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.gpd-frete-vendor-tiles .kpi{
  padding:16px 16px 14px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.08) 100%), var(--panel-2);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.18),
    inset 0 -8px 14px -10px rgba(0,0,0,0.35),
    0 10px 22px -14px rgba(0,0,0,0.75);
}
.gpd-frete-vendor-tiles .kpi .label{
  font-size:12.5px;
  font-weight:700;
  line-height:1.25;
  color:var(--text);
  opacity:0.78;
}
.gpd-frete-vendor-tiles .kpi .val{
  margin-top:8px;
  font-size:clamp(18px, 1.5vw, 22px);
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.gpd-frete-vendor-tiles .kpi[data-fmt="pct"] .val{ color:#9ED0E6; }
.gpd-frete-vendor-tiles .kpi[data-fmt="count"] .val{ color:#F0C868; }
.gpd-frete-mes-select{
  /* 30px à direita: espaço da setinha do fundo (right 12px). Com 12px a seta
     ficava por cima do texto ("Se▾t") — 18/09/2026. */
  padding:7px 30px 7px 14px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 10px -6px rgba(0,0,0,0.7);
}

/* Janela do import da Rotatividade (16/09/2026) — reaproveita o modal da
   prévia Pedidos e Produtos (.gpd-mix-modal*). */
.gpd-rot-card{ width:min(820px, 100%); }
.gpd-rot-table td{ font-size:13.5px; }
.gpd-rot-table td b{ color:#9ED0E6; font-size:14.5px; }
.gpd-rot-fora td{ opacity:0.6; font-style:italic; }
.gpd-rot-acoes{ display:flex; justify-content:flex-end; margin-top:14px; }
.gpd-mix-step-btn.gpd-rot-gravar{
  width:auto;
  height:auto;
  padding:10px 22px;
  border-radius:999px;
  font-size:14px;
}
.gpd-mix-step-btn.gpd-rot-gravar:disabled{ opacity:0.45; cursor:not-allowed; transform:none; }

/* Ajuste da janela da Rotatividade (16/09/2026, "ajuste de card"): a tabela
   herdava min-width:900px de .gpd-plano-medidas-table e passava da borda do
   card, cortando a coluna Positivações. Aqui ela cabe na janela: largura
   mínima zerada, colunas fixas em %, linhas mais baixas. */
.gpd-rot-card{ width:min(900px, calc(100vw - 36px)); }
.gpd-rot-card .gpd-plano-medidas-table-wrap{ overflow-x:hidden; }
.gpd-plano-medidas-table.gpd-rot-table{
  min-width:0;
  width:100%;
  table-layout:fixed;
  border-spacing:0 6px;
}
.gpd-rot-table th:nth-child(1), .gpd-rot-table td:nth-child(1){ width:34%; }
.gpd-rot-table th:nth-child(2), .gpd-rot-table td:nth-child(2){ width:18%; }
.gpd-rot-table th:nth-child(3), .gpd-rot-table td:nth-child(3){ width:24%; }
.gpd-rot-table th:nth-child(4), .gpd-rot-table td:nth-child(4){ width:24%; }
.gpd-plano-medidas-table.gpd-rot-table thead th{ padding:10px 12px; font-size:11.5px; }
.gpd-plano-medidas-table.gpd-rot-table tbody td{
  padding:9px 12px;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gpd-rot-table .gpd-rot-fora td{ white-space:normal; }
@media (max-width: 640px){
  .gpd-rot-table th:nth-child(2), .gpd-rot-table td:nth-child(2){ display:none; }
  .gpd-rot-table th:nth-child(1), .gpd-rot-table td:nth-child(1){ width:40%; }
  .gpd-rot-table th:nth-child(3), .gpd-rot-table td:nth-child(3),
  .gpd-rot-table th:nth-child(4), .gpd-rot-table td:nth-child(4){ width:30%; }
}

/* Detalhe sem PDF importado pro vendedor (tela Pedidos e Produtos ativa pra
   todos desde 16/09/2026 — sem números de exemplo). */
.gpd-mix-vazio{
  padding:18px 20px;
  margin-bottom:16px;
  border-radius:16px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  opacity:0.75;
  background:var(--panel-2);
  border:1px dashed rgba(255,255,255,0.18);
}

/* Card de meses da tela Pedidos e Produtos (16/09/2026, "abrir um card para
   puxar os meses"): pílulas por mês, a ativa em vidro 3D azul; mês com PDF
   guardado ganha um ponto verde. Rola na horizontal no celular. */
.gpd-mix-meses{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 14px;
  padding:10px 14px;
  border-radius:16px;
  overflow-x:auto;
  background:linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), var(--panel-2);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 18px -14px rgba(0,0,0,0.75);
}
.gpd-mix-meses-label{
  flex:none;
  margin-right:4px;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
  opacity:0.7;
}
.gpd-mix-mes{
  position:relative;
  flex:none;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  transition:transform 100ms ease, border-color 100ms ease;
}
.gpd-mix-mes:hover{ transform:translateY(-1px); border-color:rgba(79,154,192,0.5); }
.gpd-mix-mes--dados::after{
  content:'';
  position:absolute;
  top:4px;
  right:5px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#4FAE7C;
  box-shadow:0 0 0 1.5px rgba(0,0,0,0.35);
}
.gpd-mix-mes--ativo{
  color:#0C1013;
  border-color:transparent;
  background:linear-gradient(160deg, #b7e2f7 0%, #4F9AC0 55%, #2b607d 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -4px 6px -3px rgba(8,50,70,0.45),
    0 4px 10px -4px rgba(79,154,192,0.55);
}
.gpd-mix-import-mes{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
}
.gpd-mix-import-mes select{
  padding:7px 12px;
  border-radius:999px;
  font:inherit;
  color:var(--text);
  background:var(--panel-2);
  border:1px solid rgba(255,255,255,0.18);
}

/* TOTAL GERAL: etiqueta "Soma de todos os vendedores" no lugar do Importar
   PDFs (16/09/2026). */
/* 18/09/2026 ("não está legal, deixe em verde"): era dourado translúcido e
   no tema claro sumia — a regra de claro usava :root[data-theme="light"],
   que o GPD não usa (o claro é body.gpd-tema-claro). Agora verde 3D sólido,
   texto branco, igual nos dois temas; mesma receita do botão ao lado
   (#gpdMixGeralBtn). */
.gpd-mix-soma-tag,
#gpdMixGeralBtn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  border: 1px solid #17663f;
  background: linear-gradient(180deg, #6cc796 0%, #3fa46e 48%, #2f8a5a 52%, #1f6b45 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .5),
    inset 0 -4px 7px -3px rgba(6, 40, 22, .55),
    0 2px 3px rgba(0, 0, 0, .3),
    0 8px 16px -6px rgba(47, 138, 90, .55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
#gpdMixGeralBtn { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
/* .excel-btn:hover pinta o texto de dourado — repinta branco aqui. */
#gpdMixGeralBtn:hover {
  color: #fff;
  border-color: #17663f;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .55),
    inset 0 -4px 7px -3px rgba(6, 40, 22, .55),
    0 3px 5px rgba(0, 0, 0, .3),
    0 12px 22px -8px rgba(63, 164, 110, .7);
}
#gpdMixGeralBtn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 5px rgba(6, 40, 22, .5), 0 1px 2px rgba(0, 0, 0, .3);
}

/* Frete: texto dos tiles centralizado (pedido do usuário 16/09/2026). Coluna
   flex centrada na vertical também, pra rótulo de 1 e de 3 linhas alinharem
   o valor na mesma altura visual. */
.gpd-frete-vendor-tiles .kpi{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.gpd-frete-vendor-tiles .kpi .label{ justify-content:center; }

/* Busca por cidade da lista mobile (16/09/2026): mesmo campo da busca por
   nome logo acima; só aparece no celular, junto com ela. */
.gpd-clientes-mobile-cidade{
  display:none;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
  padding:6px 12px;
  margin:0 0 8px;
}
.gpd-clientes-mobile-cidade:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(242,183,5,0.14);
}
.gpd-clientes-mobile-cidade-select{
  flex:1;
  min-width:0;
  border:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  font-family:'Inter', sans-serif;
  padding:4px 0;
  outline:none;
}
.gpd-clientes-mobile-cidade-select option{ background:var(--panel-2); color:var(--text); }
@media (max-width:640px){
  .gpd-clientes-mobile-cidade{ display:flex; }
  .gpd-clientes-mobile-cidade.hidden{ display:none; }
}

/* Legenda dos vendedores da região no celular (16/09/2026): os cards numa
   linha só, dividindo a largura por igual; nome longo corta com reticências
   em vez de quebrar pra segunda linha. */
@media (max-width:640px){
  .gpd-clientes-vendedores:not(.hidden){
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0, 1fr);
    gap:6px;
  }
  .gpd-clientes-vend-chip{
    min-width:0;
    gap:6px;
    padding:4px 8px 4px 4px;
    font-size:12px;
  }
  .gpd-clientes-vend-chip .gpd-clientes-vend-badge{
    width:22px;
    height:22px;
    font-size:11px;
  }
  .gpd-clientes-vend-nome{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Clientes & Vendas (desktop): os 3 botões da direita no padrão vidro 3D
   (pedido do usuário 16/09/2026, print com setas). Mesma largura e altura
   pros três; verde = visita, azul = relatório, dourado = faturamento.
   Sem backdrop-filter (já borrou texto neste projeto) e texto sempre dentro
   de <span> (ver .gpd-btn-glass-green span); hover NÃO troca a cor do texto
   (o dourado sobre dourado já sumiu 6 vezes). */
@media (min-width:641px){
  .gpd-clientes-stat-actions-row{ gap:10px; }
  .gpd-clientes-stat-actions-row .excel-btn.gpd-clientes-report-btn{
    --vidro: 143,163,174;
    position:relative;
    min-width:176px;
    min-height:42px;
    padding:10px 18px;
    border-radius:14px;
    font-weight:700;
    letter-spacing:0.01em;
    color:var(--text);
    border:1px solid rgba(var(--vidro),0.45);
    background:
      linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 45%, rgba(0,0,0,0.10) 100%),
      linear-gradient(180deg, rgba(var(--vidro),0.26), rgba(var(--vidro),0.07));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.22),
      inset 0 -8px 14px -10px rgba(0,0,0,0.45),
      0 8px 18px -10px rgba(0,0,0,0.75);
    transition:transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .gpd-clientes-stat-actions-row .excel-btn.gpd-clientes-report-btn:hover{
    color:var(--text);
    border-color:rgba(var(--vidro),0.7);
    transform:translateY(-1px);
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.28),
      inset 0 -8px 14px -10px rgba(0,0,0,0.45),
      0 12px 22px -10px rgba(var(--vidro),0.45);
  }
  .gpd-clientes-stat-actions-row #gpdVisitaAvulsaOpenBtn{ --vidro: 79,174,124; }
  .gpd-clientes-stat-actions-row #gpdClientesReportBtn{ --vidro: 79,154,192; }
  .gpd-clientes-stat-actions-row #gpdAbcImportOpenBtn{ --vidro: 217,164,65; }
  .gpd-clientes-stat-actions-row .excel-btn.gpd-clientes-report-btn span{ position:relative; z-index:1; }
}

/* Celular (16/09/2026, print com seta): o seletor Vendedor / Região tinha
   min-width de 240px e, somado ao rótulo, passava da borda direita do card.
   Aqui ele ocupa só o que sobra ao lado do rótulo. */
@media (max-width:640px){
  .gpd-plano-toolbar{ gap:10px; min-width:0; }
  .gpd-plano-toolbar label{ flex:0 0 auto; font-size:12px; line-height:1.25; }
  .gpd-plano-toolbar .gpd-select-custom{ flex:1 1 auto; min-width:0; }
  .gpd-plano-toolbar .gpd-select-custom-btn{
    width:100%;
    min-width:0;
    max-width:none;
    padding:10px 32px 10px 12px;
    font-size:14px;
  }
}

/* Ausência no modal "Visitas registradas" (16/09/2026): card dourado, mesma
   família do selo "ausente" do celular, pra não ser lida como visita. */
.gpd-visita-entry--ausente .gpd-visita-item{
  background:linear-gradient(160deg, rgba(217,164,65,0.20), rgba(217,164,65,0.07));
  border-color:rgba(217,164,65,0.55);
  box-shadow:inset 3px 0 0 #D9A441;
}
.gpd-visita-entry--ausente .gpd-visita-avatar{
  background:rgba(217,164,65,0.22);
  border-color:rgba(217,164,65,0.6);
  color:#8A5A00;
}
.gpd-visita-ausente-tag{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#5b3d00;
  background:#f3d58a;
  border:1px solid rgba(160,111,19,0.45);
  vertical-align:middle;
}

/* Ticket médio nos cards de faixa de valor (16/09/2026): valor ÷ pedidos,
   à direita do R$ da faixa, no espaço que sobrava. */
.gpd-mix-card-money-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
}
.gpd-mix-card-ticket{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  line-height:1.15;
  text-align:right;
}
.gpd-mix-card-ticket span{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text);
  opacity:0.6;
}
.gpd-mix-card-ticket b{
  font-size:14px;
  font-weight:800;
  color:#F0C868;
  font-variant-numeric:tabular-nums;
}
body.gpd-tema-claro .gpd-mix-card-ticket b{ color:#8A5A00; }

/* ---- Situação dos pedidos não realizados (16/09/2026) ----
   Coluna "Situação" na lista de clientes da faixa + card de marcação.
   Vidro 3D sem backdrop-filter; texto sempre em elemento próprio. */
.gpd-mix-sit-cell{ white-space:normal; min-width:150px; }
.gpd-mix-sit-btn{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px;
  padding:4px 6px; border-radius:10px; cursor:pointer;
  background:transparent; border:1px dashed rgba(255,255,255,0.22); color:var(--text);
}
.gpd-mix-sit-btn:hover{ border-color:rgba(242,183,5,0.6); }
.gpd-mix-sit-marcar{ font-size:11.5px; font-weight:700; opacity:0.7; padding:2px 4px; }
.gpd-mix-sit-vazia{ opacity:0.5; }
.gpd-mix-sit-chip{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:0.02em; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 6px rgba(0,0,0,0.3);
}
.gpd-mix-sit-chip--perdido{ background:linear-gradient(160deg, #f08a8b, #c43d3e); }
.gpd-mix-sit-chip--desistencia{ background:linear-gradient(160deg, #ffc08a, #d9772e); }
.gpd-mix-sit-chip--analise{ background:linear-gradient(160deg, #9fd4f0, #3f8ab5); }
.gpd-mix-sit-chip--outra{ background:linear-gradient(160deg, #c9cfd6, #6f7a86); }

.gpd-mix-sit-card{ max-width:440px; }
.gpd-mix-sit-opcoes{ display:flex; flex-direction:column; gap:8px; margin:14px 0 12px; }
.gpd-mix-sit-opcao-linha{ display:flex; gap:6px; align-items:stretch; }
.gpd-mix-sit-opcao{
  --sit: 143,163,174;
  flex:1; display:flex; align-items:center; gap:10px; text-align:left;
  padding:11px 14px; border-radius:14px; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--text);
  border:1px solid rgba(var(--sit),0.45);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.08) 100%),
    linear-gradient(180deg, rgba(var(--sit),0.22), rgba(var(--sit),0.06));
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.2), inset 0 -8px 14px -10px rgba(0,0,0,0.4), 0 8px 16px -10px rgba(0,0,0,0.7);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.gpd-mix-sit-opcao:hover{ transform:translateY(-1px); border-color:rgba(var(--sit),0.75); }
.gpd-mix-sit-opcao--perdido{ --sit: 225,89,90; }
.gpd-mix-sit-opcao--desistencia{ --sit: 224,138,72; }
.gpd-mix-sit-opcao--analise{ --sit: 79,154,192; }
.gpd-mix-sit-opcao.is-marcada{ border-width:2px; border-color:rgb(var(--sit)); }
.gpd-mix-sit-flag{
  flex:none; width:20px; height:20px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:900; color:#fff;
  border:2px solid rgba(var(--sit),0.9); background:rgba(0,0,0,0.15);
}
.gpd-mix-sit-opcao.is-marcada .gpd-mix-sit-flag{ background:rgb(var(--sit)); }
.gpd-mix-sit-remover{
  flex:none; width:36px; border-radius:12px; cursor:pointer; font-size:18px;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line); opacity:0.7;
}
.gpd-mix-sit-remover:hover{ opacity:1; border-color:rgba(225,89,90,0.6); }
.gpd-mix-sit-nova{ display:flex; gap:8px; }
.gpd-mix-sit-nova input{
  flex:1; min-width:0; padding:10px 12px; border-radius:12px; font-size:14px;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line);
}
.gpd-mix-sit-nova input:focus{ outline:none; border-color:var(--accent); }
.gpd-mix-sit-incluir, .gpd-mix-sit-limpar{
  padding:9px 16px; border-radius:12px; cursor:pointer; font-weight:700; font-size:13px;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line);
}
.gpd-mix-sit-incluir:hover, .gpd-mix-sit-limpar:hover{ border-color:rgba(242,183,5,0.6); }
.gpd-mix-sit-rodape{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
.gpd-mix-sit-erro{ color:#e15a5b; font-size:12.5px; }

.gpd-mix-sit-relatorio{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin:0 0 12px;
}
.gpd-mix-sit-relatorio-label{ font-size:11.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; opacity:0.7; }
.gpd-mix-sit-relatorio select{
  padding:8px 12px; border-radius:12px; font-size:13px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--line);
}

.gpd-mix-sit-dica{ margin-left:auto; font-size:11px; font-weight:600; opacity:0.65; }

/* Aviso de que a tela esta FILTRADA por situacao (23/09/2026). Fica logo
   abaixo das pilulas pra ninguem achar que o mes inteiro sumiu. */
.gpd-mix-sit-aviso{
  margin:0 0 12px; padding:9px 12px; border-radius:12px;
  font-size:12.5px; line-height:1.45; color:var(--text);
  background:rgba(242,183,5,0.10); border:1px solid rgba(242,183,5,0.32);
}
.gpd-mix-sit-aviso b{ font-weight:800; }

/* Vendidos do mes passado (15/10/2026): orcamentos que sairam da lista ao
   reimportar o PDF. Verde de "fechou", recolhido por padrao. */
.gpd-mix-vendidos{
  margin:0 0 12px; border-radius:12px; color:var(--text);
  background:rgba(46,160,90,0.10); border:1px solid rgba(46,160,90,0.34);
}
.gpd-mix-vendidos > summary{
  cursor:pointer; padding:9px 12px; font-size:12.5px; line-height:1.45;
  list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:4px;
}
.gpd-mix-vendidos > summary::-webkit-details-marker{ display:none; }
.gpd-mix-vendidos > summary b{ font-weight:800; }
.gpd-mix-vendidos-titulo{ font-weight:800; color:#2e9a5a; }
.gpd-mix-vendidos-ver{ margin-left:auto; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#2e9a5a; }
.gpd-mix-vendidos[open] .gpd-mix-vendidos-ver{ opacity:.6; }
.gpd-mix-vendidos .gpd-plano-medidas-table-wrap{ padding:0 8px 8px; }

/* "Perdido" -> escolher o concorrente (18/09/2026). Busca + lista rolável,
   itens no mesmo vidro das opções, em vermelho do Perdido. */
.gpd-mix-conc-busca{
  width:100%; box-sizing:border-box; margin:14px 0 10px; padding:10px 12px; border-radius:12px; font-size:14px;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line);
}
.gpd-mix-conc-busca:focus{ outline:none; border-color:rgba(225,89,90,0.7); }
.gpd-mix-conc-lista{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow-y:auto; padding-right:2px; }
.gpd-mix-conc-item{
  --sit: 225,89,90;
  text-align:left; padding:9px 14px; border-radius:12px; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--text);
  border:1px solid rgba(var(--sit),0.35);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 45%, rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, rgba(var(--sit),0.14), rgba(var(--sit),0.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 12px -10px rgba(0,0,0,0.7);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.gpd-mix-conc-item:hover{ transform:translateY(-1px); border-color:rgba(var(--sit),0.8); }
.gpd-mix-conc-item.is-marcada{ border-width:2px; border-color:rgb(var(--sit)); }
.gpd-mix-conc-item--novo{ border-style:dashed; }
.gpd-mix-conc-vazio{ font-size:13px; opacity:0.7; padding:8px 2px; }
/* Admin: incluir/excluir concorrente da lista compartilhada (18/09/2026). */
.gpd-mix-conc-busca-linha{ display:flex; gap:8px; align-items:center; margin:14px 0 10px; }
.gpd-mix-conc-busca-linha .gpd-mix-conc-busca{ margin:0; flex:1; min-width:0; }
.gpd-mix-conc-linha{ display:flex; gap:6px; align-items:stretch; }
.gpd-mix-conc-linha .gpd-mix-conc-item{ flex:1; min-width:0; }

/* Marcar MAIS DE UM concorrente (23/09/2026). Check visivel no marcado, os
   marcados sobem pro topo da lista (feito no JS) e so grava no Confirmar.
   Alvo de toque minimo de 44px, porque isso e usado no celular em campo. */
.gpd-mix-conc-ajuda{ margin-top:4px; font-size:12px; line-height:1.4; color:var(--text); opacity:0.88; }
.gpd-mix-conc-item{ display:flex; align-items:center; gap:9px; min-height:44px; }
.gpd-mix-conc-check{
  flex:0 0 auto; width:19px; height:19px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:900; line-height:1; color:#fff;
  border:1px solid rgba(var(--sit),0.55); background:rgba(0,0,0,0.18);
}
.gpd-mix-conc-item.is-marcada .gpd-mix-conc-check{
  border-color:rgb(var(--sit));
  background:linear-gradient(160deg, rgba(var(--sit),0.95), rgba(var(--sit),0.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35);
}
.gpd-mix-conc-item--novo{ min-height:40px; }
.gpd-mix-conc-sel{
  margin:10px 0 0; padding:8px 10px; border-radius:10px;
  font-size:12px; line-height:1.4; color:var(--text);
  background:rgba(225,89,90,0.10); border:1px solid rgba(225,89,90,0.28);
}
.gpd-mix-conc-rodape{ flex-wrap:wrap; gap:8px; }
.gpd-mix-conc-confirmar{
  margin-left:auto; padding:10px 18px; min-height:44px; border-radius:12px; cursor:pointer;
  font-size:13.5px; font-weight:800; color:#fff;
  border:1px solid rgba(79,174,124,0.85);
  background:linear-gradient(160deg, rgba(79,174,124,0.95), rgba(79,174,124,0.68));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 8px 16px -10px rgba(0,0,0,0.7);
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.gpd-mix-conc-confirmar:hover:not(:disabled){ transform:translateY(-1px); color:#fff; }
.gpd-mix-conc-confirmar:disabled{ opacity:0.45; cursor:default; }
@media (max-width:640px){
  .gpd-mix-conc-rodape .gpd-mix-conc-confirmar{ margin-left:0; width:100%; }
}

/* Relatório: situações para marcar (várias ou Todas), no lugar do <select>. */
.gpd-mix-sit-filtros{ display:flex; flex-wrap:wrap; gap:6px; }
.gpd-mix-sit-filtro{
  --sit: 143,163,174;
  padding:6px 12px; border-radius:999px; cursor:pointer; font-size:12.5px; font-weight:700;
  color:var(--text); background:var(--panel-2); border:1px solid rgba(var(--sit),0.45);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.gpd-mix-sit-filtro:hover{ border-color:rgba(var(--sit),0.85); }
.gpd-mix-sit-filtro--perdido{ --sit: 225,89,90; }
.gpd-mix-sit-filtro--desistencia{ --sit: 224,138,72; }
.gpd-mix-sit-filtro--analise{ --sit: 79,154,192; }
.gpd-mix-sit-filtro--todas{ --sit: 79,174,124; }
.gpd-mix-sit-filtro.is-on{
  color:#fff; border-color:rgb(var(--sit));
  background:linear-gradient(160deg, rgba(var(--sit),0.95), rgba(var(--sit),0.7));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 10px -4px rgba(var(--sit),0.6);
}
.gpd-mix-sit-filtro.is-on::before{ content:'✓ '; }
/* Card "Aberto" (15/10/2026): Em análise + Sem situação dentro de um card
   só; o título marca os dois juntos. Cores por variável do tema, vale no
   claro e no escuro. */
.gpd-mix-sit-aberto{
  display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:3px 4px 3px 4px; border-radius:999px;
  border:1px solid rgba(79,154,192,0.45); background:rgba(79,154,192,0.08);
}
.gpd-mix-sit-aberto.is-on{ border-color:rgb(79,154,192); box-shadow:0 4px 10px -6px rgba(79,154,192,0.7); }
.gpd-mix-sit-aberto-titulo{
  padding:6px 10px 6px 12px; border-radius:999px; cursor:pointer; border:0;
  font-size:11.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text); background:transparent;
}
.gpd-mix-sit-aberto-titulo:hover{ background:rgba(79,154,192,0.14); }
.gpd-mix-sit-aberto.is-on .gpd-mix-sit-aberto-titulo{ color:#fff; background:linear-gradient(160deg, rgba(79,154,192,0.95), rgba(79,154,192,0.7)); }
.gpd-mix-sit-aberto.is-on .gpd-mix-sit-aberto-titulo::before{ content:'✓ '; }
/* Quanto saiu dos totais por estar marcado como Perdido. */
.gpd-mix-entrada-perdidos{ color:#E1595A; font-weight:700; }
body.gpd-tema-claro .gpd-mix-entrada-perdidos{ color:#C63A3B; }
/* Desistência de compra: mesmo laranja da pílula dela. */
.gpd-mix-entrada-desistencias{ color:#E08A48; font-weight:700; }
/* Detalhe do que saiu da conta, embaixo do nome do PDF (15/10/2026). */
.gpd-mix-entrada-saiu{ font-size:12px; color:var(--text); opacity:0.85; }
.gpd-mix-entrada-saiu[hidden]{ display:none; }
body.gpd-tema-claro .gpd-mix-entrada-desistencias{ color:#B5611F; }
.gpd-mix-entrada-conta{ font-weight:700; }

/* Botão "Marcar situação" em vidro 3D (pedido do usuário 16/09/2026, no
   lugar do tracejado). Sem backdrop-filter; hover não muda a cor do texto. */
.gpd-mix-sit-btn{
  padding:6px 12px;
  border-radius:12px;
  border:1px solid rgba(242,183,5,0.40);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.03) 45%, rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, rgba(242,183,5,0.20), rgba(242,183,5,0.05));
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    inset 0 -8px 14px -10px rgba(0,0,0,0.45),
    0 8px 16px -10px rgba(0,0,0,0.75);
  transition:transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.gpd-mix-sit-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(242,183,5,0.70);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -8px 14px -10px rgba(0,0,0,0.45),
    0 12px 20px -10px rgba(242,183,5,0.35);
}
.gpd-mix-sit-marcar{ font-size:12px; font-weight:800; opacity:0.95; color:var(--text); padding:1px 2px; }
body.gpd-tema-claro .gpd-mix-sit-btn{
  border-color:rgba(160,111,19,0.45);
  background:linear-gradient(160deg, #ffffff 0%, #fbf3dc 60%, #f3e2b0 100%);
}

/* Cards de grupo clicáveis (17/09/2026): filtram a tabela de produtos. */
button.gpd-mix-card--grupo{ text-align:left; cursor:pointer; font:inherit; color:inherit; width:100%;
  transition:transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease; }
button.gpd-mix-card--grupo:hover{ transform:translateY(-2px); }
button.gpd-mix-card--grupo.gpd-mix-card--ativo{ border-color:rgba(242,183,5,0.75); box-shadow:0 0 0 1px rgba(242,183,5,0.45), 0 14px 26px -14px rgba(242,183,5,0.45); }
button.gpd-mix-card--grupo.gpd-mix-card--apagado{ opacity:0.55; }
button.gpd-mix-card--grupo.gpd-mix-card--apagado:hover{ opacity:0.9; }
.gpd-mix-filtro-grupo{ margin:2px 0 12px; font-size:13px; opacity:0.9; }
.gpd-mix-filtro-limpar{ margin-left:4px; padding:3px 10px; border-radius:999px; cursor:pointer; font-size:12px; font-weight:700;
  color:var(--text); background:var(--panel-2); border:1px solid var(--line); }
.gpd-mix-filtro-limpar:hover{ border-color:rgba(242,183,5,0.6); }

/* Import da Rotatividade depois de gravar (17/09/2026): a janela fica verde
   e cada vendedor gravado leva um OK. */
.gpd-rot-card--ok{ border-color:rgba(79,174,124,0.55); box-shadow:0 0 0 1px rgba(79,174,124,0.28), 0 24px 60px -24px rgba(0,0,0,0.75); }
.gpd-rot-status--ok{ color:#4FAE7C; font-weight:700; }
.gpd-rot-linha-ok td{ background:linear-gradient(180deg, rgba(79,174,124,0.16), rgba(79,174,124,0.06)); }
.gpd-rot-ok-badge{
  display:inline-block; margin-left:8px; padding:2px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800; letter-spacing:0.06em; color:#07261A;
  background:linear-gradient(160deg, #9BE7BE, #4FAE7C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 5px rgba(0,0,0,0.3);
}
.gpd-rot-gravar--ok{
  color:#07261A !important;
  background:linear-gradient(160deg, #9BE7BE, #4FAE7C) !important;
  border-color:rgba(79,174,124,0.7) !important;
  opacity:1 !important;
}

/* Import GERAL de Pedidos e Produtos (18/09/2026). */
.gpd-mix-titulo-acoes{ display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.gpd-mix-geral-produtos{ margin-top:10px; padding:10px 14px; border-radius:12px; font-size:13.5px;
  background:var(--panel-2); border:1px solid var(--line); }

/* % nos cards de entrada de Pedidos e Produtos (18/09/2026): à direita, no
   espaço vazio do card. */
.gpd-mix-entrada{ position:relative; }
.gpd-mix-entrada-pct{
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  max-width:45%; text-align:right; pointer-events:none;
}
.gpd-mix-entrada-pct[hidden]{ display:none; }
.gpd-mix-entrada-pct b{ font-size:30px; font-weight:800; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.gpd-mix-entrada-pct small{ font-size:11.5px; font-weight:600; opacity:0.7; }
.gpd-mix-entrada:not(.gpd-mix-entrada--produtos) .gpd-mix-entrada-pct b{ color:#7BC0DE; }
.gpd-mix-entrada--produtos .gpd-mix-entrada-pct b{ color:#F0C868; }
@media (max-width:640px){
  .gpd-mix-entrada-pct{ position:static; transform:none; align-items:flex-start; text-align:left; max-width:none; margin-top:6px; }
  .gpd-mix-entrada-pct b{ font-size:22px; }
}

/* "% acima da meta" à direita do card Total não Realizado (18/09/2026):
   (não realizado + venda do mês) ÷ meta do mês − 1. Mesmo desenho do % dos
   cards de entrada de Pedidos e Produtos (.gpd-mix-entrada-pct). */
.gpd-plano-negocios-summary-box--good{ position:relative; }
.gpd-negocios-meta-pct{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  max-width:48%; text-align:right; pointer-events:none;
}
.gpd-negocios-meta-pct b{ font-family:'JetBrains Mono', monospace; font-size:24px; font-weight:800; line-height:1; color:var(--good); font-variant-numeric:tabular-nums; }
.gpd-negocios-meta-pct--abaixo b{ color:var(--bad); }
.gpd-negocios-meta-pct small{ font-size:11.5px; font-weight:600; color:var(--text); opacity:0.7; }
@media (max-width:640px){
  .gpd-negocios-meta-pct{ position:static; transform:none; align-items:flex-start; text-align:left; max-width:none; margin-top:6px; }
  .gpd-negocios-meta-pct b{ font-size:20px; }
}

/* "Indicações" no espaço vago do card R$ Médio (22/09/2026, "coloque valor
   indicação"): total somado à mão pelo modal Incluir venda no mês corrente.
   Mesmo desenho do "% acima da meta" ao lado. */
.gpd-plano-negocios-summary-box--medio{ position:relative; }
/* Mês mostrado nos cards de baixo quando não é o corrente (02/10/2026):
   discreto, herda a cor do texto do tema (claro e escuro). */
.gpd-negocios-mes-tag{ font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:none; white-space:nowrap; color:var(--text); opacity:0.6; margin-left:4px; }
.gpd-negocios-indicacoes{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  max-width:58%; text-align:right; pointer-events:none;
}
.gpd-negocios-indicacoes b{ font-family:'JetBrains Mono', monospace; font-size:20px; font-weight:800; line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.gpd-negocios-indicacoes small{ font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text); opacity:0.62; }
@media (max-width:640px){
  .gpd-negocios-indicacoes{ position:static; transform:none; align-items:flex-start; text-align:left; max-width:none; margin-top:6px; }
  .gpd-negocios-indicacoes b{ font-size:18px; }
}

/* =====================================================================
   GPD no MESMO PADRÃO do Painel Comercial (19/09/2026: "gere no mesmo
   padrão aqui") — ver css/tema-aiko.css (claro) e o fim de css/styles.css
   (escuro). Topo com a chapa xadrez de aço nos dois modos; no claro, a
   paleta "Aiko" (turquesa/azul-petróleo), fundo cinza e cartões 3D.
   ===================================================================== */
/* ---- escuro: chapa com véu escuro por cima */
body:not(.gpd-tema-claro) header.top{
  background:
    linear-gradient(180deg, rgba(10,12,16,0.66) 0%, rgba(10,12,16,0.72) 70%, rgba(10,12,16,0.88) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  box-shadow:0 12px 30px -16px rgba(0,0,0,0.8);
}
body:not(.gpd-tema-claro) header.top::before{ display:none; }

/* ---- claro: paleta Aiko */
body.gpd-tema-claro{
  --text:#023E55; --text-dim:#3B4E73; --text-faint:#5E7090;
  --steel:#0E6F86; --steel-soft:rgba(43,165,178,0.14);
  --line:#C9DCE3; --line-soft:#DDE9EE;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(43,165,178,0.14) 0%, transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(59,78,115,0.12) 0%, transparent 60%),
    linear-gradient(180deg, #B8BFC5 0%, #ABB4BB 100%);
  background-attachment:fixed;
}
/* topo: degradê turquesa → azul-petróleo translúcido sobre a chapa; dentro
   dele o texto volta a ser branco */
body.gpd-tema-claro header.top{
  background:
    linear-gradient(120deg, rgba(43,165,178,0.78) 0%, rgba(14,111,134,0.80) 45%, rgba(2,62,85,0.86) 100%),
    url("chapa-xadrez.jpg") left top / 127px 90px repeat;
  border-bottom:0;
  box-shadow:0 10px 28px -14px rgba(2,62,85,0.55);
  --text:#FFFFFF; --text-dim:rgba(255,255,255,0.82); --text-faint:rgba(255,255,255,0.62);
  color:#FFFFFF;
}
body.gpd-tema-claro header.top::before{ display:none; }
/* cartões: cinza azulado com canto de 28px e borda especular, como o painel */
body.gpd-tema-claro .card{
  background:linear-gradient(180deg, #DDE4E9 0%, #CFD8DF 100%);
  border:1px solid rgba(255,255,255,0.75);
  border-radius:28px;
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,0.95),
    inset -1px -1px 0 rgba(2,62,85,0.06),
    0 18px 36px -22px rgba(2,62,85,0.55),
    0 3px 8px rgba(2,62,85,0.08);
}
body.gpd-tema-claro .card-sub,
body.gpd-tema-claro #gpdFreteVendorCard .card-sub{ color:#3B4E73; }
/* KPIs do topo do Plano de Ação: cartão 3D claro (mesmo do painel) */
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  background:linear-gradient(180deg, #EEF3F6 0%, #DCE4EA 100%);
  border:1px solid rgba(255,255,255,0.85);
  border-radius:22px;
  box-shadow:
    inset 1.5px 1.5px 0 #FFFFFF,
    inset -1px -1px 0 rgba(2,62,85,0.06),
    0 14px 28px -18px rgba(2,62,85,0.55),
    0 2px 6px rgba(2,62,85,0.08);
}
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi:hover{ border-color:rgba(43,165,178,0.6); transform:translateY(-2px); }
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi .label{ color:#23385C; font-weight:700; }
/* Objetivo/Responsável, gráfico e tabela: branco em degradê, cantos 20px */
body.gpd-tema-claro .gpd-plano-meta-box,
body.gpd-tema-claro .gpd-plano-chart-wrap,
body.gpd-tema-claro .gpd-plano-table-wrap{
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 100%);
  border:1px solid rgba(255,255,255,0.9);
  border-radius:20px;
  box-shadow:inset 0 1px 0 #FFFFFF, 0 14px 28px -18px rgba(2,62,85,0.5), 0 2px 5px rgba(2,62,85,0.06);
}
body.gpd-tema-claro .gpd-plano-meta-box{ border-color:rgba(43,165,178,0.45); }

/* ---- Medidas (#gpdPlanoMedidas) mais legíveis, nos dois modos (19/09/2026:
   "precisa melhorar"). Cada linha vira um cartão 3D com sombra; campos com
   texto forte (o cinza-claro sumia); Objetivo/Atingido com cor cheia e borda
   sólida; % como pílula 3D. Escopado pelo id: a classe
   .gpd-plano-medidas-table é usada por outras tabelas (algumas com coluna
   presa, que precisam do fundo opaco delas). */
#gpdPlanoMedidas{ border-spacing:0 12px; }
#gpdPlanoMedidas tbody tr{ filter:drop-shadow(0 6px 8px rgba(0,0,0,0.35)) drop-shadow(0 1px 2px rgba(0,0,0,0.25)); transition:transform .15s ease, filter .15s ease; }
#gpdPlanoMedidas tbody tr:hover{ transform:translateY(-2px); filter:drop-shadow(0 10px 12px rgba(0,0,0,0.45)) drop-shadow(0 2px 3px rgba(0,0,0,0.3)); }
#gpdPlanoMedidas tbody td{ padding:14px 12px; }
#gpdPlanoMedidas tbody td:first-child{ border-radius:16px 0 0 16px; }
#gpdPlanoMedidas tbody td:last-child{ border-radius:0 16px 16px 0; }
#gpdPlanoMedidas .gpd-plano-medida-input{ opacity:1; font-size:14px; padding:9px 10px; border-radius:10px; }
#gpdPlanoMedidas .gpd-plano-medida-field-input{ font-family:'Inter', sans-serif; font-weight:600; text-align:left; }
#gpdPlanoMedidas td.name .gpd-plano-medida-field-input{ font-weight:600; }
#gpdPlanoMedidas .gpd-plano-medida-input--auto{ border-style:solid; }
#gpdPlanoMedidas .pill{ font-size:14px; padding:6px 13px; border-radius:999px; font-weight:800; }

/* escuro: cartão de vidro mais claro que o envelope, texto branco */
body:not(.gpd-tema-claro) #gpdPlanoMedidas tbody td{
  background:linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%), #1D232B;
  border-color:rgba(255,255,255,0.12);
}
body:not(.gpd-tema-claro) #gpdPlanoMedidas .gpd-plano-medida-field-input{ color:#F2F4F7; background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); }
body:not(.gpd-tema-claro) #gpdPlanoMedidas .gpd-plano-medida-input--objetivo{ color:#8FCBEA; background:rgba(79,154,192,0.20); border-color:rgba(79,154,192,0.6); }
body:not(.gpd-tema-claro) #gpdPlanoMedidas .gpd-plano-medida-input--atingido.is-fechado{ color:#7BE3A9; background:rgba(46,190,120,0.20); border-color:rgba(80,210,140,0.6); }
body:not(.gpd-tema-claro) #gpdPlanoMedidas .gpd-plano-medida-input--atingido.is-aberto{ color:#FF8A8C; background:rgba(225,89,90,0.20); border-color:rgba(225,89,90,0.6); }
body:not(.gpd-tema-claro) #gpdPlanoMedidas .pill.good{ color:#03361D; background:linear-gradient(155deg, #AFEEC8 0%, #56CC86 55%, #2CA862 100%); border:1px solid rgba(140,240,180,0.7); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 10px -4px rgba(0,0,0,0.6); }
body:not(.gpd-tema-claro) #gpdPlanoMedidas .pill.bad{ color:#4A0A0D; background:linear-gradient(155deg, #FFC2C3 0%, #F0797B 55%, #D9474A 100%); border:1px solid rgba(255,170,170,0.7); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 4px 10px -4px rgba(0,0,0,0.6); }

/* claro: envelope leve, cartão branco em degradê, texto azul-petróleo */
body.gpd-tema-claro #gpdPlanoMedidas tbody tr{ filter:drop-shadow(0 6px 8px rgba(2,62,85,0.22)) drop-shadow(0 1px 2px rgba(2,62,85,0.14)); }
body.gpd-tema-claro #gpdPlanoMedidas tbody tr:hover{ filter:drop-shadow(0 10px 12px rgba(2,62,85,0.32)) drop-shadow(0 2px 3px rgba(2,62,85,0.18)); }
body.gpd-tema-claro #gpdPlanoMedidas tbody td,
body.gpd-tema-claro #gpdPlanoMedidas tbody tr:hover td{
  background:linear-gradient(180deg, #FFFFFF 0%, #F2F6F9 100%);
  border-color:rgba(2,62,85,0.10);
}
body.gpd-tema-claro .gpd-plano-medidas-table-wrap:has(#gpdPlanoMedidas){
  background:rgba(255,255,255,0.35);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:20px;
  box-shadow:inset 0 1px 2px rgba(2,62,85,0.10);
}
body.gpd-tema-claro #gpdPlanoMedidas thead th{ background:transparent; color:#23385C; border-bottom-color:rgba(2,62,85,0.15); }
body.gpd-tema-claro #gpdPlanoMedidas .gpd-plano-medida-field-input{ color:#023E55; background:#F4F7FA; border-color:#C9D6DF; }
body.gpd-tema-claro #gpdPlanoMedidas .gpd-plano-medida-input--objetivo{ color:#0E6F86; background:rgba(43,165,178,0.16); border-color:rgba(14,111,134,0.55); }
body.gpd-tema-claro #gpdPlanoMedidas .gpd-plano-medida-input--atingido.is-fechado{ color:#0B6B45; background:rgba(23,138,99,0.16); border-color:rgba(23,138,99,0.6); }
body.gpd-tema-claro #gpdPlanoMedidas .gpd-plano-medida-input--atingido.is-aberto{ color:#B3262F; background:rgba(210,63,75,0.12); border-color:rgba(210,63,75,0.6); }
body.gpd-tema-claro #gpdPlanoMedidas .gpd-plano-medida-suffix{ color:#3B4E73; font-weight:700; }
body.gpd-tema-claro #gpdPlanoMedidas .pill.good{ color:#03361D; background:linear-gradient(155deg, rgba(175,238,200,0.95) 0%, rgba(86,204,134,0.88) 46%, rgba(44,168,98,0.9) 100%); border:1px solid rgba(120,220,160,0.75); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 10px -4px rgba(2,62,85,0.45); }
body.gpd-tema-claro #gpdPlanoMedidas .pill.bad{ color:#5A0B10; background:linear-gradient(155deg, #FFD3D5 0%, #F59A9D 55%, #E0656A 100%); border:1px solid rgba(230,130,135,0.8); box-shadow:inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 10px -4px rgba(2,62,85,0.45); }
#gpdPlanoMedidas .pill.warn{ color:#4A3300; background:linear-gradient(155deg, #FFE59A 0%, #F7C23A 55%, #E0A000 100%); border:1px solid rgba(247,200,80,0.8); box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 10px -4px rgba(0,0,0,0.45); }
/* célula do número: display:flex (regra geral acima) tira a <td> do layout
   de tabela e ela ficava mais baixa que o resto da linha — um degrau no
   cartão. Aqui volta a ser célula, com o número e o "x" em linha. */
#gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell{ display:table-cell; white-space:nowrap; text-align:center; }
#gpdPlanoMedidas tbody td.gpd-plano-medida-idx-cell .gpd-remove-btn{ margin-left:6px; vertical-align:middle; }
#gpdPlanoMedidas .gpd-plano-medida-idx{ width:26px; height:26px; font-size:12.5px; vertical-align:middle; }
/* Atingido automático: sem o tracejado (poluía a linha); continua só
   leitura, o aviso fica no title do campo. */
#gpdPlanoMedidas .gpd-plano-medida-input--auto{ border-style:solid !important; }

/* ---- Cartões do topo do Plano de Ação (Resultado, Meta, % Acumulado...)
   no padrão do painel, nos dois modos (19/09/2026: "aqui também"):
   conteúdo centralizado, título maior, número maior e mais sombra. */
.gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{ text-align:center; padding-top:18px; padding-bottom:18px; }
.gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi .label{ font-size:13.5px; font-weight:700; letter-spacing:0.05em; }
.gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi .val{ font-size:30px; margin-top:6px; }
body:not(.gpd-tema-claro) .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  border-radius:22px;
  box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(79,154,192,0.18), 0 16px 30px -14px rgba(0,0,0,0.8), 0 3px 8px rgba(0,0,0,0.35);
}
body:not(.gpd-tema-claro) .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi .label{ color:#E6EAF0; }
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  box-shadow:inset 1.5px 1.5px 0 #FFFFFF, inset -1px -1px 0 rgba(2,62,85,0.06), 0 18px 30px -16px rgba(2,62,85,0.6), 0 3px 8px rgba(2,62,85,0.12);
}
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi .val{ color:#0E6F86; }
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi.gpd-plano-kpi-pct .val.bad{ color:#C62F3A; }
/* Cartões do topo mais escuros e sem o fio claro embaixo (19/09/2026: "deixe
   mais escuro, parece ter uma linha"): a borda branca de baixo/direita virava
   uma linha; agora só o brilho em cima/esquerda, e o fundo desce um tom. */
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  background:linear-gradient(180deg, #D9E1E7 0%, #C3CED7 100%);
  border:1px solid rgba(2,62,85,0.10);
  border-top-color:rgba(255,255,255,0.85);
  border-left-color:rgba(255,255,255,0.7);
}
body:not(.gpd-tema-claro) .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  background:linear-gradient(180deg, rgba(79,154,192,0.13), rgba(79,154,192,0.04) 60%, rgba(0,0,0,0.12)), #161B22;
  border-color:rgba(0,0,0,0.35);
  border-top-color:rgba(79,154,192,0.40);
  border-left-color:rgba(79,154,192,0.28);
}
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  border-left-color:rgba(2,62,85,0.10);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.9), 0 14px 24px -12px rgba(2,62,85,0.55), 0 3px 8px rgba(2,62,85,0.12);
}
body:not(.gpd-tema-claro) .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  border-left-color:rgba(0,0,0,0.35);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.12), 0 14px 26px -12px rgba(0,0,0,0.85), 0 3px 8px rgba(0,0,0,0.35);
}
/* Frete no claro: o azul-claro do % e o dourado da contagem eram do escuro e
   quase sumiam no cartão claro — mesmos tons, fechados. */
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi[data-fmt="pct"] .val{ color:#0E6F86; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi[data-fmt="count"] .val{ color:#A87300; }
/* Orçamentos/Produtos (Pedidos & Produtos) no claro: o azul-claro e o
   dourado eram do escuro e sumiam no cartão claro (19/09/2026: "use um azul
   mais escuro"). Número, % e "ver por faixa de valor" em azul-petróleo; o
   card de Produtos no dourado fechado. */
body.gpd-tema-claro .gpd-mix-entrada-val,
body.gpd-tema-claro .gpd-mix-entrada:not(.gpd-mix-entrada--produtos) .gpd-mix-entrada-pct b,
body.gpd-tema-claro .gpd-mix-entrada-cta{ color:#0E6F86; }
body.gpd-tema-claro .gpd-mix-entrada--produtos .gpd-mix-entrada-val,
body.gpd-tema-claro .gpd-mix-entrada--produtos .gpd-mix-entrada-pct b,
body.gpd-tema-claro .gpd-mix-entrada--produtos .gpd-mix-entrada-cta{ color:#A87300; }
body.gpd-tema-claro .gpd-mix-entrada-label,
body.gpd-tema-claro .gpd-mix-entrada-unit{ color:#23385C; opacity:0.9; font-weight:700; }
/* "Resultado Mensal" com mais destaque na tabela do Plano (19/09/2026: "deixe
   em mais destaque"). Claro: azul mais forte, número em negrito maior e barra
   azul-petróleo na ponta; a coluna presa (td.name e o overlay que é quem se
   vê de fato) recebe a mesma cor SÓLIDA — coluna sticky precisa de fundo
   opaco. Escuro: mesma barra, mais larga e mais viva. */
body.gpd-tema-claro #gpdPlanoTable tr.gpd-plano-row-headline-resultado td{
  background:linear-gradient(180deg, rgb(172,214,238) 0%, rgb(140,195,228) 100%);
  color:#023E55;
  font-weight:800;
  font-size:16px;
  border-top:1px solid rgba(14,111,134,0.45);
  border-bottom:1px solid rgba(14,111,134,0.45);
}
body.gpd-tema-claro #gpdPlanoTable tr.gpd-plano-row-headline-resultado td.name,
body.gpd-tema-claro div.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado{
  background:linear-gradient(180deg, rgb(150,202,232) 0%, rgb(122,184,221) 100%);
  color:#023E55;
  font-weight:800;
  font-size:16px;
  box-shadow:inset 5px 0 0 #0E6F86, 2px 0 6px -2px rgba(2,62,85,0.35);
}
body:not(.gpd-tema-claro) #gpdPlanoTable tr.gpd-plano-row-headline-resultado td{
  background:linear-gradient(180deg, rgba(34,72,102,0.98), rgba(20,46,68,0.98));
  border-top:1px solid rgba(79,154,192,0.55);
  border-bottom:1px solid rgba(79,154,192,0.55);
  font-size:16px;
}
body:not(.gpd-tema-claro) #gpdPlanoTable tr.gpd-plano-row-headline-resultado td.name,
body:not(.gpd-tema-claro) div.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado{
  background:linear-gradient(180deg, rgb(34,72,102), rgb(20,46,68));
  font-size:16px;
  box-shadow:inset 5px 0 0 #4F9AC0, 2px 0 6px -2px rgba(0,0,0,0.5);
}
/* ...e o número em branco iluminado (19/09/2026: "deixe um branco mais
   iluminado, não mudou"): nas colunas do trimestre atual o véu dourado
   (box-shadow de td.gpd-plano-col-current-q) apagava o azul e o branco —
   nesta linha ele fica bem mais leve. */
body:not(.gpd-tema-claro) #gpdPlanoTable tr.gpd-plano-row-headline-resultado td,
body:not(.gpd-tema-claro) #gpdPlanoTable tr.gpd-plano-row-headline-resultado td.num,
body:not(.gpd-tema-claro) div.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado{
  color:#FFFFFF;
  text-shadow:0 0 10px rgba(255,255,255,0.45), 0 0 2px rgba(255,255,255,0.35);
}
body:not(.gpd-tema-claro) #gpdPlanoTable tbody tr.gpd-plano-row-headline-resultado td.gpd-plano-col-current-q{
  box-shadow:inset 0 0 0 999px rgba(242,183,5,0.05);
}
body.gpd-tema-claro #gpdPlanoTable tbody tr.gpd-plano-row-headline-resultado td.gpd-plano-col-current-q{
  box-shadow:inset 0 0 0 999px rgba(242,183,5,0.08);
}
/* Frete: letras e números com mais destaque, nos dois modos (19/09/2026:
   "destaque mais as letras e números"). Rótulo sem a transparência e mais
   forte; número maior e mais grosso — 23px ainda cabe "R$ 1.216,92" no
   cartão de ~185px. */
.gpd-frete-vendor-tiles .kpi .label{ opacity:1; font-size:13px; font-weight:800; letter-spacing:0.04em; }
.gpd-frete-vendor-tiles .kpi .val{ font-size:clamp(19px, 1.6vw, 23px); font-weight:800; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi .label{ color:#23385C; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi .val{ color:#023E55; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi[data-fmt="pct"] .val{ color:#0B6380; }
body.gpd-tema-claro .gpd-frete-vendor-tiles .kpi[data-fmt="count"] .val{ color:#946500; }
body:not(.gpd-tema-claro) .gpd-frete-vendor-tiles .kpi .label{ color:#E6EAF0; }
body:not(.gpd-tema-claro) .gpd-frete-vendor-tiles .kpi .val{ text-shadow:0 0 10px rgba(255,255,255,0.18); }
/* "Resultado" do mês abaixo da meta em vermelho (19/09/2026). O tom já vem
   calculado em gpdPlanoRenderKpis (js/gpd-plano.js: .val.bad quando fica
   abaixo da meta, ou ACIMA do objetivo nas abas de setor); só o azul fixo
   de .gpd-plano-kpis .kpi .val.bad escondia. 1º cartão = Resultado. */
.gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi:first-child .val.bad{ color:#FF6B70; }
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi:first-child .val.bad{ color:#C62F3A; }
/* Cartões do topo do Plano em cinza mais escuro (19/09/2026: "cinza mais
   escuro"), nos dois modos. */
body.gpd-tema-claro .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  background:linear-gradient(180deg, #C8D2DA 0%, #AEBBC6 100%);
}
body:not(.gpd-tema-claro) .gpd-plano-kpis:not(.gpd-frete-vendor-tiles) .kpi{
  background:linear-gradient(180deg, rgba(79,154,192,0.10), rgba(79,154,192,0.03) 60%, rgba(0,0,0,0.18)), #11151B;
}
/* Título "Plano de Ação · GPD" maior e sem a linha "Metas x resultados
   mensais... fonte: GPD2607..." embaixo (19/09/2026: "deixe maior o plano e
   retire meta"), nos dois modos. */
.gpd-plano-card > h3{ font-size:28px; letter-spacing:0.03em; margin-bottom:14px; }
.gpd-plano-card > .card-sub{ display:none; }
@media (max-width:640px){ .gpd-plano-card > h3{ font-size:22px; } }
/* ...ainda pouco destaque no claro (19/09/2026: "aqui precisa destacar
   mais"): a linha passa a ser azul-petróleo escuro com número em branco —
   contraste invertido em relação às vizinhas pastel. */
body.gpd-tema-claro #gpdPlanoTable tr.gpd-plano-row-headline-resultado td{
  background:linear-gradient(180deg, #13809A 0%, #0B5E74 100%);
  color:#FFFFFF;
  text-shadow:0 1px 1px rgba(0,0,0,0.25);
  border-top-color:#0A5568;
  border-bottom-color:#0A5568;
}
body.gpd-tema-claro #gpdPlanoTable tr.gpd-plano-row-headline-resultado td.name,
body.gpd-tema-claro div.gpd-plano-sticky-overlay-row.gpd-plano-row-headline-resultado{
  background:linear-gradient(180deg, #0B6A82 0%, #084D60 100%);
  color:#FFFFFF;
  box-shadow:inset 5px 0 0 #F7AF02, 2px 0 6px -2px rgba(2,62,85,0.45);
}
/* Frete no escuro: % e contagem num tom mais fechado/saturado (19/09/2026:
   "deixe mais escuro") — o azul-claro e o dourado pastel lavavam. Sem o
   brilho branco nesses dois. */
body:not(.gpd-tema-claro) .gpd-frete-vendor-tiles .kpi[data-fmt="pct"] .val{ color:#3E9FD6; text-shadow:none; }
body:not(.gpd-tema-claro) .gpd-frete-vendor-tiles .kpi[data-fmt="count"] .val{ color:#E0A30E; text-shadow:none; }
/* Versão do sistema no GPD, à esquerda do botão Claro/Escuro (que é absoluto
   no canto do cartão do Plano). No celular o botão vai pro cabeçalho e a
   versão sai de cena, pra não disputar espaço. */
.gpd-app-versao{
  position:absolute; top:22px; right:116px; z-index:3;
  font:700 11.5px 'JetBrains Mono', monospace; letter-spacing:0.06em;
  padding:4px 9px; border-radius:999px; white-space:nowrap;
  color:rgba(255,255,255,0.72); border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.08);
}
body.gpd-tema-claro .gpd-app-versao{ color:#3B4E73; border-color:rgba(2,62,85,0.20); background:rgba(255,255,255,0.75); }
@media (max-width:640px){ .gpd-app-versao{ display:none; } }
/* Lista de clientes do celular: amarelo de "ausente" e verde de "Visitado"
   mais fortes (20/09/2026: "mais amarelo e mais verde"), nos dois modos. O
   amarelo precisa de !important porque a regra original também tem. */
.gpd-clientes-mobile-row--ausente{
  border-color:rgba(242,183,5,0.80) !important;
  background:linear-gradient(180deg, rgba(242,183,5,0.34), rgba(242,183,5,0.16)) !important;
}
.gpd-clientes-mobile-ausente-badge{
  background:rgba(242,183,5,0.34);
  border-color:rgba(242,183,5,0.85);
}
.gpd-clientes-mobile-row--visitado{
  border-color:rgba(79,174,124,0.75);
  background:
    linear-gradient(160deg, rgba(79,174,124,0.36), rgba(79,174,124,0.16) 60%),
    rgba(26,31,38,0.4);
}
body.gpd-tema-claro .gpd-clientes-mobile-row--visitado{
  border-color:rgba(30,138,85,0.75);
  background:linear-gradient(160deg, rgba(30,138,85,0.34), rgba(30,138,85,0.15) 60%), #FFFFFF;
}
body.gpd-tema-claro .gpd-clientes-mobile-row--ausente{
  border-color:rgba(200,150,0,0.80) !important;
  background:linear-gradient(180deg, rgba(242,183,5,0.40), rgba(242,183,5,0.20)) !important;
}
body.gpd-tema-claro .gpd-clientes-mobile-ausente-badge{ color:#7A5800; }


/* Barra de rolagem destacada no GPD (22/09/2026, "destaque mais a barra"):
   mesma regra do painel — 13px, polegar com folga e dourado no hover. A barra
   horizontal do card de Cobrança tem estilo próprio logo acima e continua
   valendo (é mais específica). */
::-webkit-scrollbar{ height:13px; width:13px; }
::-webkit-scrollbar-track{ background:rgba(255,255,255,0.07); border-radius:8px; }
::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,0.34);
  background-clip:content-box;
  border:3px solid transparent;
  border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--accent); background-clip:content-box; }
::-webkit-scrollbar-corner{ background:transparent; }
/* Sem as setinhas do Windows: com trilho proprio elas destoam. */
::-webkit-scrollbar-button{ display:none; width:0; height:0; }
/* Só no Firefox: no Chrome novo scrollbar-color tem precedência e anularia
   todo o desenho acima (ver a mesma nota em css/styles.css). */
@supports not selector(::-webkit-scrollbar){
  html{ scrollbar-width:auto; scrollbar-color: rgba(255,255,255,0.34) rgba(255,255,255,0.07); }
  body.gpd-tema-claro{ scrollbar-color: rgba(15,45,92,0.42) rgba(15,45,92,0.08); }
}
body.gpd-tema-claro ::-webkit-scrollbar-track{ background:rgba(15,45,92,0.08); }
body.gpd-tema-claro ::-webkit-scrollbar-thumb{ background:rgba(15,45,92,0.42); background-clip:content-box; }
body.gpd-tema-claro ::-webkit-scrollbar-thumb:hover{ background:rgba(15,45,92,0.7); background-clip:content-box; }


/* ---------- Seletores de mês: acabamento (22/09/2026, "melhore") ----------
   No tema claro o "Ago" era um retângulo cinza chapado, com a seta num cinza
   quase invisível e sem nenhuma reação ao passar o mouse. Ganharam o mesmo
   vocabulário dos cartões: leve degradê, borda definida, brilho no topo e
   estados de hover/foco claros. O select de mês do FRETE fica sobre a faixa
   escura do título e continua como estava (cores próprias, já validadas). */
.gpd-clientes-stat-month-select,
.gpd-visitas-month-select{ font-weight:700; }
.gpd-visitas-month-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238B93A0' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center,
    var(--panel-2);
  padding-right:34px;
  cursor:pointer;
}
.gpd-clientes-stat-month-select:hover,
.gpd-visitas-month-select:hover{ border-color:rgba(242,183,5,0.45); }

body.gpd-tema-claro .gpd-clientes-stat-month-select,
body.gpd-tema-claro .gpd-visitas-month-select{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1.2 1.2l4.3 4.3 4.3-4.3' stroke='%231E3446' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center,
    linear-gradient(180deg, #FFFFFF 0%, #E9EDF3 100%);
  color:#14232E;
  border:1px solid #BFC8D4;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -2px 4px rgba(40,55,75,0.06),
    0 2px 5px rgba(30,45,65,0.12);
}
body.gpd-tema-claro .gpd-clientes-stat-month-select:hover,
body.gpd-tema-claro .gpd-visitas-month-select:hover{
  border-color:#94A6B8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 5px 12px rgba(30,45,65,0.18);
}
body.gpd-tema-claro .gpd-clientes-stat-month-select:focus,
body.gpd-tema-claro .gpd-visitas-month-select:focus{
  border-color:#B98200;
  box-shadow:0 0 0 3px rgba(242,183,5,0.28);
}
body.gpd-tema-claro .gpd-clientes-stat-month-select option,
body.gpd-tema-claro .gpd-visitas-month-select option{ color:#14232E; background:#FFFFFF; }

/* Cabeçalho da tabela de Frete em relevo azul (01/10/2026, "experimente o
   texto 3D que usamos na reunião"): mesmo efeito da tela Reunião
   (reuniao.html, .kpi .v / .kpi .l). Título da coluna com degradê azul
   recortado no texto e borda em degraus por drop-shadow (text-shadow
   cobriria o degradê); sub-rótulo e selo R$/km em relevo com text-shadow. */
.gpd-frete-table{ --emb-l:#7CB8FF; --emb-hi:rgba(255,255,255,.18); --emb-d1:#1646A8; --emb-d2:#0C2C6E; --emb-sh:rgba(0,0,0,.6); }
body.gpd-tema-claro .gpd-frete-table{ --emb-l:#2F6FED; --emb-hi:rgba(255,255,255,.9); --emb-d1:#1C56C9; --emb-d2:#133F99; --emb-sh:rgba(15,45,92,.35); }
.gpd-frete-table thead .gpd-frete-th-main{
  background:linear-gradient(180deg,#7CCBFF 0%,#3F95FF 45%,#2463E6 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  /* Versão enxuta do relevo da Reunião: lá o número tem 28px; aqui a letra
     tem 12,5px e as três sombras empilhadas embolavam o texto. */
  filter:drop-shadow(0 1px 0 var(--emb-d2)) drop-shadow(0 2px 2px var(--emb-sh));
  font-weight:800;
}
.gpd-frete-table thead .gpd-frete-th-sub{
  color:var(--emb-l) !important; opacity:1 !important;
  text-shadow:-1px -1px 0 var(--emb-hi), 1px 1px 2px var(--emb-sh);
}
/* "CUSTO OPERACIONAL" quebrava "OPERACIONA / L" na coluna estreita: o
   break-word herdado de .gpd-plano-medidas-table cortava a palavra no meio.
   Aqui quebra só entre palavras, com um pouco menos de respiro lateral. */
.gpd-frete-table thead th{
  padding-left:8px; padding-right:8px;
  word-break:normal; overflow-wrap:normal; hyphens:none;
}
.gpd-frete-table thead th:first-child{ padding-left:18px; }

/* Título e números do topo do GPD em relevo azul (01/10/2026, "vamos testar
   aqui também, só deixe o azul mais forte"): mesmo efeito da tela Reunião e
   do cabeçalho do Frete, com degradê de azul mais fechado. Só os 3 primeiros cartões
   (Resultado, Meta, % Acumulado): "Vs. ano anterior" e "Positivação"
   mantêm a cor de hoje (vermelho/verde), escolha do Rafael na prévia. */
.gpd-plano-card{ --emb3-d1:#0E3A8C; --emb3-d2:#06215A; --emb3-sh:rgba(0,0,0,.55); --emb3-grad:linear-gradient(180deg,#8FC9FF 0%,#3D8BFF 45%,#1A56D6 100%); }
body.gpd-tema-claro .gpd-plano-card{ --emb3-d1:#1440A8; --emb3-d2:#0A2A70; --emb3-sh:rgba(10,35,90,.35); --emb3-grad:linear-gradient(180deg,#4A9BFF 0%,#1E64E8 50%,#0A3CB0 100%); }
.gpd-plano-card > h3,
#gpdPlanoKpis .kpi:nth-child(-n+3) .val{
  background:var(--emb3-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 var(--emb3-d1)) drop-shadow(0 2px 0 var(--emb3-d2)) drop-shadow(0 4px 5px var(--emb3-sh));
  width:max-content; max-width:100%;
}
#gpdPlanoKpis .kpi:nth-child(-n+3) .val{ margin-left:auto; margin-right:auto; }
/* Título "PLANO DE AÇÃO · GPD" num azul mais escuro que os números (pedido do
   Rafael na prévia: "no plano de ação pode deixar mais escuro"). Só no tema claro: no escuro o
   azul-marinho some contra o fundo, então lá fica o mesmo azul dos números. */
body.gpd-tema-claro .gpd-plano-card > h3{ --emb3-grad:linear-gradient(180deg,#1F5FD0 0%,#0D3590 50%,#051C52 100%); --emb3-d1:#08205A; --emb3-d2:#030F30; }
/* 01/10/2026, 2ª volta (print do Rafael): "mantenha o 3D nas demais com a cor
   original; no de cima deixe um pouco menos no azul, 10%".
   - Título: o mesmo degradê com 10% puxado pro cinza-ardósia (menos azul),
     nos dois temas.
   - "Vs. ano anterior" e "Positivação" (4º e 5º cartões): mesmo relevo dos
     três primeiros, mas na COR DELES (verde-azulado, vermelho quando cai):
     o degradê sai de currentColor. Aqui color NÃO vira transparente (só o
     preenchimento do texto), senão currentColor some junto. */
.gpd-plano-card > h3{
  --emb3-grad:linear-gradient(180deg, color-mix(in srgb,#8FC9FF 90%,#8A93A3) 0%, color-mix(in srgb,#3D8BFF 90%,#8A93A3) 45%, color-mix(in srgb,#1A56D6 90%,#8A93A3) 100%);
}
body.gpd-tema-claro .gpd-plano-card > h3{
  --emb3-grad:linear-gradient(180deg, color-mix(in srgb,#1F5FD0 90%,#3B4250) 0%, color-mix(in srgb,#0D3590 90%,#3B4250) 50%, color-mix(in srgb,#051C52 90%,#3B4250) 100%);
  --emb3-d1:color-mix(in srgb,#08205A 90%,#3B4250); --emb3-d2:color-mix(in srgb,#030F30 90%,#3B4250);
}
#gpdPlanoKpis .kpi:nth-child(n+4) .val{
  background:linear-gradient(180deg, color-mix(in srgb,currentColor 55%,#FFFFFF) 0%, currentColor 50%, color-mix(in srgb,currentColor 75%,#000000) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,currentColor 55%,#000000)) drop-shadow(0 2px 0 color-mix(in srgb,currentColor 35%,#000000)) drop-shadow(0 4px 5px var(--emb3-sh));
  width:max-content; max-width:100%; margin-left:auto; margin-right:auto;
}