/* CRM EXECUTIVO — Experience Layer (25/09/2026). Escopo #vx-crm-exec e .vx-kh. Tokens DS v2 c/ fallback do CRM.
   UM container com divisores (MetricGroup), números tabulares, dourado só no ativo; sem glow/gradiente. */
#vx-crm-exec { --x-s1: var(--vds-surface-1, var(--s1)); --x-s2: var(--vds-surface-2, var(--s2)); --x-bd: var(--vds-border-default, var(--b1));
  --x-t1: var(--vds-text-primary, var(--t1)); --x-t2: var(--vds-text-body, var(--t2)); --x-t3: var(--vds-text-secondary, var(--t3));
  --x-lbl: var(--vds-text-label, var(--t3)); --x-gold: var(--vds-gold-500, var(--gold)); --x-warn: var(--vds-warning, #E0A43A);
  margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; font-family: var(--vds-font-sans, inherit); }
#vx-crm-exec[hidden] { display: none !important; }
#vx-crm-exec .vx-bar { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr 1.1fr; background: var(--x-s1); border: 1px solid var(--x-bd); border-radius: 12px; overflow: hidden; }
#vx-crm-exec .vx-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 16px; text-align: left; background: transparent; border: 0; border-left: 1px solid var(--x-bd); color: inherit; font: inherit; }
#vx-crm-exec .vx-m:first-child { border-left: 0; }
#vx-crm-exec button.vx-m { cursor: pointer; }
#vx-crm-exec button.vx-m:hover { background: var(--x-s2); }
#vx-crm-exec .vx-m.is-on { background: var(--x-s2); box-shadow: inset 0 -2px 0 var(--x-gold); }
#vx-crm-exec .vx-m-l { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--x-lbl); white-space: nowrap; }
#vx-crm-exec .vx-m-v { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--x-t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
#vx-crm-exec .vx-m-s { font-size: 11.5px; color: var(--x-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vx-crm-exec .vx-m-wait .vx-m-v::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--x-gold); margin: 0 8px 3px 0; vertical-align: middle; }
#vx-crm-exec .vx-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; border: 1px solid var(--x-bd); border-left: 2px solid var(--x-gold); border-radius: 0 10px 10px 0; background: var(--x-s1); font-size: 12.5px; color: var(--x-t2); }
#vx-crm-exec .vx-filter-l { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--x-lbl); }
#vx-crm-exec .vx-filter b { color: var(--x-t1); }
#vx-crm-exec .vx-filter-n { color: var(--x-t3); font-variant-numeric: tabular-nums; }
#vx-crm-exec .vx-filter-o { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--x-t3); }
#vx-crm-exec .vx-chip-pipe { height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--x-bd); background: transparent; color: var(--x-t2); font: 500 12px inherit; cursor: pointer; }
#vx-crm-exec .vx-chip-pipe b { color: var(--x-t1); margin-left: 4px; }
#vx-crm-exec .vx-clear { margin-left: auto; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--x-bd); background: transparent; color: var(--x-t1); font: 600 12px inherit; cursor: pointer; }
#vx-crm-exec .vx-clear:hover { background: var(--x-s2); }
#vx-crm-exec button:focus-visible { outline: 2px solid var(--x-gold); outline-offset: -2px; }
/* Indicador discreto no cabeçalho da coluna */
.kcol-head .vx-kh { display: flex; gap: 8px; flex-shrink: 0; white-space: nowrap; margin-left: 6px; font-size: 11px; color: var(--vds-text-secondary, var(--t3)); font-variant-numeric: tabular-nums; }
.kcol-head .vx-kh span { white-space: nowrap; }
.kcol-head .vx-kh i { font-size: 10px; margin-right: 3px; }
.kcol-head .vx-kh-wait i { color: var(--vds-gold-500, var(--gold)); }
/* Tablet/mobile: a barra rola DENTRO dela (nunca a página) */
@media (max-width: 1100px) {
  #vx-crm-exec .vx-bar { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  #vx-crm-exec .vx-m { flex: 0 0 auto; min-width: 168px; scroll-snap-align: start; }
}
@media (max-width: 480px) {
  #vx-crm-exec .vx-m { min-width: 148px; padding: 10px 12px; }
  #vx-crm-exec .vx-m-v { font-size: 18px; }
  #vx-crm-exec .vx-clear { margin-left: 0; }
}