/* ====================================================================
   VORTEX — design system (dark + teal, fluido estilo Flutter)
   ==================================================================== */
:root {
  --vx-bg:        #0B0B14;
  --vx-bg-2:      #10111B;
  --vx-surface:   #161826;
  --vx-surface-2: #1D2030;
  --vx-surface-3: #242838;
  --vx-border:    rgba(255,255,255,.08);
  --vx-border-2:  rgba(255,255,255,.14);

  --vx-teal:      #1D9E75;
  --vx-teal-br:   #2BD4A0;
  --vx-teal-soft: #5DCAA5;
  --vx-teal-glow: rgba(43,212,160,.30);

  --vx-text:      #E9ECF4;
  --vx-muted:     rgba(233,236,244,.62);
  --vx-faint:     rgba(233,236,244,.38);

  --vx-quente:    #2BD4A0;
  --vx-morno:     #F2B441;
  --vx-frio:      #FF6B6B;

  --vx-spring:    cubic-bezier(.34,1.56,.64,1);
  --vx-smooth:    cubic-bezier(.4,0,.2,1);
  --vx-r:         14px;
  --vx-r-lg:      20px;

  /* ── TIPOGRAFIA ────────────────────────────────────────────────────────────────
     display: Outfit — mesma geometria do wordmark "vortex", é a voz da marca em
              título, número grande e preço.
     texto:   Plus Jakarta Sans — aguenta corpo 12-14px sem cansar, e tem numeral
              tabular, então coluna de preço para de "dançar" quando o valor muda. */
  --vx-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --vx-sans:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

html, body {
  margin: 0;
  background: radial-gradient(1200px 700px at 80% -10%, #15182a 0%, var(--vx-bg) 55%);
  color: var(--vx-text);
  font-family: var(--vx-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11' 1;   /* '1' e 'l' distinguíveis — importa em código de chapa e bloco */
}

/* Número em coluna alinha por padrão: preço, m², peso. Sem isto o "1" é mais estreito e a
   coluna de valores fica serrilhada. */
.vx-num, .vx-pp-slab-price, .vx-pp-price, .vx-pp-meta, .vx-pp-bar-sel .num,
td.num, .vx-cine-stat b { font-variant-numeric: tabular-nums; }

/* COLOR-SCHEME: sem isto o navegador desenha a UI DELE no claro — barra de rolagem da janela com
   trilho branco, dropdown de select branco, autofill amarelo — mesmo com o app inteiro no escuro.
   As regras ::-webkit-scrollbar abaixo nao vencem a barra da JANELA sozinhas; quem manda nela e
   esta linha. Foi por isso que a barra continuou cinza-claro depois de eu pintar tudo de teal. */
:root { color-scheme: dark; }
:root.vx-light { color-scheme: light; }

/* SCROLLBAR NO TEAL DO VORTEX.
   Era cinza-escuro (--vx-surface-3) sobre fundo escuro: sumia, e num catalogo de milhares de
   chapas nao dava para saber a que altura da lista se estava. Agora o polegar tem cor propria —
   trilho continua invisivel, so o indicador aparece. Clarea no hover e no arraste, para dar
   resposta ao toque sem precisar de mais nada na tela. */
* { scrollbar-color: var(--vx-teal) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent !important; }
*::-webkit-scrollbar-thumb { background: var(--vx-teal) !important; border-radius: calc(8px * var(--vx-raio, 1)); border: 2px solid transparent; background-clip: content-box;
  transition: background .15s; }
*::-webkit-scrollbar-thumb:hover { background: var(--vx-teal-br) !important; background-clip: content-box; }
*::-webkit-scrollbar-thumb:active { background: var(--vx-teal-br) !important; background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent !important; }
/* a barra da JANELA nem sempre herda do seletor universal — html/body explicitos */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent !important; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--vx-teal) !important;
  border-radius: calc(8px * var(--vx-raio, 1)); border: 2px solid transparent; background-clip: content-box; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--vx-teal-br) !important; background-clip: content-box; }
/* No tema claro o teal cheio brilha demais sobre branco — mesma cor, um pouco recolhida. */
:root.vx-light * { scrollbar-color: color-mix(in srgb, var(--vx-teal) 75%, transparent) transparent; }
:root.vx-light *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--vx-teal) 75%, transparent) !important; background-clip: content-box; }
:root.vx-light *::-webkit-scrollbar-thumb:hover { background: var(--vx-teal) !important; background-clip: content-box; }
/* board de pedidos (rola na horizontal): polegar mais ESCURO, discreto no fundo dark */
/* o board rola na horizontal e o polegar cruza a tela inteira: teal mais contido aqui */
.vx-pipe { scrollbar-color: color-mix(in srgb, var(--vx-teal) 60%, transparent) transparent; }
.vx-pipe::-webkit-scrollbar { height: 12px; }
.vx-pipe::-webkit-scrollbar-track { background: transparent !important; }
.vx-pipe::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--vx-teal) 60%, transparent) !important; border:3px solid transparent; background-clip: content-box; border-radius:calc(8px * var(--vx-raio, 1)); }
.vx-pipe::-webkit-scrollbar-thumb:hover { background: var(--vx-teal-soft) !important; background-clip: content-box; }

/* Boot ring (Authorizing) */
.vx-boot { min-height: 100vh; display: grid; place-items: center; background: var(--vx-bg); }
.vx-boot-ring {
  width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.10);
  border-top-color: var(--vx-teal-br);
  animation: vx-spin .9s linear infinite;
}
@keyframes vx-spin { to { transform: rotate(360deg); } }
/* Loader = espiral do Vortex (buraco-negro girando) */
.vx-boot-vortex { display:grid; place-items:center; gap:16px; }
.vx-boot-vortex .vx-mark { width:72px; height:72px; animation: vx-mark-spin 1.5s linear infinite; }
.vx-boot-vortex i { font-style:normal; font-size:12px; letter-spacing:calc(3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }

/* ---- Mark (símbolo buraco negro, CSS puro) ---- */
.vx-mark { position: relative; border-radius: 50%; flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, #0B0B14 0 34%, transparent 35%),
    conic-gradient(from 210deg, var(--vx-teal) 0 25%, var(--vx-teal-br) 30%, transparent 55% 100%);
  box-shadow: var(--vx-sombra, 0 0 0 1.5px rgba(93,202,203,.5) inset, 0 0 18px -4px var(--vx-teal-glow));
  animation: vx-mark-spin 9s linear infinite;
}
.vx-mark::after { content:""; position:absolute; inset:30%; border-radius:50%; background:#0B0B14;
  box-shadow: 0 0 0 1.5px rgba(159,225,203,.55); }
@keyframes vx-mark-spin { to { transform: rotate(360deg); } }
.vx-logo-spin { animation: vx-mark-spin 14s linear infinite; object-fit: contain; flex: 0 0 auto; }

/* ====================== LOGIN ====================== */
.vx-login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -5%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), transparent 60%),
    radial-gradient(1100px 700px at 88% 112%, rgba(124,92,255,.09), transparent 62%),
    radial-gradient(800px 520px at 6% 88%, rgba(56,132,255,.06), transparent 60%),
    linear-gradient(180deg, #060912, #0b0b14);
  position: relative; overflow: hidden;
}
/* Decoração de fundo do login — só o CÉU: nebulosas + estrelas (o redemoinho girando saiu). */
.vx-login-deco { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.vx-login-dust { position:absolute; inset:0; opacity:.5;
  background:
    radial-gradient(1.5px 1.5px at 18% 32%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 50%, transparent)), transparent 100%),
    radial-gradient(1px 1px at 64% 18%, rgba(233,236,244,.35), transparent 100%),
    radial-gradient(1.5px 1.5px at 82% 61%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 40%, transparent)), transparent 100%),
    radial-gradient(1px 1px at 38% 78%, rgba(233,236,244,.28), transparent 100%),
    radial-gradient(1px 1px at 9% 74%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 35%, transparent)), transparent 100%),
    radial-gradient(1.5px 1.5px at 51% 47%, rgba(233,236,244,.2), transparent 100%),
    radial-gradient(1px 1px at 90% 12%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 40%, transparent)), transparent 100%); }

/* ── GALÁXIA ─────────────────────────────────────────────────────────────
   O redemoinho da marca vira uma galáxia espiral de verdade: nebulosas nas
   cores do Vortex (teal + violeta), campo de estrelas em tile repetido
   (barato: 2 camadas cintilando fora de fase), a faixa da via-láctea em
   diagonal e uma estrela cadente de vez em quando. Tudo CSS, zero imagem. */
.vx-login-nebula { position:absolute; inset:-22%;
  background:
    radial-gradient(42% 30% at 22% 30%, rgba(124,92,255,.15), transparent 70%),
    radial-gradient(40% 28% at 78% 64%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 13%, transparent)), transparent 70%),
    radial-gradient(30% 22% at 62% 12%, rgba(56,132,255,.10), transparent 70%),
    radial-gradient(24% 18% at 10% 82%, rgba(212,92,255,.06), transparent 70%),
    linear-gradient(115deg, transparent 40%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 5%, transparent)) 50%, rgba(124,92,255,.05) 57%, transparent 68%);
  filter: blur(28px);
  animation: vx-nebula-drift 90s ease-in-out infinite alternate; }
@keyframes vx-nebula-drift {
  from { transform: translate3d(-1.5%,-1%,0) scale(1); }
  to   { transform: translate3d(1.5%,1.5%,0) scale(1.06); } }

.vx-login-stars { position:absolute; inset:0; opacity:.85;
  background-image:
    radial-gradient(1px 1px at 22px 34px, rgba(233,236,244,.6), transparent),
    radial-gradient(1px 1px at 118px 152px, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 50%, transparent)), transparent),
    radial-gradient(1.4px 1.4px at 197px 88px, rgba(233,236,244,.45), transparent),
    radial-gradient(1px 1px at 66px 210px, rgba(233,236,244,.35), transparent),
    radial-gradient(1.2px 1.2px at 244px 196px, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-soft) 40%, transparent)), transparent),
    radial-gradient(1px 1px at 158px 246px, rgba(233,236,244,.3), transparent),
    radial-gradient(1px 1px at 86px 108px, rgba(160,190,255,.35), transparent);
  background-size: 280px 280px;
  animation: vx-twinkle 5.5s ease-in-out infinite; }
.vx-login-stars2 { opacity:.7;
  background-image:
    radial-gradient(1.8px 1.8px at 64px 96px, rgba(233,236,244,.7), transparent),
    radial-gradient(1.4px 1.4px at 310px 244px, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 55%, transparent)), transparent),
    radial-gradient(2.2px 2.2px at 208px 388px, rgba(233,236,244,.5), transparent),
    radial-gradient(1.4px 1.4px at 388px 76px, rgba(160,190,255,.45), transparent),
    radial-gradient(1.8px 1.8px at 128px 296px, rgba(233,236,244,.4), transparent);
  background-size: 440px 440px;
  animation: vx-twinkle 7.5s ease-in-out 1.8s infinite; }
@keyframes vx-twinkle { 0%,100% { opacity:.9; } 50% { opacity:.45; } }

.vx-login-shooting { position:absolute; top:16%; left:-12%; width:150px; height:2px; border-radius:calc(2px * var(--vx-raio, 1));
  background: linear-gradient(90deg, transparent, rgba(233,236,244,.85) 70%, #fff);
  box-shadow: var(--vx-sombra, 0 0 6px rgba(233,236,244,.5));
  transform: rotate(14deg); opacity:0;
  animation: vx-shoot 11s ease-in 3s infinite; }
@keyframes vx-shoot {
  0%   { transform: translate3d(0,0,0) rotate(14deg); opacity:0; }
  1.5% { opacity:.9; }
  7%   { transform: translate3d(88vw,24vh,0) rotate(14deg); opacity:0; }
  100% { transform: translate3d(88vw,24vh,0) rotate(14deg); opacity:0; } }

/* O AVATAR E OS PAINEIS DA BARRA — nenhum deles usa MudMenu.
   O sino nao abria, e eu usei "o menu do avatar abre" como argumento para explicar por que. Estava
   errado nas duas pontas: o avatar tambem nao abre. MudMenu nao abre em canto nenhum desta barra, e
   descobrir por que e' curiosidade minha, nao trabalho do Daniel. Booleano e <div>, como o dialogo
   de sair — que funciona ha semanas. */
.vx-avatar-bt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: 6px; border-radius: 50%;
  overflow: hidden; cursor: pointer; flex: 0 0 auto;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  box-shadow: 0 0 0 0 var(--vx-teal-glow); transition: box-shadow .15s ease, transform .15s ease;
}
.vx-avatar-bt:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px var(--vx-teal-glow); }
.vx-avatar-bt.on { box-shadow: 0 0 0 3px var(--vx-teal-glow); }
/* o idioma da tela (Novas Demandas ME, item 2): a sigla num círculo, ao lado do avatar, como no Mobgran */
.vx-idioma-bt { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--vx-border-2, rgba(255,255,255,.18)); color:var(--vx-text); font-size:11.5px; font-weight:800; letter-spacing:.4px;
  cursor:pointer; user-select:none; flex:0 0 auto; transition:box-shadow .15s ease; }
.vx-idioma-bt:hover, .vx-idioma-bt.on { box-shadow:0 0 0 3px var(--vx-teal-glow); }
.vx-menu-idioma .item.on .l1 { color:var(--vx-teal-br); font-weight:700; }
.vx-avatar-bt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-avatar-bt .ini { font-size: 12.5px; font-weight: 700; color: var(--vx-sobre-destaque, #04110c); letter-spacing: calc(.02em * var(--vx-tracking, 1)); }

/* os dois paineis compartilham a moldura: sao a mesma coisa em lugares diferentes da barra */
.vx-menu-pessoa, .vx-menu-tema {
  position: fixed; z-index: 1401; top: 52px; right: 14px; min-width: 232px;
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: calc(12px * var(--vx-raio, 1)); box-shadow: var(--vx-sombra, 0 18px 46px rgba(0,0,0,.45));
  padding: 6px 0; animation: vx-avisos-entra .14s ease-out;
}
.vx-menu-pessoa .cab, .vx-menu-tema .cab { padding: 9px 14px 7px; border-bottom: 1px solid var(--vx-border); margin-bottom: 4px; }
.vx-menu-pessoa .cab b { display: block; font-size: 13.5px; color: var(--vx-text); }
.vx-menu-pessoa .cab span { font-size: 11px; color: var(--vx-faint); }
.vx-menu-tema .cab { font-size: 11.5px; color: var(--vx-muted); }
.vx-menu-pessoa .item, .vx-menu-tema .item {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  cursor: pointer; color: var(--vx-text); text-decoration: none; transition: background .12s ease;
}
.vx-menu-pessoa .item:hover, .vx-menu-tema .item:hover { background: rgba(255,255,255,.06); }
.vx-menu-pessoa .item .l1 { font-size: 13px; }
.vx-menu-pessoa .item .l2 { font-size: 11px; color: var(--vx-faint); }
/* a bolinha diz a cor do tema mais rapido que o nome dele */
.vx-menu-tema .bola { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.vx-menu-tema .item { font-size: 13px; }
/* a linha que separa COR de ACABAMENTO: vidro não é um tema, é como o tema é desenhado */
.vx-menu-tema .sep { height:1px; margin:6px 10px; background:var(--vx-border); }
/* a bolinha do vidro mostra o próprio efeito em miniatura, em vez de uma cor chapada */
.vx-menu-tema .bola.vidro { background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.2); }
.vx-menu-tema .item .marca { margin-left:auto; font-size:10.5px; color:var(--vx-teal-soft); }
:root.vx-light .vx-menu-tema .sep { background: rgba(15,23,42,.10); }
:root.vx-light .vx-menu-tema .bola.vidro { background: rgba(15,23,42,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(15,23,42,.14); }

/* "OUTRO CLIENTE ACABOU DE LEVAR" — aviso ao vivo na proposta publica.
   Fica colado na barra da selecao porque e' la que o numero muda: chapa que sai da selecao sem
   explicacao parece defeito da tela, e o cliente recarrega a pagina achando que travou. */
.vx-pp-levou {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 0 auto 8px; max-width: 680px; padding: 9px 14px; border-radius: calc(12px * var(--vx-raio, 1));
  font-size: 12.5px; line-height: 1.4;
  background: rgba(245,165,36,.14); border: 1px solid rgba(245,165,36,.35); color: #F5A524;
  animation: vx-rise .25s var(--vx-spring) both;
}
.vx-pp-levou:hover { background: rgba(245,165,36,.2); }

/* A CONVERSA DA PROPOSTA, lado do vendedor.
   O prefixo e' vx-chatv, com V de vendedor, porque .vx-chat JA EXISTE: e' a bolha flutuante do chat
   do CLIENTE na proposta publica (position:fixed, canto inferior direito). Como ela vem depois no
   arquivo, ela vencia por ordem de origem e o painel do vendedor — que deveria ficar dentro do
   detalhe da oferta — virava uma caixinha grudada no canto da tela.
   Fica no detalhe da oferta e nao numa tela propria: a pergunta do cliente ("essa tem em 3cm?") so
   se responde olhando os itens, e mandar a pessoa para outra tela para ler e voltar para conferir e'
   o caminho de nao responder. */
.vx-chatv {
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  border-radius: var(--vx-r); padding: 14px; margin: 14px 0 18px;
}
.vx-chatv-cab { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.vx-chatv-off {
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--vx-pill, 999px);
  background: rgba(255,255,255,.07); color: var(--vx-faint);
}
/* teto de altura com rolagem: conversa longa nao pode empurrar os itens da oferta para fora da tela */
.vx-chatv-linha { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.vx-chatv-vazio { font-size: 12.5px; color: var(--vx-faint); padding: 10px 2px; line-height: 1.5; }

.vx-chatv-msg { max-width: 78%; padding: 8px 11px; border-radius: calc(12px * var(--vx-raio, 1)); }
/* o cliente a esquerda, nos a direita — a mesma convencao de qualquer aplicativo de mensagem, e' o
   que deixa a leitura ser instantanea sem precisar ler o nome */
.vx-chatv-msg.cli { align-self: flex-start; background: var(--vx-surface-3); border: 1px solid var(--vx-border); }
.vx-chatv-msg.nos { align-self: flex-end; background: color-mix(in srgb, var(--vx-teal-br) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vx-teal-br) 30%, transparent); }
.vx-chatv-msg .quem { font-size: 10.5px; font-weight: 700; color: var(--vx-muted); margin-bottom: 2px; }
.vx-chatv-msg .txt { font-size: 13px; line-height: 1.45; color: var(--vx-text); white-space: pre-wrap; word-break: break-word; }
.vx-chatv-msg .qdo { font-size: 10px; color: var(--vx-faint); margin-top: 3px; text-align: right; }

.vx-chatv-escreve { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.vx-chatv-escreve textarea { flex: 1; resize: vertical; min-height: 46px; font-size: 13px; }

/* FICHA DA CHAPA EM SOMENTE LEITURA — o aviso fica na barra de acoes, no lugar onde o botao de
   salvar estaria. E' ali que a pessoa olha quando termina de preencher, e e' ali que ela precisava
   descobrir que nao ia poder salvar — em vez de descobrir depois do clique. */
.vx-chapa-somente-leitura {
  margin-right: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; line-height: 1.35; color: var(--vx-morno);
  background: rgba(245,165,36,.10); border: 1px solid rgba(245,165,36,.28);
  border-radius: var(--vx-pill, 999px); padding: 6px 13px;
}

/* O ANEL DE FOCO DO FocusOnNavigate — some para o mouse, fica para o teclado.
   O roteador foca o primeiro <h1> a cada navegacao (Routes.razor: FocusOnNavigate Selector="h1").
   Isso e' acessibilidade de verdade: quem usa leitor de tela precisa que o foco pule para o titulo
   da tela nova, senao ele continua lendo a anterior. So que, para focar um <h1>, o Blazor poe
   tabindex="-1" nele — e o navegador entao desenha a moldura. No login o <h1> e' o LOGOTIPO, e o
   Vortex abria com um retangulo branco em volta da marca.

   Ficou visivel agora porque o pre-render saiu: antes a primeira pintura era o HTML do servidor e o
   foco acontecia na troca de DOM; hoje a primeira renderizacao ja e' a interativa, e o anel aparece
   junto com a tela.

   :focus-visible e' exatamente a distincao que falta aqui — ele so casa quando o navegador entende
   que a pessoa esta navegando pelo TECLADO. Entao "focado mas nao focus-visible" e' o foco
   programatico, e e' esse que perde a moldura. Quem chega no h1 de Tab continua vendo onde esta.
   Nada de "outline:none" geral: apagar o foco do teclado deixa o teclado cego. */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* MIL CARTOES SEM TRAVAR — o navegador pula o que esta fora da tela.
   content-visibility:auto diz ao navegador para nao calcular layout nem pintar um cartao enquanto
   ele nao entra na area visivel. Com 988 oportunidades, e' a diferenca entre montar mil caixas de
   uma vez e montar as vinte que a pessoa esta vendo. O contain-intrinsic-size da a ALTURA presumida
   de quem ainda nao foi desenhado — sem ele a barra de rolagem pula enquanto se rola, porque a
   pagina descobre a altura real so na hora.
   Isto e do compositor, nao do JS: nao ha laco, nao ha virtualizacao para manter, e a grade
   continua sendo uma grade CSS comum. */
.vx-prosp-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 190px;
}

/* LISTAS DE ENVIO — escolher a lista e mexer nela sao a mesma tarefa, entao ficam lado a lado.
   Tela separada por lista obrigaria ir e voltar para conferir quem esta dentro, e conferencia que
   custa navegacao e' conferencia que ninguem faz. */
.vx-listas { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
/* AS DUAS COLUNAS PRECISAM COMECAR JUNTAS. A da direita e' um cartao com borda; a da esquerda,
   quando vazia, era texto solto sobre o fundo da pagina — comecava mais alto, nao alinhava com nada,
   e a tela lia como quebrada em vez de vazia. Vazio tambem e' um estado, e estado precisa de moldura
   para nao parecer defeito. */
.vx-listas-col > .vx-empty {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: var(--vx-r-lg); line-height: 1.6;
}
/* RESPIRO ENTRE O CABECALHO E AS COLUNAS. O .vx-page-head nao tem margem inferior propria, entao a
   grade encostava na linha de apoio do titulo. Fica aqui, e nao no .vx-page-head, porque mexer na
   regra global mudaria o espacamento de todas as telas de uma vez — sem ninguem ter pedido. */
.vx-listas { margin-top: 18px; }


@media (max-width: 900px) { .vx-listas { grid-template-columns: 1fr; } }

.vx-listas-col { display: flex; flex-direction: column; gap: 8px; }
.vx-lista-item {
  background: var(--vx-surface); border: 1px solid var(--vx-border); border-left: 3px solid transparent;
  border-radius: var(--vx-r); padding: 11px 13px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.vx-lista-item:hover { background: var(--vx-surface-2); transform: translateX(2px); }
.vx-lista-item.on { border-left-color: var(--vx-teal); background: var(--vx-surface-2); }
.vx-lista-item .topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vx-lista-item .topo b { font-size: 14px; color: var(--vx-text); }
/* a contagem e' o dado que decide se a lista serve: "12" responde antes de abrir */
.vx-lista-item .qtd {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--vx-pill, 999px);
  background: color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color: var(--vx-teal-br);
}
.vx-lista-item .desc { font-size: 11.5px; color: var(--vx-muted); margin-top: 3px; line-height: 1.35; }
.vx-lista-item .dono { font-size: 10.5px; color: var(--vx-faint); margin-top: 5px; text-transform: var(--vx-caixa, uppercase); letter-spacing: calc(.05em * var(--vx-tracking, 1)); }

.vx-listas-det {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: var(--vx-r-lg); padding: 18px;
}
.vx-listas-detcab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.vx-listas-detcab b { font-size: 17px; display: block; }
.vx-listas-detcab span { font-size: 12px; color: var(--vx-muted); }

.vx-listas-busca { display: flex; gap: 8px; margin-bottom: 12px; }
.vx-listas-busca .vx-input { flex: 1; height: 40px; }

/* OS ACHADOS FICAM ACIMA DOS MEMBROS, e com fundo proprio: sao duas listas de gente na mesma tela,
   e sem separacao visual a pessoa remove da lista quem ela acabou de procurar. */
.vx-listas-achados {
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  border-radius: var(--vx-r); padding: 8px; margin-bottom: 14px; max-height: 320px; overflow-y: auto;
}
.vx-listas-achados .cab {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--vx-muted); padding: 2px 6px 6px;
}
.vx-listas-achados .linha, .vx-listas-membros .linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; border-radius: calc(8px * var(--vx-raio, 1));
}
.vx-listas-achados .linha:hover, .vx-listas-membros .linha:hover { background: rgba(255,255,255,.04); }
.vx-listas-achados .linha.dentro { opacity: .5; }
.vx-listas-achados .ja { font-size: 11px; color: var(--vx-faint); }
.vx-listas-membros { max-height: 60vh; overflow-y: auto; }
.vx-listas-membros .linha { border-bottom: 1px solid var(--vx-border); border-radius: 0; }
.vx-listas-membros .linha:last-child { border-bottom: 0; }
.quem b { font-size: 13.5px; color: var(--vx-text); display: block; }
.quem span { font-size: 11.5px; color: var(--vx-muted); }
/* sem e-mail e' o que faz a lista mentir: ela diz 12 e o disparo alcanca 7 */
.quem .sem { color: var(--vx-morno); font-style: normal; }

/* MEU PERFIL — a foto e a senha da pessoa.
   Dois cartoes, e nao um formulario corrido: sao dois assuntos que nao se salvam juntos (a foto
   grava sozinha ao escolher; a senha exige os tres campos e um clique), e cartao separado e' o que
   evita a pessoa achar que precisa preencher senha para trocar a foto. */
.vx-perfil-cartao {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: var(--vx-r-lg); padding: 20px; margin-bottom: 16px;
}
.vx-perfil-topo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* O RETRATO E' O BOTAO. Circulo com a cara e um lapis por cima diz o que fazer sem rotulo. */
.vx-perfil-up { cursor: pointer; }
.vx-perfil-foto {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  box-shadow: var(--vx-sombra, 0 10px 26px -12px rgba(0,0,0,.7));
  transition: transform .15s ease, box-shadow .15s ease;
}
.vx-perfil-foto:hover { transform: translateY(-2px); box-shadow: var(--vx-sombra, 0 14px 32px -12px rgba(0,0,0,.8)); }
.vx-perfil-foto.ocupada { opacity: .55; pointer-events: none; }
.vx-perfil-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-perfil-foto .ini { font-size: 30px; font-weight: 700; color: var(--vx-sobre-destaque, #04110c); letter-spacing: calc(.02em * var(--vx-tracking, 1)); }
/* a faixa do lapis so cobre o rodape do circulo: por cima do rosto inteiro, escondia o que a pessoa
   acabou de escolher */
.vx-perfil-foto .lapis {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62));
}

.vx-perfil-quem { display: flex; flex-direction: column; gap: 3px; min-width: 200px; flex: 1; }
.vx-perfil-quem b { font-size: 17px; color: var(--vx-text); }
.vx-perfil-quem > span { font-size: 12.5px; color: var(--vx-muted); }
.vx-perfil-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.vx-perfil-tags .tag {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--vx-pill, 999px);
  background: color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color: var(--vx-teal-br);
}
.vx-perfil-tags .tag.suave { background: rgba(255,255,255,.06); color: var(--vx-muted); font-weight: 500; }
.vx-perfil-dica { font-size: 11px; color: var(--vx-faint); margin-top: 8px; }
/* remover a foto e' texto, e nao botao: e' o caminho raro, e um botao ao lado do retrato competiria
   com a propria acao de trocar */
.vx-perfil-tirar {
  align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none;
  font-size: 11.5px; color: var(--vx-faint); cursor: pointer; text-decoration: underline;
}
.vx-perfil-tirar:hover { color: var(--vx-morno); }

.vx-perfil-sec {
  font-size: 12px; font-weight: 700; letter-spacing: calc(.06em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-muted); margin-bottom: 14px;
}
.vx-perfil-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.vx-perfil-campos .vx-input { width: 100%; height: 42px; }

/* A MARCA ENQUANTO O CIRCUITO SOBE.
   Sem prerender o body fica vazio ate o Blazor desenhar a primeira tela — e vazio, para quem esta
   olhando, e' indistinguivel de travado. Esta marca ocupa esse intervalo e sai por conta propria.

   Ela NAO tem barra de progresso nem "carregando...": o intervalo e' curto demais para merecer
   numero, e uma barra que enche em 200ms chama mais atencao para a espera do que a propria espera.

   O fundo e' a mesma cor do app (--vx-bg com valor cravado, porque as variaveis do tema so existem
   depois do CSS do MudBlazor resolver): assim a transicao para a tela real nao troca a cor de fundo,
   e o que se ve e' so a marca sumindo. */
#vx-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  /* nao e' um preto chapado: um brilho teal no centro sobre o quase-preto da marca */
  background:
    radial-gradient(120% 90% at 50% 42%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 16%, transparent)) 0%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 5%, transparent)) 30%, transparent 62%),
    radial-gradient(100% 100% at 50% 50%, #0f1120 0%, #0B0B14 72%);
  animation: vx-splash-entra .5s ease-out both;
  overflow: hidden;
}
/* AURORA — o vortice como energia: um leque de luz teal/roxo girando devagar atras do logo */
#vx-splash::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 15%, transparent)) 18%, transparent 42%, rgba(124,58,237,.13) 66%, transparent 90%);
  filter: blur(30px); opacity: .85; animation: vx-splash-aurora 9s linear infinite;
}
.vx-splash-halo { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.vx-splash-halo img {
  position: relative; z-index: 2; width: 60px; height: 60px; opacity: .98;
  filter: drop-shadow(0 6px 22px color-mix(in srgb, var(--vx-teal-br) 40%, transparent)); animation: vx-splash-gira 2.4s linear infinite;
}
/* aneis que nascem no logo e se abrem — o pulso do radar/vortice */
.vx-splash-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--vx-teal-br) 50%, transparent);
  animation: vx-splash-pulso 2.2s cubic-bezier(.2,.7,.3,1) infinite; }
.vx-splash-ring:nth-child(2) { animation-delay: 1.1s; }
.vx-splash-word {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  font-size: 22px; font-weight: 600; letter-spacing: calc(.02em * var(--vx-tracking, 1)); color: #E9ECF4;
  opacity: 0; animation: vx-splash-sobe .6s ease-out .35s both;
}
.vx-splash-word b { color: var(--vx-teal-br); font-weight: 600; }
/* barrinha de progresso indeterminada — um facho teal que desliza, so para dizer "estou vindo" */
.vx-splash-bar { width: 118px; height: 3px; border-radius: var(--vx-pill, 99px); background: rgba(255,255,255,.08); overflow: hidden;
  opacity: 0; animation: vx-splash-sobe .6s ease-out .5s both; }
.vx-splash-bar i { display: block; width: 40%; height: 100%; border-radius: var(--vx-pill, 99px);
  background: linear-gradient(90deg, transparent, var(--vx-teal-br), transparent); animation: vx-splash-desliza 1.3s ease-in-out infinite; }

/* entra com atraso NO NAVEGADOR: numa rede boa o circuito sobe antes disso e a marca nem chega a
   aparecer, que e' o melhor resultado possivel — piscar a marca por 80ms seria outro piscar */
@keyframes vx-splash-entra { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
@keyframes vx-splash-gira { to { transform: rotate(360deg); } }
@keyframes vx-splash-aurora { to { transform: rotate(360deg); } }
@keyframes vx-splash-pulso { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes vx-splash-sobe { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vx-splash-desliza { 0% { transform: translateX(-150%); } 100% { transform: translateX(370%); } }

/* MODO APP INSTALADO: a abertura APARECE de vez (sem o atraso que a esconde no navegador) e fica o
   tempo minimo para a animacao ser vista (o JS segura). E' a tela de abertura do aplicativo. */
#vx-splash.vx-standalone { animation: none; opacity: 1; }

.vx-splash-sai { opacity: 0 !important; transform: scale(1.02); transition: opacity .42s ease, transform .42s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #vx-splash, #vx-splash::before, .vx-splash-halo img, .vx-splash-ring, .vx-splash-word, .vx-splash-bar, .vx-splash-bar i { animation: none !important; }
  .vx-splash-word, .vx-splash-bar { opacity: 1; }
  .vx-splash-sai { transition: opacity .3s ease; transform: none; }
}

/* O CEU EM CANVAS — as estrelas que vem em direcao a quem olha.
   Fica ACIMA das nebulosas e ABAIXO do cartao, e nao pinta fundo nenhum: o canvas e' transparente,
   entao a nebulosa continua aparecendo por tras dele.

   ACELERACAO DE GPU: canvas 2D no Chrome/Edge e' rasterizado na placa, e o desenho escolhido e' de
   proposito o caminho barato — drawImage de um sprite pronto vira um quadrilatero texturizado, que
   e' o que a GPU faz melhor. Por isso NAO ha shadowBlur aqui: sombra de canvas cai para o desenho
   por software e derruba o quadro. O translateZ(0) forca a camada propria de composicao, para o
   ceu se mexer sem obrigar a pagina inteira a repintar junto. */
.vx-ceu {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .vx-ceu { display: none; } }

/* O DESLOCAMENTO POR MOUSE SAIU DAQUI, e com ele --vx-dx/--vx-dy, o will-change das camadas e o
   giro do cartao. O ceu ja tem movimento proprio; somar a ele um movimento comandado pelo cursor
   virava inquietacao, e nao imersao. O que sobrou destas camadas e' o que elas sempre foram bem:
   fundo parado com vida propria (deriva da nebulosa, cintilar das estrelas). */

@media (prefers-reduced-motion: reduce) {
  .vx-login-nebula, .vx-login-stars, .vx-login-stars2, .vx-login-shooting { animation:none; } }
.vx-login-card {
  position: relative; width: 100%; max-width: 380px; padding: 38px 32px 30px;
  background: rgba(22,24,38,.72); backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--vx-border-2); border-radius: var(--vx-r-lg);
  box-shadow: var(--vx-sombra, 0 30px 80px -30px rgba(0,0,0,.8));
  animation: vx-rise .5s var(--vx-spring) both;
}
@keyframes vx-rise { from { opacity:0; transform: translateY(18px) scale(.97);} to{opacity:1; transform:none;} }
.vx-login-brand { display:flex; align-items:center; gap:12px; margin-bottom: 26px; }
.vx-login-brand .vx-mark { width: 42px; height: 42px; }
.vx-login-brand h1 { margin:0; font-size: 30px; font-weight: 500; letter-spacing:calc(-1px * var(--vx-tracking, 1)); }
/* O X E BRANCO — e o padrao da marca, o mesmo da barra do topo (.vx-brand b). Aqui ele tinha
   ficado teal, e logotipo com duas versoes nao e detalhe: e a primeira tela que o cliente ve. */
.vx-login-brand h1 b { color: var(--vx-text); font-weight:500; }
.vx-login-brand small { display:block; color: var(--vx-faint); font-size: 12px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); margin-top:2px; }
.vx-field { margin-bottom: 16px; }
.vx-field label { display:block; font-size: 12px; color: var(--vx-muted); margin: 0 0 6px 2px; }
.vx-input {
  width:100%; box-sizing:border-box; height: 46px; padding: 0 14px;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  border-radius: calc(12px * var(--vx-raio, 1)); color: var(--vx-text); font-size: 15px; outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.vx-input:focus { border-color: var(--vx-teal); box-shadow: 0 0 0 3px var(--vx-teal-glow); background: var(--vx-surface-3); }
.vx-btn {
  width:100%; height: 48px; margin-top: 8px; border:none; cursor:pointer;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  color:var(--vx-sobre-destaque, #04110c); font-weight: 700; font-size: 15px; border-radius: calc(12px * var(--vx-raio, 1)); letter-spacing:calc(.2px * var(--vx-tracking, 1));
  transition: transform .18s var(--vx-spring), box-shadow .2s, filter .2s;
  box-shadow: var(--vx-sombra, 0 10px 26px -10px var(--vx-teal-glow));
}
.vx-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--vx-sombra, 0 16px 32px -12px var(--vx-teal-glow)); }
.vx-btn:active { transform: translateY(0) scale(.985); }
.vx-erro { color: #ffb4b4; background: rgba(255,107,107,.10); border:1px solid rgba(255,107,107,.3);
  border-radius: calc(10px * var(--vx-raio, 1)); padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.vx-login-foot { margin-top: 20px; text-align:center; color: var(--vx-faint); font-size: 11.5px; }

/* ====================== SHELL ====================== */
.vx-appbar { backdrop-filter: blur(14px); background: rgba(11,11,20,.72) !important;
  border-bottom: 1px solid var(--vx-border); }
.vx-brand { display:flex; align-items:center; gap:10px; font-family:var(--vx-display); font-weight:600; font-size:20px; letter-spacing:calc(-.8px * var(--vx-tracking, 1)); }
.vx-brand .vx-mark { width: 30px; height: 30px; }
/* o x encosta no e — é assim no logotipo; sem o recuo a letra solta parece erro de digitação */
.vx-brand b { color: var(--vx-text); font-weight:600; margin-left:-1.5px; }
.vx-erp-pill { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:500;
  padding: 5px 12px; border-radius: var(--vx-pill, 999px); background: color-mix(in srgb, var(--vx-teal-br) 12%, transparent);
  color: var(--vx-teal-soft); border:1px solid color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
.vx-erp-dot { width:7px; height:7px; border-radius:50%; background: var(--vx-teal-br);
  box-shadow: 0 0 0 0 var(--vx-teal-glow); animation: vx-pulse 2.2s infinite; }
@keyframes vx-pulse { 0%{box-shadow:0 0 0 0 var(--vx-teal-glow);} 70%{box-shadow:0 0 0 7px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* largura PADRÃO do sistema: todas as telas na mesma largura larga (referência: Carteira de clientes).
   O !important vence o cap do MudContainer (Large=1280) — Large/ExtraLarge/div.vx-page ficam iguais. */
.vx-page { padding: 22px clamp(14px, 3vw, 34px); animation: vx-fade .35s var(--vx-smooth);
  max-width: 1760px !important; margin-left: auto !important; margin-right: auto !important; }
/* CATÁLOGO USA A TELA INTEIRA. O teto de 1760px acima existe para as telas de TEXTO e formulário —
   linha longa demais cansa de ler. Mas na galeria largura vira CAVALETE: num monitor de 2560 o teto
   deixava ~790px vazios e, em vez de entrar mais coluna, os cartões esticavam (325px no lugar de 280).
   A grade já sabia crescer (auto-fill/minmax); quem segurava era o container. Medido em 20/09/2026:
   com o teto, 5 colunas em 2560; sem ele, 8 — que é o que o comentário do .vx-gal-flow.vx-grade
   sempre prometeu ("4 no notebook, 6 num Full HD, 8 num 2560"). */
.vx-page.vx-page-catalogo { max-width: none !important; }
@keyframes vx-fade { from{opacity:0; transform: translateY(6px);} to{opacity:1;transform:none;} }

/* ── cabeçalho de página com botão de ação (etapas do funil, sorteio, ...) ──
   .vx-page-cab NUNCA TINHA CSS NENHUM: h1, texto e botão empilhavam pela ordem crua do HTML, sem
   respiro nenhum entre eles, e o MudSpacer não fazia nada porque MudSpacer só empurra dentro de UMA
   linha flex — sem display:flex no pai, ele é só mais um <div> vazio. O h1 vira sua própria linha
   (flex-basis:100%); texto e botão dividem a linha de baixo, e space-between mantém o botão
   encostado na direita quando cabem lado a lado — ou some pra debaixo, com respiro, quando não cabem. */
.vx-page-cab { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px 20px; margin-bottom:20px; }
.vx-page-cab h1 { flex:1 1 100%; font-size:21px; font-weight:600; margin:0; color:var(--vx-text); display:flex; align-items:center; gap:8px; }
.vx-page-cab .sub { flex:1 1 420px; min-width:240px; color:var(--vx-muted); font-size:13px; line-height:1.6; max-width:760px; }
.vx-page-cab .mud-spacer { display:none; }
.vx-page-cab .mud-button-root { flex:0 0 auto; margin-top:2px; }

/* ── De-Para (gabarito de integração) ── */
.vx-page-head h1 { font-size:21px; font-weight:600; margin:0; color:var(--vx-text); }
.vx-page-sub { color:var(--vx-muted); font-size:13.5px; margin:4px 0 0; max-width:760px; line-height:1.5; }
.vx-dp-tabs { display:flex; gap:7px; flex-wrap:wrap; margin:16px 0 14px; border-bottom:1px solid var(--vx-border); padding-bottom:0; }
.vx-dp-tab { display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0 0; font-size:13.5px; font-weight:600; color:var(--vx-muted); text-decoration:none; border:1px solid transparent; border-bottom:none; }
.vx-dp-tab:hover { color:var(--vx-text); }
.vx-dp-tab.on { color:var(--vx-teal-br); background:var(--vx-surface); border-color:var(--vx-border); }
.vx-dp-bar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.vx-dp-lbl { font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin-bottom:4px; }
.vx-dp-ex { font-size:12.5px; color:var(--vx-muted); background:var(--vx-surface); border:1px dashed var(--vx-border); border-radius:calc(9px * var(--vx-raio, 1)); padding:8px 12px; }
.vx-dp-ajuda { font-size:12.5px; color:var(--vx-muted); margin:0 0 8px; line-height:1.5; }
/* selo canônico do De-Para: derivado (auto) x mapeado (manual) */
.vx-dp-selo { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 14px; border-radius:calc(12px * var(--vx-raio, 1));
  margin:0 0 14px; font-size:12.5px; line-height:1.45; border:1px solid var(--vx-border); background:var(--vx-surface); }
.vx-dp-selo .selo { font-weight:700; white-space:nowrap; }
.vx-dp-selo .txt { color:var(--vx-muted); }
.vx-dp-selo.auto { border-color:color-mix(in srgb, var(--vx-teal-br) 32%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-dp-selo.auto .selo { color:var(--vx-teal-soft); }
.vx-dp-selo.map { border-color:rgba(245,183,66,.34); background:rgba(245,183,66,.08); }
.vx-dp-selo.map .selo { color:#f5b742; }
/* matriz de permissão (Config → Permissões) */
.vx-perm { width:100%; border-collapse:collapse; font-size:13px; }
.vx-perm th { font-size:11px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); font-weight:600;
  padding:8px 10px; text-align:center; white-space:nowrap; border-bottom:1px solid var(--vx-border); }
.vx-perm td { padding:7px 10px; border-bottom:1px solid var(--vx-border); vertical-align:middle; text-align:center; }
.vx-perm th:first-child, .vx-perm td:first-child { min-width:230px; text-align:left; }
.vx-perm tbody tr:hover { background:var(--vx-surface); }
.vx-dp-novo { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; padding:13px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(13px * var(--vx-raio, 1)); margin-bottom:14px; }
.vx-dp-novo .f { display:flex; flex-direction:column; gap:4px; flex:1; min-width:150px; }
.vx-dp-novo .f.g { flex:0 0 auto; min-width:140px; }
.vx-dp-novo .f label { font-size:11px; color:var(--vx-muted); }
.vx-dp-novo .vx-input { height:40px; }
.vx-dp-grid { display:flex; flex-direction:column; gap:7px; }
.vx-dp-h { display:grid; grid-template-columns: 2fr 28px 2fr 1.1fr 1.4fr 40px; gap:8px; padding:0 12px; font-size:10.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-dp-row { display:grid; grid-template-columns: 2fr 28px 2fr 1.1fr 1.4fr 40px; gap:8px; align-items:center; padding:9px 12px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); }
.vx-dp-row.glob { border-style:dashed; }
.vx-dp-vtx { font-weight:600; font-size:13.5px; color:var(--vx-text); }
.vx-dp-arr { display:flex; justify-content:center; }
.vx-dp-erp { font-family:ui-monospace,monospace; font-size:13px; color:var(--vx-teal-soft); }
.vx-dp-tag { font-size:11px; color:var(--vx-muted); }
.vx-dp-obs { font-size:12px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:680px){ .vx-dp-h { display:none; } .vx-dp-row { grid-template-columns: 1fr 22px 1fr 36px; } .vx-dp-tag, .vx-dp-obs { display:none; } }

/* ====================== HERO + CARDS ====================== */
.vx-hero {
  position: relative; overflow:hidden; border-radius: var(--vx-r-lg); padding: 30px 34px;
  background: linear-gradient(135deg, #0e3b2e 0%, #11705a 48%, var(--vx-teal) 100%);
  box-shadow: var(--vx-sombra, 0 22px 50px -24px color-mix(in srgb, var(--vx-teal) 55%, transparent));
}
.vx-hero::after { content:""; position:absolute; width:360px; height:360px; right:-90px; top:-150px;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 60%);
  animation: vx-hero-float 9s ease-in-out infinite; }
@keyframes vx-hero-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-34px,22px) scale(1.08); } }
.vx-hero-icon { animation: vx-breathe 4s ease-in-out infinite; }
@keyframes vx-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.vx-hero h1 { margin:0; font-size: 26px; font-weight:500; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); color:#fff; }
.vx-hero p { margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: 14px; max-width: 560px; }
/* SEM MOLDURA. A borda branca de .35 sobre o gradiente desenhava um contorno duro em volta do
   icone — parecia recorte colado, nao parte da faixa. A luz vem de dentro: um brilho no topo, como
   vidro pegando a luz, e o proprio icone carrega o peso. */
.vx-hero-icon { width:54px; height:54px; border-radius: calc(15px * var(--vx-raio, 1)); display:grid; place-items:center;
  background: rgba(255,255,255,.15); border: 0;
  box-shadow: var(--vx-sombra, inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 18px -12px rgba(0,0,0,.5)); }

/* densidade de card PADRÃO do sistema (referência: Carteira de clientes) — vale pra todas as telas */
:root { --vx-card-min: 272px; }
.vx-grid { display:grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(var(--vx-card-min),1fr)); }

/* Duas colunas desiguais (gráfico grande + indicador ao lado) que VIRAM UMA no telefone.
   Existe como classe, e não como style inline, exatamente para que a media query possa desfazer:
   estilo inline ganha de qualquer regra, e era assim que a tela de relatórios continuava com duas
   colunas num aparelho de 375px, esticando a página inteira. */
/* Duas classes no seletor DE PROPOSITO. Com `.vx-grid-2-1` sozinho (mesma forca que `.vx-grid`),
   as regras `.vx-grid` que aparecem MAIS ABAIXO no arquivo ganhavam por ordem e devolviam duas
   colunas justamente na faixa de 401 a 460px — a largura de um Pixel. Com as duas classes a regra
   vence por especificidade, onde quer que ela esteja no arquivo. */
.vx-grid.vx-grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .vx-grid.vx-grid-2-1 { grid-template-columns: 1fr; } }
.vx-card {
  background: var(--vx-surface); border:1px solid var(--vx-border); border-radius: var(--vx-r);
  padding: 16px 18px; cursor:pointer; position:relative; overflow:hidden;
  transition: transform .25s var(--vx-spring), box-shadow .25s, border-color .25s, background .25s;
}
.vx-card:hover { transform: translateY(-4px); border-color: var(--vx-border-2);
  background: var(--vx-surface-2); box-shadow: var(--vx-sombra, 0 18px 38px -20px rgba(0,0,0,.7)); }
.vx-card-ico { width:40px; height:40px; border-radius:calc(11px * var(--vx-raio, 1)); display:grid; place-items:center; margin-bottom:12px; }
.vx-card h3 { margin:0 0 3px; font-size:15px; font-weight:500; }
.vx-card span { color: var(--vx-muted); font-size: 12.5px; }

.vx-kpi { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius: var(--vx-r);
  padding: 14px 18px; border-left: 4px solid var(--vx-teal); transition: transform .25s var(--vx-spring); }
.vx-kpi:hover { transform: translateY(-3px); }
.vx-kpi .k-label { color: var(--vx-muted); font-size: 12px; }
.vx-kpi .k-val { font-size: 26px; font-weight:500; margin-top: 2px; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); }

/* ====================== WORKSPACE ====================== */
.vx-ws { display:flex; height: calc(100vh - 64px); overflow:hidden; }
.vx-ws-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.vx-ws-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 20px; border-bottom:1px solid var(--vx-border); }
.vx-ws-title { font-size: 17px; font-weight:500; display:flex; align-items:center; gap:10px; }

/* Pipeline */
.vx-pipe { flex:1 1 auto; display:flex; gap: 14px; padding: 16px 20px; overflow-x:auto; overflow-y:hidden; }
.vx-col { flex:0 0 290px; width:290px; display:flex; flex-direction:column; background: rgba(255,255,255,.022);
  border:1px solid var(--vx-border); border-radius: var(--vx-r); }
.vx-col-h { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px 10px;
  position:sticky; top:0; }
.vx-col-h .t { font-size: 12.5px; font-weight:500; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-muted); }
.vx-col-h .badge { font-size:11px; background: rgba(255,255,255,.08); padding: 2px 9px; border-radius: var(--vx-pill, 999px); color: var(--vx-text); }
.vx-col-sum { padding: 0 14px 8px; font-size: 12px; color: var(--vx-teal-soft); font-weight:500; }
.vx-col-body { flex:1 1 auto; overflow-y:auto; padding: 4px 10px 14px; display:flex; flex-direction:column; gap:10px; }

.vx-deal {
  position: relative;
  background: var(--vx-surface); border:1px solid var(--vx-border); border-radius: calc(13px * var(--vx-raio, 1));
  border-left: 4px solid var(--vx-morno); padding: 13px 14px; cursor: grab;
  transition: transform .22s var(--vx-spring), box-shadow .22s, border-color .22s, background .22s;
  animation: vx-pop .3s var(--vx-spring) both;
}
.vx-deal-edit { position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:calc(7px * var(--vx-raio, 1));
  display:grid; place-items:center; color:var(--vx-faint); opacity:0; cursor:pointer;
  transition: opacity .18s, background .18s, color .18s; }
.vx-deal:hover .vx-deal-edit { opacity:.8; }
.vx-deal-edit:hover { background: rgba(255,255,255,.08); color: var(--vx-teal-br); opacity:1; }
@keyframes vx-pop { from{opacity:0; transform: translateY(8px) scale(.98);} to{opacity:1;transform:none;} }
.vx-deal:hover { transform: translateY(-3px); background: var(--vx-surface-2);
  box-shadow: var(--vx-sombra, 0 16px 34px -18px rgba(0,0,0,.75)); }
.vx-deal.t-quente { border-left-color: var(--vx-quente); }
.vx-deal.t-morno  { border-left-color: var(--vx-morno); }
.vx-deal.t-frio   { border-left-color: var(--vx-frio); }
.vx-deal .d-name { font-size: 14px; font-weight:500; margin-bottom: 2px; }
.vx-deal .d-loc  { font-size: 11.5px; color: var(--vx-faint); margin-bottom: 9px; }
.vx-deal .d-row  { display:flex; align-items:center; justify-content:space-between; }
.vx-deal .d-val  { font-size: 14px; font-weight:500; color: var(--vx-teal-soft); }
.vx-deal .d-av   { width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:10px; font-weight:700; background: linear-gradient(135deg,#2a3350,#3a456a); color:#cfe; }
.vx-temp-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.t-quente .vx-temp-dot, .dot-quente { background: var(--vx-quente); }
.t-morno  .vx-temp-dot, .dot-morno  { background: var(--vx-morno); }
.t-frio   .vx-temp-dot, .dot-frio   { background: var(--vx-frio); }

/* ====================== CATALOG DOCK (deslizante) ====================== */
.vx-dock {
  flex: 0 0 auto; width: 340px; max-width: 86vw; border-left:1px solid var(--vx-border);
  background: var(--vx-bg-2); display:flex; flex-direction:column;
  transition: width .42s var(--vx-spring), margin-right .42s var(--vx-spring), opacity .3s;
}
.vx-dock.closed { width: 0; margin-right: 0; opacity: 0; pointer-events:none; border-left-color: transparent; }
.vx-dock-h { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--vx-border); }
.vx-dock-h .t { font-size: 15px; font-weight:500; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.vx-chips { display:flex; gap:7px; padding: 12px 16px 6px; flex-wrap:wrap; }
.vx-chip { font-size: 12px; padding: 5px 13px; border-radius: var(--vx-pill, 999px); cursor:pointer; user-select:none;
  background: var(--vx-surface-2); border:1px solid var(--vx-border); color: var(--vx-muted);
  transition: all .2s var(--vx-spring); white-space:nowrap; }
.vx-chip:hover { color: var(--vx-text); }
/* O CHIP ATIVO NO ESTILO DA MARCA — letra branca, realce em teal.
   Era teal cheio com texto quase preto: em fila, cinco chips ligados viravam cinco blocos verdes
   e o olho nao achava mais o rotulo. O wordmark "vortex" resolve isso ha tempo: branco, com so o
   "x" em teal. Aqui e' o mesmo principio — o texto continua legivel e o verde vira SINAL, nao
   fundo. E o contorno aceso e' o que diz "este esta ligado", sem gritar. */
.vx-chip.on {
  background: var(--vx-teal-glow);
  border-color: var(--vx-teal-br);
  color: var(--vx-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 25%, transparent);
}
.vx-chip.on .mud-icon-root { color: var(--vx-teal-br); }
.vx-chip.on.warn { background: rgba(242,180,65,.14); border-color: var(--vx-morno); }
.vx-chip.on.warn .mud-icon-root { color: var(--vx-morno); }
.vx-chip.on.err  { background: rgba(255,107,107,.14); border-color: var(--vx-frio); }
.vx-chip.on.err .mud-icon-root { color: var(--vx-frio); }

.vx-slabs { flex:1 1 auto; overflow-y:auto; padding: 10px 14px 16px; display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr); align-content:start; }
.vx-slab { border-radius: calc(13px * var(--vx-raio, 1)); overflow:hidden; cursor:pointer; position:relative; background: var(--vx-surface);
  border:1px solid var(--vx-border); transition: transform .22s var(--vx-spring), box-shadow .22s, border-color .2s;
  animation: vx-pop .3s var(--vx-spring) both; }
.vx-slab:hover { transform: translateY(-3px) scale(1.015); box-shadow: var(--vx-sombra, 0 16px 30px -16px rgba(0,0,0,.8)); }
.vx-slab.sel { border-color: var(--vx-teal-br); box-shadow: var(--vx-sombra, 0 0 0 2px var(--vx-teal-br), 0 14px 30px -14px var(--vx-teal-glow)); }
.vx-slab-img { height: 92px; background-size: cover; background-position:center; position:relative; }
.vx-slab-stat { position:absolute; top:7px; right:7px; font-size:10px; font-weight:700; padding: 2px 8px; border-radius: var(--vx-pill, 999px); color:var(--vx-sobre-destaque, #04110c); }
.s-disp { background: var(--vx-quente); } .s-res { background: var(--vx-morno); } .s-vend { background: var(--vx-frio); }
.vx-slab-check { position:absolute; top:7px; left:7px; width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; background: var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); font-size:14px; font-weight:800;
  transform: scale(0); transition: transform .2s var(--vx-spring); }
.vx-slab.sel .vx-slab-check { transform: scale(1); }
.vx-slab-info { padding: 9px 11px 11px; }
.vx-slab-info .m { font-size: 13px; font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* segundo nome do material (variedade comercial) — abaixo do nome do ERP, discreto e teal */
.vx-slab-info .m2 { font-size:11px; font-weight:600; letter-spacing:calc(.02em * var(--vx-tracking, 1)); color:var(--vx-teal-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.vx-slab-info .d { font-size: 11px; color: var(--vx-faint); margin-top: 4px; }
.vx-slab-info .d.vx-d-liq { color: var(--vx-teal-soft); margin-top: 1px; }   /* linha da medida LÍQUIDA */

/* Chapa e bloco em DESTAQUE no card: número grande/negrito, rótulo miúdo */
.vx-slab-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.vx-tag { display:inline-flex; align-items:baseline; gap:4px; padding:2px 8px; border-radius:calc(7px * var(--vx-raio, 1));
  font-size:14px; font-weight:800; line-height:1.3; letter-spacing:calc(.2px * var(--vx-tracking, 1)); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-tag b { font-size:8.5px; font-weight:700; letter-spacing:calc(.7px * var(--vx-tracking, 1)); opacity:.65; text-transform:var(--vx-caixa, uppercase); }
.vx-tag-chapa { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-soft); border:1px solid color-mix(in srgb, var(--vx-teal-br) 34%, transparent); }
.vx-tag-bloco { background:rgba(255,255,255,.055); color:var(--vx-text); border:1px solid var(--vx-border); }
:root.vx-light .vx-tag-bloco { background:rgba(15,23,42,.045); }

/* ── Vortex Intelligence — faixa de insights proativos (Início) ── */
.vx-intel { margin-top:18px; }
.vx-intel-h { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; margin-bottom:10px; flex-wrap:wrap; }
.vx-intel-sub { font-weight:400; font-size:12.5px; color:var(--vx-muted); }
.vx-intel-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.vx-intel-card { background:var(--vx-surface); border:1px solid var(--vx-border); border-left:3px solid var(--vx-teal-br);
  border-radius:calc(12px * var(--vx-raio, 1)); padding:12px 14px; display:flex; flex-direction:column;
  transition:transform .18s cubic-bezier(0.34,1.56,0.64,1), box-shadow .18s; }
.vx-intel-card:hover { transform:translateY(-2px); box-shadow:var(--vx-sombra, 0 14px 30px -20px rgba(0,0,0,.7)); }
.vx-intel-card.sev-crit { border-left-color:#FF6B6B; }
.vx-intel-card.sev-aten { border-left-color:#F2B441; }
.vx-intel-card.sev-opor { border-left-color:var(--vx-teal-br); }
.vx-intel-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.vx-intel-badge { font-size:9px; font-weight:800; letter-spacing:calc(.6px * var(--vx-tracking, 1)); padding:2px 7px; border-radius:var(--vx-pill, 999px); }
.sev-crit .vx-intel-badge { background:rgba(255,107,107,.16); color:#ff8f8f; }
.sev-aten .vx-intel-badge { background:rgba(242,180,65,.18); color:#f2c45f; }
.sev-opor .vx-intel-badge { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-soft); }
.vx-intel-val { font-size:12.5px; font-weight:700; color:var(--vx-text); font-variant-numeric:tabular-nums; }
.vx-intel-tit { font-size:13.5px; font-weight:600; line-height:1.3; margin-bottom:3px; }
.vx-intel-det { font-size:12px; color:var(--vx-muted); line-height:1.4; margin-bottom:10px; flex:1; }
.vx-intel-acts { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.vx-intel-go { background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); border:none;
  border-radius:calc(8px * var(--vx-raio, 1)); padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; }
.vx-intel-go:hover { filter:brightness(1.07); }
.vx-intel-x { background:transparent; border:none; color:var(--vx-faint); cursor:pointer; font-size:13px; padding:4px 7px; border-radius:calc(6px * var(--vx-raio, 1)); }
.vx-intel-x:hover { background:rgba(255,255,255,.06); color:var(--vx-text); }
.vx-slab-info .p { font-size: 13.5px; font-weight:700; color: var(--vx-teal-soft); margin-top: 4px; }
.vx-slab-info .p.muted { color: var(--vx-faint); font-weight:600; font-style:italic; }

/* Barra de ação da oferta (aparece quando há seleção) */
.vx-dock-foot { padding: 12px 14px; border-top:1px solid var(--vx-border); background: rgba(11,11,20,.6);
  transform: translateY(110%); transition: transform .34s var(--vx-spring); }
.vx-dock-foot.show { transform: translateY(0); }
.vx-oferta-btn { width:100%; height:46px; border:none; cursor:pointer; border-radius: calc(12px * var(--vx-raio, 1)); font-weight:700; font-size:14px;
  color:var(--vx-sobre-destaque, #04110c); background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .18s var(--vx-spring), filter .2s; box-shadow: var(--vx-sombra, 0 10px 24px -10px var(--vx-teal-glow)); }
.vx-oferta-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.vx-oferta-btn:active { transform: scale(.985); }

.vx-empty { padding: 40px 16px; text-align:center; color: var(--vx-faint); font-size: 13px; }

/* O VÉU DE CARREGAMENTO (componente VxCarregando). A espera das telas principais era o spinner cru
   do Mud num vazio — parecia remendo, e no tema claro parecia página quebrada. Aqui a espera tem a
   cara da casa: o orbe da marca girando devagar (o vx-logo-spin de sempre) dentro de um anel-cometa
   verde mais rápido, um respiro de luz por baixo e um rótulo miúdo espaçado. O anel é conic-gradient
   recortado por mask em rosca — círculo perfeito em qualquer densidade de tela, sem imagem extra. */
.vx-veu { min-height: 42vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 16px; animation: vx-veu-in .38s ease-out both; }
.vx-veu .orb { position:relative; width: 78px; height: 78px; display:grid; place-items:center; border-radius:50%;
  background: radial-gradient(closest-side, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 16%, transparent)), transparent 74%); }
.vx-veu .orb img { width: 46px; height: 46px; }
.vx-veu .orb .anel { position:absolute; inset: 4px; border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 28%, transparent)) 78%, var(--vx-teal-br) 94%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
  animation: vx-spin 1.15s linear infinite; }
.vx-veu .rotulo { font-size: 12px; letter-spacing: calc(.14em * var(--vx-tracking, 1)); color: var(--vx-faint); }
@keyframes vx-veu-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .vx-veu .orb .anel { animation: none; } .vx-veu { animation: none; } }

/* ====================== GALERIA / SHOWROOM ====================== */
.vx-gal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; flex-wrap:wrap; }
/* Barra de filtros organizada: estado (chips) à esquerda, "Ver por" (segmented) à direita; filtros embaixo */
.vx-gal-bar { display:flex; align-items:center; justify-content:space-between; gap:12px 18px; flex-wrap:wrap; }
.vx-gal-verpor { display:inline-flex; align-items:center; gap:8px; }
.vx-gal-lbl { font-size:10.5px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); align-self:center; }
.vx-seg { display:inline-flex; height:28px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); }
.vx-seg button { display:flex; align-items:center; height:100%; border:0; border-left:1px solid var(--vx-border);
  background:transparent; color:var(--vx-muted); font-size:12px; font-weight:500; padding:0 15px; cursor:pointer; transition:.15s; }
.vx-seg button:first-child { border-left:0; }
.vx-seg button:hover { color:var(--vx-text); background:var(--vx-surface-2); }
.vx-seg button.on { background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); font-weight:700; }
/* linha de filtros: acabamento à esquerda, tipo/limpar à direita (alinha embaixo do "Ver por") */
.vx-gal-filtros { display:flex; align-items:center; justify-content:space-between; gap:8px 18px; flex-wrap:wrap; margin-top:10px; }
/* O PRIMEIRO ITEM ENCOSTAVA NA BARRA DE FILTROS. Sem respiro, o chip e o cartao pareciam a mesma
   coisa, e o olho lia a barra como parte da lista. Um vao pequeno separa os dois assuntos. */
.vx-gal-filtros + * { margin-top: 10px; }
.vx-slabs > :first-child, .vx-gal-lista > :first-child { margin-top: 4px; }
.vx-gal-fgrp { display:inline-flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vx-gal-sel { height:28px; min-width:150px; width:auto; padding:0 10px; font-size:12px; }
.vx-gal-limpar { display:inline-flex; align-items:center; gap:3px; margin-left:2px; font-size:12px; color:var(--vx-muted);
  cursor:pointer; padding:4px 8px; border-radius:calc(8px * var(--vx-raio, 1)); transition:.15s; }
.vx-gal-limpar:hover { color:var(--vx-text); background:var(--vx-surface-2); }
.vx-mat-sec { margin: 18px 0 4px; }
/* wrap: sao seis acoes na linha do cavalete (+ o marcador de selecao) e elas estouravam a direita
   em telas de ~768px — os botoes do fim ficavam fora da tela, sem barra pra chegar neles. */
.vx-mat-h { display:flex; align-items:center; gap:12px; margin: 6px 2px 12px; flex-wrap:wrap; }
.vx-mat-thumb { width:46px; height:46px; border-radius:calc(12px * var(--vx-raio, 1)); background-size:cover; background-position:center;
  border:1px solid var(--vx-border-2); flex:0 0 auto; }
/* A MANCHETE DO GRUPO É A PEDRA (mercado externo, 12/09/2026). .vx-mat-erp carrega o peso que
   antes era do rótulo do grupo; .vx-mat-cav e' o número, agora em papel de referência — discreto,
   mas SELECIONÁVEL e com tabular-nums, porque é por ele que o pátio acha o monte. A descrição do
   ERP é longa por natureza ("QUARTZITE KOUROS BRUSHED 3,0CM"), então ela encolhe com reticência
   em vez de empurrar o resto da linha. */
.vx-mat-erp { font-size:16px; font-weight:600; letter-spacing:calc(-.3px * var(--vx-tracking, 1)); color:var(--vx-text);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-mat-cav { font-size:11.5px; font-weight:600; color:var(--vx-muted); white-space:nowrap;
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
/* FORMA "CAVALETE" DA GALERIA (13/09/2026): o cabeçalho de antes de 12/09 voltou como opção, e com
   ele a regra que o ee40dbd tinha apagado por órfã — recuperada como era. A descricao completa do
   material, ao lado do selo da variedade. Discreta de proposito: o selo e o nome que a casa usa; esta
   e a letra do ERP, que serve para conferir acabamento e espessura sem precisar abrir a chapa. */
.vx-mat-full {
  font-size: 11.5px; font-weight: 400; color: var(--vx-faint);
  letter-spacing: calc(.01em * var(--vx-tracking, 1)); margin-left: 2px;
}
@media (max-width: 768px) {
  /* No telefone ela ganha a linha inteira: espremida ao lado do selo, virava reticencia e nao
     informava nada — que era exatamente o problema que ela veio resolver. */
  .vx-mat-full { display: block; margin: 2px 0 0; font-size: 11px; }
}
.vx-mat-name { font-size:16px; font-weight:500; letter-spacing:calc(-.3px * var(--vx-tracking, 1)); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* material em DESTAQUE no header de bloco/cavalete (quando o título é só o nº do bloco) */
.vx-mat-badge { font-size:12.5px; font-weight:700; letter-spacing:calc(.2px * var(--vx-tracking, 1)); color:var(--vx-teal-soft);
  background:color-mix(in srgb, var(--vx-teal-br) 13%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 32%, transparent); border-radius:var(--vx-pill, 999px);
  padding:3px 12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root.vx-light .vx-mat-badge { color:#0a7f5f; background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); border-color:color-mix(in srgb, var(--vx-teal-br) 40%, transparent); }
.vx-mat-sub { font-size:12px; color: var(--vx-muted); }
/* ── FILA DO WHATSAPP no envio da proposta ─────────────────────────────────────── */
/* Verde do WhatsApp na borda, e só na borda: o bloco divide a tela com o botão de e-mail e
   pintar o fundo faria a fila parecer o caminho principal, que ela nao e'. */
.vx-env-wa { margin-top:12px; padding:10px 12px; border-radius:calc(11px * var(--vx-raio, 1));
  border:1px solid rgba(37,211,102,.35); background:rgba(37,211,102,.06); }
.vx-env-wa .cab { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.vx-env-wa .cab b { font-size:13px; }
.vx-env-wa .cab span { font-size:11.5px; color:var(--vx-muted); }
.vx-env-wa .dica { font-size:11.5px; color:var(--vx-muted); margin:4px 0 8px; line-height:1.45; }
.vx-env-wa .dica.sem { margin:8px 0 0; color:var(--vx-faint); }
.vx-env-wa .fila { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px; }
.vx-env-wa .fila .it { font-size:11px; padding:2px 8px; border-radius:calc(6px * var(--vx-raio, 1));
  border:1px solid var(--vx-border); color:var(--vx-muted); white-space:nowrap; }
/* quem ja passou fica apagado, nao riscado: risco significa "cancelado", e a conversa aconteceu */
.vx-env-wa .fila .it.ok { color:var(--vx-teal-soft); border-color:rgba(37,211,102,.4); opacity:.75; }
.vx-env-wa .fim { font-size:12px; color:var(--vx-teal-soft); }
.vx-env-wa .fim span { color:var(--vx-muted); text-decoration:underline; cursor:pointer; margin-left:6px; }
/* a relação de chapas do cavalete, no cabeçalho do grupo da Galeria: pode ser longa, então
   quebra em até duas linhas e corta o resto — o título do elemento tem a lista inteira. */
.vx-mat-chapas { font-size:11.5px; color:var(--vx-teal-soft); opacity:.9; margin:1px 0 2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* A coluna do titulo do grupo. Isto morava no style= do elemento, e inline vence folha de
   estilo: o min-width:0 de la anulava qualquer piso que o responsivo tentasse dar a ela. */
.vx-mat-titulo { flex: 1; min-width: 0; }
.vx-gal-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(var(--vx-card-min),1fr));
  /* ANCORAGEM DESLIGADA. O Chrome, ao ver conteudo entrar acima do que voce le, "corrige" o scroll
     sozinho para manter a ancora — e numa lista que cresce por baixo isso vira o pulo. Aqui quem
     manda na rolagem e o usuario. */
  overflow-anchor: none; }
/* Galeria em GRID ÚNICA achatada: header ocupa a linha inteira e as chapas fluem na mesma grid.
   Visual idêntico às antigas seções, mas trocar Material/Bloco/Cavalete só MOVE os cards (keyed
   por id) em vez de destruir e recriar cada card + MudBlazor — é o que deixa a troca fluida. */
.vx-gal-flow { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(var(--vx-card-min),1fr)); }
.vx-gal-flow > .vx-mat-h { grid-column: 1 / -1; margin: 12px 2px 0; }
.vx-gal-flow > .vx-mat-h:first-child { margin-top: 0; }
/* FORMA GRADE — AS COLUNAS SEGUEM A TELA (item 3 das Demandas ME 2, 16/09/2026).
   Em 13/09 a grade nasceu com 4 colunas fixas, "como o Mobgran". O cliente mostrou o Mobgran de
   verdade: 4 por linha no notebook e 6 no monitor de 26" — lá o monitor grande mostra MAIS cavaletes,
   e aqui ele só esticava os mesmos quatro. Agora cabe quantos cartões de 280px couberem: 4 no notebook,
   6 num Full HD, 8 num 2560. 280px e não o --vx-card-min: esse desce para 150px no celular, e o cartão
   com a foto grande e cinco linhas de texto não cabe em 150px. O min(100%, …) evita estourar a tela
   estreita; no telefone continua uma coluna. minmax e não flex: coluna de grelha não tem o
   "flex-basis 0 que nunca quebra" (vortex-mobile-armadilhas). Duas classes no seletor para vencer os
   `.vx-gal-flow` das faixas de 720px e 400px mais abaixo. */
.vx-gal-flow.vx-grade { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
@media (max-width: 600px) { .vx-gal-flow.vx-grade { grid-template-columns: minmax(0, 1fr); } }
/* sentinela invisível do carregamento no scroll — ocupa a linha e fica no fim da grid */
.vx-gal-sentinel { grid-column: 1 / -1; height: 1px; }
/* Com o aviso de carregamento a sentinela ganha corpo — mas o NÓ é o mesmo, senão o
   IntersectionObserver perde a referência e a rolagem infinita morre. */
.vx-gal-sentinel.on { height:auto; padding:26px 0 34px; }
.vx-gal-loading { display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:12.5px; color:var(--vx-muted); animation: vxFade .2s ease-out both; }
.vx-gal-dots { display:inline-flex; gap:4px; }
.vx-gal-dots i { width:6px; height:6px; border-radius:50%; background:var(--vx-teal-br);
  animation: vxDot 1.05s ease-in-out infinite; }
.vx-gal-dots i:nth-child(2) { animation-delay:.16s; }
.vx-gal-dots i:nth-child(3) { animation-delay:.32s; }
@keyframes vxDot { 0%,80%,100% { opacity:.28; transform:translateY(0); }
                   40% { opacity:1; transform:translateY(-3px); } }

/* ENTRADA DO LOTE NOVO — só opacidade, de propósito.
   O vx-pop antigo animava transform em 40 cartões por vez e a grade inteira repintava: era a
   piscada. Opacidade sozinha o navegador resolve no compositor, sem tocar no layout. O atraso
   escalonado vai só até o 12º cartão — além disso ninguém percebe e viraria custo à toa. */
/* O atraso de cada cartao vem INLINE, calculado no Razor pelo indice DENTRO do lote. Tentei por
   nth-child e nao funciona: ele conta entre todos os irmaos, entao os cartoes novos (posicoes 161,
   162, ...) caiam todos na mesma faixa e entravam juntos — o escalonamento existia no arquivo e
   nao na tela. Teto de 620ms para a ultima fileira nao ficar esperando. */
.vx-gcard.vx-entra { animation: vxSurge .5s cubic-bezier(.16,.8,.28,1) both; }
/* opacidade + translateY: as DUAS sao propriedades de compositor, entao o navegador anima sem
   recalcular layout nem repintar a grade. Era o transform que a gente evitava por causa da
   piscada, mas o problema nunca foi ele — era animar 40 cartoes A CADA render. Aqui so o lote
   novo anima, uma vez. A curva desacelera no fim (o 4o valor perto de 1) para o cartao ASSENTAR
   em vez de parar seco. */
@keyframes vxSurge {
  from { opacity:0; transform: translate3d(0, 14px, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes vxFade { from { opacity:0; } to { opacity:1; } }

/* Quem prefere menos movimento nao recebe nenhum: a lista continua funcionando igual. */
@media (prefers-reduced-motion: reduce) {
  .vx-gcard.vx-entra, .vx-gal-loading { animation: none; transform:none; opacity:1; }
  .vx-gal-dots i { animation: none; opacity:.7; }
}

.vx-gcard { background: linear-gradient(180deg, var(--vx-surface-2), var(--vx-surface)); border:1px solid var(--vx-border); border-radius: var(--vx-r);
  overflow:hidden; transition: transform .26s var(--vx-spring), border-color .2s; }
/* SEM o vx-pop aqui. Cada lote revelado no scroll animava 40 cards entrando ao mesmo tempo — e era
   isso que se via como piscada enquanto rola. Numa lista de dezenas de itens a animacao de entrada
   deixa de ser charme e vira ruido. A box-shadow tambem saiu da transition: sombra grande e borrada
   nao compoe na GPU, repinta — e o cursor passando pelos cards durante a rolagem disparava uma
   repintura por card. O hover continua, so que instantaneo no que e caro e suave no transform. */
.vx-gcard:hover { transform: translateY(-5px); box-shadow: var(--vx-sombra, 0 22px 44px -20px rgba(0,0,0,.8)); border-color: var(--vx-border-2); }
.vx-gcard.sel { border-color: var(--vx-teal-br); box-shadow: var(--vx-sombra, 0 0 0 2px var(--vx-teal-br), 0 16px 34px -16px var(--vx-teal-glow)); }
.vx-gcard.ofertada { opacity:.97; }
/* O CARTÃO DO CAVALETE NA GRADE (forma Grade da Galeria, 13/09/2026). A foto é o assunto: 4:3 em
   qualquer largura, em vez dos 150px fixos do cartão da chapa. O título "cavalete - bloco" tem BASE
   (flex 1 1 auto) e quebra para o selo de preço descer, em vez de os dois se espremerem. */
.vx-gcard-cav .vx-gcard-img { height:auto; aspect-ratio:16 / 10; border-radius:var(--vx-r) var(--vx-r) 0 0; }
/* A FOTO INTEIRA, COMO FOI TIRADA (Demandas MI, item 1, 08/10/2026: "fica tipo um zoom dela"). A chapa
   fotografada é larga (~1,6:1); a caixa 4:3 com object-fit:cover cortava as laterais e o hover ampliava
   mais 7%. Agora a caixa é 16:10, a foto entra INTEIRA (contain) sobre fundo escuro, e o hover não amplia. */
.vx-gcard-photo { object-fit:contain !important; background:#0d0f16; }
.vx-gcard:hover .vx-gcard-photo.vx-on { transform:none !important; }
.vx-gcard-tit { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; column-gap:8px; row-gap:3px; }
.vx-gcard-tit b { flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:700; line-height:1.25; letter-spacing:calc(-.2px * var(--vx-tracking, 1));
  font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-gcard-cav .vx-mat-chapas { margin:5px 0 0; }
.vx-gcard-acoes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
/* os botões da linha têm largura mínima de 132px para as colunas não dançarem; num cartão de 240px
   isso poria cada um numa linha — aqui eles dividem a largura do cartão */
.vx-gcard-acoes > .vx-iabtn, .vx-gcard-acoes > .vx-acoes-wrap { flex:1 1 auto; min-width:0; }
.vx-gcard-acoes .vx-acoes-wrap .vx-iabtn { width:100%; min-width:0; }
/* MENU ABERTO SAI DO CARTÃO. O cartão corta o que passa da borda (overflow e content-visibility) e,
   no hover, sobe com transform — e transform faz dele o bloco de contenção da capa fixa que fecha o
   menu (vortex-mobile-armadilhas, item 5): tocar fora não fecharia nada. Enquanto o menu existe, o
   cartão deixa de cortar e de se mover, e fica por cima dos vizinhos, como a linha do cavalete. */
.vx-gcard-cav:has(.vx-acoes-menu) { overflow:visible; content-visibility:visible; transform:none;
  position:relative; z-index:1402; }
/* O CARRINHO DA OFERTA NA GALERIA (13/09/2026). O botão é SECUNDÁRIO de propósito — contorno, e não o
   verde cheio do preço e das ações: pôr no carrinho é guardar para depois, não o gesto que fecha. Aceso,
   ele se enche; o cartão ganha uma borda e um selo, discretos, porque o anel teal forte é da SELEÇÃO
   (.sel) e as duas coisas podem valer juntas sem uma apagar a outra. Cor pelas variáveis do tema, para
   seguir o acento escolhido. */
.vx-carr-bt { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:0 0 auto;
  font:inherit; font-size:11px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; user-select:none;
  padding:4px 11px; min-height:22px; border-radius:var(--vx-pill, 999px); color:var(--vx-teal-soft);
  background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 45%, transparent);
  -webkit-tap-highlight-color:transparent; transition:transform .15s var(--vx-spring), background .15s, color .15s; }
.vx-carr-bt:hover { background:color-mix(in srgb, var(--vx-teal-br) 18%, transparent); }
.vx-carr-bt:active { transform:scale(.96); }
.vx-carr-bt.on { background:var(--vx-teal-br); border-color:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); }
.vx-carr-bt[aria-busy="true"] { cursor:progress; }
.vx-carr-bt .mud-icon-root { color:inherit; }
.vx-carr-bt.ico { position:relative; padding:0; width:28px; height:28px; }
:root.vx-light .vx-carr-bt:not(.on) { color:var(--vx-teal); }
/* no cartão divide a fileira com o preço e as ações, e desce inteiro quando não cabe */
.vx-gcard-acoes > .vx-carr-bt { flex:1 1 auto; min-width:0; }
/* na avulsa aberta da lista, vai para a ponta do rodapé, depois do preço e do tempo de pátio — e desce
   de linha quando preço, preço/m², campanha e pátio já ocupam o cartão, em vez de ser cortado pela borda */
.vx-gcard-foot:has(> .vx-carr-bt) { flex-wrap:wrap; row-gap:6px; }
.vx-gcard-foot > .vx-carr-bt { margin-left:auto; }
/* JA FOI PARA O CARRINHO: o cartao precisa se distinguir DE LONGE. So a borda a 55% nao dava conta —
   num catalogo em que quase todo botao ja e' verde, ela sumia no meio dos outros. Agora e' borda cheia
   mais um anel: o olho acha na hora quais cavaletes ja entraram, sem ler botao por botao. */
.vx-gcard.vx-no-carrinho { border-color:var(--vx-teal-br);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--vx-teal-br) 32%, transparent); }
.vx-mat-h.vx-no-carrinho .vx-mat-thumb { box-shadow:0 0 0 2px color-mix(in srgb, var(--vx-teal-br) 70%, transparent); }
/* o selo mora ao lado do marcador e NÃO recebe toque: no celular a área de 44px do marcador passa por
   cima dele, e um selo clicável roubaria o toque de quem queria marcar */
.vx-gcard-carr { position:absolute; top:8px; left:calc(16px + var(--vx-m-marca, 22px)); z-index:2; pointer-events:none;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); box-shadow:var(--vx-sombra, 0 2px 8px -2px rgba(0,0,0,.55)); }
.vx-gcard-carr .mud-icon-root { color:inherit; }
@media (max-width: 768px) {
  /* a escala de controles do celular (ver o bloco "AÇÃO"): o botão com palavra tem a altura da ação; o
     de ícone fica pequeno na tela e ganha a área de toque por fora, como o marcador */
  .vx-carr-bt:not(.ico) { min-height:var(--vx-m-acao); border-radius:var(--vx-m-raio); font-size:13px; padding:0 14px; }
  .vx-carr-bt svg { width:18px; height:18px; }
  .vx-carr-bt.ico::after { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; transform:translate(-50%, -50%); }
}
/* a barra de seleção do celular quebra em linhas pela ordem (ver .vx-fb-oferta): o carrinho logo abaixo
   de "Gerar oferta", junto do "Reservar" */
@media (max-width: 720px) {
  .vx-floatbar .vx-fb-carrinho { order:2; }
  /* o botão a mais pode abrir uma linha nova na barra (o vendedor sem "Definir preço" cabia numa só
     com Reservar, Comparar e Limpar): o espaço reservado embaixo cresce uma linha, para a barra não
     sentar em cima da última chapa. Sem :has, fica o espaço de antes. */
  .vx-fb-espaco:has(+ .vx-floatbar .vx-fb-carrinho) { height:218px; }
}
/* no cabeçalho do telefone as ações descem para a linha de baixo (order 9): o carrinho desce com elas */
@media (max-width: 600px) { .vx-mat-h > .vx-carr-bt { order:9; } }

/* Palco da imagem: placeholder assinatura (gradiente + glifo + textura) ATRÁS, foto por cima */
/* Card fora da tela nao pinta. Com 800 chapas o navegador estava recalculando layout e repintando
   a grade INTEIRA a cada lote revelado — e e isso que se ve como piscada. O contain-intrinsic-size
   diz o tamanho presumido, entao a barra de rolagem nao muda de tamanho ao revelar. */
.vx-gcard { content-visibility: auto; contain-intrinsic-size: auto 330px; }
.vx-gcard-img { height: 150px; position:relative; cursor:pointer; overflow:hidden; }
.vx-gcard-ph { position:absolute; inset:0; display:grid; place-items:center; }
.vx-gcard-ph::before { content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(122deg, rgba(255,255,255,.03) 0 1px, transparent 1px 20px),
              radial-gradient(70% 60% at 75% 95%, rgba(0,0,0,.4), transparent 70%); }
.vx-gcard-glyph { position:relative; font-size:36px; font-weight:800; letter-spacing:calc(1.5px * var(--vx-tracking, 1));
  color: rgba(233,236,244,.14); text-shadow: var(--vx-sombra-texto, 0 2px 14px rgba(0,0,0,.45)); user-select:none; }
.vx-gcard-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition: opacity .45s ease, transform .55s var(--vx-spring); }
.vx-gcard-photo.vx-on { opacity:1; }
.vx-gcard:hover .vx-gcard-photo.vx-on { transform: scale(1.07); }
/* loading da foto: shimmer correndo ate a imagem da nuvem chegar (some no onload/onerror) */
.vx-gcard-load { position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 58%, transparent 78%);
  background-size: 220% 100%; animation: vx-shimmer 1.3s ease-in-out infinite; transition: opacity .4s ease; }
/* PARA a animacao, nao so esconde. Com opacity:0 o shimmer continuava rodando para sempre em cada
   card — inclusive nos que ja tinham carregado — e centenas de gradientes animados repintam sem
   parar. Era custo puro, invisivel. */
.vx-gcard-photo.vx-done ~ .vx-gcard-load { opacity:0; animation:none; }
@media (prefers-reduced-motion: reduce) { .vx-gcard-load { animation:none; } }
@keyframes vx-shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* enviando foto: progresso no próprio card (o upload sobe pra nuvem — não é instantâneo) */
.vx-gcard-up { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(4,8,14,.74); backdrop-filter:blur(2px); font-size:11.5px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:rgba(255,255,255,.88); }
.vx-gcard-up-spin { width:28px; height:28px; border-radius:50%; border:2.5px solid rgba(255,255,255,.16);
  border-top-color:var(--vx-teal-br); animation: vx-spin .7s linear infinite; }
/* miniatura clicável → abre a foto grande (lightbox global) */
.vx-zoomable { cursor: zoom-in; }
/* botão de lupa: abre a foto grande sem atrapalhar o clique do card (selecionar/navegar) */
.vx-zoom-btn { position:absolute; bottom:6px; right:6px; z-index:4; width:26px; height:26px; border-radius:50%; border:none; cursor:zoom-in;
  background:rgba(6,8,14,.5); color:#fff; display:flex; align-items:center; justify-content:center; opacity:.7; transition:opacity .15s ease, background .15s ease; }
.vx-zoom-btn:hover { opacity:1; background:rgba(6,8,14,.82); }
/* o cavalete tem vídeo (Demandas MI, item 3): um selo discreto no canto de baixo da foto */
.vx-gcard-video { position:absolute; left:8px; bottom:8px; z-index:3; padding:2px 8px; border-radius:calc(10px * var(--vx-raio, 1));
  background:rgba(0,0,0,.62); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.3px; pointer-events:none; }
.vx-gcard-shade { position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 24%, transparent 56%, rgba(0,0,0,.52) 100%); }

.vx-gcard-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; }
.vx-gcard-foot .p { margin-top:0; }
/* A CAMPANHA NO CARTÃO (30/09/2026). O banner dizia "5% OFF em 18 chapas" e nenhum cartão dizia quais:
   o selo só existia no cartão da chapa avulsa, ao lado do preço — e a Galeria abre no cartão do cavalete.
   Agora todo cartão com chapa na campanha leva o selo (no alto, à direita, sob o status) e a borda na cor
   do banner. Seleção e carrinho continuam mandando na borda: são o estado de quem está mexendo.
   Cor chapada, sem degradê, para valer igual no Tema ERP. */
.vx-camp-badge { position:absolute; top:36px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:2px;
  max-width:calc(100% - 46px); padding:2px 8px; border-radius:var(--vx-pill, 999px); white-space:nowrap;
  font-size:10px; font-weight:700; letter-spacing:calc(.2px * var(--vx-tracking, 1)); background:#d9622b; color:#fff; }
.vx-camp-badge b { font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.vx-camp-badge .vx-ic.mud-icon-root { margin-right:3px; }
.vx-camp-badge.em-linha { position:static; max-width:none; }
.vx-gcard.vx-na-campanha:not(.sel):not(.vx-no-carrinho) { border-color:rgba(255,122,89,.85); box-shadow:0 0 0 1px rgba(255,122,89,.45); }
.vx-mat-h.vx-na-campanha:not(.vx-no-carrinho) .vx-mat-thumb { box-shadow:0 0 0 2px rgba(255,122,89,.8); }
/* no banner: onde estão as chapas da campanha — um toque busca o cavalete */
.vx-promo-onde { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px; }
.vx-promo-cav { font-size:11px; font-weight:700; padding:2px 9px; border-radius:var(--vx-pill, 999px); cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.38); }
.vx-promo-cav:hover { background:rgba(255,255,255,.28); }
.vx-promo-cav.on { background:#fff; color:#b04712; border-color:#fff; }
.vx-promo-mais { font-size:11px; opacity:.88; }

/* TEMPO DE PATIO. Discreto de proposito: informa sem competir com o preco, que e o que o olho
   procura primeiro no cartao. Passa de um ano, esquenta — ali ja e conversa de desconto. */
.vx-patio { font-size:10px; font-weight:600; padding:2px 7px; border-radius:var(--vx-pill, 999px); white-space:nowrap;
  background: rgba(143,160,180,.12); color: var(--vx-muted); letter-spacing:calc(.1px * var(--vx-tracking, 1)); }
.vx-patio.vx-patio-velho { background: rgba(242,180,65,.14); color:#f2b441; }

.vx-iabtn { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; white-space:nowrap;
  font-size:11px; font-weight:700; padding:4px 11px; border-radius:var(--vx-pill, 999px); color:var(--vx-sobre-destaque, #04110c);
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  transition: transform .15s var(--vx-spring), filter .2s; }
.vx-iabtn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.vx-iabtn:active { transform: scale(.96); }
.vx-gcard .vx-slab-check { top:8px; left:8px; }
.vx-gcard.sel .vx-slab-check { transform: scale(1); }

/* Status do card — pílula glass com bolinha do semáforo */
.vx-gstat { position:absolute; top:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; padding:3px 9px 3px 8px; border-radius:var(--vx-pill, 999px); letter-spacing:calc(.2px * var(--vx-tracking, 1));
  background: rgba(11,11,20,.5); color: var(--vx-text); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vx-gstat i { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.vx-gstat.s-disp i { background: var(--vx-quente); box-shadow: var(--vx-sombra, 0 0 7px var(--vx-quente)); }
.vx-gstat.s-res  i { background: var(--vx-morno);  box-shadow: var(--vx-sombra, 0 0 7px var(--vx-morno)); }
.vx-gstat.s-vend i { background: var(--vx-frio);   box-shadow: var(--vx-sombra, 0 0 7px var(--vx-frio)); }

/* SELO "MANUAL": chapa/material cadastrado à mão (não veio do ERP). Âmbar sólido, para ler de longe.
   No card de chapa é overlay (top-left); no cabeçalho do grupo/grade entra inline (position:static). */
.vx-manual-badge { position:absolute; top:8px; left:8px; z-index:3; display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:var(--vx-pill, 999px); font-size:10.5px; font-weight:800; letter-spacing:calc(.02em * var(--vx-tracking, 1)); white-space:nowrap;
  background:rgba(224,179,74,.92); color:#241a03; border:1px solid rgba(224,179,74,.55); }
.vx-manual-badge .mud-icon-root { color:#241a03 !important; }
.vx-amb-badge { position:absolute; bottom:8px; left:8px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--vx-pill, 999px); letter-spacing:calc(.3px * var(--vx-tracking, 1));
  background: rgba(11,11,20,.5); color: var(--vx-teal-br); border:1px solid color-mix(in srgb, var(--vx-teal-br) 40%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.vx-of-badge { position:absolute; bottom:8px; right:8px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--vx-pill, 999px); white-space:nowrap;
  background: rgba(11,11,20,.55); color: var(--vx-morno); border:1px solid rgba(242,180,65,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Modo vigente do conector/agente */
.vx-modo-vigente { display:flex; align-items:center; gap:12px; padding:12px 16px; border:1.5px solid; border-radius:calc(12px * var(--vx-raio, 1)); background: var(--vx-surface); flex-wrap:wrap; }
.vx-modo-vigente .dot { width:13px; height:13px; border-radius:50%; flex:0 0 auto; box-shadow:var(--vx-sombra, 0 0 8px currentColor); }
.vx-modo-vigente .l { display:block; font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color: var(--vx-muted); }
.vx-modo-vigente b { font-size:18px; font-weight:800; }
.vx-modo-vigente .vx-mv-txt { font-size:12px; color: var(--vx-muted); flex:1; min-width:180px; }
.vx-amb-btn { position:absolute; bottom:8px; right:8px; display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:5px 10px; border:none; border-radius:var(--vx-pill, 999px); cursor:pointer;
  background: rgba(11,11,20,.72); color: var(--vx-teal-soft); backdrop-filter: blur(6px);
  opacity:0; transform: translateY(6px); transition: all .2s var(--vx-spring); }
.vx-gcard:hover .vx-amb-btn { opacity:1; transform: translateY(0); }
.vx-amb-btn:hover { background: var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); }

/* A BARRA FLUTUANTE DA SELECAO.
   AO CENTRO DA JANELA, e ponto. Ela ja esteve assim; eu a desloquei para o centro do CONTEUDO
   (compensando os 240px do menu aberto), e isso resolveu um problema criando outro pior: somando o
   deslocamento a largura da barra, a ponta direita saia da tela — e a ponta direita e o "Gerar
   oferta", que e' o unico botao dali que ninguem pode deixar de alcancar. Descentralizada por 120px
   se percebe e se ignora; botao principal invisivel, nao.

   E ELA NUNCA PASSA DA TELA. O teto e a largura disponivel menos uma margem, e nao um numero fixo:
   e' isso que garante que o ultimo botao esteja sempre visivel, em qualquer largura.

   O TETO E EM %, E NAO EM vw, e a diferenca se ve. 100vw inclui a barra de rolagem vertical; a
   largura que a pessoa realmente enxerga nao. Com vw, a barra ficava uns quinze pixels mais para a
   direita do que para a esquerda — centrada pela conta, torta pelo olho. Em elemento fixo, a
   porcentagem resolve contra a area visivel, e as duas margens ficam iguais. A folga tambem subiu de
   14 para 20 px de cada lado: encostada na borda ela parece presa, e nao flutuando.

   NADA QUEBRA LINHA AQUI. "Definir preco", "Reservar 72h" e "Gerar oferta" viravam duas linhas cada
   quando a barra apertava, e uma barra de tres andares deixa de parecer barra. O nowrap segura o
   texto e, quando nao couber mesmo (celular), ela rola de lado em vez de crescer para cima. */
.vx-floatbar { position: fixed; bottom: 22px; z-index: 1300;
  /* CENTRADA POR INSETS, e nao por left:50% + translateX(-50%).
     A versao anterior compensava um desalinhamento com um --vx-bar-x de -50px, e o proprio
     comentario admitia ser calibragem sem causa encontrada. O efeito colateral aparecia com a barra
     cheia (tres cavaletes, cinco botoes): centrar em 50% e depois puxar 50px para a esquerda joga a
     metade direita para fora, e "Gerar oferta" -- o botao que importa, e o ultimo da fila -- era
     justamente o que sumia na borda.
     Com left/right fixos, width:fit-content e margin:auto, o navegador centra a barra DENTRO das
     margens e ela nunca ultrapassa nenhuma das duas: encolher deixa de ser conta e vira geometria.
     Sem transform tambem: transform num elemento fixed e o classico ladrao de posicionamento dos
     filhos, e esta barra tem menu de botao dentro. */
  left: 20px; right: 20px; margin: 0 auto; width: fit-content;
  max-width: calc(100% - 40px); overflow-x: auto; scrollbar-width: none;
  display:flex; align-items:center; gap:14px; padding: 10px 14px 10px 20px; border-radius: var(--vx-pill, 999px);
  background: rgba(16,17,27,.92); backdrop-filter: blur(14px); border:1px solid var(--vx-border-2);
  box-shadow: var(--vx-sombra, 0 18px 50px -18px rgba(0,0,0,.8)); color: var(--vx-text); font-size:14px; font-weight:500;
  animation: vx-rise .3s var(--vx-spring) both; }
.vx-floatbar::-webkit-scrollbar { display: none; }
/* o resumo e os botoes sao itens de largura fixa: sem isto o flex os espreme e o texto quebra */
.vx-floatbar > * { flex: 0 0 auto; white-space: nowrap; }
.vx-floatbar .mud-button-label { white-space: nowrap; }

/* ====================== POPUP AMBIENTES IA ====================== */
.vx-amb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.vx-amb-chip { font-size:13px; padding:7px 13px; border-radius:var(--vx-pill, 999px); cursor:pointer; user-select:none;
  background: var(--vx-surface-2); border:1px solid var(--vx-border); color: var(--vx-text);
  transition: all .18s var(--vx-spring); }
.vx-amb-chip:hover { border-color: var(--vx-border-2); transform: translateY(-1px); }
.vx-amb-chip.on { background: var(--vx-teal); border-color: var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); font-weight:600; }
.vx-amb-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); }
.vx-amb-card { border-radius: var(--vx-r); overflow:hidden; background: var(--vx-surface-2); border:1px solid var(--vx-border);
  animation: vx-pop .35s var(--vx-spring) both; transition: box-shadow .2s, border-color .2s; }
.vx-amb-card.vx-amb-sel { border-color: var(--vx-teal-br); box-shadow: var(--vx-sombra, 0 0 0 2px var(--vx-teal-br), 0 12px 26px -14px var(--vx-teal-glow)); }
.vx-amb-card.vx-amb-sel .vx-amb-cap { color: var(--vx-teal-br); font-weight:600; }
.vx-amb-card img { width:100%; height:150px; object-fit:cover; display:block; cursor:zoom-in;
  transition: transform .3s var(--vx-spring); }
.vx-amb-card img:hover { transform: scale(1.04); }
.vx-amb-fail { height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color: var(--vx-faint); font-size:12px; }
.vx-amb-cap { padding:8px 10px; font-size:12.5px; color: var(--vx-muted); }
.vx-amb-cap:hover { color: var(--vx-text); }
.vx-amb-estilo { position:absolute; top:7px; left:7px; z-index:3; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700;
  border-radius:var(--vx-pill, 999px); padding:3px 9px; backdrop-filter:blur(4px); pointer-events:none; }
.vx-amb-estilo.e360 { color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); }
.vx-amb-estilo.eim { color:#fff; background:rgba(8,10,18,.65); border:1px solid rgba(255,255,255,.22); }
.vx-amb-del { position:absolute; top:7px; right:7px; width:24px; height:24px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; font-size:13px; line-height:1; color:#fff; background:rgba(11,11,20,.62); opacity:0; transition:.18s; }
.vx-amb-card:hover .vx-amb-del { opacity:1; }
.vx-amb-del:hover { background:#ef4444; }

/* CLIPA E RESPIRA. O render 16:9 encostava nas bordas e, com a barra de rolagem vertical da
   pagina somando ao 96vw, sobrava um fio de imagem alem da tela -- e o navegador punha uma barra
   horizontal so' por causa desse fio. Padding + overflow:hidden matam o scroll, e a margem ainda
   deixa a visualizacao mais apresentavel (a imagem nao cola no canto). box-sizing para o padding
   nao empurrar o inset. */
/* VIDRO (glassmorphism, estilo iPhone). O fundo deixa de ser preto chapado e vira TRANSLUCIDO com
   desfoque: a galeria atras aparece como vidro fosco, e a imagem flutua sobre ela. O efeito vem do
   backdrop-filter (desfoca o que esta ATRAS) somado a uma tinta escura de baixa opacidade -- sem a
   tinta, o desfoque sozinho nao daria contraste para a imagem se destacar. */
/* ─────────── DUAS ARMADILHAS QUE DEIXAVAM A FOTO AMPLIADA PRESA ───────────
   Ampliar uma foto pede a TELA. Dois detalhes de terceiros faziam ela caber só no painel:

   1) O MudBlazor anima o .mud-dialog com `animation: ... both`. O "both" faz o último quadro
      GRUDAR, e o último quadro é `transform: scale(1)`. Transform em qualquer ancestral vira o
      bloco de contenção de todo `position:fixed` de dentro: o véu que pede `inset:0` passava a
      medir o DIÁLOGO. Medido no navegador: 1270x620 em vez de 1440x900, e uma foto de 2560px
      abrindo com 958px. Zerar a animação enquanto há véu aberto devolve a viewport ao fixed —
      e não custa nada, porque a animação de abrir já terminou muito antes.

   2) O MudBlazor também empurra TODO irmão do menu "mini" fechado 56px para a direita
      (`.mud-drawer…--closed ~ div:not(.mud-main-content)`), para o conteúdo não ficar embaixo do
      trilho de ícones. Só que o lightbox de chapa é montado uma vez no MainLayout, ao lado do
      menu — e ele não é conteúdo, é tela cheia. A foto abria 56px para a direita e 56px mais
      estreita; no telefone, onde o trilho está escondido, sobrava uma tarja da página aparecendo
      à esquerda da foto. É o que o Daniel viu ao tocar no material pelo cockpit. */
.mud-dialog:has(.vx-lightbox), .mud-dialog:has(.vx-pano-wrap) { animation: none !important; transform: none !important; }
.mud-drawer ~ .vx-lb, .mud-drawer ~ .vx-lightbox, .mud-drawer ~ .vx-pano-wrap { margin-left: 0 !important; margin-right: 0 !important; }
/* O MESMO EMPURRÃO NO EDITOR DA OFERTA montado pelo layout — o que o carrinho abre e o do assistente.
   Os dois divs de raiz do OfertaEdit viram irmãos do menu: o véu andava 56px (240 com o menu aberto) e
   deixava uma faixa da página sem escurecer e tocável, e a folha perdia o centro; no telefone, abria
   com 319 dos 375px. O "margin:0 auto" da folha perde para a regra do MudBlazor em especificidade. */
.mud-drawer ~ .vx-editsheet-scrim { margin-left: 0 !important; margin-right: 0 !important; }
.mud-drawer ~ .vx-editsheet { margin-left: auto !important; margin-right: auto !important; }

.vx-lightbox { position: fixed; inset:0; z-index: 200000;
  background: rgba(9,12,17,.40);
  backdrop-filter: blur(34px) saturate(1.3);
  -webkit-backdrop-filter: blur(34px) saturate(1.3);
  display:flex; align-items:center; justify-content:center; cursor: zoom-out; animation: vx-fade .2s ease;
  padding: 3vh 3vw; box-sizing: border-box; overflow: hidden; }
/* botao de fechar em vidro, no canto -- clicar em qualquer lugar ja fecha, mas o X e' o
   affordance claro que a pessoa procura primeiro */
.vx-lb-close { position:absolute; top:18px; right:22px; z-index:1;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color:#fff; font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: background .15s, transform .15s; }
.vx-lb-close:hover { background:rgba(255,255,255,.24); transform:scale(1.08); }
/* a borda clara e o brilho interno sao a "lamina de vidro" sobre a foto -- o toque que faz parecer
   uma placa de vidro, e nao so uma imagem recortada */
.vx-lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit:contain;
  border-radius: calc(14px * var(--vx-raio, 1)); border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--vx-sombra, 0 40px 100px -24px rgba(0,0,0,.82), inset 0 0 0 1px rgba(255,255,255,.06),
              0 1px 0 rgba(255,255,255,.10)); }

/* ====================== OFERTA PÚBLICA ====================== */
/* fundo "estúdio à noite": brilhos ambientes suaves (teal da marca + toque frio) + vinheta que foca o centro */
.vx-pub { min-height:100vh;
  background:
    radial-gradient(1100px 620px at 16% -6%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 12%, transparent)), transparent 55%),
    radial-gradient(900px 680px at 90% 2%, rgba(86,124,210,.07), transparent 55%),
    radial-gradient(1200px 900px at 50% 118%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 6%, transparent)), transparent 60%),
    radial-gradient(145% 105% at 50% 32%, transparent 56%, rgba(0,0,0,.5)),
    linear-gradient(180deg,#090b13,#0a0a11);
  background-attachment: fixed; }
:root.vx-light .vx-pub {
  background:
    radial-gradient(1100px 620px at 16% -6%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), transparent 55%),
    radial-gradient(900px 680px at 90% 2%, rgba(86,124,210,.07), transparent 55%),
    linear-gradient(180deg,#f5f8fb,#eef2f7);
  background-attachment: fixed; }
.vx-pub-load { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.vx-pub-wrap { max-width: 1080px; margin:0 auto; padding: 28px clamp(16px,4vw,40px) 60px; }
.vx-pub-brand { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:500; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); margin-bottom: 28px; }
.vx-pub-brand b { color: var(--vx-teal-br); font-weight:500; }
.vx-pub-hero { border-radius: var(--vx-r-lg); padding: 34px; margin-bottom: 26px;
  background: linear-gradient(135deg,#0e3b2e 0%,#11705a 48%,var(--vx-teal) 100%); position:relative; overflow:hidden;
  box-shadow: var(--vx-sombra, 0 22px 50px -24px color-mix(in srgb, var(--vx-teal) 55%, transparent)); }
.vx-pub-hero::after { content:""; position:absolute; width:360px; height:360px; right:-90px; top:-150px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 60%); }
.vx-pub-tag { font-size:12px; font-weight:700; letter-spacing:calc(1.5px * var(--vx-tracking, 1)); color: rgba(255,255,255,.85); }
.vx-pub-hero h1 { margin:8px 0 14px; font-size: 30px; font-weight:500; color:#fff; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); position:relative; z-index:1; }
.vx-pub-meta { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.9); font-size:15px; position:relative; z-index:1; }
.vx-pub-meta .dot { width:4px; height:4px; border-radius:50%; background: rgba(255,255,255,.5); }
.vx-pub-meta .val { font-size:20px; font-weight:700; }
.vx-pub-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.vx-pub-card { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius: var(--vx-r); overflow:hidden;
  transition: transform .25s var(--vx-spring), box-shadow .25s; }
.vx-pub-card:hover { transform: translateY(-4px); box-shadow: var(--vx-sombra, 0 20px 40px -20px rgba(0,0,0,.7)); }
.vx-pub-img { height: 170px; background-size:cover; background-position:center; }
.vx-pub-info { padding: 14px 16px; }
.vx-pub-info .m { font-size:15px; font-weight:500; }
.vx-pub-info .d { font-size:12px; color: var(--vx-faint); margin-top:2px; }
.vx-pub-info .p { font-size:16px; font-weight:500; color: var(--vx-teal-soft); margin-top:6px; }
.vx-pub-ambs { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.vx-pub-ambs img { width:54px; height:40px; object-fit:cover; border-radius:calc(8px * var(--vx-raio, 1)); cursor:zoom-in; border:1px solid var(--vx-border); }
.vx-pub-card { position:relative; cursor:pointer; }
.vx-pub-card .vx-slab-check { transform: scale(0); }
.vx-pub-card.sel { border-color: var(--vx-teal-br); box-shadow: var(--vx-sombra, 0 0 0 2px var(--vx-teal-br), 0 16px 34px -16px var(--vx-teal-glow)); }
.vx-pub-card.sel .vx-slab-check { transform: scale(1); }
.vx-pub-cta { text-align:center; margin-top:40px; }
.vx-pub-cta p { color: var(--vx-muted); font-size:13px; margin-top:14px; }
.vx-pub-ok { width:100px;height:100px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent);animation:vx-rise .5s var(--vx-spring) both; }

/* ───────────────── Proposta PREMIUM (página pública /oferta) — vitrine de arquitetura ───────────────── */
/* PROPOSTA PADRÃO = CORPORATIVA. O serifado italiano ficou só no modo imersivo, que é onde o
   clima "revista" faz sentido. Aqui a voz é a da marca: a mesma geometria do wordmark. */
.vx-pp { --pp-serif: var(--vx-display);
  max-width: 1180px; margin: 0 auto; padding: 22px clamp(18px,5vw,56px) 150px; }
.vx-pp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom: clamp(20px,5vh,50px); }
.vx-pp-brand { display:flex; align-items:center; gap:10px; font-family:var(--vx-display); font-size:20px; font-weight:600; letter-spacing:calc(-.8px * var(--vx-tracking, 1)); }
.vx-pp-brand img { height:32px; width:32px; }
.vx-pp-brand b { color: var(--vx-teal-br); font-weight:600; margin-left:-1.5px; }
.vx-pp-pdf { display:inline-flex; align-items:center; gap:7px; color: var(--vx-muted); font-size:12.5px; text-decoration:none;
  border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); padding:7px 16px; transition:.2s; }
.vx-pp-pdf:hover { color:#fff; border-color: var(--vx-teal-br); }

.vx-pp-hero { text-align:center; padding: clamp(16px,5vh,52px) 0 clamp(24px,7vh,60px); }
.vx-pp-kicker { display:inline-block; font-size:12px; font-weight:600; letter-spacing:calc(3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-teal-soft); }
.vx-pp-title { font-family: var(--pp-serif); font-weight:500; font-size: clamp(40px, 8vw, 88px); line-height:1.02; letter-spacing:calc(-1px * var(--vx-tracking, 1)); margin: 16px 0 22px; color:#fff; }
.vx-pp-meta { display:inline-flex; align-items:center; gap:16px; color: rgba(255,255,255,.78); font-size: clamp(15px,2vw,18px); font-family: var(--pp-serif); }
.vx-pp-meta b { color:#fff; font-weight:600; }
.vx-pp-meta .sep { color: rgba(255,255,255,.22); }
.vx-pp-meta .val { color: var(--vx-teal-br); font-weight:600; font-size: clamp(18px,2.4vw,24px); }
.vx-pp-note { font-family: var(--pp-serif); font-style:italic; font-size: clamp(19px,2.6vw,26px); line-height:1.5; color: rgba(255,255,255,.92); max-width:680px; margin: 30px auto 0; border:0; }
.vx-pp-lead { color: var(--vx-muted); font-size:13px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); margin: 26px 0 0; }
.vx-pp-scroll { display:block; margin-top: 26px; color: rgba(255,255,255,.4); animation: vx-bob 1.8s ease-in-out infinite; }
@keyframes vx-bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

.vx-pp-pieces { display:flex; flex-direction:column; gap: clamp(44px,9vh,96px); margin-top: clamp(16px,4vh,36px); }
.vx-pp-piece { display:grid; grid-template-columns: 1.22fr 1fr; gap: clamp(22px,4vw,54px); align-items:center; }
.vx-pp-piece:nth-child(even) .vx-pp-stage { order:2; }
.vx-pp-stage { position:relative; aspect-ratio: 4/3; border-radius: calc(18px * var(--vx-raio, 1)); overflow:hidden; cursor:zoom-in;
  background-size:cover; background-position:center; box-shadow: var(--vx-sombra, 0 30px 64px -30px rgba(0,0,0,.85)); border:1px solid rgba(255,255,255,.06);
  transition: transform .45s cubic-bezier(0.22,1,0.36,1); }
.vx-pp-stage:hover { transform: scale(1.012); }
.vx-pp-num { position:absolute; top:14px; left:18px; font-family: var(--pp-serif); font-size:56px; line-height:1; color:rgba(255,255,255,.92); text-shadow:var(--vx-sombra-texto, 0 2px 20px rgba(0,0,0,.6)); }
.vx-pp-swatch { position:absolute; bottom:16px; right:16px; width:96px; height:96px; border-radius:calc(12px * var(--vx-raio, 1)); background-size:cover; background-position:center;
  border:2px solid rgba(255,255,255,.85); box-shadow:var(--vx-sombra, 0 12px 26px -10px rgba(0,0,0,.7)); cursor:zoom-in; transition: transform .25s var(--vx-spring); }
.vx-pp-swatch:hover { transform: scale(1.06); }
.vx-pp-swatch-lbl { position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
  font-size:9.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-sobre-destaque, #04110c); background: var(--vx-teal-br); padding:3px 8px; border-radius:var(--vx-pill, 999px); box-shadow:var(--vx-sombra, 0 6px 14px -6px rgba(0,0,0,.6)); }
.vx-pp-amb-hint { position:absolute; bottom:18px; left:18px; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:#fff; background:rgba(8,10,18,.5); backdrop-filter:blur(6px); padding:5px 11px; border-radius:var(--vx-pill, 999px); }
.vx-pp-piece.sel .vx-pp-stage { box-shadow: var(--vx-sombra, 0 0 0 2px var(--vx-teal-br), 0 30px 60px -30px var(--vx-teal-glow)); }

.vx-pp-detail { padding: 0 clamp(0px,1vw,10px); }
.vx-pp-eyebrow { font-size:12px; letter-spacing:calc(2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-teal-soft); font-weight:600; }
.vx-pp-name { font-family: var(--pp-serif); font-weight:500; font-size: clamp(30px,4.4vw,50px); line-height:1.05; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); margin:10px 0 16px; color:#fff; }
.vx-pp-spec { color: var(--vx-muted); font-size:14.5px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-pp-price { font-family: var(--pp-serif); font-size: clamp(22px,3vw,30px); color:#fff; margin-top:10px; font-weight:600; }
.vx-pp-thumbs { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.vx-pp-thumbs img { width:66px; height:50px; object-fit:cover; border-radius:calc(8px * var(--vx-raio, 1)); cursor:zoom-in; border:1px solid var(--vx-border); transition:.2s; }
.vx-pp-thumbs img:hover { border-color: var(--vx-teal-br); transform: translateY(-2px); }
.vx-pp-pick { display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:12px 22px; border-radius:var(--vx-pill, 999px); cursor:pointer;
  background:transparent; border:1px solid var(--vx-border); color: var(--vx-muted); font-size:14px; font-weight:600; transition:.22s var(--vx-spring); }
.vx-pp-pick:hover { border-color: var(--vx-teal-br); color:#fff; }
.vx-pp-pick.on { background: linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 16%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 5%, transparent))); border-color: var(--vx-teal-br); color: var(--vx-teal-soft); }

/* ── seções da proposta (As peças / Inspiração) ── */
.vx-pp-sec { margin-top: clamp(40px,8vh,84px); }
.vx-pp-sec-h { display:flex; align-items:baseline; gap:14px; padding-bottom:14px; margin-bottom: clamp(20px,3vh,30px); border-bottom:1px solid var(--vx-border); }
.vx-pp-kick { font-family: var(--pp-serif); font-weight:500; font-size: clamp(26px,3.6vw,40px); line-height:1; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); color:#fff; }
.vx-pp-sec-cnt { font-size:12px; letter-spacing:calc(1.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-teal-soft); font-weight:600; }
.vx-pp-sec-sub { color: var(--vx-muted); font-size:14.5px; line-height:1.6; margin:-14px 0 26px; max-width:560px; }

/* grade das chapas (foto real = o que o cliente leva) */
.vx-pp-slabs { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: clamp(16px,2vw,26px); }
.vx-pp-slab { display:flex; flex-direction:column; background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(16px * var(--vx-raio, 1)); overflow:hidden;
  transition: transform .25s var(--vx-spring), border-color .2s, box-shadow .25s; }
.vx-pp-slab:hover { transform: translateY(-4px); border-color: var(--vx-border-2); box-shadow:var(--vx-sombra, 0 26px 50px -28px rgba(0,0,0,.7)); }
.vx-pp-slab.sel { border-color: var(--vx-teal-br); box-shadow:var(--vx-sombra, 0 0 0 1px var(--vx-teal-br), 0 26px 50px -28px var(--vx-teal-glow)); }
.vx-pp-slab-img { position:relative; aspect-ratio: 4/3; background:#13151f center/cover no-repeat; cursor:zoom-in; }
.vx-pp-slab-num { position:absolute; top:10px; left:12px; font-family: var(--pp-serif); font-size:20px; font-weight:600; color:#fff; text-shadow:var(--vx-sombra-texto, 0 2px 10px rgba(0,0,0,.6)); }
.vx-pp-slab-zoom { position:absolute; bottom:10px; left:10px; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
  color:#fff; background:rgba(8,10,18,.55); border:1px solid rgba(255,255,255,.18); border-radius:var(--vx-pill, 999px); padding:3px 9px; backdrop-filter:blur(4px); }
.vx-pp-slab-chk { position:absolute; top:10px; right:10px; width:26px; height:26px; display:flex; align-items:center; justify-content:center;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); border-radius:50%; box-shadow:var(--vx-sombra, 0 6px 14px -4px var(--vx-teal-glow)); }
.vx-pp-slab-info { padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px; flex:1; }
.vx-pp-slab-name { font-family: var(--pp-serif); font-weight:600; font-size:19px; line-height:1.15; color:#fff; letter-spacing:calc(-.2px * var(--vx-tracking, 1)); }
.vx-pp-slab-ref { font-size:11.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-faint); }
.vx-pp-slab-spec { color: var(--vx-muted); font-size:13px; letter-spacing:calc(.2px * var(--vx-tracking, 1)); }
/* preço por área: fica ACIMA do total e menor que ele. É a informação que o comprador usa para
   comparar com o concorrente, mas quem fecha a conta é o valor da peça — por isso não compete. */
.vx-pp-slab-unit { margin-top:6px; font-size:12.5px; letter-spacing:calc(.2px * var(--vx-tracking, 1)); color:var(--vx-teal-soft);
                   font-variant-numeric:tabular-nums; }
.vx-pp-meta-unit { margin-top:10px; font-size:13px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:var(--vx-muted);
                   font-variant-numeric:tabular-nums; }
.vx-pp-slab-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:12px; }
.vx-pp-slab-price { font-family: var(--pp-serif); font-size:20px; font-weight:600; color:#fff; }
.vx-pp-slab-foot .vx-pp-pick { margin-top:0; padding:7px 13px; font-size:12.5px; }

/* galeria de inspiração (ambientes IA) */
.vx-pp-amb-gal { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: clamp(12px,1.6vw,20px); }
.vx-pp-amb-tile { position:relative; margin:0; aspect-ratio: 4/3; border-radius:calc(14px * var(--vx-raio, 1)); overflow:hidden; cursor:zoom-in; border:1px solid var(--vx-border);
  transition: transform .25s var(--vx-spring), border-color .2s; }
.vx-pp-amb-tile:hover { transform: scale(1.015); border-color: var(--vx-teal-br); }
.vx-pp-amb-tile img { width:100%; height:100%; object-fit:cover; display:block; }
.vx-pp-amb-tile figcaption { position:absolute; left:0; right:0; bottom:0; padding:22px 12px 9px; font-size:12px; font-weight:600; color:#fff;
  letter-spacing:calc(.3px * var(--vx-tracking, 1)); background: linear-gradient(180deg, transparent, rgba(8,10,18,.82)); }

.vx-pp-bar { position:fixed; left:0; right:0; bottom:0; z-index:50; padding: 14px clamp(16px,5vw,40px);
  background: linear-gradient(180deg, transparent, rgba(8,10,18,.85) 42%); }
.vx-pp-bar-in { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: rgba(20,22,34,.92); border:1px solid var(--vx-border); border-radius:calc(16px * var(--vx-raio, 1)); padding:12px 14px 12px 22px; box-shadow:var(--vx-sombra, 0 20px 50px -24px rgba(0,0,0,.8)); }
.vx-pp-bar-sel { display:flex; flex-direction:column; }
.vx-pp-bar-sel .lbl { font-size:11px; letter-spacing:calc(1.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-faint); }
.vx-pp-bar-sel .num { font-family: var(--pp-serif); font-size:22px; color:#fff; font-weight:600; }
.vx-pp-reserve { display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:calc(12px * var(--vx-raio, 1)); border:none; cursor:pointer;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); font-weight:700; font-size:15px; transition:.2s; white-space:nowrap; }
.vx-pp-reserve:hover:not(:disabled) { filter:brightness(1.07); transform: translateY(-1px); }
.vx-pp-reserve:disabled { opacity:.4; cursor:not-allowed; }

/* trilha ambiente (botão flutuante) */
.vx-pp-music { position:fixed; left:18px; bottom:88px; z-index:60; display:inline-flex; align-items:center; gap:7px;
  background: rgba(20,22,34,.9); border:1px solid var(--vx-border); color: var(--vx-muted); border-radius:var(--vx-pill, 999px);
  padding:9px 15px; font-size:12.5px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); box-shadow:var(--vx-sombra, 0 14px 30px -16px rgba(0,0,0,.7)); transition:.2s; }
.vx-pp-music:hover { color:#fff; border-color: var(--vx-teal-br); }
.vx-pp-music.on { color: var(--vx-teal-soft); border-color: var(--vx-teal-br); }
.vx-pp-music:not(.on) { animation: vx-music-pulse 2.6s ease-in-out infinite; }
@keyframes vx-music-pulse { 0%,100%{ box-shadow:var(--vx-sombra, 0 14px 30px -16px rgba(0,0,0,.7), 0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 0%, transparent));} 50%{ box-shadow:var(--vx-sombra, 0 14px 30px -16px rgba(0,0,0,.7), 0 0 0 6px color-mix(in srgb, var(--vx-teal-br) 12%, transparent));} }
@media (max-width:760px){ .vx-pp-music { bottom:82px; left:12px; padding:9px 11px; } .vx-pp-music span { display:none; } }

/* crédito CC-BY da trilha (discreto) */
.vx-pp-credit { position:fixed; left:18px; bottom:132px; z-index:59; font-size:9.5px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:rgba(233,236,244,.30); pointer-events:none; max-width:210px; line-height:1.3; }
.vx-cine-credit { font-size:10px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:rgba(233,236,244,.30); margin-top:4px; }
@media (max-width:760px){ .vx-pp-credit { left:12px; bottom:124px; font-size:9px; } }

.vx-pp-modal { position:fixed; inset:0; z-index:1600; background:rgba(6,8,14,.74); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; }
.vx-pp-modal-card { width:100%; max-width:440px; background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(20px * var(--vx-raio, 1)); padding: 32px; box-shadow:var(--vx-sombra, 0 40px 90px -30px rgba(0,0,0,.9)); animation: vx-rise .4s var(--vx-spring) both; }
.vx-pp-modal-x { width:100%; margin-top:12px; background:transparent; border:none; color: var(--vx-faint); font-size:13px; cursor:pointer; padding:8px; }
.vx-pp-modal-x:hover { color: var(--vx-muted); }

.vx-pp-done { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.vx-pp-done .vx-pub-ok { margin-bottom:20px; }
.vx-pp-done-sub { color: var(--vx-muted); max-width:440px; font-size:15px; line-height:1.6; margin-top:10px; }

@media (max-width: 760px) {
  .vx-pp { padding-bottom: 130px; }
  .vx-pp-piece { grid-template-columns: 1fr; gap: 16px; }
  .vx-pp-piece:nth-child(even) .vx-pp-stage { order:0; }
  .vx-pp-bar-sel .num { font-size:18px; }
}
/* bandeja no celular: o texto "2 × cavalete · 8 peças" quebrava palavra por palavra ao lado do
   botão — agora o resumo ocupa a linha inteira e o botão desce para a linha de baixo */
@media (max-width: 640px) {
  .vx-pp-bar-in { flex-wrap:wrap; gap:10px; }
  .vx-pp-bar-sel { flex:1 1 100%; }
  .vx-pp-bar-sel .num { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vx-pp-bar-in > .mud-button-root, .vx-pp-bar-in > button { flex:1 1 100%; }
}

/* toggle Absolute Cinema no gerador de oferta */
.vx-cine { display:flex; align-items:flex-start; gap:6px; margin-top:12px; padding:14px 16px; border-radius:calc(14px * var(--vx-raio, 1)); cursor:pointer;
  border:1px solid var(--vx-border); background:
    radial-gradient(120% 140% at 0% 0%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), transparent 60%),
    linear-gradient(180deg, rgba(20,22,34,.6), rgba(12,13,20,.6)); transition:.25s var(--vx-spring); }
.vx-cine:hover { border-color: var(--vx-border-2); }
.vx-cine.on { border-color: var(--vx-teal-br); box-shadow:var(--vx-sombra, 0 0 0 1px var(--vx-teal-br), 0 18px 40px -22px var(--vx-teal-glow)); }
.vx-cine-txt { display:flex; flex-direction:column; gap:3px; padding-top:6px; }
.vx-cine-txt .t { font-size:15px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.vx-cine-txt .s { font-size:12.5px; color: var(--vx-muted); line-height:1.5; max-width:560px; }
.vx-cine-tag { font-size:10px; font-weight:700; letter-spacing:calc(1px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-teal-soft);
  background: color-mix(in srgb, var(--vx-teal-br) 12%, transparent); border:1px solid var(--vx-teal-br); border-radius:var(--vx-pill, 999px); padding:2px 8px; }

/* ═══════════════════════ ABSOLUTE CINEMA (experiência imersiva) ═══════════════════════ */
.vx-cine-root { position:fixed; inset:0; z-index:1000; background:#06070c; color:#fff; overflow:hidden;
  /* o imersivo MANTÉM o serifado: é o modo "revista", onde o drama é o produto.
     Declarado por extenso porque --pp-serif é escopado no .vx-pp e não chega aqui. */
  font-family: var(--vx-sans); --cine-serif: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif; }
.vx-cine-eyebrow { font-size:clamp(11px,1.4vw,13px); letter-spacing:calc(3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-teal-soft); font-weight:600; }

/* ── o limiar (porta) ── */
.vx-cine-door { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:18px; padding:32px; cursor:pointer; animation:vx-cine-fade 1.1s ease both; }
.vx-cine-aura { position:absolute; width:80vmax; height:80vmax; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  background:radial-gradient(circle, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 16%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 5%, transparent)) 32%, transparent 60%); animation:vx-cine-breathe 8s ease-in-out infinite; }
.vx-cine-aura.big { width:120vmax; height:120vmax; background:radial-gradient(circle, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 20%, transparent)), transparent 55%); }
.vx-cine-mark { position:relative; width:58px; height:58px; filter:drop-shadow(0 0 26px color-mix(in srgb, var(--vx-teal-br) 55%, transparent)); animation:vx-cine-float 5s ease-in-out infinite, vx-mark-rot 14s linear infinite; }
.vx-cine-name { position:relative; font-family:var(--cine-serif); font-weight:500; font-size:clamp(40px,8vw,104px); line-height:.98; letter-spacing:calc(-1px * var(--vx-tracking, 1));
  margin:4px 0; background:linear-gradient(180deg,#fff,#cfe9df); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vx-cine-door-sub { position:relative; max-width:560px; font-size:clamp(15px,2vw,19px); line-height:1.6; color:rgba(233,236,244,.82); font-family:var(--cine-serif); font-style:italic; }
.vx-cine-enter { position:relative; margin-top:10px; display:inline-flex; align-items:center; gap:10px; padding:16px 34px; border-radius:var(--vx-pill, 999px); cursor:pointer;
  border:none; font-size:16px; font-weight:700; color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)));
  box-shadow:0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 50%, transparent); animation:vx-cine-pulse 2.4s ease-in-out infinite; transition:transform .2s; }
.vx-cine-enter:hover { transform:translateY(-2px) scale(1.03); }
.vx-cine-door-hint { position:relative; font-size:12px; color:rgba(233,236,244,.5); letter-spacing:calc(.5px * var(--vx-tracking, 1)); }

/* ── a transformação: clarão + as cenas nascem ── */
.vx-cine-sweep { position:absolute; inset:0; z-index:40; pointer-events:none; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  transform:translateX(-120%); animation:vx-cine-sweep 1.1s ease-out 1 both; }
.vx-cine-scenes { position:absolute; inset:0; overflow-y:auto; scroll-snap-type:y mandatory; scroll-behavior:smooth; animation:vx-cine-born 1.2s cubic-bezier(.2,.7,.2,1) both; }
.vx-cine-scenes::-webkit-scrollbar { width:0; }
.vx-cine-prog { position:absolute; top:0; left:0; right:0; height:3px; z-index:50; transform-origin:0 50%; transform:scaleX(0);
  background:var(--vx-cheio, linear-gradient(90deg,var(--vx-teal),var(--vx-teal-br))); box-shadow:var(--vx-sombra, 0 0 12px color-mix(in srgb, var(--vx-teal-br) 70%, transparent)); }
.vx-cine-musicbtn { position:fixed; top:18px; right:18px; z-index:55; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,34,.7); border:1px solid var(--vx-border); color:var(--vx-muted); cursor:pointer; backdrop-filter:blur(8px); transition:.2s; }
.vx-cine-musicbtn.on { color:var(--vx-teal-soft); border-color:var(--vx-teal-br); }

/* ── cenas ── */
.vx-cine-scene { position:relative; min-height:100vh; min-height:100dvh; scroll-snap-align:start; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:7vh 6vw; }
.vx-cine-c { position:relative; z-index:3; max-width:820px; display:flex; flex-direction:column; gap:16px; text-align:center;
  opacity:0; transform:translateY(34px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.vx-cine-c.left { text-align:left; align-items:flex-start; margin-right:auto; }
.vx-cine-scene.in .vx-cine-c { opacity:1; transform:none; }
.vx-cine-veil { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,7,12,.55), rgba(6,7,12,.30) 40%, rgba(6,7,12,.86)); }
.vx-cine-veil.side { background:linear-gradient(90deg, rgba(6,7,12,.86) 0%, rgba(6,7,12,.45) 45%, rgba(6,7,12,.20) 100%); }
.vx-cine-h2 { font-family:var(--cine-serif); font-weight:500; font-size:clamp(30px,5.4vw,68px); line-height:1.04; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); color:#fff; }
.vx-cine-h2.grande { font-size:clamp(34px,6.4vw,82px); }
.vx-cine-lead { font-size:clamp(16px,2.1vw,22px); line-height:1.6; color:rgba(233,236,244,.88); font-family:var(--cine-serif); max-width:620px; }
.vx-cine-lead2 { font-size:clamp(14px,1.7vw,17px); line-height:1.6; color:rgba(233,236,244,.66); max-width:560px; }

/* foto real com Ken Burns (zoom lento) por baixo do véu */
.vx-cine-origin::before, .vx-cine-piece::before, .vx-cine-ambient::before { content:""; position:absolute; inset:0; z-index:0; background-image:var(--vx-foto);
  background-size:cover; background-position:center; transform:scale(1.05); }
.vx-cine-origin.in::before, .vx-cine-piece.in::before, .vx-cine-ambient.in::before { animation:vx-cine-ken 19s ease-out forwards; }

/* ════ EFEITOS AMBIENTAIS por cômodo — só ganham vida na cena ativa (.in). Tudo GPU/CSS. ════ */
.vx-fx-layer { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity 1.4s ease; overflow:hidden; }
.vx-cine-ambient.in .vx-fx-layer { opacity:1; }
.vx-fx-layer > i, .vx-fx-layer > b { position:absolute; inset:0; display:block; content:""; }

/* ÁGUA (banheiro/spa/piscina): cáusticas dançando + ondulação real (filtro SVG) + linha-d'água */
.vx-fx-water .vx-fx-layer { mix-blend-mode:screen;
  background:radial-gradient(60% 42% at 22% 28%, rgba(120,222,255,.16), transparent 60%),
            radial-gradient(52% 38% at 78% 62%, rgba(74,196,255,.14), transparent 62%); }
.vx-fx-water .vx-fx-layer > i { background:
    repeating-radial-gradient(circle at 32% 30%, rgba(190,242,255,.12) 0 7px, transparent 7px 22px),
    repeating-radial-gradient(circle at 68% 72%, rgba(150,228,255,.10) 0 9px, transparent 9px 26px);
  filter:blur(5px) url(#vxWater); mix-blend-mode:screen; animation:vx-caustic 11s ease-in-out infinite alternate; }
.vx-fx-water .vx-fx-layer > b { top:auto; bottom:0; height:36%;
  background:linear-gradient(to top, rgba(56,176,235,.24), transparent);
  filter:blur(2px) url(#vxWater); mix-blend-mode:screen; animation:vx-waterline 6.5s ease-in-out infinite alternate; }
@keyframes vx-caustic { 0%{transform:translate3d(-2%,-1%,0) scale(1.06);opacity:.7} 100%{transform:translate3d(2%,2%,0) scale(1.14);opacity:1} }
@keyframes vx-waterline { 0%{opacity:.45;transform:translateY(5px) scaleY(1)} 100%{opacity:.85;transform:translateY(-3px) scaleY(1.07)} }

/* SOL (externo/fachada/jardim): facho de luz cruzando + poeira flutuando */
.vx-fx-sun .vx-fx-layer { mix-blend-mode:screen;
  background:linear-gradient(118deg, transparent 38%, rgba(255,240,200,.20) 50%, transparent 64%);
  background-size:260% 100%; animation:vx-rays 13s ease-in-out infinite alternate; }
.vx-fx-sun .vx-fx-layer > i { mix-blend-mode:screen; animation:vx-motes 22s linear infinite; background-image:
    radial-gradient(2px 2px at 18% 30%, rgba(255,255,240,.9), transparent 60%),
    radial-gradient(2px 2px at 40% 70%, rgba(255,255,240,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 22%, rgba(255,255,240,.8), transparent 60%),
    radial-gradient(2px 2px at 80% 55%, rgba(255,255,240,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 85%, rgba(255,255,240,.6), transparent 60%),
    radial-gradient(2px 2px at 72% 82%, rgba(255,255,240,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 45%, rgba(255,255,240,.6), transparent 60%); }
@keyframes vx-rays { 0%{background-position:0% 0%} 100%{background-position:100% 0%} }
@keyframes vx-motes { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-3%,-6%,0)} }

/* VAPOR (cozinha): névoa quente subindo */
.vx-fx-steam .vx-fx-layer { mix-blend-mode:screen; background:radial-gradient(60% 50% at 50% 92%, rgba(255,250,235,.16), transparent 70%); }
.vx-fx-steam .vx-fx-layer > i { filter:blur(9px); mix-blend-mode:screen; animation:vx-steam 9s ease-in-out infinite alternate; background:
    radial-gradient(42% 30% at 48% 82%, rgba(255,255,250,.14), transparent 70%),
    radial-gradient(34% 26% at 62% 78%, rgba(255,255,250,.10), transparent 70%); }
@keyframes vx-steam { 0%{transform:translateY(12%) scale(1);opacity:.4} 100%{transform:translateY(-8%) scale(1.18);opacity:.85} }

/* BRASA (lareira/churrasqueira): brilho quente pulsando + faíscas subindo */
.vx-fx-fire .vx-fx-layer { mix-blend-mode:screen; animation:vx-flicker 2.8s ease-in-out infinite;
  background:radial-gradient(52% 42% at 50% 86%, rgba(255,138,44,.22), transparent 66%); }
.vx-fx-fire .vx-fx-layer > i { mix-blend-mode:screen; animation:vx-spark 4.5s linear infinite; background-image:
    radial-gradient(2px 2px at 46% 80%, rgba(255,180,90,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 54% 70%, rgba(255,150,60,.8), transparent 60%),
    radial-gradient(2px 2px at 50% 60%, rgba(255,200,120,.7), transparent 60%); }
@keyframes vx-flicker { 0%,100%{opacity:.55} 45%{opacity:.95} 70%{opacity:.7} }
@keyframes vx-spark { 0%{transform:translateY(10%);opacity:0} 20%{opacity:1} 100%{transform:translateY(-40%);opacity:0} }

/* BRILHO (sala/quarto/demais): poeira de luz suave + halo que respira */
.vx-fx-glow .vx-fx-layer { mix-blend-mode:screen; animation:vx-glow 15s ease-in-out infinite alternate;
  background:radial-gradient(40% 32% at 30% 26%, rgba(255,248,230,.12), transparent 62%); }
.vx-fx-glow .vx-fx-layer > i { mix-blend-mode:screen; animation:vx-motes 26s linear infinite; background-image:
    radial-gradient(1.6px 1.6px at 24% 36%, rgba(255,250,235,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 64%, rgba(255,250,235,.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 76% 30%, rgba(255,250,235,.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 44% 78%, rgba(255,250,235,.5), transparent 60%); }
@keyframes vx-glow { 0%{opacity:.5;transform:scale(1)} 100%{opacity:.9;transform:scale(1.06)} }

@media (prefers-reduced-motion: reduce) { .vx-fx-layer, .vx-fx-layer > i, .vx-fx-layer > b { animation:none !important; } }

/* chapa já reservada por outro (indisponível) */
.vx-cine-pick.reservada, .vx-pp-pick.reservada { display:inline-flex; align-items:center; gap:7px; cursor:not-allowed;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.55); border:1px solid rgba(255,255,255,.14); }
.vx-pp-slab.reservada-card, .vx-cine-pick.reservada { opacity:.85; }

/* 360 · seletor de cômodos */
.vx-cine-360grid { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.vx-cine-360card { position:relative; width:clamp(200px,30vw,300px); aspect-ratio:16/10; border-radius:calc(16px * var(--vx-raio, 1)); overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background-size:cover; background-position:center; transition:.25s var(--vx-spring); }
.vx-cine-360card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,7,12,.1), rgba(6,7,12,.7)); }
.vx-cine-360card:hover { transform:translateY(-4px) scale(1.02); border-color:var(--vx-teal-br); box-shadow:var(--vx-sombra, 0 26px 50px -24px var(--vx-teal-glow)); }
.vx-cine-360badge { position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); border-radius:var(--vx-pill, 999px); padding:4px 10px; }
.vx-cine-360lbl { position:absolute; left:14px; bottom:12px; z-index:2; font-family:var(--cine-serif); font-size:19px; font-weight:600; color:#fff; text-shadow:var(--vx-sombra-texto, 0 2px 12px rgba(0,0,0,.6)); }

/* cena de abertura (números) */
.vx-cine-open-row { display:flex; gap:clamp(20px,5vw,64px); justify-content:center; flex-wrap:wrap; margin:14px 0 8px; }
.vx-cine-stat { display:flex; flex-direction:column; gap:4px; }
.vx-cine-stat b { font-family:var(--cine-serif); font-weight:600; font-size:clamp(34px,5.5vw,64px); color:#fff; line-height:1; }
.vx-cine-stat span { font-size:12px; letter-spacing:calc(1.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:rgba(233,236,244,.55); }
.vx-cine-down { margin-top:18px; display:inline-flex; flex-direction:column; align-items:center; gap:2px; background:none; border:none; cursor:pointer; color:var(--vx-teal-soft);
  font-size:12px; letter-spacing:calc(2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); animation:vx-cine-bob 2s ease-in-out infinite; }

/* cena por peça */
.vx-cine-piece { justify-content:flex-end; }
.vx-cine-num { position:absolute; top:8vh; left:6vw; z-index:3; font-family:var(--cine-serif); font-size:clamp(28px,4vw,52px); color:#fff; opacity:.92; }
.vx-cine-num i { font-style:normal; font-size:.5em; color:rgba(255,255,255,.5); }
.vx-cine-card { position:relative; z-index:3; margin-left:auto; max-width:440px; text-align:left; display:flex; flex-direction:column; gap:8px;
  background:rgba(10,12,20,.5); border:1px solid rgba(255,255,255,.12); border-radius:calc(18px * var(--vx-raio, 1)); padding:26px 28px; backdrop-filter:blur(10px);
  opacity:0; transform:translateX(40px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.vx-cine-piece.in .vx-cine-card { opacity:1; transform:none; }
.vx-cine-unica { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:calc(1px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  color:var(--vx-teal-soft); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); border:1px solid var(--vx-teal-br); border-radius:var(--vx-pill, 999px); padding:4px 11px; }
.vx-cine-pname { font-family:var(--cine-serif); font-weight:600; font-size:clamp(24px,3.4vw,38px); line-height:1.06; color:#fff; margin-top:4px; }
.vx-cine-pspec { font-size:13.5px; color:rgba(233,236,244,.7); letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-cine-pprice { font-family:var(--cine-serif); font-size:clamp(24px,3vw,34px); font-weight:600; color:#fff; margin:2px 0 6px; }
.vx-cine-pick { display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border-radius:calc(12px * var(--vx-raio, 1)); cursor:pointer; border:none; font-size:15px; font-weight:700;
  color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); transition:.2s; }
.vx-cine-pick:hover { filter:brightness(1.06); transform:translateY(-1px); }
.vx-cine-pick.on { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-soft); border:1px solid var(--vx-teal-br); }

/* cena ambiente */
.vx-cine-amb { background-size:cover; background-position:center; }

/* cena final */
.vx-cine-final { background:radial-gradient(120% 100% at 50% 30%, #0c1118, #06070c 70%); }
.vx-cine-final-val { display:flex; flex-direction:column; gap:2px; margin:8px 0; }
.vx-cine-final-val .lbl { font-size:12px; letter-spacing:calc(2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:rgba(233,236,244,.55); }
.vx-cine-final-val .val { font-family:var(--cine-serif); font-size:clamp(40px,7vw,76px); font-weight:600; color:var(--vx-teal-soft); line-height:1; }
.vx-cine-cta { display:inline-flex; align-items:center; gap:11px; padding:18px 36px; border-radius:calc(14px * var(--vx-raio, 1)); border:none; cursor:pointer; font-size:17px; font-weight:800;
  color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); box-shadow:var(--vx-sombra, 0 24px 60px -22px var(--vx-teal-glow)); transition:.2s; animation:vx-cine-pulse 2.6s ease-in-out infinite; }
.vx-cine-cta:hover:not(:disabled) { transform:translateY(-2px) scale(1.02); }
.vx-cine-cta:disabled { opacity:.4; cursor:not-allowed; animation:none; }
.vx-cine-final-hint { font-size:13px; color:rgba(233,236,244,.6); }
.vx-cine-pdf { margin-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:rgba(233,236,244,.55); text-decoration:none; }
.vx-cine-pdf:hover { color:#fff; }

/* ── SELEÇÃO de peças no cinema — grade menor, amplia no toque, seleciona progressivo ── */
.vx-cine-c.wide { max-width:1180px; width:92vw; }
.vx-cine-selgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:16px; width:100%; margin:10px 0 6px; max-height:60vh; overflow-y:auto; padding:4px 6px; }
.vx-cine-slab { background:rgba(18,22,32,.62); border:1px solid rgba(255,255,255,.08); border-radius:calc(14px * var(--vx-raio, 1)); overflow:hidden; transition:.18s; backdrop-filter:blur(4px); }
.vx-cine-slab:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.18); }
.vx-cine-slab.on { border-color:var(--vx-teal); box-shadow:var(--vx-sombra, 0 0 0 1px var(--vx-teal), 0 16px 38px -18px var(--vx-teal-glow)); }
.vx-cine-slab.off { opacity:.5; }
.vx-cine-slab-img { position:relative; aspect-ratio:4/3; background-size:cover; background-position:center; background-color:#0c0f17; cursor:zoom-in; }
.vx-cine-slab-zoom { position:absolute; top:8px; right:8px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:.18s; }
.vx-cine-slab-img:hover .vx-cine-slab-zoom { opacity:1; }
.vx-cine-slab-lock { position:absolute; left:8px; top:8px; display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; background:rgba(0,0,0,.62); color:#ffe; padding:3px 8px; border-radius:calc(20px * var(--vx-raio, 1)); }
.vx-cine-slab-ok { position:absolute; left:8px; bottom:8px; color:var(--vx-teal-soft); background:rgba(0,0,0,.5); border-radius:50%; display:flex; padding:2px; }
.vx-cine-slab-info { padding:10px 12px 12px; text-align:left; }
.vx-cine-slab-info h4 { margin:0; font-size:14px; font-weight:600; color:#fff; line-height:1.2; }
.vx-cine-slab-info .sp { font-size:11.5px; color:rgba(233,236,244,.6); margin:3px 0; }
.vx-cine-slab-info .pr { font-family:var(--cine-serif); font-size:17px; font-weight:600; color:var(--vx-teal-soft); margin-bottom:2px; }
.vx-cine-slab-info .pr-un { font-size:11.5px; letter-spacing:calc(.2px * var(--vx-tracking, 1)); color:rgba(233,236,244,.55);
                            font-variant-numeric:tabular-nums; margin-bottom:9px; }
.vx-cine-slab-btn { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:calc(9px * var(--vx-raio, 1)); border:1px solid rgba(255,255,255,.18); background:transparent; color:#fff; cursor:pointer; font-size:12.5px; font-weight:600; transition:.15s; }
.vx-cine-slab-btn:hover { border-color:var(--vx-teal); }
.vx-cine-slab-btn.on { background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); border-color:transparent; }
.vx-cine-selbar { margin:12px 0 4px; font-size:14px; color:rgba(233,236,244,.85); }
.vx-cine-selbar b { color:var(--vx-teal-soft); font-size:18px; }
.vx-cine-zoom { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.93); display:flex; align-items:center; justify-content:center; padding:24px; animation:vx-cine-fade .3s ease both; }
.vx-cine-zoom img { max-width:94vw; max-height:90vh; border-radius:calc(10px * var(--vx-raio, 1)); box-shadow:var(--vx-sombra, 0 30px 80px -20px #000); }
@media (max-width:560px){ .vx-cine-selgrid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px; max-height:56vh; } .vx-cine-slab-info h4 { font-size:13px; } }

@keyframes vx-cine-fade { from { opacity:0; } to { opacity:1; } }
@keyframes vx-cine-born { from { opacity:0; transform:scale(1.06); filter:blur(14px); } to { opacity:1; transform:none; filter:none; } }
@keyframes vx-cine-sweep { to { transform:translateX(120%); } }
@keyframes vx-cine-ken { from { transform:scale(1.04); } to { transform:scale(1.22); } }
@keyframes vx-cine-breathe { 0%,100% { opacity:.7; transform:translate(-50%,-50%) scale(1); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } }
@keyframes vx-cine-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
/* GIRAR E FLUTUAR AO MESMO TEMPO. As duas animacoes nao podem disputar o transform -- a ultima
   simplesmente vence e a outra some. Por isso o giro usa a propriedade `rotate`, que e
   independente do transform e compoe com ele em vez de substitui-lo. */
@keyframes vx-mark-rot { to { rotate: 360deg; } }
@keyframes vx-cine-bob { 0%,100% { transform:translateY(0); opacity:.8; } 50% { transform:translateY(6px); opacity:1; } }
@keyframes vx-cine-pulse { 0%,100% { box-shadow:0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 45%, transparent); } 50% { box-shadow:0 0 0 14px color-mix(in srgb, var(--vx-teal-br) 0%, transparent); } }
@media (max-width:760px){
  .vx-cine-card { max-width:100%; margin-left:0; }
  .vx-cine-piece { justify-content:center; }
  .vx-cine-num { top:5vh; }
}

/* cena que convida ao 360 (panorâmica desfocada de teaser atrás) */
.vx-cine-360cta::before { content:""; position:absolute; inset:0; z-index:0; background-image:var(--vx-foto); background-size:cover; background-position:center; transform:scale(1.08); filter:blur(3px) brightness(.55); }
.vx-cine-360cta.in::before { animation:vx-cine-ken 24s ease-out forwards; }

/* portão de identificação (oferta pública = captura de lead) */
.vx-gate { position:fixed; inset:0; z-index:1000; background:#06070c; color:#fff; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:40px 24px;
  font-family:'Inter',system-ui,sans-serif; --cine-serif: var(--pp-serif), 'Cormorant Garamond', Georgia, serif; animation:vx-cine-fade 1s ease both; }
.vx-gate-title { position:relative; font-family:var(--cine-serif); font-weight:500; font-size:clamp(34px,6vw,64px); line-height:1; letter-spacing:calc(-.5px * var(--vx-tracking, 1));
  margin:2px 0; background:linear-gradient(180deg,#fff,#cfe9df); -webkit-background-clip:text; background-clip:text; color:transparent; }
.vx-gate-sub { position:relative; max-width:460px; font-size:15px; line-height:1.6; color:rgba(233,236,244,.8); }
.vx-gate-form { position:relative; width:100%; max-width:380px; display:flex; flex-direction:column; gap:12px; margin-top:10px; text-align:left;
  background:rgba(20,22,34,.6); border:1px solid var(--vx-border); border-radius:calc(18px * var(--vx-raio, 1)); padding:22px; backdrop-filter:blur(8px); }
.vx-gate-form .vx-field label { font-size:12px; color:var(--vx-muted); }
.vx-gate-err { color:#ff6b6b; font-size:13px; margin:0; }
.vx-gate-hint { font-size:11.5px; color:var(--vx-faint); text-align:center; margin-top:2px; }

/* overlay 360 navegável (Three.js) */
.vx-pano-wrap { position:fixed; inset:0; z-index:1200; background:#000; animation:vx-cine-fade .35s ease both; }
.vx-pano-stage { position:absolute; inset:0; cursor:grab; touch-action:none; }
.vx-pano-stage:active { cursor:grabbing; }
.vx-pano-hint { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; font-size:13px; color:rgba(255,255,255,.9);
  background:rgba(8,10,18,.5); border:1px solid rgba(255,255,255,.16); border-radius:var(--vx-pill, 999px); padding:8px 16px; backdrop-filter:blur(6px); pointer-events:none; animation:vx-cine-bob 2.6s ease-in-out infinite; }
.vx-pano-close { position:absolute; top:20px; right:20px; z-index:3; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(8,10,18,.55); color:#fff; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:.2s; }
.vx-pano-close:hover { background:color-mix(in srgb, var(--vx-teal-br) 28%, transparent); transform:rotate(90deg); }

/* ====================== OFERTAS (lista) ====================== */
.vx-of-row { display:flex; align-items:center; gap:14px; padding:12px 16px; background: var(--vx-surface);
  border:1px solid var(--vx-border); border-radius: var(--vx-r); transition: transform .2s var(--vx-spring), border-color .2s; }
.vx-of-row:hover { transform: translateX(2px); border-color: var(--vx-border-2); }
/* O CORPO da fileira (assunto, cliente, subtitulo). Isto vivia no style= de cada tela, e inline
   vence folha de estilo: nenhum @media conseguia dar piso a ele. */
.vx-of-corpo { flex: 1; min-width: 0; }
.vx-of-com { min-width: 110px; text-align: right; font-weight: 700; color: var(--vx-teal-soft); }
.vx-of-id { font-size:13px; font-weight:700; color: var(--vx-teal-soft); min-width:58px; }
.vx-of-cli { font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-of-sub { font-size:11px; color: var(--vx-faint); }
/* o contato do cliente, embaixo do nome — nao emendado nele */
.vx-of-cto { font-size:11px; color: var(--vx-faint); overflow-wrap:anywhere; margin-top:1px; }
.vx-of-stat { font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--vx-pill, 999px); color:var(--vx-sobre-destaque, #04110c); }
/* proposta de pré-cliente que saiu sem prender pedra — âmbar vazado, pra não brigar com o status */
.vx-of-stat.s-solta { background:rgba(245,158,11,.14); color:#f2b441; border:1px dashed rgba(245,158,11,.55); }

/* ── CONTADOR DE URGÊNCIA por peça, na proposta pública: pill âmbar pulsando com o regressivo
   (vx-urgencia.js escreve o tempo). Vencido: apaga, para de pulsar e diz "tempo esgotado". ── */
.vx-urg { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:var(--vx-pill, 999px);
  font-size:11px; font-weight:800; letter-spacing:calc(.04em * var(--vx-tracking, 1)); color:#1a0b02; white-space:nowrap;
  background:linear-gradient(90deg,#f59e0b,#f4726e); animation:vxUrgPulsa 1.6s ease-in-out infinite; }
.vx-urg b { font-variant-numeric:tabular-nums; font-weight:800; }
.vx-urg.sobre { position:absolute; right:8px; bottom:8px; z-index:2; }
.vx-urg.fim { background:rgba(120,124,140,.3); color:#c8ccd6; animation:none; }
@keyframes vxUrgPulsa { 0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,.45); } 50% { box-shadow:0 0 0 7px rgba(245,158,11,0); } }
@media (prefers-reduced-motion:reduce) { .vx-urg { animation:none; } }

/* editor: definir a urgência EM HORAS (regra: cavalete = relógio do conjunto; avulsa = próprio) */
.vx-urg-def { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--vx-muted); }
.vx-urg-def input { width:54px; height:24px; text-align:center; }
.vx-urg-def label { font-size:10.5px; color:var(--vx-faint); white-space:nowrap; }
.vx-pi-grupo .vx-urg-def.grupo { margin-left:8px; }

/* destino "Vários clientes": lista vertical com checkbox (pedido do cliente — chips viravam sopa) */
.vx-varios-lista { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; max-height:440px; overflow:auto;
  border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:6px; }
.vx-varios-lin { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; font-size:13px; }
.vx-varios-lin:hover { background:var(--vx-surface-2); }
.vx-varios-lin.on { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-varios-lin input { accent-color:var(--vx-teal); }
.vx-varios-lin .nm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-varios-lin .cid { font-size:11px; color:var(--vx-faint); }
/* CODIGO COM LOJA: duas lojas do mesmo cliente sao duas linhas com o MESMO nome, e sem o codigo
   nao havia como saber qual delas ja' foi marcada. Tabular para as colunas alinharem na vertical. */
.vx-varios-lin .cod { font-size:10.5px; color:var(--vx-faint); font-variant-numeric:tabular-nums;
  white-space:nowrap; opacity:.85; }
/* Cabecalho da lista: quantos sao, e as duas acoes que evitam vinte cliques.
   QUEBRA LINHA: com "carregar mais" e "marcar os 60 carregados" (e, na busca de estoque da oferta,
   o botao "Adicionar N marcados") a fileira passa de 400px, e o celular tem 343 uteis. O texto da
   esquerda nao leva flex:1 -- a base dele e' o proprio conteudo, entao o wrap dispara de verdade
   (armadilha 4 de vortex-mobile-armadilhas). */
.vx-varios-cab { display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11.5px; color:var(--vx-muted); margin:0 2px 5px; flex-wrap:wrap; row-gap:6px; }
.vx-varios-cab .acoes { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vx-varios-cab a { color:var(--vx-teal-soft); cursor:pointer; text-decoration:none; }
.vx-varios-cab a:hover { text-decoration:underline; }

/* Demandas Ofertas V2 — nome da oferta (item 3) na lista e na proposta */
.vx-of-tit { font-size:12px; font-weight:600; color:var(--vx-teal-soft); margin-bottom:1px; }
.vx-pp-titulo { font-size:clamp(15px,2vw,21px); font-weight:600; color:var(--vx-teal-soft); letter-spacing:calc(.02em * var(--vx-tracking, 1)); margin:6px 0 2px; }
/* envio: destinatários AGRUPADOS POR EMPRESA (item 1 — modelo do cliente): linha por cliente,
   pessoas como chips embaixo, "remover" a empresa inteira à direita */
.vx-env-grupos { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.vx-env-grp { padding:7px 0 8px; border-bottom:1px solid var(--vx-border); }
.vx-env-grp .cab { display:flex; align-items:center; gap:8px; font-size:12px; }
.vx-env-grp .cab b { font-weight:600; color:var(--vx-text); letter-spacing:calc(.01em * var(--vx-tracking, 1)); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-env-grp .cab .qtd { font-size:10.5px; color:var(--vx-faint); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); padding:0 7px; }
.vx-env-grp .cab .rm { font-size:11px; color:var(--vx-faint); cursor:pointer; padding:2px 8px; border-radius:calc(7px * var(--vx-raio, 1)); border:1px solid transparent; }
.vx-env-grp .cab .rm:hover { color:#ff6b6b; border-color:rgba(255,107,107,.35); background:rgba(255,107,107,.08); }
.vx-env-grp .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.vx-env-chip u { text-decoration:none; font-size:11px; color:var(--vx-teal-soft); }
.vx-env-contatos { margin-top:8px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 10px; background:var(--vx-surface); }
.vx-env-contatos .cab { font-size:12px; color:var(--vx-muted); margin-bottom:6px; }
.vx-env-contatos .lin { display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:calc(7px * var(--vx-raio, 1)); cursor:pointer; font-size:13px; }
.vx-env-contatos .lin:hover { background:var(--vx-surface-2); }
.vx-env-contatos .lin input { accent-color:var(--vx-teal); }
.vx-env-contatos .lin .nm { flex:1; }
.vx-env-contatos .lin .em { font-size:11px; color:var(--vx-faint); }

/* filtros de lugar da carteira de clientes (país / UF / cidade) */
.vx-cli-filtros { display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.vx-cli-filtros .lbl { font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.06em * var(--vx-tracking, 1)); color:var(--vx-faint); }
.vx-cli-filtros select { font:inherit; font-size:12.5px; height:34px; padding:0 10px; border-radius:calc(9px * var(--vx-raio, 1));
  background:var(--vx-surface); color:var(--vx-text); border:1px solid var(--vx-border); max-width:230px; }
.vx-cli-filtros select:disabled { opacity:.4; }
.vx-cli-filtros .limpar { font:inherit; font-size:12px; color:var(--vx-morno); background:none; border:none;
  cursor:pointer; text-decoration:underline; }
.vx-of-val { font-size:15px; font-weight:500; color: var(--vx-text); min-width:90px; text-align:right; }

/* ====================== GUIA DE INTEGRAÇÃO ====================== */
.vx-int-steps { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.vx-int-step { display:flex; gap:12px; }
.vx-int-step .n { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:14px; color:var(--vx-sobre-destaque, #04110c); background: var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); }
.vx-int-step b { font-size:14px; }
.vx-int-step p { font-size:12.5px; color: var(--vx-muted); margin:4px 0 0; line-height:1.5; }
.vx-int-step code { background: var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:calc(6px * var(--vx-raio, 1));
  padding:1px 5px; font-size:11.5px; color: var(--vx-teal-soft); }

/* ====================== TEMAS (acentos) ====================== */
.vx-accent-roxo  { --vx-teal:#7C3AED; --vx-teal-br:#A855F7; --vx-teal-soft:#C4B5FD; --vx-teal-glow:rgba(168,85,247,.30); }
.vx-accent-ambar { --vx-teal:#D97706; --vx-teal-br:#F59E0B; --vx-teal-soft:#FCD34D; --vx-teal-glow:rgba(245,158,11,.30); }
.vx-accent-azul  { --vx-teal:#2563EB; --vx-teal-br:#3B82F6; --vx-teal-soft:#93C5FD; --vx-teal-glow:rgba(59,130,246,.30); }
.vx-accent-rosa  { --vx-teal:#DB2777; --vx-teal-br:#EC4899; --vx-teal-soft:#F9A8D4; --vx-teal-glow:rgba(236,72,153,.30); }
.vx-accent-cinema { --vx-teal:#C9A24B; --vx-teal-br:#E6C56A; --vx-teal-soft:#F0D98C; --vx-teal-glow:rgba(230,197,106,.28);
  --vx-bg:#08070a; --vx-bg-2:#0d0c11; --vx-surface:#15131b; --vx-surface-2:#1c1924; }

/* A COR QUE A PESSOA ESCOLHE (30/09/2026). O Daniel: "eu poderia ter uma opção que eu escolho a cor". Uma cor só, do
   seletor do navegador (menu da paleta → "Escolher a cor…"), e os tons saem dela: o escuro, o claro, o do tema claro e o
   brilho. O texto sobre ela (--vx-sobre-destaque) é preto ou branco pelo contraste, calculado em vxTema.corPropria —
   com uma cor escura, o quase-preto de sempre ficaria ilegível. No html e no layout, acima do tema de cor escolhido:
   quem escolhe a própria cor escolheu por último. */
html.vx-cor-propria,
html.vx-cor-propria .mud-layout {
  --vx-teal-br: var(--vx-cor-escolhida);
  --vx-teal: color-mix(in srgb, var(--vx-cor-escolhida) 80%, black);
  --vx-teal-soft: color-mix(in srgb, var(--vx-cor-escolhida) 62%, white);
  --vx-teal-glow: color-mix(in srgb, var(--vx-cor-escolhida) 30%, transparent);
  --vx-teal-escuro: color-mix(in srgb, var(--vx-cor-escolhida) 58%, black);
  --vx-sobre-destaque: var(--vx-cor-escolhida-texto);
  --mud-palette-primary: var(--vx-cor-escolhida);
  --mud-palette-primary-rgb: var(--vx-cor-escolhida-rgb);
  --mud-palette-primary-text: var(--vx-cor-escolhida-texto);
  --mud-palette-primary-hover: color-mix(in srgb, var(--vx-cor-escolhida) 12%, transparent);
  --mud-palette-primary-darken: color-mix(in srgb, var(--vx-cor-escolhida) 80%, black);
  --mud-palette-primary-lighten: color-mix(in srgb, var(--vx-cor-escolhida) 70%, white);
  /* o "success" do MudBlazor não: ele pinta também o "salvo com sucesso", e o verde de deu-certo é significado */
}
/* a bolinha do "Escolher a cor…" no menu, antes de escolher: as cores juntas dizem "qualquer uma" */
.vx-menu-tema .bola.cor-livre { background: conic-gradient(#e5484d, #f5a524, #2bd4a0, #2b9cff, #7c5cff, #ff6b9a, #e5484d); }
.vx-menu-tema .item.cor-propria { position: relative; }
.vx-menu-tema .item.cor-propria input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }

/* ====================== SELETOR DE PRODUTOS (criar oferta) ====================== */
.vx-prod-res { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.vx-prod-chip { display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  background: var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); padding:5px 12px 5px 6px; font-size:12px;
  transition: all .15s var(--vx-spring); }
.vx-prod-chip:hover { border-color: var(--vx-teal); transform: translateY(-1px); color: var(--vx-teal-soft); }
.vx-prod-chip .thumb { width:22px; height:22px; border-radius:50%; background-size:cover; background-position:center; flex:0 0 auto; }
.vx-prod-sel { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.vx-prod-selitem { display:flex; align-items:center; gap:10px; font-size:13px; background: var(--vx-surface);
  border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:6px 6px 6px 12px; }

/* MudBlazor overrides — cantos e fonte coerentes */
.mud-button-root { border-radius: calc(11px * var(--vx-raio, 1)) !important; text-transform: none !important; }

/* ───────────────── Documentos imprimíveis (Pedido / Ordem de carregamento) ───────────────── */
.vx-print-root { min-height:100vh; background:#5b6173; padding:0 0 60px; color:#1a1d27; }
.vx-doc-load { color:#fff; text-align:center; padding:80px 20px; font-size:15px; }
.vx-doc-bar { position:sticky; top:0; z-index:5; display:flex; gap:10px; justify-content:center;
  padding:14px; background:rgba(20,22,34,.85); backdrop-filter:blur(8px); }
.vx-doc-btn { border:none; cursor:pointer; font-family:inherit; font-size:14px; font-weight:600;
  padding:10px 20px; border-radius:calc(11px * var(--vx-raio, 1)); color:var(--vx-sobre-destaque, #04110c);
  background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); transition:transform .15s, box-shadow .15s; }
.vx-doc-btn:hover { transform:translateY(-1px); box-shadow:var(--vx-sombra, 0 8px 20px -8px color-mix(in srgb, var(--vx-teal-br) 60%, transparent)); }
.vx-doc-btn.ghost { background:rgba(255,255,255,.1); color:#fff; }

.vx-doc { width:210mm; min-height:297mm; margin:22px auto; background:#fff; padding:10mm 11mm;
  box-shadow:var(--vx-sombra, 0 30px 70px -30px rgba(0,0,0,.6)); box-sizing:border-box; font-size:12px; line-height:1.5; }

.vx-doc-head { display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid #111827; padding-bottom:14px; margin-bottom:18px; }
.vx-doc-brand { display:flex; align-items:center; gap:12px; }
.vx-doc-logo { width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background: radial-gradient(circle at 50% 50%, #fff 0 34%, transparent 35%),
    conic-gradient(from 210deg, #11705a 0 25%, var(--vx-teal) 30%, transparent 55% 100%); }
.vx-doc-co { font-size:24px; font-weight:700; letter-spacing:calc(-1px * var(--vx-tracking, 1)); color:#0f172a; }
.vx-doc-co span { color:var(--vx-teal); }
.vx-doc-co-sub { font-size:12px; color:#6b7280; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }
.vx-doc-co-addr { font-size:11px; color:#6b7280; margin-top:2px; }
.vx-doc-logo-img { width:48px; height:48px; border-radius:calc(8px * var(--vx-raio, 1)); object-fit:contain; flex:0 0 auto; background:#fff; }
.vx-doc-meta { text-align:right; font-size:12px; color:#374151; line-height:1.7; }
.vx-doc-num { font-size:13px; color:#0f172a; }

.vx-doc-party { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.vx-doc-party .lbl, .vx-doc-obs .lbl, .vx-doc-cond .lbl { font-size:10px; letter-spacing:calc(1px * var(--vx-tracking, 1)); color:#9ca3af; font-weight:600; }
.vx-doc-party .val { font-size:15px; font-weight:600; color:#111827; margin-top:2px; }
.vx-doc-party .sub { font-size:11px; color:#6b7280; }

.vx-doc-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:18px; }
.vx-doc-fields .fld span { font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:#9ca3af; font-weight:600; text-transform:var(--vx-caixa, uppercase); }
.vx-doc-fields .blank { border-bottom:1px solid #cbd5e1; height:22px; }

.vx-doc-tbl { width:100%; border-collapse:collapse; margin-bottom:16px; }
.vx-doc-tbl th { background:#0f172a; color:#fff; font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  padding:8px 10px; text-align:left; font-weight:600; }
.vx-doc-tbl td { padding:8px 10px; border-bottom:1px solid #e5e7eb; color:#1f2937; }
.vx-doc-tbl .r { text-align:right; }
.vx-doc-tbl .c { text-align:center; }
.vx-doc-tbl tr.sum td { font-weight:700; background:#f3f4f6; border-bottom:none; }
.vx-doc-chk { display:inline-block; width:14px; height:14px; border:1.5px solid #475569; border-radius:calc(3px * var(--vx-raio, 1)); }

/* Selo do estágio no cabeçalho do documento (o xControl carimba o status) */
.vx-doc-badge { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:calc(4px * var(--vx-raio, 1));
  background:#ecf0f1; color:#0f172a; border:1px solid #dce4ec;
  font-size:9.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }

/* FINANCEIRO: parcelas em cartões, como no PedidoReport do xControl */
.vx-doc-parcelas { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.vx-doc-parc { border:1px solid #e5e7eb; border-left:3px solid var(--vx-teal); border-radius:0 calc(4px * var(--vx-raio, 1)) calc(4px * var(--vx-raio, 1)) 0;
  padding:6px 10px; background:#fbfbfb; min-width:120px; }
.vx-doc-parc b { display:block; font-size:9.5px; color:#6b7280; letter-spacing:calc(.4px * var(--vx-tracking, 1)); }
.vx-doc-parc span { display:block; font-size:11px; color:#374151; }
.vx-doc-parc strong { display:block; font-size:13px; color:#0f172a; }
.vx-doc-parc small { display:block; font-size:9px; color:#9ca3af; }
.vx-doc-totbox .row.desc b { color:#e74c3c; }

/* Aviso legal — pedido NÃO é documento fiscal (o xControl diz isso em letra miúda) */
.vx-doc-legal { margin-top:14px; padding-top:8px; border-top:1px solid #e5e7eb;
  font-size:9px; color:#6b7280; text-align:justify; line-height:1.35; }

/* ── Ordem de carregamento (romaneio de pátio) ── */
.vx-oc-tit { font-size:12px; font-weight:800; text-transform:var(--vx-caixa, uppercase); color:#0f172a;
  border-bottom:2px solid #ecf0f1; margin:14px 0 8px; padding-bottom:3px; }
/* linhas mais altas: é preenchido à mão, no pátio, com a prancheta na mão */
.vx-oc-tbl td { padding:11px 10px; }
.vx-oc-check { display:inline-block; width:20px; height:20px; border:2px solid #334155; border-radius:calc(3px * var(--vx-raio, 1)); }
.vx-oc-etiq { display:inline-flex; align-items:center; justify-content:center; width:100%; height:38px;
  border:1px dashed #94a3b8; border-radius:calc(3px * var(--vx-raio, 1)); font-size:7.5px; letter-spacing:calc(.5px * var(--vx-tracking, 1));
  color:#94a3b8; text-align:center; line-height:1.2; }
.vx-oc-sign { gap:26px; }

.vx-doc-tot { display:flex; justify-content:space-between; gap:24px; margin-bottom:26px; }
.vx-doc-cond { max-width:60%; }
.vx-doc-cond p { margin:4px 0 0; font-size:11px; color:#6b7280; }
.vx-doc-totbox { min-width:210px; }
/* Sozinha na faixa, a caixa de totais ia para a ESQUERDA: o space-between só separa quando há dois
   filhos. Acontece na Ordem de Carregamento, que não tem mais o bloco de observações. */
.vx-doc-tot > :only-child { margin-left:auto; }
.vx-doc-totbox .row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:#374151; }
.vx-doc-totbox .row.total { border-top:2px solid #111827; margin-top:4px; padding-top:10px;
  font-size:18px; font-weight:700; color:#0f172a; }
.vx-doc-totbox .row.total b { color:var(--vx-teal); }

.vx-doc-obs { margin-bottom:26px; }
.vx-doc-obs .obs-lines { height:60px; margin-top:6px;
  background:repeating-linear-gradient(transparent 0 19px, #e5e7eb 19px 20px); }

.vx-doc-sign { display:flex; gap:40px; margin-top:30px; }
.vx-doc-sign.three { gap:26px; }
.vx-doc-sign .sig { flex:1; text-align:center; font-size:11px; color:#6b7280; }
.vx-doc-sign .sig .line { border-top:1px solid #475569; margin-bottom:6px; height:1px; }

.vx-doc-foot { margin-top:26px; padding-top:10px; border-top:1px solid #e5e7eb;
  font-size:10px; color:#9ca3af; text-align:center; }

@media print {
  .vx-print-root { background:#fff !important; padding:0 !important; }
  .no-print, .vx-doc-bar { display:none !important; }
  /* Margem CURTA: os documentos de rocha são densos (uma linha por chapa) e a margem larga
     empurrava cavalete para a página seguinte. 5mm de @page + 6mm de padding = ~11mm úteis,
     acima dos ~5mm que a maioria das impressoras não consegue imprimir. */
  .vx-doc { width:auto; min-height:auto; margin:0; box-shadow:none; padding:6mm 7mm; }
  @page { size:A4; margin:5mm; }
}

/* ───────────────── Responsivo / Mobile ───────────────── */
@media (max-width: 768px) {
  .vx-page { padding: 14px 12px 90px; }

  /* Hero compacto */
  .vx-hero { padding: 18px 16px !important; border-radius: calc(16px * var(--vx-raio, 1)); }
  .vx-hero h1, .vx-hero .mud-typography-h5 { font-size: 19px !important; }
  .vx-hero p, .vx-hero .mud-typography-body2 { font-size: 12.5px !important; }
  .vx-hero-icon { width: 44px; height: 44px; }
  .vx-hero::after { display: none; }

  /* Grids de cards fluidos com gap menor */
  .vx-grid, .vx-gal-grid, .vx-gal-flow, .vx-amb-grid, .vx-pub-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }

  /* Pipeline: uma coluna por vez, com snap horizontal */
  .vx-pipe { padding: 12px; gap: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .vx-col { flex: 0 0 84vw; width: 84vw; scroll-snap-align: center; }

  /* Dock do catálogo vira painel deslizante full-height */
  .vx-dock { position: fixed; top: 56px; right: 0; bottom: 0; width: 90vw !important; max-width: 380px; z-index: 1300; margin: 0; border-radius: 0; }
  .vx-dock.closed { width: 0 !important; }

  /* Linhas de oferta empilham sem cortar */
  .vx-of-row { flex-wrap: wrap; gap: 8px 10px; padding: 12px; }
  /* O flex-wrap acima nao serve de nada sozinho: com flex-basis 0 a soma das bases nunca estoura a
     linha, entao a quebra NUNCA dispara e o texto e' que encolhe. Dar base ao corpo e' o que faz o
     wrap virar realidade. Aqui e' um piso (220px), nao a linha inteira: num tablet ainda cabe tudo
     lado a lado, e so' quebra quando de fato nao cabe. Abaixo de 600px vira 100% (bloco adiante). */
  .vx-of-row > .vx-of-corpo { flex: 1 1 220px; min-width: 0; }
  .vx-of-cli { white-space: normal; }
  .vx-of-val { min-width: auto; }
  .vx-of-id { min-width: auto; }

  /* Passos de integração 1 coluna */
  .vx-int-steps { grid-template-columns: 1fr; gap: 12px; }

  /* Documentos (pedido/carregamento) visualizados na tela */
  .vx-doc { width: auto; min-height: auto; padding: 16px 14px; margin: 12px auto; }
  .vx-doc-party, .vx-doc-fields { grid-template-columns: 1fr; gap: 12px; }
  .vx-doc-head { flex-direction: column; gap: 10px; }
  .vx-doc-meta { text-align: left; }
  .vx-doc-tot { flex-direction: column; gap: 14px; }
  .vx-doc-cond { max-width: 100%; }
  .vx-doc-tbl { font-size: 11px; }
  .vx-doc-tbl th, .vx-doc-tbl td { padding: 6px 6px; }

  /* Diálogos nunca estouram a tela e sem scroll horizontal */
  .mud-dialog { max-width: 96vw !important; margin: 8px !important; }
  .mud-dialog-content { overflow-x: hidden !important; }

  /* Appbar: esconde a pill de ERP pra caber marca + ações */
  .vx-appbar .vx-erp-pill { display: none; }
  .vx-brand { font-size: 17px; }
}

@media (max-width: 460px) {
  /* `.vx-grid` SAIU DAQUI. Ele carrega os cartoes que tem NOME dentro — cliente, relatorio, lista.
     Em duas colunas de 191px (um Pixel de 412px) o nome virava "18.946.35…" e o botao "Criar oferta"
     quebrava em duas linhas: a tela ficava cheia e ilegivel. Um telefone de 390px mostrava uma
     coluna inteira e um de 412px mostrava duas cortadas — o mesmo app com duas caras.
     AMBIENTES E PUBLICACAO continuam com duas: ali quem manda e a foto, e o texto e legenda curta.
     A GALERIA SAIU DAQUI TAMBEM — ver o bloco de 520px no fim do arquivo. */
  .vx-amb-grid, .vx-pub-grid { grid-template-columns: 1fr 1fr; }
  .vx-grid { grid-template-columns: 1fr; }
  .vx-hero h1, .vx-hero .mud-typography-h5 { font-size: 17px !important; }
}

/* ───────────────── Comparador de chapas ───────────────── */
.vx-cmp { display: grid; gap: 12px; }
.vx-cmp-col { background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1)); padding: 10px; }
.vx-cmp-img { height: 120px; border-radius: calc(8px * var(--vx-raio, 1)); background-size: cover; background-position: center; position: relative; margin-bottom: 10px; }
.vx-cmp-name { font-size: 13px; font-weight: 500; margin-bottom: 8px; min-height: 34px; line-height: 1.3; }
.vx-cmp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; padding: 5px 0; border-top: 1px solid var(--vx-border); }
.vx-cmp-row span { color: var(--vx-faint); }
.vx-cmp-row b { font-weight: 500; }

/* ───────────────── Tema CLARO (html.vx-light) ───────────────── */
:root.vx-light {
  --vx-bg:        #F2F5F9;
  --vx-bg-2:      #E9EDF3;
  --vx-surface:   #FFFFFF;
  --vx-surface-2: #F4F6FA;
  --vx-surface-3: #EAEEF4;
  --vx-border:    rgba(15,23,42,.10);
  --vx-border-2:  rgba(15,23,42,.16);

  --vx-teal:      #138A63;
  --vx-teal-br:   #16A877;
  --vx-teal-soft: #0E7E5B;
  --vx-teal-glow: rgba(20,138,99,.20);

  --vx-text:      #1A1D27;
  --vx-muted:     rgba(26,29,39,.62);
  --vx-faint:     rgba(26,29,39,.40);
}
:root.vx-light, :root.vx-light body { background: linear-gradient(180deg, #F7FAFC 0%, #EEF2F7 100%) fixed; color: var(--vx-text); }
:root.vx-light *::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); }
:root.vx-light *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.30); }

/* Superfícies que eram hardcoded escuras */
:root.vx-light .vx-appbar { background: rgba(255,255,255,.82) !important; border-bottom: 1px solid rgba(15,23,42,.08); }
:root.vx-light .vx-col { background: rgba(15,23,42,.028); border: 1px solid rgba(15,23,42,.06); }
:root.vx-light .vx-col-h .badge { background: rgba(15,23,42,.07); }
:root.vx-light .vx-deal-edit:hover { background: rgba(15,23,42,.07); }
:root.vx-light .vx-dock-foot { background: rgba(255,255,255,.9); }
:root.vx-light .vx-floatbar { background: rgba(255,255,255,.94); border: 1px solid rgba(15,23,42,.12);
  box-shadow: var(--vx-sombra, 0 14px 40px -16px rgba(15,23,42,.28)); color: var(--vx-text); }
:root.vx-light .vx-card { box-shadow: var(--vx-sombra, 0 8px 26px -18px rgba(15,23,42,.30)); }

/* chips selecionados: texto branco no teal mais escuro do modo claro */
:root.vx-light .vx-chip.on, :root.vx-light .vx-amb-chip.on { color: #fff; }
/* badge de ambientes na thumb continua escura — ok sobre a imagem */

/* ── O claro precisa de PROFUNDIDADE, não de menos cor ─────────────────────────────────────
   No escuro a hierarquia vem da luz: o card é mais claro que o fundo e pronto. No claro isso
   se inverte e some — card branco sobre coluna quase branca (.028) não separa nada, e a tela
   inteira vira um borrão cinza. Aqui a hierarquia passa a vir de SOMBRA e de uma coluna com
   tinta de verdade. */
:root.vx-light .vx-col { background: rgba(15,23,42,.055); border: 1px solid rgba(15,23,42,.07); }
:root.vx-light .vx-pedido-card,
:root.vx-light .vx-card { background: #fff; border-color: rgba(15,23,42,.09);
  box-shadow: var(--vx-sombra, 0 1px 2px rgba(15,23,42,.05), 0 6px 16px -10px rgba(15,23,42,.22)); }
:root.vx-light .vx-pedido-card:hover {
  border-color: rgba(15,23,42,.16);
  box-shadow: var(--vx-sombra, 0 2px 4px rgba(15,23,42,.06), 0 16px 30px -14px rgba(15,23,42,.30)); }

/* Fundos translúcidos BRANCOS viram invisíveis sobre branco. Estes eram desenhados para o
   escuro e no claro sumiam junto com o texto que carregavam. */
:root.vx-light .vx-pc-dias { background: rgba(15,23,42,.06); }
:root.vx-light .vx-pc-meta { border-top-color: rgba(15,23,42,.10); }

/* Texto sobre o teal: no claro o teal é escuro (var(--vx-teal-escuro, #138A63)), então quem lê bem é o BRANCO —
   o inverso do escuro, onde o teal é menta e pede texto quase preto. */
:root.vx-light .vx-pc-novo { color:#fff; }
:root.vx-light .vx-pill.on, :root.vx-light .vx-pp-pick.on { color:#fff; }

/* CONTRASTE GARANTIDO NO BOTÃO CHEIO.
   Estava preso a Style="color:var(--vx-sobre-destaque, #04110c)" inline, repetido em cada tela — some numa e fica
   ilegível na outra ("Criar oferta" apagado). Regra única, e cada tema recebe o texto que
   de fato lê sobre o seu verde. */
.mud-button-filled.mud-button-filled-success,
.mud-button-filled.mud-button-filled-success .mud-button-label { color:var(--vx-sobre-destaque, #04110c); font-weight:600; }
:root.vx-light .mud-button-filled.mud-button-filled-success,
:root.vx-light .mud-button-filled.mud-button-filled-success .mud-button-label { color:#fff; }
.mud-button-filled.mud-button-filled-success .mud-icon-root { color: inherit; }

/* ───────────────── Módulo de Pedidos (board + drawer) ───────────────── */
.vx-pedido-card { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1));
  padding:11px 13px; cursor:pointer; transition: transform .14s var(--vx-spring), border-color .14s, box-shadow .14s; }
.vx-pedido-card:hover { transform: translateY(-2px); border-color: var(--vx-border-2); box-shadow: var(--vx-sombra, 0 12px 26px -16px rgba(0,0,0,.4)); }
.vx-pc-top { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.vx-pc-num { font-size:12px; font-weight:700; color: var(--vx-teal-soft); }
/* margin-left:auto no lugar do space-between: o chip "novo" entra como 3º filho e precisa
   colar no número, senão o flex joga ele pro meio do card. */
.vx-pc-dias { font-size:10px; color: var(--vx-muted); background: rgba(255,255,255,.06); padding:1px 7px; border-radius:var(--vx-pill, 999px);
  margin-left:auto; flex:0 0 auto; }
/* Card recém-criado: o vendedor gera a oferta e precisa ACHAR o card no board. Pulsa nas 1as 24h. */
.vx-pc-novo { font-size:9px; font-weight:800; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:#04140e;
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br))); padding:1.5px 6px; border-radius:var(--vx-pill, 999px);
  flex:0 0 auto; box-shadow: var(--vx-sombra, 0 0 14px -2px var(--vx-teal-glow)); animation: vx-novo-pulse 1.9s ease-in-out infinite; }
@keyframes vx-novo-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@media (prefers-reduced-motion: reduce) { .vx-pc-novo { animation:none; } }
/* Rodapé de datas: criado quando + parado há quanto tempo NESTA etapa (o badge de cima é o pipeline). */
.vx-pc-meta { font-size:10px; color: var(--vx-faint); margin-top:7px; padding-top:6px; border-top:1px dashed var(--vx-border); }
.vx-pc-cli { font-size:13px; font-weight:500; line-height:1.25; }
.vx-pc-sub { font-size:11px; color: var(--vx-faint); margin-top:1px; }
.vx-pc-foot { display:flex; align-items:baseline; justify-content:space-between; margin-top:8px; }
.vx-pc-peso { font-size:11px; color: var(--vx-muted); }
.vx-pc-val { font-size:14px; font-weight:500; color: var(--vx-teal-soft); }
.vx-pc-foot2 { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.vx-pc-vend { font-size:11px; color: var(--vx-faint); }
.vx-pc-pend { font-size:10px; font-weight:600; color: var(--vx-morno); }

/* Pré-cliente (prospect captado) — card sinalizado diferente até o financeiro liberar */
.vx-pedido-card.vx-pc-pre { background:linear-gradient(180deg, rgba(168,85,247,.10), var(--vx-surface)); border-color:rgba(168,85,247,.30); }
.vx-pc-preflag { display:flex; align-items:center; gap:6px; margin-top:6px; font-size:10.5px; font-weight:600; color:#c084fc; }
.vx-vtx-mini { width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%, #0a0f1a 0 26%, #a855f7 30% 52%, #c084fc 56% 72%, transparent 76%);
  box-shadow:var(--vx-sombra, 0 0 7px rgba(168,85,247,.8)); }
/* Discretos ("mais discreto os botões"): texto pequeno, sem emoji, uma linha, borda fina, sem preenchimento. */
.vx-pc-liberar { border:1px solid rgba(168,85,247,.45); background:transparent; color:#c9a8f5;
  font-size:10px; font-weight:600; line-height:1; padding:3px 8px; border-radius:calc(6px * var(--vx-raio, 1)); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.vx-pc-liberar:hover { background:rgba(168,85,247,.16); color:#e9d5ff; }
/* Ofertar direto do card roxo: mesma pastilha do Liberar, em teal (ação do vendedor, não do financeiro). */
.vx-pc-acts { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; }
.vx-pc-ofertar { border:1px solid color-mix(in srgb, var(--vx-teal) 40%, transparent); background:transparent; color:var(--vx-teal-soft);
  font-size:10px; font-weight:600; line-height:1; padding:3px 8px; border-radius:calc(6px * var(--vx-raio, 1)); cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; }
.vx-pc-ofertar:hover { background:color-mix(in srgb, var(--vx-teal) 16%, transparent); color:#fff; }
.vx-pc-foot2 .vx-pc-vend { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
/* Aviso no formulário da oferta quando o destinatário é pré-cliente (vem do card roxo). */
.vx-pre-aviso { display:flex; align-items:flex-start; gap:8px; margin-top:8px; padding:8px 12px; border-radius:calc(10px * var(--vx-raio, 1)); font-size:12px; line-height:1.4;
  color:#e9d5ff; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.4); }
.vx-pre-aviso b { color:#f3e8ff; }

/* diálogo de liberação do pré-cliente */
.vx-lib-nome { font-size:16px; font-weight:600; color:var(--vx-text); }
.vx-lib-sub { font-size:12px; color:var(--vx-faint); margin-bottom:6px; }
.vx-lib-load { display:flex; align-items:center; gap:10px; padding:14px 0; font-size:13px; color:var(--vx-muted); }
.vx-lib-kv { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--vx-border); font-size:13px; }
.vx-lib-kv span { color:var(--vx-faint); flex:0 0 auto; }
.vx-lib-kv b { color:var(--vx-text); text-align:right; }

.vx-drawer-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1290; animation: vx-fade .2s ease; }
/* LARGURA: 560px, e o número saiu de 440 por medição, não por gosto. A linha do cavalete
   ("6 chapas · 38.3 m² · 3,254 Kg bruto · bloco 005454") estourava 40px em 440, e a reticência
   comia o fim do PESO assim que o preço ganhou os centavos que o cliente pediu — as duas coisas
   brigando pelo mesmo espaço. Alargar mostra as duas, que é o que se queria desde o começo.
   O max-width:94vw continua segurando em tela estreita, e abaixo de 768px vira tela cheia. */
.vx-pedido-drawer { position:fixed; top:0; right:0; bottom:0; width:560px; max-width:94vw; z-index:1300;
  background: var(--vx-bg-2); border-left:1px solid var(--vx-border); display:flex; flex-direction:column;
  box-shadow: var(--vx-sombra, -24px 0 60px -30px rgba(0,0,0,.7)); animation: vx-slidein .28s var(--vx-spring); }
@keyframes vx-slidein { from { transform: translateX(40px); opacity:.4; } to { transform:none; opacity:1; } }
.vx-pd-busy { position:sticky; top:0; z-index:5; padding:8px 18px 6px; background:var(--vx-panel,#12161c);
  border-bottom:1px solid rgba(255,255,255,.06); }
.vx-pd-busy span { display:block; margin-top:6px; font-size:12px; color:var(--vx-muted); }

/* DUAS FAIXAS: numero+etapa+acoes em cima, nome embaixo com a largura inteira. Como colunas, o
   nome dividia o espaco com o chip e os tres icones e quebrava em tres linhas. */
.vx-pd-head { display:block; padding:14px 18px 16px;
  border-bottom:1px solid var(--vx-border); background: var(--vx-surface); }
.vx-pd-head-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vx-pd-num { font-size:13px; font-weight:700; color: var(--vx-teal-soft); }

.vx-pd-stat { font-size:11px; font-weight:700; color:var(--vx-sobre-destaque, #04110c); padding:3px 10px; border-radius:var(--vx-pill, 999px); white-space:nowrap; }
.vx-pd-body { padding:16px 18px; overflow-y:auto; flex:1; }
/* Faixa de documentos do pedido (Invoice / Ordem de carregamento / Proforma / Packing List) */
/* AS TRES FILAS DE ACAO DO DRAWER (concluido, documentos, anexos) usam esta mesma caixa, e o
   rotulo ocupa a LINHA INTEIRA em vez de dividi-la com os chips. Inline, ele empurrava a primeira
   pilula e as seguintes quebravam desalinhadas — cada secao comecava num ponto diferente, e a
   coluna inteira ficava irregular. Com o rotulo em cima, as tres filas alinham na mesma margem e
   a fila cresce sem mexer no titulo. */
.vx-pd-docs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.vx-pd-docs .l { flex:0 0 100%; font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  color: var(--vx-faint); margin:0 0 -2px; }
.vx-pd-doc { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500;
  padding:5px 11px; border-radius:var(--vx-pill, 999px); text-decoration:none; color: var(--vx-text);
  background: var(--vx-surface); border:1px solid var(--vx-border); transition:.15s; }
.vx-pd-doc:hover { border-color: var(--vx-teal); color: var(--vx-teal-soft); background: var(--vx-surface-2); }
/* ── anexos do pedido: mesma linguagem dos Documentos logo acima ──
   Cada anexo é uma pílula com nome, tamanho e o × de quem pode tirar. O nome trunca em vez de
   quebrar a linha: nome de arquivo vindo de celular é longo e não vale empurrar o resto. */
.vx-pd-anexos { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
.vx-pd-anexos .l { flex:0 0 100%; font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  color:var(--vx-faint); margin:0 0 -2px; }
/* "nada anexado ainda" fica DEPOIS do botao e em tom baixo: e estado, nao instrucao — quem chega
   aqui ja viu o botao, e a frase so responde "tem algo?" sem competir com ele. */
.vx-pd-anexos .vazio { font-size:11.5px; color:var(--vx-faint); font-style:italic; }
.vx-pd-anexo { display:inline-flex; align-items:center; gap:2px; max-width:100%; }
.vx-pd-anexo > a { display:inline-flex; align-items:center; gap:5px; min-width:0; max-width:280px;
  font-size:12px; font-weight:500; padding:5px 11px; border-radius:var(--vx-pill, 999px); text-decoration:none;
  color:var(--vx-text); background:var(--vx-surface); border:1px solid var(--vx-border); transition:.15s; }
.vx-pd-anexo > a:hover { border-color:var(--vx-teal); color:var(--vx-teal-soft); background:var(--vx-surface-2); }
.vx-pd-anexo .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.vx-pd-anexo .t { color:var(--vx-faint); font-size:10.5px; flex:0 0 auto; }
.vx-pd-anexo .x { border:none; background:none; color:var(--vx-faint); font-size:16px; line-height:1;
  padding:2px 4px; cursor:pointer; border-radius:calc(6px * var(--vx-raio, 1)); }
.vx-pd-anexo .x:hover { color:var(--vx-erro,#ef4444); background:var(--vx-surface-2); }
/* o "anexar" é ação, não link: pontilhado o separa da fila de documentos que só abrem */
.vx-pd-doc.add { cursor:pointer; border-style:dashed; color:var(--vx-muted); }
.vx-pd-doc.add:hover { border-style:solid; border-color:var(--vx-teal); color:var(--vx-teal-soft); }
/* enquanto sobe: sem cursor de clique e sem hover, porque um segundo clique nao faz nada */
.vx-pd-doc.add.busy { cursor:default; opacity:.7; border-style:solid; pointer-events:none; }

.vx-pd-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:14px; }
.vx-pd-grid .l, .vx-pd-obs .l { display:block; font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-faint); margin-bottom:2px; }
/* A MENSAGEM DA PROPOSTA e' HTML de verdade (o cliente pediu negrito, fonte e tamanho) e vem
   sanitizada da gravacao. Aqui ela so' precisa caber: teto de altura com rolagem propria, porque
   uma carta de venda inteira empurraria itens, historico e tudo mais para fora da vista. */
.vx-pd-msg { max-height:230px; overflow-y:auto; line-height:1.5; margin-bottom:14px; }
.vx-pd-msg p { margin:0 0 8px; }
.vx-pd-msg :is(h1,h2,h3) { font-size:14px; margin:0 0 6px; }
.vx-pd-msg img { max-width:100%; height:auto; }
.vx-pd-grid b { font-size:13px; font-weight:500; }
.vx-pd-obs { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:10px 12px; font-size:13px; margin-bottom:6px; }
.vx-pd-sec { font-size:12px; font-weight:600; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color: var(--vx-muted);
  margin:18px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--vx-border); }
.vx-pd-empty { font-size:12.5px; color: var(--vx-faint); padding:4px 0 6px; }
.vx-busca-vazia { margin-top:10px; padding:11px 14px; border-radius:calc(10px * var(--vx-raio, 1)); background:rgba(201,162,39,.10); border:1px solid rgba(201,162,39,.32); color:#e8d9a0; font-size:13px; line-height:1.45; }

/* Custo & margem (simulador xControl) */
.vx-margem-card { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:12px 14px; margin-top:6px; }
.vx-margem-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.vx-margem-kpis > div { display:flex; flex-direction:column; gap:2px; }
.vx-margem-kpis .l { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color: var(--vx-muted); }
.vx-margem-kpis .v { font-size:15px; font-weight:700; color: var(--vx-text); }
.vx-margem-kpis .v.big { font-size:20px; font-weight:800; }
.vx-margem-warn { margin-top:10px; font-size:11.5px; color:#f59e0b; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:calc(8px * var(--vx-raio, 1)); padding:6px 9px; }
/* O MESMO BLOCO, quando a notícia é boa: a margem do pedido em dólar foi calculada porque a cotação
   está travada. Mesma caixa, cor de acerto — âmbar ali diria "confira", e não há o que conferir. */
.vx-margem-warn.ok { color:var(--vx-teal-soft); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border-color:color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
@media (max-width:540px){ .vx-margem-kpis { grid-template-columns:repeat(2,1fr); } }
.vx-semaforo { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1.5px solid; border-radius:var(--vx-pill, 999px);
  font-size:13px; font-weight:600; color: var(--vx-text); background: var(--vx-surface); }
.vx-semaforo .dot { width:13px; height:13px; border-radius:50%; flex:0 0 auto; box-shadow:var(--vx-sombra, 0 0 8px currentColor); }
/* Comparativo MI × ME */
.vx-margem-dual { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vx-margem-dual .col { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:10px 12px; background:rgba(255,255,255,.02); }
.vx-margem-dual .col.ativo { border-color: var(--vx-teal-br); box-shadow:0 0 0 1px var(--vx-teal-br) inset; }
.vx-margem-dual .hd { font-size:11px; font-weight:700; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color: var(--vx-muted); margin-bottom:8px; }
.vx-margem-dual .kv { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:3px; }
.vx-margem-dual .kv span { font-size:11.5px; color: var(--vx-muted); }
.vx-margem-dual .kv b { font-size:13.5px; font-weight:700; color: var(--vx-text); }
.vx-margem-dual .kv b.big { font-size:18px; font-weight:800; }
@media (max-width:540px){ .vx-margem-dual { grid-template-columns:1fr; } }

/* ── Ação governada do pedido (avançar/aprovar via diálogo) ── */
.vx-pd-acao { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:2px 0 14px; }
.vx-pd-btn { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:calc(11px * var(--vx-raio, 1)); border:none; cursor:pointer; font-size:13.5px; font-weight:700; transition:.15s; }
.vx-pd-btn.ok { background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); box-shadow:var(--vx-sombra, 0 10px 26px -14px var(--vx-teal-glow)); }
.vx-pd-btn.ok:hover { transform:translateY(-1px); }
.vx-pd-btn.no { background:rgba(255,107,107,.12); color:#ff8585; border:1px solid rgba(255,107,107,.4); }
.vx-pd-btn.no:hover { background:rgba(255,107,107,.2); }
.vx-pd-btn.obs { background:transparent; color:var(--vx-muted); border:1px solid var(--vx-border); padding:10px 12px; }
.vx-pd-btn.obs:hover { color:var(--vx-text); border-color:var(--vx-teal); }
.vx-pd-acao-hint { font-size:13px; color:var(--vx-muted); }
/* aviso de pedido travado: o mesmo texto do tooltip, visível no celular */
.vx-pd-trava { display:flex; align-items:flex-start; gap:6px; font-size:12.5px; line-height:1.45;
  color:#f0b429; background:rgba(240,180,41,.10); border:1px solid rgba(240,180,41,.24);
  border-radius:calc(10px * var(--vx-raio, 1)); padding:9px 11px; margin:0 0 12px; }
/* legenda do selo de situação do ERP: explica o que o status significa e o que NÃO significa */
.vx-pd-erp-nota { font-size:11.5px; line-height:1.45; color:var(--vx-muted); opacity:.85;
                  margin:4px 0 2px; padding-left:19px; }
.vx-pend-hint { font-size:11.5px; color:var(--vx-faint); margin-top:7px; font-style:italic; }
.vx-acao-flux { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 14px; }
.vx-acao-flux .de, .vx-acao-flux .para { font-size:12px; font-weight:700; padding:4px 11px; border-radius:var(--vx-pill, 999px); color:#fff; }
.vx-acao-lbl { display:block; font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin-bottom:5px; }
/* timeline de eventos */
.vx-evt { display:flex; gap:10px; padding:2px 0; }
.vx-evt-dot { flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:5px; background:var(--vx-muted); position:relative; }
.vx-evt-dot.ok { background:var(--vx-teal-br); } .vx-evt-dot.no { background:#ff6b6b; } .vx-evt-dot.mv { background:#6ea8ff; } .vx-evt-dot.obs { background:#c9a227; }
.vx-evt:not(:last-child) .vx-evt-dot::after { content:""; position:absolute; left:50%; top:11px; transform:translateX(-50%); width:1px; height:calc(100% + 8px); background:var(--vx-border); }
.vx-evt-c { flex:1; min-width:0; padding-bottom:11px; }
.vx-evt-h { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.vx-evt-ac { font-size:13px; font-weight:600; color:var(--vx-text); }
.vx-evt-dt { font-size:11px; color:var(--vx-faint); white-space:nowrap; }
.vx-evt-obs { font-size:12.5px; color:var(--vx-muted); margin-top:3px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); padding:7px 10px; }
.vx-col-vazia { text-align:center; color:var(--vx-faint); font-size:12px; padding:14px 0; opacity:.5; }

.vx-pend { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); padding:11px 13px; margin-bottom:8px; }
.vx-pend-h { display:flex; align-items:center; justify-content:space-between; }
.vx-pend-tp { font-size:13px; font-weight:500; }
.vx-pend-st { font-size:10px; font-weight:700; padding:2px 9px; border-radius:var(--vx-pill, 999px); }
.vx-pend-st.ok { background: color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color: var(--vx-teal-br); }
.vx-pend-st.err { background: rgba(255,107,107,.16); color: var(--vx-frio); }
.vx-pend-st.pend { background: rgba(242,180,65,.16); color: var(--vx-morno); }
.vx-pend-tx { font-size:12.5px; color: var(--vx-muted); margin-top:4px; }
.vx-pend-val { font-size:13px; margin-top:4px; }
.vx-pend-mot { font-size:12px; color: var(--vx-frio); margin-top:4px; }

.vx-pd-item { display:flex; align-items:center; gap:11px; padding:7px 0; border-bottom:1px solid var(--vx-border); }
.vx-pd-thumb { width:46px; height:46px; border-radius:calc(9px * var(--vx-raio, 1)); flex:0 0 auto; background-size:cover; background-position:center; }
.vx-pd-it-m { font-size:13px; font-weight:500; }
.vx-pd-it-d { font-size:11px; color: var(--vx-faint); }
/* Truncar SÓ no cabeçalho do cavalete, que é onde o material e a linha de peso entraram e podem
   empurrar o valor preso à direita. As mesmas classes servem a linha de cada chapa, e lá a linha
   de rastreio não tem tooltip para recuperar o que fosse cortado — truncar as duas de uma vez
   escondia informação que antes aparecia inteira. */
.vx-pd-item.cav .vx-pd-it-m,
.vx-pd-item.cav .vx-pd-it-n,
.vx-pd-item.cav .vx-pd-it-ch,
.vx-pd-item.cav .vx-pd-it-d { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* O nome da pedra no cabeçalho do cavalete do drawer, em letra de referência. A LINHA PRÓPRIA embaixo
   das chapas só aparece quando o cavalete MISTURA pedras (o pátio remonta): com uma pedra só, o nome
   já está na linha do título e ela o repetiria palavra por palavra. Linha própria para nome comprido
   cortar o NOME e não os números (chapas, m², Kg) que decidem contêiner. Sempre com title, para o que
   for cortado continuar recuperável. */
.vx-pd-it-n { font-size:11px; color:var(--vx-muted); }
/* QUEM ENCABEÇA O CAVALETE NO DRAWER segue a forma de exibição da Galeria (13/09/2026). Material em
   destaque: a pedra no <b> e o número atrás, com o .vx-mat-cav da Galeria. Grade e Cavalete em destaque
   (o padrão): "Cavalete N" no <b> e a pedra atrás, com o .vx-pd-it-n — a mesma letra com que ela vinha
   na linha de baixo antes de subir para o título. A linha QUEBRA em vez de cortar: a base de cada um é
   o próprio texto, então quando os dois não cabem (telefone) o segundo desce, e só vira reticência o
   que nem sozinho couber — a armadilha do flex de base 0, que nunca deixa o wrap acontecer, fica de fora. */
.vx-pd-item.cav .vx-pd-it-m.nome { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; }
.vx-pd-item.cav .vx-pd-it-m.nome > b { font-weight:600; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.vx-pd-item.cav .vx-pd-it-m.nome > .vx-pd-it-n { font-weight:400; min-width:0; max-width:100%; }
/* A relação de chapas do cavalete no drawer. Mesmo tom que a Galeria e a tela de edição usam para
   ela — é o mesmo dado, e quem circula entre as três telas reconhece pela cor antes de ler. */
.vx-pd-it-ch { font-size:11px; color:var(--vx-teal-soft); opacity:.9; }
.vx-pd-it-p { font-size:13px; font-weight:500; color: var(--vx-teal-soft); }

/* claro */
:root.vx-light .vx-pedido-drawer { background:#fff; }
:root.vx-light .vx-pc-dias { background: rgba(15,23,42,.06); }
:root.vx-light .vx-pedido-card:hover { box-shadow:var(--vx-sombra, 0 12px 26px -16px rgba(15,23,42,.25)); }

@media (max-width:768px){ .vx-pedido-drawer { width:100vw; max-width:100vw; } .vx-pd-grid { grid-template-columns:1fr; } }

/* ───────────────── Mapeamento de campos (de-para) ───────────────── */
.vx-mapgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.vx-maprow { display:grid; grid-template-columns:128px 1fr; gap:8px; align-items:center; }
.vx-maprow .vx-input { height:38px; font-size:13px; }
.vx-mapk { font-size:12px; color:var(--vx-muted); font-family:ui-monospace,Consolas,monospace; }
@media (max-width:768px){ .vx-mapgrid{ grid-template-columns:1fr; } }

/* ───────────────── FAB + bottom-sheet (novo) ───────────────── */
.vx-fab { position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; z-index:1280;
  background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); display:grid; place-items:center;
  box-shadow:var(--vx-sombra, 0 14px 30px -10px var(--vx-teal-glow)); transition:transform .15s var(--vx-spring); }
.vx-fab:hover { transform:translateY(-2px) scale(1.05); }
.vx-fab:active { transform:scale(.95); }
.vx-sheet-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1295; animation:vx-fade .2s ease; }
.vx-sheet { position:fixed; left:0; right:0; bottom:0; z-index:1300; max-width:560px; margin:0 auto;
  background:var(--vx-bg-2); border-top:1px solid var(--vx-border); border-radius:calc(18px * var(--vx-raio, 1)) calc(18px * var(--vx-raio, 1)) 0 0;
  padding:10px 14px 24px; box-shadow:var(--vx-sombra, 0 -20px 50px -20px rgba(0,0,0,.7)); animation:vx-sheetup .28s var(--vx-spring); }
@keyframes vx-sheetup { from { transform:translateY(100%); } to { transform:none; } }
.vx-sheet-h { text-align:center; font-size:12px; color:var(--vx-muted); padding:10px 0 12px; position:relative; }
.vx-sheet-h::before { content:""; position:absolute; top:4px; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:var(--vx-pill, 99px); background:var(--vx-border-2); }
.vx-sheet-opt { display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:calc(12px * var(--vx-raio, 1)); cursor:pointer; transition:background .15s; font-size:15px; font-weight:500; }
.vx-sheet-opt:hover { background:var(--vx-surface); }
.vx-sheet-opt small { display:block; font-size:12px; color:var(--vx-faint); font-weight:400; margin-top:1px; }
:root.vx-light .vx-sheet { background:#fff; }

/* ───────────────── Bloqueio de licença ───────────────── */
.vx-licblock { min-height:72vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:40px; }
.vx-licblock h2 { font-size:22px; font-weight:500; margin:0; text-transform:capitalize; }
.vx-licblock p { color:var(--vx-muted); margin:0 0 10px; max-width:440px; line-height:1.6; }

/* ───────────────── Bottom-sheet de edição de Pedido ───────────────── */
.vx-editsheet-scrim { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1305; animation:vx-fade .2s ease; }
.vx-editsheet { position:fixed; left:0; right:0; bottom:0; top:42px; z-index:1310; max-width:1040px; margin:0 auto;
  background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(18px * var(--vx-raio, 1)) calc(18px * var(--vx-raio, 1)) 0 0; display:flex; flex-direction:column;
  box-shadow:var(--vx-sombra, 0 -26px 60px -20px rgba(0,0,0,.7)); animation:vx-sheetup .3s var(--vx-spring); overflow:hidden; }
.vx-es-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 16px; border-bottom:1px solid var(--vx-border); background:var(--vx-surface); }
.vx-es-title { text-align:center; font-size:15px; font-weight:500; line-height:1.2; }
.vx-es-title span { display:block; font-size:11px; color:var(--vx-muted); font-weight:400; margin-top:1px; }
.vx-es-body { padding:16px 18px; overflow-y:auto; flex:1; }
/* CADASTRO DE CLIENTE: a mesma folha, mais estreita. Sao nove campos curtos -- os 1040px do
   editor de pedido espalhariam tres colunas de campo com meia tela de sobra, e o olho perde a
   coluna. O formulario em si e' o CadastroClienteManual, o mesmo que a Prospeccao usa. */
.vx-cli-sheet { max-width:820px; }
.vx-es-sec { font-size:12px; font-weight:600; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--vx-border); }
/* Cabecalho de secao que RECOLHE o proprio bloco. A area de clique e a linha inteira (o alvo de
   44px que o dedo alcanca), e o resumo ao lado do titulo continua legivel fechado -- e ele que
   responde "o que vai escrito na oferta" sem precisar abrir. */
.vx-es-sec.vx-sec-dobra { cursor:pointer; user-select:none; display:flex; align-items:center; gap:4px; min-height:26px; }
.vx-es-sec.vx-sec-dobra:hover { color:var(--vx-teal-soft); }
/* No pedido o titulo que recolhe e' um <button> (Exportacao, 13/09/2026): Enter e espaco vem de
   graca e o espaco nao rola a folha. Tira so o que o navegador poe em todo botao -- fundo, borda,
   fonte, largura do conteudo, texto centrado -- e devolve a linha de baixo do .vx-es-sec, que o
   border:0 levaria junto. O contorno de foco fica: e' por ele que o teclado se acha. */
button.vx-es-sec.vx-sec-dobra { width:100%; background:none; border:0; border-bottom:1px solid var(--vx-border);
  border-radius:0; padding:0 0 6px; font-family:inherit; line-height:inherit; text-align:left; }
/* ── PASSO A PASSO da Nova oferta ── */
.vx-es-acts { display:flex; align-items:center; gap:10px; }
.vx-guia-toggle { background:none; border:1px dashed var(--vx-border); border-radius:var(--vx-pill, 999px); color:var(--vx-muted); font:inherit; font-size:11.5px;
  padding:5px 11px; cursor:pointer; white-space:nowrap; }
.vx-guia-toggle:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-passos { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:2px 0 6px; }
.vx-passos button { display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; text-align:left;
  background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:9px 11px; cursor:pointer; color:var(--vx-muted); font:inherit; min-width:0; }
.vx-passos button i { grid-row:1 / span 2; width:26px; height:26px; border-radius:50%; border:1px solid var(--vx-border); display:flex; align-items:center; justify-content:center;
  font-style:normal; font-weight:700; font-size:12.5px; }
.vx-passos button span { font-size:13px; font-weight:600; color:var(--vx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-passos button small { font-size:11px; color:var(--vx-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-passos button.on { border-color:var(--vx-teal); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-passos button.on i { background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); border-color:var(--vx-teal); }
.vx-passos button.feito i { color:var(--vx-teal-br); border-color:var(--vx-teal); }
.vx-passo-dica { font-size:12.5px; color:var(--vx-morno); background:rgba(224,179,74,.08); border:1px solid rgba(224,179,74,.3); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 12px; margin:4px 0 2px; }
.vx-passos-nav { display:flex; justify-content:space-between; gap:10px; margin:22px 0 6px; padding-top:14px; border-top:1px solid var(--vx-border); }
.vx-passos-nav button { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); color:var(--vx-text); font:inherit; font-size:13px; padding:9px 16px; cursor:pointer; }
.vx-passos-nav button.pri { border-color:var(--vx-teal); background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-br); font-weight:600; }
.vx-passos-nav button:disabled { opacity:.4; cursor:default; }
@media (max-width:640px) { .vx-passos { grid-template-columns:repeat(2, minmax(0,1fr)); } .vx-passos button small { display:none; } }
/* ── NARRAÇÃO DA PEDRA ── botão no imersivo (o cliente toca) */
.vx-cine-narr { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.vx-cine-narrar { display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28);
  color:#fff; border-radius:var(--vx-pill, 999px); padding:8px 18px 8px 9px; font:inherit; font-size:14px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s, border-color .2s; }
.vx-cine-narrar .ic { width:30px; height:30px; border-radius:50%; background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); display:flex; align-items:center; justify-content:center; font-size:12px; }
.vx-cine-narrar:hover, .vx-cine-narrar.on { background:color-mix(in srgb, var(--vx-teal-br) 18%, transparent); border-color:var(--vx-teal); }
.vx-cine-narrar.on .ic { animation:vx-narr-pulse 1.2s ease-in-out infinite; }
@keyframes vx-narr-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.14); } }
/* editor: narração por material */
.vx-narr { margin:10px 0 12px; }
.vx-narr-mat { border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:10px 12px; margin-top:8px; background:var(--vx-surface); }
.vx-narr-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.vx-narr-txt { width:100%; background:var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); color:var(--vx-text);
  font:inherit; font-size:13px; line-height:1.5; padding:8px 10px; resize:vertical; outline:none; box-sizing:border-box; }
.vx-narr-txt:focus { border-color:var(--vx-teal); }
.vx-narr-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.vx-narr-hint { font-size:11.5px; color:var(--vx-faint); }

/* ── CARTEIRA: mapa cliente × mês (verde comprou / vermelho não comprou) ── */
.vx-cart-filtros { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:6px 0 10px; }
.vx-cart-legenda { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 10px; font-size:12px; color:var(--vx-muted); }
.vx-cart-legenda .lg { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--vx-pill, 999px); border:1px solid var(--vx-border); }
.vx-cart-legenda .lg::before { content:""; width:10px; height:10px; border-radius:calc(2px * var(--vx-raio, 1)); background:var(--vx-border); }
.vx-cart-legenda .lg.on::before { background:#1fb46f; } .vx-cart-legenda .lg.parou::before { background:#c62f2f; } .vx-cart-legenda .lg.nunca::before { background:rgba(198,47,47,.5); }
.vx-cart-legenda .lg.gap::before { background:rgba(224,179,74,.55); } .vx-cart-legenda .lg.off::before { background:rgba(255,255,255,.12); }
.vx-cart-legenda .lg.tot::before, .vx-cart-legenda .lg.aviso::before { display:none; }
.vx-cart-legenda .lg.aviso { color:var(--vx-morno); border-color:rgba(224,179,74,.4); }
/* UM SCROLL SO. A pagina inteira rolava por fora enquanto a tabela rolava por dentro -- duas
   barras na mesma tela, e o cabecalho de meses subindo junto com o resto. A tela passa a ter a
   altura da janela e quem rola e' a grade, como no Cockpit. min-height:0 e' obrigatorio: sem ele
   o filho de um flex nao encolhe abaixo do proprio conteudo e a barra de dentro nunca aparece. */
.vx-cart-tela { display:flex; flex-direction:column; height:calc(100vh - 48px); }
.vx-cart-wrap { overflow:auto; flex:1 1 auto; min-height:0; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
@media (max-width:720px) { .vx-cart-tela { height:auto; } .vx-cart-wrap { max-height:none; } }

/* AS MARCAS DO CRM NA LINHA: um ponto por etiqueta (a cor E a etiqueta), o ciclo em numero curto e
   o grupo de envio como um icone so'. Tudo numa tira de 16px ao lado do nome -- chips embaixo
   dobrariam a altura de mil e quinhentas linhas e a tela deixaria de ser um mapa de meses. */
.vx-cart-marcas { display:inline-flex; align-items:center; gap:5px; margin-left:8px; vertical-align:middle; }
/* O PONTO PRECISA SER VISIVEL SOBRE QUALQUER FUNDO: 9px com um anel escuro em volta, senao a cor
   clara some no claro e a escura some no escuro. */
.vx-cart-marcas .pt { width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.45); }
/* MARCA QUE NAO SE LE NAO E MARCA. Estava em 9,5px com cor "faint" sobre fundo quase transparente:
   sumia. Agora tem tamanho de texto de verdade, peso e fundo que separa do fundo da linha. */
.vx-cart-marcas .mais, .vx-cart-marcas .cic, .vx-cart-marcas .grp {
  font-size:11px; font-weight:600; font-style:normal; line-height:1; padding:3px 7px; border-radius:var(--vx-pill, 999px);
  background:rgba(255,255,255,.14); color:rgba(255,255,255,.82); white-space:nowrap;
  border:1px solid rgba(255,255,255,.10); }
/* O CICLO E TEMPO: ambar quando esta correndo, vermelho quando venceu -- a mesma linguagem de cor
   que a tabela ja usa, para nao inventar um terceiro codigo no meio da mesma tela. */
.vx-cart-marcas .cic { background:rgba(224,179,74,.20); color:#f0cd7e; border-color:rgba(224,179,74,.35); }
.vx-cart-marcas .cic.venceu { background:rgba(198,47,47,.30); color:#ffb3b3; border-color:rgba(198,47,47,.5); }
:root.vx-light .vx-cart-marcas .mais, :root.vx-light .vx-cart-marcas .grp {
  background:rgba(15,23,42,.10); color:#334155; border-color:rgba(15,23,42,.14); }
.vx-cart { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:12.5px; }
.vx-cart th, .vx-cart td { padding:7px 9px; border-bottom:1px solid var(--vx-border); white-space:nowrap; }
.vx-cart thead th { position:sticky; top:0; z-index:3; background:var(--vx-surface-2); color:var(--vx-muted); font-size:11px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); font-weight:600; text-align:left; }
.vx-cart th.num, .vx-cart td.num { text-align:right; font-variant-numeric:tabular-nums; }
.vx-cart td.fix, .vx-cart th.fix { position:sticky; z-index:2; background:var(--vx-surface); }
.vx-cart thead th.fix { z-index:4; background:var(--vx-surface-2); }
.vx-cart .c1 { left:0; min-width:78px; } .vx-cart .c2 { left:78px; min-width:220px; max-width:260px; overflow:hidden; text-overflow:ellipsis; } .vx-cart .c3 { left:298px; min-width:150px; max-width:170px; overflow:hidden; text-overflow:ellipsis; box-shadow:var(--vx-sombra, 6px 0 8px -6px rgba(0,0,0,.45)); }
.vx-cart td.c1 a { color:var(--vx-teal-br); text-decoration:none; }
.vx-cart td.tot { font-weight:700; color:var(--vx-text); }
.vx-cart td.ult { color:var(--vx-muted); }
.vx-cart td.cel { text-align:center; min-width:74px; font-variant-numeric:tabular-nums; }
.vx-cart td.cel.on { background-color:#1fb46f; color:var(--vx-sobre-destaque, #04110c); font-weight:600; cursor:pointer; }
.vx-cart td.cel.on:hover, .vx-cart td.cel.on.sel { background-color:#29d684; box-shadow:inset 0 0 0 2px #04110c; }
/* sem compra = cinza discreto; âmbar = buraco entre compras; VERMELHO só depois da última compra ("parou") */
/* background-COLOR, e não o atalho: o mês em andamento (.atual) entra por cima com a HACHURA
   (background-image), e o atalho apagaria a cor de baixo — era o que deixava um furo cinza no meio
   da faixa vermelha. Cor e hachura são camadas diferentes de propósito. */
/* O TRACO PRECISA SER LIDO, nao adivinhado: .22 sobre fundo escuro era quase invisivel e a tabela
   parecia ter buracos em vez de meses sem compra. */
.vx-cart td.cel.off { background-color:rgba(255,255,255,.035); color:rgba(255,255,255,.38); }
.vx-cart td.cel.off.gap { background-color:rgba(224,179,74,.16); color:rgba(224,179,74,.75); }
.vx-cart td.cel.off.recente { background-color:rgba(224,179,74,.30); color:rgba(224,179,74,.95); }
.vx-cart td.cel.off.parou { background-color:#c62f2f; color:rgba(255,255,255,.92); }
/* SEM COMPRA NO MÊS (cliente que já existia e não comprou): vermelho de aviso, não de alarme — bem
   mais fraco que o "parou", senão a carteira inteira vira paredão e some quem parou depois de
   comprar (que é o recuperável). */
.vx-cart td.cel.off.nunca { background-color:rgba(198,47,47,.24); color:rgba(255,190,190,.88); }
/* MES ATUAL: um SIMBOLO no lugar da hachura.
   A hachura listrada cobria a coluna inteira e brigava com a cor -- de longe a coluna do mes
   corrente virava uma zebra e nao dava para dizer quem estava em falta. Agora ele pinta igual aos
   outros e se distingue pelo conteudo da celula ("..." em vez de "-"), com um contorno de meio tom
   so' para o olho achar a coluna. Continua fora da CONTAGEM de falta (ver Refiltrar): a regra da
   casa e que mes em andamento nao e falta -- o que mudou foi so' como ele se mostra. */
.vx-cart td.cel.atual { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.vx-cart td.cel.atual.on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.30); }
.vx-cart-legenda .lg.recente::before { background:rgba(224,179,74,.85); }
/* a legenda mostra o mesmo que a celula mostra: o simbolo, nao mais a listra */
.vx-cart-legenda .lg.atual::before { content:"\22EF"; width:auto; height:auto; background:none; color:var(--vx-muted); font-weight:700; letter-spacing:calc(1px * var(--vx-tracking, 1)); }
.vx-cart th.mes { text-align:center; }

/* ══ CARTEIRA ATIVADA e 1a COMPRA AQUI ══
   O rodape gruda embaixo como o cabecalho gruda em cima: quem rola 300 clientes continua vendo
   quantos estrearam em cada mes. Nada de barra nem semaforo aqui -- a densidade de vermelho das
   celulas JA e o semaforo da tela, e uma barra no rodape competiria com o mapa. */
.vx-cart tfoot td { position:sticky; bottom:0; z-index:3; background:var(--vx-surface-2);
  border-top:1px solid var(--vx-border); border-bottom:0; padding:7px 8px; }
.vx-cart tfoot td.rot { text-align:right; font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.6px * var(--vx-tracking, 1));
  color:var(--vx-faint); font-weight:600; white-space:nowrap; }
.vx-cart tfoot td.nv { text-align:center; font-variant-numeric:tabular-nums; font-size:13px;
  font-weight:800; color:var(--vx-teal-br); cursor:pointer; }
.vx-cart tfoot td.nv.zero { color:var(--vx-faint); font-weight:500; cursor:default; }
.vx-cart tfoot td.nv.on { background:var(--vx-teal-glow); }
.vx-cart-legenda .lg.idx::before, .vx-cart-legenda .lg.falta::before { display:none; }
.vx-cart-legenda .lg.idx b { font-size:14px; font-weight:800; color:var(--vx-teal-br); }
.vx-cart-legenda .lg.idx.mudo { color:var(--vx-faint); }
.vx-cart-legenda .lg.falta { cursor:pointer; color:var(--vx-morno); border-color:rgba(224,179,74,.4); }
.vx-cart-legenda .lg.falta.on { background:rgba(224,179,74,.16); }

.vx-cart-btn { background:transparent; border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); color:var(--vx-teal-soft); font:inherit; font-size:11.5px; padding:3px 10px; cursor:pointer; }
.vx-cart-btn:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-cart-btn:disabled { opacity:.4; cursor:default; }
.vx-cart tr.vx-cart-det td { background:var(--vx-surface-2); padding:10px 12px 14px; white-space:normal; }
.vx-cart-det-h { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px; font-size:13px; }
.vx-cart-det-h .s { color:var(--vx-teal-soft); }
.vx-cart-det-h .vx-cart-btn { margin-left:auto; }
.vx-cart-itens { border-collapse:collapse; width:100%; font-size:12px; }
.vx-cart-itens th, .vx-cart-itens td { padding:5px 8px; border-bottom:1px solid var(--vx-border); text-align:left; }
.vx-cart-itens th { color:var(--vx-muted); font-weight:600; font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); }
.vx-cart-itens .num { text-align:right; font-variant-numeric:tabular-nums; }
.vx-cart-vazio { padding:26px; text-align:center; color:var(--vx-muted); }
.vx-cart-btn.pri { border-color:var(--vx-teal); color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); margin-left:auto; }
/* ── CARRINHO DA OFERTA nas telas de cliente (Clientes e Carteira) ──
   "Já está no carrinho" tem de se ler DE LONGE, numa grade de 1.500 linhas ou 60 cartões: aceso em
   teal, com o filete na linha e o contorno no cartão. OUTLINE e não border/box-shadow no cartão: o
   tema claro redefine os dois em .vx-card com mais especificidade e o estado sumiria justo nele. */
.vx-cart-btn.vx-car-cli.on { border-color:var(--vx-teal); color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); font-weight:600; }
.vx-cart tr.vx-car-on td.c1 { box-shadow:inset 3px 0 0 var(--vx-teal); }
/* "EM OFERTA": o cliente já tem proposta em aberto. Mesmo chip do "no carrinho", em ÂMBAR de propósito
   — teal já é o carrinho, e os dois estados aparecem lado a lado na mesma linha. É sinal, não botão. */
.vx-cart-btn.vx-cart-emof { border-color:rgba(224,179,74,.45); color:#e0b34a; background:rgba(224,179,74,.12); font-weight:600; cursor:default; }
.vx-cart-btn.vx-cart-emof:hover { border-color:rgba(224,179,74,.45); color:#e0b34a; }
/* dois .pri lado a lado dividiriam o margin-left:auto e abririam um buraco entre eles */
.vx-cart-btn.pri + .vx-cart-btn.pri.vx-car-lote { margin-left:0; }
.vx-card.vx-cli-nocar { outline:1.5px solid color-mix(in srgb, var(--vx-teal) 60%, transparent); outline-offset:-1.5px; }
/* card MARCADO a dedo (caixinha) — realce mais forte que o "no carrinho", que e' outra coisa. */
.vx-card.vx-cli-sel { outline:2px solid var(--vx-teal); outline-offset:-2px; background:color-mix(in srgb, var(--vx-teal) 7%, var(--vx-bg-2)); }
/* card de PROSPECT (pre-cliente do funil) na Carteira — roxo, como o card do Cockpit. */
.vx-card.vx-cli-prospect { border-left:4px solid #a855f7; }
.vx-cli-prospect .vx-pc-av { background:linear-gradient(135deg,#7c3aed,#a855f7)!important; color:#fff; }
.vx-erp-pill.vx-pc-pill { font-size:10.5px; padding:3px 9px; background:rgba(168,85,247,.14); color:#c9a3f5; border-color:rgba(168,85,247,.32); }
/* pílula "em oferta" no cartão de Clientes — mesma cor âmbar do chip da Carteira, um só estado na casa */
.vx-erp-pill.vx-cli-emof { background:rgba(224,179,74,.14); color:#e6bd57; border-color:rgba(224,179,74,.34); }
.vx-cli-car { position:relative; }
.vx-cli-car.on::after { content:"\2713"; position:absolute; top:-4px; right:-4px; width:15px; height:15px; border-radius:50%;
  background:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); font-size:10px; font-weight:800; line-height:15px; text-align:center; pointer-events:none; }
@media (max-width: 720px) {
  /* no cartão do celular a linha inteira é a borda: o filete vai para o cartão */
  .vx-cart tbody tr.vx-car-on { box-shadow:inset 3px 0 0 var(--vx-teal); }
  .vx-cart tbody tr.vx-car-on td.c1 { box-shadow:none; }
}
/* status da atividade por cliente */
.vx-cart td.atv, .vx-cart th.atv { min-width:132px; }
.vx-cart-atvchip { display:inline-block; border-radius:var(--vx-pill, 999px); padding:2px 9px; font-size:11px; font-weight:600; border:1px solid transparent;
  background:transparent; font-family:inherit; cursor:pointer; white-space:nowrap; }
.vx-cart-atvchip.pend { color:#e0b34a; border-color:rgba(224,179,74,.45); background:rgba(224,179,74,.10); }
.vx-cart-atvchip.atr { color:#ff8a65; border-color:rgba(255,138,101,.5); background:rgba(255,138,101,.12); }
.vx-cart-atvchip.ok { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-cart-itens .vx-cart-atvchip { cursor:default; }
/* Órbita: etapa da investigação em andamento e o que foi consultado */
.vx-orb-etapa { display:flex; align-items:center; gap:8px; margin:6px 0 2px; font-size:12px; color:var(--vx-teal-soft); }
.vx-orb-etapa .vx-lb-spin { width:14px; height:14px; border-width:2px; }
.vx-xray-consultas { margin:0 0 10px; padding:8px 10px 8px 26px; border:1px dashed var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); font-size:12px; color:var(--vx-muted); line-height:1.5; }
.vx-xray-consultas li { margin:2px 0; }
.vx-pdet-link.imp { border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); color:var(--vx-teal-br); }
/* imersivo: card do CONJUNTO (cavalete) na cena de seleção */
.vx-cine-slab.conj { outline:1px solid color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
.vx-cine-slab-badge { position:absolute; top:10px; left:10px; z-index:1; font-size:10.5px; letter-spacing:calc(1px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); font-weight:700;
  color:var(--vx-sobre-destaque, #04110c); background:var(--vx-teal); padding:3px 9px; border-radius:var(--vx-pill, 999px); }
/* Galeria: botões da linha com a MESMA largura — "capa 019" e "R$ 483/m²" mudavam o tamanho e as
   colunas dançavam de um grupo para o outro ("alinhamento de tamanho") */
.vx-iabtn { min-width:132px; box-sizing:border-box; justify-content:center; text-align:center; }
/* ── METAS: navegação do mês, indicadores, cards com ritmo ── */
.vx-meta-nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:18px 0 14px; }
.vx-meta-seta { width:34px; height:34px; border-radius:50%; border:1px solid var(--vx-border); background:var(--vx-surface); color:var(--vx-text); font-size:20px; line-height:1; cursor:pointer; }
.vx-meta-seta:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-meta-hoje { font-size:12px; color:var(--vx-muted); }
.vx-meta-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin:0 0 14px; }
.vx-meta-kpi { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
.vx-meta-kpi span { font-size:11px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-meta-kpi b { font-size:20px; font-weight:700; color:var(--vx-text); font-variant-numeric:tabular-nums; }
.vx-meta-kpi i { font-style:normal; font-size:12px; color:var(--vx-muted); }
.vx-meta-card .top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.vx-meta-card .nome { font-weight:600; font-size:15px; }
.vx-meta-card .sub { font-size:12px; color:var(--vx-muted); margin-top:2px; }
.vx-meta-st { font-size:11px; font-weight:600; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); border:1px solid; border-radius:var(--vx-pill, 999px); padding:2px 9px; white-space:nowrap; }
.vx-meta-card .valores { display:flex; justify-content:space-between; align-items:baseline; margin:10px 0 6px; }
.vx-meta-card .valores .real { font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; }
.vx-meta-card .valores .meta { font-size:13px; color:var(--vx-muted); }
.vx-meta-bar { position:relative; height:10px; border-radius:calc(6px * var(--vx-raio, 1)); background:rgba(255,255,255,.07); overflow:visible; }
.vx-meta-bar .fill { height:100%; border-radius:calc(6px * var(--vx-raio, 1)); transition:width .5s ease; }
.vx-meta-bar .mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--vx-text); opacity:.7; border-radius:calc(2px * var(--vx-raio, 1)); }
.vx-meta-card .rodape { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--vx-muted); }
.vx-meta-card .rodape .acts { margin-left:auto; display:flex; }
.vx-meta-sem { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px; padding:10px 12px; border:1px dashed var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); font-size:12.5px; color:var(--vx-muted); }
.vx-meta-vazio { display:flex; flex-direction:column; align-items:center; gap:8px; padding:40px 20px; text-align:center; color:var(--vx-muted); }
.vx-meta-vazio b { color:var(--vx-text); font-size:16px; }
.vx-meta-vazio span { max-width:520px; line-height:1.5; }
.vx-meta-vazio .acts { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
:root.vx-light .vx-meta-bar { background:rgba(15,23,42,.08); }
/* janela de ambientes: "gerar novos" é seção secundária, fechada quando já há biblioteca */
.vx-amb-gerar-h { display:flex; align-items:center; gap:8px; width:100%; margin:14px 0 8px; padding:9px 12px; border:1px dashed var(--vx-border);
  border-radius:calc(10px * var(--vx-raio, 1)); background:transparent; color:var(--vx-text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; text-align:left; }
.vx-amb-gerar-h:hover { border-color:var(--vx-teal); }
.vx-cart-atv { border:1px solid var(--vx-teal); border-radius:calc(12px * var(--vx-raio, 1)); background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); padding:10px 12px; margin:0 0 10px; }
.vx-cart-atv-h { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; font-size:13px; }
.vx-cart-atv-h .s { font-size:11.5px; color:var(--vx-faint); }
.vx-cart-atv-f { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* Cockpit: atividades da carteira (mandadas pelo gerente) */
/* mesmo recuo lateral do quadro (.vx-pipe tem padding 16px 20px) e sem sobrar para fora da tela */
.vx-atv-painel { border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); padding:8px 14px;
  margin:0 20px 2px; box-sizing:border-box; max-width:calc(100% - 40px);
  /* filho do mesmo flex do quadro: sem isto, com o board cheio ele era espremido e a lista sumia */
  flex:0 0 auto; overflow:visible; }
.vx-atv-painel .vx-atv-h a { white-space:nowrap; }
/* o quadro é quem cede: filho flex com min-height:auto não encolhe, estoura a caixa e passa por
   cima do painel; com min-height:0 ele ocupa só o que sobra e as colunas rolam por dentro */
.vx-pipe { min-height:0; }
.vx-atv-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-atv-h b { color:var(--vx-text); }
/* Sinalização do cabeçalho (o painel nasce fechado): pastilha com o que importa + ponto pulsando
   quando há atraso ou coisa nova do gerente. Cinza-teal quando está tudo em dia. */
.vx-atv-pill { display:inline-flex; align-items:center; gap:6px; padding:2px 9px 2px 7px; border-radius:var(--vx-pill, 999px); font-size:11.5px; font-weight:700;
  letter-spacing:calc(.02em * var(--vx-tracking, 1)); color:var(--vx-teal-soft); background:color-mix(in srgb, var(--vx-teal) 14%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal) 35%, transparent); }
.vx-atv-pill .dot { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 0 currentColor; }
.vx-atv-pill.novo { color:#f3c969; background:rgba(243,201,105,.12); border-color:rgba(243,201,105,.4); }
.vx-atv-pill.alerta { color:#ff7a7a; background:rgba(255,122,122,.12); border-color:rgba(255,122,122,.45); }
.vx-atv-pill.novo .dot, .vx-atv-pill.alerta .dot { animation:vx-atv-pulse 1.6s ease-out infinite; }
.vx-atv-h.alerta { border-left:3px solid #ff7a7a; padding-left:8px; margin-left:-11px; }
.vx-atv-h.novo { border-left:3px solid #f3c969; padding-left:8px; margin-left:-11px; }
.vx-atv-sub.novo { color:#f3c969; }
.vx-atv-dica { color:var(--vx-faint); }
@keyframes vx-atv-pulse { 0% { box-shadow:0 0 0 0 currentColor; opacity:1; } 70% { box-shadow:0 0 0 6px transparent; opacity:.85; } 100% { box-shadow:0 0 0 0 transparent; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .vx-atv-pill .dot { animation:none !important; } }
.vx-atv-lista { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.vx-atv { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 10px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); font-size:12.5px; }
.vx-atv .tipo { font-size:16px; }
.vx-atv .cli { font-weight:600; }
.vx-atv .ass { color:var(--vx-muted); flex:1; min-width:180px; }
.vx-atv .prazo { color:var(--vx-faint); font-size:11.5px; }
.vx-atv .prazo.atrasada { color:var(--vx-morno); }
.vx-atv .acts { display:flex; gap:6px; margin-left:auto; }
.vx-cart-pag { display:flex; gap:12px; align-items:center; justify-content:center; margin:12px 0; font-size:12.5px; color:var(--vx-muted); }
:root.vx-light .vx-cart td.cel.off { background-color:rgba(15,23,42,.05); color:rgba(15,23,42,.35); }
:root.vx-light .vx-cart td.cel.off.gap { background-color:rgba(224,179,74,.22); color:#8a6210; }
:root.vx-light .vx-cart td.cel.off.recente { background-color:rgba(224,179,74,.38); color:#6b4a06; }
:root.vx-light .vx-cart td.cel.atual { box-shadow: inset 0 0 0 1px rgba(15,23,42,.16); }
:root.vx-light .vx-cart td.cel.off.parou { background-color:#e04848; color:#fff; }
:root.vx-light .vx-cart td.cel.off.nunca { background-color:rgba(224,72,72,.15); color:#a33; }
:root.vx-light .vx-cart-legenda .lg.off::before { background:rgba(15,23,42,.15); }
:root.vx-light .vx-cart-legenda .lg.atual::before { background:none; color:#475569; }
.vx-es-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.vx-prod-selitem .thumb, .vx-pi-grupo .thumb { width:28px; height:28px; border-radius:calc(6px * var(--vx-raio, 1)); background-size:cover; background-position:center; flex:0 0 auto; cursor:zoom-in; }

/* Medida e valor da chapa dentro do editor do pedido. Linha própria, logo abaixo do nome:
   cinco campos apertados na mesma linha do material não sobram no celular. */
.vx-pi-nome { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-pi-med { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end;
  margin:-4px 0 8px; padding:8px 12px 10px; background:var(--vx-surface);
  border:1px solid var(--vx-border); border-top:none; border-radius:0 0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)); }
.vx-pi-med label { display:flex; flex-direction:column; gap:3px; font-size:10.5px;
  letter-spacing:calc(.02em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-pi-med input { width:96px; height:32px; padding:0 8px; font:inherit; font-size:13px;
  color:var(--vx-text); background:var(--vx-bg); border:1px solid var(--vx-border);
  border-radius:calc(8px * var(--vx-raio, 1)); outline:none; }
.vx-pi-med input:focus { border-color:var(--vx-teal); }
.vx-pi-med .tot input { width:104px; color:var(--vx-teal-soft); font-weight:600; }
/* o Valor é CALCULADO (preço/m² × área) e não se digita: sem borda e sem cursor de texto, para
   a mão nem ir lá. Mesma linguagem da medida travada logo ao lado. */
.vx-pi-med .tot input[readonly] { background:transparent; border-color:transparent; cursor:default; }
.vx-pi-bruta { align-self:center; margin-left:auto; border:1px dashed var(--vx-border); background:none;
  color:var(--vx-muted); font:inherit; font-size:11.5px; padding:5px 10px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; }
.vx-pi-bruta:hover { border-color:var(--vx-teal); color:var(--vx-teal-soft); }
/* ── "como o cliente vê": o apelido do material neste pedido ──
   Encosta na faixa de medida (que fecha as bordas de baixo), então esta continua a fechar por ela:
   margem negativa para colar e o raio só embaixo, senão aparece um degrau entre as duas. */
.vx-pi-desc { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  margin:-8px 0 8px; padding:0 12px 10px; background:var(--vx-surface);
  border:1px solid var(--vx-border); border-top:none; border-radius:0 0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)); }
.vx-pi-desc label { display:flex; flex-direction:column; gap:3px; font-size:10.5px; flex:1 1 220px; min-width:0;
  letter-spacing:calc(.02em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-pi-desc input { width:100%; height:32px; padding:0 8px; font:inherit; font-size:13px;
  color:var(--vx-text); background:var(--vx-bg); border:1px solid var(--vx-border);
  border-radius:calc(8px * var(--vx-raio, 1)); outline:none; }
.vx-pi-desc input:focus { border-color:var(--vx-teal); }
.vx-pi-desc input::placeholder { color:var(--vx-faint); font-style:italic; }
.vx-pi-desc .rep { align-self:center; border:1px dashed var(--vx-border); background:none;
  color:var(--vx-muted); font:inherit; font-size:11.5px; padding:5px 10px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; }
.vx-pi-desc .rep:hover { border-color:var(--vx-teal); color:var(--vx-teal-soft); }
/* o selo ao lado do nome: discreto, mas o bastante para ninguém achar que o cadastro mudou */
.vx-pi-apelido { margin-left:6px; padding:1px 6px; border-radius:var(--vx-pill, 99px); font-size:9.5px; font-weight:700;
  letter-spacing:calc(.04em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-teal-soft);
  background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 28%, transparent); }

.vx-pi-med.somente-leitura { gap:14px; align-items:center; font-size:12.5px; color:var(--vx-muted); }
.vx-pi-med.somente-leitura .tot { margin-left:auto; color:var(--vx-teal-soft); font-weight:600; }
@media (max-width:560px){ .vx-pi-med input { width:calc(50vw - 46px); } .vx-pi-med .tot input { width:calc(50vw - 46px); } }
:root.vx-light .vx-editsheet { background:#fff; }
@media (max-width:768px){ .vx-es-grid { grid-template-columns:1fr; } .vx-editsheet { top:0; border-radius:0; } }

/* ───────────────── Seleção de chapa + Lightbox ───────────────── */
.vx-slab-pick { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; z-index:2;
  background:rgba(11,11,20,.55); border:1.5px solid rgba(255,255,255,.55); color:transparent; cursor:pointer; transition:all .15s; }
.vx-slab-pick:hover { border-color:#fff; }
.vx-slab-pick.on { background:var(--vx-teal-br); border-color:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); }

.vx-lb { position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; animation:vx-fade .2s ease; }
.vx-lb-img { max-width:88vw; max-height:84vh; border-radius:calc(6px * var(--vx-raio, 1)); box-shadow:var(--vx-sombra, 0 30px 80px -20px rgba(0,0,0,.85)); }
/* palco do lightbox: foto OU placeholder elegante (chapa sem foto no ERP) */
.vx-lb-stage { display:flex; align-items:center; justify-content:center; max-width:88vw; max-height:84vh; }
.vx-lb-ph { width:min(78vw,560px); aspect-ratio:4/3; border-radius:calc(10px * var(--vx-raio, 1)); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  box-shadow:var(--vx-sombra, 0 30px 80px -20px rgba(0,0,0,.85)); }
.vx-lb-ph::before { content:""; position:absolute; inset:0; background:
  radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.10), transparent 60%),
  radial-gradient(100% 80% at 50% 100%, rgba(0,0,0,.45), transparent 55%); }
.vx-lb-ph-glyph { position:relative; font-size:clamp(40px,8vw,60px); font-weight:800; letter-spacing:calc(2px * var(--vx-tracking, 1)); color:rgba(255,255,255,.92); text-shadow:var(--vx-sombra-texto, 0 2px 18px rgba(0,0,0,.4)); }
.vx-lb-ph-msg { position:relative; font-size:clamp(15px,2.4vw,19px); font-weight:600; color:#fff; }
.vx-lb-ph-sub { position:relative; font-size:12.5px; color:rgba(255,255,255,.78); max-width:340px; line-height:1.5; }
/* lightbox: enquanto a foto grande carrega, spinner no lugar do "sem foto" */
.vx-lb-stage.vx-has .vx-lb-ph { display:none; }
.vx-lb-load { width:min(78vw,560px); aspect-ratio:4/3; border-radius:calc(10px * var(--vx-raio, 1)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--vx-sombra, 0 30px 80px -20px rgba(0,0,0,.85)); }
.vx-lb-spin { width:44px; height:44px; border-radius:50%; border:3px solid rgba(255,255,255,.14); border-top-color:rgba(120,230,180,.9); animation: vx-spin .7s linear infinite; }
.vx-lb-load-txt { font-size:13px; color:rgba(255,255,255,.72); letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
@keyframes vx-spin { to { transform: rotate(360deg); } }
.vx-lb-x { position:absolute; top:18px; right:22px; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:18px; }
.vx-lb-x:hover { background:rgba(255,255,255,.25); }
.vx-lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.12); color:#fff; font-size:28px; line-height:1; }
.vx-lb-nav:hover { background:rgba(255,255,255,.25); }
.vx-lb-prev { left:24px; } .vx-lb-next { right:24px; }
.vx-lb-cap { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); background:rgba(16,17,27,.88); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.12); border-radius:calc(14px * var(--vx-raio, 1)); padding:12px 18px; text-align:center; color:#fff; min-width:280px; max-width:90vw; }
.vx-lb-cap .t { font-size:15px; font-weight:500; }
.vx-lb-cap .s { font-size:12px; color:rgba(255,255,255,.7); margin-top:2px; }
.vx-lb-cap .p { font-size:16px; font-weight:600; color:var(--vx-teal-br); margin-top:4px; }
@media (max-width:768px){ .vx-lb-nav{ width:40px;height:40px;font-size:24px; } .vx-lb-prev{left:8px;} .vx-lb-next{right:8px;} }

/* ───────────────── Modo TV (vitrine fullscreen) ───────────────── */
.vx-tv { position:fixed; inset:0; z-index:1500; background:#05060a; overflow:hidden; color:#fff; }
.vx-tv-load { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(255,255,255,.85); }
.vx-tv-stage { position:absolute; inset:0; animation:vx-tv-fade .9s ease; }
.vx-tv-img { position:absolute; inset:0; background-size:cover !important; background-position:center !important; animation:vx-tv-ken 8s ease-out forwards; }
.vx-tv-scrim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,6,10,.15) 0%,rgba(5,6,10,0) 30%,rgba(5,6,10,.55) 72%,rgba(5,6,10,.92) 100%); }
@keyframes vx-tv-ken { from{ transform:scale(1.04) translate(0,0); } to{ transform:scale(1.15) translate(-1.5%,-2%); } }
@keyframes vx-tv-fade { from{ opacity:0; } to{ opacity:1; } }

.vx-tv-info { position:absolute; left:0; right:0; bottom:0; padding:0 6vw 8vh; z-index:2; animation:vx-tv-up .9s var(--vx-spring); }
@keyframes vx-tv-up { from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:translateY(0); } }
.vx-tv-kicker { font-size:clamp(12px,1.4vw,16px); letter-spacing:calc(3px * var(--vx-tracking, 1)); font-weight:600; color:var(--vx-teal-br); text-transform:var(--vx-caixa, uppercase); margin-bottom:8px; }
.vx-tv-title { font-size:clamp(34px,6vw,84px); font-weight:600; line-height:1.02; letter-spacing:calc(-1.5px * var(--vx-tracking, 1)); text-shadow:var(--vx-sombra-texto, 0 6px 40px rgba(0,0,0,.6)); }
.vx-tv-meta { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; font-size:clamp(14px,1.7vw,21px); color:rgba(255,255,255,.82); }
.vx-tv-meta b { color:#fff; font-weight:600; }
.vx-tv-status { display:inline-block; margin-top:20px; font-size:clamp(12px,1.3vw,15px); font-weight:600; padding:7px 18px; border-radius:var(--vx-pill, 99px); }
.vx-tv-status.ok { background:color-mix(in srgb, var(--vx-teal-br) 22%, transparent); color:#5ff0c2; border:1px solid color-mix(in srgb, var(--vx-teal-br) 50%, transparent); }
.vx-tv-status.warn { background:rgba(242,180,65,.2); color:#ffd789; border:1px solid rgba(242,180,65,.5); }
.vx-tv-status.err { background:rgba(255,107,107,.2); color:#ff9a9a; border:1px solid rgba(255,107,107,.5); }

.vx-tv-brand { position:absolute; top:4vh; left:6vw; z-index:2; display:flex; align-items:center; gap:10px; font-size:clamp(20px,2vw,26px); font-weight:600; letter-spacing:calc(-1px * var(--vx-tracking, 1)); opacity:.95; }
.vx-tv-brand span { color:var(--vx-teal-br); }
.vx-tv-brand img { width:34px; height:34px; object-fit:contain; }

.vx-tv-ctrl { position:absolute; top:4vh; right:5vw; z-index:3; display:flex; align-items:center; gap:8px; }
.vx-tv-btn { width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1); color:#fff; font-size:17px; cursor:pointer; backdrop-filter:blur(8px); transition:all .15s; display:grid; place-items:center; }
.vx-tv-btn:hover { background:rgba(255,255,255,.25); transform:scale(1.06); }
.vx-tv-count { font-size:14px; color:rgba(255,255,255,.7); margin:0 8px; min-width:54px; text-align:center; }

.vx-tv-bar { position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.12); z-index:3; }
.vx-tv-bar-fill { height:100%; width:0; background:var(--vx-cheio, linear-gradient(90deg,var(--vx-teal-soft),var(--vx-teal-br))); }
.vx-tv-bar-fill.run { animation:vx-tv-prog 7s linear forwards; }
@keyframes vx-tv-prog { from{ width:0; } to{ width:100%; } }
@media (max-width:768px){ .vx-tv-info{ padding:0 7vw 9vh; } .vx-tv-meta{ gap:8px 16px; } }

/* ───────────────── Busca global (appbar) ───────────────── */
.vx-appbar-search { height:34px; width:min(380px,38vw); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:calc(9px * var(--vx-raio, 1)); padding:0 12px; color:#fff; font-size:13px; outline:none; transition:all .15s; }
.vx-appbar-search::placeholder { color:rgba(255,255,255,.5); }
.vx-appbar-search:focus { background:rgba(255,255,255,.16); border-color:var(--vx-teal-br); width:min(440px,42vw); }
:root.vx-light .vx-appbar-search { background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.12); color:#1A1D27; }
:root.vx-light .vx-appbar-search::placeholder { color:rgba(0,0,0,.4); }
.vx-appbar-searchbtn { display:none; }
/* Logout como link puro (<a>): navega mesmo com o circuito Blazor caido, sem depender
   do popover do MudMenu. Sempre visivel — sair nao pode ficar refem de um menu interativo. */
.vx-appbar-logout { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:calc(10px * var(--vx-raio, 1));
  color:var(--vx-text); text-decoration:none; margin-left:4px; transition:background .15s, color .15s; }
.vx-appbar-logout:hover { background:rgba(255,255,255,.10); color:var(--vx-teal-br); }
:root.vx-light .vx-appbar-logout:hover { background:rgba(15,23,42,.06); }
@media (max-width:768px){
  .vx-appbar-search { display:none; }
  .vx-appbar-searchbtn { display:inline-grid; place-items:center; width:38px; height:38px; border:none; cursor:pointer;
    background:transparent; color:var(--vx-text); border-radius:calc(10px * var(--vx-raio, 1)); transition:background .15s; }
  .vx-appbar-searchbtn:hover { background:var(--vx-surface-2); }
}

.vx-busca-sec { font-size:12px; font-weight:600; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin:22px 0 10px; }

/* ───────────────── Dashboard (Início) ───────────────── */
.vx-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vx-dash-card { background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(16px * var(--vx-raio, 1)); padding:18px 20px; }
.vx-dash-h { font-size:14px; font-weight:600; margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.vx-dash-h .sub { font-size:12px; font-weight:400; color:var(--vx-muted); margin-left:auto; }
.vx-bar-row { display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:10px; margin-bottom:11px; }
.vx-bar-lbl { font-size:12.5px; color:var(--vx-text); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-bar-track { height:24px; background:var(--vx-surface); border-radius:calc(7px * var(--vx-raio, 1)); overflow:hidden; }
.vx-bar-fill { height:100%; border-radius:calc(7px * var(--vx-raio, 1)); min-width:3px; transition:width .6s var(--vx-spring); }
.vx-bar-val { font-size:12.5px; font-weight:600; white-space:nowrap; }
.vx-bar-val small { font-weight:400; color:var(--vx-muted); }
.vx-dash-empty { color:var(--vx-faint); font-size:13px; padding:14px 0; text-align:center; }
@media (max-width:860px){ .vx-dash-grid { grid-template-columns:1fr; } .vx-bar-row { grid-template-columns:96px 1fr auto; } }

/* ───────────────── Seleção visual de material no pedido ───────────────── */
.vx-pd-prodcard { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; display:flex; flex-direction:column; }
.vx-pd-prodimg { height:96px; background-size:cover !important; background-position:center !important; cursor:zoom-in; position:relative; }
.vx-pd-zoom { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(11,11,20,.55); display:grid; place-items:center; }
.vx-pd-prodinfo { padding:7px 9px; flex:1; }
.vx-pd-prodinfo .t { font-size:12.5px; font-weight:500; line-height:1.2; }
.vx-pd-prodinfo .s { font-size:11px; color:var(--vx-muted); margin-top:2px; }
.vx-pd-prodinfo .p { font-size:12.5px; font-weight:600; color:var(--vx-teal-br); margin-top:3px; }
.vx-pd-prodcard.vx-pd-add { border-color:var(--vx-teal-br); box-shadow:0 0 0 1px var(--vx-teal-br) inset; }
/* MARCADO para o "Adicionar marcados" da oferta — e ainda NÃO na oferta. Tracejado de propósito:
   com a mesma borda cheia do .vx-pd-add, "vou adicionar" e "já adicionei" ficariam iguais na tela,
   e é exatamente essa diferença que o vendedor confere antes de apertar o botão. O contorno fica
   POR FORA (offset positivo): por dentro, a foto e o botão cheio do card pintavam por cima dele e
   só sobravam as laterais; e outline não mexe no tamanho, então marcar não sacode a grade. */
.vx-pd-prodcard.vx-pd-marcado { outline:2px dashed var(--vx-teal); outline-offset:2px; background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); }
.vx-pd-badge { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:var(--vx-pill, 999px);
  background:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); font-size:10.5px; font-weight:700; }
.vx-pd-badge.vx-pd-badge-warn { background:#f59e0b; }

/* ───────────────── Manual interno ───────────────── */
.vx-manual { margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.vx-man-sec { background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); padding:18px 22px; }
.vx-man-sec h3 { margin:0 0 10px; font-size:16px; font-weight:600; }
.vx-man-sec p { margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--vx-muted); }
.vx-man-sec ul { margin:0; padding-left:20px; }
.vx-man-sec li { font-size:13.5px; line-height:1.7; color:var(--vx-muted); margin-bottom:4px; }
.vx-man-sec b { color:var(--vx-text); }
.vx-man-sec code { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(5px * var(--vx-raio, 1)); padding:1px 6px; font-size:12px; font-family:ui-monospace,Consolas,monospace; color:var(--vx-teal-br); }
.vx-man-sec a { color:var(--vx-teal-br); text-decoration:none; }

/* ───────────────── Acesso restrito (NotAuthorized) ───────────────── */
.vx-forbidden { min-height:70vh; display:grid; place-items:center; padding:24px; }
.vx-forbidden-card { text-align:center; max-width:420px; background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(18px * var(--vx-raio, 1)); padding:38px 30px; box-shadow:var(--vx-sombra, 0 22px 50px -28px rgba(0,0,0,.5)); }
.vx-forbidden-ico { font-size:46px; margin-bottom:10px; }
.vx-forbidden-card h2 { margin:0 0 8px; font-size:20px; font-weight:600; }
.vx-forbidden-card p { margin:0 0 20px; color:var(--vx-muted); font-size:14px; line-height:1.6; }
.vx-forbidden-btn { display:inline-block; background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); font-weight:600; text-decoration:none; padding:11px 24px; border-radius:calc(12px * var(--vx-raio, 1)); }

/* ───────────────── Página 404 (de marca, com brilho do vortice) ───────────────── */
.vx-404 { min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:13px; padding:28px 24px; }
.vx-404-mark { position:relative; width:96px; height:96px; display:grid; place-items:center; }
.vx-404-mark::before { content:""; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 22%, transparent)), transparent 68%); filter:blur(6px); }
.vx-404-mark img { position:relative; width:64px; height:64px; opacity:.96;
  filter:drop-shadow(0 6px 18px color-mix(in srgb, var(--vx-teal-br) 35%, transparent)); animation:vx-splash-gira 3.4s linear infinite; }
.vx-404-code { font-family:Outfit, ui-sans-serif, system-ui, sans-serif; font-size:52px; font-weight:700;
  letter-spacing:calc(2px * var(--vx-tracking, 1)); line-height:1; color:var(--vx-teal-br); }
.vx-404-tit { font-size:18px; font-weight:600; color:var(--vx-text); }
.vx-404-sub { font-size:13.5px; color:var(--vx-muted); max-width:420px; line-height:1.55; }
.vx-404-btn { margin-top:6px; display:inline-block; padding:11px 24px; border-radius:calc(12px * var(--vx-raio, 1)); text-decoration:none;
  font-weight:600; color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); }
@media (prefers-reduced-motion: reduce) { .vx-404-mark img { animation:none; } }

/* ───────────────── Banner de template ativo (Galeria) ───────────────── */
.vx-tpl-banner { display:flex; align-items:center; gap:14px; margin:10px 0; padding:12px 16px; border-radius:calc(14px * var(--vx-raio, 1));
  background:linear-gradient(135deg,#7c3aed,#c026d3); color:#fff; box-shadow:var(--vx-sombra, 0 12px 30px -14px rgba(124,58,237,.6)); }
.vx-tpl-corpo { flex: 1; min-width: 0; }
/* O banner nao tinha UMA regra de telefone em toda a folha: gap e padding de monitor, sem quebra.
   Com o corpo em base 0 ao lado de "Salvar chapas" + o X, o texto encolhia ate nao caber a palavra.
   Base de 100% no telefone: o aviso ocupa a linha, os dois botoes fecham embaixo. */
@media (max-width: 600px) {
  .vx-tpl-banner { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .vx-tpl-banner > .vx-tpl-corpo { flex: 1 1 100%; }
}

/* ───────────────── Usuários / labels & pills genéricas ───────────────── */
.vx-lbl { display:block; font-size:12px; color:var(--vx-muted); margin:0 0 6px 2px; }
.vx-pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:2px 9px; border-radius:var(--vx-pill, 99px); border:1px solid var(--vx-border); color:var(--vx-muted); line-height:1.6; }

/* ───────────────── Modo Vortex (assistente por voz) ───────────────── */
.vx-voice-stage { display:flex; flex-direction:column; align-items:center; gap:16px; padding:34px 0 10px; text-align:center; }
.vx-orb { position:relative; width:148px; height:148px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, var(--vx-teal-br), var(--vx-teal) 55%, #0c6b4c 100%);
  box-shadow:var(--vx-sombra, 0 18px 60px -16px color-mix(in srgb, var(--vx-teal) 65%, transparent), inset 0 2px 14px rgba(255,255,255,.25));
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1); -webkit-tap-highlight-color:transparent; }
.vx-orb:hover { transform:scale(1.05); }
.vx-orb:active { transform:scale(.96); }
.vx-orb-core { position:absolute; inset:18px; border-radius:50%; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), transparent 60%); }
.vx-orb-ring, .vx-orb-ring.r2 { position:absolute; inset:0; border-radius:50%; border:2px solid color-mix(in srgb, var(--vx-teal) 50%, transparent); opacity:0; }
.vx-orb.is-listening .vx-orb-ring { animation:vxpulse 1.6s ease-out infinite; }
.vx-orb.is-listening .vx-orb-ring.r2 { animation:vxpulse 1.6s ease-out .8s infinite; }
.vx-orb.is-thinking { animation:vxspin 1.1s linear infinite; }
@keyframes vxpulse { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(1.8); opacity:0; } }
@keyframes vxspin { to { transform:rotate(360deg); } }
.vx-voice-state { font-size:14px; color:var(--vx-muted); min-height:22px; max-width:520px; }
.vx-voice-state i { color:var(--vx-teal-br); font-style:normal; }
.vx-voice-tools { margin-top:2px; }
/* Ficha do pedido ao vivo (placar enchendo conforme fala) */
.vx-ficha { margin:14px auto 4px; max-width:620px; padding:12px 16px; border-radius:calc(14px * var(--vx-raio, 1));
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 30%, transparent); background:linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 8%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 2%, transparent))); }
.vx-ficha-tit { font-size:12.5px; font-weight:700; color:var(--vx-text); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.vx-ficha-row { display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:13px;
  border-top:1px solid var(--vx-border); opacity:.5; transition:opacity .25s; }
.vx-ficha-row:first-of-type { border-top:none; }
.vx-ficha-row.ok { opacity:1; }
.vx-ficha-row > span { color:var(--vx-muted); }
.vx-ficha-row > b { color:var(--vx-text); text-align:right; }
.vx-ficha-row.ok > b { color:var(--vx-teal-br); }

/* seletor de voz (Config) */
.vx-voz-row { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:calc(10px * var(--vx-raio, 1));
  border:1px solid var(--vx-border); background:var(--vx-surface); cursor:pointer; transition:border-color .15s, background .15s; }
.vx-voz-row:hover { border-color:var(--vx-teal-br); }
.vx-voz-row.on { border-color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }

.vx-voice-chat { display:flex; flex-direction:column; gap:10px; margin:18px auto 6px; max-width:620px; }
.vx-vbubble { max-width:84%; padding:10px 14px; border-radius:calc(16px * var(--vx-raio, 1)); font-size:14px; line-height:1.5; }
.vx-vbubble.u { align-self:flex-end; background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); font-weight:500; border-bottom-right-radius:calc(5px * var(--vx-raio, 1)); }
.vx-vbubble.v { align-self:flex-start; background:var(--vx-bg-2); border:1px solid var(--vx-border); color:var(--vx-text); border-bottom-left-radius:calc(5px * var(--vx-raio, 1)); }
.vx-vbubble.v .who { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--vx-teal-br); font-weight:700; margin-bottom:3px; }
.vx-voice-type { display:flex; gap:8px; align-items:center; max-width:620px; margin:14px auto 0; }
.vx-voice-type .vx-input { flex:1; height:46px; }
.vx-voice-ex { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; max-width:620px; margin:12px auto 0; }
.vx-voice-ex > span { font-size:12px; color:var(--vx-faint); }
.vx-voice-chip { background:var(--vx-surface); border:1px solid var(--vx-border); color:var(--vx-muted); font-size:12px; padding:6px 12px; border-radius:var(--vx-pill, 99px); cursor:pointer; transition:all .18s ease; }
.vx-voice-chip:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }

/* ── Itens editáveis da oferta (preço/m²/qtd + ambientes) ── */
.vx-of-itens { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.vx-of-item { display:flex; align-items:flex-start; gap:10px; padding:8px 10px; background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); }
.vx-of-item .thumb { width:46px; height:46px; border-radius:calc(8px * var(--vx-raio, 1)); background-size:cover; background-position:center; flex:0 0 auto; }
.vx-of-item .info { flex:1; min-width:0; }
.vx-of-item .info .t { font-size:13px; font-weight:600; margin-bottom:5px; }
.vx-of-item .campos { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vx-of-item .campos > span { display:inline-flex; align-items:center; gap:4px; }
.vx-of-item .campos label { font-size:11px; color:var(--vx-muted); }
.vx-of-num { width:64px; height:30px; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-surface); color:var(--vx-text); font-size:13px; padding:0 8px; text-align:right; }
.vx-of-num.w { width:84px; }
/* O NOME COMERCIAL NAO CABE EM 64px. O campo "como o cliente ve" nascia com a largura dos campos
   de NUMERO ao lado (comprimento, largura, qtd) porque compartilha a classe -- e ali cabem sete
   letras. "BROWNIE BRUSHED 3CM" virava "BROWNI", entao o vendedor digitava um nome que nao
   conseguia reler para conferir. Cresce com o espaco que sobra e para de encolher. */
.vx-of-num.nome { width:auto; min-width:180px; flex:1 1 200px; max-width:420px; text-align:left; }
.vx-of-num:focus { outline:none; border-color:var(--vx-teal); }
/* sem setinhas (campo numérico vira texto numérico limpo) */
.vx-of-num::-webkit-outer-spin-button, .vx-of-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.vx-of-num[type=number] { -moz-appearance:textfield; }
/* preço obrigatório que falta preencher → borda vermelha pulsando */
.vx-of-num.falta { border-color:#ff6b6b; background:rgba(255,107,107,.08); box-shadow:0 0 0 1px rgba(255,107,107,.35); }
.vx-of-item.sel { border-color:var(--vx-teal); box-shadow:0 0 0 1px var(--vx-teal); }
.vx-of-itchk { display:flex; align-items:center; padding-top:14px; }
.vx-of-itchk input { width:17px; height:17px; accent-color:var(--vx-teal); cursor:pointer; }
/* no CABEÇALHO do cavalete a linha é baixa e centrada: o padding-top que alinha o checkbox com a
   linha alta da chapa aqui o empurrava para baixo do chevron e da miniatura ("alinhe esse checkbox") */
.vx-pi-grupo > .vx-of-itchk { padding-top:0; align-self:center; }
/* legenda do que vai na proposta (ambientes) + troca rápida sem abrir o popup */
.vx-of-ambcap { font-size:11px; color:var(--vx-faint); margin-left:6px; }
/* chip de ambientes do CONJUNTO no cabeçalho do cavalete (par do 📷🎬) */
.vx-pi-amb { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; padding:2px 9px; border:1px solid var(--vx-border);
  border-radius:var(--vx-pill, 999px); cursor:pointer; color:var(--vx-teal-soft); white-space:nowrap; }
.vx-pi-amb:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-of-amblink { background:none; border:none; color:var(--vx-teal-soft); font:inherit; font-size:11px; cursor:pointer;
  text-decoration:underline dotted; padding:0 4px; }
.vx-of-amblink:hover { color:var(--vx-teal-br); }
.vx-pi-grupo > .vx-of-itchk input { margin:0; display:block; }
/* barra de preço em massa */
.vx-of-massa { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:6px 0 10px; padding:9px 11px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); }
.vx-of-chk { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-of-chk input { width:16px; height:16px; accent-color:var(--vx-teal); cursor:pointer; }
/* a marca do preço/nome em massa no pedido (cabeçalho do cavalete e chapa solta) */
.vx-pi-chk { width:16px; height:16px; flex:0 0 auto; accent-color:var(--vx-teal); cursor:pointer; margin:0 4px 0 0; }
.vx-of-cur { font-size:13px; font-weight:700; color:var(--vx-teal-soft); }
.vx-of-modo { height:30px; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-surface); color:var(--vx-text); font-size:12.5px; padding:0 8px; }
.vx-of-aplicar { height:30px; padding:0 13px; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:transparent; color:var(--vx-text); font-size:12.5px; font-weight:600; cursor:pointer; }
.vx-of-aplicar:hover { border-color:var(--vx-teal); }
.vx-of-aplicar.todos { background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); border-color:transparent; }
/* scrollbar do modal de oferta — mais escuro */
.vx-es-body { scrollbar-color: #0a0c12 transparent; scrollbar-width: thin; }
.vx-es-body::-webkit-scrollbar { width:11px; }
.vx-es-body::-webkit-scrollbar-track { background:rgba(0,0,0,.25); }
.vx-es-body::-webkit-scrollbar-thumb { background:#0b0e15; border:2px solid rgba(0,0,0,.25); border-radius:calc(8px * var(--vx-raio, 1)); }
.vx-es-body::-webkit-scrollbar-thumb:hover { background:#05070b; }
.vx-of-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--vx-pill, 99px); }
.vx-of-pill.down { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-br); }
.vx-of-pill.up { background:rgba(242,180,65,.18); color:var(--vx-morno); }
.vx-of-ambs { display:flex; align-items:center; gap:5px; margin-top:7px; flex-wrap:wrap; }
.vx-of-ambs img { width:38px; height:30px; object-fit:cover; border-radius:calc(6px * var(--vx-raio, 1)); cursor:pointer; border:1px solid var(--vx-border); }
.vx-of-ambtag { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--vx-teal-br); }
.vx-of-medidas { font-size:11.5px; color:var(--vx-muted); margin-top:5px; }
.vx-of-medidas b { color:var(--vx-teal-br); }
.vx-of-ambrow { display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.vx-of-ambrow .vx-of-ambs { margin-top:0; }

/* Cabeçalho do DETALHE da oferta (pós-criação / aberta de Ofertas) */
.vx-of-dethead { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; margin-bottom:6px; border-radius:calc(14px * var(--vx-raio, 1));
  background:linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 2%, transparent)));
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 22%, transparent); }
.vx-of-detnum { font-size:16px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-of-detmeta { font-size:12px; color:var(--vx-muted); margin-top:2px; }
.vx-of-detstat { font-size:11px; font-weight:700; padding:4px 11px; border-radius:var(--vx-pill, 99px); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); }
.vx-of-detstat.s-disp { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-br); }
.vx-of-detstat.s-res  { background:rgba(242,180,65,.18); color:var(--vx-morno); }
.vx-of-detstat.s-vend { background:rgba(255,107,107,.16); color:var(--vx-frio); }

/* ── Assistente Vortex global (FAB + painel flutuante em qualquer tela) ── */
/* fica ACIMA do FAB de ação da página (.vx-fab em bottom:24) p/ não cobri-lo */
.vx-assist-fab { position:fixed; right:24px; bottom:92px; z-index:1400; width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center; background:radial-gradient(circle at 35% 30%, var(--vx-teal-br), var(--vx-teal) 60%, #0c6b4c 100%);
  box-shadow:var(--vx-sombra, 0 14px 36px -10px color-mix(in srgb, var(--vx-teal) 70%, transparent), inset 0 2px 10px rgba(255,255,255,.25));
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1); -webkit-tap-highlight-color:transparent; }
.vx-assist-fab:hover { transform:scale(1.08); }
.vx-assist-fab:active { transform:scale(.95); }
.vx-assist-fab-pulse { position:absolute; inset:0; border-radius:50%; background:var(--vx-teal); opacity:.55; animation:vxfab 2.2s ease-out infinite; }
@keyframes vxfab { 0% { transform:scale(1); opacity:.5; } 100% { transform:scale(1.9); opacity:0; } }
.vx-assist-scrim { position:fixed; inset:0; z-index:1450; background:rgba(4,8,14,.55); backdrop-filter:blur(2px); animation:vxfade .2s ease; }
@keyframes vxfade { from { opacity:0; } to { opacity:1; } }
.vx-assist-panel { position:fixed; right:16px; top:60px; z-index:1460; width:min(420px,calc(100vw - 28px)); max-height:min(82vh,760px);
  display:flex; flex-direction:column; background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(20px * var(--vx-raio, 1)); overflow:hidden;
  box-shadow:var(--vx-sombra, 0 30px 70px -20px rgba(0,0,0,.6)); animation:vxpanel .26s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes vxpanel { from { transform:translateY(-16px) scale(.97); opacity:0; } to { transform:none; opacity:1; } }
.vx-assist-head { display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 16px; border-bottom:1px solid var(--vx-border); flex:0 0 auto; }
.vx-assist-title { display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; letter-spacing:calc(.2px * var(--vx-tracking, 1)); }
.vx-assist-body { padding:14px 16px 18px; overflow-y:auto; }
.vx-assist-body .vx-voice-stage { padding:8px 0 6px; gap:10px; }
.vx-assist-body .vx-orb { width:96px; height:96px; }
.vx-assist-body .vx-orb .mud-icon-root { font-size:28px !important; }
.vx-assist-body .vx-voice-state { font-size:12.5px; }
.vx-assist-body .vx-voice-chat { margin:12px 0 4px; max-width:none; }
.vx-assist-body .vx-voice-type, .vx-assist-body .vx-voice-ex { max-width:none; }
@media (max-width:560px){ .vx-assist-panel { right:8px; left:8px; top:56px; width:auto; max-height:86vh; } .vx-appbar-mic-txt { display:none; } }

/* botão do assistente no app bar (topo) */
.vx-appbar-mic { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px 0 12px; margin-left:8px; border:none; cursor:pointer;
  border-radius:var(--vx-pill, 99px); color:var(--vx-sobre-destaque, #04110c); font-weight:700; font-size:13px; letter-spacing:calc(.2px * var(--vx-tracking, 1));
  background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); box-shadow:var(--vx-sombra, 0 6px 18px -8px color-mix(in srgb, var(--vx-teal) 80%, transparent));
  transition:transform .18s ease, box-shadow .18s ease; }
.vx-appbar-mic:hover { transform:translateY(-1px); box-shadow:var(--vx-sombra, 0 10px 22px -8px color-mix(in srgb, var(--vx-teal) 90%, transparent)); }
.vx-appbar-mic:active { transform:scale(.97); }
.vx-appbar-mic-dot { width:8px; height:8px; border-radius:50%; background:#04110c; position:relative; }
.vx-appbar-mic-dot::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(4,17,12,.5); animation:vxfab 2s ease-out infinite; }

/* ── CTA verde de ALTA legibilidade (ex.: "Capturar prospect") ──
   Texto branco em negrito sobre verde sólido vibrante. Cobre botão + label + ícone
   com !important pra não ficar "apagado" em dark nem light. */
.vx-cta.mud-button-root { background:linear-gradient(135deg,#0e9d6a,#16c089) !important;
  box-shadow:var(--vx-sombra, 0 6px 16px -7px rgba(14,157,106,.75)) !important; border:none !important;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.vx-cta.mud-button-root, .vx-cta .mud-button-label, .vx-cta .mud-icon-root,
.vx-cta .mud-button-label * { color:#ffffff !important; font-weight:700 !important; letter-spacing:calc(.2px * var(--vx-tracking, 1)); }
.vx-cta.mud-button-root:hover { filter:brightness(1.07); transform:translateY(-1px);
  box-shadow:var(--vx-sombra, 0 10px 22px -8px rgba(14,157,106,.9)) !important; }
.vx-cta.mud-button-root:active { transform:scale(.98); }

/* ════════════════ Relatórios — dashboard BI ════════════════ */
.vx-rel-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:14px; margin:6px 0 4px; }
.vx-kpi { position:relative; overflow:hidden; border-radius:calc(18px * var(--vx-raio, 1)); padding:16px 18px 15px;
  background:linear-gradient(150deg,var(--vx-bg-2) 0%,var(--vx-surface) 100%); border:1px solid var(--vx-border);
  box-shadow:var(--vx-sombra, 0 10px 30px -22px rgba(0,0,0,.6)); transition:transform .25s cubic-bezier(0.34,1.56,0.64,1), box-shadow .25s ease; }
.vx-kpi:hover { transform:translateY(-3px); box-shadow:var(--vx-sombra, 0 18px 40px -22px rgba(0,0,0,.7)); }
.vx-kpi::after { content:""; position:absolute; right:-30px; top:-30px; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, var(--vx-kpi-glow,var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 18%, transparent))) 0%, transparent 70%); pointer-events:none; }
.vx-kpi-ico { width:38px; height:38px; border-radius:calc(11px * var(--vx-raio, 1)); display:grid; place-items:center; margin-bottom:10px;
  background:var(--vx-kpi-ic,color-mix(in srgb, var(--vx-teal-br) 14%, transparent)); }
.vx-kpi-ico .mud-icon-root { font-size:21px !important; color:var(--vx-kpi-fg,var(--vx-teal-br)); }
.vx-kpi-lbl { font-size:11.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); font-weight:600; }
.vx-kpi-val { font-size:25px; font-weight:800; line-height:1.12; margin-top:3px; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); color:var(--vx-text); }
.vx-kpi-sub { font-size:12px; color:var(--vx-muted); margin-top:3px; }
.vx-kpi-delta { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; padding:2px 8px; border-radius:var(--vx-pill, 99px); margin-top:7px; }
.vx-kpi-delta.up   { color:#13b87f; background:rgba(19,184,127,.14); }
.vx-kpi-delta.down { color:#ff6b6b; background:rgba(255,107,107,.14); }
.vx-kpi-delta .mud-icon-root { font-size:15px !important; }

/* gráfico de evolução (12 barras) */
.vx-rel-card { border-radius:calc(18px * var(--vx-raio, 1)); padding:18px 20px 16px; background:var(--vx-bg-2); border:1px solid var(--vx-border); }
.vx-rel-h { display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; margin:0 0 14px; }
.vx-rel-h .mud-icon-root { font-size:19px !important; color:var(--vx-teal-br); }
.vx-bars { display:flex; align-items:flex-end; gap:7px; height:170px; padding-top:6px; }
.vx-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; min-width:0; }
.vx-bar { width:100%; max-width:34px; border-radius:calc(7px * var(--vx-raio, 1)) calc(7px * var(--vx-raio, 1)) calc(3px * var(--vx-raio, 1)) calc(3px * var(--vx-raio, 1)); background:var(--vx-cheio, linear-gradient(180deg,var(--vx-teal-br),var(--vx-teal)));
  transition:height .6s cubic-bezier(0.34,1.4,0.64,1); position:relative; min-height:3px; }
.vx-bar.cur { background:linear-gradient(180deg,#5DE0B0,var(--vx-teal-br)); box-shadow:0 0 0 2px rgba(93,224,176,.35); }
.vx-bar.zero { background:var(--vx-surface); }
.vx-bar-v { font-size:10px; color:var(--vx-muted); white-space:nowrap; opacity:0; transition:opacity .2s; }
.vx-bar-col:hover .vx-bar-v { opacity:1; }
.vx-bar-m { font-size:10.5px; color:var(--vx-faint); font-weight:600; }
.vx-bar-col.cur .vx-bar-m { color:var(--vx-teal-br); }

/* A arte do passo 1 do tutorial: vetor com a cor da casa no lugar do emoji do sistema. */
.vx-tuto-arte .arte-jogo { width:100%; max-width:260px; height:auto; }
.vx-tuto-arte .arte-jogo rect { animation:vxTutoSobe .9s var(--vx-spring) both; }
.vx-tuto-arte .arte-jogo rect:nth-of-type(2) { animation-delay:.08s; }
.vx-tuto-arte .arte-jogo rect:nth-of-type(3) { animation-delay:.16s; }
.vx-tuto-arte .arte-jogo rect:nth-of-type(4) { animation-delay:.24s; }
@keyframes vxTutoSobe { from { transform:scaleY(0); transform-origin:center bottom; } to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) { .vx-tuto-arte .arte-jogo rect { animation:none; } }

/* ══════════ CAIXA DE EMOJI ══════════ */
.vx-emo-wrap { position:relative; display:inline-flex; }
.vx-emo-capa { position:fixed; inset:0; z-index:40; }
.vx-emo-cx { position:absolute; bottom:calc(100% + 6px); left:0; z-index:41; width:286px;
  background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:8px;
  box-shadow:var(--vx-sombra, 0 18px 44px -18px rgba(0,0,0,.8)); }
.vx-emo-abas { display:flex; gap:2px; margin-bottom:6px; }
.vx-emo-abas button { flex:1; background:transparent; border:0; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer;
  font-size:15px; padding:5px 0; opacity:.55; }
.vx-emo-abas button.on { background:var(--vx-surface); opacity:1; }
.vx-emo-tit { font-size:10px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); margin:0 0 5px 2px; }
.vx-emo-grade { display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; max-height:190px; overflow-y:auto; }
.vx-emo-grade button { background:transparent; border:0; border-radius:calc(7px * var(--vx-raio, 1)); cursor:pointer; font-size:17px;
  line-height:1; padding:5px 0; }
.vx-emo-grade button:hover { background:var(--vx-surface); }
@media (max-width:600px) { .vx-emo-cx { width:min(286px, calc(100vw - 32px)); } }

/* ══════════ CALENDARIO DA AGENDA ══════════
   A lista diz o que esta atrasado; o calendario diz como esta a semana -- e so' ele mostra o DIA
   VAZIO, que a lista nunca mostra porque dia sem tarefa nao vira linha. */
.vx-cal { margin-top:12px; }
.vx-cal-cab { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.vx-cal-cab b { font-size:15px; font-weight:600; text-transform:capitalize; min-width:150px; }
.vx-cal-cab button { background:transparent; border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); color:var(--vx-muted);
  font:inherit; font-size:13px; width:30px; height:30px; cursor:pointer; }
.vx-cal-cab button.hoje { width:auto; padding:0 12px; font-size:12px; }
.vx-cal-cab button:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-cal-grade { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; }
.vx-cal-grade .dia-cab { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:var(--vx-faint); text-align:center; padding:2px 0 4px; }
.vx-cal-grade .dia { position:relative; min-height:82px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1));
  background:var(--vx-surface); padding:4px 5px; cursor:pointer; overflow:hidden; transition:border-color .15s; }
.vx-cal-grade .dia:hover { border-color:var(--vx-teal); }
.vx-cal-grade .dia.fora { opacity:.35; }
.vx-cal-grade .dia.hoje { border-color:var(--vx-teal); box-shadow:inset 0 0 0 1px var(--vx-teal); }
.vx-cal-grade .dia .n { display:block; font-size:11px; color:var(--vx-muted); margin-bottom:3px; font-variant-numeric:tabular-nums; }
.vx-cal-grade .dia.hoje .n { color:var(--vx-teal-br); font-weight:700; }
.vx-cal-grade .atv { display:block; font-size:10px; line-height:1.25; padding:2px 4px; margin-bottom:2px; border-radius:calc(5px * var(--vx-raio, 1));
  background:rgba(124,92,255,.20); color:#c7b8ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.vx-cal-grade .atv.atr { background:rgba(198,47,47,.24); color:#ffb3b3; }
.vx-cal-grade .atv.ok { background:rgba(31,180,111,.18); color:#7fd8b0; text-decoration:line-through; opacity:.75; }
.vx-cal-grade .mais { font-size:9.5px; color:var(--vx-faint); }
.vx-cal-grade .sino { position:absolute; top:4px; right:5px; width:14px; height:14px; border-radius:50%;
  background:#c62f2f; color:#fff; font-size:10px; font-weight:700; display:grid; place-items:center; }
.vx-cal-pe { font-size:11.5px; color:var(--vx-faint); margin-top:10px; line-height:1.5; }
@media (max-width:700px) {
  .vx-cal-grade .dia { min-height:58px; }
  .vx-cal-grade .atv { font-size:0; padding:0; height:5px; margin-bottom:3px; border-radius:calc(3px * var(--vx-raio, 1)); }
  .vx-cal-grade .mais { font-size:9px; }
}

/* SELO DO BILHETE: de graca x trocado, entregue x a receber. Os dois estados moram no mesmo
   cartao porque a pergunta e uma so' -- "isso me custou alguma coisa e ja chegou?". */
.vx-jor-como { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  padding:2px 7px; border-radius:var(--vx-pill, 999px); margin-left:6px; vertical-align:middle; white-space:nowrap; }
.vx-jor-como.gratis { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-soft); }
.vx-jor-como.pago { background:rgba(124,58,237,.18); color:#a78bfa; }
.vx-jor-como.ok { background:rgba(31,180,111,.18); color:var(--vx-teal-soft); }
.vx-jor-como.esperando { background:rgba(224,179,74,.18); color:#f0cd7e; }

/* ══════════ SUGESTOES DE PREMIO (sorteio) ══════════
   Formulario vazio e onde a boa ideia morre: quem abre esta tela quer premiar, nao redigir. */
.vx-sug { border:1px dashed var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:10px 12px; margin:4px 0 12px; }
.vx-sug .cab { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.vx-sug .l { display:block; font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-sug-grupo { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.vx-sug-grupo .g { font-size:11px; color:var(--vx-muted); min-width:118px; }
@media (max-width:600px) { .vx-sug-grupo .g { min-width:100%; } }

/* ══════════ RAIO-X DO CLIENTE (ficha) ══════════
   O bloco existe para ser lido em tres segundos antes de uma ligacao: quatro numeros grandes, o
   aviso em uma frase, o que ele leva em barras proporcionais e a evolucao em coluna. Nada aqui e
   tabela de proposito -- tabela se le devagar, e ninguem le devagar com o telefone na mao. */
.vx-rx { margin-bottom:14px; }
.vx-rx-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr)); gap:10px; margin-bottom:12px; }
.vx-rx-kpis > div { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:9px 12px; min-width:0; }
.vx-rx-kpis .l { display:block; font-size:10px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-rx-kpis b { display:block; font-size:17px; font-weight:700; letter-spacing:calc(-.3px * var(--vx-tracking, 1)); margin-top:2px; }
.vx-rx-kpis b.sobe { color:var(--vx-teal-br); } .vx-rx-kpis b.cai { color:#ff8585; }
.vx-rx-kpis small { display:block; font-size:10.5px; color:var(--vx-faint); margin-top:1px; }
.vx-rx-alerta { font-size:12.5px; line-height:1.5; color:#f0cd7e; background:rgba(224,179,74,.12);
  border:1px solid rgba(224,179,74,.30); border-radius:calc(10px * var(--vx-raio, 1)); padding:9px 12px; margin-bottom:12px; }
.vx-rx-tit { font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); margin:10px 0 6px; }
.vx-rx-mats { display:flex; flex-direction:column; gap:6px; }
.vx-rx-mat { display:grid; grid-template-columns:minmax(0,1fr) 84px 118px; align-items:center; gap:10px; font-size:12.5px; }
.vx-rx-mat .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-rx-mat .bar { height:7px; border-radius:calc(5px * var(--vx-raio, 1)); background:var(--vx-surface); overflow:hidden; }
.vx-rx-mat .bar i { display:block; height:100%; border-radius:calc(5px * var(--vx-raio, 1)); background:var(--vx-cheio, linear-gradient(90deg,var(--vx-teal),var(--vx-teal-br))); }
.vx-rx-mat .vl { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.vx-rx-mat .vl span { display:block; font-size:10px; font-weight:400; color:var(--vx-faint); white-space:nowrap; }
.vx-rx-evol { display:flex; align-items:flex-end; gap:3px; height:64px; padding:4px 0 0; overflow-x:auto; }
.vx-rx-evol .col { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1 1 0; min-width:14px; }
.vx-rx-evol .col i { display:block; width:100%; max-width:22px; border-radius:calc(3px * var(--vx-raio, 1)) calc(3px * var(--vx-raio, 1)) 0 0;
  background:linear-gradient(180deg,var(--vx-teal-br),var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 35%, transparent))); }
.vx-rx-evol .col span { font-size:9px; color:var(--vx-faint); }
@media (max-width:600px) { .vx-rx-mat { grid-template-columns:minmax(0,1fr) 52px 104px; } }

/* ══════════ IMPORTAR ARQUIVO DE COMPRADORES ══════════ */
.vx-imp-mapa { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:10px 14px; }
.vx-imp-campo { min-width:0; }
.vx-imp-campo .vx-input { width:100%; height:36px; font-size:12.5px; }
.vx-imp-lotes { display:flex; flex-direction:column; gap:6px; }
.vx-imp-lote { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px;
  border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); font-size:12.5px; }
.vx-imp-lote span { display:block; font-size:11px; color:var(--vx-faint); }
@media (max-width:600px) { .vx-imp-lote { flex-wrap:wrap; } }

/* ══════════ MENUS POR PERFIL (Config) ══════════ */
.vx-menus-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:6px 16px; }
.vx-menus-item { display:flex; align-items:center; gap:8px; min-width:0; }
.vx-menus-item .mud-switch { flex:1 1 auto; min-width:0; }
/* o campo de nome e' secundario: so' ganha contorno quando alguem vai usa-lo */
.vx-menus-nome { flex:0 0 96px; width:96px; height:30px; font-size:12px; padding:0 8px;
  background:transparent; border:1px dashed var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); color:var(--vx-text); }
.vx-menus-nome:focus { border-style:solid; border-color:var(--vx-teal); outline:none; }
@media (max-width:600px) { .vx-menus-lista { grid-template-columns:minmax(0,1fr); } }
.vx-menus-perfil { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:2px 0 12px; }
.vx-menus-perfil .l { font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); margin-right:2px; }
.vx-menus-aviso { font-size:12px; color:var(--vx-muted); background:var(--vx-surface); border:1px solid var(--vx-border);
  border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 11px; margin-bottom:12px; line-height:1.5; }

/* ══════════ MODO FECHADOS (Cockpit) ══════════
   O quadro do Cockpit tem altura fixa e nao rola; quem rola sao os filhos. Sem flex:1 e
   min-height:0 aqui, a lista de um mes inteiro sai espremida e cortada, sem barra em lugar
   nenhum -- a mesma armadilha que a .vx-pipe ja carrega documentada. */
.vx-fec { flex:1 1 auto; min-height:0; overflow-y:auto; }
.vx-fec-total { font-size:26px; font-weight:800; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); }
.vx-fec-sub { font-size:12px; color:var(--vx-muted); margin-top:4px; }
.vx-fec-lista { padding:4px 20px 20px; display:flex; flex-direction:column; gap:6px; }
.vx-fec-row { display:flex; align-items:center; gap:12px; cursor:pointer; padding:10px 14px;
  border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-bg-2); transition:border-color .15s, transform .15s; }
.vx-fec-row:hover { border-color:var(--vx-teal); transform:translateX(2px); }
.vx-fec-id { font-size:12.5px; color:var(--vx-teal-br); font-weight:700; flex:0 0 auto; }
.vx-fec-corpo { flex:1; min-width:0; }
.vx-fec-cli { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-fec-sub2 { font-size:11.5px; color:var(--vx-faint); margin-top:2px; }
.vx-fec-val { font-size:14px; font-weight:700; flex:0 0 auto; white-space:nowrap; }
/* o selo precisa de FUNDO proprio: sem ele o texto escuro some na superficie escura */
.vx-fec-arq { flex:0 0 auto; font-size:10.5px; padding:3px 9px; border-radius:var(--vx-pill, 999px);
  background:rgba(255,255,255,.08); border:1px solid var(--vx-border); color:var(--vx-muted); }
/* A COLUNA PRECISA PODER ENCOLHER. `1fr` e' `minmax(auto,1fr)`, e o minimo `auto` e' o max-content
   do que esta dentro: uma razao social de 40 caracteres empurrava a coluna para 526px numa tela de
   375 e o painel ganhava rolagem lateral -- com o valor de cada linha caindo fora da vista.
   `minmax(0,1fr)` deixa a coluna encolher e o texto usar o ellipsis que ele ja tem.
   Especificidade de (0,3,0) de proposito: a regra base mora mais adiante no arquivo. */
.vx-fec .vx-grid.vx-grid-auto320 { grid-template-columns: repeat(auto-fit, minmax(min(320px,100%), 1fr)); }
@media (max-width:720px) { .vx-fec .vx-grid.vx-grid-auto320 { grid-template-columns: minmax(0, 1fr); } }
.vx-fec .vx-rank-val { min-width:0; }

/* largura por CLASSE, nunca inline -- inline vence media query e estica a fileira no telefone */
.vx-fec-per { max-width:170px; }
@media (max-width:600px) { .vx-fec-per { max-width:132px; } .vx-fec-row { flex-wrap:wrap; } .vx-fec-val { margin-left:auto; } }

/* ranking com medalhas */
.vx-rank-row { display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px dashed var(--vx-border); }
.vx-rank-row:last-child { border-bottom:none; }
.vx-rank-pos { width:30px; text-align:center; font-size:18px; flex:0 0 auto; }
.vx-rank-av { width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:13px;
  color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal-br),var(--vx-teal))); }
.vx-rank-mid { flex:1; min-width:0; }
.vx-rank-nm { font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-rank-track { height:7px; border-radius:calc(5px * var(--vx-raio, 1)); background:var(--vx-surface); overflow:hidden; margin-top:5px; }
.vx-rank-fill { height:100%; border-radius:calc(5px * var(--vx-raio, 1)); background:var(--vx-cheio, linear-gradient(90deg,var(--vx-teal),var(--vx-teal-br))); transition:width .6s ease; }
.vx-rank-val { text-align:right; flex:0 0 auto; }
.vx-rank-val b { font-size:14px; font-weight:800; }
.vx-rank-val span { display:block; font-size:11px; color:var(--vx-faint); }

/* funil */
.vx-funil { display:flex; flex-direction:column; gap:9px; align-items:center; }
.vx-funil-seg { color:var(--vx-sobre-destaque, #04110c); font-weight:700; border-radius:calc(9px * var(--vx-raio, 1)); padding:10px 14px; display:flex; justify-content:space-between; align-items:center;
  transition:transform .25s ease; }
.vx-funil-seg:hover { transform:scale(1.015); }
.vx-funil-seg small { font-weight:600; opacity:.85; font-size:11px; }

/* gauge de margem (anel conic) */
.vx-gauge { width:128px; height:128px; border-radius:50%; display:grid; place-items:center; margin:4px auto 0; position:relative; }
.vx-gauge::before { content:""; position:absolute; inset:13px; border-radius:50%; background:var(--vx-bg-2); }
.vx-gauge-in { position:relative; text-align:center; z-index:1; }
.vx-gauge-in b { font-size:26px; font-weight:800; }
.vx-gauge-in span { display:block; font-size:11px; color:var(--vx-faint); letter-spacing:calc(.3px * var(--vx-tracking, 1)); }

@media print {
  .vx-drawer, .mud-appbar, .vx-assist-fab, .vx-fab, .vx-rel-noprint { display:none !important; }
  .vx-kpi, .vx-rel-card { break-inside:avoid; box-shadow:none; }
  body { background:#fff !important; }
}

/* ════════════════ Editar Chapa (dialog) ════════════════ */
.vx-chapa-dlg .mud-dialog { border-radius:calc(20px * var(--vx-raio, 1)); overflow:hidden; max-width:760px; width:96vw; }
.vx-chapa-dlg .mud-dialog-title { padding:0; }
.vx-chapa-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  background:linear-gradient(120deg,var(--vx-teal) 0%,var(--vx-teal-br) 60%,#38bdf8 130%); }
.vx-chapa-head-l { display:flex; align-items:center; gap:12px; }
.vx-chapa-head-ic { width:38px; height:38px; border-radius:calc(11px * var(--vx-raio, 1)); display:grid; place-items:center; background:rgba(255,255,255,.22); }
.vx-chapa-head-ic .mud-icon-root { color:#fff; font-size:20px !important; }
.vx-chapa-head-t { color:#fff; font-weight:800; font-size:16px; line-height:1.1; }
.vx-chapa-head-badges { display:flex; gap:6px; margin-top:4px; }
.vx-chapa-badge { font-size:11px; font-weight:600; color:#fff; background:rgba(255,255,255,.2); padding:2px 9px; border-radius:var(--vx-pill, 99px); }
.vx-chapa-body { padding:14px 4px; display:flex; flex-direction:column; gap:14px; }
.vx-chapa-sec { border-radius:calc(14px * var(--vx-raio, 1)); padding:14px 16px 16px; background:var(--vx-bg-2); border:1px solid var(--vx-border); border-left:4px solid var(--vx-teal-br); }
.vx-chapa-sec.accent-id    { border-left-color:#7c3aed; }
.vx-chapa-sec.accent-dim   { border-left-color:#38bdf8; }
.vx-chapa-sec.accent-preco { border-left-color:var(--vx-teal-br); }
.vx-chapa-sec.accent-foto  { border-left-color:#f2b441; }
/* a quantidade do cadastro à mão: chapa avulsa ou cavalete, o "+ adicionar" e a prévia da numeração (26/09/2026) */
.vx-chapa-sec.accent-qtd   { border-left-color:#5BC0EB; }
.vx-manual-modo { display:inline-flex; border:1px solid var(--vx-border-2); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; margin-bottom:10px; max-width:100%; }
.vx-manual-modo button { border:0; background:var(--vx-surface); color:var(--vx-muted); font:inherit; font-size:13px; font-weight:600; padding:0 14px; min-height:36px; cursor:pointer; }
.vx-manual-modo button.on { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-text); }
.vx-manual-qtd { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vx-manual-qtd .rot { font-size:12.5px; color:var(--vx-muted); }
.vx-manual-qtd input { width:76px; min-height:36px; border:1px solid var(--vx-border-2); border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface); color:var(--vx-text); font:inherit; font-size:14px; padding:0 8px; }
.vx-manual-qtd button { min-height:36px; border:1px solid var(--vx-border-2); border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface); color:var(--vx-text); font:inherit; font-size:13px; font-weight:600; padding:0 12px; cursor:pointer; }
.vx-manual-qtd button.menos { width:36px; padding:0; font-size:18px; }
.vx-manual-qtd button.mais { border-color:var(--vx-teal-br); color:var(--vx-teal-br); }
.vx-manual-qtd button:disabled { opacity:.45; cursor:default; }
.vx-manual-previa { margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--vx-muted); }
.vx-manual-previa b { color:var(--vx-text); }
.vx-manual-previa ul { margin:6px 0 0; padding-left:18px; }
.vx-manual-erro { margin-top:10px; font-size:12.5px; line-height:1.45; color:#F2B441; }
:root.vx-light .vx-manual-erro { color:#b45309; }
/* o cadastro de materiais no "Novo material (manual)" (27/09/2026): cada material da lista com o que a base sabe dele, e as
   notas entre as fileiras de preço (as mesmas do "Preço do cavalete") */
.vx-manual-item { display:flex; flex-direction:column; gap:1px; min-width:0; padding:2px 0; }
.vx-manual-item b { font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-manual-item span { font-size:11.5px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-manual-nota { font-size:12px; color:var(--vx-faint); margin:14px 0 6px; }
.vx-chapa-sec-h { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; margin-bottom:12px; color:var(--vx-text); }
.vx-chapa-sec-h .mud-icon-root { font-size:18px !important; color:var(--vx-teal-br); }
.vx-chapa-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:10px 12px; }
.vx-chapa-m2 { font-size:12.5px; font-weight:600; color:var(--vx-teal-br); }
.vx-chapa-foto { width:132px; height:88px; border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; border:1px solid var(--vx-border);
  background:var(--vx-bg-2); display:grid; place-items:center; flex:0 0 auto; }
.vx-chapa-foto img { width:100%; height:100%; object-fit:cover; }
.vx-chapa-foto.vazia { border-style:dashed; }
.vx-chapa-area { display:flex; align-items:center; gap:18px; font-size:12.5px; color:var(--vx-muted);
  background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(9px * var(--vx-raio, 1)); padding:8px 14px; width:100%; }
.vx-chapa-area b { color:var(--vx-text); font-weight:700; }
.vx-chapa-foto { position:relative; width:200px; height:150px; border-radius:calc(12px * var(--vx-raio, 1)); overflow:hidden; background:#0c0e16;
  display:grid; place-items:center; border:1px solid var(--vx-border); flex:0 0 auto; }
.vx-chapa-foto-ph { position:absolute; inset:0; display:grid; place-items:center; font-size:30px; font-weight:800;
  color:rgba(255,255,255,.16); letter-spacing:calc(1px * var(--vx-tracking, 1)); }
.vx-chapa-foto img { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
.vx-chapa-foto img.on { opacity:1; }
.vx-chapa-foto-load { position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:rgba(4,8,14,.5); }
@media (max-width:620px){ .vx-chapa-grid > div { grid-column:span 12 !important; } .vx-chapa-foto { width:100%; } }

/* lápis de edição no card da chapa (meio-direita; aparece no hover, sempre visível no toque) */
.vx-gcard-edit { position:absolute; top:50%; right:8px; transform:translateY(-50%) scale(.85); z-index:3;
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  background:rgba(11,11,20,.66); box-shadow:var(--vx-sombra, 0 4px 12px -4px rgba(0,0,0,.6)); opacity:0;
  transition:opacity .18s ease, transform .18s cubic-bezier(0.34,1.56,0.64,1), background .15s; }
.vx-gcard-edit .mud-icon-root { color:#fff !important; }
.vx-gcard-img:hover .vx-gcard-edit { opacity:1; transform:translateY(-50%) scale(1); }
.vx-gcard-edit:hover { background:var(--vx-teal); }
@media (hover:none){ .vx-gcard-edit { opacity:.92; transform:translateY(-50%) scale(1); } }

/* botão de câmera no card (foto de estúdio) — espelho do lápis, à esquerda */
.vx-gcard-cam { position:absolute; top:50%; left:8px; transform:translateY(-50%) scale(.85); z-index:3;
  width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:grid; place-items:center;
  background:rgba(11,11,20,.66); box-shadow:var(--vx-sombra, 0 4px 12px -4px rgba(0,0,0,.6)); opacity:0;
  transition:opacity .18s ease, transform .18s cubic-bezier(0.34,1.56,0.64,1), background .15s; }
.vx-gcard-cam .mud-icon-root { color:#fff !important; }
.vx-gcard-img:hover .vx-gcard-cam { opacity:1; transform:translateY(-50%) scale(1); }
.vx-gcard-cam:hover { background:var(--vx-teal); }
@media (hover:none){ .vx-gcard-cam { opacity:.92; transform:translateY(-50%) scale(1); } }

/* ── Cards de Integrações (clicáveis) + painel de config ── */
.vx-int-card { position:relative; cursor:pointer; transition:transform .2s cubic-bezier(0.34,1.56,0.64,1), box-shadow .2s ease, border-color .2s; }
.vx-int-card:hover { transform:translateY(-3px); box-shadow:var(--vx-sombra, 0 16px 36px -22px rgba(0,0,0,.7)); border-color:color-mix(in srgb, var(--vx-teal-br) 35%, transparent); }
.vx-int-cog { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:calc(8px * var(--vx-raio, 1)); display:grid; place-items:center;
  background:var(--vx-surface); color:var(--vx-faint); opacity:0; transition:opacity .2s, color .2s, background .2s; }
.vx-int-card:hover .vx-int-cog { opacity:1; color:var(--vx-teal-br); }
@media (hover:none){ .vx-int-cog { opacity:.8; } }
.vx-int-status { display:flex; align-items:center; gap:9px; font-size:13px; padding:10px 13px; border-radius:calc(11px * var(--vx-raio, 1)); line-height:1.35; }
.vx-int-status.on  { background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); color:var(--vx-teal-br); }
.vx-int-status.off { background:rgba(242,180,65,.12); color:var(--vx-morno); }
.vx-int-status .mud-icon-root { font-size:19px !important; flex:0 0 auto; }
.vx-int-kv { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vx-int-kv > div { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:9px 12px; }
.vx-int-kv span { font-size:11px; color:var(--vx-faint); display:block; }
.vx-int-kv b { font-size:13px; color:var(--vx-text); word-break:break-all; }
.vx-int-test { font-size:12.5px; color:var(--vx-muted); background:var(--vx-surface); border:1px solid var(--vx-border);
  border-left:3px solid var(--vx-teal-br); border-radius:0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0; padding:10px 13px; line-height:1.45; }
.vx-int-note { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--vx-faint); }
.vx-int-note .mud-icon-root { font-size:15px !important; }

/* ── Legibilidade de botões "default" (outlined/text) — eram apagados no dark ──
   So aumenta contraste do texto/borda; nao altera layout nem cor de acento. */
.mud-button-root.mud-button-outlined-default { color:var(--vx-text) !important; border-color:color-mix(in srgb, var(--vx-text) 30%, transparent) !important; }
.mud-button-root.mud-button-text-default { color:var(--vx-text) !important; }
.mud-button-root.mud-button-outlined-default:hover { border-color:var(--vx-teal-br) !important; background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent) !important; }
.mud-button-root.mud-button-outlined-default .mud-button-label,
.mud-button-root.mud-button-text-default .mud-button-label { color:inherit !important; }

/* labels que disparam upload de foto nativamente (Blazor Server: <label for> abre o seletor sem ida ao servidor) */
.vx-filebtn { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  height:38px; padding:0 18px; border-radius:calc(9px * var(--vx-raio, 1)); font-size:13.5px; font-weight:700; letter-spacing:calc(.2px * var(--vx-tracking, 1)); color:#fff;
  background:linear-gradient(135deg,#0e9d6a,#16c089); box-shadow:var(--vx-sombra, 0 6px 16px -7px rgba(14,157,106,.75));
  transition:filter .16s ease, transform .16s ease; }
.vx-filebtn:hover { filter:brightness(1.07); transform:translateY(-1px); }
.vx-filebtn:active { transform:scale(.98); }
.vx-filebtn .mud-icon-root { color:#fff !important; }
.vx-filebtn.busy { pointer-events:none; opacity:.6; }

.vx-lb-foto-btn { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  height:32px; padding:0 14px; border-radius:calc(8px * var(--vx-raio, 1)); font-size:13px; font-weight:600; color:#fff;
  background:transparent; border:1px solid rgba(255,255,255,.4); transition:background .15s ease, border-color .15s ease; }
.vx-lb-foto-btn:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.vx-lb-foto-btn.busy { pointer-events:none; opacity:.6; }
.vx-lb-foto-btn .mud-icon-root { color:#fff !important; }

/* ════════════════ Prospecção Vortex — radar de oportunidades ════════════════ */
.vx-prosp-hero { position:relative; overflow:hidden; border-radius:calc(22px * var(--vx-raio, 1)); padding:22px 24px; display:flex; align-items:center;
  justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:radial-gradient(120% 140% at 12% 10%, #14233a 0%, #0c1322 55%, #0a0f1a 100%); border:1px solid var(--vx-border); }
.vx-prosp-hero-glow { position:absolute; right:-80px; top:-120px; width:360px; height:360px; pointer-events:none;
  background:radial-gradient(circle, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 20%, transparent)) 0%, transparent 68%); }
.vx-prosp-hero-l { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.vx-prosp-h1 { font-size:21px; font-weight:800; letter-spacing:calc(-.4px * var(--vx-tracking, 1)); color:#fff; }
.vx-prosp-h2 { font-size:13px; color:rgba(233,236,244,.66); max-width:520px; margin-top:3px; line-height:1.45; }
.vx-prosp-kpis { display:flex; gap:10px; position:relative; z-index:1; }
.vx-prosp-kpi { min-width:96px; text-align:center; background:rgba(255,255,255,.04); border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); padding:10px 12px; }
.vx-prosp-kpi b { display:block; font-size:24px; font-weight:800; line-height:1; color:#fff; }
.vx-prosp-kpi span { font-size:10.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }

/* o vórtex (símbolo da marca puxando oportunidade) */
.vx-prosp-vortex, .vx-scan-vortex { position:relative; width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center; }
.vx-prosp-vortex::before, .vx-scan-vortex::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 0%, transparent)) 40deg, var(--vx-teal-br) 130deg, #38bdf8 200deg, transparent 300deg);
  -webkit-mask:radial-gradient(circle, transparent 38%, #000 40%); mask:radial-gradient(circle, transparent 38%, #000 40%);
  animation:vxvortex 6s linear infinite; }
/* METADE DA VELOCIDADE (Daniel, 23/09/2026: "deixa um pouco mais lenta"): o vórtice fica no alto da tela o tempo
   todo, e anel saindo a cada 0,8 s cansava o olho. Buscando, ele ainda gira mais rápido que parado — é o sinal de
   que está trabalhando —, só que sem virar pião. */
.vx-prosp-vortex.spin::before { animation-duration:1.6s; }
.vx-prosp-vortex span, .vx-scan-vortex span { position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--vx-teal-br) 50%, transparent); inset:8px; opacity:0; animation:vxring 4.8s ease-out infinite; }
.vx-prosp-vortex span:nth-child(2), .vx-scan-vortex span:nth-child(2) { animation-delay:1.6s; }
.vx-prosp-vortex span:nth-child(3), .vx-scan-vortex span:nth-child(3) { animation-delay:3.2s; }
.vx-prosp-core, .vx-scan-vortex i { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #7df0c8, var(--vx-teal-br) 55%, #0c6b4c 100%);
  box-shadow:var(--vx-sombra, 0 0 16px 2px color-mix(in srgb, var(--vx-teal-br) 70%, transparent)); }
@keyframes vxvortex { to { transform:rotate(360deg); } }
@keyframes vxring { 0% { transform:scale(.5); opacity:.7; } 100% { transform:scale(1.6); opacity:0; } }

/* scanner em ação */
.vx-scan { display:flex; flex-direction:column; align-items:center; gap:10px; padding:34px 0 26px; }
.vx-scan-vortex { width:120px; height:120px; }
.vx-scan-vortex i { width:22px; height:22px; }
.vx-scan-msg { font-size:14px; color:var(--vx-teal-br); font-weight:600; letter-spacing:calc(.2px * var(--vx-tracking, 1)); }
.vx-scan-count { font-size:30px; font-weight:800; color:#fff; }
.vx-scan-count small { font-size:12px; font-weight:500; color:var(--vx-faint); margin-left:6px; }

/* barra de ação em massa */
.vx-prosp-bulk { display:flex; align-items:center; gap:10px; margin:14px 0 10px; padding:10px 14px; border-radius:calc(14px * var(--vx-raio, 1));
  background:var(--vx-bg-2); border:1px solid var(--vx-border); position:sticky; top:8px; z-index:5; }
.vx-prosp-all { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--vx-muted); cursor:pointer; user-select:none; }
.vx-prosp-all input { width:16px; height:16px; accent-color:var(--vx-teal-br); }
.vx-prosp-filtros { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; padding:8px 12px; border-radius:calc(12px * var(--vx-raio, 1));
  background:var(--vx-surface); border:1px solid var(--vx-border); }
.vx-fchip { font-size:12px; font-weight:600; color:var(--vx-muted); background:var(--vx-bg-2); border:1px solid var(--vx-border);
  border-radius:var(--vx-pill, 99px); padding:5px 12px; cursor:pointer; user-select:none; transition:border-color .15s, color .15s, background .15s; }
.vx-fchip:hover { border-color:var(--vx-teal-br); }
.vx-fchip.on { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); border-color:var(--vx-teal-br); color:var(--vx-teal-br); }
.vx-prosp-count { font-size:12px; color:var(--vx-faint); font-weight:600; }
.vx-seg-x { margin-left:7px; font-size:11px; color:#ef4444; font-weight:700; cursor:pointer; opacity:.85; }
.vx-seg-x:hover { opacity:1; }

/* card de oportunidade */
.vx-prosp-card { position:relative; border-radius:calc(16px * var(--vx-raio, 1)); padding:14px 15px 12px; background:var(--vx-bg-2); border:1px solid var(--vx-border);
  border-left:4px solid #7c3aed; opacity:0; transform:translateY(10px) scale(.98); animation:vxprospin .5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vx-prosp-card:hover { box-shadow:var(--vx-sombra, 0 16px 36px -22px rgba(0,0,0,.7)); transform:translateY(-2px); }
.vx-prosp-card.on { border-color:var(--vx-teal-br); box-shadow:0 0 0 1px var(--vx-teal-br) inset; }
@keyframes vxprospin { to { opacity:1; transform:none; } }
.vx-prosp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.vx-prosp-pick input { width:17px; height:17px; accent-color:var(--vx-teal-br); cursor:pointer; }
.vx-prosp-temp { font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:var(--vx-pill, 99px); }
.vx-prosp-temp.t-quente { background:rgba(255,107,107,.16); color:#ff8a8a; }
.vx-prosp-temp.t-morno  { background:rgba(242,180,65,.16); color:#f2b441; }
.vx-prosp-temp.t-frio   { background:rgba(56,189,248,.16); color:#7cc9f6; }
.vx-prosp-nome { font-size:14.5px; font-weight:700; line-height:1.2; color:var(--vx-text); }
.vx-prosp-seg { font-size:11.5px; color:var(--vx-teal-br); font-weight:600; margin-top:2px; }
.vx-prosp-end { font-size:12px; color:var(--vx-muted); margin-top:6px; min-height:30px; line-height:1.4; }
.vx-prosp-tel { font-size:12.5px; color:var(--vx-text); margin-top:2px; }
.vx-prosp-acts { display:flex; align-items:center; gap:7px; margin-top:10px; flex-wrap:wrap; }
.vx-prosp-act { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; border:none;
  font-size:12px; font-weight:700; text-decoration:none; background:var(--vx-surface); color:var(--vx-text); transition:filter .15s, transform .12s; }
.vx-prosp-act:hover { filter:brightness(1.12); transform:translateY(-1px); }
.vx-prosp-act.wa { background:#25D366; color:var(--vx-sobre-destaque, #04110c); width:32px; padding:0; justify-content:center; }
.vx-prosp-act.cap { background:linear-gradient(135deg,#0e9d6a,#16c089); color:#fff; margin-left:auto; }
.vx-prosp-act.done { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-br); margin-left:auto; cursor:default; }
.vx-prosp-act.done:hover { filter:none; transform:none; }
@media (max-width:560px){ .vx-prosp-kpis { width:100%; } .vx-prosp-kpi { flex:1; min-width:0; } }

/* categoria do negócio no card do funil */
.vx-deal-cat { display:inline-block; margin-top:6px; font-size:10px; font-weight:700; letter-spacing:calc(.2px * var(--vx-tracking, 1));
  padding:2px 8px; border-radius:var(--vx-pill, 99px); background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-br); border:1px solid color-mix(in srgb, var(--vx-teal-br) 30%, transparent); }

/* ── Pré-cliente no funil (entrou pela prospecção, aguarda o financeiro liberar) ── */
.vx-deal.pre { border-style:dashed !important; border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent) !important; background:linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 5%, transparent)), transparent); }
.vx-deal-pre { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 0 2px; }
.vx-deal-pre .lbl { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--vx-teal-br); }
.vx-deal-vortex { width:12px; height:12px; border-radius:50%; flex:0 0 auto; position:relative;
  background:radial-gradient(circle at 50% 50%, #0b0f17 0 32%, transparent 34%),
             conic-gradient(from 210deg, var(--vx-teal-br) 0 28%, #38bdf8 34%, transparent 60%);
  box-shadow:var(--vx-sombra, 0 0 8px color-mix(in srgb, var(--vx-teal-br) 60%, transparent)); animation:vxvortex 3s linear infinite; }
.vx-deal-lib { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border:none; cursor:pointer;
  border-radius:calc(7px * var(--vx-raio, 1)); font-size:11px; font-weight:700; color:var(--vx-sobre-destaque, #04110c); background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)));
  transition:filter .15s, transform .12s; }
.vx-deal-lib:hover { filter:brightness(1.08); transform:translateY(-1px); }
.vx-deal-lib .mud-icon-root { color:var(--vx-sobre-destaque, #04110c) !important; }
/* avatar = símbolo Vortex (buraco-negro teal) pro pré-cliente */
.d-av.vortex { position:relative; background:transparent !important; color:transparent !important;
  border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 40%, transparent); }
.d-av.vortex::before { content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #0b0f17 0 30%, transparent 32%),
             conic-gradient(from 210deg, var(--vx-teal-br) 0 26%, #38bdf8 33%, transparent 58%);
  animation:vxvortex 3.2s linear infinite; }

/* ── Painel de detalhe do prospect (Radar) ── */
.vx-pdet-scrim { position:fixed; inset:0; z-index:1450; background:rgba(4,8,14,.55); backdrop-filter:blur(2px); animation:vxfade .2s ease; }
.vx-pdet { position:fixed; right:0; top:0; bottom:0; z-index:1460; width:min(440px, 100vw); display:flex; flex-direction:column;
  background:var(--vx-bg-2); border-left:1px solid var(--vx-border); box-shadow:var(--vx-sombra, -30px 0 70px -20px rgba(0,0,0,.6));
  animation:vxpdet .26s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes vxpdet { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
.vx-pdet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px 16px 12px; border-bottom:1px solid var(--vx-border); }
.vx-pdet-nome { font-size:17px; font-weight:800; line-height:1.2; color:var(--vx-text); }
.vx-pdet-seg { font-size:12px; color:var(--vx-teal-br); font-weight:600; margin-top:4px; }
.vx-pdet-body { padding:14px 16px; overflow-y:auto; flex:1; }
.vx-pdet-kv { display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px dashed var(--vx-border); font-size:13px; }
.vx-pdet-kv span { color:var(--vx-faint); flex:0 0 auto; }
.vx-pdet-kv b { color:var(--vx-text); text-align:right; }
.vx-pdet-flag { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; font-weight:600; color:var(--vx-teal-br); }
.vx-xray { margin-top:10px; padding:4px 12px; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1));
  background:linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 6%, transparent)), transparent); }
.vx-xray .vx-pdet-kv:last-child { border-bottom:none; }
.vx-pdet-sec { font-size:11.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); font-weight:700; margin:18px 0 10px; }
.vx-pdet-links { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vx-pdet-link { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border-radius:calc(10px * var(--vx-raio, 1)); text-decoration:none;
  font-size:13px; font-weight:600; color:var(--vx-text); background:var(--vx-surface); border:1px solid var(--vx-border); transition:filter .15s, transform .12s, border-color .15s; }
.vx-pdet-link:hover { border-color:var(--vx-teal-br); transform:translateY(-1px); }
.vx-pdet-link .mud-icon-root { font-size:18px !important; color:var(--vx-teal-br); }
.vx-pdet-link.wa { background:#25D366; color:var(--vx-sobre-destaque, #04110c); grid-column:span 2; justify-content:center; }
.vx-pdet-link.wa .mud-icon-root { color:var(--vx-sobre-destaque, #04110c) !important; }
.vx-pdet-note { display:flex; align-items:flex-start; gap:6px; font-size:11px; color:var(--vx-faint); margin-top:12px; line-height:1.4; }
.vx-pdet-foot { padding:12px 16px; border-top:1px solid var(--vx-border); }
@media (max-width:480px){ .vx-pdet { width:100vw; } }

/* ════════════════ Mapa de Oportunidades (Leaflet) — "o mundo se abre" ════════════════ */
.vx-seg { display:inline-flex; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; }
.vx-seg span { padding:5px 12px; font-size:12.5px; font-weight:600; color:var(--vx-muted); cursor:pointer; transition:background .15s, color .15s; }
.vx-seg span.on { background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); }

.vx-map-wrap { position:relative; margin-top:6px; border-radius:calc(16px * var(--vx-raio, 1)); overflow:hidden; border:1px solid var(--vx-border); }
/* O FUNDO IMITA O TOM DO MAPA, e nao o do app. Tile que ainda nao chegou deixa este fundo a
   mostra: com o azul quase preto de antes, o buraco virava um retangulo PRETO no meio de um
   mosaico cinza — era isso que fazia o mapa parecer quebrado enquanto carregava. Num cinza
   proximo do tom final (luminancia ~51, que e o que a base entrega depois do clareamento) o
   que falta le como "mapa sem detalhe ainda" em vez de falha. */
.vx-map { height:min(64vh, 640px); width:100%; background:#2f3236; }
/* CLAREIA O PAINEL DE TILES, NUNCA TILE POR TILE.
   A primeira versao pos o filter em .leaflet-tile — ou seja, em CADA imagem. O navegador cria um
   contexto de composicao por elemento filtrado, e num mapa aberto sao dezenas de tiles vivos: o
   arrasto engasgava e sobravam buracos de pintura onde o tile ainda nao tinha sido composto.
   O .leaflet-tile-pane e' UM elemento que contem todos eles — um filtro so, promovido a camada
   uma vez, e o custo some. E os pontos continuam intactos: no Leaflet os marcadores moram em
   .leaflet-marker-pane, painel IRMAO deste, fora do alcance do filtro. */
/* O CLAREAMENTO E' POR BASE, e vem do JS (--vx-map-filtro). Um numero fixo nao serve para todas:
   o que salva o cinza quase preto lava a base clara, e o satelite nao quer filtro nenhum. O valor
   de cada estilo mora no catalogo VX_BASES, junto da URL dele. */
.vx-map .leaflet-tile-pane { filter: var(--vx-map-filtro, brightness(1.12) contrast(.96) saturate(1.05)); }
/* atribuicao do Esri: exigida por eles, e discreta o bastante para nao disputar com o mapa */
.vx-map .leaflet-control-attribution { background:rgba(0,0,0,.35); color:var(--vx-faint);
  font-size:9.5px; padding:1px 5px; border-radius:calc(5px * var(--vx-raio, 1)) 0 0 0; }
.vx-map .leaflet-control-attribution a { color:var(--vx-muted); }

/* Globo 3D do radar (globe.gl) */
.vx-globe-wrap { position:relative; margin-top:6px; border-radius:calc(16px * var(--vx-raio, 1)); overflow:hidden; border:1px solid var(--vx-border);
  background:
    radial-gradient(1000px 520px at 72% 16%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 13%, transparent)), transparent 60%),
    radial-gradient(820px 480px at 16% 84%, rgba(132,86,225,.16), transparent 60%),
    radial-gradient(640px 640px at 40% 50%, rgba(35,80,160,.18), transparent 70%),
    radial-gradient(1200px 900px at 50% 50%, #060a16 0%, #02030a 75%); }
/* campo de estrelas (galáxia) atrás do globo */
.vx-globe-wrap::before { content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 28% 62%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.1px 1.1px at 42% 28%, rgba(190,235,255,.9), transparent 60%),
    radial-gradient(1.7px 1.7px at 58% 74%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 22%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.4px 1.4px at 84% 56%, rgba(200,255,240,.9), transparent 60%),
    radial-gradient(1px 1px at 8% 78%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 30%, #fff, transparent 60%),
    radial-gradient(1px 1px at 35% 88%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 50% 8%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 64% 48%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 20% 40%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 78% 84%, rgba(124,242,200,.9), transparent 60%),
    radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,.7), transparent 60%);
  animation: vx-stars 90s linear infinite; }
@keyframes vx-stars { from { transform:translate3d(0,0,0); } to { transform:translate3d(-2%,-3%,0); } }
.vx-globe { position:relative; z-index:1; height:min(64vh, 640px); width:100%; background:transparent; }
.vx-globe canvas { display:block; background:transparent; }
.vx-globe-bases { position:absolute; left:12px; bottom:46px; z-index:600; display:flex; gap:6px; flex-wrap:wrap;
  background:rgba(8,12,20,.72); backdrop-filter:blur(6px); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 99px); padding:5px 7px; }
.vx-globe-bases .vx-fchip { font-size:11.5px; }
.vxg-lbl { background:rgba(8,12,20,.9); border:1px solid color-mix(in srgb, var(--vx-teal-br) 40%, transparent); border-radius:calc(10px * var(--vx-raio, 1)); padding:7px 11px;
  color:#e9ecf4; font-size:12px; box-shadow:var(--vx-sombra, 0 10px 26px -10px rgba(0,0,0,.7)); }
.vxg-lbl span { color:#9fb0c3; }

/* Marca Vortex sobre o mapa/globo (canto inferior esquerdo) */
.vx-map-brand { position:absolute; left:12px; bottom:12px; z-index:500; pointer-events:none;
  font-size:15px; font-weight:700; letter-spacing:calc(-.5px * var(--vx-tracking, 1)); color:rgba(233,236,244,.92);
  text-shadow:var(--vx-sombra-texto, 0 1px 6px rgba(0,0,0,.7)); display:flex; align-items:center; }
.vx-map-brand span { color:var(--vx-teal-br); }
.vx-map-hud { position:absolute; top:12px; left:12px; z-index:500; display:flex; align-items:center; gap:8px;
  background:rgba(8,12,20,.7); backdrop-filter:blur(6px); border:1px solid color-mix(in srgb, var(--vx-teal-br) 30%, transparent); border-radius:var(--vx-pill, 99px);
  padding:7px 14px; font-size:12.5px; font-weight:600; color:#e9ecf4; pointer-events:none; }
.vx-map-live { width:9px; height:9px; border-radius:50%; background:var(--vx-teal-br); box-shadow:0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 60%, transparent); animation:vxlive 1.8s ease-out infinite; }
@keyframes vxlive { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 60%, transparent); } 100% { box-shadow:0 0 0 12px color-mix(in srgb, var(--vx-teal-br) 0%, transparent); } }

/* marcadores pulsando (divIcon) */
.vxmk { position:relative; }
.vxmk .vxmk-dot { position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #aef5d8, var(--vx-teal-br) 60%); box-shadow:var(--vx-sombra, 0 0 10px 2px color-mix(in srgb, var(--vx-teal-br) 85%, transparent)); }
.vxmk .vxmk-pulse { position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:color-mix(in srgb, var(--vx-teal-br) 50%, transparent); animation:vxmkpulse 2s ease-out infinite; }
.vxmk.hot .vxmk-dot { background:radial-gradient(circle at 35% 30%, #ffb38a, #ff6a3d 60%); box-shadow:var(--vx-sombra, 0 0 11px 2px rgba(255,106,61,.9)); }
.vxmk.hot .vxmk-pulse { background:rgba(255,106,61,.5); }
.vxmk.warm .vxmk-dot { background:radial-gradient(circle at 35% 30%, #ffe08a, #f2b441 60%); box-shadow:var(--vx-sombra, 0 0 10px 2px rgba(242,180,65,.85)); }
.vxmk.warm .vxmk-pulse { background:rgba(242,180,65,.5); }
.vxmk.cold .vxmk-dot { background:radial-gradient(circle at 35% 30%, #bfe6ff, #38bdf8 60%); box-shadow:var(--vx-sombra, 0 0 10px 2px rgba(56,189,248,.8)); }
.vxmk.cold .vxmk-pulse { background:rgba(56,189,248,.45); }
/* capturado (pré-cliente · roxo Vortex) e cliente (verde) — a bolinha muda ao capturar/converter */
.vxmk.cap .vxmk-dot { background:radial-gradient(circle at 35% 30%, #e9d5ff, #a855f7 60%); box-shadow:var(--vx-sombra, 0 0 11px 2px rgba(168,85,247,.9)); }
.vxmk.cap .vxmk-pulse { background:rgba(168,85,247,.5); }
.vxmk.cli .vxmk-dot { background:radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e 60%); box-shadow:var(--vx-sombra, 0 0 11px 3px rgba(34,197,94,.9)); }
.vxmk.cli .vxmk-pulse { background:rgba(34,197,94,.45); }
@keyframes vxmkpulse { 0% { transform:scale(1); opacity:.7; } 100% { transform:scale(3.4); opacity:0; } }
.vxmk-tip { background:#11161f !important; color:#e9ecf4 !important; border:1px solid var(--vx-border) !important; box-shadow:var(--vx-sombra, 0 8px 20px -8px rgba(0,0,0,.6)) !important; font-size:12px !important; font-weight:600 !important; }
.vxmk-tip::before { border-top-color:#11161f !important; }
/* leaflet dark tweaks */
.leaflet-container { background:#0a0f1a !important; font-family:Roboto,Arial,sans-serif; }
.leaflet-control-zoom a { background:#11161f !important; color:#e9ecf4 !important; border-color:var(--vx-border) !important; }

/* ── Radar: legenda + popup ── */
.vx-map-legend { position:absolute; right:12px; bottom:12px; z-index:500; display:flex; gap:12px; pointer-events:none;
  background:rgba(8,12,20,.7); backdrop-filter:blur(6px); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 99px); padding:6px 14px; font-size:11.5px; color:#e9ecf4; }
.vx-map-legend span { display:inline-flex; align-items:center; gap:5px; }
.vx-map-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.vx-map-legend i.q { background:#ff6a3d; box-shadow:var(--vx-sombra, 0 0 6px #ff6a3d); }
.vx-map-legend i.m { background:#f2b441; box-shadow:var(--vx-sombra, 0 0 6px rgba(242,180,65,.6)); }
.vx-map-legend i.f { background:#38bdf8; box-shadow:var(--vx-sombra, 0 0 6px #38bdf8); }
.vx-map-legend i.cap { background:#a855f7; box-shadow:var(--vx-sombra, 0 0 6px #a855f7); }
.vx-map-legend i.cli { background:#22c55e; box-shadow:var(--vx-sombra, 0 0 6px #22c55e); }
/* o anel do comércio no globo: ponto pequeno com um aro solto em volta, como no mapa */
.vx-map-legend i.anel { width:11px; height:11px; background:transparent; position:relative; }
.vx-map-legend i.anel::after { content:""; position:absolute; inset:3px; border-radius:50%; background:rgba(255,255,255,.55); }
.vx-map-legend i.anel.exp { border:1.5px solid #f59e0b; }
.vx-map-legend i.anel.imp { border:1.5px solid #06b6d4; }
/* Configurações: a legenda das siglas das fontes de comércio (só o administrador vê) */
.vx-siglas { margin-top:6px; display:flex; flex-direction:column; gap:4px; max-width:520px; }
.vx-sigla-li { display:grid; grid-template-columns:64px minmax(0,1fr) auto auto; gap:10px; align-items:center;
  font-size:12px; padding:5px 10px; border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-bg-2); border:1px solid var(--vx-border); }
.vx-sigla-li span { color:var(--vx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-sigla-li .vx-sigla-st { font-size:11px; color:var(--vx-amber,#f0b429); }
.vx-sigla-li .vx-sigla-st.ok { color:var(--vx-teal-br); }
.vx-sigla-li a { font-size:11px; color:var(--vx-muted); }
/* ═══════════ CONFIGURAÇÕES → INTELIGÊNCIA DE MERCADO: A LISTA DE MÓDULOS ═══════════
   Enxuta por pedido do Daniel (23/09/2026: "ponha menos detalhes, apenas módulos a serem habilitados"): uma linha por
   módulo — caixa, letra e país, o nome real embaixo, o estado numa palavra e o "ver detalhes" — e o resto num bloco que
   abre embaixo da linha. As .vx-col-h/.vx-col-sum/.vx-col-body, lá no alto do arquivo, são das colunas do funil: outra
   tela, apesar do prefixo. */
.vx-col-mods-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vx-col-mods-cab b { display:block; font-size:13.5px; color:var(--vx-text); }
.vx-col-mods-ds { font-size:11.5px; line-height:1.45; color:var(--vx-muted); margin-top:1px; }
.vx-col-lista { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.vx-col-mod { border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-bg-2); min-width:0; }
.vx-col-mod.on { border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); }
/* a linha é GRADE, não flex com quebra: o nome ganha a sobra (minmax(0,1fr)) e o estado e a seta nunca empurram o nome
   para uma letra por linha — a armadilha do flex:1 ao lado de irmão rígido (ver vortex-mobile-armadilhas) */
.vx-col-lin { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"cx nm est ver";
  align-items:center; column-gap:8px; min-height:46px; padding:1px 6px 1px 2px; }
.vx-col-lin > .cx { grid-area:cx; margin:0; }
.vx-col-lin > .nm { grid-area:nm; min-width:0; padding:5px 0; line-height:1.35; }
.vx-col-lin > .nm .l1 { font-size:13px; color:var(--vx-text); overflow-wrap:break-word; }
.vx-col-lin > .nm .l1 b { font-weight:700; white-space:nowrap; }
.vx-col-lin > .nm .l2 { font-size:11.5px; color:var(--vx-muted); overflow-wrap:break-word; }
.vx-col-lin > .est { grid-area:est; display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--vx-muted); white-space:nowrap; }
.vx-col-lin > .est.on { color:var(--vx-teal-br); font-weight:600; }
/* o ponto da última rodada que falhou: vermelho pede alguém; âmbar veio pela metade. A cor não é o único sinal — o
   ponto tem title e aria-label, e os detalhes dizem o status por extenso */
.vx-col-pt { display:inline-block; flex:0 0 auto; width:7px; height:7px; border-radius:50%; }
.vx-col-pt.ruim { background:#ef4444; }
.vx-col-pt.meio { background:#f59e0b; }
/* os "abrir" desta aba: o "ver detalhes" de cada módulo e os recolhidos de Configurações (créditos, fornecedor) */
.vx-col-ver, .vx-cfg-dobra { display:inline-flex; align-items:center; gap:2px; min-height:32px; padding:0 4px 0 8px; border:0;
  border-radius:calc(8px * var(--vx-raio, 1)); background:transparent; font:inherit; font-size:12px; color:var(--vx-teal-br); cursor:pointer; white-space:nowrap; }
.vx-col-ver { grid-area:ver; }
.vx-col-ver .tx { font-size:inherit; color:inherit; }
.vx-cfg-dobra { padding-left:4px; }
.vx-col-ver:hover, .vx-cfg-dobra:hover { background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-col-ver:focus-visible, .vx-cfg-dobra:focus-visible { outline:2px solid var(--vx-teal-br); outline-offset:1px; }
/* os detalhes começam na coluna do nome, e o tracejado diz que são da linha de cima */
.vx-col-det { display:flex; flex-direction:column; gap:3px; min-width:0; margin:0 12px 0 52px; padding:8px 0 12px;
  border-top:1px dashed var(--vx-border); font-size:12px; line-height:1.5; color:var(--vx-muted); overflow-wrap:break-word; }
.vx-col-det b { color:var(--vx-text); font-weight:600; }
.vx-col-det a { color:var(--vx-teal-br); }
.vx-col-det em { font-style:normal; }
.vx-col-det code { font-size:11px; padding:1px 5px; border-radius:calc(5px * var(--vx-raio, 1)); background:rgba(255,255,255,.05); overflow-wrap:anywhere; }
.vx-col-det .sec { margin-top:8px; font-size:10.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-col-det .ex { font-size:inherit; color:var(--vx-muted); }
.vx-col-det .alerta { color:#f0b429; }
.vx-col-det .st { font-style:normal; font-weight:700; font-size:10.5px; padding:0 5px; border-radius:calc(4px * var(--vx-raio, 1)); margin-left:4px; }
.vx-col-det .st.ok { color:#22c55e; background:rgba(34,197,94,.12); }
.vx-col-det .st.meio { color:#f59e0b; background:rgba(245,158,11,.12); }
.vx-col-det .st.ruim { color:#ef4444; background:rgba(239,68,68,.12); }
.vx-col-det .acoes { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; }
.vx-col-bt { min-height:32px; padding:4px 12px; border:1px solid var(--vx-teal-br); border-radius:calc(8px * var(--vx-raio, 1)); background:transparent;
  font:inherit; font-size:12px; color:var(--vx-teal-br); cursor:pointer; }
.vx-col-bt:disabled { opacity:.55; cursor:default; }
/* o que Configurações desenha nos detalhes da busca paga: a chave, a fonte dos dados e quem é o fornecedor */
.vx-col-bp { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.vx-cfg-bp-ds { font-size:12px; color:var(--vx-muted); }
/* créditos e licenças, recolhidos no fim da aba */
.vx-cfg-cred { margin-top:16px; }
.vx-cfg-cred-card { margin-top:6px; }
/* a senha que abre "créditos e licenças" (01/10/2026) */
.vx-cfg-cred-senha { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:6px 0 10px; }
.vx-cfg-cred-senha input { max-width:220px; }
.vx-cfg-cred-senha .erro { font-size:12px; color:#ef4444; }
.vx-cfg-cred-ds { font-size:12px; line-height:1.5; color:var(--vx-muted); }
.vx-cfg-cred-lista { display:flex; flex-direction:column; gap:8px; margin-top:10px; font-size:12px; line-height:1.5;
  color:var(--vx-text); overflow-wrap:break-word; }
.vx-cfg-cred-lista a { color:var(--vx-teal-br); }
.vx-cfg-cred-lista .cr { font-size:inherit; color:var(--vx-muted); }
/* celular: o estado desce para baixo do nome e o "ver detalhes" vira só a seta. A 375px, com o estado e o texto do
   lado, o nome ficava com uns 120px e "Estados Unidos (Texas)" descia em três linhas */
@media (max-width: 600px) {
  .vx-col-lin { grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"cx nm ver" "cx est ver"; padding:2px 2px 4px 0; }
  .vx-col-lin > .nm { padding:4px 0 0; }
  .vx-col-lin > .est { justify-self:start; padding-bottom:3px; }
  .vx-col-ver { min-width:40px; min-height:40px; justify-content:center; padding:0; }
  .vx-col-ver .tx { display:none; }
  .vx-col-det { margin:0 10px; }
}
/* tema claro: o verde-água e o âmbar da casa, em letra de 12px sobre o cinza da linha, ficavam abaixo de 4,5:1 */
:root.vx-light .vx-col-mod.on { border-color:rgba(19,138,99,.45); }
:root.vx-light .vx-col-lin > .est.on, :root.vx-light .vx-col-ver, :root.vx-light .vx-cfg-dobra, :root.vx-light .vx-col-bt,
:root.vx-light .vx-col-det a, :root.vx-light .vx-cfg-cred-lista a { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-col-bt { border-color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-col-ver:hover, :root.vx-light .vx-cfg-dobra:hover { background:rgba(19,138,99,.08); }
:root.vx-light .vx-col-ver:focus-visible, :root.vx-light .vx-cfg-dobra:focus-visible { outline-color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-col-pt.meio { background:#b45309; }
:root.vx-light .vx-col-pt.ruim { background:#dc2626; }
:root.vx-light .vx-col-det .alerta { color:#b45309; }
:root.vx-light .vx-col-det code { background:rgba(15,23,42,.06); }
:root.vx-light .vx-col-det .st.ok { color:#15803d; }
:root.vx-light .vx-col-det .st.meio { color:#b45309; }
:root.vx-light .vx-col-det .st.ruim { color:#b91c1c; }
/* com os anéis a legenda chega a 7 itens: no celular ela quebra linha em vez de vazar pela direita */
@media (max-width: 700px) {
  .vx-map-legend { max-width:calc(100% - 24px); flex-wrap:wrap; justify-content:flex-end; row-gap:4px; gap:10px; border-radius:calc(14px * var(--vx-raio, 1)); }
}

/* "marcar área no mapa" — controle flutuante */
.vx-map-area { position:absolute; left:12px; top:54px; z-index:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:rgba(8,12,20,.72); backdrop-filter:blur(6px); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:6px 8px; }
.vx-map-areabtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--vx-pill, 99px); cursor:pointer;
  font-size:12px; font-weight:700; color:#e9ecf4; background:var(--vx-surface); border:1px solid var(--vx-border); transition:filter .15s, border-color .15s; }
.vx-map-areabtn:hover { border-color:var(--vx-teal-br); }
.vx-map-areabtn.on { background:color-mix(in srgb, var(--vx-teal-br) 18%, transparent); border-color:var(--vx-teal-br); color:var(--vx-teal-br); }
.vx-map-area .r { font-size:11.5px; color:#cbd5e1; display:inline-flex; align-items:center; gap:5px; }
.vx-map-area .r input { width:48px; height:28px; background:#11161f; border:1px solid var(--vx-border); border-radius:calc(7px * var(--vx-raio, 1)); color:#e9ecf4; text-align:center; font-size:12px; }
/* a barra do globo quebra a linha antes dos botões de zoom do mapa (canto de cima à direita) — ia até a borda e passava por
   baixo deles (01/10/2026, o Daniel: "fica bugado") */
.vx-map-area { max-width:calc(100% - 84px); }
.vx-map-go { height:30px; padding:0 14px; border-radius:var(--vx-pill, 99px); cursor:pointer; font-size:12px; font-weight:700; color:var(--vx-sobre-destaque, #04110c);
  background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br))); border:none; transition:filter .15s, transform .12s; }
.vx-map-go:hover:not(:disabled) { filter:brightness(1.08); transform:translateY(-1px); }
.vx-map-go:disabled { opacity:.5; cursor:not-allowed; }

/* popup do marcador (Leaflet) — dark + ações */
.vxmp-pop .leaflet-popup-content-wrapper { background:#11161f; color:#e9ecf4; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); box-shadow:var(--vx-sombra, 0 16px 40px -16px rgba(0,0,0,.7)); }
.vxmp-pop .leaflet-popup-tip { background:#11161f; border:1px solid var(--vx-border); }
.vxmp-pop .leaflet-popup-content { margin:12px 14px; }
.vxmp-nm { font-size:14px; font-weight:800; line-height:1.2; }
.vxmp-sub { font-size:11.5px; color:var(--vx-teal-br); font-weight:600; margin-top:2px; }
.vxmp-acts { display:flex; gap:6px; margin-top:9px; }
.vxmp-acts button { flex:1; height:30px; border:none; cursor:pointer; border-radius:calc(7px * var(--vx-raio, 1)); font-size:12px; font-weight:700;
  background:var(--vx-surface); color:var(--vx-text); transition:filter .15s; }
.vxmp-acts button:hover { filter:brightness(1.15); }
.vxmp-acts button.cap { background:linear-gradient(135deg,#0e9d6a,#16c089); color:#fff; }

/* ── MudBlazor: dropdowns/menus no PADRÃO ESCURO do Vortex ─────────────────
   Select, Autocomplete, Menu e DatePicker abrem num popover que vinha BRANCO
   (surface padrão do Mud). Aqui ele herda a superfície escura + borda + hover
   teal do sistema. Não afeta dialog (.mud-dialog) nem tooltip (.mud-tooltip). */
.mud-popover.mud-popover-open,
.mud-popover-provider .mud-popover {
  background-color: var(--vx-surface-2) !important;
  color: var(--vx-text) !important;
  border: 1px solid var(--vx-border-2);
  border-radius: calc(12px * var(--vx-raio, 1));
  box-shadow: var(--vx-sombra, 0 20px 50px -20px rgba(0,0,0,.72));
  backdrop-filter: blur(2px);
}
.mud-popover .mud-list { background-color: transparent !important; padding: 4px; }
.mud-popover .mud-list-item { color: var(--vx-text) !important; border-radius: calc(8px * var(--vx-raio, 1)); margin: 1px 2px; }
.mud-popover .mud-list-item:hover { background-color: var(--vx-surface-3) !important; }
.mud-popover .mud-list-item.mud-selected-item {
  background-color: color-mix(in srgb, var(--vx-teal-br) 14%, transparent) !important; color: var(--vx-teal-soft) !important;
}
.mud-popover .mud-list-item-text, .mud-popover .mud-list-item .mud-typography { color: inherit !important; }
/* input interno do autocomplete/select já é escuro; garante o texto legível */
.mud-popover .mud-input-slot, .mud-popover .mud-input { color: var(--vx-text) !important; }

/* DROPDOWN: UMA BARRA DE ROLAGEM, nao duas.
   O MudBlazor ja limita a altura do POPOVER e o deixa rolar. Ao limitar tambem a altura da LISTA
   dentro dele, os dois viravam area rolavel — e apareciam duas barras encostadas, cada uma andando
   por conta propria. Quem rola e a lista; o popover so segura a borda arredondada e a sombra. */
.mud-popover.mud-popover-open, .mud-popover-provider .mud-popover {
  overflow: hidden !important; max-height: none !important;
}
.mud-popover .mud-list { overflow-x: hidden !important; overflow-y: auto !important; max-height: 62vh !important; }
.mud-autocomplete .mud-popover .mud-list-item { white-space: normal; }
/* Scrollbar da lista do dropdown: o trilho GLOBAL é transparent e o Chrome 121+ o pinta claro
   dentro do popover (aparecia branco). Aqui o trilho é a própria superfície (escura no dark,
   clara no light) e o polegar é a surface-3 — some no fundo, sem faixa branca. */
.mud-popover .mud-list { scrollbar-color: var(--vx-surface-3) var(--vx-surface-2); scrollbar-width: thin; }
.mud-popover .mud-list::-webkit-scrollbar { width: 10px; }
.mud-popover .mud-list::-webkit-scrollbar-track { background: var(--vx-surface-2) !important; border-radius: calc(8px * var(--vx-raio, 1)); }
.mud-popover .mud-list::-webkit-scrollbar-thumb { background: var(--vx-surface-3) !important; border-radius: calc(8px * var(--vx-raio, 1)); border: 2px solid var(--vx-surface-2); background-clip: content-box; }
.mud-popover .mud-list::-webkit-scrollbar-thumb:hover { background: var(--vx-teal-soft) !important; background-clip: content-box; }

/* ── Ficha de crédito do cliente (lida ao vivo no ERP) ───────────────────────── */
.vx-cred { margin:8px 0; }
/* MESMA MEDIDA DOS OUTROS BOTOES DO PAINEL. Este e o unico ponto do sistema onde tres controles de
   tres tamanhos aparecem empilhados: "Ver situacao de credito" (7/12, raio 9, 12,5px), "Cancelar no
   Protheus" (.vx-pd-btn, 10/16, raio 11, 13,5px) e as pilulas de documento. Botao com a mesma
   natureza e tamanho diferente le como descuido -- e era o que aparecia no cartao do ERP.
   A GEOMETRIA vem do .vx-pd-btn; o PESO nao: font-weight 700 daria a ele a mesma importancia do
   botao principal, e o cartao do ERP existe justamente para nao equiparar coisas de naturezas
   diferentes. As pilulas de documento (.vx-pd-doc) ficam redondas de proposito: sao LINK, nao acao. */
.vx-cred-btn { background:transparent; color:var(--vx-teal-soft); border:1px solid var(--vx-border);
  border-radius:calc(11px * var(--vx-raio, 1)); padding:10px 16px; font-size:13.5px; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.vx-cred-btn:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-cred-btn:disabled { opacity:.6; cursor:default; }
.vx-cred-erro { font-size:11.5px; color:#ff8585; margin-left:8px; }
.vx-cred-box { border-radius:calc(11px * var(--vx-raio, 1)); padding:11px 13px; border:1px solid var(--vx-border); background:var(--vx-surface); }
.vx-cred-box.ok { border-color:color-mix(in srgb, var(--vx-teal-br) 38%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); }
.vx-cred-box.bloq { border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.07); }
.vx-cred-top { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--vx-text); }
.vx-cred-box.ok .vx-cred-top { color:var(--vx-teal-br); }
.vx-cred-box.bloq .vx-cred-top { color:#f59e0b; }
.vx-cred-risco { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); padding:2px 7px;
  border-radius:var(--vx-pill, 99px); background:rgba(255,255,255,.08); color:var(--vx-muted); }
.vx-cred-re { cursor:pointer; color:var(--vx-muted); font-size:14px; }
.vx-cred-re:hover { color:var(--vx-teal-br); }
.vx-cred-motivo { font-size:12px; color:#f59e0b; margin-top:5px; }
.vx-cred-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:8px 14px; margin-top:9px; }
.vx-cred-grid > div { display:flex; flex-direction:column; }
.vx-cred-grid span { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:var(--vx-faint); }
.vx-cred-grid b { font-size:13px; color:var(--vx-text); font-weight:600; }
.vx-cred-grid b.ruim { color:#ff8585; }

/* ── Precificação em massa ─────────────────────────────────────────────────── */
.vx-pm-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:14px 0; }
.vx-pm-kpis > div { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:12px 14px; display:flex; flex-direction:column; }
.vx-pm-kpis span { font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-faint); }
.vx-pm-kpis b { font-size:22px; font-weight:600; color:var(--vx-text); margin-top:2px; }
.vx-pm-kpis b.alerta { color:#f59e0b; }
.vx-pm-bar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.vx-pm-chk { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-pm-margem { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--vx-muted);
  background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:5px 10px; }
.vx-pm-tab { border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); }
.vx-pm-th, .vx-pm-tr { display:grid; grid-template-columns:minmax(240px,3fr) 70px 90px 118px 128px 78px 108px; gap:10px; align-items:center; padding:9px 14px; }
.vx-pm-th { background:var(--vx-surface-2); font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-faint); position:sticky; top:0; z-index:2; }
.vx-pm-tr { border-top:1px solid var(--vx-border); font-size:13px; color:var(--vx-text); }
.vx-pm-tr:hover { background:rgba(255,255,255,.02); }
.vx-pm-tr.sem { border-left:3px solid #f59e0b; }
.vx-pm-tr .mat { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-pm-tr .cst { color:var(--vx-muted); }
.vx-pm-tr .mrg { color:var(--vx-teal-br); font-weight:600; }
.vx-pm-tr .mrg.ruim { color:#ff8585; }
.vx-pm-inp { width:100%; height:32px; background:var(--vx-surface-2); border:1px solid var(--vx-border);
  border-radius:calc(8px * var(--vx-raio, 1)); color:var(--vx-text); padding:0 8px; font-size:13px; }
.vx-pm-inp:focus { outline:none; border-color:var(--vx-teal); }
.vx-pm-inp.usd { color:var(--vx-teal-soft); }
.vx-pm-vazio { padding:26px; text-align:center; color:var(--vx-muted); font-size:13.5px; }

/* preço por m² no card (o total fica em destaque; o /m² é a régua de negociação) */
.vx-gcard-foot .vx-pm2 { font-size:11px; color:var(--vx-muted); margin-left:6px; white-space:nowrap; }

/* ── Demonstração guiada ───────────────────────────────────────────────────── */
.vx-dm-trilha { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 18px; }
.vx-dm-etapa { display:flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--vx-pill, 99px);
  border:1px solid var(--vx-border); background:var(--vx-surface); font-size:12.5px; color:var(--vx-muted); }
.vx-dm-etapa .n { width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--vx-surface-2); font-size:11px; font-weight:700; }
.vx-dm-etapa.agora { border-color:var(--vx-teal); color:var(--vx-text); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-dm-etapa.agora .n { background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); }
.vx-dm-etapa.feito { color:var(--vx-teal-soft); border-color:color-mix(in srgb, var(--vx-teal-br) 30%, transparent); }
.vx-dm-etapa.feito .n { background:color-mix(in srgb, var(--vx-teal-br) 18%, transparent); color:var(--vx-teal-br); }
.vx-dm-palco { display:flex; justify-content:center; }
.vx-dm-card { width:100%; max-width:760px; background:var(--vx-surface); border:1px solid var(--vx-border);
  border-radius:calc(16px * var(--vx-raio, 1)); padding:26px 28px; }
.vx-dm-card h2 { margin:0 0 8px; font-size:21px; font-weight:600; color:var(--vx-text); }
.vx-dm-card p { margin:0 0 16px; font-size:14px; line-height:1.65; color:var(--vx-muted); }
.vx-dm-info { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:0 0 18px; }
.vx-dm-info > div { background:var(--vx-surface-2); border-radius:calc(10px * var(--vx-raio, 1)); padding:10px 12px; display:flex; flex-direction:column; }
.vx-dm-info span { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-faint); }
.vx-dm-info b { font-size:15px; color:var(--vx-text); margin-top:2px; }
.vx-dm-info b.on { color:var(--vx-teal-br); }
.vx-dm-sel { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.vx-dm-sel .cli, .vx-dm-sel .chp { background:var(--vx-surface-2); border-radius:calc(10px * var(--vx-raio, 1)); padding:10px 13px; }
.vx-dm-sel .cli span { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-faint); display:block; }
.vx-dm-sel .cli b { font-size:15px; color:var(--vx-text); }
.vx-dm-sel .cli i { font-style:normal; font-size:11.5px; color:var(--vx-muted); margin-left:8px; }
.vx-dm-sel .chp b { display:block; font-size:13px; color:var(--vx-text); font-weight:600; }
.vx-dm-sel .chp span { font-size:11.5px; color:var(--vx-muted); }
.vx-dm-link { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
.vx-dm-link .vx-input { flex:1; height:40px; font-size:12px; }
.vx-dm-abrir { color:var(--vx-teal-br); font-size:12.5px; text-decoration:none; white-space:nowrap; }
.vx-dm-prova { background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 32%, transparent); border-radius:calc(10px * var(--vx-raio, 1));
  padding:11px 13px; font-size:13px; color:var(--vx-teal-br); margin-bottom:18px; }
.vx-dm-prova.aviso { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35); color:#f59e0b; }
.vx-dm-prova a { color:inherit; }
.vx-dm-erp { display:flex; align-items:center; gap:10px; background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 38%, transparent); border-radius:calc(12px * var(--vx-raio, 1)); padding:14px 16px; margin-bottom:16px; }
.vx-dm-erp span { font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-muted); }
.vx-dm-erp b { font-size:26px; font-weight:700; color:var(--vx-teal-br); letter-spacing:calc(-.5px * var(--vx-tracking, 1)); }
.vx-dm-erp .s { font-size:12px; color:var(--vx-teal-soft); text-transform:none; letter-spacing:0; }
.vx-dm-fim { font-size:13.5px; color:var(--vx-muted); margin-bottom:16px !important; }
.vx-dm-btn { display:inline-flex; align-items:center; gap:8px; background:var(--vx-cheio, linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)));
  color:var(--vx-sobre-destaque, #04110c); border:none; border-radius:calc(11px * var(--vx-raio, 1)); padding:12px 22px; font-size:14.5px; font-weight:700; cursor:pointer; }
.vx-dm-btn:hover { transform:translateY(-1px); }
.vx-dm-btn:disabled { opacity:.55; cursor:default; transform:none; }
.vx-dm-btn.alt { background:transparent; color:var(--vx-text); border:1px solid var(--vx-border); }

/* análise da ficha de crédito (o que o número do ERP sozinho não conta) */
.vx-cred-analise { margin-top:10px; border-top:1px solid var(--vx-border); padding-top:9px;
  display:flex; flex-direction:column; gap:5px; }
.vx-cred-analise > div { font-size:12px; line-height:1.5; color:var(--vx-muted); }
.vx-cred-analise > div.alerta { color:#f59e0b; }

/* De-Para: edição na própria linha (corrigir um código não pode exigir apagar e recadastrar) */
.vx-dp-row.edit { background:rgba(45,212,191,.06); outline:1px solid rgba(45,212,191,.35); border-radius:calc(8px * var(--vx-raio, 1)); }
.vx-dp-inp { width:100%; background:#0e1319; color:var(--vx-text,#e6edf3); border:1px solid rgba(255,255,255,.16);
  border-radius:calc(6px * var(--vx-raio, 1)); padding:5px 8px; font-size:13px; font-family:inherit; }
.vx-dp-inp:focus { outline:none; border-color:var(--vx-teal-soft,#2dd4bf); }
.vx-dp-inp.cod { font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-dp-row:not(.edit) .vx-dp-vtx, .vx-dp-row:not(.edit) .vx-dp-erp, .vx-dp-row:not(.edit) .vx-dp-obs { cursor:text; }
.vx-dp-row:not(.edit) .vx-dp-vtx:hover, .vx-dp-row:not(.edit) .vx-dp-erp:hover,
.vx-dp-row:not(.edit) .vx-dp-obs:hover { text-decoration:underline dotted rgba(255,255,255,.35); text-underline-offset:3px; }

/* Galeria: por que este material está "sob consulta" (custo zerado no ERP vs. falta a margem) */
.vx-mat-alerta { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:1px 8px;
  border-radius:var(--vx-pill, 999px); font-size:11.5px; font-weight:600; color:#e0b34a;
  background:rgba(224,179,74,.10); border:1px solid rgba(224,179,74,.32); cursor:help; }

/* Oferta: precificar sem sair da tela (chapa "sob consulta" entraria a R$ 0 e o ERP recusaria) */
.vx-of-precobtn { display:inline-flex; align-items:center; gap:4px; margin-top:4px; padding:2px 8px; border-radius:var(--vx-pill, 999px);
  font-size:11.5px; font-weight:600; color:#e0b34a; background:rgba(224,179,74,.10);
  border:1px solid rgba(224,179,74,.34); cursor:pointer; }
.vx-of-precobtn:hover { background:rgba(224,179,74,.18); }
.vx-of-precodlg { position:fixed; z-index:1401; top:50%; left:50%; transform:translate(-50%,-50%); width:min(440px,92vw);
  background:var(--vx-panel,#12161c); border:1px solid rgba(255,255,255,.10); border-radius:calc(14px * var(--vx-raio, 1)); padding:18px 20px;
  box-shadow:var(--vx-sombra, 0 24px 70px rgba(0,0,0,.6)); }
.vx-of-precodlg h3 { margin:0 0 2px; font-size:16px; }
.vx-of-precodlg p { margin:0 0 14px; font-size:12.5px; color:var(--vx-muted); }
.vx-of-precodlg small { display:block; margin-top:10px; font-size:11.5px; color:var(--vx-faint,#8b949e); }
.vx-of-precorow { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
.vx-of-precorow .prev { text-align:right; }
.vx-of-precorow .prev span { display:block; font-size:11px; color:var(--vx-muted); }
.vx-of-precorow .prev b { font-size:17px; color:var(--vx-teal-soft); }
.vx-of-precoacoes { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.vx-of-precocusto { display:flex; justify-content:space-between; align-items:baseline; padding:8px 12px; margin-bottom:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:calc(9px * var(--vx-raio, 1)); }
.vx-of-precocusto span { font-size:11.5px; color:var(--vx-muted); }
.vx-of-precocusto b { font-size:14px; }
.vx-of-precoprev { display:flex; justify-content:space-between; align-items:baseline; margin-top:10px; }
.vx-of-precoprev span { font-size:11.5px; color:var(--vx-muted); }
.vx-of-precoprev b { font-size:18px; color:var(--vx-teal-soft); }
.vx-dp-row.inativa { opacity:.5; }
.vx-dp-row.inativa .vx-dp-tag { color:#e0b34a; font-size:11px; }
/* documento ainda não disponível nesta etapa — visível, mas sem link (o motivo vai no title) */
.vx-pd-doc.off { opacity:.42; cursor:not-allowed; text-decoration:line-through; }

/* Board arrastável: a mão indica que dá pra puxar; durante o arrasto o texto não seleciona */
.vx-pipe { cursor: grab; }
.vx-pipe.vx-pan-ativo { cursor: grabbing; user-select: none; scroll-behavior: auto; }
/* durante o arrasto os filhos ignoram o mouse; a classe só existe enquanto o pan está ativo */
.vx-pipe.vx-pan-ativo .vx-pedido-card { pointer-events: none; }

/* ═══════════════════ O CORREDOR — proposta corporativa ═══════════════════
   Uma SALA por material, CAVALETE por bloco, TRILHO para navegar e BANDEJA para conferir.
   A parede única de cards era a lista do vendedor; o comprador escolhe a pedra primeiro. */
.vx-cr { display:block; }
@media (min-width:900px) {
  .vx-cr.com-trilho { display:grid; grid-template-columns:216px 1fr; column-gap:clamp(24px,3vw,48px); align-items:start; }
}

/* ── TRILHO ── vertical no desktop, fita rolante no celular. Mesmo markup, duas encarnações.
   Ele É o filtro quando a oferta tem muitos materiais: em vez de esconder peças, leva até elas. */
.vx-cr-rail { display:flex; flex-direction:row; gap:8px; overflow-x:auto; scroll-snap-type:x proximity;
  position:sticky; top:0; z-index:30; padding:10px 0; margin:0 0 8px;
  background:linear-gradient(180deg, var(--vx-bg) 70%, transparent); backdrop-filter:blur(8px); }
.vx-cr-rail::-webkit-scrollbar { display:none; }
.vx-cr-rail-i { display:flex; align-items:center; gap:9px; flex:0 0 auto; scroll-snap-align:start;
  padding:8px 13px; border-radius:var(--vx-pill, 999px); border:1px solid var(--vx-border); text-decoration:none;
  color:var(--vx-muted); transition:border-color .15s, color .15s, background .15s; }
.vx-cr-rail-i img { width:26px; height:26px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.vx-cr-rail-i .t { display:flex; flex-direction:column; line-height:1.15; }
.vx-cr-rail-i .t b { font-family:var(--vx-display); font-weight:600; font-size:13.5px; color:var(--vx-text); white-space:nowrap; }
.vx-cr-rail-i .t i { font-style:normal; font-size:10.5px; opacity:.7; white-space:nowrap; }
.vx-cr-rail-i .c { font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.55; }
.vx-cr-rail-i .c.on { color:var(--vx-teal-br); opacity:1; }
.vx-cr-rail-i:hover { border-color:var(--vx-border-2); }
.vx-cr-rail-i.on { border-color:var(--vx-teal); background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); }
@media (min-width:900px) {
  .vx-cr-rail { flex-direction:column; gap:2px; top:18px; padding:0; margin:0; background:none; backdrop-filter:none; overflow:visible; }
  .vx-cr-rail-i { border:0; border-left:2px solid transparent; border-radius:0; padding:11px 12px; }
  .vx-cr-rail-i.on { border-left-color:var(--vx-teal-br); background:rgba(255,255,255,.03); }
  .vx-cr-rail-i img { width:34px; height:34px; border-radius:calc(6px * var(--vx-raio, 1)); }
}

/* ── SALA ── o running head é o NOME DA PEDRA, que é como o comprador pensa. Sem "SALA 02/04". */
.vx-cr-sala { margin-top:clamp(36px,7vh,72px); scroll-margin-top:96px; }
.vx-cr-sala-h { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:12px; border-bottom:1px solid var(--vx-border); margin-bottom:20px; }
.vx-cr-sala-sub { font-size:12px; color:var(--vx-faint); letter-spacing:calc(.3px * var(--vx-tracking, 1)); margin-top:3px; }
.vx-cr-sala-cnt { font-size:12.5px; color:var(--vx-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ── CAVALETE ── chapas do mesmo bloco. O gap de 3px é deliberado: foto de estúdio individual não
   emenda, e um encontro torto desmentiria a promessa do veio — que vive no texto, não na imagem. */
/* ── CARD DO CONJUNTO: o cavalete como UMA unidade na vitrine (capa + tamanho + preço + um botão).
   As chapas ficam a um toque ("ver as N chapas") e abrem na fila de sempre logo abaixo. ── */
.vx-cr-conj { display:grid; grid-template-columns:minmax(180px,236px) 1fr; border:1px solid var(--vx-border);
  border-radius:calc(4px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); margin-bottom:12px; transition:border-color .15s; }
.vx-cr-conj.on { border-color:var(--vx-teal); box-shadow:0 0 0 1px var(--vx-teal) inset; }
.vx-cr-conj.off .vx-cr-conj-foto { filter:grayscale(.85) brightness(.72); }
.vx-cr-conj-foto { position:relative; aspect-ratio:4/5; min-height:220px; cursor:zoom-in; background-color:var(--vx-surface-2); }
.vx-cr-conj-foto::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:var(--vx-sombra, inset 0 1px 0 rgba(255,255,255,.10), inset 0 -40px 50px -40px rgba(0,0,0,.6)); }
.vx-cr-conj-id { position:absolute; top:10px; left:12px; z-index:1; font-family:var(--vx-display); font-weight:700;
  font-size:11px; letter-spacing:calc(1.2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-sobre-destaque, #04110c); background:var(--vx-teal);
  padding:3px 10px; border-radius:var(--vx-pill, 999px); }
.vx-cr-conj-body { display:flex; flex-direction:column; gap:8px; padding:16px 18px; min-width:0; }
.vx-cr-conj-body h4 { margin:0; font-family:var(--vx-display); font-weight:600; font-size:clamp(18px,2.4vw,26px); letter-spacing:calc(-.01em * var(--vx-tracking, 1)); }
.vx-cr-conj-body .stat { font-size:13px; color:var(--vx-muted); }
.vx-cr-conj-body .pr { font-size:clamp(20px,2.6vw,28px); font-weight:600; color:var(--vx-teal-br);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.vx-cr-conj-body .pr s { font-size:14px; color:var(--vx-faint); font-weight:400; }
.vx-cr-conj-body .pr i { font-size:12px; color:var(--vx-muted); font-style:normal; }
.vx-cr-conj-body .parcial { font-size:12px; color:var(--vx-morno); }
.vx-cr-conj-body .acts { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px; }
/* no card do conjunto o "Levar" é A ação principal — ganha borda e fundo teal, não a tira apagada da chapa */
.vx-cr-conj-body .acts .vx-cr-tira { width:auto; min-width:230px; margin-top:0; padding:0 18px; font-weight:600;
  border:1px solid var(--vx-teal); border-radius:var(--vx-pill, 999px); color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-cr-conj-body .acts .vx-cr-tira.on { background:color-mix(in srgb, var(--vx-teal-br) 22%, transparent); }
.vx-cr-conj-body .acts .vx-cr-tira.inerte, .vx-cr-conj-body .acts .vx-cr-tira.pacote { border-color:var(--vx-border); background:transparent; color:var(--vx-muted); }
.vx-cr-conj-ver { font:inherit; font-size:12px; color:var(--vx-teal-soft); background:none;
  border:1px dashed var(--vx-border); border-radius:var(--vx-pill, 999px); padding:7px 14px; cursor:pointer; }
.vx-cr-conj-ver:hover { border-color:var(--vx-teal); }
/* vídeo e fotos do monte: faixa própria na largura inteira do card — o vídeo GRANDE */
.vx-cr-conj-midia { grid-column:1 / -1; display:flex; flex-direction:column; gap:10px;
  padding:14px 18px 18px; border-top:1px solid var(--vx-border); }
.vx-cr-conj-midia video { width:100%; max-width:none; max-height:72vh; aspect-ratio:16/9; object-fit:contain;
  border-radius:calc(10px * var(--vx-raio, 1)); background:#000; display:block; }
.vx-cr-conj-midia .fotos { display:flex; gap:10px; flex-wrap:wrap; }
.vx-cr-conj-midia .fotos img { height:150px; width:auto; max-width:100%; object-fit:cover; border-radius:calc(10px * var(--vx-raio, 1));
  cursor:zoom-in; background:#12161c; }
.vx-cr-cav-fila.conj { margin:-4px 0 20px; padding-top:6px; }
/* chapa de conjunto na fila aberta: só para olhar — sem botão, o rótulo diz de onde ela é */
.vx-cr-chapa.doconj .vx-cr-tira.inerte { color:var(--vx-teal-soft); opacity:.9; }
/* rótulo inerte não acende no hover — acender é promessa de clique */
.vx-cr-tira.inerte:hover, .vx-cr-tira.pacote:hover, :root.vx-light .vx-cr-tira.inerte:hover, :root.vx-light .vx-cr-tira.pacote:hover { background:transparent; }
.vx-cr-chapa.doconj .vx-cr-tira.inerte:hover { color:var(--vx-teal-soft); }
/* tabela técnica de um CAVALETE: a linha não é alvo — o lote inteiro acende junto e o botão é do conjunto */
.vx-tec-tab.conj tbody tr { cursor:default; }
.vx-tec-tab.conj tbody tr:hover { background:transparent; }
.vx-tec-tab.conj tbody:hover tr:not(.fora) { background:rgba(255,255,255,.05); }
:root.vx-light .vx-tec-tab.conj tbody:hover tr:not(.fora) { background:rgba(15,23,42,.05); }
@media (max-width:640px) { .vx-cr-conj-midia { padding:12px 12px 14px; } .vx-cr-conj-midia video { max-height:none; } }
@media (max-width:640px) {
  .vx-cr-conj { grid-template-columns:1fr; }
  .vx-cr-conj-foto { aspect-ratio:16/10; min-height:0; }
  .vx-cr-conj-body .acts .vx-cr-tira { width:100%; }
}

.vx-cr-cav { margin-bottom:26px; }
.vx-cr-cav-lbl { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:calc(1.2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-teal-soft); margin-bottom:9px; }
.vx-cr-cav-lbl .parcial { color:var(--vx-morno); letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:none; font-size:11.5px; }
.vx-cr-cav-act { border:1px solid var(--vx-teal); background:transparent; color:var(--vx-teal-br);
  font:inherit; font-size:10.5px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); padding:5px 12px;
  border-radius:var(--vx-pill, 999px); cursor:pointer; transition:background .15s; }
.vx-cr-cav-act:hover { background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
.vx-cr-cav-fila { display:flex; gap:3px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
/* A barra do cavalete usa o tema ESCURO, não o cinza global: ela corre logo abaixo das fotos e, na
   cor padrão, virava um traço claro atravessando a peça — o olho ia nela em vez de ir na pedra.
   Fica visível o suficiente para dizer "tem mais ao lado", e some do caminho. */
.vx-cr-cav-fila { scrollbar-color: rgba(255,255,255,.13) transparent; scrollbar-width: thin; }
.vx-cr-cav-fila::-webkit-scrollbar { height:7px; }
.vx-cr-cav-fila::-webkit-scrollbar-track { background:transparent !important; }
.vx-cr-cav-fila::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13) !important; border-radius:var(--vx-pill, 99px);
  border:2px solid transparent; background-clip: content-box; }
.vx-cr-cav-fila:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24) !important; background-clip: content-box; }
:root.vx-light .vx-cr-cav-fila { scrollbar-color: rgba(15,23,42,.16) transparent; }
:root.vx-light .vx-cr-cav-fila::-webkit-scrollbar-thumb { background: rgba(15,23,42,.16) !important; background-clip: content-box; }
.vx-cr-cav-fila > * { flex:0 0 clamp(170px,26vw,230px); scroll-snap-align:start; }

.vx-cr-avulsas-lbl { font-size:10.5px; letter-spacing:calc(1.2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint);
  margin:26px 0 10px; padding-top:14px; border-top:1px solid var(--vx-border); }
.vx-cr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(160px,22vw,220px),1fr)); gap:14px; }

/* ── A CHAPA ── duas zonas: a FOTO abre o close-up, a TIRA seleciona. Sem botãozinho na imagem:
   no celular o dedo erra e o cliente abre o zoom quando queria escolher. */
.vx-cr-chapa { display:flex; flex-direction:column; border:1px solid var(--vx-border); border-radius:calc(3px * var(--vx-raio, 1));
  overflow:hidden; background:var(--vx-surface); transition:border-color .15s; }
.vx-cr-chapa.on { border-color:var(--vx-teal); }
.vx-cr-ch-foto { position:relative; aspect-ratio:4/5; cursor:zoom-in; background-color:var(--vx-surface-2); }
.vx-cr-ch-foto::after { content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:var(--vx-sombra, inset 0 1px 0 rgba(255,255,255,.10), inset 0 -40px 50px -40px rgba(0,0,0,.6)); }
.vx-cr-ch-id { position:absolute; top:9px; left:11px; z-index:1; font-family:var(--vx-display); font-weight:600;
  font-size:15px; color:#fff; text-shadow:var(--vx-sombra-texto, 0 2px 10px rgba(0,0,0,.7)); letter-spacing:calc(.5px * var(--vx-tracking, 1)); }
.vx-cr-fita { position:absolute; top:14px; right:-30px; z-index:2; transform:rotate(38deg);
  background:rgba(10,12,18,.86); color:#e9ecf4; font-size:9.5px; font-weight:700; letter-spacing:calc(1.4px * var(--vx-tracking, 1));
  text-transform:var(--vx-caixa, uppercase); padding:4px 34px; }
.vx-cr-chapa.rsv .vx-cr-ch-foto { filter:grayscale(.85) brightness(.72); }
/* A FOTO DA CHAPA INTEIRA (01/10/2026, o Daniel, com a foto da 5756-013 aberta: "quero que ao abrir apareça a imagem toda
   como está nesse quadro — ajuste a proporção, sem zoom"): a foto da chapa é deitada (2400×1489, ~1,6), e o quadro em pé
   (4:5) e o 4:3 com cover mostravam só o miolo dela — parecia zoom. O quadro segue a foto (16:10) e ela entra INTEIRA
   (contain, por cima do cover que o estilo da linha traz); a sobra, se houver, fica no fundo da pedra. A miniatura de 38 px
   da seleção (vx-cr-mini) continua cheia. */
.vx-cine-slab-img, .vx-cr-ch-foto, .vx-cr-conj-foto { aspect-ratio:16/10; min-height:0;
  background-size:contain !important; background-repeat:no-repeat !important; background-position:center !important; }
.vx-cr-ch-txt { padding:10px 12px 4px; }
.vx-cr-ch-txt .med { font-size:11.5px; color:var(--vx-muted); }
.vx-cr-ch-txt .pr { font-family:var(--vx-display); font-weight:600; font-size:17px; color:var(--vx-text); margin-top:3px; font-variant-numeric:tabular-nums; }
.vx-cr-ch-txt .pr i { display:block; font-style:normal; font-size:11px; font-weight:400; color:var(--vx-teal-soft); margin-top:2px; }
/* A TIRA é o alvo: largura toda, 46px de altura — dedo grande acha sem mirar. */
.vx-cr-tira { display:flex; align-items:center; gap:8px; width:100%; min-height:46px; margin-top:8px;
  padding:0 12px; border:0; border-top:1px solid var(--vx-border); background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; color:var(--vx-muted); text-align:left; transition:background .15s, color .15s; }
.vx-cr-tira .rd { width:15px; height:15px; border-radius:50%; border:1.5px solid var(--vx-border-2); flex:0 0 auto; transition:all .15s; }
.vx-cr-tira:hover { background:rgba(255,255,255,.03); color:var(--vx-text); }
.vx-cr-tira.on { background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); color:var(--vx-teal-br); font-weight:600; }
.vx-cr-tira.on .rd { border-color:var(--vx-teal-br); background:var(--vx-teal-br); box-shadow:inset 0 0 0 3px var(--vx-surface); }
.vx-cr-tira.inerte, .vx-cr-tira.pacote { cursor:default; color:var(--vx-faint); font-size:11px;
  letter-spacing:calc(.8px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }

/* ── APLICADO ── o ambiente ao lado da pedra, não quatro seções depois. */
.vx-cr-aplic { margin-top:22px; padding-top:16px; border-top:1px solid var(--vx-border); }
.vx-cr-aplic-lbl { font-size:10.5px; letter-spacing:calc(1.2px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); margin-bottom:10px; }
.vx-cr-aplic-fila { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px;
  scrollbar-color: rgba(255,255,255,.13) transparent; scrollbar-width: thin; }
.vx-cr-aplic-fila::-webkit-scrollbar { height:7px; }
.vx-cr-aplic-fila::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13) !important; border-radius:var(--vx-pill, 99px);
  border:2px solid transparent; background-clip: content-box; }
.vx-cr-aplic-fila > * { flex:0 0 clamp(200px,30vw,280px); scroll-snap-align:start; margin:0; }

/* ── BANDEJA ── mostra O QUE foi escolhido, não só quantos. Contador informa; carrinho deixa conferir. */
.vx-cr-tray .vx-pp-bar-sel .tot { display:block; font-size:11.5px; color:var(--vx-teal-soft);
  margin-top:2px; font-variant-numeric:tabular-nums; }
.vx-cr-tray-mini { display:flex; align-items:center; gap:5px; flex:1 1 auto; overflow-x:auto; overflow-y:hidden; padding:0 10px; }
.vx-cr-tray-mini::-webkit-scrollbar { display:none; }
.vx-cr-mini { position:relative; width:38px; height:38px; flex:0 0 auto; border-radius:calc(4px * var(--vx-raio, 1)); border:1px solid var(--vx-border-2);
  background-color:var(--vx-surface-2); cursor:pointer; padding:0; }
.vx-cr-mini span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,18,.68); color:#fff; font-size:17px; opacity:0; transition:opacity .15s; border-radius:calc(3px * var(--vx-raio, 1)); }
.vx-cr-mini:hover span { opacity:1; }
.vx-cr-mini-mais { font-size:12px; color:var(--vx-muted); flex:0 0 auto; }
@media (max-width:760px) { .vx-cr-tray-mini { display:none; } }

/* Tema claro: o corredor herda as variáveis, mas a faixa do trilho precisa do fundo certo. */
:root.vx-light .vx-cr-rail { background:linear-gradient(180deg, #F7FAFC 70%, transparent); }
:root.vx-light .vx-cr-tira:hover { background:rgba(15,23,42,.04); }
:root.vx-light .vx-cr-rail-i.on { background:rgba(19,138,99,.08); }

@media (prefers-reduced-motion:no-preference) { html:has(.vx-cr) { scroll-behavior:smooth; } }


/* ── VÍDEO DA PROPOSTA ── entre a placa de entrada e o corredor. Nunca com autoplay: o link chega
   por WhatsApp e pode abrir no meio de uma reunião. */
.vx-cr-video { margin:clamp(28px,5vh,52px) 0 0; border:1px solid var(--vx-border); border-radius:calc(6px * var(--vx-raio, 1));
  overflow:hidden; background:#000; aspect-ratio:16/9; }
.vx-cr-video iframe, .vx-cr-video video { display:block; width:100%; height:100%; border:0; object-fit:contain; background:#000; }


/* ═══════════ ABSOLUTE CINEMA — cenas novas ═══════════ */

/* ── O VÍDEO ── tela inteira, que é o único lugar onde bloco em pátio aparece do tamanho que é. */
.vx-cine-video .vx-cine-video-box { width:min(100%, 1100px); aspect-ratio:16/9; margin-top:18px;
  border:1px solid rgba(255,255,255,.10); border-radius:calc(8px * var(--vx-raio, 1)); overflow:hidden; background:#000;
  box-shadow:var(--vx-sombra, 0 40px 90px -40px rgba(0,0,0,.9)); }
.vx-cine-video-box iframe, .vx-cine-video-box video { display:block; width:100%; height:100%; border:0; background:#000; }
/* vídeo que só abre fora (iCloud, OneDrive): no lugar do player quebrado, um botão no centro da moldura */
.vx-cr-video .vx-video-link, .vx-cine-video-box .vx-video-link { display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  min-height:180px; background:#000; color:#fff; font-size:18px; font-weight:700; text-decoration:none; letter-spacing:.2px; }
.vx-cr-video .vx-video-link:hover, .vx-cine-video-box .vx-video-link:hover { color:var(--vx-teal-br, #2bd4a0); }

/* ── O BLOCO ── as chapas na ORDEM em que foram serradas. O gap de 2px é deliberado: fotos
   individuais não emendam de verdade, e um encontro torto desmentiria a frase. A promessa do veio
   está no texto; a fileira mostra a sequência, não a costura. */
.vx-cine-bloco-fila { display:flex; gap:2px; margin:22px 0 20px; width:min(100%,1000px);
  border-radius:calc(4px * var(--vx-raio, 1)); overflow:hidden; box-shadow:var(--vx-sombra, 0 30px 70px -35px rgba(0,0,0,.9)); }
/* CONSOME o --vx-foto que o FundoFoto define. Sem esta linha a variavel era escrita e ignorada, e a
   cena inteira ficava preta — nem a foto, nem o gradiente da pedra. */
.vx-cine-bl { position:relative; flex:1 1 0; aspect-ratio:2/3; margin:0; background-image:var(--vx-foto);
  background-size:cover; background-position:center; min-width:0; }
.vx-cine-bl figcaption { position:absolute; left:0; right:0; bottom:0; padding:26px 6px 7px;
  font-size:11px; letter-spacing:calc(1.4px * var(--vx-tracking, 1)); text-align:center; color:rgba(255,255,255,.9);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.72)); }
@media (max-width:760px) { .vx-cine-bl { aspect-ratio:1/2.2; } .vx-cine-bl figcaption { font-size:9.5px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); } }

/* ── O TAMANHO ── "6,4 m²" não diz nada a quem nunca ergueu uma chapa. Ao lado de 1,70 m, diz.
   A silhueta é dimensionada em % da ALTURA da chapa, então a proporção é real, não ilustrativa. */
/* overflow visivel de proposito: chapa mais baixa que 1,70 m faz a silhueta ULTRAPASSAR o topo — e
   isso e a informacao, nao um defeito. Cortar a pessoa na altura da chapa mentiria sobre a escala. */
.vx-cine-escala-palco { position:relative; display:flex; align-items:flex-end; gap:clamp(14px,3vw,40px);
  width:min(100%,980px); margin:26px 0 18px; overflow:visible; }
.vx-cine-escala-palco .chapa { position:relative; flex:1 1 auto; background-image:var(--vx-foto);
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,.12); box-shadow:var(--vx-sombra, 0 30px 70px -35px rgba(0,0,0,.9)); }
.vx-cine-escala-palco .cota-h, .vx-cine-escala-palco .cota-v { position:absolute; font-size:11px;
  letter-spacing:calc(1.2px * var(--vx-tracking, 1)); color:rgba(255,255,255,.72); }
.vx-cine-escala-palco .cota-h { left:0; right:0; bottom:-22px; text-align:center; }
.vx-cine-escala-palco .cota-v { top:50%; left:-8px; transform:translate(-100%,-50%); white-space:nowrap; }
.vx-cine-escala-palco .humano { position:relative; flex:0 0 auto; width:clamp(26px,5vw,54px);
  max-height:170%;   /* teto de sanidade: dado torto no ERP nao pode desenhar um gigante */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
.vx-cine-escala-palco .humano svg { width:100%; height:100%; fill:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); }
.vx-cine-escala-palco .humano span { font-size:10.5px; letter-spacing:calc(1px * var(--vx-tracking, 1)); color:var(--vx-teal-soft); margin-top:6px; white-space:nowrap; }
@media (max-width:760px) { .vx-cine-escala-palco .cota-v { display:none; } }


/* ── PROGRESSO DE UPLOAD ── video de 80 MB leva minutos; sem barra o vendedor acha que travou e
   clica de novo, comecando um SEGUNDO upload. A barra e a unica coisa que impede isso. */
.vx-up-barra { height:4px; border-radius:var(--vx-pill, 99px); background:rgba(255,255,255,.08); overflow:hidden; margin-top:8px; }
.vx-up-fill { height:100%; border-radius:var(--vx-pill, 99px); background:var(--vx-cheio, linear-gradient(90deg,var(--vx-teal),var(--vx-teal-br)));
  transition: width .25s linear; }
.vx-up-txt { font-size:11.5px; color:var(--vx-muted); margin-top:5px; font-variant-numeric:tabular-nums; }
.vx-amb-chip.ocupado { display:inline-flex; align-items:center; gap:7px; opacity:.75; pointer-events:none; }
:root.vx-light .vx-up-barra { background:rgba(15,23,42,.10); }


/* ── ESCOLHA DA TRILHA ── com previa. Escolher musica por nome e adivinhacao: "epica" quer dizer
   coisas diferentes para cada pessoa, e o vendedor so descobria o que escolheu quando o cliente ja
   estava com a proposta aberta. */
.vx-trilhas { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:8px; }
.vx-trilha { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
  border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); transition:border-color .15s, background .15s; }
.vx-trilha:hover { border-color:var(--vx-border-2); }
.vx-trilha.on { border-color:var(--vx-teal); background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); }
.vx-trilha-play { flex:0 0 auto; width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:1px solid var(--vx-teal); background:transparent; color:var(--vx-teal-br); font-size:11px;
  line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.vx-trilha-play:hover { background:color-mix(in srgb, var(--vx-teal-br) 15%, transparent); }
.vx-trilha-txt { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.vx-trilha-txt b { font-size:13px; font-weight:600; color:var(--vx-text); }
.vx-trilha-txt i { font-style:normal; font-size:11px; color:var(--vx-muted); }


/* ── GERADOR DE TRILHA ── so aparece com chave configurada; botao que nao funciona e pior que ausente */
.vx-ia-trilha { border:1px dashed var(--vx-border-2); border-radius:calc(10px * var(--vx-raio, 1)); padding:12px 14px; margin-bottom:10px;
  background:rgba(255,255,255,.02); }
.vx-ia-topo { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.vx-ia-topo b { font-size:13px; font-weight:600; }
.vx-ia-topo span { font-size:11px; color:var(--vx-faint); }
:root.vx-light .vx-ia-trilha { background:rgba(15,23,42,.02); }


/* Nome do cliente no drawer: o documento vira legenda miuda em cima, e o nome ganha a linha
   inteira. text-wrap:balance distribui as palavras entre as linhas em vez de deixar uma orfa
   ("CARVALHO" sozinha na quarta linha). */
/* O documento (CPF/CNPJ) vira uma pilula miuda na MESMA linha do numero do pedido — assim ele
   identifica sem gastar uma linha inteira do cabecalho.
   CHAMAVA-SE .vx-pd-doc, IGUAL as pilulas de documento do drawer (Invoice, Packing List...), e as
   duas regras se atropelavam: esta vem depois no arquivo, entao vencia o display:inline-flex
   daquelas — matando o align-items:center e deixando o icone fora de linha com o texto. Nomes
   diferentes para coisas diferentes; sao dois componentes que so por acaso falavam de "documento". */
.vx-pd-cpf { display:inline-block; font-size:10px; letter-spacing:calc(.5px * var(--vx-tracking, 1)); color:var(--vx-faint);
  font-variant-numeric:tabular-nums; background:rgba(255,255,255,.05); border-radius:var(--vx-pill, 99px);
  padding:1px 8px; margin-left:6px; vertical-align:1px; }
:root.vx-light .vx-pd-cpf { background:rgba(15,23,42,.06); }
/* Sem max-width: era ele que forcava a quebra ("MATHEUS BAPTISTA CARVALHO" tem 25 caracteres e o
   teto estava em 22). Quem manda na largura e o cabecalho, e o bloco do nome agora ocupa o espaco
   que sobra em vez de ser espremido pelos botoes da direita. */
.vx-pd-cli { font-size:17px; font-weight:500; margin-top:6px; line-height:1.25; text-wrap:balance; }

/* QUEM ESTA NA PROPOSTA COLETIVA. Lista curta, so no painel -- no card cabe a contagem.
   overflow-wrap porque razao social do ERP passa de 40 caracteres e o recuo da lista estreita
   ainda mais o espaco no celular. */
.vx-pd-clientes { margin:10px 0 2px; font-size:12.5px; color:var(--vx-muted); }
.vx-pd-clientes .l { font-weight:600; color:var(--vx-text); }
.vx-pd-clientes .s { opacity:.8; }
.vx-pd-clientes ul { margin:5px 0 0; padding-left:16px; }
.vx-pd-clientes li { line-height:1.45; overflow-wrap:anywhere; }


/* "foto da chapa 013" — a peca sem foto propria mostra a da irma do mesmo bloco/cavalete, e DIZ
   que e emprestada. Sem a legenda o cliente acharia que esta vendo aquela peca, e chapa se compra
   pelo veio, que muda de uma para a outra mesmo dentro do bloco. */
.vx-cr-ch-ref { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:14px 8px 5px;
  font-size:9.5px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-align:center; color:rgba(255,255,255,.72);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.68)); pointer-events:none; }


/* ── ESCOLHER A CAPA DO CAVALETE ── as chapas lado a lado para o vendedor apontar qual vende o
   conjunto. Sem foto = apagada e nao clicavel: escolher capa sem foto seria escolher um gradiente. */
.vx-capa-box { background:var(--vx-surface); border:1px solid var(--vx-border-2); border-radius:calc(14px * var(--vx-raio, 1));
  padding:18px 20px; width:min(92vw,760px); max-height:86vh; overflow:auto;
  display:flex; flex-direction:column; gap:14px; }
.vx-capa-h { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.vx-capa-h b { display:block; font-size:15px; font-weight:600; }
.vx-capa-h span { font-size:12px; color:var(--vx-muted); }
.vx-capa-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; }
.vx-capa-i { position:relative; aspect-ratio:4/5; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer;
  border:2px solid transparent; background-size:cover; background-position:center; transition:border-color .15s; }
.vx-capa-i:hover { border-color:var(--vx-border-2); }
.vx-capa-i.on { border-color:var(--vx-teal-br); box-shadow:0 0 0 3px var(--vx-teal-glow); }
.vx-capa-i.sem { opacity:.35; cursor:not-allowed; }
.vx-capa-i span { position:absolute; left:0; right:0; bottom:0; padding:14px 5px 4px; text-align:center;
  font-size:11px; color:#fff; background:linear-gradient(180deg,transparent,rgba(0,0,0,.75)); border-radius:0 0 calc(6px * var(--vx-raio, 1)) calc(6px * var(--vx-raio, 1)); }
.vx-capa-i b { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; letter-spacing:calc(.6px * var(--vx-tracking, 1));
  text-transform:var(--vx-caixa, uppercase); color:#04140e; background:var(--vx-teal-br); padding:2px 7px; border-radius:var(--vx-pill, 99px); }


/* Acao PRINCIPAL da linha (Ofertar cavalete). O .vx-iabtn ja e gradiente teal com texto quase
   preto — eu tinha posto color:teal inline por cima, e virou verde sobre verde. Aqui o destaque
   vem de PESO e ANEL, nao de trocar a cor do texto: o contraste fica intacto. */
.vx-iabtn.destaque { background:linear-gradient(135deg,#17b184,var(--vx-teal-br));
  box-shadow:var(--vx-sombra, 0 0 0 1.5px color-mix(in srgb, var(--vx-teal-br) 45%, transparent), 0 6px 16px -8px var(--vx-teal-glow));
  padding:5px 14px; }
.vx-iabtn.destaque:hover { filter:brightness(1.12); }


/* ═══════════ PACOTES: um so, ou um por cavalete ═══════════
   O switch de "pacote" respondia sim/nao. Com varios cavaletes na mesma proposta a pergunta muda
   — o cliente pode levar UM conjunto inteiro e recusar os outros — e isso nao cabe num booleano.
   O SELETOR sao chips (mesmo desenho do "destino da oferta", logo acima) com uma unica linha de
   explicacao embaixo: tentei tres cartoes com titulo+descricao e viraram tres blocos de texto
   competindo, com o rotulo quebrando em duas linhas.
   A LISTA abaixo e a mesma nos dois modos — "pacote unico" e so um pacote que cobre tudo. */
.vx-pk-lista { margin:10px 0 2px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; }
.vx-pk-lin { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--vx-border); flex-wrap:wrap; }
.vx-pk-lin:last-of-type { border-bottom:none; }
.vx-pk-id { flex:1; min-width:140px; }
/* O max-width do MudNumericField vai no input INTERNO — o .mud-input-control por fora continua
   esticando (media 439px numa linha de 790) e engolia a identificacao do cavalete. */
.vx-pk-lin .mud-input-control { flex:0 0 178px; width:178px; }
.vx-pk-id b { display:block; font-size:13px; }
.vx-pk-id span { display:block; font-size:11px; color:var(--vx-muted); }
/* 64px cabiam "−5,2%" e mais nada. Agora esta coluna carrega tambem o R$/m2 do preco
   fechado (item 6 das Melhorias MI), que precisa de mais que o dobro -- sem isso o numero
   quebra em duas linhas no meio do simbolo. */
.vx-pk-dif { min-width:104px; text-align:right; font-size:12px; color:var(--vx-muted); }
/* o por-área do preço fechado em destaque, como no cabeçalho do cavalete (item 8 das Demandas ME 2) */
.vx-pk-dif .un { display:block; margin-top:2px; font-size:13.5px; font-weight:700; color:var(--vx-teal-br); white-space:nowrap; }
.vx-pk-solta { padding:7px 12px; font-size:11.5px; color:var(--vx-muted); background:rgba(255,255,255,.02);
  border-top:1px solid var(--vx-border); }
.vx-pk-tot { padding:8px 12px; font-size:12.5px; background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); border-top:1px solid var(--vx-border); }
.vx-pk-tot span { color:var(--vx-muted); }

:root.vx-light .vx-pk-modos button { background:rgba(15,23,42,.02); }
:root.vx-light .vx-pk-modos button.on { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
:root.vx-light .vx-pk-modos button.on b { color:#0a7f5f; }
:root.vx-light .vx-pk-solta { background:rgba(15,23,42,.02); }

/* Cavalete MARCADO na galeria (multi-selecao). O anel teal e o mesmo do cartao de modo: o
   vendedor ja aprendeu que teal-com-anel = "isto esta escolhido". */
.vx-cav-pick { flex:0 0 auto; width:22px; height:22px; border-radius:calc(6px * var(--vx-raio, 1)); cursor:pointer; display:grid; place-items:center;
  border:1.5px solid var(--vx-border); color:transparent; transition:border-color .14s, background .14s, color .14s; }
.vx-cav-pick:hover { border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); }
.vx-cav-pick.on { border-color:var(--vx-teal-br); background:var(--vx-teal-br); color:#04140e; }

/* Aviso da regra de pacote na proposta publica. Vem antes do primeiro toque: descobrir que "nao da
   pra tirar uma chapa" clicando e o cliente concluir que a tela quebrou. */
.vx-pp-pacaviso { margin:10px 0 2px; padding:8px 12px; border-radius:calc(10px * var(--vx-raio, 1)); font-size:12.5px; line-height:1.5;
  color:var(--vx-teal-soft); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 28%, transparent); }
:root.vx-light .vx-pp-pacaviso { color:#0a7f5f; background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-cr-cav-de { color:var(--vx-faint); text-decoration:line-through; font-size:11.5px; }

/* ═══════════ CARTEIRA DE CLIENTES: busca e paginacao ═══════════
   A busca era um input branco a 15% de opacidade EM CIMA do banner verde — o campo praticamente
   sumia e o placeholder ficava ilegivel. Perguntaram por uma busca que ja existia ali. Fundo
   solido e texto escuro: e um campo de formulario, tem de parecer um. */
.vx-cli-busca { display:flex; align-items:center; gap:8px; height:42px; width:320px; max-width:100%;
  padding:0 12px; border-radius:calc(10px * var(--vx-raio, 1)); background:#fff; border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--vx-sombra, 0 2px 10px -4px rgba(0,0,0,.35)); }
.vx-cli-busca input { flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:13.5px; color:#101720; }
.vx-cli-busca input::placeholder { color:#7b8698; }

.vx-pager { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin:22px 0 8px; font-size:13px; color:var(--vx-muted); }
.vx-pager button { font:inherit; cursor:pointer; padding:7px 16px; border-radius:calc(9px * var(--vx-raio, 1));
  background:rgba(255,255,255,.04); border:1px solid var(--vx-border); color:var(--vx-text); }
.vx-pager button:hover:not(:disabled) { border-color:var(--vx-teal-br); color:var(--vx-teal-br); }
.vx-pager button:disabled { opacity:.35; cursor:not-allowed; }
.vx-pager .pag { color:var(--vx-faint); }
:root.vx-light .vx-pager button { background:rgba(15,23,42,.03); }

/* ═══════════ LEGENDA DO PROTHEUS (MATA410) ═══════════
   A bolinha usa a cor da legenda DELE (verde Aberto / amarelo Liberado / vermelho Faturado, mais
   os bloqueios). O contorno claro existe porque duas dessas cores — amarelo e verde — somem no
   fundo escuro do Vortex sem um anel. */
.vx-erp-legenda { display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:2px 9px 2px 7px;
  border-radius:var(--vx-pill, 99px); font-size:11.5px; font-weight:600; letter-spacing:calc(.2px * var(--vx-tracking, 1));
  background:rgba(255,255,255,.06); border:1px solid var(--vx-border); }
.vx-erp-legenda i { width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.22); }
/* A BOLINHA DE STATUS DO CARD, que nao e a mesma coisa que o ponto pulsante do "ERP conectado".
   Chamava-se .vx-erp-dot tambem, e como esta regra vem depois no arquivo ela vencia: o indicador do
   topo de TODAS as telas herdava daqui um anel branco no lugar do brilho verde, 8px no lugar de 7 e
   um margin-left de 5px que ele nao pede — dentro de uma pilula que ja separa com gap. */
.vx-erp-status { display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:5px;
  vertical-align:0; box-shadow:0 0 0 1.5px rgba(255,255,255,.22); }
:root.vx-light .vx-erp-legenda { background:rgba(15,23,42,.04); }
:root.vx-light .vx-erp-legenda i,
:root.vx-light .vx-erp-status { box-shadow:0 0 0 1.5px rgba(15,23,42,.18); }

/* Numero do pedido NO ERP, impresso junto do numero do Vortex. Menor que o principal: e a
   referencia cruzada, nao a identidade do documento. */
.vx-doc-erp { font-size:12px; color:#4b5563; margin-top:1px; }
.vx-doc-erp b { color:#111827; font-weight:600; }

/* Chapa VENDIDA na vitrine. O selo "Vend." sozinho nao ajuda: a pergunta seguinte e sempre
   "vendida pra quem" — por isso o numero do pedido vem no cartao e o resto no title. */
.vx-vend-badge { position:absolute; left:8px; bottom:8px; z-index:3; display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:var(--vx-pill, 99px); font-size:10.5px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1));
  color:#fff; background:rgba(190,30,45,.92); box-shadow:var(--vx-sombra, 0 2px 8px -3px rgba(0,0,0,.6)); }

/* Interruptor do estoque em tempo real. Mora junto da rota SQL que o viabiliza — liga-lo sem ela
   seria pedir 40s por clique, entao os dois andam juntos na tela. */
.vx-tr-opt { display:flex; align-items:flex-start; gap:10px; margin-top:10px; padding:10px 12px;
  border-radius:calc(10px * var(--vx-raio, 1)); background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 25%, transparent); cursor:pointer; }
.vx-tr-opt input { margin-top:3px; width:16px; height:16px; accent-color:var(--vx-teal-br); flex:0 0 auto; }
.vx-tr-opt b { display:block; font-size:13px; }
.vx-tr-opt small { display:block; font-size:11.5px; color:var(--vx-muted); line-height:1.5; margin-top:2px; }

/* Pontinho de "ao vivo" no cabecalho da galeria: o vendedor precisa saber se o que ele ve veio do
   ERP agora ou da replica de minutos atras — sao decisoes diferentes na hora de prometer a peca. */
.vx-live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:7px;
  background:var(--vx-teal-br); vertical-align:1px; animation: vxLivePulse 2s ease-in-out infinite; }
@keyframes vxLivePulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 color-mix(in srgb, var(--vx-teal-br) 50%, transparent); }
                         50% { opacity:.55; box-shadow:0 0 0 5px color-mix(in srgb, var(--vx-teal-br) 0%, transparent); } }

/* GRUPO JÁ VENDIDO — o selo existe para explicar por que as acoes sumiram. Botao que desaparece
   sem motivo aparente e lido como tela quebrada. */
.vx-grp-vend { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--vx-pill, 99px);
  font-size:10.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); white-space:nowrap;
  color:#fff; background:rgba(190,30,45,.9); }

/* CHAPA VENDIDA: fica no catalogo para consulta e rastreio, mas nao se parece com pedra a venda.
   Dessatura em vez de esmaecer — o vendedor precisa RECONHECER a peca na foto quando o cliente
   pergunta "e aquela que eu vi semana passada?". */
.vx-gcard.vx-vendida { opacity:.82; }
.vx-gcard.vx-vendida .vx-gcard-img { filter: grayscale(.55); }
.vx-gcard.vx-vendida:hover { transform:none; }
.vx-gcard.vx-vendida .vx-gcard-photo { cursor: default; }
:root.vx-light .vx-grp-vend { background:rgba(190,30,45,.92); }

/* Nota do painel: as vendidas nao entram como barra porque sao 30 mil contra 4 mil — a barra delas
   achataria as outras duas ate sumirem, justamente as que interessam a quem abre o painel de manha. */
.vx-dash-nota { margin-top:8px; font-size:11.5px; color:var(--vx-faint); }

/* ═══════════ CARTÕES DE CONFIGURAÇÃO ═══════════
   Eram 760px fixos, e numa tela de 1900 o conteudo ficava encolhido no canto esquerdo com dois
   tercos de vazio ao lado — enquanto a coluna OBS da tabela de pagamento truncava com reticencias
   por falta de espaco que existia de sobra.
   Agora acompanham a largura, com um teto generoso: forma de mais de ~1200px vira linha longa
   demais para o olho seguir do rotulo ate o campo. */
.vx-cfg-card { padding:22px 24px; max-width:1240px; width:100%; }

/* Em tela larga, os cartoes SE DISTRIBUEM em duas colunas em vez de empilhar. O titulo de cada
   secao acompanha o seu cartao — por isso o grid pega o par (h6 + card) e nao os cartoes soltos. */
@media (min-width: 1600px) {
  .vx-cfg-card { max-width:none; }
  .vx-cfg-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 26px; align-items:start; }
}

/* A tabela dentro do cartao usa o que tem: OBS truncava com espaco sobrando ao lado. */
.vx-cfg-card table { width:100%; }
.vx-cfg-card .vx-tbl-obs { white-space:normal; }

/* ═══════════ CHAVES DE ACESSO ═══════════
   Por FUNCAO, nao por fornecedor: a pergunta chega como "a voz parou", nao "a ElevenLabs parou". */
.vx-chave-linha { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1));
  background:rgba(255,255,255,.02); }
.vx-chave-id { flex:1; min-width:220px; }
.vx-chave-id b { display:block; font-size:13px; }
.vx-chave-id span { display:block; font-size:11.5px; color:var(--vx-muted); margin-top:1px; }
.vx-chave-est { min-width:150px; font-size:11.5px; }
.vx-chave-est .ok { color:var(--vx-teal-soft); }
.vx-chave-est .off { color:var(--vx-faint); }
.vx-chave-est code { font-size:11px; color:var(--vx-muted); letter-spacing:calc(.5px * var(--vx-tracking, 1)); }
.vx-chave-alerta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  padding:10px 12px; border-radius:calc(10px * var(--vx-raio, 1)); font-size:12.5px;
  color:#e6d7a8; background:#231d0f; border:1px solid #5a4a1e; }
.vx-chave-alerta span { flex:1; min-width:260px; }
:root.vx-light .vx-chave-linha { background:rgba(15,23,42,.02); }

/* CARREGAR MAIS — botao no lugar da rolagem automatica. O observador so dispara na MUDANCA de
   estado: parado no fim da lista nada acontecia ate subir e descer, e nao dava para distinguir
   "acabou" de "travou". Aqui o controle e de quem olha, e o rotulo diz quantas vem. */
.vx-gal-mais { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:13px; font-weight:600; cursor:pointer; padding:11px 26px; border-radius:calc(11px * var(--vx-raio, 1));
  color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 32%, transparent);
  transition: background .15s, border-color .15s, transform .12s; }
.vx-gal-mais:hover:not(:disabled) { background:color-mix(in srgb, var(--vx-teal-br) 15%, transparent); border-color:var(--vx-teal-br); }
.vx-gal-mais:active:not(:disabled) { transform:scale(.98); }
.vx-gal-mais:disabled { opacity:.6; cursor:default; }
.vx-gal-qtd { display:inline-flex; gap:4px; margin-left:10px; vertical-align:middle; }
.vx-gal-qtd button { font:inherit; font-size:11.5px; cursor:pointer; padding:5px 10px; border-radius:calc(7px * var(--vx-raio, 1));
  color:var(--vx-muted); background:transparent; border:1px solid var(--vx-border); }
.vx-gal-qtd button:hover { color:var(--vx-text); border-color:var(--vx-border-2); }
.vx-gal-qtd button.on { color:#04140e; background:var(--vx-teal-br); border-color:var(--vx-teal-br); font-weight:700; }

/* Recarga COM conteudo na tela: barra fina no topo em vez de apagar a galeria inteira. Trocar um
   chip fazia tudo sumir e voltar — piscava a cada filtro e a pessoa perdia onde estava. */
.vx-gal-recarga { position:sticky; top:0; z-index:5; height:2px; border-radius:calc(2px * var(--vx-raio, 1)); overflow:hidden;
  background:linear-gradient(90deg, transparent, var(--vx-teal-br), transparent);
  background-size:40% 100%; background-repeat:no-repeat; animation: vxRecarga 1.1s ease-in-out infinite; }
@keyframes vxRecarga { 0% { background-position:-40% 0; } 100% { background-position:140% 0; } }
@media (prefers-reduced-motion: reduce) { .vx-gal-recarga { animation:none; background:var(--vx-teal); } }

/* "ACABOU DE SAIR" — a peca estava livre quando a tela carregou e foi reservada por outro vendedor
   enquanto o vendedor conversava com o cliente. E diferente de "Reservado" comum: ali a pessoa
   nunca teve a chapa; aqui ela ACHAVA que tinha. O pulso serve para o olho achar qual e; para
   depois de tres repeticoes, porque alerta que nao para vira papel de parede. */
.vx-gstat.s-mudou { background:rgba(190,30,45,.92) !important; color:#fff !important; }
.vx-gstat.s-mudou i { background:#fff !important; }
.vx-gcard.vx-mudou { outline:2px solid rgba(255,107,107,.75); outline-offset:-2px;
  animation: vxMudou 1.1s ease-out 3; }
@keyframes vxMudou {
  0%,100% { box-shadow:0 0 0 0 rgba(255,107,107,0); }
  40%     { box-shadow:0 0 0 6px rgba(255,107,107,.28); }
}
@media (prefers-reduced-motion: reduce) { .vx-gcard.vx-mudou { animation:none; } }

/* "ACABOU DE SAIR" — a peca estava livre quando a tela carregou e foi reservada por outro vendedor
   enquanto este conversava com o cliente. E diferente de "Reservado" comum: ali a pessoa nunca teve
   a chapa; aqui ela ACHAVA que tinha. O pulso serve para o olho achar qual e, e para depois de tres
   repeticoes — alerta que nao para vira papel de parede. */
.vx-gstat.s-mudou { background:rgba(190,30,45,.92) !important; color:#fff !important; }
.vx-gstat.s-mudou i { background:#fff !important; }
.vx-gcard.vx-mudou { outline:2px solid rgba(255,107,107,.75); outline-offset:-2px;
  animation: vxMudou 1.1s ease-out 3; }
@keyframes vxMudou {
  0%,100% { box-shadow:0 0 0 0 rgba(255,107,107,0); }
  40%     { box-shadow:0 0 0 6px rgba(255,107,107,.28); }
}
@media (prefers-reduced-motion: reduce) { .vx-gcard.vx-mudou { animation:none; } }

/* ── FANTASMAS: o lugar dos cartoes que estao vindo ───────────────────────────────────────────
   Nao e enfeite de carregamento. O cartao oco tem a MESMA altura do cartao real (150px de imagem
   + corpo), entao quando o conteudo chega ele nao empurra a pagina: ocupa um espaco que ja era
   dele. Sem isto, o clique em "carregar mais" produzia nada por ate 3,7s e depois um solavanco.

   O brilho anda da esquerda para a direita porque e assim que se le — o olho acompanha em vez de
   ficar preso. A opacidade fica baixa (o cartao e um lugar reservado, nao conteudo), e a entrada
   e escalonada para a leva inteira nao piscar junta. */
.vx-gcard.vx-fantasma { pointer-events:none; border-style:dashed; border-color:rgba(255,255,255,.07);
  background: var(--vx-surface); opacity:0; animation: vxFantEntra .34s ease-out both; }
.vx-fant-img { height:150px; position:relative; overflow:hidden; background:rgba(255,255,255,.022); }
.vx-fant-corpo { padding:12px 12px 16px; display:flex; flex-direction:column; gap:9px; }
.vx-fant-l { height:10px; border-radius:calc(6px * var(--vx-raio, 1)); background:rgba(255,255,255,.045); display:block; }
/* o brilho e um pseudo-elemento com transform: anima no compositor, nao repinta os 12 cartoes */
.vx-fant-img::after, .vx-fant-l::after { content:""; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%);
  transform: translate3d(-100%,0,0); animation: vxFantBrilho 1.5s ease-in-out infinite; }
.vx-fant-l { position:relative; overflow:hidden; }
@keyframes vxFantEntra { from { opacity:0; transform: translate3d(0,10px,0); } to { opacity:.55; transform:none; } }
@keyframes vxFantBrilho { to { transform: translate3d(100%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .vx-gcard.vx-fantasma { animation:none; opacity:.5; }
  .vx-fant-img::after, .vx-fant-l::after { animation:none; }
}
html, body * {
    scrollbar-color: var(--vx-teal-br) transparent !important;
    scrollbar-width: thin;
}
/* ATUALIZAR SITUACAO (Ofertas) — no cabecalho, discreto: e conferencia, nao acao principal.
   O giro so existe enquanto busca; icone que gira parado vira ruido de fundo. */
/* mesmo tratamento do icone da faixa: sem contorno, luz por dentro */
.vx-of-refresh { margin-left:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border: 0; color:#fff; cursor:pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
  transition: background .18s, transform .18s; }
.vx-of-refresh:hover:not(:disabled) { background:rgba(255,255,255,.22); transform: rotate(-25deg); }
.vx-of-refresh:disabled { cursor:default; opacity:.75; }
.vx-of-refresh.girando .mud-icon-root { animation: vxGira .8s linear infinite; }
@keyframes vxGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vx-of-refresh.girando .mud-icon-root { animation:none; } }

/* O ↻ DA FICHA DE CREDITO. Ele parecia quebrado porque os numeros do ERP quase nunca mudam entre
   dois cliques: a tela ficava identica e nao havia como saber se a consulta rodou. O giro mostra
   que esta trabalhando; o relogio ao lado mostra que trabalhou. */
.vx-cred-hora { font-size:10.5px; color:var(--vx-faint); font-variant-numeric: tabular-nums;
  margin-right:8px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-cred-re { display:inline-block; }
.vx-cred-re.girando { animation: vxGira .8s linear infinite; color: var(--vx-teal-br); cursor:progress; }
@media (prefers-reduced-motion: reduce) { .vx-cred-re.girando { animation:none; } }

/* RELATO DA VARREDURA DO AGENTE. Com a aplicacao na nuvem e as fotos na maquina do cliente, este
   bloco e a unica janela para dentro da pasta dele — por isso mostra numero, e nao so "ok". */
.vx-cfg-diag { background: var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1));
  padding:11px 13px; font-size:12.5px; display:flex; flex-direction:column; gap:5px; }
.vx-diag-linha .ok { color: var(--vx-teal-br); font-weight:600; }
.vx-diag-linha .aviso { color:#f59e0b; }
.vx-diag-linha .ruim { color:#ff6b6b; font-weight:600; }
.vx-diag-linha.sub { color: var(--vx-muted); font-size:11.5px; }
.vx-diag-linha.exemplo code { font-size:11px; color: var(--vx-faint); word-break: break-all; }
.vx-cfg-diag code { background: rgba(255,255,255,.05); padding:1px 5px; border-radius:calc(5px * var(--vx-raio, 1)); }

/* ══════════════════════════════════════════════════════════════════════════════
   CELULAR
   ══════════════════════════════════════════════════════════════════════════════
   O vendedor abre isto no pátio, no telefone, com o cliente do lado. Até aqui a tela
   era desenhada para monitor: numa largura de 375px o menu lateral ficava aberto
   comendo 240px, a galeria caía para duas colunas de 50px e o nome do material
   quebrava letra a letra.

   O menu virar sobreposição está no MainLayout (Breakpoint.Sm). O que sobra é o
   conteúdo: cartão numa coluna só, barra de filtros que rola em vez de empilhar, e
   o que é enfeite de desktop saindo da frente. */
@media (max-width: 720px) {
  :root { --vx-card-min: 150px; }

  .vx-page { padding-left: 10px; padding-right: 10px; }

  /* A barra do topo em telas estreitas: a busca some (existe a lupa, que leva à /busca)
     e o selo do ERP também — não é ação, é informação de status. */
  .vx-appbar-search { display: none; }
  /* ESCOPADO NA BARRA. `.vx-erp-pill` é a pílula genérica da casa, não só o selo do ERP do topo:
     sem o `.vx-appbar` esta regra apagava, em TODO card de cliente do celular, o risco, o PF/PJ e a
     última compra — a informação de crédito e de recência simplesmente não existia no telefone, e
     ninguém tinha como saber que ela tinha sumido. Some também o status da campanha em Marketing e
     o selo de conexão nas Configurações. */
  .vx-appbar .vx-erp-pill { display: none; }

  /* Cabeçalho da galeria: título e busca um sob o outro, sem apertar os dois. */
  .vx-gal-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .vx-gal-head input.vx-input { width: 100% !important; }

  /* O TÍTULO DA TELA TAMBÉM QUEBRA LINHA. "Cockpit · 24 pedidos · 8 etapas" numa linha só media
     431px e esticava a página do Cockpit para 451 — e uma página esticada arrasta a barra do topo
     junto. Como todo item de flex, ele precisa do `min-width: 0` para poder ceder. */
  .vx-ws-title { min-width: 0; flex-wrap: wrap; row-gap: 2px; }

  /* E AS FILEIRAS DE ACAO DO CABECALHO TAMBEM QUEBRAM LINHA. No Cockpit, "Atualizar · Arquivados ·
     Cabine · Configurar etapas" numa linha so media 431px numa tela de 375: "Configurar etapas" nao
     aparecia, "Cabine" ficava pela metade, e a pagina inteira ganhava rolagem lateral — arrastando
     para o lado o quadro se descolava da barra. Quatro botoes cabem em duas linhas; nenhum cabe
     fora da tela. */
  .vx-gal-head > div { flex-wrap: wrap; min-width: 0; }

  /* Os filtros ROLAM na horizontal em vez de empilhar em cinco linhas. É o padrão
     que todo aplicativo usa no telefone, e mantém a lista visível na primeira dobra. */
  /* O `min-width: 0` NÃO É DETALHE — é o que faz a rolagem acontecer.
     Item de flex nasce com `min-width: auto`: ele se recusa a ficar menor que o próprio conteúdo,
     e aí o `overflow-x: auto` daqui nunca tinha o que rolar. A fileira ficava com 640px numa tela
     de 375, ESTICAVA A PÁGINA INTEIRA, e a barra fixa do topo — que é `width: 100%` — crescia
     junto: sino, tema, paleta, sair e avatar iam parar fora da tela. Medido: com o min-width, a
     barra vai de 650px para 360px e nenhum controle fica de fora. */
  .vx-gal-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .vx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
              min-width: 0; max-width: 100%; }
  .vx-chips::-webkit-scrollbar { display: none; }
  .vx-chips .vx-chip { flex: 0 0 auto; }
  .vx-gal-verpor { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
                   min-width: 0; max-width: 100%; }
  .vx-gal-verpor::-webkit-scrollbar { display: none; }

  /* Cabeçalho do grupo: no celular ele virava uma coluna estreita com o texto
     quebrando. Vira bloco, e os botões de ação passam para baixo, roláveis. */
  .vx-mat-h { flex-wrap: wrap; gap: 8px; }
  .vx-mat-h .vx-iabtn { font-size: 10.5px; padding: 4px 9px; }
  .vx-mat-thumb { width: 44px; height: 44px; flex: 0 0 44px; }

  /* Cartão: a foto ocupa a largura inteira do cartão. O height fixo de 150px do
     desktop, combinado com aspect-ratio, deixava a imagem com 200px num cartão de
     355 — metade do cartão era vazio preto. */
  .vx-gcard-img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .vx-gcard-name { font-size: 12px; }
  .vx-gcard-foot { flex-wrap: wrap; gap: 4px; }
  .vx-patio { font-size: 9px; padding: 1px 6px; }

  /* Tabelas largas (pedidos, clientes) rolam dentro da própria caixa em vez de
     empurrar a página inteira para o lado. */
  .vx-card table, .vx-tbl { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Telefone pequeno (≤400px): uma coluna só. Duas de 150 já ficariam menores que a
   miniatura que o próprio bucket serve, e aí a foto perde para o texto. */
@media (max-width: 400px) {
  :root { --vx-card-min: 100%; }
  .vx-gal-flow, .vx-gal-grid, .vx-grid { grid-template-columns: 1fr; }
}

/* O TRILHO DO MENU SOME NO TELEFONE. Fechado, o menu "mini" deixa uma faixa de 56px sempre
   visível — no monitor é atalho, num aparelho de 375px é 15% da tela ocupada por ícones que
   ninguém acerta com o dedo. O botão de sanduíche continua abrindo o menu, agora por cima do
   conteúdo, que é como todo aplicativo de celular faz. */
@media (max-width: 600px) {
  .mud-drawer.mud-drawer--closed { transform: translateX(-100%) !important; visibility: hidden; }
  .mud-main-content { margin-left: 0 !important; }
  /* TRAVA DA BARRA DO TOPO. `width: 100%` numa barra fixa não mede a TELA: mede a página — e
     qualquer coisa que estoure a largura em qualquer tela (uma fileira que não rola, uma tabela,
     um gráfico) faz a barra crescer junto e empurra sino, tema, paleta, sair e avatar para fora,
     sem scroll e sem aviso. Foi o que o Daniel viu como "a barra superior incompleta".
     `100vw` mede a TELA, não a página: o transbordo de uma tela nova nunca mais leva a barra
     junto. Isto é a rede de proteção — o transbordo em si continua sendo defeito e se corrige
     onde nasce. */
  /* A MARGEM TAMBÉM. O MudBlazor reserva a faixa do menu "mini" com `margin-left: 56px` na barra.
     Zerar só o `left` não adianta: a barra continuava inteira 56px para a direita, e a ponta
     direita — avatar e sino — ficava fora da tela mesmo com a largura certa. */
  .mud-appbar { left: 0 !important; width: 100% !important; max-width: 100vw !important;
                margin-left: 0 !important; margin-right: 0 !important; }

  /* CABER É REQUISITO. Com a barra presa à tela, os controles ainda somavam mais que 375px e os
     últimos caíam para fora — o avatar, justamente o que abre o menu da pessoa.
     "Sair" sai da barra porque ELE JÁ ESTÁ no menu do avatar, com nome e explicação: manter o
     ícone solto era gastar 38px repetindo o que está a um toque dali. */
  .vx-appbar-logout { display: none; }

  /* DOIS ESPAÇADORES NUM TELEFONE SÃO 60px DE NADA. Eles existem para centralizar a busca no
     monitor; aqui só empurravam o avatar para fora. Um basta — ele encosta o grupo de ícones na
     direita, que é onde a mão alcança. */
  .vx-appbar .mud-toolbar > .flex-grow-1 ~ .flex-grow-1 { display: none; }
  .vx-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; }

  /* TODO ÍCONE DA BARRA COM O MESMO TAMANHO E DO TAMANHO DO DEDO.
     Antes eram três alturas na mesma fileira — 40px nos ícones, 48 no tema (culpa do `ml-2` do
     MudBlazor) e 32 no avatar. É literalmente o "botões e formatos irregulares" que o Daniel
     apontou. Agora todos medem 44px, que é o alvo mínimo de toque, e o avatar 40 — ele é redondo e
     tem foto, então lê como alvo mesmo um pouco menor.

     `margin: 0 !important` porque o `.ml-2` do MudBlazor é !important: sem isso o tema continua
     8px afastado e a fileira volta a parecer torta. O respiro entre os ícones vem do `gap` da
     barra, igual para todos — e não de margem em um deles só. */
  .vx-appbar .mud-toolbar { gap: 2px; }
  .vx-appbar .mud-toolbar .mud-icon-button,
  .vx-appbar .vx-sino,
  .vx-appbar .vx-appbar-searchbtn { width: 44px; height: 44px; margin: 0 !important; }
  .vx-appbar .mud-toolbar .mud-tooltip-root { display: inline-flex; margin: 0 !important; }
  .vx-appbar .vx-avatar-bt { width: 40px; height: 40px; margin: 0 !important; }
}

/* Abaixo de 420px nem a palavra da marca cabe. Fica o símbolo, que é o que as pessoas reconhecem
   e continua sendo o link para a Início. */
@media (max-width: 420px) {
  .vx-brand span { display: none; }
}

/* CABEÇALHO DO GRUPO NO TELEFONE. Nome, medidas e cinco botões na mesma linha não cabem em
   375px: o material virava "M…" e as peças/m²/preço quebravam numa coluna de duas palavras.
   Os botões passam para uma linha própria (o ::after força a quebra), e a informação fica com
   a largura inteira — que é o que a pessoa lê antes de decidir abrir o cavalete. */
@media (max-width: 600px) {
  .vx-mat-h { flex-wrap: wrap; row-gap: 8px; }
  .vx-mat-h::after { content: ''; flex-basis: 100%; height: 0; order: 8; }
  .vx-mat-h .vx-iabtn { order: 9; }
  /* O ::after acima e uma QUEBRA DE LINHA: tudo com order 9 cai abaixo dele. Quando isto foi
     escrito os cinco botoes eram .vx-iabtn e desciam juntos; ao virarem um menu, o .vx-acoes-wrap
     nasceu sem order e ficou preso na linha de cima, sozinho de um lado enquanto "Definir preco"
     ocupava a linha inteira embaixo. Os dois sao acao do mesmo cavalete: descem juntos. */
  .vx-mat-h .vx-acoes-wrap { order: 9; }
  .vx-mat-h .vx-mat-badge { max-width: none; }
  .vx-mat-sub { white-space: normal; }
}

/* ── INDISPONÍVEL SE LÊ DE LONGE (oferta e pedido): reservada = vermelho, em outra oferta =
   âmbar. A TARJA atravessa o rodapé da foto; a foto apaga com um VÉU ::after (backdrop-filter),
   e não com filter no container — filter pegaria os filhos e apagaria a própria tarja. ── */
.vx-pd-prodcard.vx-pd-reserv { border-color:rgba(239,83,80,.55); box-shadow:0 0 0 1px rgba(239,83,80,.22) inset; }
.vx-pd-prodcard.vx-pd-emoferta { border-color:rgba(245,158,11,.55); box-shadow:0 0 0 1px rgba(245,158,11,.22) inset; }
.vx-pd-prodcard.vx-pd-reserv .vx-pd-prodimg::after,
.vx-pd-prodcard.vx-pd-emoferta .vx-pd-prodimg::after {
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(8,9,14,.44); backdrop-filter:saturate(.3) contrast(.92); }
.vx-pd-tarja { position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:5px; padding:4px 6px;
  font-size:10px; font-weight:800; letter-spacing:calc(.14em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-sobre-destaque, #04110c); }
.vx-pd-tarja.oferta  { background:linear-gradient(90deg,#f59e0b,#f2b441); }
.vx-pd-tarja.reserva { background:linear-gradient(90deg,#ef5350,#f4726e); color:#1a0505; }

/* como se seleciona a chapa no montador do pedido: cavalete (padrão) ou uma a uma */
.vx-sel-modo { display:flex; align-items:center; gap:6px; margin:10px 0 2px; flex-wrap:wrap; }
.vx-sel-modo .lbl { font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.03em * var(--vx-tracking, 1)); color:var(--vx-faint); margin-right:2px; }
.vx-sel-modo button { font:inherit; font-size:12.5px; padding:5px 12px; border-radius:var(--vx-pill, 99px); cursor:pointer;
  color:var(--vx-muted); background:var(--vx-surface); border:1px solid var(--vx-border); }
.vx-sel-modo button.on { color:var(--vx-sobre-destaque, #04110c); background:var(--vx-teal); border-color:var(--vx-teal); font-weight:600; }
.vx-sel-modo button:disabled { opacity:.4; cursor:not-allowed; }
.vx-sel-modo .hint { font-size:11.5px; color:var(--vx-faint); }

/* busca do pedido no modo cavalete: o card e o cavalete, nao a chapa.
   O numero fica a ESQUERDA e o "no pedido" a DIREITA: os dois nasceram no mesmo canto e o
   selo verde cobria justamente o numero do cavalete, que e a unica coisa que identifica o card. */
.vx-pd-cav { position:absolute; left:8px; top:8px; font-size:11px; font-weight:700; color:var(--vx-sobre-destaque, #04110c);
  background:var(--vx-teal); padding:2px 9px; border-radius:var(--vx-pill, 99px); max-width:calc(100% - 92px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-pd-prodimg .vx-pd-cav ~ .vx-pd-badge { left:auto; right:6px; }
.vx-pd-avisocav { font-size:11px; color:#f0b429; margin-top:2px; }

/* cabeca do cavalete na lista de itens do pedido */
.vx-pi-grupo { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--vx-teal-soft);
  background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 22%, transparent); border-radius:calc(10px * var(--vx-raio, 1));
  padding:7px 6px 7px 12px; margin-top:6px; }
.vx-pi-grupo span { color:var(--vx-muted); font-size:12px; }
/* material + contagem + peso do cavalete: cede espaço em vez de empurrar o preço, que se prende
   à direita com margin-left:auto. min-width:0 é o que deixa um filho flex encolher abaixo do
   conteúdo — sem ele o text-overflow nunca chega a acontecer. */
.vx-pi-grupo span.ds { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* O NOME DO MATERIAL EM LINHA PRÓPRIA, abaixo do "Cavalete NNN · N chapas · m² · Kg".
   Antes tudo dividia um span truncável, e como o nome vinha primeiro ele consumia a largura e a
   reticência engolia o peso — o número por onde se escolhe contêiner. Quem carrega o
   flex:1;min-width:0 agora é o wrapper, então o campo de preço continua sem ser empurrado; e o
   .mat trunca sozinho, na linha dele, de modo que nome comprido corta o NOME e nunca os números. */
.vx-pi-grupo .cab { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.vx-pi-grupo .cab .l1 { display:flex; align-items:baseline; gap:8px; min-width:0; }
.vx-pi-grupo .cab .mat { font-size:12px; color:var(--vx-muted); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* QUAIS chapas estão no cavalete. Fica acima do material e abaixo dos totais porque é o dado que
   se procura de relance; trunca na linha dela em vez de empurrar o preço. */
.vx-pi-grupo .cab .chapas { font-size:11.5px; color:var(--vx-teal-soft); opacity:.9; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
/* O MATERIAL É A MANCHETE, e o número do cavalete vem atrás (mercado externo, 12/09/2026).
   Quem encolhe agora é o NOME: ele é o único texto de comprimento imprevisível da linha
   ("QUARTZITE KOUROS BRUSHED 3,0CM" ou "SOAPSTONE BOTANIC HONED 2,0CM"), enquanto "Cavalete
   575604" e "6 chapas · 39,6 m²" têm largura conhecida e são os dois que não podem ser cortados
   — o número porque é por ele que se acha o monte no pátio, a contagem porque é o que se confere. */
.vx-pi-grupo .cab .l1 b.nome { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-pi-grupo .cab .l1 .cav { flex:0 0 auto; white-space:nowrap; font-size:11.5px; color:var(--vx-faint);
  font-variant-numeric:tabular-nums; }
/* e o "Cavalete NNN" não quebra em duas linhas quando o espaço aperta: deixar só o .ds encolher
   resolve o empurrão do preço, mas o irmão ao lado ainda podia partir no meio do número. */
.vx-pi-grupo b { white-space:nowrap; }
/* O preco do cavalete agora carrega ate' tres coisas: a soma riscada (quando ha desconto de
   pacote), o valor que o cliente ve, e o R$/m2 dele. Coluna, alinhada a direita. */
.vx-pi-grupo .tot { margin-left:auto; color:var(--vx-teal-soft); font-weight:600;
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; white-space:nowrap; }
.vx-pi-grupo .tot s { color:var(--vx-faint); font-weight:400; font-size:11px; }
.vx-pi-grupo span.un { color:var(--vx-faint); font-weight:400; font-size:11px; }
/* O POR-ÁREA É O NÚMERO GRANDE, o total do cavalete vem embaixo e menor (item 8 das Demandas ME 2):
   é por m²/ft² que o comprador compara e que o vendedor negocia. */
.vx-pi-grupo .tot .un1 { font-size:14.5px; font-weight:700; color:var(--vx-teal-br); font-variant-numeric:tabular-nums; }
.vx-pi-grupo .tot .val { font-size:11.5px; font-weight:500; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-pi-grupo .tot .val s { margin-right:5px; }
/* A PEDRA SOZINHA NA PRIMEIRA LINHA do cabeçalho do cavalete na oferta (item 6 das Demandas ME 2);
   "Cavalete N · chapas · m² · kg" desce para a segunda, sem disputar largura com o nome. */
.vx-pi-grupo .cab.mat1 .l1 b.nome { font-size:13.5px; font-weight:700; color:var(--vx-text); letter-spacing:calc(.01em * var(--vx-tracking, 1)); }
.vx-pi-grupo .cab.mat1 .l2 { display:flex; align-items:baseline; gap:8px; min-width:0; }
.vx-pi-grupo .cab.mat1 .l2 .cav { flex:0 0 auto; white-space:nowrap; font-size:12px; font-weight:600;
  color:var(--vx-teal-soft); font-variant-numeric:tabular-nums; }

/* cabeca do cavalete: expandir, precificar o grupo e trocar a unidade */
.vx-pi-grupo .exp { border:none; background:none; color:var(--vx-teal-soft); cursor:pointer; padding:0; display:flex; }
.vx-pi-grupo.aberto { border-bottom-left-radius:0; border-bottom-right-radius:0; }
.vx-pi-grupo .pm2 { display:flex; flex-direction:column; gap:2px; margin-left:auto; font-size:10px;
  text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.02em * var(--vx-tracking, 1)); color:var(--vx-faint); }
.vx-pi-grupo .pm2 input { width:96px; height:28px; padding:0 8px; font:inherit; font-size:12.5px;
  color:var(--vx-text); background:var(--vx-bg); border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); outline:none; }
.vx-pi-grupo .pm2 input:focus { border-color:var(--vx-teal); }
.vx-pi-grupo .unid { border:1px solid var(--vx-border); background:var(--vx-bg); color:var(--vx-muted);
  font:inherit; font-size:11px; padding:4px 8px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; }
.vx-pi-grupo .unid:hover { border-color:var(--vx-teal); color:var(--vx-teal-soft); }
.vx-pi-grupo .tot { margin-left:8px; }

/* selo de reserva no cabecalho do grupo do catalogo */
.vx-grp-res { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:var(--vx-pill, 99px);
  font-size:10.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); white-space:nowrap;
  color:var(--vx-sobre-destaque, #04110c); background:#f0b429; }
.vx-grp-res.outro { color:#fff; background:rgba(217,119,6,.92); }

/* A FOTO ENTRA COM FADE nos quadrinhos.
   O card pinta o gradiente da pedra na hora e a foto chega depois, pelo background — trocar de
   um para outro num quadro seco faz a grade inteira "piscar" enquanto a busca carrega. A
   animacao e so de opacidade e transform leve: composita na GPU, nao dispara layout, e nao
   custa requisicao nenhuma. */
@keyframes vx-img-in { from { opacity:0; transform:scale(1.015); } to { opacity:1; transform:none; } }
.vx-pd-prodimg, .vx-gcard-img, .vx-prod-selitem .thumb, .vx-pi-grupo .thumb {
  animation: vx-img-in .32s ease-out both; will-change: opacity; }
@media (prefers-reduced-motion: reduce) {
  .vx-pd-prodimg, .vx-gcard-img, .vx-prod-selitem .thumb, .vx-pi-grupo .thumb { animation: none; } }

/* A LISTA TAMBEM ENTRA COM FADE.
   O catalogo pinta 160 linhas de uma vez e elas apareciam num quadro so, secas — com foto
   chegando depois, a grade dava a impressao de piscar. Aqui a linha inteira entra suave,
   com um escalonamento curto que dá sensacao de fluidez sem virar espera: 8 degraus de 22ms,
   teto de ~180ms, e da nona linha em diante todas entram juntas. Nada de JS, nada de layout —
   so opacidade e translate, que o compositor resolve. */
@keyframes vx-row-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
/* `backwards`, NAO `both`. Com `both` o navegador MANTEM o ultimo keyframe aplicado depois que a
   animacao acaba — e como esse keyframe mexe em transform, a linha fica para sempre com uma matriz
   identidade. Transform diferente de `none` faz o elemento virar bloco container de qualquer
   descendente `position: fixed`: a capa invisivel que fecha o menu de acoes (inset:0, que deveria
   cobrir a tela toda) nascia do tamanho da PROPRIA linha — 351x218 num telefone. Tocar fora do
   cartao nao fechava o menu, e no celular nao ha "tocar fora" que valha. `backwards` da o mesmo
   efeito de entrada (e' ele que segura o primeiro keyframe durante o atraso escalonado) e devolve
   o transform para `none` quando termina. */
.vx-gal-flow > .vx-mat-h, .vx-gal-flow > .vx-gcard { animation: vx-row-in .28s ease-out backwards; }
.vx-gal-flow > *:nth-child(1) { animation-delay:0ms }
.vx-gal-flow > *:nth-child(2) { animation-delay:22ms }
.vx-gal-flow > *:nth-child(3) { animation-delay:44ms }
.vx-gal-flow > *:nth-child(4) { animation-delay:66ms }
.vx-gal-flow > *:nth-child(5) { animation-delay:88ms }
.vx-gal-flow > *:nth-child(6) { animation-delay:110ms }
.vx-gal-flow > *:nth-child(7) { animation-delay:132ms }
.vx-gal-flow > *:nth-child(8) { animation-delay:154ms }
.vx-gal-flow > *:nth-child(n+9) { animation-delay:176ms }
.vx-mat-thumb { animation: vx-img-in .32s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .vx-gal-flow > .vx-mat-h, .vx-gal-flow > .vx-gcard, .vx-mat-thumb { animation: none; } }

/* miniatura do grupo: a foto entra sozinha, quando chega */
.vx-thumb-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition: opacity .45s ease; }
.vx-thumb-photo.vx-on { opacity:1; }
.vx-thumb-load { position:absolute; inset:0; pointer-events:none; transition:opacity .4s ease;
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.05) 42%, rgba(255,255,255,.13) 50%, rgba(255,255,255,.05) 58%, transparent 78%);
  background-size: 220% 100%; animation: vx-shimmer 1.3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .vx-thumb-photo { transition:none; } .vx-thumb-load { animation:none; } }


/* CAMPO QUE DEPENDE DO ERP — a barra fina que aparece enquanto a lista vem de la.
   Posicionada por cima da borda de baixo do campo: ocupa zero altura, entao ligar e
   desligar a barra nao empurra o formulario para baixo. */
.vx-campo-erp { position: relative; }
.vx-campo-erp-barra {
  position: absolute;
  left: 0; right: 0;
  bottom: 22px;                 /* rente ao campo, acima do texto de ajuda */
  height: 2px;
  border-radius: calc(2px * var(--vx-raio, 1));
  opacity: .85;
}

/* ══════════════════════════════════════════════════════════════════════════════
   RESERVAS — onde a chapa que sumiu do catalogo reaparece.

   A hierarquia visual carrega o diagnostico: os cartoes de cima respondem "quanto
   esta preso e quanto disso e engano", e a lista responde "qual pedra, presa onde,
   por quem, ate quando". Orfa e sem-prazo ganham marca lateral porque sao os dois
   casos em que a pedra sumiu SEM ninguem estar vendendo — o resto e reserva
   legitima e nao deve gritar.
   ══════════════════════════════════════════════════════════════════════════════ */
.vx-res-topo { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.vx-res-h1 { font-size:26px; font-weight:800; letter-spacing:calc(-.02em * var(--vx-tracking, 1)); margin:0 0 4px; }
.vx-res-sub { color:var(--vx-muted); font-size:13px; max-width:620px; }

/* TETO DE LARGURA nos cinco contadores. Sem ele, numa tela larga cada um vira uma faixa de
   360px com um numero e duas palavras dentro — cartao de contagem esticado ate parecer banner,
   e o olho tem de atravessar a tela inteira para comparar cinco numeros que cabiam num palmo. */
.vx-res-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; max-width:1180px; }
.vx-res-card {
  background:var(--vx-surface); border:1px solid var(--vx-border);
  border-radius:calc(12px * var(--vx-raio, 1)); padding:12px 14px; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.vx-res-card:hover { transform:translateY(-1px); border-color:var(--vx-border-2); }
.vx-res-card.on { border-color:var(--vx-teal-br); background:var(--vx-teal-glow); }
.vx-res-card.alerta .n { color:var(--vx-morno); }
.vx-res-card .n { font-size:26px; font-weight:800; line-height:1.1; }
.vx-res-card .l { font-size:12px; color:var(--vx-muted); font-weight:600; margin-top:2px; }
.vx-res-card .d { font-size:11px; color:var(--vx-muted); opacity:.75; margin-top:3px; line-height:1.3; }

.vx-res-barra { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.vx-res-busca { max-width:340px; flex:1 1 220px; }
.vx-res-chips { display:inline-flex; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(9px * var(--vx-raio, 1)); padding:2px; }
.vx-res-chips button {
  border:0; background:transparent; color:var(--vx-muted);
  font-size:12px; font-weight:700; padding:6px 12px; border-radius:calc(7px * var(--vx-raio, 1)); cursor:pointer;
}
.vx-res-chips button.on { background:var(--vx-teal-br); color:var(--vx-bg); }

.vx-res-vazio { text-align:center; padding:56px 16px; color:var(--vx-muted); }
.vx-res-vazio .t { font-size:16px; font-weight:700; margin-top:10px; color:var(--vx-text); }
.vx-res-vazio .s { font-size:13px; margin-top:4px; }

.vx-res-lista { display:flex; flex-direction:column; gap:8px; }
.vx-res-item {
  display:grid; grid-template-columns:56px minmax(180px,2fr) minmax(150px,1.4fr) minmax(120px,1fr) minmax(110px,.9fr) minmax(104px,168px);
  gap:14px; align-items:center;
  background:var(--vx-surface); border:1px solid var(--vx-border);
  border-left:3px solid transparent; border-radius:calc(11px * var(--vx-raio, 1)); padding:10px 14px;
}
.vx-res-item.orfa { border-left-color:var(--vx-morno); }
.vx-res-item.semprazo { border-left-color:var(--vx-frio); }
.vx-res-item .foto { width:56px; height:44px; border-radius:calc(7px * var(--vx-raio, 1)); background-size:cover; background-position:center; flex:none; }
.vx-res-item .mat { font-weight:700; font-size:13.5px; line-height:1.25; }
.vx-res-item .ids { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.vx-res-item .tag {
  font-size:10.5px; font-weight:700; letter-spacing:calc(.02em * var(--vx-tracking, 1));
  background:rgba(255,255,255,.05); border:1px solid var(--vx-border);
  color:var(--vx-muted); padding:1px 6px; border-radius:calc(5px * var(--vx-raio, 1));
}
.vx-res-item .tag.cav { color:var(--vx-teal-soft); border-color:var(--vx-border-2); }
.vx-res-item .tag.ruim { color:var(--vx-frio); border-color:var(--vx-frio); background:transparent; }
.vx-res-item .link { font-size:12.5px; font-weight:700; color:var(--vx-teal-br); text-decoration:none; }
.vx-res-item .link:hover { text-decoration:underline; }
.vx-res-item .link.neutro { color:var(--vx-muted); }
.vx-res-item .det { font-size:11px; color:var(--vx-muted); margin-top:2px; }
.vx-res-item .det.cli { font-style:italic; }
.vx-res-item .det .ruim { color:var(--vx-frio); font-weight:700; }
.vx-res-item .nome { font-size:12.5px; font-weight:600; }
.vx-res-item .p { font-size:13px; font-weight:800; }
.vx-res-item .p.aviso { color:var(--vx-morno); }
.vx-res-item .p.ruim { color:var(--vx-frio); }
.vx-res-item .orfaflag { font-size:10.5px; font-weight:800; color:var(--vx-morno); margin-top:3px; }

@media (max-width: 900px) {
  /* no telefone a linha vira bloco: a foto e o material ficam juntos em cima e o
     resto empilha, em vez de seis colunas espremidas e ilegiveis */
  .vx-res-item { grid-template-columns:56px 1fr; row-gap:8px; }
  .vx-res-item .onde, .vx-res-item .vend, .vx-res-item .prazo, .vx-res-item .acao { grid-column:2; }
}

/* ── O CAVALETE COMO UMA LINHA SO ──────────────────────────────────────────────
   Um cavalete preso inteiro ao mesmo pedido rendia dezenas de linhas identicas:
   mesma pedra, mesmo vendedor, mesmo prazo, uma embaixo da outra. A reserva
   DIFERENTE no meio delas era o que ninguem via.

   O cabecalho usa a MESMA grade da linha de chapa de proposito: as colunas se
   alinham, entao o olho le "material / onde / quem / ate quando" na mesma altura
   esteja o cavalete aberto ou fechado. So a moldura muda — fundo um degrau mais
   claro e a marca lateral em teal, para dizer "isto resume, nao e uma chapa".

   A ULTIMA COLUNA E minmax(104px,168px) NAS DUAS, e nao "auto". Com "auto" cada
   grade media o proprio conteudo — "de outro vendedor" na linha, botao + seta no
   cabecalho — e as colunas do meio saiam ~46px fora de registro uma da outra. Um
   valor FIXO resolvia o registro e criava outro problema: subia a largura minima
   da linha acima do que sobra entre 900px (o breakpoint) e ~1000px, e ali a tela
   passava a rolar de lado. O minmax faz as duas coisas: 168px sempre que cabe,
   encolhe antes de estourar.
   ══════════════════════════════════════════════════════════════════════════════ */
.vx-res-gcab {
  display:grid;
  grid-template-columns:56px minmax(180px,2fr) minmax(150px,1.4fr) minmax(120px,1fr) minmax(110px,.9fr) minmax(104px,168px);
  gap:14px; align-items:center;
  background:var(--vx-surface-2); border:1px solid var(--vx-border-2);
  border-left:3px solid var(--vx-teal-br); border-radius:calc(11px * var(--vx-raio, 1)); padding:10px 14px;
  cursor:pointer; user-select:none;
  transition:background .15s ease, border-color .15s ease;
}
.vx-res-gcab:hover { background:var(--vx-surface-3); }
/* aberto tem de se ver de longe: numa lista rolada, a seta de 20px na ponta era o unico
   sinal de qual cabecalho as linhas indentadas pertencem */
.vx-res-gcab.on { background:var(--vx-surface-3); border-color:var(--vx-teal-br); }
/* o cabecalho e um botao para o teclado tambem (tabindex+Enter/Espaco) — precisa de foco visivel */
.vx-res-gcab:focus-visible { outline:2px solid var(--vx-teal-br); outline-offset:2px; }
.vx-res-gcab .foto {
  width:56px; height:44px; border-radius:calc(7px * var(--vx-raio, 1)); background-size:cover; background-position:center;
  flex:none; position:relative;
}
/* o numero fica SOBRE a foto: no cabecalho a imagem e so uma amostra do monte, e
   quantas chapas sao e a informacao que a pessoa procura primeiro */
.vx-res-gcab .foto .n {
  position:absolute; inset:auto 0 0 0; text-align:center;
  background:linear-gradient(transparent, rgba(0,0,0,.8));
  /* branco EXPLICITO: o degrade atras e sempre escuro, mas a cor herdada do texto nao —
     no tema claro o numero herdaria quase-preto sobre preto e sumiria */
  color:#fff;
  font-size:12px; font-weight:800; padding:7px 0 2px; border-radius:0 0 calc(7px * var(--vx-raio, 1)) calc(7px * var(--vx-raio, 1));
}
.vx-res-gcab .mat { font-weight:800; font-size:14px; line-height:1.25; }
.vx-res-gcab .ids { display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.vx-res-gcab .tag {
  font-size:10.5px; font-weight:700; letter-spacing:calc(.02em * var(--vx-tracking, 1));
  background:rgba(255,255,255,.05); border:1px solid var(--vx-border);
  color:var(--vx-muted); padding:1px 6px; border-radius:calc(5px * var(--vx-raio, 1));
}
.vx-res-gcab .tag.cav { color:var(--vx-teal-soft); border-color:var(--vx-border-2); }
.vx-res-gcab .tag.forte { color:var(--vx-text); border-color:var(--vx-border-2); background:rgba(255,255,255,.09); }
.vx-res-gcab .tag.ruim { color:var(--vx-frio); border-color:var(--vx-frio); background:transparent; }
.vx-res-gcab .link.neutro { font-size:12.5px; font-weight:700; color:var(--vx-muted); }
.vx-res-gcab .det { font-size:11px; color:var(--vx-muted); margin-top:2px; }
.vx-res-gcab .det.cli { font-style:italic; }
.vx-res-gcab .nome { font-size:12.5px; font-weight:600; }
.vx-res-gcab .p { font-size:13px; font-weight:800; }
.vx-res-gcab .p.aviso { color:var(--vx-morno); }
.vx-res-gcab .p.ruim { color:var(--vx-frio); }
.vx-res-gcab .acao { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.vx-res-chev { font-size:20px !important; color:var(--vx-faint); }

.vx-res-gsoltar {
  border:1px solid var(--vx-border-2); background:transparent; color:#f0b429;
  font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:calc(8px * var(--vx-raio, 1));
  cursor:pointer; white-space:nowrap;
}
.vx-res-gsoltar:hover { background:rgba(240,180,41,.12); }

/* a chapa de um cavalete aberto anda para a direita — e o unico sinal necessario
   de que ela pertence ao cabecalho de cima, e nao custa nem borda nem moldura */
.vx-res-item.dentro { margin-left:22px; }
/* dentro do grupo o selo "cavalete X" repete o cabecalho tres linhas acima */
/* O CAVALETE APARECE EM CADA CHAPA, e nao so no cabecalho.
   Escondia aqui por ser "redundante": o cabecalho ja dizia. Redundante e' na tela parada — num
   cavalete de vinte chapas o cabecalho sobe e sai, e da metade da lista para baixo a pessoa esta
   olhando linhas que nao dizem a que monte pertencem. Repetir o numero custa doze pixels; perder
   a referencia custa abrir e fechar o monte para reconferir. */
.vx-res-item.dentro .tag.cav { opacity:.72; }

@media (max-width: 900px) {
  .vx-res-gcab { grid-template-columns:56px 1fr; row-gap:8px; }
  .vx-res-gcab .onde, .vx-res-gcab .vend, .vx-res-gcab .prazo, .vx-res-gcab .acao { grid-column:2; }
  .vx-res-gcab .acao { justify-content:flex-start; }
  .vx-res-item.dentro { margin-left:12px; }
}

/* Ajuda embaixo de um campo de formulario: diz a consequencia, nao repete o rotulo.
   O estado "alerta" e para quando deixar em branco quebra alguma coisa la na frente. */
.vx-lbl-ajuda { font-size: 11px; color: var(--vx-muted); margin-top: 4px; line-height: 1.35; }
.vx-lbl-ajuda .alerta { color: var(--vx-morno); }


/* BLOCO DO ERP no painel do pedido — tres naturezas separadas: ESTADO (o numero e a
   situacao la), EXPLICACAO (a nota e o aviso) e ACOES. Antes era uma pilha unica onde
   "Cancelar no Protheus" — que apaga o pedido no ERP — tinha o mesmo peso visual de
   "Reenviar alteracao". */
.vx-erp-card {
  margin-top: 8px; padding: 10px 12px;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  border-radius: calc(10px * var(--vx-raio, 1));
}
.vx-erp-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vx-erp-doc { font-size: 12.5px; color: var(--vx-text); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.vx-erp-topo .mud-icon-button { margin-left: auto; }
.vx-erp-card .vx-pd-erp-nota { margin-top: 4px; font-size: 11.5px; color: var(--vx-muted); }
.vx-erp-aviso {
  margin: 8px 0 0; padding: 8px 10px; border-radius: calc(8px * var(--vx-raio, 1)); font-size: 12.5px;
  display: flex; gap: 8px; align-items: center;
  color: var(--vx-morno);
  background: rgba(242,180,65,.10);
  border: 1px solid rgba(242,180,65,.30);
}
.vx-erp-acoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--vx-border);
}
/* a destrutiva vai para a ponta e perde o preenchimento: continua alcancavel, deixa de competir */
.vx-erp-acoes .vx-erp-perigo {
  margin-left: auto; background: transparent;
  border: 1px solid rgba(255,107,107,.35);
  color: var(--vx-frio);
}
.vx-erp-acoes .vx-erp-perigo:hover:not(:disabled) { background: rgba(255,107,107,.12); }


/* DIALOGO DA CASA — usado no "Sair".
   E' um <dialog> nativo de proposito: o link de sair tem de funcionar com o circuito Blazor
   caido, entao a confirmacao nao pode ser um componente. O que muda em relacao ao confirm()
   do navegador e' so a aparencia — sai o "vortexcx.com.br diz" com a cara do Chrome. */
.vx-dlg {
  /* CENTRALIZADO NA JANELA. O <dialog> aberto por showModal() se centra sozinho via
     "margin:auto" do navegador — mas basta um reset global de margin para ele encostar no
     canto superior esquerdo, que foi o que aconteceu. Fixar inset+margin nao depende de reset. */
  position: fixed; inset: 0; margin: auto;
  border: 1px solid var(--vx-border-2); border-radius: calc(14px * var(--vx-raio, 1)); padding: 0;
  background: var(--vx-surface); color: var(--vx-text);
  max-width: 380px; width: calc(100% - 32px); height: fit-content;   /* senao inset:0 o estica na vertical */
  box-shadow: var(--vx-sombra, 0 18px 50px rgba(0,0,0,.55));
}
.vx-dlg::backdrop { background: rgba(6,7,12,.62); backdrop-filter: blur(2px); }
.vx-dlg-corpo { display: flex; gap: 13px; padding: 20px 20px 4px; }
.vx-dlg-icone {
  width: 38px; height: 38px; flex: none; border-radius: calc(10px * var(--vx-raio, 1));
  display: grid; place-items: center;
  background: var(--vx-teal-glow); color: var(--vx-teal-br);
}
.vx-dlg-titulo { font-size: 15.5px; font-weight: 700; }
.vx-dlg-texto { font-size: 12.5px; color: var(--vx-muted); margin-top: 3px; line-height: 1.4; }
.vx-dlg-acoes { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px 18px; }
.vx-dlg-btn {
  border: 1px solid var(--vx-border-2); background: transparent; color: var(--vx-text);
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: calc(9px * var(--vx-raio, 1));
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
.vx-dlg-btn:hover { background: var(--vx-surface-3); }
.vx-dlg-btn.primaria {
  background: var(--vx-teal-br); border-color: var(--vx-teal-br); color: var(--vx-bg);
}
.vx-dlg-btn.primaria:hover { filter: brightness(1.08); }

/* PERMISSAO POR PESSOA — a excecao por cima do cargo.
   Tres estados por linha, e o do meio importa: "Cargo" nao e' o mesmo que "Nao". Quem segue o
   cargo acompanha a matriz quando ela muda; quem foi proibido continua proibido. Por isso a linha
   com excecao ganha marca lateral — e' o que o olho procura ao abrir a ficha. */
.vx-perm-lista { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.vx-perm-linha {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px; border-radius: calc(8px * var(--vx-raio, 1));
  border: 1px solid var(--vx-border); border-left: 3px solid transparent;
  background: var(--vx-surface);
}
.vx-perm-linha.excecao { border-left-color: var(--vx-teal-br); background: var(--vx-surface-2); }
.vx-perm-linha .txt { flex: 1; min-width: 0; }
.vx-perm-linha .t { font-size: 13px; font-weight: 600; }
.vx-perm-linha .a { font-size: 11px; color: var(--vx-muted); margin-top: 1px; }
.vx-perm-tri { display: inline-flex; background: var(--vx-bg); border: 1px solid var(--vx-border); border-radius: calc(8px * var(--vx-raio, 1)); padding: 2px; flex: none; }
.vx-perm-tri button {
  border: 0; background: transparent; color: var(--vx-muted);
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: calc(6px * var(--vx-raio, 1)); cursor: pointer;
}
.vx-perm-tri button.on  { background: var(--vx-surface-3); color: var(--vx-text); }
.vx-perm-tri button.sim { background: var(--vx-teal-br); color: var(--vx-bg); }
.vx-perm-tri button.no  { background: var(--vx-frio); color: var(--vx-bg); }
.vx-perm-rodape { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--vx-muted); }
.vx-perm-limpar { border: 0; background: transparent; color: var(--vx-teal-br); font-size: 11.5px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }

/* ══ O ITEM ATIVO DO MENU ══
   Aberto, o realce padrao do MudBlazor bastava porque o RÓTULO estava ali para confirmar. Fechado,
   sobra o icone: dez desenhos parecidos numa coluna, e o de tom levemente diferente nao responde
   "onde eu estou". Marca lateral em teal + fundo + icone aceso — le-se de relance, sem texto. */
/* FLUIDEZ ENTRE OS BOTOES. O fundo, a cor e a marca lateral trocavam num salto seco a cada
   clique. Uma transicao curta no proprio item faz o realce ACENDER e o hover DESLIZAR em vez de
   piscar -- sem barra flutuante separada (aquela versao nao ficou boa), so o item respondendo.
   As propriedades sao nomeadas, e nao "all": animar tudo pega tambem layout e vira travada. */
.vx-nav .mud-nav-link { position: relative; border-radius: 0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0;
  transition: background-color .22s ease, color .22s ease; }
.vx-nav .mud-nav-link .mud-nav-link-icon { transition: transform .22s ease, color .22s ease; }
.vx-nav .mud-nav-link:hover .mud-nav-link-icon { transform: translateX(2px); }
.vx-nav .mud-nav-link.active {
  background: var(--vx-teal-glow);
  color: var(--vx-teal-br);
  font-weight: 600;
}
/* a marca lateral CRESCE de dentro (scaleY) em vez de aparecer inteira: o ::before existe em
   todos os itens, transparente e recolhido, e so o ativo o estica e pinta. Como ele ja esta la, a
   transicao tem de onde partir -- um ::before que nasce no clique nao anima. */
.vx-nav .mud-nav-link::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 calc(3px * var(--vx-raio, 1)) calc(3px * var(--vx-raio, 1)) 0; background: var(--vx-teal-br);
  transform: scaleY(0); transform-origin: center;
  transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.vx-nav .mud-nav-link.active::before { transform: scaleY(1); }
.vx-nav .mud-nav-link.active .mud-icon-root { color: var(--vx-teal-br); }
/* ACESO À MÃO (27/09/2026): a Inteligência tem telas fora do prefixo dela (Empresas em /compradores, Países em /destinos) —
   o MainLayout marca vx-nav-on, e ele pinta como o ativo (a classe pode cair no item ou no próprio link) */
.vx-nav .vx-nav-on.mud-nav-link, .vx-nav .vx-nav-on .mud-nav-link { background: var(--vx-teal-glow); color: var(--vx-teal-br); font-weight: 600; }
.vx-nav .vx-nav-on.mud-nav-link::before, .vx-nav .vx-nav-on .mud-nav-link::before { transform: scaleY(1); }
.vx-nav .vx-nav-on.mud-nav-link .mud-icon-root, .vx-nav .vx-nav-on .mud-nav-link .mud-icon-root { color: var(--vx-teal-br); }
/* hover de quem NAO esta ativo: some da frente do ativo, para nao competirem */
.vx-nav .mud-nav-link:not(.active):hover { background: var(--vx-surface-2); }
@media (prefers-reduced-motion: reduce) {
  .vx-nav .mud-nav-link, .vx-nav .mud-nav-link::before, .vx-nav .mud-nav-link .mud-nav-link-icon { transition: none; }
  .vx-nav .mud-nav-link:hover .mud-nav-link-icon { transform: none; }
}

/* A FAIXA DE CARREGAMENTO DO VIDEO da proposta.
   Encostada na base do player, onde o olho ja esta. Barra que anda e' espera; roda que gira e'
   duvida — e numa proposta esses segundos custam a primeira impressao. */
.vx-vidbuf {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px 10px;
  background: linear-gradient(180deg, transparent, rgba(6,7,12,.85));
  pointer-events: none;   /* nao rouba o clique dos controles do video */
}
.vx-vidbuf-txt { display: block; font-size: 11.5px; color: rgba(233,236,244,.75); margin-bottom: 5px; }
.vx-vidbuf-bar { display: block; height: 3px; border-radius: calc(3px * var(--vx-raio, 1)); background: rgba(255,255,255,.14); overflow: hidden; }
.vx-vidbuf-bar i {
  display: block; height: 100%; width: 0;
  background: var(--vx-teal-br);
  transition: width .35s ease;
}

/* CREDITO DA TRILHA na proposta publica — e o aviso do mesmo credito na tela de quem monta.
   Fica embaixo do botao de musica, discreto: licenca CC BY exige que o autor apareca (condicao de
   uso, nao enfeite), mas uma linha de credito gritando numa proposta de alto padrao pesa contra. */
.vx-pp-credito {
  position: fixed; top: 52px; right: 16px; z-index: 30;
  max-width: 260px; text-align: right;
  font-size: 10.5px; line-height: 1.35;
  color: rgba(233,236,244,.42);
  animation: vx-fade .5s ease;
}
.vx-pp-credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.vx-pp-credito a:hover { color: rgba(233,236,244,.75); }

.vx-amb-credito { font-size: 11.5px; color: var(--vx-muted); margin-top: 8px; }
.vx-amb-credito b { color: var(--vx-text); font-weight: 600; }

/* PEDIDO FATURADO — o que fica no lugar dos botoes de alterar e cancelar.
   Sumir com eles sem dizer nada faria parecer defeito da tela; a frase transforma ausencia em
   resposta. Tom de conclusao, nao de alerta: faturar e' o fim feliz do ciclo. */
.vx-erp-fim {
  margin-top: 10px; padding: 9px 11px; border-radius: calc(8px * var(--vx-raio, 1));
  font-size: 12px; line-height: 1.4;
  color: var(--vx-teal-soft);
  background: var(--vx-teal-glow);
  border: 1px solid color-mix(in srgb, var(--vx-teal-soft) 22%, transparent);
}

/* MEDIDA TRAVADA — o campo continua legivel, mas nao convida ao clique.
   Preco ao lado segue editavel: a diferenca entre os dois tem de ser visivel sem ler o tooltip. */
.vx-pi-med.travada input[readonly] {
  background: transparent; border-color: transparent;
  color: var(--vx-muted); cursor: not-allowed;
}

/* O SINO DE NOTIFICACOES na barra.
   Nao abria, e eu culpei dois componentes sem provar nenhum. Hoje o sino nao abre menu de
   ninguem: e' um <span> que liga um booleano, e o painel abaixo e' desenhado aqui. O <span>
   tambem reserva a folga do contador, que transborda de proposito e a barra recortava. */
.vx-sino {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 2px;
  border-radius: 50%; cursor: pointer;
  color: inherit; overflow: visible;
  transition: background .15s ease;
}
.vx-sino:hover { background: rgba(255,255,255,.08); }
/* o contador, desenhado a mao: fica onde eu mandar e nao depende de componente nenhum */
.vx-sino { position: relative; }
.vx-sino-num {
  position: absolute; top: 2px; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--vx-pill, 999px); background: var(--vx-frio); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--vx-bg);   /* recorta o icone atras, para o numero nao encostar nele */
  pointer-events: none;                  /* o clique e' do sino, nunca da bolha */
}
.vx-sino.on { background: rgba(255,255,255,.12); }

/* O PAINEL DE AVISOS — nosso, sem popover de componente.
   A capa fecha ao tocar fora, e fica um degrau ABAIXO do painel: se empatasse no z-index, o
   proprio painel viraria "fora" e fecharia no primeiro clique de um aviso.

   `inset: 0` NAO COBRIA A TELA — cobria a BARRA. A .vx-appbar tem `backdrop-filter` (linha 554), e
   backdrop-filter faz do elemento o bloco contenedor dos descendentes `position: fixed`. Como as
   tres capas (sino, tema, avatar) vivem dentro da barra, o `inset: 0` media 48px de altura: no
   celular a pessoa abria o sino e NAO CONSEGUIA FECHAR — o toque fora sumia, e so fechava acertando
   a faixa do topo entre os icones. Medindo a tela em vw/dvh a capa volta a cobrir tudo.
   Os paineis (.vx-avisos, .vx-menu-tema, .vx-menu-pessoa) sao z-index 1401 e seguem por cima; e o
   `top: 52px; right: 14px` deles se ancora nesse mesmo bloco — nao mexer neles. */
.vx-avisos-capa {
  position: fixed; left: 0; top: 0;
  /* LARGURA EM `%`, ALTURA EM `dvh`. Aqui o bloco de contencao E a barra (ela tem backdrop-filter),
     entao `100%` ja e a largura da barra — que e a da tela — e sem o `100vw` nao entra a barra de
     rolagem no calculo: era ela que fazia nascer uma barra horizontal no desktop sempre que o sino,
     o tema ou o avatar abriam. A altura precisa medir a TELA, e a barra so tem 48px: `dvh`. */
  width: 100%; height: 100vh; height: 100dvh;
  z-index: 1400; background: transparent;
}
.vx-avisos {
  position: fixed; z-index: 1401; top: 52px; right: 14px;
  min-width: 290px; max-width: 360px; max-height: 70vh; overflow-y: auto;
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: calc(12px * var(--vx-raio, 1)); box-shadow: var(--vx-sombra, 0 18px 46px rgba(0,0,0,.45));
  padding: 6px 0; animation: vx-avisos-entra .14s ease-out;
}
@keyframes vx-avisos-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vx-avisos-tit { padding: 8px 14px 6px; font-size: 12px; color: var(--vx-muted); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vx-avisos-limpar { background: none; border: none; color: var(--vx-teal-soft); font: inherit; font-size: 11.5px; cursor: pointer; padding: 2px 4px; }
.vx-avisos-limpar:hover { color: var(--vx-teal-br); text-decoration: underline; }

/* DIÁLOGO EM TELA CHEIA NO CELULAR (pedido do Daniel, 14/09/2026): o "Editar Chapa" e o "Novo material"
   flutuavam e desperdiçavam a tela. No celular eles ocupam tudo — cabeçalho e ações ficam fixos (já são
   TitleContent/DialogActions do MudDialog) e o formulário rola no meio. Só os de formulário (.vx-chapa-dlg);
   confirmações pequenas seguem centradas. */
@media (max-width: 720px) {
  .mud-dialog-container:has(.mud-dialog.vx-chapa-dlg) { padding: 0; align-items: stretch; justify-content: stretch; }
  /* !important porque a largura do MudDialog (mud-dialog-width-md/full) vem de classe propria da
     biblioteca e nao cede a especificidade; sem isso sobra uma moldura de 8px no celular. */
  .mud-dialog-container:has(.mud-dialog.vx-chapa-dlg) .mud-dialog.vx-chapa-dlg {
    width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important;
  }
}
.vx-avisos-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; cursor: pointer; transition: background .12s ease;
}
.vx-avisos-item:hover { background: rgba(255,255,255,.06); }
.vx-avisos-item .l1 { font-size: 13px; }
/* a previa da pergunta e' uma linha so: duas ja empurram os outros avisos para fora da vista */
.vx-avisos-item .l2 {
  font-size: 11px; color: var(--vx-faint);
  max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vx-avisos-vazio { padding: 12px 14px; font-size: 13px; color: var(--vx-faint); }

/* a barra recortava o balao: aqui ela deixa passar */
.mud-appbar, .mud-toolbar { overflow: visible !important; }

/* PRECO EM MASSA — a previa e' o que torna isto seguro.
   Aplicar em varios sem ver o resultado e' assinar em branco, e o erro so apareceria na proposta
   do cliente, com o preco ja enviado. */
.vx-pm-resumo { font-size: 12.5px; color: var(--vx-muted); line-height: 1.45; }
.vx-pm-ajuda { font-size: 11.5px; color: var(--vx-muted); margin-top: 9px; line-height: 1.4; }
.vx-pm-previa { margin-top: 14px; border-top: 1px solid var(--vx-border); padding-top: 10px; }
.vx-pm-linha {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 4px 0;
}
.vx-pm-linha .mat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-pm-linha .de { color: var(--vx-muted); }
.vx-pm-linha .para { font-weight: 700; color: var(--vx-teal-br); }
.vx-pm-linha.fora .para { color: var(--vx-muted); font-weight: 400; }
.vx-pm-linha .motivo { font-size: 10.5px; color: var(--vx-morno); }
.vx-pm-mais { font-size: 11px; color: var(--vx-muted); padding-top: 6px; }

/* FECHOU VENDA — o contador que sobe.
   Canto inferior direito, longe do board: e' comemoracao, nao aviso de sistema, e nao pode tapar o
   que a pessoa esta fazendo. pointer-events none porque ninguem deve precisar fechar isto. */
.vx-venda-fest {
  position: fixed; right: 22px; bottom: 22px; z-index: 2000;
  padding: 14px 22px; border-radius: calc(14px * var(--vx-raio, 1));
  background: var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)));
  color: var(--vx-bg);
  box-shadow: var(--vx-sombra, 0 12px 40px var(--vx-teal-glow), 0 2px 8px rgba(0,0,0,.4));
  pointer-events: none;
  animation: vx-venda-entra .45s cubic-bezier(.2,1.3,.4,1);
}
.vx-venda-tit { font-size: 11.5px; font-weight: 700; text-transform: var(--vx-caixa, uppercase); letter-spacing: calc(.06em * var(--vx-tracking, 1)); opacity: .8; }
.vx-venda-num { font-family: var(--vx-display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: calc(-.02em * var(--vx-tracking, 1)); }
@keyframes vx-venda-entra {
  from { transform: translateY(24px) scale(.92); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.vx-venda-fest.vx-venda-sai { animation: vx-venda-sai .6s ease forwards; }
@keyframes vx-venda-sai { to { transform: translateY(-10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .vx-venda-fest { animation: none; } }

/* SELETOR DENTRO DO CHIP — o chip continua chip, mas abre opcoes.
   Sem borda nem fundo proprios: dois retangulos aninhados pesariam, e o que se quer e' um chip que
   por acaso tem escolha dentro. A setinha nativa some porque ela nao combina com o resto. */
.vx-chip-sel {
  background: transparent; border: 0; outline: 0; cursor: pointer;
  color: inherit; font: inherit; padding: 0 2px;
  -webkit-appearance: none; appearance: none;
}
.vx-chip-sel option { background: var(--vx-surface-2); color: var(--vx-text); }

/* ══ NAVEGACAO FLUIDA ══
   Trocar de tela dava um corte seco: a pagina antiga sumia e a nova aparecia montada. O olho le
   isso como recarregamento, nao como navegacao — e num app que vive horas aberto, esse corte
   acontece cem vezes por dia. Uma entrada curta (180ms, com um deslize de 6px) e' o bastante para
   virar transicao; mais que isso vira espera. */
.vx-page-in { animation: vx-page-in .18s cubic-bezier(.2,.7,.3,1); }
@keyframes vx-page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* rolagem com inercia no toque, e sem barra brigando com o desenho */
.vx-slabs, .vx-res-lista, .mud-drawer, .vx-board { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.vx-slabs::-webkit-scrollbar, .vx-res-lista::-webkit-scrollbar { width: 10px; }
.vx-slabs::-webkit-scrollbar-thumb, .vx-res-lista::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10); border-radius: var(--vx-pill, 999px); border: 3px solid transparent; background-clip: content-box;
}
.vx-slabs::-webkit-scrollbar-thumb:hover, .vx-res-lista::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.20); background-clip: content-box; }

/* o toque nao pisca em azul no celular, que e' o detalhe que entrega "site" em vez de "aplicativo" */
.vx-chip, .vx-iabtn, .vx-pd-btn, .mud-nav-link, .vx-res-card { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .vx-page-in { animation: none; }
  .vx-slabs, .vx-res-lista, .mud-drawer, .vx-board { scroll-behavior: auto; }
}

/* ══ VIDRO E PAPEL DE PAREDE ══
   Fundo chapado e' o padrao e continua sendo. Quando a casa poe um papel de parede (Configuracoes),
   as superficies passam a deixa-lo entrever: e' o que da' a sensacao de profundidade em vez de
   colar um retangulo opaco por cima da foto.
   backdrop-filter e' caro em tela cheia — por isso so entra COM papel de parede, e nunca no board
   inteiro, que rola. */
/* O PAPEL DE PAREDE VIVE NUMA CAMADA PRÓPRIA, JÁ DESFOCADO NA FONTE.
   A 1ª versão punha a imagem no background do body e o blur num véu com backdrop-filter — e não
   desfocava nada: o fundo do body é promovido ao CANVAS da página, e o Chrome (com attachment
   fixed) não inclui o canvas no que o backdrop-filter enxerga. A tela continuava nítida, e foi o
   que o cliente devolveu ("ainda está bem transparente").
   Agora a imagem mora num ::before fixo e o blur é FILTER na própria camada — desfoca a imagem em
   si, sem depender do que o navegador considera "atrás". O gradiente de tinta vai na MESMA camada,
   por cima da foto (multiple backgrounds), porque texto claro briga com as áreas claras dela.
   inset negativo: blur vaza borda transparente; a camada maior que a janela esconde a franja.
   min-height segue matando o corte das telas curtas (o body só tinha a altura do conteúdo).

   O VÉU TEM DOIS HUMORES, um por tema. A fumaça escura sobre foto ficava horrível DEBAIXO do tema
   claro ("fica muito fora de tom"): cartão branco boiando em lama cinza. No claro o véu vira
   NÉVOA — tinta branco-gelo com a foto atravessando como cor pastel (saturação alta compensa o
   leite por cima). No escuro, fumaça funda + uma aura da marca no alto, para o fundo ter vida em
   vez de ser só tinta chapada. Tokens no :root para o tema trocar só os valores, nunca a regra. */
:root {
  /* O REGULADOR DE FOSCO escreve aqui (0 = nítido, 1 = bem fosco; Configurações → Aparência).
     Só o desfoque escala com o nível — a tinta fica fixa, porque ela é o piso de legibilidade:
     mesmo no nítido total, texto claro não pode brigar com as áreas claras da foto. */
  --vx-wall-nivel: .5;
  --vx-wall-tinta-1: rgba(11,11,20,.56);
  --vx-wall-tinta-2: rgba(11,11,20,.78);
  --vx-wall-aura: radial-gradient(1100px 620px at 16% -10%, rgba(43,212,160,.12), transparent 62%);
  --vx-wall-filtro: blur(calc(var(--vx-wall-nivel) * 26px)) saturate(1.08) brightness(.92);
}
:root.vx-light {
  --vx-wall-tinta-1: rgba(247,250,252,.84);
  --vx-wall-tinta-2: rgba(238,242,247,.93);
  --vx-wall-aura: radial-gradient(1100px 620px at 16% -10%, rgba(29,158,117,.08), transparent 62%);
  /* multiplicador maior: o claro pede mais névoa para o mesmo nível do regulador */
  --vx-wall-filtro: blur(calc(var(--vx-wall-nivel) * 30px)) saturate(1.35) brightness(1.04);
}
/* ISOLATION É O QUE FAZ A CAMADA EXISTIR NA TELA. Sem o body virar contexto de empilhamento, o
   ::before de z-index -1 cai na camada negativa do contexto RAIZ — e o Chrome pinta essa camada
   por baixo do gradiente que o html carrega como fundo padrão. Resultado medido no navegador: a
   foto sumia por completo (a tela "sem papel de parede" que o cliente devolveu era o gradiente do
   html, não a tinta forte demais). Com isolate, o -1 vale DENTRO do body: atrás do conteúdo, na
   frente do fundo da página. */
body.vx-wall { min-height: 100vh; isolation: isolate; }
body.vx-wall::before {
  content: ""; position: fixed; inset: -40px; z-index: -1;
  background-image: var(--vx-wall-aura),
    linear-gradient(180deg, var(--vx-wall-tinta-1), var(--vx-wall-tinta-2)),
    var(--vx-wall-img);
  background-size: cover; background-position: center;
  filter: var(--vx-wall-filtro);
}
body.vx-wall.vx-vidro .vx-card,
body.vx-wall.vx-vidro .vx-res-item,
body.vx-wall.vx-vidro .vx-res-gcab,
body.vx-wall.vx-vidro .vx-erp-card,
body.vx-wall.vx-vidro .mud-drawer,
body.vx-wall.vx-vidro .mud-appbar {
  background: rgba(22,24,38,.55) !important;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-color: rgba(255,255,255,.10);
}

/* ══ CONVERSA NA PROPOSTA ══
   Comeca como BOLHA, nao como painel: a proposta existe para mostrar as pedras, e um painel aberto
   por cima disputaria com elas. Canto inferior direito, o lugar onde a mao ja procura. */
.vx-chat { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.vx-chat-bolha {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  padding: 11px 18px; border-radius: var(--vx-pill, 999px); border: 0; cursor: pointer;
  background: var(--vx-teal-br); color: var(--vx-bg);
  font-size: 13.5px; font-weight: 700;
  box-shadow: var(--vx-sombra, 0 8px 26px var(--vx-teal-glow));
}
.vx-chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px;
  border-radius: var(--vx-pill, 999px); background: var(--vx-frio); color: #fff;
  font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px;
}
.vx-chat.on {
  width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column;
  max-height: min(520px, 70vh); border-radius: calc(16px * var(--vx-raio, 1)); overflow: hidden;
  background: var(--vx-surface); border: 1px solid var(--vx-border-2);
  box-shadow: var(--vx-sombra, 0 18px 50px rgba(0,0,0,.55));
}
.vx-chat-topo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-size: 13px; font-weight: 700;
  background: var(--vx-surface-2); border-bottom: 1px solid var(--vx-border);
}
.vx-chat-topo button { border: 0; background: transparent; color: var(--vx-muted); cursor: pointer; font-size: 15px; }
.vx-chat-corpo { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.vx-chat-vazio { font-size: 12px; color: var(--vx-muted); text-align: center; padding: 18px 8px; line-height: 1.5; }
.vx-chat-msg { max-width: 82%; padding: 8px 11px; border-radius: calc(12px * var(--vx-raio, 1)); font-size: 13px; line-height: 1.4; }
.vx-chat-msg .hr { font-size: 10px; opacity: .6; margin-top: 3px; }
/* o cliente a direita, o vendedor a esquerda — a convencao que todo mundo ja conhece de mensageiro */
.vx-chat-msg.eu  { align-self: flex-end;  background: var(--vx-teal); color: var(--vx-bg); border-bottom-right-radius: calc(4px * var(--vx-raio, 1)); }
.vx-chat-msg.ele { align-self: flex-start; background: var(--vx-surface-3); color: var(--vx-text); border-bottom-left-radius: calc(4px * var(--vx-raio, 1)); }
.vx-chat-pe { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--vx-border); }
.vx-chat-pe input {
  flex: 1; min-width: 0; background: var(--vx-bg-2); border: 1px solid var(--vx-border);
  border-radius: calc(10px * var(--vx-raio, 1)); padding: 9px 11px; color: var(--vx-text); font-size: 13px; outline: 0;
}
.vx-chat-pe input:focus { border-color: var(--vx-teal-br); }
.vx-chat-pe button {
  border: 0; border-radius: calc(10px * var(--vx-raio, 1)); padding: 0 15px; cursor: pointer;
  background: var(--vx-teal-br); color: var(--vx-bg); font-weight: 700; font-size: 13px;
}
.vx-chat-pe button:disabled { opacity: .45; cursor: default; }

/* ══ ORBITAS — o meio-de-campo entre o Radar e o board ══
   O funil de qualificacao em camadas. A hierarquia visual repete a do resto do app
   (superficie, borda, teal como acao), com UM acento proprio: o calor do lead como
   brasa — quente ambar, morno neutro, frio azul-gelo — porque "a carteira esfriando"
   e a informacao que traz o vendedor de volta todo dia. */
.vx-orb-hoje { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.vx-orb-stat {
  display:flex; flex-direction:column; min-width:110px; padding:10px 14px; cursor:pointer;
  background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1));
  transition:border-color .15s ease, transform .15s ease;
}
.vx-orb-stat:hover { transform:translateY(-1px); border-color:var(--vx-border-2); }
.vx-orb-stat.on { border-color:var(--vx-teal-br); background:var(--vx-teal-glow); }
.vx-orb-stat b { font-size:22px; font-weight:800; line-height:1.1; }
.vx-orb-stat span { font-size:11px; color:var(--vx-muted); font-weight:600; }
.vx-orb-stat.esfr b { color:#7fa8d9; }
.vx-orb-stat.ok b { color:var(--vx-teal-br); }
.vx-orb-stat.ok { cursor:default; }

.vx-orb-vazio { text-align:center; padding:48px 16px; color:var(--vx-muted); }
.vx-orb-vazio .t { font-size:16px; font-weight:700; color:var(--vx-text); }
.vx-orb-vazio .s { font-size:13px; margin:6px auto 10px; max-width:520px; line-height:1.5; }

/* a brasa: o unico ponto de cor forte do card */
.vx-orb-calor { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.vx-orb-calor.c-q { background:#f2b441; box-shadow:var(--vx-sombra, 0 0 8px rgba(242,180,65,.55)); }
.vx-orb-calor.c-m { background:#8b93a7; }
.vx-orb-calor.c-f { background:#5d7fb4; box-shadow:var(--vx-sombra, 0 0 6px rgba(93,127,180,.4)); }

/* camadas: colunas como o board, mas mais leves — orbita externa a esquerda */
.vx-orb-kanban { display:flex; gap:12px; align-items:flex-start; overflow-x:auto; padding-bottom:10px; }
.vx-orb-col { flex:1 1 0; min-width:230px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:10px; }
.vx-orb-col .cab { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; margin:0 2px 10px; }
/* O NOME CEDE ANTES DE EMPURRAR. Sem min-width:0 o `b` se recusa a encolher abaixo do proprio
   texto e vai por cima do prazo -- e o gap garante que, mesmo cortado, nome e prazo nao encostem. */
.vx-orb-col .cab b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-orb-col .cab span { color:var(--vx-muted); font-weight:700; font-size:12px; }
.vx-orb-col .oco { text-align:center; color:var(--vx-faint); padding:14px 0; font-size:13px; }
/* O RODAPE DA COLUNA. Discreto de proposito: ele nao e' uma acao do funil, e' o fim da folha --
   e precisa dizer QUANTOS faltam, senao o teto viraria exatamente o corte silencioso que ele
   existe para evitar. */
.vx-orb-mais {
  width:100%; margin-top:8px; padding:9px 10px; border-radius:calc(10px * var(--vx-raio, 1)); cursor:pointer;
  background:var(--vx-surface-2); border:1px dashed var(--vx-border-2); color:var(--vx-muted);
  font:inherit; font-size:12px; transition:border-color .15s, color .15s, background .15s;
}
.vx-orb-mais:hover { border-color:var(--vx-teal); color:var(--vx-teal-br); background:var(--vx-surface-3); }
.vx-orb-mais span { color:var(--vx-faint); }

/* DEVOLVER A CAMADA. Discreto no cabecalho -- e' acao rara e pesada, nao ferramenta do dia. Ganha
   cor so' no hover, quando a pessoa ja apontou para ele de proposito. */
.vx-orb-col .cab .vx-orb-devolve {
  margin-left:auto; margin-right:7px; width:22px; height:22px; padding:0; line-height:1;
  border-radius:calc(6px * var(--vx-raio, 1)); cursor:pointer; font-size:13px;
  background:transparent; border:1px solid var(--vx-border); color:var(--vx-faint);
  transition:color .15s, border-color .15s;
}
.vx-orb-col .cab .vx-orb-devolve:hover:not(:disabled) { color:var(--vx-frio); border-color:var(--vx-frio); }
.vx-orb-col .cab .vx-orb-devolve:disabled { opacity:.4; cursor:default; }
/* o .prz tinha margin-left:auto para empurrar o resto; com o botao no meio, quem empurra e' o botao */
.vx-orb-col .cab:has(.vx-orb-devolve) .prz { margin-left:auto; margin-right:0; }

/* A CAIXA DA DEVOLUCAO EM LOTE. Mesmo veu da ficha do lead, porque e' a mesma gravidade: o que se
   decide aqui tira dezenas ou milhares de empresas da carteira de alguem.
   ACIMA DO VEU, e isso nao e' detalhe: em 1201 ela nascia DEBAIXO do .vx-orb-veu (1290), que a
   cobria inteira. O efeito era cruel de diagnosticar -- a caixa aparecia, so' que acinzentada pelo
   proprio veu, e cada clique no botao "Devolver" caia no veu, cujo onclick FECHA o dialogo. Quem
   tentava via a janela sumir e concluia que o botao nao funcionava. A .vx-orb-ficha, que usa o
   mesmo veu, sempre esteve em 1300; foi so' esta que ficou para tras. */
.vx-orb-lote {
  position:fixed; z-index:1301; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px)); padding:20px 22px; border-radius:calc(16px * var(--vx-raio, 1));
  background:var(--vx-surface); border:1px solid var(--vx-border-2);
  box-shadow:var(--vx-sombra, 0 30px 80px -20px rgba(0,0,0,.7));
}
.vx-orb-lote b { font-size:15px; }
.vx-orb-lote p { margin:10px 0 0; font-size:12.5px; color:var(--vx-muted); line-height:1.55; }
.vx-orb-lote p.fino { color:var(--vx-faint); font-size:11.5px; }
.vx-orb-lote textarea { width:100%; min-height:72px; margin-top:14px; resize:vertical; padding:10px 12px; }
.vx-orb-lote .acoes { display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.vx-orb-card {
  background:var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1));
  padding:9px 11px; margin-bottom:8px; cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.vx-orb-card:hover { border-color:var(--vx-teal-br); transform:translateY(-1px); }
.vx-orb-card.esfr { border-left:3px solid #5d7fb4; }
.vx-orb-card .topo { display:flex; align-items:center; gap:7px; font-size:13px; }
.vx-orb-card .topo b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-orb-card .sub { font-size:11px; color:var(--vx-muted); margin:3px 0 6px; }
.vx-orb-card .rod { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--vx-faint); }
.vx-orb-card .rod .prox { color:var(--vx-teal-soft); font-weight:700; }
.vx-orb-card .rod .prox.venc { color:var(--vx-morno); }
.vx-orb-card .apx {
  border:1px solid var(--vx-border-2); background:transparent; color:var(--vx-teal-br);
  border-radius:calc(7px * var(--vx-raio, 1)); padding:1px 8px; cursor:pointer; font-size:13px; font-weight:800;
}
.vx-orb-card .apx:hover { background:var(--vx-teal-glow); }

/* tabela: o workhorse pra trabalhar em sequencia */
.vx-orb-tab { overflow-x:auto; }
.vx-orb-tab table { width:100%; border-collapse:collapse; font-size:12.5px; }
.vx-orb-tab th { text-align:left; color:var(--vx-muted); font-size:11px; font-weight:700; padding:7px 10px; border-bottom:1px solid var(--vx-border); }
.vx-orb-tab td { padding:8px 10px; border-bottom:1px solid var(--vx-border); }
.vx-orb-tab tbody tr { cursor:pointer; }
.vx-orb-tab tbody tr:hover td { background:rgba(255,255,255,.03); }
.vx-orb-tab tr.esfr td:first-child { box-shadow:inset 3px 0 0 #5d7fb4; }

/* a ficha lateral — mesmo padrao dos paineis proprios do app */
.vx-orb-veu { position:fixed; inset:0; background:rgba(5,6,12,.55); z-index:1290; }
/* UMA BARRA SÓ ("varios scrolls corrija"): com a ficha aberta, a página atrás para de rolar —
   sobra apenas a rolagem vertical da própria ficha. */
body:has(.vx-orb-ficha) { overflow: hidden; }
.vx-orb-ficha {
  position:fixed; top:0; right:0; bottom:0; width:min(520px, 96vw); z-index:1300;
  background:var(--vx-surface); border-left:1px solid var(--vx-border-2);
  padding:18px; overflow-y:auto; box-shadow:var(--vx-sombra, -18px 0 50px rgba(0,0,0,.45));
  /* horizontal NUNCA: e-mail e site compridos quebram a palavra em vez de empurrar a largura */
  overflow-x:hidden; overscroll-behavior:contain;
}
.vx-orb-ficha .kv b, .vx-orb-ficha .kv a,
.vx-orb-ficha .vx-pdet-kv b { min-width:0; overflow-wrap:anywhere; }
.vx-orb-ficha .cab { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.vx-orb-ficha .cab b { font-size:16px; }
.vx-orb-ficha .cab .sub { font-size:12px; color:var(--vx-muted); margin-top:3px; }
.vx-orb-ficha .cab .x { border:0; background:transparent; color:var(--vx-muted); font-size:16px; cursor:pointer; }
.vx-orb-ficha .kv { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin-bottom:6px; }
.vx-orb-ficha .kv span { font-size:10.5px; color:var(--vx-faint); display:block; }
.vx-orb-ficha .kv b { font-size:12.5px; }
.vx-orb-ficha .sec { font-size:11px; font-weight:800; letter-spacing:calc(.05em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin:16px 0 7px; }
.vx-orb-ficha .sec .dica { text-transform:none; letter-spacing:0; font-weight:400; color:var(--vx-faint); }
.vx-orb-ficha .toques { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; }
.vx-orb-ficha .tq {
  border:1px solid var(--vx-border-2); background:transparent; color:var(--vx-text);
  border-radius:calc(9px * var(--vx-raio, 1)); padding:6px 12px; font-size:12.5px; font-weight:700; cursor:pointer; text-decoration:none;
}
.vx-orb-ficha .tq:hover { border-color:var(--vx-teal-br); }
.vx-orb-ficha .tq.wa { color:#5DE0B0; }
.vx-orb-ficha .prox { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--vx-muted); }
.vx-orb-ficha .prox button {
  border:1px solid var(--vx-border); background:transparent; color:var(--vx-muted);
  border-radius:calc(8px * var(--vx-raio, 1)); padding:4px 10px; font-size:11.5px; font-weight:700; cursor:pointer;
}
.vx-orb-ficha .prox button:hover { color:var(--vx-teal-br); border-color:var(--vx-teal-br); }
.vx-orb-ficha .mover { display:flex; gap:8px; align-items:center; }
.vx-orb-ficha .mover select { flex:1; height:38px; }
.vx-orb-ficha .transf { display:flex; gap:8px; align-items:center; }
.vx-orb-ficha .transf select { flex:1; height:36px; }
.vx-orb-btn {
  border:1px solid var(--vx-border-2); background:transparent; color:var(--vx-teal-br);
  border-radius:calc(9px * var(--vx-raio, 1)); padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.vx-orb-btn:disabled { opacity:.4; cursor:default; }
.vx-orb-solta { border:1px solid var(--vx-border); background:transparent; color:var(--vx-morno);
  border-radius:calc(9px * var(--vx-raio, 1)); padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.vx-orb-solta.firm { color:var(--vx-frio); border-color:var(--vx-frio); margin-top:6px; }
.vx-orb-ficha .tl { display:flex; flex-direction:column; gap:7px; }
.vx-orb-ficha .ev { font-size:12px; line-height:1.45; color:var(--vx-text); }
.vx-orb-ficha .ev .q { color:var(--vx-faint); font-size:10.5px; margin-right:7px; }
.vx-orb-ficha .ev .u { color:var(--vx-faint); font-size:10.5px; margin-left:7px; }
/* O CHIP DAS ORBITAS TEM DE REDEFINIR A COR DO TEXTO, e nao so o fundo.
   .vx-amb-chip.on pinta o texto de #04110c — quase preto — porque ali o fundo e' o teal claro.
   Este chip troca o fundo por roxo translucido sobre superficie escura e herdava aquele preto:
   o unico item selecionado da barra era o unico ilegivel. O tratamento outline (em vez de
   preencher como os outros) e' proposital — Orbitas nao e' mais um modo de busca, e a barra
   diz isso pela forma. */
.vx-amb-chip.orb.on { border-color:#8a7ff0; background:rgba(138,127,240,.12); color:#bdb4ff; font-weight:600; }
/* no claro o roxo translucido fica quase branco: texto claro sumiria do mesmo jeito, e a regra
   geral de :root.vx-light manda #fff em todo chip .on — por isso a excecao vem depois e mais forte */
:root.vx-light .vx-amb-chip.orb.on { background:rgba(138,127,240,.16); color:#4c3fc4; }

@media (max-width: 900px) {
  /* ALIGN-ITEMS TROCA DE EIXO QUANDO O FLEX VIRA COLUNA. No quadro deitado ele e' `flex-start`
     para as colunas comecarem no topo, e isso e' certo -- mas em `flex-direction: column` o eixo
     transverso passa a ser a LARGURA, e o mesmo `flex-start` manda cada coluna encolher ate o
     proprio conteudo. Era esse o defeito: num telefone de 375 a "Descoberta", com quatro cards de
     nome comprido, ficava com 247px; a "Conversa", vazia, com 118. Quatro etapas do mesmo funil
     desenhadas em quatro larguras diferentes, como se largura significasse alguma coisa.
     E na coluna estreita o cabecalho colapsava junto: "Contato" encostava no "9 d".
     `stretch` devolve a largura inteira a todas. */
  .vx-orb-kanban { flex-direction:column; align-items:stretch; overflow-x:visible; }
  /* `flex:1 1 0` era a base no eixo principal; deitado isso e' largura, em pe vira ALTURA -- e
     altura de coluna e' o que os cards dela mandam, nao o que sobra. */
  .vx-orb-col { min-width:0; flex:0 0 auto; }
}

/* ══ O CEU DAS ORBITAS ══
   O palco do canvas. Fundo quase preto com um halo teal atras do centro: o brilho da
   estrela precisa ter de onde sair, senao o clarao da qualificacao aparece do nada.
   A altura e' fixa e generosa — orbita espremida vira grafico de pizza. */
.vx-orb-ceu {
  position: relative; margin-top: 4px;
  height: clamp(460px, 68vh, 780px);
  border: 1px solid var(--vx-border); border-radius: calc(14px * var(--vx-raio, 1)); overflow: hidden;
  background:
    radial-gradient(ellipse 42% 40% at 50% 50%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%, #0c0e18, #07080f 78%);
}
.vx-orb-palco { position: absolute; inset: 0; }
.vx-orb-canvas { display: block; }

/* ATENCAO — TUDO QUE FICA SOBRE O CEU USA COR LITERAL, NAO TOKEN DO TEMA.
   O ceu e' uma superficie ESCURA FIXA: o fundo dele e' #0c0e18/#07080f cravado, em claro e em
   escuro, porque orbita em fundo branco nao e' orbita. Mas a dica, a legenda e o wordmark
   herdavam --vx-muted/--vx-text, que no tema claro viram cinza-escuro — e sumiam dentro do
   proprio ceu. Quem pinta sobre superficie fixa tem de ter cor fixa; token so vale onde o fundo
   tambem troca. A borda EXTERNA do .vx-orb-ceu segue o tema de proposito: aquela encosta na
   pagina, nao no ceu. */
.vx-orb-ceu .hud {
  position: absolute; top: 10px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: #aebbcd;
  background: rgba(8,10,18,.72); border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 5px 10px; backdrop-filter: blur(6px);
  pointer-events: none;
}
/* a legenda a ESQUERDA e a marca a direita: empilhadas no mesmo canto, o wordmark cobria
   a chave de leitura do mapa inteiro */
.vx-orb-ceu .vx-map-brand { left: auto; right: 12px; }
.vx-orb-ceu .leg {
  position: absolute; bottom: 10px; left: 12px; right: 92px; z-index: 2;
  display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: #aebbcd;
  text-shadow: var(--vx-sombra-texto, 0 1px 4px rgba(0,0,0,.65));
  pointer-events: none;
}
.vx-orb-ceu .leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: -1px; }
.vx-orb-ceu .leg i.q { background: #f2b441; }
.vx-orb-ceu .leg i.m { background: #b4becd; }
.vx-orb-ceu .leg i.f { background: #5d7fb4; }
.vx-orb-ceu .leg i.hj { background: transparent; border: 1.5px solid var(--vx-teal-br); }
.vx-orb-ceu .leg i.up { background: transparent; border: 1.5px dashed #f2b441; }

/* O CHIP DE QUALIFICAÇÃO na ficha do lead: a pontuação recalculada a cada investigação, e o
   "subiu de X" quando a re-investigação achou um lead melhor do que a última olhada. */
.vx-orb-qual { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px;
  border: 1px solid var(--vx-border); border-radius: calc(9px * var(--vx-raio, 1)); font-size: 12px; color: var(--vx-muted); }
.vx-orb-qual b { color: var(--vx-text); font-size: 13px; }
.vx-orb-qual.up { border-color: rgba(242,180,65,.55); background: rgba(242,180,65,.07); }
.vx-orb-qual .delta { color: #f2b441; font-weight: 700; font-size: 11.5px; }
.vx-orb-qual .delta.down { color: var(--vx-faint); font-weight: 500; }
/* o wordmark tambem mora sobre o ceu — no claro ele herdava um teal escuro e virava um borrao */
.vx-orb-ceu .vx-map-brand { color: rgba(233,236,244,.92); }
.vx-orb-ceu .vx-map-brand span { color: var(--vx-teal-br); }

/* a dica segue o cursor: sem pointer-events, senao ela rouba o clique do ponto que descreve */
.vx-orb-dica {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .12s ease;
  background: rgba(10,12,20,.96); border: 1px solid rgba(255,255,255,.16);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 7px 10px; max-width: 200px;
  font-size: 11.5px; line-height: 1.4; color: #e9ecf4;
  box-shadow: var(--vx-sombra, 0 8px 24px rgba(0,0,0,.5));
}
.vx-orb-dica b { display: block; font-size: 12px; margin-bottom: 2px; }
.vx-orb-dica span { display: block; color: #9fb0c4; font-size: 10.5px; }

/* ══ ONDE OS LEADS PARAM — a leitura da gestao ══
   Barra por camada. O gargalo do funil e' a camada que acumula gente e dias, e isso
   nao aparece olhando cartao por cartao. */
.vx-orb-conv {
  margin-top: 12px; padding: 12px 14px;
  background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1));
}
.vx-orb-conv .tit { font-size: 11px; font-weight: 800; letter-spacing: calc(.05em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase); color: var(--vx-muted); margin-bottom: 10px; }
.vx-orb-conv .lin { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 12px; }
.vx-orb-conv .lin .nm { width: 110px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-orb-conv .lin .bar { flex: 1; height: 8px; background: rgba(255,255,255,.05); border-radius: calc(5px * var(--vx-raio, 1)); overflow: hidden; }
.vx-orb-conv .lin .bar i { display: block; height: 100%; background: var(--vx-cheio, linear-gradient(90deg, var(--vx-teal), var(--vx-teal-br))); border-radius: calc(5px * var(--vx-raio, 1)); }
.vx-orb-conv .lin .n { width: 34px; text-align: right; font-weight: 800; }
.vx-orb-conv .lin .d { width: 96px; text-align: right; font-size: 10.5px; color: var(--vx-faint); }

@media (max-width: 900px) {
  .vx-orb-ceu { height: clamp(340px, 52vh, 480px); }
  .vx-orb-conv .lin .nm { width: 84px; }
  .vx-orb-conv .lin .d { display: none; }
}

/* A EXPERIENCIA. O buraco nao e' um grafico dentro de um cartao: e' uma janela para outro lugar.
   Entao o dialogo dele escurece de verdade e a moldura some -- o que sobra na tela e' o ceu. */
/* SEM ROLAGEM. A janela do buraco recebe o espaco todo de que precisa e a mesa encolhe para
   caber: barra de rolagem aqui e' a tela dizendo que nao coube -- e coube, e' so' dar o tamanho. */
/* O SELETOR E' NO PROPRIO .mud-dialog: o MudBlazor poe a Class do dialogo NELE, e nao num
   ancestral -- escrito como descendente, a regra nao pegava nada e a janela continuava do tamanho
   de fabrica. */
.mud-dialog.vx-bur-fundo { max-width: 1080px !important; width: 92vw;
  background: #05070d; border: 1px solid rgba(150,255,222,.14);
  box-shadow: var(--vx-sombra, 0 40px 120px -30px rgba(0,0,0,.95), 0 0 90px -40px color-mix(in srgb, var(--vx-teal-br) 35%, transparent)); }
.mud-dialog.vx-bur-fundo .mud-dialog-content {
  max-height: none !important; overflow: visible !important; padding: 4px 22px 10px; }
.mud-dialog.vx-bur-fundo .vx-rol { gap: 10px; }
.mud-dialog.vx-bur-fundo .vx-rol-mesa { margin-top: 6px; font-size: 12.5px; }
.mud-dialog.vx-bur-fundo .vx-rol-mesa .lin { padding: 4px 0; }
.mud-dialog.vx-bur-fundo .vx-rol-mesa .lin .nm small { display: none; }

/* A CHANCE CALCULADA na linha do premio: o peso e' o que se digita, a chance e' o que acontece. */
.vx-orbcfg-linha .chance { flex: none; min-width: 62px; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--vx-faint); }
.vx-orbcfg-linha .chance.tem { color: var(--vx-teal-br); font-weight: 700; }

/* ══ A FILA DE HOJE — o lado operacional da orbita ══
   O ceu ocupava a largura inteira e sobrava tela vazia dos dois lados do sistema: o desenho
   e' eliptico, a caixa e' retangular. Essa sobra virou a coluna de trabalho. Ela NAO e' um
   segundo mapa -- e' a mesma lista, em ordem de urgencia, com a instrucao escrita e o botao
   que executa. Fica FORA do ceu (superficie normal, token de tema): texto de trabalho sobre
   fundo quase preto cansa, e a coluna e' para ler linha a linha, nao para contemplar. */
.vx-orb-tela { display: flex; gap: 12px; align-items: stretch; }
/* min-width:0 obrigatorio: sem ele o canvas usa o max-content como minimo e empurra a
   coluna para fora da tela -- a mesma armadilha do 1fr que ja mordeu a Carteira. */
.vx-orb-tela > .vx-orb-ceu { flex: 1 1 auto; min-width: 0; }
.vx-orb-fila {
  flex: 0 0 330px; width: 330px; margin-top: 4px;
  height: clamp(460px, 68vh, 780px);
  display: flex; flex-direction: column;
  border: 1px solid var(--vx-border); border-radius: calc(14px * var(--vx-raio, 1)); overflow: hidden;
  background: var(--vx-surface);
}
.vx-orb-fila .cab { padding: 10px 12px 8px; border-bottom: 1px solid var(--vx-border); }
.vx-orb-fila .cab b { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: calc(.02em * var(--vx-tracking, 1)); }
.vx-orb-fila .cab span { display: block; margin-top: 2px; font-size: 10.5px; color: var(--vx-muted); }
.vx-orb-fila .oco { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--vx-muted); }
.vx-orb-fila .itens { flex: 1; min-height: 0; overflow-y: auto; }
.vx-orb-fila .pe {
  padding: 7px 12px; border-top: 1px solid var(--vx-border);
  font-size: 10px; color: var(--vx-faint); text-align: center;
}

/* CADA LINHA E' UM CARTAO DE TAREFA: quem, em que estado, o que fazer, e com que botao.
   A tarja da esquerda repete o estado em cor para varrer a coluna sem ler. */
.vx-orb-fila .it {
  padding: 9px 11px 9px 13px; border-bottom: 1px solid var(--vx-border);
  border-left: 3px solid transparent; cursor: pointer;
  transition: background .12s ease;
}
.vx-orb-fila .it:hover { background: rgba(127,127,127,.07); }
.vx-orb-fila .it.urg  { border-left-color: #ef5f63; }
.vx-orb-fila .it.hoje { border-left-color: var(--vx-teal-br); }
.vx-orb-fila .it.esfr { border-left-color: #e0b34a; }
.vx-orb-fila .it.novo { border-left-color: #8b7cf6; }
.vx-orb-fila .it.ok   { border-left-color: var(--vx-border); }

.vx-orb-fila .l1 { display: flex; align-items: center; gap: 6px; }
.vx-orb-fila .l1 b {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vx-orb-fila .selo {
  flex: none; font-size: 9px; font-weight: 800; letter-spacing: calc(.4px * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  padding: 2px 6px; border-radius: var(--vx-pill, 999px); white-space: nowrap;
  background: rgba(127,127,127,.14); color: var(--vx-muted);
}
.vx-orb-fila .it.urg  .selo { background: rgba(239,95,99,.18); color: #ef5f63; }
.vx-orb-fila .it.hoje .selo { background: var(--vx-teal-glow); color: var(--vx-teal-soft); }
.vx-orb-fila .it.esfr .selo { background: rgba(224,179,74,.18); color: #d7a53c; }
.vx-orb-fila .it.novo .selo { background: rgba(139,124,246,.18); color: #8b7cf6; }
.vx-orb-fila .l2 { margin: 3px 0 0 14px; font-size: 10.5px; color: var(--vx-faint); }
/* a INSTRUCAO e' o motivo da coluna existir: fica com o peso do texto normal, nao de legenda */
.vx-orb-fila .ins { margin: 5px 0 0 14px; font-size: 11.5px; line-height: 1.38; color: var(--vx-muted); }

.vx-orb-fila .btn { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0 14px; }
.vx-orb-fila .btn .b {
  font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: calc(7px * var(--vx-raio, 1)); cursor: pointer; text-decoration: none;
  border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.vx-orb-fila .btn .b:hover { border-color: var(--vx-teal-br); color: var(--vx-teal-br); background: var(--vx-teal-glow); }
.vx-orb-fila .btn .b.wa { color: #4bbf72; border-color: rgba(75,191,114,.35); }
.vx-orb-fila .btn .b.wa:hover { background: rgba(75,191,114,.14); border-color: #4bbf72; color: #4bbf72; }
.vx-orb-fila .btn .b.apx { margin-left: auto; }

/* ══ A LIGACAO VIVA: a fila e o ceu sao a mesma carteira ══
   Passar o mouse numa linha acende o planeta la’; passar o mouse num planeta acende a linha aqui.
   O que pinta a linha e' o JS do ceu (classe .foco), sem passar pelo servidor — em Blazor Server
   um @onmouseover por linha viraria uma mensagem de websocket por movimento de mouse. */
.vx-orb-fila .it.foco {
  background: var(--vx-teal-glow);
  border-left-color: var(--vx-teal-br) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 22%, transparent);
}
/* O ULTIMO QUE VOCE TRABALHOU. Depois da acao a linha se reordena e desce para o meio da fila;
   sem uma marca, a sensacao e' de que nada aconteceu. Fica ate a proxima acao — e' memoria
   curta de sessao, nao estado de negocio. */
.vx-orb-fila .it.agiu { background: color-mix(in srgb, var(--vx-teal-br) 7%, transparent); }
.vx-orb-fila .it.agiu .l1 b::after {
  content: "✓"; margin-left: 6px; font-size: 10px; color: var(--vx-teal-br); font-weight: 900;
}
.vx-orb-fila .cab .feito {
  margin-top: 4px; font-size: 10.5px; color: var(--vx-teal-soft);
}
.vx-orb-fila .cab .feito b { display: inline; font-size: 11.5px; font-weight: 800; }

/* O NARRADOR sobre o ceu: uma frase dizendo o que acabou de mudar, e que some sozinha.
   Cor LITERAL porque o ceu e' superficie escura fixa em claro e em escuro (mesma regra da dica
   e da legenda logo acima neste arquivo). */
.vx-orb-recado {
  position: absolute; top: 12px; left: 50%; transform: translate(-50%, -6px); z-index: 3;
  max-width: min(78%, 460px); text-align: center;
  font-size: 12px; font-weight: 600; color: #dff7ee;
  background: rgba(8,10,18,.86); border: 1px solid color-mix(in srgb, var(--vx-teal-br) 34%, transparent);
  border-radius: calc(10px * var(--vx-raio, 1)); padding: 7px 13px; backdrop-filter: blur(6px);
  pointer-events: none; opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.vx-orb-recado.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .vx-orb-recado { transition: none; }
}

/* A PERGUNTA DO APROXIMAR: instrucao no lugar do reflexo.
   Nasce dentro da propria linha, e nao num dialogo: quem trabalha trinta leads nao pode ser
   parado por uma caixa modal -- mas tambem nao pode mandar um lead para "Contato" sem ter falado
   com ninguem. Duas linhas de texto e dois botoes, no lugar onde o dedo ja estava. */
.vx-orb-fila .apx-box { margin: 8px 0 0 14px; padding: 9px 10px; border-radius: calc(9px * var(--vx-raio, 1));
  border: 1px solid var(--vx-border); background: rgba(127,127,127,.06); }
.vx-orb-fila .apx-box.atencao { border-color: rgba(224,179,74,.42); background: rgba(224,179,74,.08); }
.vx-orb-fila .apx-box.ok { border-color: color-mix(in srgb, var(--vx-teal-br) 38%, transparent); background: var(--vx-teal-glow); }
.vx-orb-fila .apx-box .tt { font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.vx-orb-fila .apx-box .ds { font-size: 11.5px; line-height: 1.38; color: var(--vx-muted); }
.vx-orb-fila .apx-box .pe { margin-top: 5px; font-size: 10px; color: var(--vx-faint); line-height: 1.35; }
.vx-orb-fila .apx-box .bt { display: flex; gap: 6px; margin-top: 8px; }
.vx-orb-fila .apx-box .b.sim { border-color: var(--vx-teal-br); color: var(--vx-teal-br); }
.vx-orb-fila .apx-box.atencao .b.sim { border-color: #d7a53c; color: #d7a53c; }

/* O DIA E AS RECOMENDACOES, embaixo, ao lado do painel de onde os leads param.
   Largura casada com a da fila para os dois blocos da direita ficarem na mesma coluna; sozinho
   (vendedor, que nao ve o painel de conversao) ele ocupa a linha inteira em vez de ficar um
   retangulo de 330px perdido na esquerda. */
.vx-orb-baixo { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
/* ALINHADO COM A LINHA DE CIMA: o painel de conversao fica sob o CEU e o do dia sob a FILA, com a
   mesma largura dela (330px). Larguras que quase batem sao piores que larguras diferentes de
   proposito -- o olho ve o degrau e nao sabe se e' engano. */
.vx-orb-baixo > .vx-orb-conv { flex: 1 1 auto; min-width: 0; margin-top: 12px; }
/* O DIA VEM PRIMEIRO, na esquerda (pedido do Daniel): e' por onde se comeca, e comecar fica antes
   de conferir. O painel de conversao, que e' leitura de gestao, segue ao lado. */
.vx-orb-dia { order: -1; flex: 0 0 330px; min-width: 0; margin-top: 12px; padding: 12px 14px;
  background: var(--vx-surface); border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1)); }
.vx-orb-dia .tit, .vx-orb-dia .tit2 { font-size: 11px; font-weight: 800; letter-spacing: calc(.05em * var(--vx-tracking, 1));
  text-transform: var(--vx-caixa, uppercase); color: var(--vx-muted); }
.vx-orb-dia .tit2 { margin: 12px 0 7px; }
.vx-orb-dia .nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.vx-orb-dia .nu { flex: 1 1 68px; min-width: 0; padding: 7px 9px; border-radius: calc(9px * var(--vx-raio, 1));
  background: var(--vx-surface-2); border: 1px solid var(--vx-border); }
.vx-orb-dia .nu.on { border-color: color-mix(in srgb, var(--vx-teal-br) 40%, transparent); }
.vx-orb-dia .nu b { display: block; font-size: 17px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; }
.vx-orb-dia .nu.on b { color: var(--vx-teal-br); }
.vx-orb-dia .nu span { display: block; margin-top: 3px; font-size: 9.5px; color: var(--vx-faint); line-height: 1.2; }

.vx-orb-dia .rec { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px;
  border-radius: calc(9px * var(--vx-raio, 1)); border: 1px solid var(--vx-border); border-left-width: 3px;
  margin-bottom: 6px; font-size: 11.5px; line-height: 1.38; color: var(--vx-muted); }
.vx-orb-dia .rec .ic { flex: none; font-size: 12px; line-height: 1.35; }
.vx-orb-dia .rec.clicavel { cursor: pointer; }
.vx-orb-dia .rec.clicavel:hover { background: rgba(127,127,127,.07); }
.vx-orb-dia .rec.urg { border-left-color: #ef5f63; } .vx-orb-dia .rec.urg .ic { color: #ef5f63; }
.vx-orb-dia .rec.hoje { border-left-color: var(--vx-teal-br); } .vx-orb-dia .rec.hoje .ic { color: var(--vx-teal-br); }
.vx-orb-dia .rec.esfr { border-left-color: #e0b34a; } .vx-orb-dia .rec.esfr .ic { color: #e0b34a; }
.vx-orb-dia .rec.novo { border-left-color: #8b7cf6; } .vx-orb-dia .rec.novo .ic { color: #8b7cf6; }
.vx-orb-dia .rec.gargalo { border-left-color: #7c8aa0; } .vx-orb-dia .rec.gargalo .ic { color: #7c8aa0; }
.vx-orb-dia .rec.ok { border-left-color: var(--vx-teal-br); } .vx-orb-dia .rec.ok .ic { color: var(--vx-teal-br); }
/* sozinho (vendedor nao ve o painel de conversao) ele ocupa a linha, em vez de virar um retangulo
   de 330px perdido na esquerda */
.vx-orb-baixo > .vx-orb-dia:only-child { flex: 1 1 100%; }

/* ══ ESTADO DA NARRACAO (Configuracoes) ══ */
.vx-voz-estado { margin: -4px 0 14px; padding: 10px 12px; border-radius: calc(10px * var(--vx-raio, 1));
  border: 1px solid var(--vx-border); background: var(--vx-surface-2); font-size: 12px; }
.vx-voz-estado.falta { border-color: rgba(224,179,74,.4); }
.vx-voz-estado .l { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45;
  color: var(--vx-muted); margin-bottom: 4px; }
.vx-voz-estado .s { flex: none; font-weight: 900; }
.vx-voz-estado .s.ok { color: var(--vx-teal-br); }
.vx-voz-estado .s.nao { color: #e0b34a; }
.vx-voz-estado .s.neutro { color: var(--vx-faint); }
.vx-voz-estado .l.aviso { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--vx-border); }
.vx-voz-estado .vx-cart-btn { margin-top: 6px; }

/* EVAPORAR: a saida discreta. Cinza ate o mouse chegar -- tirar da orbita e' decisao rara, e um
   botao vermelho piscando ao lado de cada lead convida ao que nao deve ser convidado. */
.vx-orb-fila .btn .b.sumir { margin-left: 4px; padding: 5px 7px; color: var(--vx-faint); }
.vx-orb-fila .btn .b.sumir:hover { border-color: #ef5f63; color: #ef5f63; background: rgba(239,95,99,.12); }
.vx-orb-fila .apx-box .mot { width: 100%; margin-top: 8px; font-size: 11.5px; padding: 6px 8px; }

/* "ver o funil inteiro" no cabecalho da fila, quando ela esta mergulhada numa camada */
.vx-orb-fila .cab .vertudo { font: inherit; font-size: 10px; margin-left: 6px; padding: 2px 7px;
  border-radius: var(--vx-pill, 999px); border: 1px solid var(--vx-border); background: transparent;
  color: var(--vx-muted); cursor: pointer; }
.vx-orb-fila .cab .vertudo:hover { border-color: var(--vx-teal-br); color: var(--vx-teal-br); }

/* O GARGALO VIRA FILTRO: a linha do painel "onde os leads param" e clicavel.
   O PADDING E' DE TODA LINHA, e nao so' da clicavel. Dando so' a quem clica, a camada com zero
   lead ficava 6px mais larga que as outras -- e o numero e o "9d parados" saiam da coluna. Um
   degrau de seis pixels numa tabela de quatro linhas o olho acha na hora, e nao perdoa. */
.vx-orb-conv .lin { border-radius: calc(7px * var(--vx-raio, 1)); padding: 2px 6px; margin-left: -6px; transition: background .12s ease; }
.vx-orb-conv .lin.clicavel { cursor: pointer; }
.vx-orb-conv .lin.clicavel:hover { background: rgba(127,127,127,.08); }
.vx-orb-conv .lin.on { background: var(--vx-teal-glow); }
.vx-orb-conv .lin.on .nm { color: var(--vx-teal-br); font-weight: 700; }

/* Estreitou, a coluna vai para BAIXO do ceu inteira: espremida em 180px a instrucao quebra em
   seis linhas e o cartao de tarefa deixa de ser legivel -- pior que empilhar. */
@media (max-width: 1180px) {
  .vx-orb-tela { flex-direction: column; }
  .vx-orb-fila { flex: none; width: auto; height: auto; max-height: 420px; }
}

/* ══ ARRASTAR, EDITAR E RENOMEAR nas Orbitas ══
   O kanban ganhou o gesto que todo kanban tem, e a ficha ganhou o que a varredura
   nao consegue entregar: o dado certo. O nome do lead e' a CHAVE da trava — corrigi-lo
   nao e' conforto, e' higiene. */
.vx-orb-col { transition: border-color .12s ease, background .12s ease; }
.vx-orb-col.alvo { border-color: var(--vx-teal-br); background: var(--vx-teal-glow); }
.vx-orb-card { cursor: grab; }
.vx-orb-card:active { cursor: grabbing; }
.vx-orb-card.arr { opacity: .35; border-style: dashed; }
.vx-orb-col .cab b { cursor: pointer; }
.vx-orb-col .cab b:hover { color: var(--vx-teal-br); }
.vx-orb-col .cab .prz { font-size: 10px; color: var(--vx-faint); margin-left: auto; margin-right: 7px; }
.vx-orb-col .cab .vx-input.cam { height: 26px; font-size: 12px; padding: 0 7px; flex: 1; min-width: 0; }
.vx-orb-col .cab .sla { font-size: 10px; color: var(--vx-muted); white-space: nowrap; }
.vx-orb-col .cab .sla input { width: 38px; height: 22px; font-size: 11px; background: var(--vx-bg-2);
  border: 1px solid var(--vx-border); border-radius: calc(6px * var(--vx-raio, 1)); color: var(--vx-text); padding: 0 4px; }
.vx-orb-col .cab .ok { border: 0; background: var(--vx-teal-br); color: var(--vx-bg);
  border-radius: calc(6px * var(--vx-raio, 1)); width: 24px; height: 24px; cursor: pointer; font-weight: 800; }

.vx-orb-fnome { height: 28px; font-size: 12px; padding: 0 9px; max-width: 190px; }

/* A FILEIRA DE ACOES DA FICHA. As margens saem dos filhos e viram um `gap` do pai: margem por
   filho e' o que fazia "corrigir dados", "investigar" e a pontuacao ficarem em alturas diferentes,
   cada um com o seu 4px ou 8px. Altura igual e um raio so' fecham o alinhamento. */
.vx-orb-acoes {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 8px 0 2px;
}
.vx-orb-acoes > * { margin: 0 !important; }
.vx-orb-acoes .vx-orb-corrigir,
.vx-orb-acoes .vx-orb-qual { min-height: 30px; border-radius: calc(9px * var(--vx-raio, 1)); }

.vx-orb-corrigir { border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; }
.vx-orb-corrigir:hover { color: var(--vx-teal-br); border-color: var(--vx-teal-br); }

.vx-orb-form { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.vx-orb-form .vx-lbl span { font-weight: 400; color: var(--vx-faint); font-size: 10px; margin-left: 5px; }
.vx-orb-form .par { display: flex; gap: 8px; }
.vx-orb-form .par > div { flex: 1; min-width: 0; }
.vx-orb-form .par > div.uf { flex: 0 0 68px; }
.vx-orb-form .acoes { display: flex; gap: 8px; margin-top: 10px; }
.vx-orb-cancel { border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }

/* ══ CAPTURADO SALTA AOS OLHOS ══
   O selo minusculo na linha do segmento se perdia: o card capturado ficava igual ao
   novo, e quem varre 1.400 oportunidades precisa ver DE RELANCE o que ja e' seu.
   A logica do destaque e' invertida de proposito — o capturado RECUA (nao ha mais o
   que fazer com ele aqui) e quem sobe e' o que ainda esta em aberto. */
.vx-prosp-card.capt {
  border-left-color: var(--vx-teal-br);
  background: linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 7%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 2%, transparent))), var(--vx-bg-2);
  opacity: .72;
}
.vx-prosp-card.capt:hover { opacity: 1; }
.vx-prosp-card.capt .vx-prosp-nome { color: var(--vx-teal-soft); }
/* a faixa no canto: le antes do nome, que e' o ponto — o olho decide "ja e' meu" sem ler */
.vx-prosp-selo {
  position: absolute; top: 0; right: 0; z-index: 1;
  font-size: 9.5px; font-weight: 800; letter-spacing: calc(.04em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-bg); background: var(--vx-teal-br);
  padding: 3px 9px 3px 11px; border-radius: 0 calc(16px * var(--vx-raio, 1)) 0 calc(11px * var(--vx-raio, 1));
}
.vx-fchip.sel.on { border-color: var(--vx-teal-br); background: var(--vx-teal-glow); color: var(--vx-teal-br); }

/* ══ CAMADAS PERSONALIZAVEIS E O MERGULHO NA RAIA ══ */
.vx-orb-col .cab .mv, .vx-orb-col .cab .del {
  border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  border-radius: calc(6px * var(--vx-raio, 1)); width: 24px; height: 24px; cursor: pointer; font-size: 12px; flex: none;
}
.vx-orb-col .cab .mv:hover:not(:disabled) { color: var(--vx-teal-br); border-color: var(--vx-teal-br); }
.vx-orb-col .cab .mv:disabled { opacity: .3; cursor: default; }
.vx-orb-col .cab .del:hover { color: var(--vx-frio); border-color: var(--vx-frio); }
.vx-orb-nova {
  flex: 0 0 150px; align-self: stretch; min-height: 90px;
  border: 1px dashed var(--vx-border-2); background: transparent; color: var(--vx-muted);
  border-radius: calc(12px * var(--vx-raio, 1)); cursor: pointer; font-size: 12.5px; font-weight: 700;
}
.vx-orb-nova:hover { color: var(--vx-teal-br); border-color: var(--vx-teal-br); background: var(--vx-teal-glow); }

/* sair do mergulho — canto oposto a legenda, para nao brigar com ela */
.vx-orb-sair {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  border: 1px solid var(--vx-border-2); background: rgba(8,10,18,.72); color: var(--vx-teal-br);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 5px 11px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(4px);
}
.vx-orb-sair:hover { background: var(--vx-teal-glow); }

/* a lista da raia mergulhada: densa, para trabalhar em sequencia */
.vx-orb-raia {
  margin-top: 12px; background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 12px 14px;
}
.vx-orb-raia .cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vx-orb-raia .cab b { font-size: 14px; }
.vx-orb-raia .cab span { font-size: 11.5px; color: var(--vx-muted); }
.vx-orb-raia .oco { color: var(--vx-faint); font-size: 13px; padding: 10px 0; }
.vx-orb-raia .itens { display: flex; flex-direction: column; gap: 6px; }
.vx-orb-raia .it {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  border-radius: calc(9px * var(--vx-raio, 1)); padding: 8px 11px;
}
.vx-orb-raia .it:hover { border-color: var(--vx-teal-br); }
.vx-orb-raia .it.esfr { border-left: 3px solid #5d7fb4; }
.vx-orb-raia .it .nm { flex: 1; min-width: 0; }
.vx-orb-raia .it .nm b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-orb-raia .it .nm span { font-size: 11px; color: var(--vx-muted); }
.vx-orb-raia .it .qdo { font-size: 11px; color: var(--vx-faint); white-space: nowrap; }
.vx-orb-raia .it .tel { color: #5DE0B0; display: flex; }

/* ══ IMPULSO & CONSTELACAO ══
   A faixa fica ABAIXO da faixa "Hoje" de proposito: o trabalho vem primeiro, o
   reconhecimento vem do trabalho. Invertido, viraria um jogo com CRM ao lado. */
.vx-gam {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 14px;
  background: linear-gradient(90deg, rgba(242,180,65,.07), transparent 60%), var(--vx-surface);
  border: 1px solid var(--vx-border); border-left: 3px solid #f2b441; border-radius: calc(12px * var(--vx-raio, 1));
}
.vx-gam .pt { display: flex; flex-direction: column; }
.vx-gam .pt b { font-size: 19px; font-weight: 800; line-height: 1.1; color: #f2b441; }
.vx-gam .pt.tot b { color: var(--vx-muted); font-size: 15px; }
.vx-gam .pt span { font-size: 10.5px; color: var(--vx-muted); font-weight: 600; }
.vx-gam .est { display: flex; gap: 3px; align-items: center; }
.vx-gam .est .e { font-size: 15px; color: rgba(233,236,244,.22); cursor: help; }
.vx-gam .est .e.on { color: #f2b441; text-shadow: var(--vx-sombra-texto, 0 0 8px rgba(242,180,65,.5)); }
.vx-gam .prox { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 190px; }
.vx-gam .prox .nm { font-size: 11.5px; color: var(--vx-muted); white-space: nowrap; }
.vx-gam .prox .bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); border-radius: calc(4px * var(--vx-raio, 1)); overflow: hidden; min-width: 60px; }
.vx-gam .prox .bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8860b, #f2b441); }
.vx-gam .prox .n { font-size: 11px; color: var(--vx-faint); white-space: nowrap; }
/* o troféu que não desce — cor própria pra não se confundir com o saldo (que pode cair) */
.vx-gam .pt.score b { color: var(--vx-teal); font-size: 15px; }

/* os níveis de resgate: PARALELO ao bilhete de graça, então a casca é irmã da .vx-gam-bilhete —
   mas sem o pulso, porque aqui é o vendedor que escolhe gastar, não uma conquista pra comemorar */
.vx-gam-niveis { display: flex; gap: 6px; flex-wrap: wrap; }
.vx-gam-nivel {
  background: rgba(255,255,255,.03); border: 1px solid var(--vx-border); color: var(--vx-faint);
  border-radius: var(--vx-pill, 999px); padding: 5px 12px; font-size: 11.5px; font-weight: 600;
  cursor: default; white-space: nowrap; transition: all .18s var(--vx-spring);
}
.vx-gam-nivel.on { background: color-mix(in srgb, var(--vx-teal-br) 10%, transparent); border-color: color-mix(in srgb, var(--vx-teal-br) 45%, transparent); color: var(--vx-teal); cursor: pointer; }
.vx-gam-nivel.on:hover:not(:disabled) { background: color-mix(in srgb, var(--vx-teal-br) 20%, transparent); transform: translateY(-1px); }
.vx-gam-nivel:disabled { opacity: .6; }

/* configuracao do modulo */
.vx-gamcfg-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.vx-gamcfg-top b { font-size: 13.5px; }
.vx-gamcfg-top .ds { font-size: 12px; color: var(--vx-muted); line-height: 1.5; margin-top: 3px; max-width: 620px; }
.vx-gamcfg-linha { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--vx-border); flex-wrap: wrap; }
.vx-gamcfg-linha:last-of-type { border-bottom: 0; }
.vx-gamcfg-linha .nm { flex: 1; min-width: 190px; }
.vx-gamcfg-linha .nm b { display: block; font-size: 13px; }
.vx-gamcfg-linha .nm span { font-size: 11px; color: var(--vx-muted); }
.vx-gamcfg-linha .ev { font-size: 10px; font-weight: 700; color: var(--vx-faint); background: rgba(255,255,255,.05);
  border: 1px solid var(--vx-border); border-radius: calc(5px * var(--vx-raio, 1)); padding: 2px 7px; white-space: nowrap; }
.vx-gamcfg-linha .vx-input.pts { width: 74px; text-align: center; }
.vx-gamcfg-del { border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  border-radius: calc(6px * var(--vx-raio, 1)); width: 26px; height: 26px; cursor: pointer; }
.vx-gamcfg-del:hover { color: var(--vx-frio); border-color: var(--vx-frio); }

/* ══ CONFIGURAR AS ETAPAS DO FUNIL (/config/orbitas) ══
   Uma linha por etapa, na ordem em que os anéis aparecem no céu: de fora para dentro. A ordem na
   tela É a ordem do funil — listar alfabeticamente aqui seria esconder justamente a informação
   que a pessoa veio mexer. */
.vx-orbcfg-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.vx-orbcfg-top label { font-size:12.5px; color:var(--vx-muted); font-weight:600; }
.vx-orbcfg-top .ds { font-size:11.5px; color:var(--vx-muted); }

.vx-orbcfg-linha { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--vx-border); }
.vx-orbcfg-linha:last-of-type { border-bottom:0; }
.vx-orbcfg-linha .ord { font-size:11px; font-weight:700; color:#8a7ff0; min-width:26px; }
.vx-orbcfg-linha .sla { font-size:11.5px; color:var(--vx-muted); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.vx-orbcfg-linha .sla input { width:62px; }
/* LARGURAS QUE ERAM style= INLINE. Sairam da marcacao porque o telefone precisa desfaze-las, e
   estilo inline so' se desfaz com !important -- que e' o comeco de uma guerra de especificidade
   numa folha deste tamanho. Aqui elas sao regra normal, e a media query mais abaixo as substitui
   sem forcar nada. */
.vx-orbcfg-linha > input.vx-input.nome { max-width: 190px; }
/* BASE ZERO, e nao `auto`: o inline que saiu daqui era `flex:1`, que e `1 1 0%`. Com base `auto`
   o campo herda o `width:100%` do .vx-input, nasce do tamanho da linha inteira e quebra o resto do
   premio em mais duas faixas -- no desktop, onde antes cabia tudo numa. */
.vx-orbcfg-linha > input.vx-input.det { flex: 1 1 0%; min-width: 0; }
.vx-orbcfg-linha > select.vx-input.mover { max-width: 170px; }
.vx-orbcfg-linha .sla input.custo { width: 88px; }
/* DOIS DIGITOS NAO PRECISAM DE 84px. Este era o unico dos seis style= inline que saiu da marcacao
   sem classe substituta, e sem ela o campo caiu na regra generica da .sla e engordou de 66 para
   84 -- ninguem pediu, e a linha do nivel ficou mais comprida no desktop por descuido meu. */
.vx-orbcfg-linha .sla input.pct { width: 66px; }
.vx-orbcfg-linha > input.vx-input.etapa { flex: 1 1 0%; min-width: 0; }
/* LIGAR E APAGAR VIRAM UM GRUPO, encostado na direita. Soltos na fileira, eles paravam onde o
   conteudo anterior terminasse: cada linha punha o interruptor num lugar, e conferir "quais estao
   ligados" virava uma leitura em ziguezague em vez de uma coluna. */
/* O GRUPO SO' AGRUPA -- NAO EMPURRA. O gap de 10px e' o mesmo que a linha ja' usava entre os
   irmaos, para o par nao ficar mais apertado do que era.

   E NAO HA margin-left:auto AQUI, de proposito. Encostar o grupo na direita alinha os
   interruptores numa coluna bonita enquanto a linha cabe numa fileira so' -- e vira um defeito no
   instante em que ela quebra: na segunda fileira o par fica sozinho la' na ponta, com um vao de
   uns 600px entre o ultimo campo e ele. No telefone, onde a fileira e' curta e o grupo divide a
   primeira com o nome, a margem automatica volta (ver a media query). */
.vx-orbcfg-linha > .acoes { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
/* etapa COM gente dentro fica marcada: apagar uma cheia move lead, e isso não pode ser descoberto
   só depois, no texto do diálogo */
.vx-orbcfg-linha .qtd { font-size:11px; color:var(--vx-muted); min-width:74px; text-align:right; }
.vx-orbcfg-linha .qtd.tem { color:var(--vx-teal-br); font-weight:600; }
.vx-orbcfg-linha .mv, .vx-orbcfg-linha .del {
  background:var(--vx-surface-2); border:1px solid var(--vx-border); color:var(--vx-text);
  border-radius:calc(8px * var(--vx-raio, 1)); width:30px; height:28px; cursor:pointer; font-size:12px; line-height:1; }
.vx-orbcfg-linha .mv:hover:not(:disabled), .vx-orbcfg-linha .del:hover:not(:disabled) { border-color:var(--vx-border-2); }
.vx-orbcfg-linha .mv:disabled, .vx-orbcfg-linha .del:disabled { opacity:.35; cursor:default; }
.vx-orbcfg-linha .del:hover:not(:disabled) { border-color:#e5484d; color:#e5484d; }

.vx-orbcfg-nova { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px dashed var(--vx-border); }
.vx-orbcfg-nova .ds { font-size:11px; color:var(--vx-muted); }
.vx-orbcfg-nova .sla { font-size:11.5px; color:var(--vx-muted); display:flex; align-items:center; gap:6px; }
.vx-orbcfg-nova .sla input { width:62px; }

/* o atalho no quadro tem a mesma casca do antigo "+ etapa", mas é um link: leva para a tela de
   configuração em vez de criar coisa ali mesmo */
a.vx-orb-nova { text-decoration:none; display:flex; align-items:center; justify-content:center; }

/* o bilhete na faixa do Impulso: é a única coisa aqui que pede clique, então tem de parecer
   clicável sem virar o assunto — a carteira continua sendo o assunto */
.vx-gam-bilhete {
  background: linear-gradient(135deg, rgba(242,180,65,.18), rgba(242,180,65,.06));
  border: 1px solid rgba(242,180,65,.45); color: #f2b441;
  border-radius: var(--vx-pill, 999px); padding: 6px 14px; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .18s var(--vx-spring);
  animation: vx-bilhete-pulsa 2.6s ease-in-out infinite;
}
.vx-gam-bilhete:hover:not(:disabled) { background: rgba(242,180,65,.28); transform: translateY(-1px); }
.vx-gam-bilhete:disabled { opacity: .5; cursor: default; animation: none; }
@keyframes vx-bilhete-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,180,65,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(242,180,65,0); }
}
/* quem pediu menos movimento não quer um botão piscando no canto do olho o dia inteiro */
@media (prefers-reduced-motion: reduce) { .vx-gam-bilhete { animation: none; } }

/* ══ A CABINE — o Cockpit lido como altitude ══
   Superfície escura FIXA, como o céu das Órbitas: o quadro é o mesmo em claro e em escuro, porque
   um campo de naves em fundo branco não é um campo de naves. Logo, tudo que fica em cima usa cor
   literal — a lição que o tema claro já ensinou uma vez. */
.vx-cabine {
  position: relative; flex: 1; min-height: 0; margin: 4px 20px 16px;
  border: 1px solid var(--vx-border); border-radius: calc(14px * var(--vx-raio, 1)); overflow: hidden;
  background: #07080f; outline: none;
}
.vx-cabine-cv { display: block; width: 100%; height: 100%; }

/* ── a barra de cima: os três números que decidem o dia ── */
.vx-cabine-topo {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(6,8,14,.92), rgba(6,8,14,0));
  pointer-events: none;
}
.vx-cabine-topo > * { pointer-events: auto; }
.vx-cabine-hero, .vx-cabine-passo, .vx-cabine-encalhe { display: flex; flex-direction: column; line-height: 1.15; }
.vx-cabine-topo .rot { font-size: 10.5px; text-transform: var(--vx-caixa, uppercase); letter-spacing: calc(.09em * var(--vx-tracking, 1)); color: #a9b6c7; }
.vx-cabine-topo b { font-size: 26px; font-weight: 700; letter-spacing: calc(-.6px * var(--vx-tracking, 1)); }
.vx-cabine-topo .sub { font-size: 11.5px; color: #b3bfcf; margin-top: 1px; }
.vx-cabine-hero b { color: #e9ecf4; }
.vx-cabine-passo b { color: var(--vx-teal-br); }
/* o encalhe tem o MESMO tamanho do "em voo" de propósito: tela que só mostra o que está por
   fechar é propaganda, não instrumento */
.vx-cabine-encalhe b { color: #e5484d; }

/* as saídas: o menu lateral pode estar recolhido, e tela cheia sem saída é armadilha */
.vx-cabine-nav { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vx-cabine-nav a {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #aebbcd;
  border-radius: var(--vx-pill, 999px); padding: 7px 13px; font-size: 12px; text-decoration: none;
  transition: all .18s var(--vx-spring); white-space: nowrap;
}
.vx-cabine-nav a:hover { background: rgba(255,255,255,.10); color: #e9ecf4; border-color: rgba(255,255,255,.26); }

.vx-cabine-sair {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #dfe5ee;
  border-radius: var(--vx-pill, 999px); padding: 8px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .18s var(--vx-spring); white-space: nowrap;
}
.vx-cabine-sair:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.32); transform: translateY(-1px); }

/* ── o Impulso encostado no canto, deliberadamente menor que a carteira ── */
.vx-cabine-imp {
  position: absolute; right: 14px; bottom: 96px; z-index: 2; max-width: 250px;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
  background: rgba(10,12,20,.72); border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 10px 13px; backdrop-filter: blur(6px);
}
.vx-cabine-imp .pt { display: flex; align-items: baseline; gap: 6px; }
.vx-cabine-imp .pt b { font-size: 19px; font-weight: 700; color: #f2b441; }
.vx-cabine-imp .pt span { font-size: 11px; color: #b3bfcf; }
.vx-cabine-imp .pt.score b { color: var(--vx-teal); font-size: 15px; }
.vx-cabine-imp .est { display: flex; gap: 3px; }
.vx-cabine-imp .est .e { font-size: 14px; color: #39414f; cursor: default; }
.vx-cabine-imp .est .e.on { color: #f2b441; }
.vx-cabine-imp .prox { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: #b3bfcf; }
.vx-cabine-imp .prox b { color: #c3ccd9; }
.vx-cabine-imp .prox .n { color: var(--vx-teal-br); font-weight: 600; }
.vx-cabine-imp .bil { font-size: 10.5px; color: #f2b441; text-align: right; }

/* ── o placar entre vendedores: canto oposto ao Impulso, de propósito — os dois competem por
   atenção e a Cabine já tem a carteira como assunto principal ── */
.vx-cabine-plc {
  position: absolute; right: 14px; top: 78px; z-index: 2; max-width: 210px;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(10,12,20,.72); border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 9px 12px; backdrop-filter: blur(6px);
}
.vx-cabine-plc .tt { font-size: 10.5px; color: #9aa7b8; letter-spacing: calc(.02em * var(--vx-tracking, 1)); margin-bottom: 2px; }
.vx-cabine-plc .ln { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: #c3ccd9; }
.vx-cabine-plc .ln .p { color: #6b7686; font-variant-numeric: tabular-nums; min-width: 18px; }
.vx-cabine-plc .ln .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-cabine-plc .ln .pt { color: #f2b441; font-weight: 600; font-variant-numeric: tabular-nums; }
.vx-cabine-plc .ln .es { color: #6b7686; font-size: 10.5px; }
.vx-cabine-plc .ln.eu { color: var(--vx-teal-br); }
.vx-cabine-plc .ln.eu .nm { font-weight: 600; }
.vx-cabine-plc .ln.fora { border-top: 1px dashed rgba(255,255,255,.14); margin-top: 2px; padding-top: 4px; }

/* ── A CORRIDA ESPACIAL DO MÊS (vx-cabine-plc.corrida). Cada vendedor é um foguete-sprite na sua
   pista: a posição é pontos÷líder, os fios verticais são os quartos do caminho (checkpoints) e a
   faixa quadriculada à direita é a chegada — o mês fecha, ganha quem pontuou mais. O foguete de
   quem está olhando brilha verde, e o alvo (quanto falta pro líder) vai no title da pista. */
/* compacta por padrão ("deixa como estava porém com um botão de ver maior") — o palco grande
   mora atrás do botão ⤢, não do tamanho de fábrica */
.vx-cabine-plc.corrida { width: 330px; max-width: 330px;
  cursor: zoom-in; transition: width .35s ease; }
.vx-cabine-plc.corrida .tt { display: flex; align-items: center; gap: 6px; }
.vx-cabine-plc.corrida .tt .exp { margin-left: auto; width: 24px; height: 22px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: calc(7px * var(--vx-raio, 1));
  color: #c3ccd9; cursor: pointer; }
.vx-cabine-plc.corrida .tt .exp:hover { background: rgba(255,255,255,.14); color: #fff; }
.vx-cabine-plc.corrida .sub { font-size: 9.5px; color: #6b7686; margin: -3px 0 5px; }
/* AMPLIADA ("um botao para deixar maior"): mesma corrida, palco de destaque — pistas mais altas,
   foguetes maiores e a linha de detalhe (o que o tooltip diz) escrita embaixo de cada pista. */
.vx-cabine-plc.corrida.grande { width: 680px; max-width: 680px; padding: 14px 18px; cursor: default; }
.vx-cabine-plc.corrida.grande .tt { font-size: 13.5px; }
.vx-cabine-plc.corrida.grande .sub { font-size: 11.5px; }
.vx-cabine-plc.corrida.grande .vx-corrida-pistas .pista { height: 66px; }
.vx-cabine-plc.corrida.grande .vx-corrida-pistas .pista::before { top: 40%; }
.vx-cabine-plc.corrida.grande .foguete { top: 40%; }
.vx-cabine-plc.corrida.grande .foguete svg { width: 74px; height: 32px; }
.vx-cabine-plc.corrida.grande .nome { font-size: 11px; top: 3px; }
.vx-cabine-plc.corrida.grande .rank { font-size: 12.5px; top: 34%; }
.vx-cabine-plc.corrida.grande .foguete .pts { font-size: 12.5px; }
.vx-corrida-pistas .det { position: absolute; left: 22px; bottom: 3px; font-size: 10px; color: #8b98aa;
  max-width: 82%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-corrida-pistas { position: relative;
  /* checkpoints: três fios nos quartos do trecho corrido (a pista útil vai de 5% a 81%) */
  background-image:
    linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent))),
    linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent))),
    linear-gradient(180deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 14%, transparent)));
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%, 1px 100%;
  background-position: 24% 0, 43% 0, 62% 0;
}
.vx-corrida-pistas::after {   /* a linha de chegada, quadriculada */
  content: ""; position: absolute; top: -2px; bottom: -2px; right: 8%; width: 6px;
  border-radius: calc(2px * var(--vx-raio, 1)); opacity: .55;
  background: repeating-conic-gradient(rgba(255,255,255,.8) 0% 25%, rgba(10,12,20,.9) 0% 50%) 0 0 / 6px 6px;
}
.vx-corrida-pistas .pista { position: relative; height: 37px; }
.vx-corrida-pistas .pista::before { content: ""; position: absolute; left: 5%; right: 10%; top: 46%;
  border-top: 1px dashed rgba(255,255,255,.09); }
.vx-corrida-pistas .rank { position: absolute; left: 0; top: 40%; transform: translateY(-50%);
  font-size: 9.5px; color: #6b7686; font-variant-numeric: tabular-nums; }
.vx-corrida-pistas .nome { position: absolute; left: 18px; top: 1px; font-size: 8.5px; letter-spacing: calc(.07em * var(--vx-tracking, 1));
  text-transform: var(--vx-caixa, uppercase); color: rgba(154,167,184,.55); max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-corrida-pistas .pista.eu .nome { color: color-mix(in srgb, var(--vx-teal-br) 85%, transparent); font-weight: 600; }
.vx-corrida-pistas .pista.fora { border-top: 1px dashed rgba(255,255,255,.14); margin-top: 3px; }
.vx-corrida-pistas .foguete { position: absolute; top: 46%; transform: translate(-50%, -50%);
  transition: left .9s cubic-bezier(.22,1,.36,1); animation: vx-fog-in .8s cubic-bezier(.22,1,.36,1) both;
  z-index: 2; }
.vx-corrida-pistas .foguete svg { display: block; overflow: visible;
  animation: vx-fog-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.vx-corrida-pistas .pista:nth-child(2n) .foguete svg { animation-delay: -1.3s; }
.vx-corrida-pistas .pista.eu .foguete svg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--vx-teal-br) 60%, transparent)); }
.vx-corrida-pistas .foguete .pts { position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: -3px; font-size: 9px; font-weight: 600; color: #f2b441; white-space: nowrap;
  font-variant-numeric: tabular-nums; text-shadow: var(--vx-sombra-texto, 0 1px 3px rgba(0,0,0,.85)); }
.vx-corrida-pistas .ch1 { animation: vx-fog-chama .18s ease-in-out infinite alternate; transform-origin: 13px 10px; }
.vx-corrida-pistas .ch2 { animation: vx-fog-chama .13s ease-in-out infinite alternate-reverse; transform-origin: 13px 10px; }
@keyframes vx-fog-in { from { opacity: 0; transform: translate(-50%, -50%) translateX(-44px); } }
@keyframes vx-fog-bob { 0%, 100% { transform: translateY(-1.4px); } 50% { transform: translateY(1.4px); } }
@keyframes vx-fog-chama { from { transform: scaleX(.7); opacity: .7; } to { transform: scaleX(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .vx-corrida-pistas .foguete, .vx-corrida-pistas .foguete svg,
  .vx-corrida-pistas .ch1, .vx-corrida-pistas .ch2 { animation: none; } }

/* ── a legenda: sem ela os eixos viram decoração ── */
.vx-cabine-leg {
  position: absolute; left: 16px; bottom: 10px; z-index: 2;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-size: 11px; color: #9aa7b8; pointer-events: none;
  text-shadow: var(--vx-sombra-texto, 0 1px 4px rgba(0,0,0,.7));
}
.vx-cabine-leg i.q { width: 8px; height: 8px; border-radius: 50%; background: #f2b441;
  display: inline-block; margin-right: 4px; vertical-align: -1px; }

@media (max-width: 1100px) {
  .vx-cabine { margin: 4px 10px 12px; }
  .vx-cabine-topo { gap: 16px; }
  .vx-cabine-topo b { font-size: 21px; }
  .vx-cabine-imp { display: none; }   /* espaço apertado: a carteira ganha da faixa do Impulso */
  .vx-cabine-plc { display: none; }   /* mesmo corte: o placar cede primeiro que a carteira */
}

/* ══ A CABINE NUM TELEFONE: O HUD PARA DE FLUTUAR ═══════════════════════════════════════════════
   Sobrepor os números ao desenho é a graça da tela numa janela larga — o gráfico ocupa tudo e a
   leitura vem por cima, num canto vazio. Num aparelho de 375px não existe canto vazio: os três
   números quebram em pilha, o HUD passa de 86px para 238, e ele cobre 37% do canvas. O resultado é
   o da foto — "Faturamento", "04 · Ag. Carregamento" e "03 · Ag. Booking" saindo por baixo de
   "SEM SUBIR HÁ MAIS DE 14 DIAS", tudo no mesmo lugar e nada legível.

   Aqui a cabine vira uma coluna de três andares: números em cima, desenho no meio, legenda
   embaixo. Ninguém disputa pixel com ninguém, e o `escalar()` do vx-cabine.js percebe sozinho que
   o HUD deixou de flutuar — ele pergunta o `position` computado — e devolve ao desenho a margem
   de topo que existia só para escapar dele. */
@media (max-width: 700px) {
  /* ROLA EM VEZ DE CORTAR. A cabine e' overflow:hidden porque no desktop ela tem coisa flutuando
     dentro; virando coluna, isso passa a significar outra coisa -- o que nao couber some sem barra
     e sem aviso. Num telefone DEITADO (667x375) a coluna pede 325px e a caixa tem 203: some a
     legenda inteira E o rodape do desenho, que e' justo onde a regua "hoje 7d 14d 30d 45d" e as
     primeiras etapas do funil sao escritas. Cortar o eixo de uma tela cujo assunto E' o eixo e'
     pior que qualquer aperto. Abaixo de 700px nao ha mais nada flutuando ali dentro (o placar e a
     faixa do Impulso ja saem em 1100px), entao deixar rolar e' seguro. */
  .vx-cabine { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }

  /* ORDER -1 PORQUE O CANVAS E O PRIMEIRO FILHO. Ele vem antes no HTML de proposito: flutuando,
     o HUD tem de ser pintado DEPOIS para ficar por cima. Virando coluna, essa mesma ordem jogaria
     os numeros para debaixo do grafico -- e o cabecalho da tela iria parar no rodape. */
  .vx-cabine-topo {
    order: -1;
    position: static; z-index: auto; background: none;
    padding: 10px 12px 6px; gap: 10px 14px; row-gap: 10px;
  }
  /* A NAVEGACAO E O MENOR DOS TRES ASSUNTOS DA FAIXA e estava ocupando 77px em duas fileiras de
     bolhas do tamanho de desktop -- mais que os proprios numeros. */
  .vx-cabine-nav { gap: 6px; }
  .vx-cabine-nav a { padding: 5px 10px; font-size: 11px; }
  .vx-cabine-sair { padding: 5px 12px; font-size: 11.5px; }
  /* OS TRÊS NÚMEROS, DOIS POR FILEIRA. Em pilha eles somavam 238px; a base de 44% põe "em voo" e
     "a um passo" lado a lado, e "sem subir" na fileira de baixo com o valor inteiro. */
  .vx-cabine-hero, .vx-cabine-passo, .vx-cabine-encalhe { flex: 1 1 44%; min-width: 0; }
  .vx-cabine-topo b { font-size: 18px; letter-spacing: calc(-.4px * var(--vx-tracking, 1)); }
  /* O ROTULO FICA NOS 10.5px. Ele e' versalete cinza e e' a UNICA coisa que diz qual dos tres
     numeros e' o encalhe -- economizar 1px nele para ganhar 3px de altura era trocar legibilidade
     por quase nada, e quem le no sol ou sem oculos paga a conta. */
  .vx-cabine-topo .rot { letter-spacing: calc(.06em * var(--vx-tracking, 1)); }
  .vx-cabine-topo .sub { font-size: 10.5px; }

  /* O CANVAS E' O UNICO ELASTICO DA COLUNA. Os numeros e a legenda tem a altura que o texto
     pedir -- encolher qualquer um dos dois so' produz frase cortada. E o piso do desenho e' 160 e
     nao 260: a cabine tem overflow:hidden, entao um piso alto demais nao "reserva" espaco, ele
     empurra a legenda para fora e o corte e' silencioso. Num aparelho de 320x700 o desenho ficava
     com os 260 do piso e a ultima linha da legenda sumia atras da borda. */
  .vx-cabine-topo, .vx-cabine-leg { flex: 0 0 auto; }
  /* O PISO DE 300px E' O QUE FAZ OITO FAIXAS CABEREM. Com a coluna rolando, o piso deixa de ser
     um risco (nada mais e cortado) e vira o oposto: e ele que garante altura de desenho quando a
     caixa e' baixa. Num telefone DEITADO a caixa tem 203px -- com piso de 200 sobravam 118px para
     oito etapas, 15px cada, e os rotulos das faixas escreviam um por cima do outro. Com 300, cada
     faixa fica com ~27px, que e' o tamanho das duas linhas do rotulo. Em pe a caixa ja da mais que
     isso e o piso nao encosta. */
  .vx-cabine-cv { flex: 1 1 auto; min-height: 300px; height: auto; }

  /* O RECUO DA DIREITA E' O BOTAO FLUTUANTE. Ele e' fixed no canto e tem 56px mais a margem; com
     a legenda encostada no rodape, a bolha verde caia exatamente em cima do fim da segunda frase e
     comia "de etapa" -- e a frase mutilada dizia outra coisa. Aqui a legenda simplesmente nao
     escreve embaixo dele. */
  .vx-cabine-leg {
    position: static; padding: 6px 84px 10px 12px; row-gap: 2px;
    text-shadow: none; font-size: 10.5px;
  }
  /* "...ha quanto tempo NAO SOBE DE ETAPA" e uma frase inteira num unico span, e span e item de
     flex: com o min-width:auto do padrao ele se recusa a encolher abaixo do proprio texto e o
     final saia pela borda. Com min-width:0 a frase quebra dentro do proprio item. */
  .vx-cabine-leg > span { min-width: 0; }
}

/* ══ QUEDA DE CONEXAO ══
   O Blazor liga e desliga as classes components-reconnect-* neste elemento; a folha de estilo faz o
   resto, sem uma linha de JS.

   OS ESTADOS SAO SEIS, e nao tres. Lidos do proprio blazor.web.js do .NET 10 em vez de supostos,
   porque supor aqui sai caro: estado nao previsto nao mostra caixa nenhuma, e a pessoa fica olhando
   uma pagina morta sem uma palavra — pior que o aviso feio que isto veio substituir. A primeira
   versao deste arquivo tratava tres, e faltava justamente o que aparece na pratica.

     show / retrying  caiu e esta tentando           (sem botao: ele ainda esta trabalhando)
     paused           o servidor suspendeu de proposito — nao e' erro
     failed           desistiu de reconectar         -> tentar de novo
     resume-failed    a sessao pausada nao voltou    -> tentar, e recarregar
     rejected         o servidor ja largou a sessao  -> so recarregar

   ELAS SE ACUMULAM no elemento ("show retrying"), entao cada regra exclui as mais graves com
   :not(). Sem isso, dois textos apareceriam juntos dizendo coisas diferentes. */
.vx-recon { display: none; }
.vx-recon.components-reconnect-show,
.vx-recon.components-reconnect-retrying,
.vx-recon.components-reconnect-paused,
.vx-recon.components-reconnect-failed,
.vx-recon.components-reconnect-resume-failed,
.vx-recon.components-reconnect-rejected {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 20000;
  /* VIDRO, NAO CORTINA. A primeira versao escurecia a 78% e o app sumia — parecia que a tela
     tinha morrido, que e exatamente a sensacao que este aviso existe para evitar. Agora o fundo
     e a propria tela, embacada: da para VER que o trabalho continua ali atras, so fora de
     alcance por um instante. O blur forte e quem faz o cartao ler bem por cima de qualquer
     conteudo; o escurecimento leve so assenta o contraste. */
  /* FOSCO, nao so transparente. Sobre tela escura, vidro limpo e' invisivel — blur de preto
     sobre preto nao aparece. O que denuncia o frost e' o TOM LEITOSO: um veu levemente azulado
     e claro por cima do escurecimento, como acrilico jateado. E' ele que faz o efeito existir
     em qualquer tela, cheia ou vazia. */
  background:
    linear-gradient(180deg, rgba(148,168,196,.10), rgba(148,168,196,.055)),
    rgba(6,8,14,.34);
  backdrop-filter: blur(18px) saturate(1.25) brightness(1.06);
  -webkit-backdrop-filter: blur(18px) saturate(1.25) brightness(1.06);
  animation: vx-recon-entra .22s ease both;
}
/* reconectou: some na hora, e vence todas as de cima */
.vx-recon.components-reconnect-hide { display: none !important; }

@keyframes vx-recon-entra { from { opacity: 0; } to { opacity: 1; } }

.vx-recon .cx {
  width: min(430px, calc(100vw - 40px));
  /* o cartao tambem e translucido — vidro sobre vidro, com a borda teal segurando a forma */
  background: linear-gradient(180deg, rgba(148,168,196,.06), transparent 40%), rgba(15,19,28,.78);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid color-mix(in srgb, var(--vx-teal-br) 22%, transparent);
  border-radius: calc(16px * var(--vx-raio, 1)); padding: 26px 26px 22px; text-align: center;
  box-shadow: var(--vx-sombra, 0 24px 70px rgba(0,0,0,.6));
  color: #e9ecf4;
}
.vx-recon .cx b { display: block; font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.vx-recon .cx p { font-size: 12.5px; line-height: 1.6; color: #9fb0c4; margin: 0; }
.vx-recon .cx button {
  margin-top: 16px; background: var(--vx-teal); border: 0; color: var(--vx-sobre-destaque, #04110c);
  border-radius: var(--vx-pill, 999px); padding: 9px 20px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.vx-recon .cx button:hover { filter: brightness(1.08); }
/* o secundario e' o que TALVEZ funcione; o cheio e' o que resolve */
.vx-recon .cx button.sec { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #c3ccd9; }
.vx-recon .cx button.sec:hover { background: rgba(255,255,255,.07); filter: none; }
.vx-recon .bts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* o anel gira enquanto ha esperanca e para quando nao ha: parado, ele diz que parou de tentar */
.vx-recon .anel {
  width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--vx-teal-br) 18%, transparent); border-top-color: var(--vx-teal);
  animation: vx-recon-gira 1s linear infinite;
}
.vx-recon.components-reconnect-failed .anel,
.vx-recon.components-reconnect-resume-failed .anel { animation: none; border-top-color: #f2b441; }
.vx-recon.components-reconnect-rejected .anel { animation: none; border-top-color: #e5484d; }
@keyframes vx-recon-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vx-recon .anel { animation: none; } }

/* UM ESTADO POR VEZ — o mais grave manda */
.vx-recon .est { display: none; }
.vx-recon.components-reconnect-rejected .est.expirou { display: block; }
.vx-recon.components-reconnect-resume-failed:not(.components-reconnect-rejected) .est.retomar { display: block; }
.vx-recon.components-reconnect-failed:not(.components-reconnect-rejected):not(.components-reconnect-resume-failed) .est.falhou { display: block; }
.vx-recon.components-reconnect-paused:not(.components-reconnect-rejected):not(.components-reconnect-resume-failed):not(.components-reconnect-failed) .est.pausado { display: block; }
.vx-recon.components-reconnect-show:not(.components-reconnect-rejected):not(.components-reconnect-resume-failed):not(.components-reconnect-failed):not(.components-reconnect-paused) .est.tentando,
.vx-recon.components-reconnect-retrying:not(.components-reconnect-rejected):not(.components-reconnect-resume-failed):not(.components-reconnect-failed):not(.components-reconnect-paused) .est.tentando { display: block; }

/* o cabeçalho do cavalete no drawer do pedido: é clicável, então tem de parecer */
.vx-pd-item.cav { cursor:pointer; background:color-mix(in srgb, var(--vx-teal-br) 5%, transparent); border-radius:calc(8px * var(--vx-raio, 1)); }
.vx-pd-item.cav:hover { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-pd-item.cav .vx-pd-it-m { color:var(--vx-teal-br); }
/* a chapa de dentro recua e perde peso: o assunto passou a ser o cavalete */
.vx-pd-item.dentro { margin-left:14px; opacity:.86; }

/* a ficha do lead: contato com atalho de acao, e a observacao como bloco de leitura */
.vx-orb-acao { color: var(--vx-teal-br); text-decoration: none; }
.vx-orb-acao:hover { text-decoration: underline; }
.vx-orb-obs {
  margin: 10px 0 2px; padding: 9px 11px; border-radius: calc(9px * var(--vx-raio, 1));
  background: color-mix(in srgb, var(--vx-teal-br) 5%, transparent); border: 1px solid var(--vx-border);
  font-size: 12px; line-height: 1.55; color: var(--vx-text);
  white-space: pre-wrap; word-break: break-word;
}

/* A LISTA DA RAIA ANUNCIA A PROPRIA CHEGADA: sobe deslizando e acende a borda teal por um
   instante. E o par do scroll — o movimento diz "foi isto que o seu clique abriu". */
.vx-orb-raia { animation: vx-raia-surge .38s cubic-bezier(.2,.9,.3,1) both; }
@keyframes vx-raia-surge {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.vx-orb-raia .cab b { position: relative; }
.vx-orb-raia { border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1)); }
@media (prefers-reduced-motion: reduce) { .vx-orb-raia { animation: none; } }

/* CAMPO DENSO: acima de 250 pontos o pulso infinito e a sombra saem de cena (vx-map.js poe a
   classe). 1.400 animacoes simultaneas eram o que travava o arrasto — e num campo cheio o pulso
   e textura, nao destaque. O ponto continua colorido, clicavel e com o mesmo significado. */
.vx-map.denso .vxmk-pulse { display: none; }
.vx-map.denso .vxmk-dot { box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MODO VIDRO — as raias do board em vidro fosco, como o iOS.
   
   O TRUQUE NÃO É O BLUR, É O QUE ESTÁ ATRÁS. backdrop-filter só aparece quando há alguma coisa
   para desfocar: sobre o fundo chapado do app ele não faz nada visível. Por isso o modo acende
   um brilho suave atrás do board, na cor do tema — é ele que o vidro refrata, e é daí que vem a
   sensação de profundidade. Sem esse brilho, o efeito vira só uma coluna mais clara.
   
   Só entra por escolha (paleta → Vidro fosco): backdrop-filter é caro, e num board com dezenas
   de cards em máquina fraca custa quadro. Fica guardado no navegador de quem escolheu.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root.vx-vidro .vx-pipe { position:relative; isolation:isolate; }
/* o brilho: dois halos na cor do tema, bem abertos e bem fracos, atrás de tudo */
:root.vx-vidro .vx-pipe::before {
  content:""; position:absolute; inset:-10% -5%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(45% 55% at 18% 22%, color-mix(in srgb, var(--vx-teal) 26%, transparent), transparent 70%),
    radial-gradient(40% 50% at 78% 68%, color-mix(in srgb, var(--vx-teal) 16%, transparent), transparent 72%);
  filter: blur(50px); opacity:.65;
}
:root.vx-vidro .vx-col {
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border-color: rgba(255,255,255,.13);
  /* a linha clara no topo é o que faz ler como VIDRO e não como plástico: é o brilho da quina */
  box-shadow: var(--vx-sombra, inset 0 1px 0 rgba(255,255,255,.11), 0 20px 45px -28px rgba(0,0,0,.75));
}
:root.vx-vidro .vx-col-h { background: transparent; }
/* o card também, mas com menos blur: empilhar dois vidros iguais some com a hierarquia */
:root.vx-vidro .vx-deal {
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
:root.vx-vidro .vx-deal:hover { background: rgba(255,255,255,.10); }
:root.vx-vidro .vx-col-h .badge { background: rgba(255,255,255,.14); }

/* CLARO: o mesmo vidro, invertido. No claro o branco não contrasta com nada, então o véu é
   escuro e o brilho da quina vira branco puro. */
:root.vx-light.vx-vidro .vx-pipe::before { opacity:.5; }
:root.vx-light.vx-vidro .vx-col {
  background: rgba(255,255,255,.55);
  border-color: rgba(15,23,42,.10);
  box-shadow: var(--vx-sombra, inset 0 1px 0 rgba(255,255,255,.9), 0 20px 45px -30px rgba(15,23,42,.35));
}
:root.vx-light.vx-vidro .vx-deal {
  background: rgba(255,255,255,.7);
  border-color: rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
:root.vx-light.vx-vidro .vx-col-h .badge { background: rgba(15,23,42,.08); }

/* QUEM NÃO TEM backdrop-filter (navegador antigo) recebe um vidro OPACO em vez de uma coluna
   transparente com o texto de trás aparecendo por baixo — que é como o efeito falha feio. */
@supports not (backdrop-filter: blur(2px)) {
  :root.vx-vidro .vx-col { background: rgba(255,255,255,.09); }
  :root.vx-vidro .vx-deal { background: var(--vx-surface); }
  :root.vx-light.vx-vidro .vx-col { background: rgba(255,255,255,.92); }
}
/* respeita quem pediu menos movimento/efeito no sistema */
@media (prefers-reduced-transparency: reduce) {
  :root.vx-vidro .vx-pipe::before { display:none; }
  :root.vx-vidro .vx-col, :root.vx-vidro .vx-deal { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* PAINEL DE CIDADES (prospecção) — multisseleção com busca.
   Era um <select> de escolha única; a lista tem centenas de itens e quem prospecta trabalha uma
   REGIÃO, não uma cidade. O painel resolve as três coisas que o select não fazia: procurar,
   marcar várias e enxergar quantas estão marcadas sem abrir. */
/* A CASCA QUE ANCORA. O painel de cidades e position:absolute e nao tinha ancestral posicionado:
   ele se pendurava num elemento distante e abria fora do contexto, longe do chip que o chamou.
   Esta casca nao muda nada visualmente -- ela so existe pra ser o ponto de referencia. */
.vx-cidwrap { position:relative; display:inline-flex; }
/* top:100% em vez de margin-top:38px: o painel encosta na base do chip seja qual for a altura dele,
   em vez de descer um numero fixo medido uma vez e certo so naquele dia. */
.vx-menu-cidades { position:absolute; top:100%; left:0; margin-top:6px; z-index:1401; width:270px; max-height:340px;
  display:flex; flex-direction:column; background: var(--vx-surface); border:1px solid var(--vx-border);
  border-radius:calc(12px * var(--vx-raio, 1)); box-shadow: var(--vx-sombra, 0 22px 50px -22px rgba(0,0,0,.75)); overflow:hidden; }
.vx-menu-cidades .busca { border:none; border-bottom:1px solid var(--vx-border); background:transparent;
  color:var(--vx-text); font:inherit; font-size:13px; padding:10px 12px; outline:none; }
.vx-menu-cidades .busca::placeholder { color:var(--vx-faint); }
.vx-menu-cidades .acoes { display:flex; align-items:center; gap:10px; padding:7px 12px;
  border-bottom:1px solid var(--vx-border); font-size:11.5px; }
.vx-menu-cidades .acoes span { cursor:pointer; color:var(--vx-muted); }
.vx-menu-cidades .acoes span:hover { color:var(--vx-teal-soft); }
.vx-menu-cidades .acoes span.on { color:var(--vx-teal-soft); font-weight:600; }
.vx-menu-cidades .acoes .cnt { margin-left:auto; cursor:default; color:var(--vx-teal-soft); }
.vx-menu-cidades .lista { overflow-y:auto; padding:4px 0; }
.vx-menu-cidades .item { display:flex; align-items:center; gap:9px; padding:6px 12px; cursor:pointer;
  font-size:12.5px; color:var(--vx-text); }
.vx-menu-cidades .item:hover { background: rgba(255,255,255,.05); }
.vx-menu-cidades .item.marcada { color:var(--vx-teal-soft); }
.vx-menu-cidades .item input { accent-color: var(--vx-teal); width:14px; height:14px; cursor:pointer; }
.vx-menu-cidades .vazio { padding:14px 12px; font-size:12px; color:var(--vx-faint); text-align:center; }
:root.vx-light .vx-menu-cidades { background:#fff; box-shadow:var(--vx-sombra, 0 22px 50px -26px rgba(15,23,42,.3)); }
:root.vx-light .vx-menu-cidades .item:hover { background: rgba(15,23,42,.05); }

/* TELA VAZIA QUE SE EXPLICA. Grid sem card nenhum e um "0 / 1655" la em cima na barra tinha a
   cara de radar vazio; e radar cheio com um recorte que nao casa. Fica no lugar onde os cards
   estariam, porque e la que a pessoa esta olhando quando estranha o vazio. */
.vx-prosp-vazio { display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:34px 20px; margin:4px 0 10px; border:1px dashed var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); }
.vx-prosp-vazio b { font-size:14px; font-weight:600; color:var(--vx-text); }
.vx-prosp-vazio span { font-size:12.5px; color:var(--vx-muted); max-width:520px; }
/* "Ver mais" da lista de prospects — botao em cima, chips de quantidade embaixo (reusa .vx-gal-mais
   e .vx-gal-qtd da Galeria). */
.vx-prosp-mais { display:flex; flex-direction:column; align-items:center; gap:8px; margin:14px 0 6px; }


/* CAPTURADO E CLIENTE GANHAM UM SINAL, não só outra cor. Num campo de mil pontos coloridos por
   temperatura, "roxo" é mais uma cor no meio — e quem varre a área precisa enxergar de relance o
   que JÁ ESTÁ RESOLVIDO, para não gastar clique nele de novo. O anel branco recorta o ponto do
   fundo e o traço de dentro diz "feito"; ambos vivem no ::after, sem elemento novo no DOM. */
.vxmk.cap .vxmk-dot::after, .vxmk.cli .vxmk-dot::after {
  content:""; position:absolute; left:50%; top:47%; width:3px; height:6px;
  margin:-4px 0 0 -1.5px; border:solid #fff; border-width:0 1.6px 1.6px 0;
  transform:rotate(42deg); opacity:.95;
}
.vxmk.cap .vxmk-dot, .vxmk.cli .vxmk-dot { border:1.5px solid rgba(255,255,255,.9); }
/* no campo denso o pulso já morre; o sinal fica, porque é ele que informa */
.denso .vxmk.cap .vxmk-dot::after, .denso .vxmk.cli .vxmk-dot::after { opacity:.9; }

/* SELETOR DE FUNDO DO MAPA (Configurações › Aparência). A miniatura é o conteúdo: nome de estilo
   não diz como ele fica atrás de mil pontos, e é só isso que se decide aqui. */
.vx-mapasel { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); }
.vx-mapasel .op { cursor:pointer; border:2px solid transparent; border-radius:calc(11px * var(--vx-raio, 1)); overflow:hidden;
  background:var(--vx-surface); transition:border-color .15s, transform .15s; }
.vx-mapasel .op:hover { transform:translateY(-2px); border-color:var(--vx-border); }
.vx-mapasel .op.on { border-color:var(--vx-teal); }
.vx-mapasel .op img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.vx-mapasel .op span { display:block; padding:7px 9px 8px; font-size:12px; color:var(--vx-muted); }
.vx-mapasel .op.on span { color:var(--vx-teal-soft); font-weight:600; }
/* a marca "pago" no seletor de mapa: quem escolhe precisa saber que ligou uma conta, e o preço
   do Google é por tile — cada arrasto pede vários */
.vx-mapasel .op { position:relative; }
.vx-mapasel .op .tag { position:absolute; top:7px; right:7px; font-size:9.5px; font-weight:700;
  letter-spacing:calc(.06em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-sobre-destaque, #04110c); background:#f2b441;
  padding:2px 6px; border-radius:var(--vx-pill, 99px); }
.vx-mapasel .op.pago img { opacity:.62; }
.vx-mapasel .op.pago.on img { opacity:1; }

.leaflet-control-attribution leaflet-control{
    display:none !important;
}
/* ══ IMAGENS DA PROPOSTA ═══════════════════════════════════════════════════════════════════
   No EDITOR: miniatura + legenda + setas. Grade e nao lista vertical porque a ordem importa
   (o vendedor monta a sequencia: a pedra, o ambiente, o detalhe) e ordem se confere de relance,
   nao rolando. */
.vx-ofimgs { display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-top:10px; }
.vx-ofimg { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); }
.vx-ofimg-th { height:96px; background-size:cover; background-position:center; background-color:#1a1f27; }
.vx-ofimg-leg { width:100%; border:none; border-top:1px solid var(--vx-border); background:transparent;
  color:var(--vx-text); font:inherit; font-size:11.5px; padding:6px 8px; outline:none; }
.vx-ofimg-leg::placeholder { color:var(--vx-faint); }
.vx-ofimg-acoes { display:flex; align-items:center; gap:2px; padding:4px 6px; border-top:1px solid var(--vx-border); }
.vx-ofimg-acoes span { cursor:pointer; color:var(--vx-muted); font-size:13px; line-height:1;
  padding:3px 7px; border-radius:calc(6px * var(--vx-raio, 1)); user-select:none; }
.vx-ofimg-acoes span:hover { background:rgba(255,255,255,.07); color:var(--vx-teal-soft); }
.vx-ofimg-acoes .rm { margin-left:auto; }
.vx-ofimg-acoes .rm:hover { color:#ff6b6b; background:rgba(255,107,107,.12); }
:root.vx-light .vx-ofimg-acoes span:hover { background:rgba(15,23,42,.06); }

/* Na PROPOSTA PUBLICA: largura de leitura, nao grade apertada. Aqui a imagem e' argumento de
   venda e o cliente esta olhando UMA de cada vez -- miniatura seria mostrar e nao deixar ver.
   object-fit:contain porque a foto e' do vendedor e vem em qualquer proporcao: cortar o ambiente
   ao meio para caber num retangulo e' estragar justamente o que ele quis mostrar. */
.vx-cr-imgs { display:flex; flex-direction:column; gap:22px; max-width:960px; margin:0 auto; padding:26px 18px; }
.vx-cr-imgs figure { margin:0; }
.vx-cr-imgs img { width:100%; max-height:76vh; object-fit:contain; display:block;
  border-radius:calc(14px * var(--vx-raio, 1)); background:#0e1116; box-shadow:var(--vx-sombra, 0 20px 50px -28px rgba(0,0,0,.7)); }
.vx-cr-imgs figcaption { margin-top:9px; text-align:center; font-size:13px; color:var(--vx-muted); }

/* ══ EDITOR DE TEXTO FORMATADO (mensagem da proposta) ══════════════════════════════════════ */
.vx-rt { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); }
.vx-rt-lbl { font-size:12px; color:var(--vx-muted); padding:8px 11px 0; }
.vx-rt-lbl span { color:var(--vx-faint); font-size:11px; }
.vx-rt-barra { display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:7px 9px;
  border-bottom:1px solid var(--vx-border); }
.vx-rt-barra button { background:transparent; border:1px solid transparent; border-radius:calc(6px * var(--vx-raio, 1));
  color:var(--vx-muted); font:inherit; font-size:12.5px; min-width:26px; height:26px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0 6px; }
.vx-rt-barra button:hover { background:rgba(255,255,255,.08); color:var(--vx-text); }
/* estado ATIVO (a barra reflete a selecao): negrito/italico/alinhamento etc. do texto sob o cursor */
.vx-rt-barra button.on { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 38%, transparent); }
.vx-rt-barra select { background:transparent; border:1px solid var(--vx-border); border-radius:calc(6px * var(--vx-raio, 1));
  color:var(--vx-muted); font:inherit; font-size:11.5px; height:26px; padding:0 4px; cursor:pointer; outline:none; color-scheme:dark; }
/* o menu NATIVO do select herdava a letra clara sobre fundo branco do sistema — "cordial/premium"
   sumiam; esquema escuro no select e cor explícita nas opções resolvem em Chrome/Edge/Firefox */
.vx-rt-barra select option { background:#151a22; color:#e9ecf4; }
:root.vx-light .vx-rt-barra select { color-scheme:light; }
:root.vx-light .vx-rt-barra select option { background:#fff; color:#0f172a; }
.vx-rt-barra input[type=color] { width:26px; height:26px; padding:0; border:1px solid var(--vx-border);
  border-radius:calc(6px * var(--vx-raio, 1)); background:transparent; cursor:pointer; }
.vx-rt-barra .sep { width:1px; height:17px; background:var(--vx-border); margin:0 4px; }
/* min-height e nao rows: o campo cresce com o recado em vez de rolar dentro de duas linhas */
.vx-rt-area { min-height:190px; max-height:480px; overflow-y:auto; padding:11px; outline:none;
  color:var(--vx-text); font-size:13.5px; line-height:1.6; }
/* placeholder de contenteditable: :empty nao pega o <br> que o navegador poe sozinho, entao o
   seletor tambem cobre o caso do unico filho ser uma quebra */
.vx-rt-area:empty::before { content:attr(data-ph); color:var(--vx-faint); pointer-events:none; }
.vx-rt-area p { margin:0 0 8px; }
.vx-rt-area ul, .vx-rt-area ol { margin:0 0 8px; padding-left:22px; }
/* ── barra estendida: aliases, emojis, modelos salvos e IA ── */
.vx-rt-barra.vx-rt-ext { background:rgba(255,255,255,.02); }
.vx-rt-barra .chip { border:1px dashed var(--vx-border); color:var(--vx-teal-soft); font-size:11.5px; padding:0 8px; }
.vx-rt-barra .chip:hover { border-color:var(--vx-teal); }
.vx-rt-barra .emo { font-size:15px; min-width:28px; }
.vx-rt-barra .ia { border:1px solid var(--vx-teal); color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); gap:6px; padding:0 10px; font-weight:600; }
.vx-rt-barra .ia:hover { background:color-mix(in srgb, var(--vx-teal-br) 20%, transparent); }
.vx-rt-barra .vx-rt-perfil { color:var(--vx-teal-br); font-weight:600; white-space:nowrap; padding:0 8px; gap:4px; }
.vx-rt-barra .vx-rt-perfil:hover { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); }
.vx-rt-barra .vx-rt-modelos { color:var(--vx-teal-br); font-weight:600; white-space:nowrap; padding:0 8px; gap:4px; }
.vx-rt-barra .vx-rt-modelos.on, .vx-rt-barra .vx-rt-modelos:hover { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); }
/* painel de gerenciar modelos (salvar novo, renomear, atualizar, excluir) */
.vx-rt-modger { display:flex; flex-direction:column; gap:6px; padding:10px 12px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--vx-border); }
.vx-rt-modger .tit { font-size:11.5px; color:var(--vx-muted); margin-top:4px; }
.vx-rt-modger .vazio { font-size:12px; color:var(--vx-muted); }
.vx-rt-modger .ln { display:flex; align-items:center; gap:6px; }
.vx-rt-modger .ln input { flex:1 1 auto; min-width:0; height:32px; padding:0 10px; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-bg-2); color:var(--vx-text); font-size:13px; }
.vx-rt-modger .ln button { height:32px; padding:0 12px; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:transparent; color:var(--vx-text); cursor:pointer; font-size:12.5px; white-space:nowrap; }
.vx-rt-modger .ln button:hover { background:rgba(255,255,255,.08); }
.vx-rt-modger .ln button.ok { background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); font-weight:600; border-color:transparent; }
.vx-rt-modger .ln button.ok:disabled { opacity:.5; cursor:default; }
.vx-rt-modger .ln button.del { color:#ff8a8a; padding:0 8px; }
.vx-rt-modger .ln button.del:hover { background:rgba(255,107,107,.14); }
.vx-rt-barra .ia:disabled { opacity:.6; cursor:progress; }
.vx-rt-link { display:flex; gap:6px; align-items:center; padding:6px 9px; border-bottom:1px solid var(--vx-border); }
.vx-rt-link input { flex:1; min-width:0; background:var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:calc(6px * var(--vx-raio, 1));
  color:var(--vx-text); font:inherit; font-size:12.5px; height:28px; padding:0 8px; outline:none; }
.vx-rt-link button { background:transparent; border:1px solid var(--vx-border); border-radius:calc(6px * var(--vx-raio, 1)); color:var(--vx-muted);
  font:inherit; font-size:12px; height:28px; padding:0 10px; cursor:pointer; }
.vx-rt-link button.ok { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-rt-link button:disabled { opacity:.5; cursor:default; }
/* blocos novos do editor (citação, linha, título, link) — no editor e na proposta */
.vx-rt-area blockquote, .vx-pp-note blockquote { margin:6px 0 8px; padding:6px 12px; border-left:3px solid var(--vx-teal);
  background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); border-radius:0 calc(6px * var(--vx-raio, 1)) calc(6px * var(--vx-raio, 1)) 0; }
.vx-rt-area hr, .vx-pp-note hr { border:0; border-top:1px solid var(--vx-border); margin:10px 0; }
.vx-rt-area h3, .vx-pp-note h3 { font-size:1.15em; margin:4px 0 6px; }
.vx-rt-area a, .vx-pp-note a { color:var(--vx-teal-br); }
:root.vx-light .vx-rt-barra button:hover { background:rgba(15,23,42,.06); }

/* ══ CONTATOS DO CLIENTE ═══════════════════════════════════════════════════════════════════ */
.vx-ct-vazio { padding:22px 14px; text-align:center; border:1px dashed var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); }
.vx-ct-vazio b { display:block; font-size:13.5px; color:var(--vx-text); margin-bottom:5px; }
.vx-ct-vazio span { font-size:12px; color:var(--vx-muted); }
.vx-ct-linha { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--vx-border); }
.vx-ct-linha.off { opacity:.5; }
.vx-ct-info { flex:1; min-width:0; }
.vx-ct-info .n { font-size:13.5px; color:var(--vx-text); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vx-ct-info .cg { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:var(--vx-teal-soft);
  border:1px solid var(--vx-border); border-radius:calc(5px * var(--vx-raio, 1)); padding:1px 6px; }
.vx-ct-info .cg.off { color:var(--vx-faint); }
.vx-ct-info .d { display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--vx-muted); margin-top:3px; }
.vx-ct-info .niver { color:var(--vx-teal-soft); margin-left:4px; }
.vx-ct-info .aviso { color:#e0a03a; }
.vx-ct-acoes { display:flex; gap:2px; }
.vx-ct-form { border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); padding:12px; margin-top:12px; }
.vx-ct-formrow { display:grid; gap:10px; grid-template-columns:1fr 1fr; margin-bottom:8px; }
@media (max-width:620px) { .vx-ct-formrow { grid-template-columns:1fr; } }
.vx-cli-ctd { align-self:center; font-size:11px; font-weight:600; color:var(--vx-teal-soft);
  background:color-mix(in srgb, var(--vx-teal-br) 13%, transparent); border-radius:calc(9px * var(--vx-raio, 1)); padding:1px 6px; margin-left:-4px; }

/* ══ ENVIAR PROPOSTA — destinatarios de tres fontes numa lista so ══════════════════════════ */
.vx-env-sec { font-size:11px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.6px * var(--vx-tracking, 1)); color:var(--vx-muted);
  margin:16px 0 8px; display:flex; align-items:center; gap:8px; }
.vx-env-sec span { text-transform:none; letter-spacing:0; color:var(--vx-teal-soft); font-size:11.5px; }
.vx-env-vazio { font-size:12px; color:var(--vx-faint); padding:12px; border:1px dashed var(--vx-border);
  border-radius:calc(10px * var(--vx-raio, 1)); text-align:center; }
.vx-env-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vx-env-chip { display:inline-flex; align-items:center; gap:6px; max-width:100%;
  border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); padding:4px 6px 4px 11px; font-size:12px; }
.vx-env-chip b { font-weight:600; color:var(--vx-text); }
.vx-env-chip i { font-style:normal; color:var(--vx-faint); font-size:11px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:190px; }
.vx-env-chip em { font-style:normal; cursor:pointer; color:var(--vx-faint); padding:0 4px; border-radius:50%; }
.vx-env-chip em:hover { color:#ff6b6b; background:rgba(255,107,107,.14); }
.vx-env-limpar { font-size:11px; color:var(--vx-faint); cursor:pointer; text-decoration:underline; margin-left:2px; }
.vx-env-limpar:hover { color:var(--vx-teal-soft); }
.vx-env-fonte { margin-top:12px; }
.vx-env-fonte > label { display:block; font-size:11.5px; color:var(--vx-muted); margin-bottom:5px; }
.vx-env-hint { font-size:11px; color:var(--vx-faint); margin-top:6px; }
.vx-env-achados { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); margin-top:6px;
  max-height:196px; overflow-y:auto; }
.vx-env-achados .it { padding:7px 11px; cursor:pointer; border-bottom:1px solid var(--vx-border); }
.vx-env-achados .it:last-child { border-bottom:none; }
.vx-env-achados .it:hover { background:rgba(255,255,255,.05); }
.vx-env-achados .it b { display:block; font-size:12.5px; font-weight:600; color:var(--vx-text); }
.vx-env-achados .it span { font-size:11px; color:var(--vx-faint); }
:root.vx-light .vx-env-achados .it:hover { background:rgba(15,23,42,.05); }

/* ══ AMBIENTES DA IA — por comodo, nao em fila ═════════════════════════════════════════════ */
.vx-amb-grupo { margin-bottom:10px; }
.vx-amb-grupo .cab { display:flex; align-items:center; gap:9px; margin:0 0 5px 2px; }
.vx-amb-grupo .cab .t { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.7px * var(--vx-tracking, 1)); color:var(--vx-muted); }
.vx-amb-grupo .cab .tudo { font-size:10.5px; color:var(--vx-faint); cursor:pointer; text-decoration:underline; }
.vx-amb-grupo .cab .tudo:hover { color:var(--vx-teal-soft); }
/* cada interruptor na sua linha: espremidos, a frase de um encostava no controle do outro */
.vx-amb-modos { display:flex; flex-direction:column; gap:2px; margin-top:10px;
  border-top:1px solid var(--vx-border); padding-top:10px; }

/* ══ INTELLIGENCE — o que nao e' urgente vira uma tira, nao doze cards ══════════════════════ */
.vx-intel-mais { display:flex; align-items:center; gap:10px; cursor:pointer; margin-top:10px;
  padding:9px 13px; border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); flex-wrap:wrap; }
.vx-intel-mais:hover { border-color:var(--vx-teal-soft); }
.vx-intel-mais b { font-size:12.5px; font-weight:600; color:var(--vx-text); }
.vx-intel-mais .d { font-size:11.5px; color:var(--vx-faint); flex:1; min-width:0; }
.vx-intel-mais .ch { font-size:11px; color:var(--vx-teal-soft); }
.vx-intel-badge.opor { background:color-mix(in srgb, var(--vx-teal-br) 13%, transparent); color:var(--vx-teal-soft); }
.vx-intel-lista { display:flex; flex-direction:column; margin-top:6px;
  border:1px solid var(--vx-border); border-radius:calc(11px * var(--vx-raio, 1)); overflow:hidden; }
.vx-intel-lista .lin { display:flex; align-items:center; gap:10px; padding:9px 13px;
  border-bottom:1px solid var(--vx-border); }
.vx-intel-lista .lin:last-child { border-bottom:none; }
.vx-intel-lista .t { flex:1; min-width:0; }
.vx-intel-lista .t b { display:block; font-size:12.5px; font-weight:600; color:var(--vx-text); }
.vx-intel-lista .t span { font-size:11.5px; color:var(--vx-muted); }

/* ── OS AVISOS DA INÍCIO NO TELEFONE ──────────────────────────────────────────────────────────
   Mesma armadilha das outras fileiras, e na PRIMEIRA tela que abre. Na barra "OPORTUNIDADE · 7
   ponto(s) sem urgência · [resumo] · ▼ ver", o resumo tem flex:1 (base 0) ao lado de tres irmaos
   que nao encolhem: media 27px de largura por 66px de altura — "7 material(is) sem preco" descendo
   uma palavra por linha. E a linha de dentro (.lin) e' pior: nem flex-wrap tem, entao com os dois
   botoes do lado o texto ficava com 170px e 153px de ALTURA, sem chance de quebrar.
   Base para o texto e' o que faz a quebra acontecer; sem ela flex-wrap nao serve de nada. */
@media (max-width: 600px) {
  .vx-intel-mais .d { flex: 1 1 100%; }
  .vx-intel-lista .lin { flex-wrap: wrap; row-gap: 8px; }
  .vx-intel-lista .t { flex: 1 1 100%; }
  .vx-intel-go { flex: 1 1 auto; min-height: 40px; }
}

/* etiqueta "ja esta neste grupo" no card da carteira */
.vx-cli-grupos { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:9px;
  font-size:10.5px; color:var(--vx-teal-soft); }
.vx-cli-grupos span { border:1px solid color-mix(in srgb, var(--vx-teal-br) 28%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent);
  border-radius:calc(6px * var(--vx-raio, 1)); padding:1px 6px; max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.vx-cli-grupos .mais { border-color:var(--vx-border); background:transparent; color:var(--vx-faint); }

/* toggle de unidade da proposta publica (m/kg <-> in/lb) */
.vx-pp-unid { display:inline-flex; gap:2px; margin:10px 0 2px; padding:2px;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--vx-pill, 999px); }
.vx-pp-unid button { background:transparent; border:none; border-radius:var(--vx-pill, 999px); cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); padding:4px 12px; color:rgba(255,255,255,.6); }
.vx-pp-unid button.on { background:rgba(255,255,255,.14); color:#fff; font-weight:600; }

/* ══ MODELO TECNICO DA PROPOSTA — tabela por lote ══════════════════════════════════════════
   Densidade e' o ponto: quem le esta tela ja conhece o material e quer medida, peso e preco por
   unidade. Nada de foto grande entre ele e o numero. */
.vx-tec { max-width:1080px; margin:0 auto; padding:26px 16px 40px; }
.vx-tec-sala { margin-bottom:34px; }
.vx-tec-sala h3 { font-size:19px; font-weight:600; letter-spacing:calc(.2px * var(--vx-tracking, 1)); margin:0 0 12px;
  color:#fff; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.vx-tec-sala h3 span { font-size:12.5px; font-weight:400; color:rgba(255,255,255,.45); }
.vx-tec-lote { border:1px solid rgba(255,255,255,.13); border-radius:calc(13px * var(--vx-raio, 1)); overflow:hidden;
  margin-bottom:14px; background:rgba(255,255,255,.025); }
/* lote inteiro fora: esmaece o bloco, mas NAO some -- ver o comentario no Razor */
.vx-tec-lote.todo-fora { opacity:.45; }
/* CENTRO e nao baseline: com a capa ao lado, o baseline alinhava o texto pela ULTIMA linha da
   imagem e o nome do bundle caia no pe dela. Alinhado pelo meio, nome e foto se leem como uma
   coisa so -- que e o que eles sao. */
.vx-tec-lote .cab { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 15px 6px; }
.vx-tec-lote .cab .id { flex:1; min-width:0; font-size:12px; letter-spacing:calc(.5px * var(--vx-tracking, 1));
  text-transform:var(--vx-caixa, uppercase); color:rgba(255,255,255,.55); }
.vx-tec-lote .cab .v { text-align:right; }
.vx-tec-lote .cab .v b { display:block; font-size:17px; font-weight:600; color:#fff; }
.vx-tec-lote .cab .v span { font-size:11.5px; color:rgba(255,255,255,.5); }
.vx-tec-lote .meta { padding:0 15px 10px; font-size:12px; color:rgba(255,255,255,.45); }
/* a tabela rola SOZINHA no celular; a pagina nunca anda de lado */
.vx-tec-lote .tab-wrap { overflow-x:auto; }
.vx-tec-tab { width:100%; border-collapse:collapse; font-size:12.5px;
  font-variant-numeric:tabular-nums; }
.vx-tec-tab th { text-align:right; font-weight:500; font-size:10.5px; text-transform:var(--vx-caixa, uppercase);
  letter-spacing:calc(.6px * var(--vx-tracking, 1)); color:rgba(255,255,255,.4); padding:7px 15px;
  border-top:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10); }
.vx-tec-tab th:first-child, .vx-tec-tab td.n { text-align:left; }
.vx-tec-tab td { text-align:right; padding:8px 15px; color:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(255,255,255,.06); }
.vx-tec-tab tbody tr { cursor:pointer; }
.vx-tec-tab tbody tr:hover { background:rgba(255,255,255,.05); }
.vx-tec-tab tbody tr.sel { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-tec-tab tbody tr.sel td { color:#fff; }
.vx-tec-tab tbody tr.fora { cursor:default; }
/* riscada e' a informacao: a peca esta saindo, e quem viu ontem procura por ela hoje */
.vx-tec-tab tbody tr.fora td { color:rgba(255,255,255,.32); text-decoration:line-through; }
.vx-tec-tab td.st { text-align:right; text-decoration:none !important; }
.vx-tec-tab td.st .fora { font-size:10.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.5px * var(--vx-tracking, 1));
  color:#e0a03a; text-decoration:none; display:inline-block; }
.vx-tec-tab td.st .ok { color:var(--vx-teal-br, var(--vx-teal-br)); font-weight:700; }
.vx-tec-pegar { display:block; width:calc(100% - 30px); margin:11px 15px 14px; padding:9px;
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 45%, transparent); border-radius:calc(9px * var(--vx-raio, 1)); background:transparent;
  color:var(--vx-teal-br); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.vx-tec-pegar:hover { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-tec-pegar.on { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:#fff; }

/* fotos por lote no modelo tecnico — fechadas por padrao (ver o comentario no Razor) */
.vx-tec-fotos { padding:0 15px 8px; }
.vx-tec-fotos > button { background:transparent; border:1px solid rgba(255,255,255,.16);
  border-radius:calc(8px * var(--vx-raio, 1)); color:rgba(255,255,255,.62); font:inherit; font-size:11.5px;
  padding:5px 11px; cursor:pointer; }
.vx-tec-fotos > button:hover { border-color:rgba(255,255,255,.34); color:#fff; }
.vx-tec-fotos > button.on { background:rgba(255,255,255,.10); color:#fff; }
.vx-tec-fotos .tira { display:flex; gap:7px; overflow-x:auto; padding:9px 0 2px; }
.vx-tec-fotos .tira img { width:88px; height:64px; object-fit:cover; border-radius:calc(7px * var(--vx-raio, 1));
  cursor:zoom-in; flex:0 0 auto; background:#12161c; }
.vx-tec-tab td.n .lupa { cursor:zoom-in; border-bottom:1px dotted rgba(255,255,255,.35); }
.vx-tec-tab td.n .lupa:hover { color:#fff; border-bottom-color:#fff; }
.vx-tec-tab tbody tr.fora td.n .lupa { text-decoration:none; }
/* aviso de moeda no dialogo de preco do material (grava sempre em R$) */
.vx-of-avisobrl { font-size:11.5px; line-height:1.5; color:#e0a03a; margin:8px 0 2px;
  padding:8px 11px; border-radius:calc(8px * var(--vx-raio, 1)); background:rgba(224,160,58,.10);
  border:1px solid rgba(224,160,58,.28); }

/* ══ TIMBRE DO MODELO TECNICO — claro, de documento ════════════════════════════════════════
   A vitrine continua escura (la a foto e' o argumento e fundo claro rouba a pedra). Aqui o claro
   e' o ponto: faz a peca parecer DOCUMENTO e nao pagina de campanha, e o comprador de volume
   trata os dois de maneiras diferentes. */
.vx-tec-timbre { display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; max-width:1080px; margin:18px auto 0; padding:14px 18px;
  background:#fff; border-radius:calc(12px * var(--vx-raio, 1)); box-shadow:var(--vx-sombra, 0 10px 30px -18px rgba(0,0,0,.5));
  border-bottom:3px solid var(--vx-teal-escuro, #138a63); }
.vx-tec-timbre .marca { display:flex; align-items:center; gap:13px; min-width:0; }
.vx-tec-timbre .marca img { height:44px; width:auto; max-width:190px; object-fit:contain; display:block; }
.vx-tec-timbre .marca .txt { min-width:0; }
.vx-tec-timbre .marca b { display:block; font-size:14px; color:#1a1d27; letter-spacing:calc(.3px * var(--vx-tracking, 1));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:280px; }
.vx-tec-timbre .marca span { font-size:11.5px; color:#6b7480; }
.vx-tec-timbre .ctrl { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.vx-tec-timbre .grp { display:inline-flex; border:1px solid #d8dde5; border-radius:calc(8px * var(--vx-raio, 1)); overflow:hidden; }
.vx-tec-timbre .grp button { background:#fff; border:none; cursor:pointer; font:inherit;
  font-size:11px; font-weight:600; letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:#6b7480; padding:7px 13px; }
.vx-tec-timbre .grp button + button { border-left:1px solid #d8dde5; }
.vx-tec-timbre .grp button:hover { background:#f4f6fa; color:#1a1d27; }
.vx-tec-timbre .grp button.on { background:var(--vx-teal-escuro, #138a63); color:#fff; }

/* ══ "COMO O CLIENTE VE" GANHA A LINHA INTEIRA ═════════════════════════════════════════════
   Ele nasceu com a largura dos campos de NUMERO ao lado (comprimento, largura, qtd) porque divide
   a classe com eles -- e ali cabem sete letras. "CHAPA DOLOMITA BRANCO MATARAZZO 3,0CM POLIDA"
   virava "CHAPA DOLOMITA BRANC": o vendedor digitava um nome que nao conseguia RELER para
   conferir, num campo cujo unico proposito e ser lido pelo cliente.
   Linha propria e nao so mais largo: espremido entre os numeros ele voltaria a encolher na
   primeira tela menor. */
.vx-of-item .campos > span.nome { flex:1 1 100%; min-width:0; align-items:baseline; }
.vx-of-item .campos > span.nome > label { flex:0 0 auto; white-space:nowrap; }
.vx-of-num.nome { width:auto; min-width:0; flex:1 1 auto; max-width:none; text-align:left; }

/* ══ ABAS FOTO | VIDEO DO LOTE (modelo tecnico) ════════════════════════════════════════════ */
.vx-tec-abas { display:flex; gap:6px; padding:0 15px 8px; }
.vx-tec-abas button { display:inline-flex; align-items:center; gap:6px; background:transparent;
  border:1px solid rgba(255,255,255,.16); border-radius:calc(8px * var(--vx-raio, 1)); color:rgba(255,255,255,.62);
  font:inherit; font-size:11.5px; padding:5px 11px; cursor:pointer; }
.vx-tec-abas button:hover { border-color:rgba(255,255,255,.34); color:#fff; }
.vx-tec-abas button.on { background:rgba(255,255,255,.10); color:#fff; }
.vx-tec-abas button i { font-style:normal; font-size:10px; color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.10); border-radius:calc(5px * var(--vx-raio, 1)); padding:0 5px; }
.vx-tec-tira { display:flex; gap:7px; overflow-x:auto; padding:0 15px 10px; }
.vx-tec-tira img { width:96px; height:70px; object-fit:cover; border-radius:calc(7px * var(--vx-raio, 1));
  cursor:zoom-in; flex:0 0 auto; background:#12161c; }
.vx-tec-video { padding:0 15px 12px; }
.vx-tec-video video { width:100%; max-height:56vh; border-radius:calc(9px * var(--vx-raio, 1)); background:#000; display:block; }
.vx-tec-video .leg { margin-top:6px; font-size:12px; color:rgba(255,255,255,.55); }

/* ══ FOTO E VIDEO DO CAVALETE (no cabecalho do grupo, nas duas telas da oferta) ═════════════ */
.vx-pi-mid { cursor:pointer; user-select:none; font-size:11.5px; line-height:1;
  color:var(--vx-muted); border:1px solid var(--vx-border); border-radius:calc(7px * var(--vx-raio, 1)); padding:4px 8px; }
.vx-pi-mid:hover { color:var(--vx-teal-soft); border-color:var(--vx-teal-soft); }
.vx-pi-mid.on { background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); color:var(--vx-teal-soft); border-color:var(--vx-teal-soft); }
.vx-pi-midpanel { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 10px; padding:10px 12px; border:1px dashed var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); }
.vx-pi-midpanel .dica { font-size:11.5px; color:var(--vx-faint); }
.vx-pi-midpanel .lista { display:flex; gap:6px; flex-wrap:wrap; flex-basis:100%; }
.vx-pi-midpanel .it { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  color:var(--vx-muted); border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px); padding:3px 6px 3px 10px; }
.vx-pi-midpanel .it b { font-weight:500; color:var(--vx-text); max-width:190px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-pi-midpanel .it em { font-style:normal; cursor:pointer; color:var(--vx-faint); padding:0 4px; border-radius:50%; }
.vx-pi-midpanel .it em:hover { color:#ff6b6b; background:rgba(255,107,107,.12); }
.vx-pi-mid.off { cursor:default; opacity:.5; border-style:dashed; }
.vx-pi-mid.off:hover { color:var(--vx-muted); border-color:var(--vx-border); }
/* a capa do cavalete no cabecalho do grupo: um pouco maior que a miniatura de chapa, porque ela
   representa o CONJUNTO fechado e e' o unico visual quando o grupo esta recolhido */
.vx-pi-grupo .thumb.cap { width:34px; height:34px; cursor:zoom-in; }

/* midia do cavalete na VITRINE: o video ocupa a largura, porque aqui ele e' o argumento */
.vx-cr-cav-midia { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.vx-cr-cav-midia video { width:100%; max-width:720px; max-height:58vh; border-radius:calc(12px * var(--vx-raio, 1));
  background:#000; display:block; }
.vx-cr-cav-midia img { height:120px; width:auto; max-width:100%; object-fit:cover;
  border-radius:calc(10px * var(--vx-raio, 1)); cursor:zoom-in; background:#12161c; }
/* chapa dentro de pacote: o preco que decide e' o do conjunto, na faixa acima */
.vx-cr-ch-txt .pr.pacote { font-size:12px; font-weight:500; letter-spacing:calc(.4px * var(--vx-tracking, 1));
  text-transform:var(--vx-caixa, uppercase); color:var(--vx-teal-soft); opacity:.85; }
/* a miniatura de um MONTE na bandeja: o numero diz quantas pecas saem juntas se ela sair */
.vx-cr-mini.monte { outline:2px solid color-mix(in srgb, var(--vx-teal-br) 45%, transparent); outline-offset:-2px; }
/* A INSIGNIA FICA DENTRO DA MINIATURA. Em bottom/right negativos ela estourava o container --
   e a tira tem overflow-x:auto, o que faz o navegador criar tambem a barra VERTICAL assim que
   algo passa de um pixel para fora. Um numero de dois digitos nao vale uma barra de rolagem. */
.vx-cr-mini.monte i { position:absolute; right:1px; bottom:1px; font-style:normal;
  font-size:9.5px; font-weight:700; line-height:1; padding:2px 4px; border-radius:var(--vx-pill, 999px);
  background:var(--vx-teal-br, var(--vx-teal-br)); color:var(--vx-sobre-destaque, #04110c); }

/* ══ O VORTEX ENGOLE A TELA ═════════════════════════════════════════════════════════════════
   Ao entrar na proposta, o orbe vem em direcao a quem olha e cobre tudo. Nao e' enfeite: e' o
   corte entre "voce esta na porta" e "voce esta dentro". Sem ele o portao simplesmente some e a
   proposta pisca do nada -- o cliente nao sente que ATRAVESSOU nada.
   O buraco nasce do tamanho e do lugar do orbe e cresce ate cobrir a janela. Cresce por SCALE e
   nao por width/height: scale roda na GPU e nao recalcula layout, entao a coisa acontece a 60fps
   ate no celular do cliente, que e' onde a proposta mais abre. */
.vx-gate-buraco {
  position:fixed; left:50%; top:19vh; width:58px; height:58px; margin:-29px 0 0 -29px;
  border-radius:50%; z-index:9000; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, #070b10 0%, #070b10 50%,
             var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 90%, transparent)) 60%, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 28%, transparent)) 73%, transparent 82%);
  animation: vx-engolir 1.15s cubic-bezier(.5,0,.3,1) forwards;
}
/* 62 e' o fator que faz um circulo de 58px cobrir a diagonal de uma tela grande com folga */
@keyframes vx-engolir {
  0%   { transform:scale(.2)  rotate(0deg);   opacity:0; }
  14%  { transform:scale(1)   rotate(70deg);  opacity:1; }
  /* um respiro no meio: o orbe se APROXIMA antes de abrir. Sem ele a curva era um salto so, e
     rapido demais para o olho registrar que a coisa veio em direcao a quem olha. */
  46%  { transform:scale(4.5) rotate(230deg); opacity:1; }
  100% { transform:scale(62)  rotate(560deg); opacity:1; }
}
/* enquanto o buraco cresce, o conteudo do portao e' PUXADO para dentro dele -- some indo para o
   centro, e nao apagando no lugar; e a diferenca entre ser engolido e ser desligado */
.vx-gate.engolindo .vx-gate-title,
.vx-gate.engolindo .vx-gate-sub,
.vx-gate.engolindo .vx-gate-form,
.vx-gate.engolindo .vx-cine-eyebrow { animation: vx-sugado .72s ease-in forwards; }
@keyframes vx-sugado { to { transform:scale(.72) translateY(-40px); opacity:0; filter:blur(3px); } }
/* o proprio orbe acelera antes de desaparecer sob o buraco */
.vx-gate.engolindo .vx-cine-mark { animation: vx-mark-rot .35s linear infinite; }
.vx-gate.engolindo { pointer-events:none; }   /* nao da' para clicar duas vezes no meio do corte */

/* quem pediu menos movimento recebe o corte sem o giro nem o sugado */
@media (prefers-reduced-motion: reduce) {
  .vx-gate-buraco { animation:vx-engolir-simples .3s linear forwards; }
  @keyframes vx-engolir-simples { from { opacity:0; transform:scale(62); } to { opacity:1; transform:scale(62); } }
  .vx-gate.engolindo .vx-gate-title, .vx-gate.engolindo .vx-gate-sub,
  .vx-gate.engolindo .vx-gate-form, .vx-gate.engolindo .vx-cine-eyebrow { animation:none; opacity:0; }
  .vx-gate.engolindo .vx-cine-mark { animation:none; }
}

/* ══ A MINIATURA DO MONTE, no cabecalho do lote (modelo tecnico) ════════════════════════════
   A referencia poe a foto ao lado da tabela, e ela tem razao: quem le esta tela ja conhece o
   material, mas ainda quer VER o monte que esta comprando. Esconder a unica imagem atras de um
   botao e' pedir um clique para mostrar o que a pessoa veio ver. */

/* A CAPA DO CAVALETE: pequena, com anel, dentro do cabecalho.
   Ela ja teve uma coluna inteira e virou o maior elemento do bloco -- mas quem manda nesta tela e
   a TABELA. A imagem esta aqui para dizer "e este monte", nao para tomar o lugar do numero. */
.vx-tec-lote .cab .capa { width:46px; height:46px; object-fit:cover; border-radius:calc(9px * var(--vx-raio, 1));
  flex:0 0 auto; cursor:zoom-in; background:#12161c; display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 0 3px color-mix(in srgb, var(--vx-teal-br) 20%, transparent);
  transition:box-shadow .18s, transform .18s; }
.vx-tec-lote .cab .capa:hover { transform:scale(1.06);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--vx-teal-br) 28%, transparent); }
/* selo de "irmao de proposta publica" no card do cockpit */
.vx-pc-irmao { font-size:9.5px; letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:#c084fc;
  background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.32);
  border-radius:calc(5px * var(--vx-raio, 1)); padding:1px 5px; white-space:nowrap; }

/* Seletor de voz da narração (escolha da proposta; a de Configurações é o padrão da casa). */
.vx-narr-voz { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:2px 0 10px; }
.vx-narr-voz .lb { font-size:11px; font-weight:700; letter-spacing:calc(.06em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-narr-voz .vx-sel { flex:1 1 320px; max-width:520px; font:inherit; font-size:12.5px; height:34px; padding:0 10px;
  border-radius:calc(9px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-surface); color:var(--vx-text); cursor:pointer; outline:none; }
.vx-narr-voz .vx-sel:focus { border-color:var(--vx-teal); }
:root.vx-light .vx-narr-voz .vx-sel { color-scheme:light; }

/* ── TAGS DO CLIENTE ────────────────────────────────────────────────────────────────────────────
   Chip que vale como filtro (barra) e como rótulo (card). A cor vem da tag, por --tg: apagada
   quando o chip está solto, acesa quando está ligado — assim a barra inteira não vira arco-íris e
   ainda dá para ver de longe o que está filtrando. */
.vx-cli-tagsbar { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:10px 0 2px; }
.vx-cli-tagsbar .lbl { font-size:10.5px; font-weight:700; letter-spacing:calc(.08em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); margin-right:2px; }
.vx-tagchip { --tg:var(--vx-teal); display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:11.5px; font-weight:600;
  line-height:1; padding:5px 10px; border-radius:var(--vx-pill, 99px); cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
  border:1px solid var(--vx-border); background:transparent; color:var(--vx-muted); }
.vx-tagchip i { width:8px; height:8px; border-radius:50%; background:var(--tg); flex:0 0 auto; }
.vx-tagchip:hover { border-color:var(--tg); color:var(--vx-text); }
.vx-tagchip.on { border-color:var(--tg); color:#fff; background:color-mix(in srgb, var(--tg) 24%, transparent); }
.vx-tagchip b { font-size:10px; font-weight:700; opacity:.75; }
.vx-tagchip.grupo { --tg:#a855f7; }
.vx-tagchip.mini { font-size:10.5px; padding:3px 8px; cursor:default; }
.vx-tagchip.mini.add { cursor:pointer; color:var(--vx-faint); border-style:dashed; }
.vx-tagchip.mini.add:hover { color:var(--vx-teal-soft); border-color:var(--vx-teal); }
/* ciclo de compra do cliente: discreto sem ciclo, âmbar quando atrasa, vermelho quando atrasa muito */
.vx-tagchip.mini.ciclo { cursor:pointer; color:var(--vx-faint); }
.vx-tagchip.mini.ciclo:hover { color:var(--vx-text); border-color:var(--vx-muted); }
.vx-tagchip.mini.ciclo.aviso { color:#f3c969; border-color:rgba(243,201,105,.45); background:rgba(243,201,105,.10); }
.vx-tagchip.mini.ciclo.tarde { color:#ff8a8a; border-color:rgba(255,107,107,.5); background:rgba(255,107,107,.12); }
/* PERTO DE VENCER é oportunidade, não problema: verde da casa, o mesmo tom do que está em dia.
   Usar âmbar aqui misturaria com o "atrasado" e o vendedor pararia de distinguir os dois. */
.vx-tagchip.mini.ciclo.perto { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-cli-tags { display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:10px; }
.vx-cli-tagpick { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; padding:8px; border-radius:calc(10px * var(--vx-raio, 1));
  border:1px solid var(--vx-border); background:rgba(255,255,255,.03); }
.vx-cli-tagpick .vazio { font-size:11px; color:var(--vx-faint); }
/* painel de administração: nome, cor e quantos clientes usam */
.vx-cli-tagadm { margin:10px 0 2px; padding:12px 14px; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
.vx-cli-tagadm .h { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.vx-cli-tagadm .h b { font-size:13px; }
.vx-cli-tagadm .h span { font-size:11.5px; color:var(--vx-faint); }
.vx-cli-tagadm .linhas { display:flex; flex-direction:column; gap:7px; }
.vx-cli-tagadm .ln { display:flex; align-items:center; gap:8px; }
.vx-cli-tagadm .cor { width:34px; height:30px; padding:0; border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); background:transparent; cursor:pointer; }
.vx-cli-tagadm .nm { flex:1 1 220px; max-width:340px; font:inherit; font-size:12.5px; height:30px; padding:0 10px;
  border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-bg); color:var(--vx-text); outline:none; }
.vx-cli-tagadm .nm:focus { border-color:var(--vx-teal); }
.vx-cli-tagadm .pctwrap { display:inline-flex; align-items:center; gap:3px; }
.vx-cli-tagadm .pctwrap b { font-size:11px; color:var(--vx-faint); font-weight:600; }
.vx-cli-tagadm .pct { width:58px; font:inherit; font-size:12.5px; height:30px; padding:0 6px; text-align:right;
  border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:var(--vx-bg); color:var(--vx-text); outline:none; }
.vx-cli-tagadm .pct:focus { border-color:var(--vx-teal); }
.vx-cli-tagadm .qt { font-size:11px; color:var(--vx-faint); }
.vx-cli-tagadm .del, .vx-cli-tagadm .add { font:inherit; font-size:11.5px; padding:5px 10px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer;
  border:1px solid var(--vx-border); background:transparent; color:var(--vx-muted); }
.vx-cli-tagadm .del:hover { border-color:#ff6b6b; color:#ff8585; }
.vx-cli-tagadm .add { border-color:color-mix(in srgb, var(--vx-teal) 45%, transparent); color:var(--vx-teal-soft); font-weight:700; }
.vx-cli-tagadm .add:disabled { opacity:.45; cursor:default; }
.vx-cli-filtros .limpar.pri { border-color:color-mix(in srgb, var(--vx-teal) 45%, transparent); color:var(--vx-teal-soft); font-weight:700; }

/* Cadastro de prospect à mão (Prospecção › Cadastrar à mão). */
.vx-man-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:10px 12px; }
.vx-man-grid .vx-man-wide { grid-column:1 / -1; }
.vx-man-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* ── TUTORIAL DO IMPULSO ────────────────────────────────────────────────────────────────────────
   Uma ideia por tela: arte grande à esquerda, texto curto à direita, e a barrinha de passos em
   cima. Nada de scroll dentro do passo — se não coube, o passo era grande demais. */
.vx-tuto { max-width:1100px; margin:0 auto; padding:18px 20px 40px; }
.vx-tuto-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vx-tuto-cab h1 { font-size:22px; font-weight:600; margin:0; }
.vx-tuto-cab p { font-size:13px; color:var(--vx-muted); margin:4px 0 0; }
.vx-tuto-cabacts { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vx-tuto-btn { font:inherit; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:var(--vx-pill, 99px); cursor:pointer;
  border:1px solid var(--vx-border); background:transparent; color:var(--vx-muted); transition:.15s; display:inline-flex; align-items:center; gap:6px; }
.vx-tuto-btn:hover { color:var(--vx-text); border-color:var(--vx-muted); }
.vx-tuto-btn.on { color:var(--vx-teal-soft); border-color:var(--vx-teal); background:color-mix(in srgb, var(--vx-teal) 14%, transparent); }
.vx-tuto-btn.pri { background:linear-gradient(135deg,#17b184,var(--vx-teal-br)); color:var(--vx-sobre-destaque, #04110c); border:none; font-weight:700; }
.vx-tuto-btn.ir { border-color:color-mix(in srgb, var(--vx-teal) 45%, transparent); color:var(--vx-teal-soft); }
.vx-tuto-auto { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--vx-muted); cursor:pointer; }
.vx-tuto-barra { display:flex; gap:6px; margin:16px 0 14px; }
.vx-tuto-barra .p { flex:1; height:5px; border-radius:var(--vx-pill, 99px); background:var(--vx-border); cursor:pointer; transition:.2s; }
.vx-tuto-barra .p.ok { background:color-mix(in srgb, var(--vx-teal) 45%, transparent); }
.vx-tuto-barra .p.on { background:var(--vx-teal); }
.vx-tuto-aviso { padding:10px 14px; border-radius:calc(10px * var(--vx-raio, 1)); margin-bottom:14px; font-size:12.5px;
  color:#f3c969; background:rgba(243,201,105,.10); border:1px solid rgba(243,201,105,.35); }
.vx-tuto-aviso a { color:inherit; text-decoration:underline; }
.vx-tuto-palco { display:grid; grid-template-columns:minmax(260px,1fr) minmax(300px,1.1fr); gap:24px; align-items:center;
  padding:26px; border:1px solid var(--vx-border); border-radius:calc(16px * var(--vx-raio, 1)); background:var(--vx-surface); min-height:320px;
  animation:vx-tuto-in .35s ease-out; }
@keyframes vx-tuto-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .vx-tuto-palco { animation:none; } }
@media (max-width: 860px) { .vx-tuto-palco { grid-template-columns:1fr; } }
.vx-tuto-arte { display:flex; align-items:center; justify-content:center; min-height:220px; }
.vx-tuto-arte .simbolo { font-size:96px; line-height:1; filter:drop-shadow(0 8px 24px color-mix(in srgb, var(--vx-teal-br) 25%, transparent)); }
.vx-tuto-texto .passo { font-size:11px; font-weight:700; letter-spacing:calc(.1em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); }
.vx-tuto-texto h2 { font-size:20px; font-weight:600; margin:6px 0 10px; }
.vx-tuto-texto p { font-size:14.5px; line-height:1.55; color:var(--vx-text); margin:0 0 10px; }
.vx-tuto-texto p.det { font-size:12.5px; color:var(--vx-muted); }
.vx-tuto-texto .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
/* artes */
.vx-tuto-arte .moedas { display:flex; flex-direction:column; gap:7px; width:100%; max-width:280px; }
.vx-tuto-arte .moeda { display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:calc(10px * var(--vx-raio, 1));
  background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal) 25%, transparent); }
.vx-tuto-arte .moeda b { font-size:15px; color:var(--vx-teal-soft); min-width:44px; }
.vx-tuto-arte .moeda span { font-size:12px; color:var(--vx-muted); }
.vx-tuto-arte .ceu { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; width:100%; max-width:320px; }
.vx-tuto-arte .est { display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:calc(9px * var(--vx-raio, 1));
  border:1px solid var(--vx-border); color:var(--vx-faint); font-size:11.5px; }
.vx-tuto-arte .est i { font-style:normal; font-size:15px; }
.vx-tuto-arte .est small { margin-left:auto; font-size:10px; opacity:.7; }
.vx-tuto-arte .est.acesa { color:#f3e08a; border-color:rgba(243,224,138,.45); background:rgba(243,224,138,.10); }
.vx-tuto-arte .bilhete { text-align:center; }
.vx-tuto-arte .bilhete .b { font-size:76px; line-height:1; }
.vx-tuto-arte .bilhete .t { font-size:14px; font-weight:600; margin-top:6px; }
.vx-tuto-arte .bilhete .s { font-size:11.5px; color:var(--vx-faint); margin-top:4px; max-width:260px; }
.vx-tuto-arte .bilhete.tem .b { filter:drop-shadow(0 6px 20px rgba(243,201,105,.4)); }
.vx-tuto-arte .placar { width:100%; max-width:300px; }
.vx-tuto-arte .placar .linha { display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:9px 12px; border-radius:calc(10px * var(--vx-raio, 1)); border:1px solid var(--vx-border); margin-bottom:7px; font-size:12.5px; color:var(--vx-muted); }
.vx-tuto-arte .placar .linha b { font-size:14px; color:var(--vx-text); }
.vx-tuto-arte .placar .linha.eu { border-color:color-mix(in srgb, var(--vx-teal) 40%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); }
.vx-tuto-arte .placar .s { font-size:11.5px; color:var(--vx-faint); }
.vx-tuto-arte .estorno { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; }
.vx-tuto-arte .estorno .ida { color:var(--vx-teal-soft); }
.vx-tuto-arte .estorno .volta { color:#ff8a8a; }
.vx-tuto-arte .estorno .seta { font-size:32px; color:var(--vx-faint); }
.vx-tuto-faq { margin-top:26px; }
.vx-tuto-faq h3 { font-size:15px; font-weight:600; margin:0 0 10px; }
.vx-tuto-faq details { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:10px 14px; margin-bottom:7px; background:var(--vx-surface); }
.vx-tuto-faq summary { cursor:pointer; font-size:13px; font-weight:600; }
.vx-tuto-faq p { font-size:13px; color:var(--vx-muted); margin:8px 0 0; line-height:1.5; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   O SISTEMA DE CONTROLES DO CELULAR

   POR QUE ESTE BLOCO EXISTE
   No telefone, a mesma acao aparecia com seis alturas e cinco raios diferentes NA MESMA TELA:
   medido na Galeria a 375px — botao do cavalete 132x23 e fonte 10,5px, chip de filtro 90x29,
   marcador de selecao 22x22, alternador 46x26 com canto reto, campo 355x40 com canto de 12px,
   icone da barra 44x44 com canto de 11px. E dai que vinha o "botoes e formatos irregulares":
   nao era um botao feio, era a AUSENCIA de uma escala. Nenhum dos 46 blocos @media do arquivo
   aumentava um alvo de toque; cinco DIMINUIAM.

   Aqui a escala e uma so, e vale para todas as telas. Nao e miniatura de desktop: e o mesmo
   desenho, na medida da mao.

     acao   44px  — o que EXECUTA algo (criar oferta, publicar, capturar). Alvo minimo de toque.
     campo  44px  — o que se digita. Mesma altura da acao: as fileiras alinham.
     filtro 38px  — chip de filtro. Mais baixo de proposito: sao muitos e servem para varrer com o
                    olho; 38 ainda e confortavel e nao vira paredao.
     icone  40px  — botao so de simbolo (lixeira, seta, recarregar).
     marca  24px  — caixa de selecao. O QUADRADO tem 24; a AREA DE TOQUE tem 44, por fora.
     raio   12px  — um raio so, menos os chips, que sao pilula por natureza.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --vx-m-acao: 44px;
    --vx-m-campo: 44px;
    --vx-m-filtro: 38px;
    --vx-m-icone: 40px;
    --vx-m-marca: 24px;
    --vx-m-raio: 12px;
    --vx-m-gap: 8px;
  }

  /* ── AÇÃO ───────────────────────────────────────────────────────────────────────────────── */
  .vx-iabtn,
  .vx-btn,
  .vx-prosp-act,
  .vx-of-aplicar,
  .vx-of-modo,
  .vx-pager button,
  .vx-tuto-btn,
  .limpar,
  .vx-perm-tri button,
  .mud-button-root:not(.mud-icon-button) {
    min-height: var(--vx-m-acao);
    border-radius: var(--vx-m-raio);
    font-size: 13px;
    padding-left: 14px; padding-right: 14px;
    line-height: 1.15;
  }
  /* o ícone dentro do botão acompanha o texto, em vez de ficar do tamanho de desktop */
  .vx-iabtn svg, .vx-btn svg, .vx-prosp-act svg { width: 18px; height: 18px; flex: 0 0 auto; }

  /* ── CAMPO ──────────────────────────────────────────────────────────────────────────────── */
  .vx-input,
  select.vx-input,
  textarea.vx-input,
  .vx-of-num {
    min-height: var(--vx-m-campo);
    border-radius: var(--vx-m-raio);
    font-size: 15px;          /* 16px evitaria o zoom do iOS; 15 já não dispara no Android */
  }
  .vx-of-num { padding-left: 10px; padding-right: 10px; }

  /* ── FILTRO ─────────────────────────────────────────────────────────────────────────────── */
  .vx-chip,
  .vx-tagchip,
  .vx-amb-chip {
    min-height: var(--vx-m-filtro);
    display: inline-flex; align-items: center;
    font-size: 12.5px;
    padding: 0 14px;
  }
  .vx-tagchip.mini { min-height: 32px; padding: 0 10px; }
  /* CHIP NAO QUEBRA LINHA POR DENTRO. "Escritorio de arquitetura" virava uma bolha de 56px de
     altura com o texto em tres linhas, ao lado de outra de 38 — a fileira ficava com dentes.
     Numa linha so, todos tem a mesma altura e a fileira rola, que e para isso que ela rola. */
  .vx-chip, .vx-tagchip, .vx-amb-chip { white-space: nowrap; }
  .vx-seg { height: var(--vx-m-filtro); border-radius: var(--vx-pill, 999px); overflow: hidden; }
  .vx-seg button { height: 100%; padding: 0 14px; font-size: 12.5px; }

  /* ── ÍCONE-AÇÃO ─────────────────────────────────────────────────────────────────────────── */
  .vx-gamcfg-del,
  .vx-orbcfg-linha .mv,
  .vx-orbcfg-linha .del,
  .vx-of-refresh {
    width: var(--vx-m-icone); height: var(--vx-m-icone);
    border-radius: calc(10px * var(--vx-raio, 1));
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── MARCADOR ───────────────────────────────────────────────────────────────────────────── */
  /* O quadrado continua discreto (24px); quem cresce é a ÁREA DE TOQUE, por fora, com um
     pseudo-elemento. Assim marcar uma chapa deixa de exigir pontaria sem o cartão ficar poluído. */
  .vx-slab-pick, .vx-cav-pick {
    width: var(--vx-m-marca); height: var(--vx-m-marca);
    position: relative;
  }
  .vx-slab-pick::after, .vx-cav-pick::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .vx-prosp-pick input, .vx-of-itchk input { width: 22px; height: 22px; }

  /* ── A FILEIRA DO CAVALETE ───────────────────────────────────────────────────────────────── */
  /* Esta regra dividia a linha em metades porque o cavalete tinha QUATRO pílulas de ação: duas
     por linha, e a borda direita batia com a do cartão. Ao virarem um menu de ações sobrou UMA
     pílula — e o "metade da linha" deixou de disputar espaço com outro botão e passou a disputar
     com o NOME DA PEDRA. Numa janela de 735px o título encolhia para 69px e "QUARTZITE INFINITY
     WHITE POLISHED" descia letra a letra, enquanto o botão ficava com 391px.

     Agora quem manda é o título: ele tem piso e os botões cedem. Como a fileira já tem
     flex-wrap, quando não cabe todo mundo os botões descem inteiros para a linha de baixo em
     vez de espremer a leitura. */
  .vx-mat-h > .vx-mat-titulo { flex: 1 1 200px; min-width: 200px; }
  .vx-mat-h > .vx-iabtn { flex: 0 1 auto; min-width: 132px; justify-content: center; }
  .vx-mat-h .vx-acoes-wrap .vx-iabtn { min-width: 0; flex: 1 1 auto; justify-content: center; }

  /* ── FILEIRAS QUE ROLAM ─────────────────────────────────────────────────────────────────── */
  /* Elas escondiam metade dos filtros sem dizer que rolavam. O encaixe suave e o respiro no fim
     fazem o próximo chip aparecer PELA METADE — e chip cortado é o convite para arrastar. */
  .vx-chips, .vx-gal-verpor {
    scroll-snap-type: x proximity;
    scroll-padding-left: 10px;
    padding-right: 22px;
    overscroll-behavior-x: contain;
  }
  .vx-chips > *, .vx-gal-verpor > * { scroll-snap-align: start; }

  /* ── OS GRUPOS DE FILTRO ────────────────────────────────────────────────────────────────── */
  /* Rótulo e chips são IRMÃOS na mesma fileira que quebra linha. No monitor isso lê bem; no
     telefone o rótulo do grupo seguinte caía no meio dos chips do anterior — "ESPESSURA" aparecia
     encaixado entre "Polida" e "Todas", como se fosse mais um filtro. Dando linha inteira ao
     rótulo, cada grupo vira um bloco: o nome em cima, as opções embaixo. */
  .vx-gal-fgrp .vx-gal-lbl { flex: 0 0 100%; margin: 6px 0 0; }
  .vx-gal-fgrp { row-gap: 6px; }
  .vx-gal-filtros { gap: 4px; }

  /* MOEDA e VER POR seguem a mesma regra, e param de rolar. Rolando, "Cavalete" — que é o modo
     PADRÃO e o mais usado — virava uma tirinha de 23px na borda direita, e "US$" sumia junto.
     Escondido atrás de rolagem, um modo padrão simplesmente deixa de existir para quem usa. */
  .vx-gal-verpor {
    flex-wrap: wrap; overflow-x: visible; row-gap: 6px;
    padding-right: 0; scroll-snap-type: none;
  }
  .vx-gal-verpor .vx-gal-lbl { flex: 0 0 100%; margin: 6px 0 0; }

  /* ── RESPIRO ────────────────────────────────────────────────────────────────────────────── */
  /* Controle colado em controle é toque errado. Um gap só, igual em toda fileira de ação. */
  .vx-mat-h, .vx-prosp-acts, .vx-gal-head > div, .vx-of-massa { gap: var(--vx-m-gap); }

  /* ── O QUE GRUDAVA NO LUGAR ERRADO ──────────────────────────────────────────────────────── */
  /* A barra de ação em massa da Prospecção grudava em `top: 8px` — ou seja, ATRÁS da barra do topo,
     que é translúcida: ao rolar, "Capturar N no funil" virava um borrão sob os ícones. Ela precisa
     parar ABAIXO da barra (48px de altura + folga). */
  .vx-prosp-bulk { top: 56px; }

  /* O botão + flutuante cobria o pé do último cartão da coluna — justamente onde ficam o valor e o
     selo do ERP. Um respiro no fim da coluna devolve o que ele tapava. */
  .vx-col-body { padding-bottom: 76px; }

  /* ── O :hover QUE GRUDA NO ANDROID ──────────────────────────────────────────────────────── */
  /* Em tela de toque o :hover fica preso depois do toque: o cartão subia 4px e FICAVA subido, com
     o campo saindo de baixo do dedo no meio da digitação. Efeito de passar o mouse é para quem tem
     mouse. */
  @media (hover: none) {
    .vx-card:hover { transform: none; }
  }

  /* ── ALTURA DE TELA NO CELULAR ──────────────────────────────────────────────────────────── */
  /* `100vh` no Android mede a tela COM a barra de endereço escondida: com ela à mostra, o rodapé
     das colunas fica abaixo da dobra e a tela — desenhada para não rolar — ganha uma rolagem curta
     e sem explicação. `100dvh` mede o que está realmente visível. */
  .vx-cockpit-alt { height: calc(100dvh - 48px) !important; }

  /* ── NOMES QUE PRECISAM APARECER ────────────────────────────────────────────────────────── */
  /* No ranking a pessoa lia o valor inteiro e não quem vendeu ("ANA PAULA ROD…"). Num ranking,
     quem é vem antes de quanto. */
  .vx-rank-nm { min-width: 0; flex: 1 1 auto; }
}

/* No telefone o piso de 200px do titulo (regra de 768px) sobraria: com a miniatura e a marca de
   selecao, uma tela de 320px nao tem 200px para dar e a linha estouraria para os lados. Aqui ele
   vira basis sem piso rigido — encolhe se precisar, mas continua sendo o primeiro a receber
   espaco. Bloco PROPRIO, depois do de 768px: colar isto la dentro fecharia aquele no meio, e
   tudo o que vem depois (chips que rolam, grupos de filtro) so valeria ate 600px. */
@media (max-width: 600px) {
  .vx-mat-h > .vx-mat-titulo { flex: 1 1 160px; min-width: 0; }
  .vx-mat-h > .vx-iabtn { flex: 1 1 auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   O TOUR GUIADO — a luz sobre a tela de verdade.

   A ideia toda esta no `box-shadow` gigante da .vx-tour-luz: em vez de desenhar um veu e recortar
   um buraco (que exige mascara e nao acompanha o elemento), a propria "luz" e um retangulo vazio
   com uma sombra de 9999px em volta. O escuro e a sombra; o buraco e o elemento. E como ela tem
   `pointer-events: none`, o clique atravessa e chega no botao de verdade — que e o ponto: quem
   clica e a pessoa.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
/* `margin: 0` NAO E' ZELO: e' correcao. O MudBlazor empurra o conteudo quando o menu "mini" esta
   fechado com uma regra que atinge TODO div irmao do menu (`.mud-drawer--closed ~ div`), e o tour e'
   um irmao. Sem isto, a capa, a luz e o cartao nasciam 56px para a direita — o cartao aparecia
   descentralizado e a luz apontava ao lado do botao que ela deveria destacar. */
.vx-tour-capa, .vx-tour-luz, .vx-tour-cartao { margin: 0 !important; }

.vx-tour-capa { position: fixed; inset: 0; z-index: 2990; background: transparent; }

/* A LUZ VIAJA, o cartao acompanha. Sem isto o tour corta seco entre um alvo e o outro: a moldura
   pisca fora e pisca dentro, e quem esta lendo perde a referencia de onde estava. Com a viagem, o
   olho e' LEVADO -- que e' a unica coisa que um tour guiado tem para oferecer alem do texto.
   As duas duracoes sao proximas de proposito: a luz e o cartao chegam quase juntos, e nao um
   esperando o outro. */
/* A LUZ ja viajava (transition logo abaixo, .28s). O que saltava era o TEXTO: o cartao ficava
   parado e o conteudo trocava seco, como slide antigo -- e o cartao ainda pulava de posicao quando
   o alvo seguinte pedia outro lado. Agora o cartao desliza e o texto entra. */
.vx-tour-cartao { transition: top .34s cubic-bezier(.22,1,.36,1); }
.vx-tour-txt { animation: vxTourTxt .34s ease both; }
@keyframes vxTourTxt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .vx-tour-cartao { transition: none; }
  .vx-tour-txt { animation: none; }
}
.vx-tour-luz {
  position: fixed; z-index: 3000; pointer-events: none;
  border-radius: calc(14px * var(--vx-raio, 1));
  box-shadow: var(--vx-sombra, 0 0 0 9999px rgba(4, 8, 14, .78), 0 0 0 2px var(--vx-teal-br), 0 0 30px -4px var(--vx-teal));
  transition: left .28s ease, top .28s ease, width .28s ease, height .28s ease;
}

.vx-tour-cartao {
  position: fixed; z-index: 3001;
  left: 50%; transform: translateX(-50%);
  width: min(420px, calc(100vw - 24px));
  background: var(--vx-surface); border: 1px solid var(--vx-border-2);
  border-radius: calc(16px * var(--vx-raio, 1)); padding: 16px 18px 14px;
  box-shadow: var(--vx-sombra, 0 24px 60px -18px rgba(0,0,0,.85));
}
.vx-tour-cartao.meio { top: 50%; transform: translate(-50%, -50%); }
.vx-tour-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vx-tour-topo .n { font-size: 11px; letter-spacing: calc(.08em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase); color: var(--vx-faint); }
.vx-tour-topo .x {
  background: none; border: none; color: var(--vx-muted); cursor: pointer;
  width: 32px; height: 32px; border-radius: calc(8px * var(--vx-raio, 1)); font-size: 15px;
}
.vx-tour-topo .x:hover { background: var(--vx-surface-2); color: var(--vx-text); }
/* O interruptor da voz do tour. Fica ENTRE o "passo N de M" e o ✕ porque é o segundo controle mais
   procurado do cartão: quem está num tour falado e precisa de silêncio (uma ligação chegou, alguém
   entrou na sala) não pode ter de sair do tour para calar a voz. Silenciar também desliga o avanço
   automático — o ritmo era o do áudio, e sem áudio quem dá o ritmo é a pessoa. */
.vx-tour-topo .vz {
  margin-left: auto; margin-right: 4px;
  background: none; border: 1px solid var(--vx-border); color: var(--vx-faint); cursor: pointer;
  height: 30px; padding: 0 10px; border-radius: var(--vx-pill, 999px); font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.vx-tour-topo .vz.on { color: var(--vx-teal-br); border-color: color-mix(in srgb, var(--vx-teal-br) 42%, transparent); }
.vx-tour-topo .vz:hover { background: var(--vx-surface-2); }
.vx-tour-cartao h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; color: var(--vx-text); }
.vx-tour-cartao p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--vx-muted); }

.vx-tour-acao {
  font-size: 12.5px; color: var(--vx-teal-br); background: color-mix(in srgb, var(--vx-teal-br) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--vx-teal-br) 45%, transparent); border-radius: calc(10px * var(--vx-raio, 1)); padding: 8px 10px; margin-bottom: 12px;
}
.vx-tour-aviso {
  font-size: 12px; color: var(--vx-faint); background: var(--vx-bg-2);
  border-radius: calc(10px * var(--vx-raio, 1)); padding: 8px 10px; margin-bottom: 12px;
}

.vx-tour-btns { display: flex; gap: 8px; justify-content: flex-end; }
.vx-tour-b {
  height: 40px; padding: 0 16px; border-radius: calc(11px * var(--vx-raio, 1)); cursor: pointer;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border); color: var(--vx-text);
  font-size: 13px; font-weight: 500;
}
.vx-tour-b:hover { border-color: var(--vx-border-2); }
.vx-tour-b.pri { background: var(--vx-teal); border-color: var(--vx-teal); color: var(--vx-sobre-destaque, #04110c); font-weight: 700; }

@media (max-width: 768px) {
  /* No telefone o cartao encosta nas bordas e os botoes ficam na altura do polegar. */
  .vx-tour-cartao { width: calc(100vw - 16px); padding: 14px 15px 12px; border-radius: calc(14px * var(--vx-raio, 1)); }
  .vx-tour-b { height: 44px; }
}

/* ── MENU DE AÇÕES DO GRUPO (Galeria) ─────────────────────────────────────────────────────────
   Quatro botões repetidos em cada linha viravam um paredão: numa tela de 14 cavaletes eram 56
   botões competindo com a informação que a pessoa foi ali ler. Ficou de fora só o preço, que além
   de ação é informação — e o resto mora aqui, a um toque.
   Booleano e <div>, como o resto desta casa: MudMenu já se recusou a abrir aqui mais de uma vez. */
.vx-acoes-wrap { position: relative; display: inline-flex; }

/* O MENU TEM DE FICAR POR CIMA DAS LINHAS DE BAIXO.
   `z-index` alto no menu nao bastava: cada cavalete e' um item da lista, e os botoes das linhas
   SEGUINTES vem depois no documento — sem um z-index no ANCESTRAL posicionado, eles pintam por cima
   e o menu aberto aparece atravessado por "Definir preco" e "acoes" das linhas de baixo.
   Levantando o proprio bloco (e a linha inteira) enquanto o menu esta aberto, a ordem se resolve. */
.vx-acoes-wrap:has(.vx-acoes-menu) { z-index: 1402; }
.vx-mat-h:has(.vx-acoes-menu) { position: relative; z-index: 1402; }
.vx-acoes-bt.on { background: var(--vx-surface-2); border-color: var(--vx-teal); color: var(--vx-teal-br); }
/* `inset: 0`, e NAO `100vw`. No desktop com barra de rolagem classica, `100vw` mede a viewport
   INCLUINDO a barra — sobram uns 15px, a pagina passa a rolar de lado e aparece uma barra horizontal
   embaixo toda vez que o menu abre. `inset: 0` mede a area util, que e o que a capa precisa cobrir.
   (Aqui funciona porque esta capa nao tem ancestral com transform/filter.) */
.vx-acoes-capa { position: fixed; inset: 0; z-index: 1400; }
.vx-acoes-menu {
  position: absolute; z-index: 1401; top: calc(100% + 6px); right: 0;
  min-width: 262px; padding: 6px;
  background: var(--vx-surface); border: 1px solid var(--vx-border-2);
  border-radius: calc(14px * var(--vx-raio, 1)); box-shadow: var(--vx-sombra, 0 20px 46px -16px rgba(0,0,0,.9));
  backdrop-filter: blur(10px);   /* se a superficie da casa for translucida, o que esta atras nao atrapalha a leitura */
}
/* SELETOR DE CHAPAS do "editar" da Grade: um cavalete pode ter muitas chapas — rola dentro do menu. */
.vx-acoes-menu.vx-edit-menu { max-height: min(60vh, 360px); overflow-y: auto; }
/* `justify-content: flex-start` EXPLÍCITO (30/09/2026). O item é um <button>, e o MudBlazor põe
   `justify-content: center` em todo button: cada linha centralizava o seu próprio conteúdo, e como
   os textos têm tamanhos diferentes os ícones caíam cada um numa coluna — o zigue-zague que se via
   no menu que sobe do rodapé no celular. O `text-align: left` não resolvia, porque quem manda no
   flex é o justify. */
.vx-acoes-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px; width: 100%;
  padding: 9px 11px; border: none; background: none; cursor: pointer; text-align: left;
  border-radius: calc(10px * var(--vx-raio, 1)); color: var(--vx-text);
}
.vx-acoes-item > .mud-icon-root { flex: 0 0 auto; }
.vx-acoes-item:hover { background: var(--vx-surface-2); }
.vx-acoes-item b { display: block; font-size: 13px; font-weight: 600; }
.vx-acoes-item small { display: block; font-size: 11px; color: var(--vx-faint); margin-top: 1px; }
.vx-acoes-item.pub b { color: #fd7d4d; }

@media (max-width: 768px) {
  /* No telefone o menu sobe do rodapé: perto do polegar, e sem risco de nascer fora da tela. */
  .vx-acoes-menu {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    min-width: 0; border-radius: calc(18px * var(--vx-raio, 1)) calc(18px * var(--vx-raio, 1)) 0 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .vx-acoes-item { padding: 13px 12px; }
  .vx-acoes-item b { font-size: 14px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ALINHAMENTO NO CELULAR — as linhas de configuração param de brigar por espaço.

   Estas linhas foram desenhadas como TABELA: nome | como se ganha | quantos | ligar | apagar, tudo
   numa fileira. Num monitor cada coluna tem o seu lugar; em 375px elas dividem o que sobra e o
   resultado e' texto cortado no meio ("Qualifiqu…", "Capture 1(", "Faca 10 lea") com um corte
   DIFERENTE em cada linha — o olho nao acha nenhuma coluna porque nao existe coluna.

   No telefone elas viram BLOCO: o nome ocupa a linha inteira, os campos vem embaixo, e os controles
   (ligar/apagar) ficam juntos na direita. Uma linha por assunto, em vez de cinco assuntos por linha.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Estrelas do Impulso (Configurações › Impulso) ─────────────────────────────────────────── */
  .vx-gamcfg-linha { align-items: stretch; row-gap: 8px; padding: 12px 0; }
  .vx-gamcfg-linha .nm { flex: 0 0 100%; min-width: 0; }
  .vx-gamcfg-linha .ev { flex: 1 1 100%; min-width: 0; }
  .vx-gamcfg-linha .vx-input { width: 100%; }
  .vx-gamcfg-linha .vx-input.pts { flex: 0 0 92px; width: 92px; }

  /* ── Prêmios e níveis do sorteio ───────────────────────────────────────────────────────────
     CADA CAMPO TOMAVA A LINHA INTEIRA, e era essa a regra: `.sla { flex: 1 1 100% }` com
     `input { width: 100% }`. "custa 1500 pontos" virava uma faixa de 317px com uma caixa gigante
     para quatro dígitos; "🌀 buraco" e "🎯 exige a meta", que juntos não passam de 200px, ocupavam
     duas faixas de 317. Um nível dava SEIS linhas e 276px de altura — a página inteira passava de
     10.000px num telefone de 375, e quatro níveis não cabiam numa tela.

     O conserto não é apertar: é deixar o wrap fazer o trabalho. Campo com rótulo curto fica do
     tamanho do conteúdo e dois cabem por linha; texto livre (nome, detalhe) é o único que
     realmente precisa da largura toda. */
  .vx-orbcfg-linha, .vx-orbcfg-nova { align-items: center; row-gap: 8px; padding: 12px 0; }

  /* TEXTO LIVRE E SELETOR ficam com a linha inteira: nome de prêmio não divide espaço com nada.
     As três variantes com classe estão listadas de propósito — elas têm regra própria mais acima
     (o que era style inline), e sem repeti-las aqui aquela regra venceria esta. */
  .vx-orbcfg-linha > input.vx-input,
  .vx-orbcfg-linha > select.vx-input,
  .vx-orbcfg-linha > input.vx-input.nome,
  .vx-orbcfg-linha > input.vx-input.det,
  .vx-orbcfg-linha > select.vx-input.mover,
  .vx-orbcfg-nova > input.vx-input,
  .vx-orbcfg-nova > select.vx-input { flex: 1 1 100%; min-width: 0; max-width: none; }

  /* CAMPINHO COM RÓTULO fica do tamanho do conteúdo, e o wrap encaixa dois por linha. */
  .vx-orbcfg-linha .sla, .vx-orbcfg-nova .sla { flex: 0 1 auto; min-width: 0; }
  .vx-orbcfg-linha .sla input[type="number"],
  .vx-orbcfg-nova .sla input[type="number"] { width: 74px; }
  .vx-orbcfg-linha .sla input.custo { width: 84px; }
  /* O NOME DA ETAPA (Configuracoes > Orbitas) fica com o resto da primeira faixa, ao lado do
     numero de ordem. Com a base 0 que o desktop usa ele encolhia para 110px assim que o "esfria
     em N dias" passou a caber na mesma faixa -- e "Aprovacao Financeira" nao cabe em 110px. */
  .vx-orbcfg-linha > input.vx-input.etapa { flex: 1 1 60%; }
  /* A CAIXA DE MARCAR não é campo de digitar: a regra de largura acima a esticava junto, e a marca
     ficava a um palmo do próprio rótulo. */
  .vx-orbcfg-linha .sla input[type="checkbox"] { width: auto; flex: 0 0 auto; }

  /* AS DUAS MARCAS DO NÍVEL, uma ao lado da outra: são a mesma pergunta feita duas vezes ("este
     nível é especial como?") e lidas juntas é que fazem sentido. */
  .vx-orbcfg-linha > label.sla.marca { flex: 1 1 calc(50% - 6px); }

  /* ── A PRIMEIRA FAIXA É "O NOME E O INTERRUPTOR DELE" ────────────────────────────────────
     Sem isto o grupo de ações caía na ÚLTIMA faixa, sozinho: um interruptor e uma lixeira
     boiando embaixo de cinco campos, sem nada ao lado dizendo o que eles ligam ou apagam. Era o
     pior efeito do empilhamento, porque o controle ficava mais longe justamente do nome que ele
     controla.

     Feito com `order`, e ATRAS DE (pointer: coarse) — não da largura. Reordenar por CSS separa a
     ordem visual da ordem do DOM: quem navega por teclado continua tabulando na ordem do DOM, e
     numa linha de prêmio isso mandaria o foco do nome para o campo de baixo enquanto o olho está
     no interruptor ao lado. "Estreito" não quer dizer "sem teclado": um notebook com 200% de zoom,
     ou uma janela arrastada para meia tela, entra nesta media query com mouse e teclado na mão.
     `pointer: coarse` pergunta o que realmente importa aqui — se quem aponta é o dedo. No telefone
     o reflow acontece; no notebook estreito a linha fica como no desktop, e o Tab segue o olho.

     O `:has(> .acoes)` limita tudo às linhas que têm o grupo: a de órbitas (Configurações >
     Órbitas) não tem, e segue com o layout dela. */
  @media (pointer: coarse) {
    .vx-orbcfg-linha > .acoes { margin-left: auto; }
    .vx-orbcfg-linha:has(> .acoes) > .ds,
    .vx-orbcfg-linha:has(> .acoes) > .det,
    .vx-orbcfg-linha:has(> .acoes) > .mover,
    .vx-orbcfg-linha:has(> .acoes) > .sla,
    .vx-orbcfg-linha:has(> .acoes) > .chance,
    .vx-orbcfg-linha:has(> .acoes) > .qtd,
    .vx-orbcfg-linha:has(> .acoes) > .vx-sug-custo { order: 1; }
  }

  /* O NOME divide a primeira faixa com o grupo de ações em vez de tomá-la inteira.
     E o ajuste é na BASE do flex, não num min-width: `.vx-input` tem `width: 100%`, então com
     base `auto` o campo já nascia do tamanho da linha e empurrava as ações para baixo. Piso de
     min-width não conserta base grande demais — só impede base pequena demais. */
  .vx-orbcfg-linha > input.vx-input.nome { flex: 1 1 55%; }

  .vx-orbcfg-linha .qtd, .vx-orbcfg-nova .qtd { flex: 0 0 auto; }

  /* ── Permissão por pessoa ──────────────────────────────────────────────────────────────────── */
  /* Nao / Cargo / Sim disputavam a linha com o rotulo da capacidade, que quebrava em 3-4 linhas.
     O rotulo fica com a largura inteira e os tres botoes ficam embaixo, do tamanho do dedo. */
  .vx-perm-linha { flex-wrap: wrap; row-gap: 8px; }
  .vx-perm-linha .txt { flex: 0 0 100%; }
  .vx-perm-tri { flex: 1 1 100%; display: flex; }
  .vx-perm-tri button { flex: 1 1 0; min-height: 40px; }

  /* ── Cabeçalho do pedido (drawer do Cockpit) ───────────────────────────────────────────────── */
  /* Com nome de etapa comprido ("Aguardando carregamento") o X de fechar era empurrado para fora da
     borda. O titulo cede, os icones nunca. */
  .vx-pd-head-top { flex-wrap: wrap; row-gap: 6px; }
  .vx-pd-head-top > :first-child { min-width: 0; flex: 1 1 60%; }

  /* ── Aviso sobre o mapa/globo ──────────────────────────────────────────────────────────────── */
  /* A frase se partia em TRES COLUNAS lado a lado, como se fossem tres avisos. */
  /* No mobile o HUD fica só com a contagem (a dica longa some via .vx-so-larga), pra não virar 2-3 linhas
     e a barra de botões (top:54px) cobria a segunda linha. */
  .vx-map-hud { flex-wrap: nowrap; max-width: calc(100vw - 24px); }
  /* A barra de ações tem muitos botões — no celular ela quebra em várias linhas. Deixa rolar por dentro
     (não engole o mapa inteiro), atravessa a largura e ganha fundo mais opaco pra ler bem. */
  .vx-map-area { left: 12px; right: 12px; top: 50px; max-height: 48vh; overflow-y: auto; background: rgba(8,12,20,.92); }
  .vx-map-areabtn, .vx-map-go { height: 34px; }

  /* ── Campos do item da oferta ──────────────────────────────────────────────────────────────── */
  /* Cada chapa desenhava os campos de um jeito (as vezes dois por linha, as vezes um), e duas chapas
     iguais pareciam coisas diferentes. Duas colunas fixas dao a mesma forma para todas. */
  .vx-of-item .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .vx-of-item .campos > span { min-width: 0; }
  .vx-of-num { width: 100%; }
  /* "como o cliente ve" ocupa a LINHA INTEIRA no celular. grid-column so' vale no ITEM do grid,
     que e' o <span> em volta -- nao o <input>. Aplicada no input (como antes) a regra nao pega, e
     o campo caia numa coluna so', espremido ao lado do "preco R$". Vai no span. */
  .vx-of-item .campos > span.nome { grid-column: 1 / -1; }
  .vx-of-num.nome { min-width: 0; max-width: none; }

  /* ── Abas das Configurações ────────────────────────────────────────────────────────────────── */
  /* Nove abas e so' as setinhas para andar: chegar em "Impulso" custava cinco toques. Deslizar com
     o dedo e' como toda aba funciona num telefone. */
  .vx-cfg-tabs .mud-tabs-tabbar-content { overflow-x: auto; scrollbar-width: none; }
  .vx-cfg-tabs .mud-tabs-tabbar-content::-webkit-scrollbar { display: none; }
  .vx-cfg-tabs .mud-tab { flex: 0 0 auto; }
  /* Mesmo tratamento que .vx-gamcfg-linha ja' recebe logo acima: com base 0 o nome da estrela era o
     unico item capaz de encolher, e "Orbita estavel" descia uma letra por linha ao lado do
     interruptor. Nome numa linha, "como acende" na seguinte, controle sozinho no fim. */
  /* O NOME DA ESTRELA divide a primeira linha com o interruptor, em vez de tomar a largura toda e
     empurrar o controle para uma terceira linha. Com "como acende" logo abaixo, a linha da estrela
     cai de tres faixas para duas. */
  .vx-orbcfg-linha > .nm { flex: 1 1 auto; min-width: 0; }
  .vx-orbcfg-linha > .ds { flex: 1 1 100%; min-width: 0; }
}

/* ── OUTROS CONTATOS DO PROSPECT (cadastro à mão) ─────────────────────────────────────────────
   Proposta vai para uma PESSOA. Os três campos do topo guardam quem você conheceu; aqui entram os
   outros — o comprador que manda o pedido, o dono que aprova o preço, o arquiteto que pede a foto.
   Enquanto a empresa não existe no ERP eles ficam no lead; depois, viram contatos do cliente. */
.vx-man-cts { margin: 14px 0 4px; }
.vx-man-cts .cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--vx-muted); margin-bottom: 8px; flex-wrap: wrap;
}
.vx-man-cts .cab small { color: var(--vx-faint); font-size: 11.5px; }
.vx-man-cts .linha {
  display: grid; grid-template-columns: 1.1fr .9fr 1.3fr 1fr auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.vx-man-cts .linha .vx-input { min-width: 0; }
.vx-man-cts .tira {
  width: 36px; height: 36px; border-radius: calc(9px * var(--vx-raio, 1)); cursor: pointer;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border); color: var(--vx-muted);
}
.vx-man-cts .tira:hover { border-color: #E5484D; color: #E5484D; }

@media (max-width: 768px) {
  /* Cinco colunas num telefone viram cinco tirinhas ilegíveis: uma embaixo da outra, com o botão de
     tirar na mesma linha do nome — que é onde a mão espera encontrá-lo. */
  .vx-man-cts .linha { grid-template-columns: 1fr auto; row-gap: 8px; }
  .vx-man-cts .linha .vx-input:nth-child(2),
  .vx-man-cts .linha .vx-input:nth-child(3),
  .vx-man-cts .linha .vx-input:nth-child(4) { grid-column: 1 / -1; }
  .vx-man-cts .tira { width: 44px; height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   O RESTO DO CELULAR — o que sobrou do mapeamento das dez áreas.

   Vem no fim do arquivo de propósito: várias destas regras precisam ganhar de um bloco anterior que
   as desfazia, e ordem é o que decide entre seletores de mesma força.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── VISUALIZADOR DE FOTO: a legenda parou de flutuar por cima da pedra ──────────────────────── */
/* `.vx-lb` centraliza o palco na altura inteira como se a legenda não existisse, e a legenda é
   absoluta no rodapé — as duas se cruzam. Medido a 360x560: 51px de sobreposição, e na chapa SEM
   foto o painel comia a própria instrução ("envie uma foto de estúdio abaixo"). Em coluna, cada uma
   tem o seu lugar. */
@media (max-width: 720px) {
  .vx-lb { flex-direction: column; justify-content: center; gap: 10px;
           padding: 62px 8px 12px; box-sizing: border-box; }
  .vx-lb-stage { flex: 1 1 auto; min-height: 0; max-width: 100%; max-height: none; overflow: hidden; }
  .vx-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; }
  .vx-lb-ph, .vx-lb-load { width: 100%; max-width: 560px; max-height: 100%; }
  .vx-lb-cap { position: static; transform: none; flex: 0 0 auto;
               width: 100%; max-width: 460px; min-width: 0; margin: 0 auto; }
}

/* ── CABEÇALHO DO CAVALETE NA OFERTA: o total do conjunto parou de fugir pela direita ────────── */
/* Ele é flex SEM wrap e chega a doze filhos, vários com `white-space: nowrap`. A 375px a linha
   passava de 500px num corpo de ~317px — e como a lista rola no eixo Y, o eixo X virava "auto":
   o TOTAL, último filho, só aparecia arrastando a lista de lado. */
@media (max-width: 768px) {
  .vx-pi-grupo { flex-wrap: wrap; row-gap: 6px; }
  /* MIRAVA `> b` E ESTAVA MORTA: o <b> deixou de ser filho direto no dia em que o cabeçalho
     virou `.cab > .l1 > b`, e ninguém percebeu porque o sintoma (título apertado no celular)
     parecia só falta de espaço. Agora mira o nome de verdade — que é também o único que pode
     encolher, desde que ele virou a manchete. */
  .vx-pi-grupo .cab .l1 b.nome { flex: 1 1 auto; min-width: 0; }
  .vx-pi-grupo .pm2 { margin-left: 0; }
  .vx-pi-grupo .tot { margin-left: auto; }
}

/* ── PROSPECÇÃO: o alternador Lista/Globo/Mapa deixou de ser picado por dentro ───────────────── */
/* `.vx-seg` tem `overflow: hidden`, e pela regra do flexbox isso zera o tamanho mínimo automático:
   em vez de estourar, ele ENCOLHIA e recortava as opções por dentro. Medido a 360px: 101px
   desenhados para 164px de conteúdo — "Mapa" não existia no celular, e "Globo" aparecia pela
   metade. Com a barra quebrando linha, o alternador ganha a largura inteira. */
@media (max-width: 720px) {
  .vx-prosp-bulk { flex-wrap: wrap; row-gap: 10px; }
  .vx-prosp-bulk > .mud-button-root { min-height: 44px; }
  .vx-prosp-bulk .vx-seg { order: 3; flex: 1 0 100%; margin-left: 0 !important; height: 40px; }
  .vx-prosp-bulk .vx-seg button { flex: 1 1 0; min-width: 0; }
}

/* ── BARRA DO TOPO: os dois alvos que ainda estavam abaixo do dedo ──────────────────────────── */
@media (max-width: 600px) {
  /* O botão do assistente era o único retangular no meio de alvos redondos (66x34), e empurrava
     todo o resto para a direita. Vira ícone, do tamanho dos vizinhos. */
  .vx-appbar .vx-appbar-mic {
    width: 44px; height: 44px; border-radius: 50%;
    padding: 0; gap: 0; justify-content: center; margin: 0 !important;
  }
  .vx-appbar .vx-appbar-mic .vx-appbar-mic-dot { display: none; }

  /* A MARCA É O BOTÃO DA INÍCIO. Com a palavra escondida abaixo de 420px sobrava um alvo de 28x28
     — o menor da barra depois do avatar, e é por ele que se volta para a tela inicial. */
  .vx-appbar .mud-toolbar > a.mud-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }

  /* Quinze itens de 40px seguidos erram o toque, e há folga de sobra (15 x 44 = 660 em 844). */
  .vx-drawer .mud-nav-link, .vx-nav .mud-nav-link { min-height: 44px; }
}

/* ── CAMPO SE TOCA COM O DEDO, NÃO COM O CURSOR ─────────────────────────────────────────────── */
/* A casa TEM um campo padrão (`.vx-input`, 46px), e quase nenhuma tela o usa como está: existiam
   dez alturas diferentes, de 46 a 24px. As menores são justamente as do editor de oferta e pedido —
   a tela mais usada no pátio, com o cliente do lado. A LARGURA fica como está; sobe só a altura. */
@media (max-width: 768px) {
  .vx-of-num,
  .vx-pi-med input, .vx-pi-desc input, .vx-pi-grupo .pm2 input,
  .vx-cli-filtros select, .vx-of-modo, .vx-of-aplicar,
  .vx-maprow .vx-input, .vx-listas-busca .vx-input,
  .vx-dp-novo .vx-input, .vx-perfil-campos .vx-input,
  .vx-urg-def input, .vx-orb-col .cab .vx-input.cam { height: 44px; min-height: 44px; }

  /* Nenhum campo do /config reserva largura mínima no celular: o cartão tem ~286px de área útil e
     `.vx-card` tem `overflow: hidden` — o que passa some, sem nem barra de rolagem para ir buscar.
     Era assim que o olho de "mostrar a chave" do Google Maps desaparecia inteiro. Melhor um campo
     estreito e inteiro que um campo largo e cortado. */
  .vx-page .vx-card input.vx-input,
  .vx-page .vx-card select.vx-input,
  .vx-page .vx-card textarea.vx-input,
  .vx-page .vx-card .mud-input-control { min-width: 0 !important; }

  /* O aviso não pode cobrir o rodapé de um formulário que salva campo a campo.
     min-width com min(): NÃO pode ser 0. Zerar deixava o snackbar encolher até a largura do botão
     "Desfazer", e a mensagem — que o MudBlazor marca com overflow-wrap:anywhere — descia UMA LETRA
     por linha (a armadilha #4 do mobile: base que colapsa ao lado de um irmão rígido). O piso de
     344px (o padrão do MudBlazor no desktop) devolve espaço ao texto, limitado a caber na tela pelo
     min() para não voltar a estourar a largura (a armadilha #1). */
  #mud-snackbar-container .mud-snackbar {
    min-width: min(344px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
  /* Ainda que o espaço aperte (mensagem longa + Desfazer + fechar), quebra em PALAVRA, não em letra. */
  #mud-snackbar-container .mud-snackbar-content-message { overflow-wrap: break-word; }
  /* NO CELULAR O AVISO VAI PARA O TOPO. A barra de seleção da Galeria e a do carrinho ocupam o rodapé
     inteiro (4 linhas de botões); um aviso bottom-center caía EM CIMA delas — cobria "Gerar oferta",
     "Pôr no carrinho" e "Reservar", e ainda empilhava. Ao pé, o resultado de "Gerar oferta" (ex.: o
     ERP barrou o cavalete) ficava invisível e o botão parecia não fazer nada. No topo, abaixo da barra
     do app, o aviso nunca disputa espaço com as barras de ação de baixo. */
  .mud-snackbar-location-bottom-center { top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto; }

  /* O quadro cai para padding 12px aqui; o painel de atividades precisa acompanhar, senão as bordas
     esquerdas não batem com as das colunas logo abaixo. */
  .vx-atv-painel { margin-left: 12px; margin-right: 12px; max-width: calc(100% - 24px); }

  /* 38px e 24px erram o toque: recarregar a lista de ofertas, e o X que tira a chapa da proposta. */
  .vx-of-refresh { width: 44px; height: 44px; }
  .vx-of-item > .mud-icon-button { width: 44px; height: 44px; align-self: center; }
}

/* ── GALERIA: o nome cabe, os filtros encolhem, o cabeçalho quebra ──────────────────────────── */
@media (max-width: 720px) {
  /* Cartão de 191px não comporta "QUARTZITE KOUROS BRUSHED 3,0CM" (244px) numa linha só. Em duas
     linhas o nome aparece inteiro, e o `min-height` mantém os cartões da mesma altura. */
  .vx-slab-info .m {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; min-height: 2.5em;
  }

  /* O bloco de filtros comia 137px e empurrava o primeiro cavalete para fora da primeira tela.
     A ideia de fazer cada grupo ROLAR na horizontal foi tentada e DESFEITA: com o rótulo ocupando
     a linha inteira (para os grupos não se misturarem), uma fileira que não quebra empurra todos os
     chips para fora do campo de visão — "ACABAMENTO" e "TIPO" apareciam sem opção nenhuma embaixo.
     Esconder filtro atrás de rolagem foi justamente a queixa original. Fica o empilhamento, mais
     apertado: 137px viraram ~88px sem sumir com nada. */
  .vx-gal-filtros { flex-direction: column; align-items: stretch; gap: 4px; }
  .vx-gal-fgrp { row-gap: 6px; min-width: 0; max-width: 100%; }
  .vx-gal-fgrp > * { flex: 0 0 auto; }

  /* A linha de ações do cabeçalho pode quebrar: a busca ganha a linha inteira e os botões param de
     espremer o rótulo em duas linhas ("Atualizar / do ERP"). */
  .vx-gal-head > div:last-child { flex-wrap: wrap; }
  .vx-gal-head > div:last-child > .vx-input { flex: 1 1 100%; }
  .vx-gal-head > div:last-child > .mud-button-root { flex: 1 1 auto; min-height: 44px; }
}

/* ── RELATÓRIOS: a barra de filtro ganhou alvo de dedo ──────────────────────────────────────── */
/* Medido a 430px: botões de 37px, campos de 40px e as setas do campo Ano com 20x20 — menos da
   metade do alvo. Errar ali é ir para 2024 em vez de 2026. Preso ao `.vx-rel-noprint` para não
   mexer no `Margin.Dense` do resto do sistema. */
@media (max-width: 720px) {
  .vx-rel-noprint > .mud-button-root { min-height: 44px; }
  .vx-rel-noprint .mud-input-control { min-height: 44px; }
  .vx-rel-noprint .mud-input-numeric-spin .mud-button-root { min-width: 36px; height: 24px; }
}

/* ── OFERTA: a barra de preço em massa deixou de ser um paredão de 30px ─────────────────────── */
@media (max-width: 600px) {
  .vx-of-massa { gap: 8px; padding: 10px; }
  .vx-of-massa .vx-of-num { height: 44px; font-size: 15px; }
  .vx-of-massa .vx-of-modo,
  .vx-of-massa .vx-of-aplicar { height: 44px; flex: 1 1 calc(50% - 4px); min-width: 0; }
  /* "A todos de PORTOBELLO BRANCO" é ação de peso muito diferente de "aplicar a 3": linha própria */
  .vx-of-massa .vx-of-aplicar.todos { flex: 1 1 100%; }
  .vx-of-massa .vx-of-chk { flex: 0 0 auto; }
}

/* ── PROSPECÇÃO: o hero devolveu a primeira dobra ao trabalho ───────────────────────────────── */
/* A 360x800 ele comia 286px — 36% da tela — e empurrava "Abrir o radar" para fora da primeira
   dobra. O parágrafo de apresentação é texto de venda: quem já está dentro do sistema não precisa
   dele toda vez que abre a tela. Os três números ficam. */
@media (max-width: 600px) {
  .vx-prosp-hero { padding: 14px; gap: 12px; }
  .vx-prosp-h2 { display: none; }
  .vx-prosp-vortex { width: 44px; height: 44px; }
  .vx-prosp-h1 { font-size: 18px; }
  .vx-prosp-kpi { padding: 8px 6px; }
  .vx-prosp-kpi b { font-size: 20px; }
  .vx-prosp-kpi span { font-size: 9.5px; letter-spacing: 0; }
}

/* ── CARTEIRA: os três botões do rodapé do cartão ───────────────────────────────────────────── */
/* `Size.Small` do MudBlazor dá 30px, e o div não declarava `align-items` — no Pixel os de ícone
   esticavam para 52px. Errar entre "criar oferta" e "WhatsApp" é abrir a tela errada com o cliente
   esperando. */
.vx-cli-acoes { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
/* caixinha de marcar o cliente, no topo do card */
.vx-cli-pick { display:flex; align-items:center; cursor:pointer; flex:0 0 auto; }
.vx-cli-pick input { width:18px; height:18px; accent-color:var(--vx-teal); cursor:pointer; margin:0; }
/* barra da marcacao multipla — acima da lista; nao flutua no rodape (la mora a pilula do carrinho) */
.vx-cli-selbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px;
  padding:9px 14px; border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-bg-2); border:1px solid var(--vx-border); }
.vx-cli-selbar .n { font-weight:600; font-size:13px; color:var(--vx-text); }
.vx-cli-selbar-x { background:none; border:none; color:var(--vx-muted); cursor:pointer; font-size:12.5px; padding:4px 6px; }
.vx-cli-selbar-x:hover { color:var(--vx-text); }
@media (max-width: 600px) {
  .vx-cli-acoes .mud-button-root.mud-button:not(.mud-icon-button) { min-height: 44px; flex: 1 1 auto; }
  .vx-cli-acoes .mud-icon-button { width: 44px; height: 44px; padding: 10px; flex: 0 0 44px; }
}

/* ══ LISTA — item 4 das Demandas ME 2: carteira de clientes, prospects e o radar da Prospecção ══
   Uma linha por registro, para ver e marcar muitos na mesma tela.
   Cada linha é uma grade própria com as MESMAS trilhas; por isso a coluna de ações tem largura FIXA —
   com "auto", a linha de quem não tem WhatsApp ficaria mais curta e as colunas de cima e de baixo
   deixariam de alinhar.
   As colunas respondem à largura do CONTEÚDO (container query), não à da tela: com o menu aberto o
   notebook tem 240px a menos, e uma media query escolheria o desenho errado. Efeito colateral do
   container-type: a lista vira bloco de contenção de position:fixed de quem está dentro — nada dentro
   dela usa (o voo do carrinho nasce no body). Quem um dia puser um overlay fixo aqui dentro, tire-o daqui. */
.vx-cli-lista { container: vxlista / inline-size; margin-top:18px; border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1));
  background:var(--vx-bg-2); overflow:hidden; }
.vx-cli-li { display:grid; align-items:center; column-gap:12px; row-gap:6px; padding:8px 14px; border-top:1px solid var(--vx-border); }
.vx-cli-li:first-child { border-top:0; }
.vx-cli-li.cab { padding:7px 14px; font-size:10.5px; font-weight:600; letter-spacing:calc(.06em * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  color:var(--vx-faint); background:var(--vx-surface); }
.vx-cli-li:not(.cab):hover { background:color-mix(in srgb, var(--vx-text) 3.5%, transparent); }
.vx-cli-li.nocar { box-shadow:inset 3px 0 0 color-mix(in srgb, var(--vx-teal) 55%, transparent); }
.vx-cli-lista.prosp .vx-cli-li:not(.cab) { box-shadow:inset 3px 0 0 #a855f7; }
.vx-cli-lista .vx-cli-li.sel { background:color-mix(in srgb, var(--vx-teal) 8%, transparent); box-shadow:inset 3px 0 0 var(--vx-teal); }
/* o capturado RECUA, como o cartão dele: o que ainda está em aberto é que tem de saltar aos olhos */
.vx-cli-li.capt:not(.sel):not(:hover) { opacity:.72; }
.vx-cli-li.capt .c-nome b { color:var(--vx-teal-soft); }

.vx-cli-li .vx-cli-pick, .vx-cli-li .c-pick { grid-area:pick; }
.vx-cli-li .c-nome { grid-area:nome; display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer; }
.vx-cli-li.cab .c-nome { cursor:default; }
.vx-cli-li .c-nome .d-av { flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; background:linear-gradient(135deg,#2a3350,#3a456a); color:#cfe; }
.vx-cli-lista.prosp .c-nome .d-av { background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; }
.vx-cli-li .c-nome .txt { display:flex; flex-direction:column; min-width:0; }
.vx-cli-li .c-nome b { font-size:13.5px; font-weight:600; color:var(--vx-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-cli-li:not(.cab) .c-nome:hover b { color:var(--vx-teal-br); }
.vx-cli-li .meta { font-size:11.5px; color:var(--vx-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-cli-li .so-estreito { display:none; }
.vx-cli-li-emof { color:#e6bd57; font-weight:600; }
.vx-cli-li .c-fone, .vx-cli-li .c-end, .vx-cli-li .c-etapa { min-width:0; font-size:12.5px; color:var(--vx-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-cli-li.cab .c-fone, .vx-cli-li.cab .c-end, .vx-cli-li.cab .c-etapa { font-size:inherit; color:inherit; }
.vx-cli-li .c-fone { grid-area:fone; }
.vx-cli-li .c-end { grid-area:end; }
.vx-cli-li .c-etapa { grid-area:etapa; }
.vx-cli-li .c-sit, .vx-cli-li .c-tags, .vx-cli-li .c-funil, .vx-cli-li .c-temp { display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-width:0; }
.vx-cli-li .c-sit { grid-area:sit; }
.vx-cli-li .c-tags { grid-area:tags; }
.vx-cli-li .c-funil { grid-area:funil; }
.vx-cli-li .c-temp { grid-area:temp; }
.vx-cli-li .vx-erp-pill { font-size:10px; padding:2px 7px; white-space:nowrap; }
.vx-cli-li .vx-prosp-temp { white-space:nowrap; }
.vx-cli-li-gr { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; color:var(--vx-teal-soft); }
.vx-cli-li-gr .mud-icon-root { font-size:13px; }
/* ancorada à ESQUERDA: a ação principal (Oferta/Capturar) vem primeiro e fica na mesma posição em toda
   linha — com flex-end, a linha sem WhatsApp empurrava o botão para a direita e a coluna "andava" */
.vx-cli-li .c-acoes { grid-area:acoes; display:flex; align-items:center; justify-content:flex-start; gap:6px; }

.vx-cli-li-of { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:0 0 auto; height:30px; padding:0 11px;
  border:0; border-radius:calc(9px * var(--vx-raio, 1)); background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); font:inherit; font-size:12px; font-weight:700;
  cursor:pointer; white-space:nowrap; }
.vx-cli-li-of:hover { filter:brightness(1.08); }
.vx-cli-li-of .mud-icon-root, .vx-cli-li-feito .mud-icon-root { font-size:16px; }
.vx-cli-li-ic { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:30px; height:30px;
  border:1px solid var(--vx-border); border-radius:calc(9px * var(--vx-raio, 1)); background:transparent; color:var(--vx-muted); cursor:pointer; text-decoration:none; }
.vx-cli-li-ic:hover { color:var(--vx-text); border-color:var(--vx-muted); }
.vx-cli-li-ic .mud-icon-root { font-size:16px; }
.vx-cli-li-ic.on { color:var(--vx-teal-br); border-color:var(--vx-teal); }
.vx-cli-li-ic.wa { color:#25D366; }
.vx-cli-li-ic .qt { position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:calc(8px * var(--vx-raio, 1));
  background:var(--vx-teal); color:var(--vx-sobre-destaque, #04110c); font-size:9.5px; font-weight:700; line-height:16px; text-align:center; }
.vx-cli-li-feito { display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:0 0 auto; height:30px; padding:0 10px;
  border-radius:calc(9px * var(--vx-raio, 1)); background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-br); font-size:12px; font-weight:700; white-space:nowrap; }
/* seletor de tag/ciclo aberto: sub-linha alinhada com o nome, não com a caixinha */
.vx-cli-li-sub { padding:0 14px 10px 46px; }
.vx-cli-li-sub .vx-cli-tagpick { margin-top:0; }

.vx-cli-lista.cli .vx-cli-li { grid-template-columns:20px minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.6fr) 184px;
  grid-template-areas:"pick nome fone sit tags acoes"; }
.vx-cli-lista.prosp .vx-cli-li { grid-template-columns:20px minmax(0,2.4fr) minmax(0,1.2fr) minmax(0,1.2fr) 184px;
  grid-template-areas:"pick nome etapa funil acoes"; }
.vx-cli-lista.radar .vx-cli-li { grid-template-columns:20px 118px minmax(0,2.2fr) minmax(0,2fr) minmax(0,1fr) 176px;
  grid-template-areas:"pick temp nome end fone acoes"; }

/* conteúdo médio (notebook com o menu aberto): telefone, endereço, etapa e situação sobem para a linha
   de detalhe do nome — o "em oferta" vai para o COMEÇO dela, antes das reticências */
@container vxlista (max-width: 1000px) {
  .vx-cli-li .so-estreito { display:inline; }
  .vx-cli-li .c-fone, .vx-cli-li .c-sit, .vx-cli-li .c-end, .vx-cli-li .c-etapa { display:none; }
  .vx-cli-lista.cli .vx-cli-li { grid-template-columns:20px minmax(0,1.6fr) minmax(0,1.2fr) 184px; grid-template-areas:"pick nome tags acoes"; }
  .vx-cli-lista.prosp .vx-cli-li { grid-template-columns:20px minmax(0,2fr) minmax(0,1fr) 184px; grid-template-areas:"pick nome funil acoes"; }
  .vx-cli-lista.radar .vx-cli-li { grid-template-columns:20px 118px minmax(0,1fr) 176px; grid-template-areas:"pick temp nome acoes"; }
}
/* celular: o nome toma a linha inteira; tags/situação e as ações descem para a segunda */
@container vxlista (max-width: 620px) {
  .vx-cli-li.cab { display:none; }
  .vx-cli-li.cab + .vx-cli-li { border-top:0; }
  .vx-cli-li { padding:10px 12px; }
  .vx-cli-lista.cli .vx-cli-li { grid-template-columns:20px minmax(0,1fr) auto; grid-template-areas:"pick nome nome" ". tags acoes"; }
  .vx-cli-lista.prosp .vx-cli-li { grid-template-columns:20px minmax(0,1fr) auto; grid-template-areas:"pick nome nome" ". funil acoes"; }
  .vx-cli-lista.radar .vx-cli-li { grid-template-columns:20px minmax(0,1fr) auto; grid-template-areas:"pick nome nome" ". temp acoes"; }
  .vx-cli-li-of, .vx-cli-li-feito { height:36px; }
  .vx-cli-li-ic { width:36px; height:36px; }
  .vx-cli-li-sub { padding:0 12px 10px 44px; }
}
/* telefone estreito: os botões principais ficam só com o ícone, para as tags não virarem uma coluna de uma palavra */
@container vxlista (max-width: 420px) {
  .vx-cli-li-of .rot, .vx-cli-li-feito .rot { display:none; }
  .vx-cli-li-of, .vx-cli-li-feito { width:36px; padding:0; }
}

/* "Selecionar todos" acima dos resultados — Carteira e Galeria (item 5 das Demandas ME 2). A caixinha é
   a mesma do "selecionar tudo" da Prospecção (.vx-prosp-all); ao lado, quanto ela alcança. */
.vx-cli-selall, .vx-gal-selall { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:14px 2px 0; }
.vx-gal-selall { margin:0 2px 12px; }
.vx-cli-selall .n, .vx-gal-selall .n { font-size:12px; color:var(--vx-faint); }
.vx-cli-selall + .vx-cli-lista { margin-top:10px; }

/* ══ SESSÃO QUE NÃO CAI (16/09/2026) ══
   Uma tela com erro mostra isto no lugar dela — o resto do Vortex (menu, carrinho, login) segue vivo. */
.vx-erro-tela { max-width:520px; margin:60px auto; padding:28px 26px; text-align:center; border-radius:calc(16px * var(--vx-raio, 1));
  background:var(--vx-bg-2); border:1px solid var(--vx-border); }
.vx-erro-tela h2 { margin:12px 0 6px; font-size:18px; font-weight:600; color:var(--vx-text); }
.vx-erro-tela p { margin:0 0 16px; font-size:13.5px; color:var(--vx-muted); }
.vx-erro-tela .bts { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
/* o aviso de que o Vortex vai atualizar (o publicador espera as abas fecharem) — fixo no rodapé, acima de tudo */
.vx-aviso-atualizacao { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:2000;
  display:flex; align-items:center; gap:10px; max-width:min(620px, calc(100vw - 24px)); padding:12px 16px;
  border-radius:calc(12px * var(--vx-raio, 1)); background:#f2b441; color:#1a1406; font-size:13.5px; line-height:1.4;
  box-shadow:var(--vx-sombra, 0 12px 32px -12px rgba(0,0,0,.55)); }
.vx-aviso-atualizacao .mud-icon-root { flex:0 0 auto; font-size:22px; }

/* o seletor Cartões | Lista da carteira: encosta à direita da barra de filtros */
.vx-cli-forma { display:inline-flex; align-items:center; gap:8px; margin-left:auto; }

/* ── FORMULÁRIOS DO /config em duas colunas ─────────────────────────────────────────────────── */
/* Existe como CLASSE, e não como `style` inline, exatamente para a media query poder desfazer:
   inline vence qualquer regra. O `min-width: 0` nos filhos é o que impede a coluna de crescer —
   `1fr` é `minmax(auto, 1fr)`, e esse "auto" não deixa a coluna ficar menor que o botão de dentro:
   era assim que o "Obter do ERP" ficava fora da tela, sem rolagem para alcançá-lo. */
.vx-cfg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-cfg-grid2 > * { min-width: 0; }
@media (max-width: 768px) { .vx-cfg-grid2 { grid-template-columns: 1fr; } }

/* Ranking + funil + materiais: 320px é o mínimo confortável no monitor, mas num aparelho de 320px
   a coluna nasce maior que a página inteira. Sai do `style` inline pelo mesmo motivo de sempre. */
.vx-grid.vx-grid-auto320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 720px) { .vx-grid.vx-grid-auto320 { grid-template-columns: 1fr; } }

/* ── A LINHA DA OFERTA NO TELEFONE ────────────────────────────────────────────────────────────
   A linha ja quebrava, mas quebrava errado: o bloco do cliente ficava com 89px de largura e 147px
   de ALTURA — "18.946.359 DIEGO DOS SANTOS SOARES" descendo palavra por palavra — enquanto o selo
   de status e o valor ocupavam a mesma linha, do lado. Uma oferta so' media 259px de altura.
   Aqui a identidade recebe a linha inteira (e' o que se le primeiro), status e valor dividem a
   linha seguinte, e os botoes fecham embaixo, do tamanho do dedo. */
@media (max-width: 600px) {
  .vx-of-row { row-gap: 10px; }
  .vx-of-id { flex: 0 0 auto; }
  /* Era `.vx-of-id + div`: "o irmao que vem depois do numero da oferta". So' a tela de OFERTAS tem
     esse numero — a Agenda e o Pos-venda reusam a mesma fileira comecando por um icone, entao o
     seletor nao casava e o corpo delas ficava sem regra nenhuma. Pior: a regra que faz os BOTOES
     crescerem (`> .mud-button-root`) e generica e casava nas tres. Resultado na Agenda: "Concluir"
     com 155px e o assunto espremido em 47px, descendo uma letra por linha. Agora o alvo e a classe
     do proprio corpo, que as tres telas carregam. */
  .vx-of-row > .vx-of-corpo { flex: 1 1 100%; min-width: 0; }
  .vx-of-row > .vx-of-cli { white-space: normal; }
  .vx-of-stat { order: 2; }
  .vx-of-val { order: 2; margin-left: auto; text-align: right; }
  .vx-of-row > .mud-button-root { order: 3; flex: 1 1 auto; min-height: 44px; }
  .vx-of-row > .mud-menu { order: 3; width: 44px; height: 44px; display: inline-flex;
                           align-items: center; justify-content: center; }
  /* A regra acima mira .mud-button-root para o botao de TEXTO ("Concluir", "Enviar") ocupar a linha
     com tamanho de dedo. Só que no MudBlazor o botao de ICONE carrega .mud-button-root tambem: em
     Comissoes os dois iconezinhos de editar/apagar ganhavam flex-grow e ficavam com 160px somados
     contra 59px do texto — o botao nao so' deixava de encolher, ele CRESCIA comendo o assunto.
     Icone e' alvo de toque, nao de largura: 44px fixos, o mesmo tamanho usado em .vx-cli-acoes. */
  .vx-of-row > .mud-icon-button { order: 3; flex: 0 0 44px; width: 44px; height: 44px; }
  /* A comissao e' o numero que importa nesta tela: vai junto do valor, na mesma linha e depois dele. */
  .vx-of-com { order: 2; min-width: 0; }
}

/* ── A CARTEIRA NO TELEFONE ───────────────────────────────────────────────────────────────────
   As tres primeiras colunas sao congeladas (sticky) para nao se perder de vista quem e o cliente
   enquanto se rola os meses. No monitor isso e' otimo; num telefone e' fatal: 78 + 220 + 150 dao
   448px de bloco congelado numa tela de 375px. O congelado ocupa o visor INTEIRO e sobra menos que
   zero para os meses — rolar de lado nao revela nada, so' desliza texto por baixo do bloco. E a
   matriz de meses e' o motivo da tela existir.

   Aqui so' o NOME fica preso (e' o que identifica; o codigo e a cidade podem sair de vista), e ele
   encolhe. Sobram ~235px de area rolavel, que mostram tres meses de uma vez — e mes cortado pela
   metade e' o proprio convite para arrastar, sem precisar de aviso nenhum.

   `left: auto` em vez de `position: static`: o thead precisa continuar sticky no eixo VERTICAL
   (top:0) para o cabecalho nao sumir ao rolar a lista. Trocar para static mataria isso junto. */
@media (max-width: 600px) {
  .vx-cart .c1 { left: auto; min-width: 0; }
  .vx-cart .c3 { left: auto; box-shadow: none; }
  .vx-cart .c2 { left: 0; min-width: 132px; max-width: 150px;
                 box-shadow: var(--vx-sombra, 6px 0 8px -6px rgba(0,0,0,.45)); }
}

/* O nome do cliente na Carteira abre a ficha — precisa PARECER clicavel, senao ninguem descobre. */
.vx-cart td.lnk { cursor: pointer; }
.vx-cart td.lnk:hover { color: var(--vx-teal-br); text-decoration: underline; text-underline-offset: 3px; }


/* ── SIMULADOR DO IMPULSO ─────────────────────────────────────────────────────────────────────
   Três colunas: a régua que se mexe, o que ela faz com as estrelas, e o que isso custa em prêmio.
   No telefone vira uma coluna só — é uma tela de decidir, não de conferir de relance. */
.vx-sim-aviso {
  font-size: 12.5px; line-height: 1.5; color: var(--vx-muted);
  background: var(--vx-bg-2); border-radius: calc(12px * var(--vx-raio, 1)); padding: 10px 12px; margin-bottom: 14px;
  border-left: 3px solid var(--vx-border-2);
}
.vx-sim-aviso.fraco { border-left-color: #f2b441; color: var(--vx-text); }
.vx-sim-aviso b { color: var(--vx-text); }

.vx-sim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.vx-sim-col { min-width: 0; }

.vx-sim-tit {
  font-size: 11px; letter-spacing: calc(.09em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-teal-soft); font-weight: 600; margin-bottom: 8px;
}
.vx-sim-ajuda { font-size: 11.5px; line-height: 1.5; color: var(--vx-faint); margin-bottom: 10px; }
.vx-sim-ajuda b { color: var(--vx-muted); }

.vx-sim-linha { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.vx-sim-linha .nm { flex: 1; min-width: 0; font-size: 13px; }
.vx-sim-linha .nm small { color: var(--vx-faint); }
.vx-sim-linha .un { font-size: 11px; color: var(--vx-faint); width: 34px; }
.vx-sim-linha .val { font-size: 13px; font-weight: 600; color: var(--vx-teal-br); }
.vx-sim-linha.ro { border-bottom: 1px dashed var(--vx-border); padding-bottom: 6px; }
.vx-input.num { width: 78px; text-align: right; }

.vx-sim-est {
  border: 1px solid var(--vx-border); border-radius: calc(11px * var(--vx-raio, 1));
  padding: 8px 10px; margin-bottom: 7px; background: var(--vx-surface);
}
.vx-sim-est.on { border-color: rgba(242,180,65,.5); background: rgba(242,180,65,.06); }
.vx-sim-est .top { display: flex; align-items: center; gap: 7px; }
.vx-sim-est .top .e { font-size: 15px; color: var(--vx-faint); }
.vx-sim-est.on .top .e { color: #f2b441; }
.vx-sim-est .top .nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; }
.vx-sim-est .top .sort { font-size: 13px; }
.vx-sim-est .sub { font-size: 11.5px; color: var(--vx-faint); margin-top: 4px; }
.vx-sim-est .sub b { color: var(--vx-text); }

.vx-sim-num {
  background: var(--vx-bg-2); border-radius: calc(12px * var(--vx-raio, 1)); padding: 10px 12px; margin-bottom: 10px;
}
.vx-sim-num b { display: block; font-size: 22px; font-weight: 600; color: var(--vx-text); line-height: 1.1; }
.vx-sim-num span { font-size: 11.5px; color: var(--vx-faint); }

.vx-sim-alerta {
  font-size: 12px; line-height: 1.5; border-radius: calc(10px * var(--vx-raio, 1)); padding: 9px 11px;
  background: rgba(229,72,77,.10); border: 1px solid rgba(229,72,77,.35); color: var(--vx-text);
}
.vx-sim-alerta.ok { background: color-mix(in srgb, var(--vx-teal-br) 8%, transparent); border-color: color-mix(in srgb, var(--vx-teal-br) 32%, transparent); }

.vx-sim-tab { margin-top: 8px; font-size: 12.5px; }
.vx-sim-tab .cab, .vx-sim-tab .lin {
  display: grid; grid-template-columns: 1.6fr .6fr .8fr .8fr; gap: 8px;
  padding: 7px 4px; align-items: center;
}
.vx-sim-tab .cab {
  font-size: 10.5px; letter-spacing: calc(.07em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-faint); border-bottom: 1px solid var(--vx-border);
}
.vx-sim-tab .lin { border-bottom: 1px solid var(--vx-border); }
.vx-sim-tab .lin span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.vx-sim-tab .sobe { color: var(--vx-teal-br); font-weight: 600; }
.vx-sim-tab .desce { color: #f2b441; font-weight: 600; }

@media (max-width: 900px) {
  .vx-sim-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .vx-sim-tab .cab, .vx-sim-tab .lin { grid-template-columns: 1.3fr .5fr .7fr .7fr; font-size: 11.5px; }
  .vx-input.num { width: 72px; }
}

/* ── EXTRATO DO IMPULSO ────────────────────────────────────────────────────────────────────────
   O razão aberto. Nada aqui é apagado: quando um marco se desfaz, entra uma linha negativa ao lado
   da original — e é a leitura das duas juntas que permite conferir. */
.vx-ext-topo { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.vx-ext-topo .n {
  flex: 1 1 0; min-width: 96px; background: var(--vx-bg-2); border-radius: calc(11px * var(--vx-raio, 1)); padding: 9px 11px;
}
.vx-ext-topo .n b { display: block; font-size: 19px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.vx-ext-topo .n span { font-size: 11px; color: var(--vx-faint); }
.vx-ext-topo .n.destaque b { color: var(--vx-teal-br); }
.vx-ext-ajuda { font-size: 11.5px; line-height: 1.5; color: var(--vx-faint); margin-bottom: 10px; }
.vx-ext-ajuda b { color: var(--vx-muted); }

.vx-ext { display: flex; flex-direction: column; }
.vx-ext .lin {
  display: grid; grid-template-columns: 104px 1fr 62px; gap: 10px; align-items: center;
  padding: 9px 4px; border-bottom: 1px solid var(--vx-border); font-size: 12.5px;
}
.vx-ext .lin .dt { color: var(--vx-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.vx-ext .lin .ev { min-width: 0; }
.vx-ext .lin .ev small { display: block; color: var(--vx-faint); font-size: 11px; margin-top: 1px; }
.vx-ext .lin .pt {
  text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--vx-teal-br);
}
.vx-ext .lin.neg .pt { color: #f2b441; }

/* o número do painel do Impulso abre o extrato — precisa parecer que abre */
.vx-gam .pt.lnk { cursor: pointer; border-radius: calc(8px * var(--vx-raio, 1)); padding: 2px 6px; margin: -2px -6px; }
.vx-gam .pt.lnk:hover { background: rgba(255,255,255,.06); }

@media (max-width: 600px) {
  .vx-ext .lin { grid-template-columns: 86px 1fr 54px; gap: 8px; font-size: 12px; }
  .vx-ext .lin .dt { font-size: 10.5px; }
}

/* Corrida recolhida: sobra a faixa do titulo, com o + para trazer de volta. Painel que nao se pode
   fechar vira ruido fixo — e nem todo dia se quer o placar na frente. */
.vx-cabine-plc.corrida.min { cursor: default; padding-bottom: 10px; }
.vx-cabine-plc.corrida.min .tt { margin-bottom: 0; }


/* ── CAÇADA (modo hard) ───────────────────────────────────────────────────────────────────────
   Uma tela de DECIDIR, não de conferir: cada cartão é uma ligação para fazer, e o que ele mostra
   é a conta que o gerou. Por isso o motivo tem o mesmo peso visual do nome do cliente — esconder
   a razão num tooltip transformaria a tela num oráculo, e oráculo ninguém segue duas semanas. */
.vx-caca-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.vx-caca-base {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 4px 0 18px;
}
.vx-caca-base .n {
  background: var(--vx-bg-2); border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1));
  padding: 10px 12px; min-width: 0;
}
.vx-caca-base .n b {
  display: block; font-family: var(--vx-display); font-size: 21px; font-weight: 600;
  color: var(--vx-text); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.vx-caca-base .n b small { font-size: 13px; font-weight: 500; color: var(--vx-faint); }
.vx-caca-base .n span { font-size: 11.5px; color: var(--vx-faint); line-height: 1.35; display: block; }

.vx-caca-foco-tit {
  font-size: 11px; letter-spacing: calc(.09em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-teal-soft); font-weight: 600; margin: 2px 0 8px;
}
.vx-caca-foco { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }

.vx-caca-sec { margin-bottom: 22px; }
.vx-caca-sec .cab { display: flex; align-items: center; gap: 8px; color: var(--vx-text); }
.vx-caca-sec .cab .tt { font-size: 14.5px; font-weight: 600; }
.vx-caca-sec .cab .qt {
  font-size: 11px; font-weight: 600; color: var(--vx-faint);
  border: 1px solid var(--vx-border-2); border-radius: var(--vx-pill, 999px); padding: 1px 7px;
}
.vx-caca-sec .ex { font-size: 12px; color: var(--vx-faint); line-height: 1.5; margin: 4px 0 10px; }

.vx-caca-lista {
  /* auto-fill com minmax: a lista se acomoda de 1 a 4 colunas conforme a largura, sem um
     breakpoint por tamanho de tela. O 260px é o ponto em que o nome do material ainda cabe. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
}

.vx-caca-card {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-left: 3px solid var(--vx-border-2);
  border-radius: calc(13px * var(--vx-raio, 1)); padding: 12px 13px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  transition: border-color .18s var(--vx-smooth), transform .18s var(--vx-smooth);
}
.vx-caca-card:hover { border-color: var(--vx-border-2); transform: translateY(-1px); }
.vx-caca-card.destaque { background: var(--vx-surface-2); padding: 14px 15px; }

/* A cor é do TIPO de alvo, e ela repete o vocabulário do resto do sistema: teal é o que já é
   negócio, âmbar é o que está esfriando, vermelho é o que passou do combinado. */
.vx-caca-card.t-ciclo    { border-left-color: var(--vx-frio); }
.vx-caca-card.t-recompra { border-left-color: var(--vx-teal-br); }
.vx-caca-card.t-familia  { border-left-color: var(--vx-teal-soft); }
.vx-caca-card.t-encalhe  { border-left-color: var(--vx-morno); }

.vx-caca-card .tp {
  font-size: 10px; letter-spacing: calc(.08em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-faint); font-weight: 600; margin-bottom: 2px;
}
.vx-caca-card .al {
  font-size: 14.5px; font-weight: 600; color: var(--vx-text); line-height: 1.25;
  /* nome de cliente é imprevisível ("1310, FLETCHER ST, HUNTSVILLE"): quebra em vez de estourar */
  overflow-wrap: anywhere;
}
.vx-caca-card.destaque .al { font-family: var(--vx-display); font-size: 17px; }
.vx-caca-card .mt {
  font-size: 12.5px; color: var(--vx-teal-soft); line-height: 1.3; overflow-wrap: anywhere;
}
.vx-caca-card .on { font-size: 11.5px; color: var(--vx-faint); }
.vx-caca-card .pq { font-size: 12px; color: var(--vx-muted); line-height: 1.45; }
.vx-caca-card .pq.forte { color: var(--vx-text); }
.vx-caca-card .ac { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 1100px) {
  .vx-caca-foco { grid-template-columns: repeat(2, 1fr); }
  .vx-caca-base { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* No telefone é uma coluna só e o foco vira a primeira coisa da tela: a caçada se usa em pé,
     entre uma visita e outra, e rolar horizontalmente para ler um motivo mata o uso. */
  .vx-caca-foco { grid-template-columns: 1fr; }
  .vx-caca-lista { grid-template-columns: 1fr; }
  .vx-caca-base { gap: 8px; }
  .vx-caca-base .n { padding: 9px 10px; }
  .vx-caca-base .n b { font-size: 18px; }
  .vx-caca-topo { width: 100%; }
  .vx-caca-card .ac .mud-button { flex: 1 1 auto; }
}


/* ── BURACO DE MINHOCA ─────────────────────────────────────────────────────────────────────────
   A corrida fica ACIMA dos vales de resgate porque é ela que dá o preço real de trocar um vale
   pequeno — e esse preço tem que estar visível antes do botão que o cobra. Aparece sempre que há
   um buraco ativo: trancado, pronto, ou com a mesa sendo reposta. Alvo perseguido por meses que
   some da tela quando o estoque zera não é lido como "acabou o prêmio", é lido como "tiraram de
   mim" — e isso é pior do que ver o alvo travado. */
.vx-buraco {
  flex: 1 1 100%; margin-top: 4px;
  background: var(--vx-bg-2); border: 1px solid var(--vx-border);
  border-left: 3px solid var(--vx-border-2);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 10px 12px;
}
.vx-buraco.on {
  border-color: rgba(124,156,245,.4); border-left-color: #7c9cf5;
  background: linear-gradient(135deg, rgba(124,156,245,.10), var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 6%, transparent)));
}
.vx-buraco .cab { display: flex; align-items: center; gap: 8px; }
.vx-buraco .cab .ic { font-size: 15px; }
.vx-buraco .cab .nm { font-size: 13px; font-weight: 600; color: var(--vx-text); flex: 1 1 auto; min-width: 0; }
.vx-buraco .cab .mesa {
  background: none; border: 1px solid var(--vx-border-2); color: var(--vx-teal-soft);
  border-radius: var(--vx-pill, 999px); padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.vx-buraco .cab .mesa:hover { background: var(--vx-surface-2); }
.vx-buraco .bar {
  height: 6px; border-radius: var(--vx-pill, 999px); background: var(--vx-surface-2); overflow: hidden; margin: 8px 0 6px;
}
.vx-buraco .bar i { display: block; height: 100%; background: linear-gradient(90deg, #7c9cf5, var(--vx-teal-br)); }
.vx-buraco .sub { font-size: 11.5px; color: var(--vx-muted); line-height: 1.45; }
.vx-buraco .sub b { color: var(--vx-text); }
.vx-buraco .sub small { color: var(--vx-faint); }
.vx-buraco .abrir {
  margin-top: 9px; width: 100%; min-height: 42px;
  border: none; border-radius: calc(11px * var(--vx-raio, 1)); cursor: pointer; font-weight: 700; font-size: 13px; color: var(--vx-sobre-destaque, #04110c);
  background: linear-gradient(135deg, #7c9cf5, var(--vx-teal-br));
}
.vx-buraco .abrir:hover { filter: brightness(1.07); }

/* ── A RODA ──────────────────────────────────────────────────────────────────────────────────
   Fatias proporcionais ao peso REAL, com a mesma cor na roda e na lista abaixo: é o que faz a
   roleta parecer justa quando dá prêmio ruim, porque dá para conferir que a fatia do prêmio comum
   é mesmo a maior. E a parada é limpa — desacelerar raspando na fatia boa antes de cair na pequena
   é o truque que o vendedor descobre no terceiro giro, e aí a desconfiança contamina o CRM todo. */
/* MAIOR E MAIS LEGIVEL (pedido do Daniel). A roda tinha 230px e as fatias diziam a chance em
   texto de 13px com o nome em 9,5 -- num premio que a pessoa persegue por semanas, isso e' pouco.
   E o poco de estrelas atras precisa de espaco para o funil aparecer: em 230px ele vira um borrao. */
.vx-rol { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 2px; }
.vx-rol-roda { position: relative; width: 320px; height: 320px; max-width: 82vw; max-height: 82vw; }
/* SEM RODA, o buraco pode ocupar o que a roda ocupava -- e ele precisa: o anel de Einstein so'
   aparece inteiro quando ha' espaco em volta da garganta. */
/* SEM RODA, o buraco toma a cena -- e precisa: o anel de Einstein so' fecha quando ha' ceu em
   volta da garganta. 520px num dialogo Medium, e o vh como teto para nao estourar no notebook. */
/* A BOCA voltou a 520 e a JANELA ficou maior: o que faltava nao era buraco, era FOLGA em volta
   dele. Boca de 660 numa janela justa empurra a mesa para fora e cria barra de rolagem -- e rolar
   no meio de uma travessia e' o oposto de uma experiencia. */
.vx-rol-roda.so-buraco { width: 520px; height: 520px; max-width: 84vw; max-height: 52vh; }
.vx-rol-roda.so-buraco .vx-bur-poco {
  width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 88%);
          mask-image: radial-gradient(circle, #000 62%, transparent 88%);
}

/* O POCO fica ATRAS de tudo e VAZA para fora da roda: o funil de gravidade nao termina na borda do
   disco, e cortar ali faria o buraco parecer um adesivo colado no meio da roleta. */
.vx-bur-poco {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 230%; height: 230%; z-index: 0; pointer-events: none; overflow: hidden;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 46%, transparent 72%);
          mask-image: radial-gradient(circle, #000 46%, transparent 72%);
}
.vx-bur-canvas { display: block; width: 100%; height: 100%; }

/* O PREMIO NASCE NO CENTRO, por cima do poco: ele saiu de dentro, entao e' de dentro que ele vem. */
.vx-bur-premio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4; width: 78%; text-align: center; pointer-events: none;
  animation: vxBurPremio .7s cubic-bezier(.16,1,.3,1) both;
}
.vx-bur-premio b {
  display: block; font-size: 26px; font-weight: 800; line-height: 1.15; color: #f2fffa;
  text-shadow: var(--vx-sombra-texto, 0 2px 12px rgba(0,0,0,.9), 0 0 22px color-mix(in srgb, var(--vx-teal-br) 55%, transparent));
}
.vx-bur-premio span {
  display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.4; color: rgba(233,236,244,.9);
  text-shadow: var(--vx-sombra-texto, 0 1px 8px rgba(0,0,0,.95));
}
@keyframes vxBurPremio {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.35); filter: blur(6px); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) { .vx-bur-premio { animation: none; } }
/* A RODA VIROU ANEL. Cheia, ela tapava exatamente a garganta -- e a garganta e' o que ha' para
   ver. Como anel, as duas coisas convivem: a chance de cada premio continua legivel na borda, e o
   buraco aparece no meio, que e' de onde o premio vai sair. */
.vx-rol-disco {
  position: absolute; inset: 0; border-radius: 50%; z-index: 1;
  border: 3px solid var(--vx-border-2);
  transition: transform 3.2s cubic-bezier(.17,.67,.2,1);
  -webkit-mask-image: radial-gradient(circle, transparent 43%, #000 44.5%);
          mask-image: radial-gradient(circle, transparent 43%, #000 44.5%);
  opacity: .92;
}
/* ATRAVESSAR APAGA A RODA. Durante o mergulho a roleta seria ruido por cima do funil -- e o que
   importa nesses dois segundos e' a travessia, nao a fatia em que ela vai parar. */
.vx-rol-roda.girando .vx-rol-disco,
.vx-rol-roda.girando .vx-rol-aro,
.vx-rol-roda.girando .vx-rol-ponteiro { opacity: .18; transition: opacity .8s ease, transform 3.2s cubic-bezier(.17,.67,.2,1); }
.vx-rol-roda.parou .vx-rol-disco,
.vx-rol-roda.parou .vx-rol-aro { opacity: .3; }
.vx-rol-roda.parou .vx-rol-centro { opacity: 0; }
.vx-rol-ponteiro {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 20px; color: var(--vx-text); z-index: 2;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
/* O MIOLO NAO TAPA MAIS NADA: era um disco solido com um emoji, bem em cima da garganta. Virou
   so' o aro que marca onde ela comeca -- o que preenche o meio agora e' o buraco. */
.vx-rol-centro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 132px; height: 132px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(150,255,222,.18);
  display: flex; align-items: center; justify-content: center; font-size: 0;
  pointer-events: none;
}

/* O NOME E A CHANCE DENTRO DA FATIA. O <span> contra-gira o mesmo tanto que o disco, então o texto
   fica de pé quando a roda para — e não deitado num ângulo qualquer, que é o que acontece quando se
   deixa o rótulo girar junto. A transição casa com a do disco para os dois andarem colados. */
.vx-rol-disco .fat {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  transform-origin: 0 0; pointer-events: none;
}
.vx-rol-disco .fat > span {
  display: block; transform-origin: 50% 50%;
  transition: transform 3.2s cubic-bezier(.17,.67,.2,1);
  width: 108px; margin: -20px 0 0 -54px; text-align: center;
  color: #06130f; text-shadow: 0 1px 2px rgba(255,255,255,.35);
}
.vx-rol-disco .fat b { display: block; font-size: 16px; font-weight: 800; line-height: 1.1; }
.vx-rol-disco .fat i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 700;
  line-height: 1.2; opacity: .82; overflow-wrap: anywhere;
}

/* O aro fica FORA do disco que gira: ele é a moldura, e girar junto faria a borda tremer. */
.vx-rol-aro {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: var(--vx-sombra, inset 0 0 0 3px var(--vx-border-2), 0 10px 30px -14px rgba(0,0,0,.7));
}
.vx-rol-roda.parou .vx-rol-aro {
  box-shadow: var(--vx-sombra, inset 0 0 0 3px color-mix(in srgb, var(--vx-teal-br) 60%, transparent), 0 0 26px -4px var(--vx-teal-glow));
}
.vx-rol-roda.parou .vx-rol-centro {
  border-color: color-mix(in srgb, var(--vx-teal-br) 60%, transparent);
  animation: vxRolPop .5s var(--vx-spring) both;
}
@keyframes vxRolPop { from { transform: translate(-50%,-50%) scale(.72); } to { transform: translate(-50%,-50%) scale(1); } }

/* Quem pediu menos movimento vê o resultado sem a roda girar. */
@media (prefers-reduced-motion: reduce) {
  .vx-rol-disco .fat > span { transition: none; }
  .vx-rol-roda.parou .vx-rol-centro { animation: none; }
}
.vx-rol-premio {
  text-align: center; padding: 10px 14px; border-radius: calc(12px * var(--vx-raio, 1));
  background: color-mix(in srgb, var(--vx-teal-br) 10%, transparent); border: 1px solid color-mix(in srgb, var(--vx-teal-br) 35%, transparent); width: 100%;
}
.vx-rol-premio.consolo { background: rgba(242,180,65,.10); border-color: rgba(242,180,65,.35); }
.vx-rol-premio b { display: block; font-size: 16px; color: var(--vx-text); }
.vx-rol-premio span { font-size: 12px; color: var(--vx-muted); }
.vx-rol-aviso {
  font-size: 12px; color: var(--vx-muted); text-align: center; line-height: 1.5;
  background: var(--vx-bg-2); border-radius: calc(10px * var(--vx-raio, 1)); padding: 9px 11px; width: 100%;
}
.vx-rol-aviso b { color: var(--vx-text); }

.vx-rol-mesa { margin-top: 14px; font-size: 13.5px; }
.vx-rol-mesa .cab {
  font-size: 10.5px; letter-spacing: calc(.08em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-faint); margin-bottom: 6px;
}
.vx-rol-mesa .lin {
  display: flex; align-items: center; gap: 8px; padding: 6px 2px;
  border-bottom: 1px solid var(--vx-border);
}
.vx-rol-mesa .lin.off { opacity: .45; }
.vx-rol-mesa .lin .cor { width: 10px; height: 10px; border-radius: calc(3px * var(--vx-raio, 1)); flex: 0 0 auto; }
.vx-rol-mesa .lin .nm { flex: 1 1 auto; min-width: 0; color: var(--vx-text); overflow-wrap: anywhere; }
.vx-rol-mesa .lin .nm small { display: block; color: var(--vx-faint); font-size: 11px; }
.vx-rol-mesa .lin .qt { font-size: 12.5px; color: var(--vx-faint); white-space: nowrap; }
.vx-rol-mesa .lin .ch {
  font-size: 12px; font-weight: 600; color: var(--vx-teal-soft);
  width: 42px; text-align: right; font-variant-numeric: tabular-nums;
}

/* Quem pediu menos movimento não gira: revela direto. A mesma cortesia que o bilhete já faz. */
@media (prefers-reduced-motion: reduce) {
  .vx-rol-disco { transition: none; }
}
@media (max-width: 600px) {
  .vx-rol-roda { width: 190px; height: 190px; }
  .vx-rol-centro { width: 62px; height: 62px; font-size: 22px; }
}


/* ── O GARIMPO ─────────────────────────────────────────────────────────────────────────────────
   O campo de planetas que substituiu a roleta (ver vx-garimpo.js).

   A JANELA E' ESCURA DE VERDADE e sem moldura: o que sobra na tela e' o espaco. Um cartao claro em
   volta de um campo estelar transforma a cena em ilustracao dentro de um formulario -- e o instante
   em que a pessoa recebe o premio que perseguiu por semanas tem UMA chance de estar a altura. */
.mud-dialog.vx-gar-fundo {
  max-width: 980px !important; width: 92vw;
  background: #05070d; border: 1px solid rgba(150, 255, 222, .14);
  box-shadow: var(--vx-sombra, 0 40px 120px -30px rgba(0, 0, 0, .95), 0 0 90px -40px color-mix(in srgb, var(--vx-teal-br) 30%, transparent));
}
.mud-dialog.vx-gar-fundo .mud-dialog-content { padding-top: 4px; max-height: none; overflow: visible; }

.vx-gar-titulo { display: flex; align-items: center; gap: 10px; }
.vx-gar-titulo .ic { font-size: 20px; }
.vx-gar-titulo .nm { font-weight: 500; font-size: 16px; }
.vx-gar-titulo .ds { font-size: 11.5px; color: var(--vx-faint); }

.vx-gar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 0 2px; }

/* O CAMPO tem proporcao fixa (16:9 deitado) em vez de altura em pixel: o arranjo dos planetas usa o
   aspecto para se espalhar, e uma caixa que muda de proporcao com a largura da tela faria o mesmo
   sorteio mostrar planetas em posicoes diferentes em cada monitor. */
.vx-gar-campo {
  /* A LARGURA SAI DA ALTURA DISPONIVEL, e nao o contrario. Com width:100% + aspect-ratio, o campo
     tinha 495px de altura fixos e o dialogo passava dos 800 -- em notebook de 900px de tela, com o
     titulo, o aviso, a mesa e os botoes, sobrava rolagem. Agora ele encolhe proporcionalmente pela
     ALTURA da janela e para de empurrar o resto para fora. */
  position: relative; width: min(100%, calc(46vh * 16 / 9)); max-width: 880px; aspect-ratio: 16 / 9;
  border-radius: calc(14px * var(--vx-raio, 1)); overflow: hidden; background: #04060c;
  border: 1px solid rgba(150, 255, 222, .10);
  transition: box-shadow .5s ease, border-color .5s ease;
}
.vx-gar-campo.extraindo { box-shadow: var(--vx-sombra, 0 0 60px -18px color-mix(in srgb, var(--vx-teal-br) 55%, transparent)); border-color: rgba(150, 255, 222, .3); }
.vx-gar-campo.achou { box-shadow: var(--vx-sombra, 0 0 90px -20px rgba(255, 214, 140, .5)); border-color: rgba(255, 214, 140, .34); }
.vx-gar-poco { position: absolute; inset: 0; }
.vx-garimpo-cv { display: block; width: 100%; height: 100%; }

.vx-gar-semcena {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--vx-faint); text-align: center; padding: 16px;
}

/* O PREMIO NASCE NO MEIO DO CAMPO, por cima do planeta que abriu -- ele saiu de dentro, entao e' de
   dentro que ele vem. */
/* O NOME CAI EM CIMA DE UM PLANETA ACESO, e planeta aceso e' claro: sem um escurecimento proprio
   por tras, o texto branco desaparecia justamente no premio de cor clara. O degrade radial escurece
   so' o miolo, entao ele nao vira um retangulo colado sobre a cena. */
.vx-gar-premio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 4; width: 80%; text-align: center; pointer-events: none;
  padding: 26px 18px;
  background: radial-gradient(ellipse at center, rgba(3, 6, 12, .74) 0%, rgba(3, 6, 12, .42) 52%, rgba(3, 6, 12, 0) 78%);
  animation: vxGarPremio .7s cubic-bezier(.16, 1, .3, 1) both;
}
.vx-gar-premio b {
  display: block; font-size: 34px; font-weight: 800; line-height: 1.1; color: #fffdf6;
  letter-spacing: calc(-.4px * var(--vx-tracking, 1)); text-wrap: balance;
  text-shadow: var(--vx-sombra-texto, 0 2px 6px rgba(0, 0, 0, 1), 0 3px 20px rgba(0, 0, 0, .95), 0 0 34px rgba(255, 214, 140, .55));
}
.vx-gar-premio span {
  display: block; margin-top: 9px; font-size: 14.5px; line-height: 1.45; color: rgba(244, 244, 250, .94);
  max-width: 30ch; margin-left: auto; margin-right: auto;
  text-shadow: var(--vx-sombra-texto, 0 1px 4px rgba(0, 0, 0, 1), 0 2px 12px rgba(0, 0, 0, .95));
}
.vx-gar-premio.consolo b { font-size: 22px; color: #ffe2ab; text-shadow: var(--vx-sombra-texto, 0 2px 14px rgba(0,0,0,.92)); }
@keyframes vxGarPremio {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); filter: blur(7px); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* A LINHA QUE A VARREDURA ACENDE. E' o vinculo entre o planeta la' em cima e o nome aqui embaixo --
   quem classifica a linha e' o JavaScript, a cada quadro (ver acenderLinha), porque sessenta
   re-renders por segundo atravessando o Blazor Server derrubariam a pagina inteira. */
.vx-gar-mesa .lin { transition: background .18s ease, box-shadow .18s ease; border-radius: calc(6px * var(--vx-raio, 1)); padding-left: 6px; padding-right: 6px; margin: 0 -6px; }
/* EM TELA BAIXA a mesa aperta e o detalhe do premio sai: o nome, a quantidade e a chance sao o que
   precisa ser conferido contra os planetas -- a descricao cabe no titulo do elemento. */
@media (max-height: 900px) {
  .mud-dialog.vx-gar-fundo .vx-gar-mesa .lin { padding-top: 4px; padding-bottom: 4px; }
  .mud-dialog.vx-gar-fundo .vx-gar-mesa .lin .nm small { display: none; }
}
.vx-gar-mesa .lin.acesa { background: color-mix(in srgb, var(--vx-teal-br) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
.vx-gar-mesa .lin.escolhida { background: rgba(255, 214, 140, .12); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .38); }
.vx-gar-mesa .lin.escolhida .nm { color: #fff3d9; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .vx-gar-premio { animation: none; }
  .vx-gar-mesa .lin { transition: none; }
}
@media (max-width: 700px) {
  .vx-gar-campo { aspect-ratio: 4 / 3; }
  .vx-gar-premio b { font-size: 22px; }
  .vx-gar-premio span { font-size: 12.5px; }
}


/* ── MINHA JORNADA ─────────────────────────────────────────────────────────────────────────────
   A página de quem trabalhou. O Impulso vivia todo numa faixa espremida ao lado do trabalho: dava
   para acompanhar, não para se RECONHECER. Aqui a mesma verdade é contada pelo lado de quem fez. */
.vx-jor-topo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.vx-jor-topo .n {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: calc(14px * var(--vx-raio, 1)); padding: 14px 16px; min-width: 0;
}
/* O troféu ganha o destaque porque é o número que a pessoa olha com orgulho — e é o único que
   nunca desce. Os outros dois se mexem o tempo todo. */
.vx-jor-topo .n.troféu {
  border-color: color-mix(in srgb, var(--vx-teal-br) 32%, transparent);
  background: linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 10%, transparent)), var(--vx-surface));
}
.vx-jor-topo .n b {
  display: block; font-family: var(--vx-display); font-size: 30px; font-weight: 600;
  color: var(--vx-text); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.vx-jor-topo .n.troféu b { color: var(--vx-teal-br); }
.vx-jor-topo .n span { display: block; font-size: 12.5px; color: var(--vx-muted); margin-top: 2px; }
.vx-jor-topo .n small { display: block; font-size: 11px; color: var(--vx-faint); margin-top: 3px; line-height: 1.4; }

.vx-jor-sec { margin-bottom: 24px; }
.vx-jor-sec .cab { display: flex; align-items: center; gap: 8px; }
.vx-jor-sec .cab .tt { font-size: 15px; font-weight: 600; color: var(--vx-text); }
.vx-jor-sec .cab .qt {
  font-size: 11px; font-weight: 600; color: var(--vx-faint);
  border: 1px solid var(--vx-border-2); border-radius: var(--vx-pill, 999px); padding: 1px 8px;
}
.vx-jor-sec .ex { font-size: 12px; color: var(--vx-faint); line-height: 1.5; margin: 5px 0 12px; }

/* Os feitos: o número primeiro, porque é o que a pessoa conta ("fiz 12 pedidos"). */
.vx-jor-feitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.vx-jor-feito {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-left: 3px solid var(--vx-teal-soft);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 11px 13px; min-width: 0;
}
.vx-jor-feito b {
  display: block; font-family: var(--vx-display); font-size: 24px; font-weight: 600;
  color: var(--vx-text); line-height: 1.1;
}
.vx-jor-feito .rt { display: block; font-size: 12.5px; color: var(--vx-muted); overflow-wrap: anywhere; }
.vx-jor-feito .pt { display: inline-block; font-size: 11.5px; color: var(--vx-teal-soft); margin-top: 4px; }
.vx-jor-feito .es { display: inline-block; font-size: 11px; color: var(--vx-morno); margin-left: 8px; }

.vx-jor-estrelas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.vx-jor-estrela {
  display: flex; align-items: center; gap: 11px;
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 11px 13px; min-width: 0;
}
.vx-jor-estrela.on { border-color: rgba(242,180,65,.4); background: rgba(242,180,65,.06); }
.vx-jor-estrela .ic { font-size: 20px; color: var(--vx-faint); flex: 0 0 auto; }
.vx-jor-estrela.on .ic { color: #f2b441; }
.vx-jor-estrela .tx { flex: 1 1 auto; min-width: 0; }
.vx-jor-estrela .tx b { display: block; font-size: 13.5px; color: var(--vx-text); overflow-wrap: anywhere; }
.vx-jor-estrela .tx span { display: block; font-size: 11.5px; color: var(--vx-faint); line-height: 1.4; }
.vx-jor-estrela .st {
  font-size: 10.5px; font-weight: 700; letter-spacing: calc(.06em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: #f2b441; flex: 0 0 auto;
}
.vx-jor-estrela .pr { flex: 0 0 82px; text-align: right; }
.vx-jor-estrela .pr .bar { height: 5px; border-radius: var(--vx-pill, 999px); background: var(--vx-surface-2); overflow: hidden; }
.vx-jor-estrela .pr .bar i { display: block; height: 100%; background: var(--vx-teal-br); }
.vx-jor-estrela .pr .n { font-size: 11px; color: var(--vx-faint); font-variant-numeric: tabular-nums; }

.vx-jor-premios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.vx-jor-premio {
  background: var(--vx-surface); border: 1px solid var(--vx-border);
  border-left: 3px solid var(--vx-border-2);
  border-radius: calc(12px * var(--vx-raio, 1)); padding: 11px 13px; min-width: 0;
}
/* Aguardando é o único estado que pede ação de outra pessoa — e por isso é o único que grita. */
.vx-jor-premio.aguardando { border-left-color: var(--vx-morno); background: rgba(242,180,65,.05); }
.vx-jor-premio.entregue { border-left-color: var(--vx-teal); opacity: .82; }
.vx-jor-premio .nm { font-size: 13.5px; font-weight: 600; color: var(--vx-text); overflow-wrap: anywhere; }
.vx-jor-premio .de { font-size: 12px; color: var(--vx-muted); line-height: 1.4; }
.vx-jor-premio .qd { font-size: 11px; color: var(--vx-faint); margin-top: 4px; line-height: 1.4; }

@media (max-width: 900px) { .vx-jor-topo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .vx-jor-topo { grid-template-columns: 1fr; gap: 10px; }
  .vx-jor-topo .n b { font-size: 26px; }
  .vx-jor-feitos, .vx-jor-estrelas, .vx-jor-premios { grid-template-columns: 1fr; }
}

/* As ações da jornada: o bilhete, o buraco e os vales, no mesmo bloco. Elas moram aqui porque é
   aqui que a pessoa está olhando os números que as destravam — ver saldo numa tela e ter de ir a
   outra para usar é o jeito mais rápido de o saldo virar enfeite. */
.vx-jor-acoes {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--vx-bg-2); border: 1px solid var(--vx-border);
  border-radius: calc(14px * var(--vx-raio, 1)); padding: 14px 16px; margin-bottom: 22px;
}
.vx-jor-acoes .vx-buraco { margin-top: 0; }
.vx-jor-acoes .vx-gam-niveis { margin: 0; }

/* O selo que substitui a lixeira na atividade que veio da gestão. Ele ocupa o mesmo lugar do botão
   de propósito: sumir sem dizer nada faria a pessoa procurar a lixeira achando que a tela quebrou.
   Aqui ela lê o motivo no lugar onde ia clicar. */
.vx-atv-dono {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--vx-faint);
  border: 1px solid var(--vx-border); border-radius: var(--vx-pill, 999px); padding: 4px 10px;
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   GALERIA NO CELULAR: a pedra primeiro.

   O catálogo abria com uma tela e meia de controle antes da primeira chapa — título, dois botões,
   busca, estado, moeda, ver por, acabamento, espessura e tipo, cada um numa faixa. No desktop isso
   cabe numa tira; num aparelho de 375px vira um formulário na frente do produto.

   Aqui os cinco últimos entram numa gaveta (o botão "filtros" só existe abaixo de 720px), os dois
   botões de ação perdem o rótulo e viram ícone, e a busca sobe para a mesma linha deles.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-gal-ftog { display:none; }

@media (max-width: 720px) {
  .vx-gal-ftog {
    display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
    min-height:36px; padding:0 14px; border-radius:var(--vx-pill, 999px); cursor:pointer;
    border:1px solid var(--vx-border); background:var(--vx-surface-2); color:var(--vx-muted);
    font:inherit; font-size:12.5px;
  }
  .vx-gal-ftog.on { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
  /* :not(.fabre) e não display:none no elemento: a gaveta aberta precisa voltar ao layout que o
     bloco de 720px já desenhou para ela (chips que rolam de lado, rótulo em linha própria). */
  .vx-gal-verpor:not(.fabre), .vx-gal-filtros:not(.fabre) { display:none; }

  /* os dois botões viram ícone e a busca divide a linha com eles */
  .vx-gal-btxt { display:none; }
  .vx-gal-head > div:last-child > .mud-button-root { flex:0 0 auto; min-width:44px; padding-left:12px; padding-right:12px; }
  .vx-gal-head > div:last-child > .mud-button-root .mud-button-icon-start { margin:0; }
  .vx-gal-head > div:last-child > .vx-input { flex:1 1 140px; width:auto !important; min-width:0; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   CARTEIRA NO CELULAR: a tabela antes dos seletores.

   Mesma doença da Galeria — parágrafo de sete linhas, seis seletores empilhados e a legenda antes
   da primeira linha da carteira. O parágrafo repete em prosa o que a legenda diz em chips, e a
   legenda é o que resta no celular, onde não existe tooltip: some o texto, fica a legenda.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-cart-ftog { display:none; }

@media (max-width: 720px) {
  .vx-cart-ftog {
    display:inline-flex; align-items:center; gap:6px;
    min-height:36px; padding:0 14px; margin:0 0 8px; border-radius:var(--vx-pill, 999px); cursor:pointer;
    border:1px solid var(--vx-border); background:var(--vx-surface-2); color:var(--vx-muted);
    font:inherit; font-size:12.5px;
  }
  .vx-cart-ftog.on { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
  /* Esconde o SELECT INTEIRO, não o controle de dentro: o Class= do MudSelect cai no
     .mud-input-control interno, e some com ele deixava a casca .mud-select de 17px na tela —
     cinco fatias verticais empurrando a busca para o meio da linha. */
  .vx-cart-filtros:not(.fabre) > .mud-select { display:none; }
  .vx-cart-filtros.fabre > .mud-select { flex:1 1 100%; }
  .vx-cart-filtros.fabre .vx-cart-fmais { min-width:0 !important; }
}

/* Texto que só faz sentido com espaço para ele: explicação longa de tela, que no celular disputa
   lugar com o próprio conteúdo que explica. */
@media (max-width: 720px) { .vx-so-larga { display:none; } }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   CARTEIRA NO CELULAR: cada cliente vira um CARTÃO.

   A grade de meses é boa numa tela larga e ruim num telefone: quinze colunas coladas rolando de
   lado, com o nome do cliente grudado à esquerda e a cor do mês do outro lado do gesto. E a cor
   sozinha não diz nada quando o title não é alcançável por dedo nenhum.

   Aqui a linha vira cartão: nome em cima, total e última embaixo, os seis meses em quadradinhos com
   o RÓTULO DO MÊS dentro (não há cabeçalho para consultar) e, por escrito, o mesmo que o tooltip
   dizia. Flex com order, e não grid: a ordem dos <td> no HTML é a da tabela, e só order coloca cada
   um no lugar do cartão sem depender de onde o auto-placement parou.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-cart td.est, .vx-cart th.est { display:none; }

@media (max-width: 720px) {
  .vx-cart-wrap { overflow:visible; max-height:none; border:0; background:transparent; }
  .vx-cart { display:block; width:100%; min-width:0; font-size:12.5px; }
  .vx-cart thead { display:none; }
  .vx-cart tbody { display:block; }
  .vx-cart tbody tr { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
    padding:10px; margin:0 0 8px; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
  .vx-cart tbody tr td { display:block; border-bottom:0; padding:0; white-space:normal; }
  .vx-cart td.fix { position:static; background:transparent; max-width:none; }
  .vx-cart td.med { display:none; }                 /* média/mês não cabe no cartão e não decide nada */

  .vx-cart td.c1 { order:1; flex:0 0 auto; }
  .vx-cart td.c2 { order:2; flex:1 1 60%; min-width:0; font-size:13.5px; font-weight:600; color:var(--vx-text); }
  .vx-cart td.c3 { order:3; flex:1 1 auto; color:var(--vx-muted); font-size:11.5px; }
  .vx-cart td.tot { order:4; flex:0 0 auto; }
  .vx-cart td.ult { order:5; flex:0 0 auto; }
  /* A CÉLULA DE ATIVIDADE É TAMBÉM A QUEBRA DE LINHA do cartão. Vazia ela não ocupa altura, mas
     com flex-basis 100% empurra os meses para a linha de baixo — e é o único jeito de quebrar uma
     linha de flex sem inventar um elemento que a tabela não tem. */
  .vx-cart td.atv { order:6; flex:1 1 100%; }
  /* SEIS POR LINHA, sempre. Com flex-grow os meses que sobravam na ultima linha esticavam para
     metade da tela cada um — 18 meses viravam duas fileiras normais e uma de dois retangulos
     enormes, e o tamanho passava a significar alguma coisa que ele nao significa. */
  .vx-cart td.cel { order:7; flex:0 0 calc((100% - 40px) / 6); min-width:0; border-radius:calc(8px * var(--vx-raio, 1));
    padding:16px 1px 5px; position:relative; font-size:10.5px; line-height:1.1; }
  .vx-cart td.cel::before { content:attr(data-mes); position:absolute; top:3px; left:0; right:0;
    font-size:7.5px; letter-spacing:0; opacity:.7; font-weight:600; }
  .vx-cart td.est { order:8; display:block; flex:1 1 100%; font-size:11.5px; }
  .vx-cart td.est.parou { color:#ff8a8a; } .vx-cart td.est.recente { color:var(--vx-morno); }
  .vx-cart td.est.nunca { color:rgba(255,168,168,.8); } .vx-cart td.est.on { color:var(--vx-teal-br); }
  .vx-cart td.acao { order:9; flex:1 1 100%; display:flex; gap:8px; }
  .vx-cart td.acao .vx-cart-btn { flex:1 1 auto; min-height:36px; }
  /* o detalhe que abre embaixo do cartão continua ocupando a largura toda */
  .vx-cart tbody tr.vx-cart-det { display:block; padding:10px; }
  .vx-cart tbody tr.vx-cart-det > td { display:block; }

  /* O RODAPE VIRA CARTAO como todo o resto. Sem isto ele sairia como uma fileira de numeros sem
     cabecalho -- o thead nao existe aqui, entao cada quadradinho carrega o proprio rotulo de mes,
     exatamente como as celulas fazem logo acima. Seis por linha, a mesma grade. */
  .vx-cart tfoot { display:block; }
  .vx-cart tfoot tr { display:flex; flex-wrap:wrap; gap:6px 8px; padding:10px;
    border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
  .vx-cart tfoot td { position:static; display:block; border:0; padding:0; background:transparent; }
  .vx-cart tfoot td.rot { flex:1 1 100%; text-align:left; }
  .vx-cart tfoot td.nv { flex:0 0 calc((100% - 40px) / 6); padding:16px 1px 5px; position:relative;
    border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface-2); font-size:12px; }
  .vx-cart tfoot td.nv::before { content:attr(data-mes); position:absolute; top:3px; left:0; right:0;
    font-size:7.5px; letter-spacing:0; opacity:.7; font-weight:600; color:var(--vx-faint); }
  .vx-cart tfoot td.vazio { display:none; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   A BARRA DE SELEÇÃO NO CELULAR: quebra em linhas em vez de rolar de lado.

   Ela é uma pílula que rola de lado quando não cabe — decisão certa no desktop, onde ela raramente
   aperta. Num aparelho de 375px com cinco botões, o que sobrava na tela era "6 selecionada(s) ·
   Total R$ 0 · Limpar · Compa|", e "Gerar oferta" — a razão de ter selecionado alguma coisa —
   ficava fora da tela, atrás de um arrasto lateral DENTRO da pílula que ninguém adivinha.

   Aqui ela vira uma faixa de canto a canto que quebra em linhas, e a ordem inverte: primeiro a
   ação que se veio fazer, por último a de desfazer. Nada de rolagem escondida.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-fb-espaco { height:0; }

@media (max-width: 720px) {
  .vx-floatbar { left:8px; right:8px; bottom:10px; width:auto; max-width:none;
    overflow-x:visible; flex-wrap:wrap; gap:8px; padding:10px 12px; border-radius:calc(18px * var(--vx-raio, 1)); }
  .vx-floatbar > span { flex:1 1 100%; white-space:normal; font-size:12.5px; line-height:1.35; }
  .vx-floatbar > .mud-button-root { flex:1 1 auto; min-height:40px; }
  /* a ação principal primeiro e sozinha na linha; "limpar" por último */
  .vx-floatbar .vx-fb-oferta   { order:1; flex:1 1 100%; }
  .vx-floatbar .vx-fb-reservar { order:2; }
  .vx-floatbar .vx-fb-preco    { order:3; }
  .vx-floatbar .vx-fb-comparar { order:4; }
  .vx-floatbar .vx-fb-limpar   { order:5; }
  .vx-fb-espaco { height:170px; }
}

/* COCKPIT NO CELULAR: a fileira de ações vira ícones, e o funil sobe.
   Quatro botões com rótulo tomavam duas fileiras de uma tela de 375px antes do primeiro pedido —
   e nenhum deles é o que se vem fazer aqui. O rótulo volta no Title, para o toque longo. */
@media (max-width: 720px) {
  .vx-cab-acoes { flex-wrap:wrap; }
  .vx-cab-acoes > .mud-button-root { min-width:44px; padding-left:12px; padding-right:12px; }
  .vx-cab-acoes > .mud-button-root .mud-button-icon-start { margin:0; }
}

/* O X que fecha o grupo aberto em Grupos de clientes. */
.vx-listas-fechar { background:transparent; border:1px solid var(--vx-border); border-radius:var(--vx-pill, 999px);
  color:var(--vx-muted); font:inherit; font-size:14px; line-height:1; width:32px; height:32px; cursor:pointer; }
.vx-listas-fechar:hover { color:var(--vx-text); border-color:var(--vx-muted); }
@media (max-width: 720px) { .vx-listas-fechar { width:40px; height:40px; } }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   KPI NO CELULAR: o ícone ao lado, não em cima.

   O cartão empilha ícone, rótulo, número e legenda. Numa grade de quatro colunas isso é certo; numa
   coluna só de 375px, o ícone fica sozinho numa faixa de 48px de altura e a largura inteira sobra
   vazia ao lado dele — três cartões e a tela acabou. Deitado, o mesmo conteúdo cabe em dois terços
   da altura e o número continua sendo a maior coisa do cartão.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vx-rel-kpis { gap:10px; }
  .vx-kpi { display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; padding:12px 14px; }
  .vx-kpi-ico { grid-column:1; grid-row:1 / span 6; margin-bottom:0; align-self:center; }
  .vx-kpi > *:not(.vx-kpi-ico) { grid-column:2; }
  .vx-kpi-delta { justify-self:start; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   A FOLHA DE OFERTA NÃO ROLA DE LADO NO CELULAR.

   .vx-es-body tem overflow-y:auto, e pela regra do CSS isso faz o eixo X virar auto também: basta
   UM elemento mais largo que a tela para a folha inteira ganhar rolagem lateral. Aí um arrasto
   vertical um pouco torto empurra tudo para o lado e o conteúdo aparece cortado pela esquerda —
   com o cabeçalho no lugar, porque ele está fora do corpo que rolou.

   Duas causas, as duas aqui: o rótulo dos botões era nowrap (um "Escolher destinatários e enviar…"
   com fonte grande já passa de 360px sozinho) e o campo do link tinha min-width:auto.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vx-es-body .mud-button-root { max-width:100%; }
  .vx-es-body .mud-button-label { white-space:normal; text-align:left; }
  .vx-of-linkinput { min-width:0; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   ETAPAS DO PEDIDO: a linha que não cabia no telefone.

   Oito colunas fixas (56 + 1fr + 140 + 130 + 110 + 96 + 130 + auto) somam 745px de piso. Num
   aparelho de 375px a linha estourava para fora e o único trecho elástico — o NOME da etapa —
   era esmagado a zero: sobrava o número, uma caixa vazia, "Normal" e um "Todo merca" cortado.
   No celular a mesma linha vira duas colunas e quatro fileiras, com o nome em cima.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-etp-linha { display:grid; grid-template-columns:56px 1fr 140px 130px 110px 96px 130px auto; gap:12px; align-items:center; }

@media (max-width: 720px) {
  .vx-etp-linha { grid-template-columns:64px 1fr; gap:8px 10px; }
  .vx-etp-ordem   { grid-column:1; }
  .vx-etp-nome    { grid-column:2; }
  .vx-etp-tipo    { grid-column:1 / -1; }
  .vx-etp-mercado { grid-column:1 / -1; }
  .vx-etp-prazo   { grid-column:1; }
  .vx-etp-cor     { grid-column:2; }
  .vx-etp-caixas  { grid-column:1 / -1; flex-direction:row !important; gap:16px !important; flex-wrap:wrap; }
  .vx-etp-bts     { grid-column:1 / -1; justify-self:end; }
}

/* PROSPECÇÃO NO CELULAR: o painel do radar é a ferramenta, mas não precisa ocupar a tela inteira
   antes do primeiro lead. Nada some — o hero e os três números só param de respirar como se
   tivessem 1400px de largura. */
@media (max-width: 720px) {
  .vx-prosp-hero { padding:14px 16px; border-radius:calc(18px * var(--vx-raio, 1)); }
  .vx-prosp-h1 { font-size:18px; }
  .vx-prosp-kpi { padding:7px 8px; border-radius:calc(12px * var(--vx-raio, 1)); }
  .vx-prosp-kpi b { font-size:20px; }
  .vx-prosp-kpi span { font-size:9.5px; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   FILTROS DO RADAR NO CELULAR: seletor que cabe o que promete.

   Os dois seletores tinham max-width no style= (190px e 185px), largura pensada para uma barra de
   1400px onde eles dividem a linha com a busca e seis chips. Num telefone essa mesma trava corta o
   rótulo no meio — "🏷️ Todos os segme" — e quem lê não sabe se aquilo é o estado atual ou um
   texto quebrado. Aqui eles ocupam a linha inteira, que sobra de qualquer jeito.

   O max-width saiu do atributo inline de propósito: style= vence folha de estilo, então enquanto
   ele morasse ali nenhuma media query alcançaria.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-prosp-fsel { max-width:190px; }

@media (max-width: 720px) {
  .vx-prosp-filtros { gap:6px 8px; padding:8px 10px; }
  .vx-prosp-fsel { max-width:none; flex:1 1 100%; }
  .vx-prosp-fbusca { flex:1 1 100% !important; }
  /* a contagem e os dois botões de fim de barra ganham a própria linha, alinhados à direita */
  .vx-prosp-count { flex:1 1 100%; text-align:right; }
}

@media (max-width: 720px) {
  /* espaçador sem nada para espaçar vira faixa vazia — ver o comentário no Prospeccao.razor */
  .vx-prosp-cta-linha > .flex-grow-1 { display:none; }
  .vx-prosp-cta-linha > .mud-button-root { flex:1 1 100%; }
  .vx-prosp-cta-linha { margin-top:10px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   CADASTRO À MÃO: os dois botões alinhados com os campos.

   Numa linha só eles ficam lado a lado e o tamanho de cada um é o do próprio rótulo. Empilhados no
   celular, esse mesmo tamanho vira degrau: "Cadastrar em órbita" e "Cadastrar e ofertar agora"
   nascem com larguras diferentes, encostados à esquerda, debaixo de nove campos que vão de ponta a
   ponta. Aqui os dois assumem a largura dos campos — que é a régua que o formulário inteiro já usa.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vx-man-acts { gap:8px; }
  .vx-man-acts > .mud-button-root { flex:1 1 100%; min-height:44px; }
  .vx-man-acts > span { flex:1 1 100%; align-self:flex-start !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   GALERIA NO TELEFONE: uma chapa por linha.

   A regra antiga dizia que grade de miniatura aguenta duas colunas porque "quem manda é a foto e o
   texto é legenda curta". Na galeria isso deixou de ser verdade: o cartão da chapa carrega nome do
   material, variedade, chapa, bloco, acabamento, medidas, m², peso bruto e líquido e o preço. Em
   215px o nome quebra em duas linhas, as medidas em outras duas, e a foto — que era o argumento das
   duas colunas — fica menor que a miniatura que o próprio bucket serve.

   Ambientes e publicação continuam com duas: lá o texto É legenda.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .vx-gal-grid, .vx-gal-flow { grid-template-columns: 1fr; }
}

/* Moldura de página LARGA: o mesmo respiro lateral da .vx-page, sem o teto de 1760px. Para telas
   cujo conteúdo é uma grade que ganha em ser larga — a Carteira, onde cada 200px a mais são dois
   meses a mais na tela. */
.vx-page-larga { padding: 22px clamp(14px, 3vw, 34px); animation: vx-fade .35s var(--vx-smooth); }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   MERCADO EXTERNO (/comex) — ranking de países ao lado do que foi embarcado.

   Duas colunas no monitor porque as duas perguntas são uma só: "para onde foi" e "o que foi". No
   telefone viram duas faixas empilhadas, e a de países vem primeiro — é a que decide o resto.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-cx-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; margin-top:6px; }
.vx-cx-tab td, .vx-cx-tab th { white-space:nowrap; }
.vx-cx-tab tbody tr:hover { background:rgba(255,255,255,.04); }
.vx-cx-on { background:var(--vx-teal-glow) !important; }
.vx-cx-var.up { color:var(--vx-teal-br); font-weight:600; }
.vx-cx-var.down { color:#ff8a8a; font-weight:600; }
.vx-cx-novo { font-size:11px; color:var(--vx-faint); border:1px dashed var(--vx-border); border-radius:var(--vx-pill, 999px); padding:1px 7px; }
.vx-cx-filtro { font-weight:400; color:var(--vx-teal-br); text-transform:none; letter-spacing:0; }
.vx-cx-filtro em { font-style:normal; cursor:pointer; margin-left:5px; opacity:.7; }
.vx-cx-filtro em:hover { opacity:1; }

.vx-cx-prod { display:flex; flex-direction:column; gap:6px; }
.vx-cx-prod .linha { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:calc(10px * var(--vx-raio, 1));
  background:var(--vx-surface); border:1px solid var(--vx-border); font-size:12.5px; }
.vx-cx-prod .tag { font-size:10px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase);
  border-radius:var(--vx-pill, 999px); padding:2px 8px; flex:0 0 auto; }
/* bloco e chapa em cores diferentes porque são negócios diferentes: quem compra bloco tem serraria
   e concorre com o beneficiamento daqui; quem compra chapa é distribuidor, e é cliente. */
.vx-cx-prod .tag.bloco { background:rgba(124,58,237,.16); color:#a78bfa; }
.vx-cx-prod .tag.chapa { background:color-mix(in srgb, var(--vx-teal-br) 14%, transparent); color:var(--vx-teal-br); }
.vx-cx-prod .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vx-text); }
.vx-cx-prod .vl { flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; }
.vx-cx-rodape { margin-top:18px; font-size:11.5px; color:var(--vx-faint); line-height:1.6; max-width:900px; }

/* `1fr` E' `minmax(auto,1fr)`, E O MINIMO "auto" E O MAX-CONTENT DO QUE ESTA DENTRO. A tabela do
   Comex e' `width:max-content` de proposito (ela rola de lado dentro do proprio quadro), entao a
   coluna crescia junto: 522px dentro de uma tela de 375, e a PAGINA INTEIRA passava a rolar de
   lado -- titulo e KPIs cortados na esquerda. Com minmax(0,1fr) a coluna para de crescer e quem
   rola volta a ser so' o quadro da tabela. A regra de cima (desktop) ja nascia certa. */
@media (max-width: 900px) { .vx-cx-grid { grid-template-columns:minmax(0,1fr); gap:14px; } }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   A TABELA DO MERCADO EXTERNO NÃO É A CARTEIRA.

   Ela reaproveita .vx-cart pela aparência — e no celular herdou junto a transformação em CARTÃO,
   que foi escrita para as colunas da Carteira (código, nome, meses). Aqui isso embaralhava: saía
   "54,5% · 570.170 t · US$ 1,38/kg" numa linha e o nome do país embaixo.

   Aqui a tabela volta a ser tabela e rola de lado dentro do próprio quadro, que é o certo para seis
   colunas de número num aparelho de 375px — e o país fica preso à esquerda para não se perder.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vx-cx-wrap { overflow:auto !important; max-height:none; border:1px solid var(--vx-border) !important;
    border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface) !important; }
  .vx-cart.vx-cx-tab { display:table; width:max-content; min-width:100%; }
  .vx-cart.vx-cx-tab thead { display:table-header-group; }
  .vx-cart.vx-cx-tab tbody { display:table-row-group; }
  .vx-cart.vx-cx-tab tbody tr { display:table-row; padding:0; margin:0; border:0; background:transparent; border-radius:0; }
  .vx-cart.vx-cx-tab tbody tr td { display:table-cell; padding:7px 9px; white-space:nowrap;
    border-bottom:1px solid var(--vx-border); }
  .vx-cart.vx-cx-tab td.fix { position:sticky; left:0; background:var(--vx-surface); max-width:none; }
}


/* ── O INTERRUPTOR DE VIDEO das cenas do Impulso (Configuracoes > Aparencia) ────────────────────
   Tres cartoes em vez de um <select>: a escolha aqui muda o que a equipe inteira VE, e um menu
   suspenso esconde as outras duas opcoes justamente no momento de comparar. */
.vx-gpu-opcoes { display: flex; gap: 10px; flex-wrap: wrap; }
.vx-gpu-op {
  flex: 1 1 190px; min-width: 0; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: calc(12px * var(--vx-raio, 1)); font: inherit;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.vx-gpu-op:hover { border-color: var(--vx-teal-soft); transform: translateY(-1px); }
.vx-gpu-op.on { border-color: var(--vx-teal); background: color-mix(in srgb, var(--vx-teal-br) 9%, transparent); }
.vx-gpu-op .ic { font-size: 15px; opacity: .8; }
.vx-gpu-op b { display: block; margin-top: 4px; font-size: 13.5px; color: var(--vx-text); }
.vx-gpu-op .ds { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--vx-muted); }

.vx-gpu-estado {
  margin-top: 12px; padding: 11px 13px; border-radius: calc(10px * var(--vx-raio, 1)); font-size: 12.5px;
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
}
.vx-gpu-estado.on { border-color: color-mix(in srgb, var(--vx-teal-br) 34%, transparent); background: color-mix(in srgb, var(--vx-teal-br) 6%, transparent); }
.vx-gpu-estado b { color: var(--vx-text); }
.vx-gpu-estado .lin { margin-top: 4px; color: var(--vx-muted); line-height: 1.5; overflow-wrap: anywhere; }
.vx-gpu-estado .lin.fraco { margin-top: 7px; font-size: 11.5px; color: var(--vx-faint); }


/* O SELO DA REGRA (Configuracoes > Impulso). Zero nao e' desligado, e o TOQUE nao esta' ligado a
   nada -- as duas coisas eram invisiveis, e as duas fazem o gestor configurar no escuro. */
.vx-regra-selo {
  /* O <b> do rotulo e' display:block (vortex.css, .vx-gamcfg-linha .nm b), entao o selo NUNCA fica
     ao lado do nome: ele sempre comeca uma linha propria. Recuo a esquerda deixava um degrau orfao,
     e sem margem a direita o selo encostava no texto de ajuda que vem logo depois. */
  display: inline-block; margin: 2px 8px 3px 0; vertical-align: middle;
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: calc(.02em * var(--vx-tracking, 1));
  padding: 2px 8px; border-radius: calc(20px * var(--vx-raio, 1)); white-space: nowrap;
  background: color-mix(in srgb, var(--vx-teal-br) 10%, transparent); color: var(--vx-teal);
  border: 1px solid color-mix(in srgb, var(--vx-teal-br) 28%, transparent);
}
.vx-regra-selo.alerta {
  background: rgba(242, 180, 65, .12); color: #C88A10;
  border-color: rgba(242, 180, 65, .35);
}
[data-theme="dark"] .vx-regra-selo.alerta,
.vx-dark .vx-regra-selo.alerta { color: #F2B441; }


/* O QUE PERDEU O LASTRO (Minha jornada). Apagado de proposito: e' auditoria, nao vitrine -- mas
   existir e' o ponto. Antes o bilhete sumia da tela sem uma palavra, e sumir sem explicacao nao e'
   azar, e' sensacao de roubo; o primeiro caso desses mata o modulo na equipe inteira. */
.vx-jor-cancelados {
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--vx-border);
  display: flex; flex-direction: column; gap: 7px;
}
.vx-jor-cancelados .tt {
  font-size: 11.5px; font-weight: 600; letter-spacing: calc(.04em * var(--vx-tracking, 1)); text-transform: var(--vx-caixa, uppercase);
  color: var(--vx-faint);
}
.vx-jor-cancelados .lin {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--vx-muted); opacity: .8;
}
.vx-jor-cancelados .lin .nm { text-decoration: line-through; text-decoration-thickness: 1px; }
.vx-jor-cancelados .lin .pq { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.vx-jor-cancelados .lin .dt { font-size: 12px; color: var(--vx-faint); white-space: nowrap; }
.vx-jor-cancelados .ex { font-size: 12px; line-height: 1.5; color: var(--vx-faint); margin-top: 2px; }


/* A LOJA AGUENTA? (Configuracoes > Sorteio). Tres numeros lado a lado, porque o que importa e' a
   COMPARACAO entre eles -- ponto na mao da equipe e' divida, premio na mesa e' o que paga. */
.vx-loja { display: flex; gap: 12px; flex-wrap: wrap; }
.vx-loja .bloco {
  flex: 1 1 190px; min-width: 0; padding: 12px 14px; border-radius: calc(10px * var(--vx-raio, 1));
  background: var(--vx-surface-2); border: 1px solid var(--vx-border);
  display: flex; flex-direction: column; gap: 1px;
}
.vx-loja .bloco .n {
  font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--vx-text);
  font-variant-numeric: tabular-nums;
}
.vx-loja .bloco .r { font-size: 12.5px; color: var(--vx-muted); }
.vx-loja .bloco .e { font-size: 11.5px; color: var(--vx-faint); line-height: 1.4; margin-top: 3px; }
.vx-loja .bloco.aperta { border-color: rgba(224, 85, 74, .38); background: rgba(224, 85, 74, .07); }
.vx-loja .bloco.aperta .n { color: #E0554A; }
.vx-loja .bloco.folga .n { color: var(--vx-teal); }

/* HA QUANTO TEMPO ALGUEM ESPERA o premio. Sem isto, "pendente" ha dois dias e ha dois meses eram
   a mesma linha -- e e' o segundo que faz o vendedor parar de acreditar no modulo. */
.vx-espera {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: calc(20px * var(--vx-raio, 1)); white-space: nowrap;
  background: var(--vx-surface-2); color: var(--vx-faint); border: 1px solid var(--vx-border);
}
.vx-espera.atencao { background: rgba(242, 180, 65, .12); color: #C88A10; border-color: rgba(242, 180, 65, .35); }
.vx-espera.tarde { background: rgba(224, 85, 74, .12); color: #C8382C; border-color: rgba(224, 85, 74, .38); }
[data-theme="dark"] .vx-espera.atencao, .vx-dark .vx-espera.atencao { color: #F2B441; }
[data-theme="dark"] .vx-espera.tarde, .vx-dark .vx-espera.tarde { color: #FF8177; }


/* O TAMANHO DA VENDA (Configuracoes > Impulso, so' no pedido faturado). Recuado e' de proposito:
   e' um detalhe DA regra de cima, nao uma regra nova -- e a frase em cima diz em portugues o que a
   combinacao de campos faz, porque "1 ponto a cada 5000" nao se le sozinho. */
.vx-escala {
  margin: -4px 0 10px 0; padding: 10px 12px 11px;
  border-left: 2px solid var(--vx-border-2); border-radius: 0 calc(8px * var(--vx-raio, 1)) calc(8px * var(--vx-raio, 1)) 0;
  background: var(--vx-surface-2);
  display: flex; flex-direction: column; gap: 8px;
}
.vx-escala .cab { font-size: 12.5px; color: var(--vx-muted); }
.vx-escala .cab b { color: var(--vx-text); font-weight: 600; }
.vx-escala .cab em {
  display: block; margin-top: 2px; font-style: normal; font-size: 11.5px; color: var(--vx-faint);
}
/* O AVISO DE ESCALA ANULADA nao pode herdar o cinza do --vx-faint das outras linhas: ele descreve
   uma regra que a propria tela diz estar funcionando, e o unico jeito de ele ser lido e' destoar do
   texto que ele contradiz. */
.vx-escala .cab em.anula {
  margin-top: 5px; padding: 6px 9px; border-radius: calc(7px * var(--vx-raio, 1)); font-size: 11.5px; line-height: 1.45;
  color: var(--vx-erro, #ef4444);
  background: color-mix(in srgb, var(--vx-erro, #ef4444) 9%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--vx-erro, #ef4444) 55%, transparent);
}
.vx-escala .campos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vx-escala .sla { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vx-muted); }
.vx-escala .dica { font-size: 11px; color: var(--vx-faint); }


/* O ORCAMENTO DE PREMIO (Configuracoes > Sorteio). Fica dentro do cartao da faixa porque e' a
   terceira perna da mesma conta: divida da equipe, lastro da mesa, e quanto a casa aceita gastar. */
.vx-orcamento {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--vx-border);
  font-size: 13px;
}
.vx-orcamento .l { color: var(--vx-text); font-weight: 500; }
.vx-orcamento .c { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-muted); }
.vx-orcamento .r { font-size: 12px; color: var(--vx-faint); }
.vx-orcamento .r b { color: var(--vx-teal); font-weight: 600; }

/* A SUGESTAO DE CUSTO, na linha do nivel. E' um botao porque aplicar e' um ato -- preco que muda
   sozinho e' a forma mais rapida de a equipe deixar de confiar na regua. */
.vx-sug-custo {
  font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap;
  padding: 3px 9px; border-radius: calc(20px * var(--vx-raio, 1));
  background: rgba(242, 180, 65, .10); color: #A8710A;
  border: 1px solid rgba(242, 180, 65, .34);
  transition: background .15s ease, border-color .15s ease;
}
.vx-sug-custo:hover { background: rgba(242, 180, 65, .20); border-color: rgba(242, 180, 65, .55); }
.vx-sug-custo b { font-weight: 700; }
[data-theme="dark"] .vx-sug-custo, .vx-dark .vx-sug-custo { color: #F2B441; }


/* A PROJECAO (Configuracoes > Sorteio), enquanto nao ha' historico para medir. Tracejado porque e'
   estimativa, e some sozinha quando a emissao real passa do piso de amostra. */
.vx-projecao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 11px 13px; border-radius: calc(9px * var(--vx-raio, 1));
  background: rgba(242, 180, 65, .07); border: 1px dashed rgba(242, 180, 65, .34);
  font-size: 13px;
}
.vx-projecao .l { color: var(--vx-text); font-weight: 500; }
.vx-projecao .c { display: inline-flex; align-items: center; gap: 6px; color: var(--vx-muted); }
.vx-projecao .r { flex: 1 1 100%; font-size: 12px; color: var(--vx-faint); line-height: 1.5; }
.vx-projecao .r b { color: var(--vx-text); font-weight: 600; }


/* ── A PAGINA NAO ROLA POR TRAS DE UM DIALOGO ──────────────────────────────────────────────────
   O MudBlazor tranca o BODY (body.scroll-locked { overflow:hidden }), mas quem rola nesta pagina e'
   o <html>: com o body clipado, a altura dele continua sendo a do conteudo inteiro e o documento
   segue rolando. O resultado era uma barra de rolagem viva ao lado de todo dialogo -- inclusive o
   do garimpo, onde ela dava a impressao de que a cena e' que estava cortada.

   O scrollbar-gutter reserva o mesmo espaco que a barra de verdade ocupava, entao abrir um dialogo
   nao empurra a pagina lateralmente: sem ele, esconder a barra devolve ~15px de largura e a tela
   inteira pula no instante em que qualquer dialogo abre. */
html:has(body.scroll-locked) { overflow: hidden; scrollbar-gutter: stable; }


/* ── AS MESAS DO SORTEIO (Configuracoes > Sorteio) ─────────────────────────────────────────────
   A lista de premios era uma planilha plana, e o modelo nao e' plano: um premio pertence a UMA
   mesa, e a chance dele e' disputada so' com os companheiros de mesa. Agrupar nao e' enfeite --
   e' o que faz "54,9%" numa linha e "50%" na seguinte pararem de parecer concorrentes quando sao
   de pools separados que somam 100% cada um. */
.vx-mesa {
  margin: 0 0 18px; padding: 0 0 4px;
  border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1)); overflow: hidden;
  background: color-mix(in srgb, var(--vx-surface-2) 45%, transparent);
}
.vx-mesa-cab {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--vx-surface-2);
  border-bottom: 1px solid var(--vx-border);
}
.vx-mesa-cab .ic { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.vx-mesa-cab .tt { flex: 1 1 auto; min-width: 0; }
.vx-mesa-cab .tt b { display: block; font-size: 14px; color: var(--vx-text); font-weight: 600; }
.vx-mesa-cab .tt span { display: block; font-size: 11.5px; color: var(--vx-faint); line-height: 1.4; }
.vx-mesa-cab .num { display: flex; gap: 8px; flex-wrap: wrap; flex: 0 0 auto; }
.vx-mesa-cab .num span {
  font-size: 11.5px; padding: 3px 9px; border-radius: calc(20px * var(--vx-raio, 1)); white-space: nowrap;
  background: var(--vx-bg-2); color: var(--vx-muted); border: 1px solid var(--vx-border);
}
.vx-mesa-cab .num .falta {
  background: rgba(242, 180, 65, .12); color: #A8710A; border-color: rgba(242, 180, 65, .34);
}
[data-theme="dark"] .vx-mesa-cab .num .falta, .vx-dark .vx-mesa-cab .num .falta { color: #F2B441; }
.vx-mesa .vx-orbcfg-linha { margin-left: 10px; margin-right: 10px; }
.vx-mesa-vazia { padding: 14px; font-size: 12.5px; color: var(--vx-faint); }

/* A EXPLICACAO DO MODELO, uma vez, antes da primeira mesa -- e nao repetida em cada linha. */
.vx-mesa-ajuda {
  font-size: 12.5px; line-height: 1.6; color: var(--vx-muted); margin-bottom: 14px;
  padding: 11px 13px; border-radius: calc(10px * var(--vx-raio, 1));
  background: var(--vx-surface-2); border-left: 2px solid var(--vx-teal);
}
.vx-mesa-ajuda b { color: var(--vx-text); }
.vx-mesa-ajuda .lin { display: block; margin-top: 5px; }

/* A CHANCE COMO BARRA: duas barras se comparam de relance; dois numeros exigem ler os dois.
   E' a mesma leitura que o vendedor faz olhando o tamanho dos planetas. */
.vx-orbcfg-linha .chance { display: inline-flex; align-items: center; gap: 7px; }
.vx-orbcfg-linha .chance .barra {
  display: inline-block; width: 46px; height: 5px; border-radius: calc(3px * var(--vx-raio, 1));
  background: var(--vx-border); overflow: hidden; flex: 0 0 auto;
}
.vx-orbcfg-linha .chance .barra > i {
  display: block; height: 100%; border-radius: calc(3px * var(--vx-raio, 1)); background: var(--vx-teal);
  min-width: 2px;
}
.vx-orbcfg-linha select.mover { opacity: .72; }
.vx-orbcfg-linha select.mover:hover, .vx-orbcfg-linha select.mover:focus { opacity: 1; }


/* ── O ROTEIRO (Configuracoes > Sorteio) ───────────────────────────────────────────────────────
   Um tutorial que LE O ESTADO em vez de repetir um texto: o passo feito fica apagado com um visto,
   e o primeiro que falta e' o unico que abre o "por que". Assim quem ja montou tudo ve um resumo,
   e quem esta comecando ve uma coisa de cada vez. */
.vx-roteiro { padding: 16px 18px !important; }
.vx-roteiro .cab { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vx-roteiro .cab .tt { font-size: 15px; font-weight: 600; color: var(--vx-text); }
.vx-roteiro .cab .pr {
  font-size: 11.5px; padding: 3px 9px; border-radius: calc(20px * var(--vx-raio, 1));
  background: var(--vx-surface-2); color: var(--vx-muted); border: 1px solid var(--vx-border);
}
.vx-roteiro .cab .vx-tagchip { margin-left: auto; }

.vx-roteiro ol { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vx-roteiro li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start;
  padding: 9px 10px; border-radius: calc(9px * var(--vx-raio, 1));
}
.vx-roteiro li .n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--vx-surface-2); color: var(--vx-faint); border: 1px solid var(--vx-border);
}
.vx-roteiro li .tx { min-width: 0; }
.vx-roteiro li .tx b { display: block; font-size: 13.5px; color: var(--vx-text); font-weight: 600; }
.vx-roteiro li .oq { display: block; font-size: 12.5px; color: var(--vx-muted); line-height: 1.5; margin-top: 1px; }
.vx-roteiro li .pq {
  display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; color: var(--vx-muted);
  padding-left: 9px; border-left: 2px solid var(--vx-teal);
}
.vx-roteiro li .es { display: inline-block; font-size: 11.5px; color: var(--vx-faint); margin-top: 4px; }

/* FEITO: apagado, com visto -- ele nao precisa mais de atencao. */
.vx-roteiro li.ok .n { background: color-mix(in srgb, var(--vx-teal-br) 12%, transparent); color: var(--vx-teal); border-color: color-mix(in srgb, var(--vx-teal-br) 30%, transparent); }
.vx-roteiro li.ok .tx b { color: var(--vx-muted); font-weight: 500; }
.vx-roteiro li.ok .oq { display: none; }

/* AGORA: o unico passo que abre o "por que" -- uma coisa de cada vez. */
.vx-roteiro li.agora { background: var(--vx-surface-2); }
.vx-roteiro li.agora .n { background: var(--vx-teal); color: var(--vx-sobre-destaque, #04110c); border-color: var(--vx-teal); }


/* ══ A TELA DE SORTEIO, ORGANIZADA ═════════════════════════════════════════════════════════════
   O problema nao era falta de informacao: era falta de HIERARQUIA. Tudo tinha o mesmo peso visual
   -- o roteiro, os tres numeros, o orcamento, o interruptor, as estrelas e as mesas empilhados em
   cartoes identicos, cada um com a mesma borda e o mesmo fundo. Numa tela em que a ordem IMPORTA
   (preco antes de custo, custo antes de ligar), dar o mesmo destaque a tudo apaga justamente a
   ordem. Aqui o roteiro manda, os numeros sao o painel, e o resto e' trabalho. */

/* ── O ROTEIRO ganha presenca: e' ele que conduz ─────────────────────────────────────────────── */
.vx-roteiro {
  border-color: color-mix(in srgb, var(--vx-teal) 26%, var(--vx-border)) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--vx-teal) 5%, transparent), transparent 120px),
    var(--vx-surface) !important;
}
.vx-roteiro .cab { padding-bottom: 12px; border-bottom: 1px solid var(--vx-border); }
.vx-roteiro .cab .tt { font-size: 16px; letter-spacing: calc(-.01em * var(--vx-tracking, 1)); }
.vx-roteiro ol { margin-top: 10px; }

/* a linha do passo ganha ar e uma regua entre os passos, para a lista virar uma sequencia */
.vx-roteiro li { padding: 11px 12px; border-radius: calc(10px * var(--vx-raio, 1)); align-items: center; }
.vx-roteiro li + li { border-top: 1px solid color-mix(in srgb, var(--vx-border) 55%, transparent); }
.vx-roteiro li.agora { align-items: start; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vx-teal) 24%, transparent); }
.vx-roteiro li.agora + li { border-top-color: transparent; }
.vx-roteiro li .n { width: 24px; height: 24px; font-size: 12px; }

/* O PAINEL DE NUMEROS deixa de ser tres cartoes soltos e vira um bloco so' com divisorias --
   eles sao uma leitura conjunta ("divida x lastro x quanto compra"), nao tres fatos separados. */
.vx-loja {
  gap: 0; border: 1px solid var(--vx-border); border-radius: calc(12px * var(--vx-raio, 1)); overflow: hidden;
  background: var(--vx-surface);
}
.vx-loja .bloco {
  border: 0; border-radius: 0; background: transparent; padding: 16px 18px;
  border-left: 1px solid var(--vx-border);
}
.vx-loja .bloco:first-child { border-left: 0; }
.vx-loja .bloco .n { font-size: 30px; letter-spacing: calc(-.02em * var(--vx-tracking, 1)); }
.vx-loja .bloco .r { font-size: 13px; color: var(--vx-text); font-weight: 500; margin-top: 2px; }
.vx-loja .bloco .e { margin-top: 5px; }
.vx-loja .bloco.aperta { background: rgba(224, 85, 74, .06); }
@media (max-width: 820px) {
  .vx-loja .bloco { border-left: 0; border-top: 1px solid var(--vx-border); }
  .vx-loja .bloco:first-child { border-top: 0; }
}

/* O ORCAMENTO e a PROJECAO viram um bloco so' embaixo do painel, e nao dois avulsos. */
.vx-orcamento { margin-top: 0; padding: 14px 18px; border-top: 1px solid var(--vx-border); }
.vx-projecao { margin: 0 18px 16px; }

/* AS MESAS respiram e ganham um filete da cor do acento no cabecalho: e' o objeto principal desta
   tela, e ate' agora ele parecia mais um cartao qualquer. */
.vx-mesa { margin-bottom: 22px; border-radius: calc(14px * var(--vx-raio, 1)); }
.vx-mesa-cab { padding: 13px 16px; border-left: 3px solid var(--vx-teal); }
.vx-mesa-cab .tt b { font-size: 14.5px; }
.vx-mesa .vx-orbcfg-linha { margin: 0 12px; padding-top: 9px; padding-bottom: 9px; }
.vx-mesa .vx-orbcfg-linha + .vx-orbcfg-linha { border-top: 1px solid color-mix(in srgb, var(--vx-border) 55%, transparent); }

/* AS ESTRELAS QUE DAO SORTEIO: a linha inteira acende quando vale premio, em vez de so' o icone --
   e' a unica coisa dessa lista que muda o comportamento do sistema. */
.vx-orbcfg-linha .ord { flex: 0 0 auto; }

/* O CARTAO DO INTERRUPTOR fica discreto quando ligado e chama quando desligado: ligado e' o estado
   normal e nao precisa de atencao; desligado e' o que explica "por que ninguem ve nada". */
.vx-card .vx-gamcfg-top { align-items: center; }


/* ── OS CAMPOS DE NUMERO DA CONFIGURACAO PARAM DE CORTAR ───────────────────────────────────────
   "150" aparecia como "15(", "2000" como "20(". Duas causas somadas: a largura era 62px e o
   input[type=number] AINDA reserva uns 17px para as setinhas de incremento -- sobrava espaco para
   quatro digitos num campo que aceita seis (o custo em pontos vai ate' 999999).

   As setinhas somem porque neste tamanho elas nao servem para nada: ninguem sobe um custo de 900
   para 36000 clicando de um em um, e elas roubam justamente o espaco do numero. Digitar continua
   funcionando igual, e as setas do teclado tambem.

   Escopo fechado nas linhas de configuracao: onde o passo unitario faz sentido (um seletor de
   quantidade pequena, por exemplo) as setinhas continuam la'. */
.vx-orbcfg-linha input[type="number"]::-webkit-outer-spin-button,
.vx-orbcfg-linha input[type="number"]::-webkit-inner-spin-button,
.vx-orbcfg-nova input[type="number"]::-webkit-outer-spin-button,
.vx-orbcfg-nova input[type="number"]::-webkit-inner-spin-button,
.vx-escala input[type="number"]::-webkit-outer-spin-button,
.vx-escala input[type="number"]::-webkit-inner-spin-button,
.vx-projecao input[type="number"]::-webkit-outer-spin-button,
.vx-projecao input[type="number"]::-webkit-inner-spin-button,
.vx-orcamento input[type="number"]::-webkit-outer-spin-button,
.vx-orcamento input[type="number"]::-webkit-inner-spin-button,
.vx-gamcfg-linha input[type="number"]::-webkit-outer-spin-button,
.vx-gamcfg-linha input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; appearance: none; margin: 0;
}
.vx-orbcfg-linha input[type="number"],
.vx-orbcfg-nova input[type="number"],
.vx-escala input[type="number"],
.vx-projecao input[type="number"],
.vx-orcamento input[type="number"],
.vx-gamcfg-linha input[type="number"] { -moz-appearance: textfield; }

/* e a largura passa a caber os seis digitos que o campo de pontos aceita, com tabular-nums para
   os numeros nao dancarem de largura enquanto se digita */
.vx-orbcfg-linha .sla input,
.vx-orbcfg-nova .sla input { width: 84px; font-variant-numeric: tabular-nums; }
.vx-escala input[type="number"],
.vx-projecao input[type="number"],
.vx-orcamento input[type="number"],
.vx-gamcfg-linha input[type="number"] { font-variant-numeric: tabular-nums; }


/* A TERCEIRA ENTRADA da projecao: o faturamento, que o gestor sabe de cabeça. O "ou" e' separado
   por uma regua vertical para ficar claro que e' um CAMINHO ALTERNATIVO, e nao um terceiro campo
   que se soma aos outros dois. */
.vx-projecao .c.ou {
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid color-mix(in srgb, var(--vx-border) 80%, transparent);
}
.vx-projecao .r.fonte { color: var(--vx-faint); opacity: .9; }
.vx-projecao .r.fonte b { color: var(--vx-muted); }


/* POSITIVADOS DO MES, na faixa da Carteira. Ganha o teal porque e' o unico numero da faixa que
   fala do RESULTADO do mes -- os outros descrevem estados da grade (parou, buraco, sem compra). */
.vx-cart-legenda .lg.pos { color: var(--vx-teal-br); border-color: color-mix(in srgb, var(--vx-teal) 40%, transparent); }
.vx-cart-legenda .lg.pos b { color: var(--vx-teal-br); font-weight: 700; }


/* O DESCONTO DA CASA, NA LINHA DO EDITOR. Laranja da campanha (o mesmo do selo da Galeria) para
   quem vende reconhecer de onde veio o preco -- nao foi ele que deu. */
.vx-of-promo {
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:10.5px; color:#ff7a59; padding:2px 7px; border-radius:var(--vx-pill, 999px);
  border:1px solid rgba(255,122,89,.35); background:rgba(255,122,89,.10);
}
.vx-of-promo s { color:#c2551a; }

/* "DE" RISCADO NA PROPOSTA PUBLICA. Discreto: o numero que importa e o que se paga. */
.vx-pp-de { color:var(--vx-faint); font-weight:400; margin-right:5px; opacity:.85; }

/* A TAG AUTOMÁTICA DE COMÉRCIO: quem tem movimento no comércio exterior. Âmbar exporta, ciano importa —
   as cores dos marcadores do globo, para a lista e o globo falarem a mesma língua. Substitui o selo
   quadrado "EXPORTA"/"COMÉRCIO", que na lista se esticava na largura da coluna (item de flex em coluna). */
.vx-tag-com { display:inline-flex; align-items:center; gap:4px; align-self:flex-start; width:max-content; max-width:100%;
  font-size:10.5px; font-weight:700; letter-spacing:calc(.2px * var(--vx-tracking, 1)); line-height:1; white-space:nowrap;
  padding:3px 8px 3px 6px; border-radius:var(--vx-pill, 99px); border:1px solid; }
.vx-tag-com .mud-icon-root { font-size:13px; width:13px; height:13px; }
.vx-tag-com.exp { color:#f59e0b; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.45); }
.vx-tag-com.imp { color:#06b6d4; background:rgba(6,182,212,.13); border-color:rgba(6,182,212,.45); }
:root.vx-light .vx-tag-com.exp { color:#b45309; background:rgba(245,158,11,.14); border-color:rgba(180,83,9,.40); }
:root.vx-light .vx-tag-com.imp { color:#0e7490; background:rgba(6,182,212,.12); border-color:rgba(14,116,144,.40); }
/* o balão do mapa é escuro nos dois temas: ali a tag fica com as cores do tema escuro */
:root.vx-light .vxmp .vx-tag-com.exp { color:#f59e0b; background:rgba(245,158,11,.13); border-color:rgba(245,158,11,.45); }
:root.vx-light .vxmp .vx-tag-com.imp { color:#06b6d4; background:rgba(6,182,212,.13); border-color:rgba(6,182,212,.45); }
.vx-cli-li .c-nome .txt .vx-tag-com { margin-bottom:3px; }
.vx-prosp-tagcom { margin:2px 0 4px; }
/* o chip do filtro, na mesma cor da tag */
.vx-fchip.com { display:inline-flex; align-items:center; gap:5px; }
.vx-fchip.com .mud-icon-root { font-size:14px; width:14px; height:14px; }
.vx-fchip.com.exp:hover, .vx-fchip.com.exp.on { border-color:#f59e0b; }
.vx-fchip.com.exp.on { background:rgba(245,158,11,.16); color:#f59e0b; }
.vx-fchip.com.imp:hover, .vx-fchip.com.imp.on { border-color:#06b6d4; }
.vx-fchip.com.imp.on { background:rgba(6,182,212,.16); color:#06b6d4; }
:root.vx-light .vx-fchip.com.exp.on { color:#b45309; }
:root.vx-light .vx-fchip.com.imp.on { color:#0e7490; }

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   PAINEL DE MERCADO (Destinos) — "para onde vende · quem compra". Mapa plano com as linhas saindo do
   Brasil, a lista dos maiores ao lado, o detalhe do país (o quê, quanto, de quem, quem com nome) e o
   ranking "onde vender". Cada bloco leva a sigla da fonte (.vx-mk-sig) — quem é, só Configurações diz.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-mk { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(16px * var(--vx-raio, 1)); padding:16px 18px 14px; margin:4px 0 8px; }
.vx-mk-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.vx-mk-cab h2 { font-size:17px; font-weight:700; margin:0; color:var(--vx-text); }
.vx-mk-cab p { font-size:12.5px; color:var(--vx-muted); margin:3px 0 0; max-width:640px; }
.vx-mk-ctrl { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
/* width:auto — o .vx-input tem largura cheia, e o seletor de ano caía sozinho numa segunda linha. Teto de 280 (era 240):
   "Pedra artificial e placa (concorrência)", a opção mais longa, não cabe em 240 com o recuo e a seta do select */
.vx-mk-sel { height:32px; font-size:12.5px; width:auto !important; max-width:280px; min-width:0; }
.vx-mk-sel.ano { max-width:96px; }
.vx-mk-lnk { background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; text-align:left; }
.vx-mk-lnk:hover, .vx-mk-lnk:focus-visible { color:#60a5fa; text-decoration:underline; }
/* o "ver na lista ›" do recibo da busca paga: a porta para os importadores que acabaram de chegar */
.vx-mk-lnk.vx-cp-ver-trazidos { margin-left:6px; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
/* "já trazer os embarques" da busca paga: a caixa e o custo dela, logo abaixo da linha da busca */
.vx-cp-comemb { display:flex; align-items:flex-start; gap:8px; margin-top:10px; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-cp-comemb input { margin-top:2px; accent-color:var(--vx-teal-br); }
/* quando a empresa entrou na base (V174): discreto na linha, aceso nos três primeiros dias */
.vx-cp-entrou { font-size:11px; color:var(--vx-faint); white-space:nowrap; }
.vx-cp-entrou.novo { color:var(--vx-teal-br); font-weight:700; }
/* os embarques da empresa, a um toque, no alto dos Registros da ficha */
.vx-cp-embbusca { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:2px 0 10px; }
.vx-cp-embok { color:var(--vx-teal-br); }
/* quantidade, transporte e marca do manifesto (V175), embaixo do produto nos Registros da ficha */
.vx-cp-regdet { display:block; font-size:11px; color:var(--vx-faint); margin-top:1px; }
/* o que o manifesto diz do produto ("GRANITE SLABS"): duas linhas; o clique abre o texto inteiro (01/10/2026, o Daniel: "seria
   bom eu clicar e detalhar o que foi") — <details> nativo, sem ida ao servidor, e funciona no toque */
.vx-cp-regdesc { display:block; margin-top:1px; font-size:11px; color:var(--vx-muted); min-width:0; }
.vx-cp-regdesc > summary { list-style:none; cursor:pointer; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; white-space:normal; overflow-wrap:anywhere; }
.vx-cp-regdesc > summary::-webkit-details-marker { display:none; }
.vx-cp-regdesc > summary::marker { content:""; }
.vx-cp-regdesc > summary:hover { color:var(--vx-text); }
.vx-cp-regdesc[open] > summary { display:block; -webkit-line-clamp:none; overflow:visible; color:var(--vx-text); }
/* o clique mostra que há o que abrir; aberto, o detalhe do embarque (01/10/2026, o Daniel: "clico e nada acontece") */
.vx-cp-regdesc > summary::after { content:" · detalhe ›"; color:var(--vx-teal-br); font-weight:600; }
.vx-cp-regdesc[open] > summary::after { content:" · fechar"; }
.vx-cp-regmais { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; margin:2px 0 6px; padding:8px 10px; white-space:normal;
  border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface-2); font-size:11.5px; }
/* a linha inteira da tabela, embaixo do registro — só com a descrição aberta */
.vx-cp-reg > .vx-cp-regmais { display:none; grid-column:1 / -1; }
.vx-cp-reg:has(details.vx-cp-regdesc[open]) > .vx-cp-regmais { display:grid; }
.vx-cp-regmais dt { color:var(--vx-faint); }
.vx-cp-regmais dd { margin:0; color:var(--vx-text); overflow-wrap:anywhere; min-width:0; }
/* até onde a busca paga já foi, por produto e destino */
.vx-cp-progresso { margin-top:8px; }
.vx-mk-lnk.vx-cp-recomecar { margin-left:6px; text-decoration:underline; text-underline-offset:2px; }
/* agente de carga: o primeiro aviso da ficha — o nome está no manifesto, mas não é quem compra */
.vx-cp-logist { margin:4px 0 10px; padding:8px 10px; border-radius:calc(8px * var(--vx-raio, 1)); font-size:12.5px; line-height:1.45;
  background:color-mix(in srgb, var(--vx-morno) 12%, transparent); border:1px solid color-mix(in srgb, var(--vx-morno) 45%, transparent); }
.vx-cp-logist b { color:var(--vx-morno); margin-right:4px; }
/* o que a lista da busca paga trouxe da empresa (porte, origens, portos, produtos) */
.vx-cp-nafonte { margin:0 0 10px; padding:8px 10px; border-radius:calc(8px * var(--vx-raio, 1)); font-size:12.5px; line-height:1.55;
  background:var(--vx-surface-2); border:1px solid var(--vx-border); }
.vx-cp-nafonte .t { font-size:11px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); margin-bottom:2px; }
.vx-cp-nafonte .k { color:var(--vx-faint); margin-right:4px; }
.vx-mk-carreg-det { font-size:12px; color:var(--vx-muted); margin:6px 0 0; }
.vx-mk-seg { display:inline-flex; border:1px solid var(--vx-border); border-radius:var(--vx-pill, 99px); overflow:hidden; }
.vx-mk-seg button { background:transparent; border:0; color:var(--vx-muted); font-size:12px; font-weight:600; padding:7px 12px; cursor:pointer; }
.vx-mk-seg button.on { background:rgba(59,130,246,.18); color:#60a5fa; }
.vx-mk-sig { font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:var(--vx-muted);
  border:1px solid var(--vx-border); border-radius:calc(4px * var(--vx-raio, 1)); padding:0 4px; margin-left:4px; vertical-align:1px; white-space:nowrap; }
.vx-mk-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin:14px 0 12px; }
.vx-mk-kpi { background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:10px 12px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.vx-mk-kpi .l { font-size:11.5px; color:var(--vx-muted); }
.vx-mk-kpi b { font-size:22px; font-weight:700; color:var(--vx-text); letter-spacing:calc(-.3px * var(--vx-tracking, 1)); }
.vx-mk-kpi .s { font-size:11px; color:var(--vx-muted); }
.vx-mk em.up, .vx-mk span.up { color:#22c55e; font-style:normal; }
.vx-mk em.down, .vx-mk span.down { color:#ef4444; font-style:normal; }
.vx-mk span.novo { color:#60a5fa; font-size:11px; }
/* o mapa até ~960px (≈500px de altura na proporção do mundo); em tela larga, a lista ao lado fica com o resto */
.vx-mk-corpo { display:grid; grid-template-columns:minmax(0,960px) minmax(260px,1fr); gap:12px; align-items:start; }
.vx-mk-mapa-wrap { position:relative; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); overflow:hidden; background:#10141b; }
:root.vx-light .vx-mk-mapa-wrap { background:#eef2f7; }
/* A PROPORÇÃO DO MUNDO, e não uma altura fixa: sem as cópias do mundo nas laterais, o MapLibre obriga o
   mapa a preencher a LARGURA — num quadro largo e baixo o zoom travava alto e cortava a Europa e o sul.
   Com ~1,9:1 (o recorte de -56° a 76° em Mercator) o mundo cabe inteiro em qualquer largura. */
.vx-mk-mapa { width:100%; aspect-ratio:1.9 / 1; }
.vx-mk-carreg { position:absolute; top:10px; left:12px; font-size:12px; color:var(--vx-muted); }
.vx-mk-leg { position:absolute; left:10px; bottom:8px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:11px;
  color:#e9ecf4; background:rgba(8,12,20,.66); padding:4px 10px; border-radius:var(--vx-pill, 99px); pointer-events:none; max-width:calc(100% - 20px); }
.vx-mk-leg i.o, .vx-mk-leg i.p { display:inline-block; width:10px; height:10px; border-radius:calc(2px * var(--vx-raio, 1)); vertical-align:-1px; margin-right:3px; }
.vx-mk-leg i.o { background:#f97316; }
.vx-mk-leg i.p { background:#3b82f6; }
.vx-mk-leg .vx-mk-sig { color:#cbd5e1; border-color:rgba(255,255,255,.25); }
.vx-mk-tip { position:absolute; display:none; pointer-events:none; z-index:5; font-size:12px; background:rgba(8,12,20,.92); color:#e9ecf4;
  border:1px solid rgba(255,255,255,.12); padding:5px 9px; border-radius:calc(8px * var(--vx-raio, 1)); white-space:nowrap; }
.vx-mk-lado { border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); padding:8px; overflow:auto; max-height:560px; background:var(--vx-bg-2); }
.vx-mk-lado-tit { font-size:11.5px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.3px * var(--vx-tracking, 1)); padding:2px 4px 6px; }
.vx-mk-li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1px 8px; width:100%; text-align:left; background:transparent;
  border:1px solid transparent; border-radius:calc(8px * var(--vx-raio, 1)); padding:6px 6px; cursor:pointer; color:var(--vx-text); }
.vx-mk-li:hover { border-color:var(--vx-border); }
.vx-mk-li.on { border-color:#3b82f6; background:rgba(59,130,246,.10); }
.vx-mk-li .n { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-mk-li .v { font-size:12px; font-weight:600; }
.vx-mk-li .bar { grid-column:1 / -1; height:4px; border-radius:calc(2px * var(--vx-raio, 1)); background:rgba(148,163,184,.15); overflow:hidden; }
.vx-mk-li .bar i { display:block; height:100%; background:#3b82f6; border-radius:calc(2px * var(--vx-raio, 1)); }
.vx-mk-li .f { grid-column:1 / -1; font-size:10.5px; color:var(--vx-muted); }
.vx-mk-det { margin-top:14px; border:1px solid #3b82f6; border-radius:calc(14px * var(--vx-raio, 1)); padding:12px 14px; background:rgba(59,130,246,.04); }
.vx-mk-det-cab { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.vx-mk-det-cab h3 { margin:0; font-size:16px; font-weight:700; color:var(--vx-text); }
.vx-mk-det-cab h3 span { font-size:12px; font-weight:500; color:var(--vx-muted); margin-left:6px; }
.vx-mk-det-cab .acoes { display:flex; gap:6px; align-items:center; }
.vx-mk-bt { display:inline-flex; align-items:center; gap:5px; background:transparent; border:1px solid #3b82f6; color:#60a5fa;
  border-radius:calc(8px * var(--vx-raio, 1)); padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer; }
.vx-mk-x { background:transparent; border:1px solid var(--vx-border); color:var(--vx-muted); border-radius:calc(8px * var(--vx-raio, 1)); width:28px; height:28px; cursor:pointer; }
.vx-mk-kpis.det { margin:10px 0 6px; }
.vx-mk-sec { font-size:11.5px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin:14px 0 8px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vx-mk-serie { display:flex; align-items:flex-end; gap:8px; height:130px; padding:18px 2px 4px; position:relative; }
.vx-mk-serie .col { flex:1 1 0; min-width:18px; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; }
.vx-mk-serie .barras { position:relative; width:100%; max-width:38px; flex:1 1 auto; }
.vx-mk-serie .barras i { position:absolute; left:0; right:0; bottom:0; border-radius:calc(4px * var(--vx-raio, 1)) calc(4px * var(--vx-raio, 1)) 0 0; }
.vx-mk-serie .barras i.t { background:rgba(59,130,246,.35); }
.vx-mk-serie .barras i.b { background:#f97316; left:22%; right:22%; }
.vx-mk-serie .col span { font-size:10.5px; color:var(--vx-muted); }
.vx-mk-serie .col.on span { color:var(--vx-text); font-weight:700; }
.vx-mk-serie .leg { position:absolute; right:4px; top:0; display:flex; gap:10px; font-size:10.5px; color:var(--vx-muted); }
.vx-mk-serie .leg i { display:inline-block; width:9px; height:9px; border-radius:calc(2px * var(--vx-raio, 1)); margin-right:3px; vertical-align:-1px; }
.vx-mk-serie .leg i.t { background:rgba(59,130,246,.5); }
.vx-mk-serie .leg i.b { background:#f97316; }
.vx-mk-duas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
/* a tabela rola DENTRO da caixa dela — no celular, cinco colunas de número não cabem em 360px e empurravam a página */
.vx-mk-duas > div, .vx-mk-rank { min-width:0; overflow-x:auto; }
.vx-mk-tab { width:100%; border-collapse:collapse; font-size:12px; }
.vx-mk-tab th { text-align:left; font-size:10.5px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.3px * var(--vx-tracking, 1));
  padding:5px 6px; border-bottom:1px solid var(--vx-border); white-space:nowrap; }
.vx-mk-tab td { padding:6px 6px; border-bottom:1px solid var(--vx-border); color:var(--vx-text); }
.vx-mk-tab .n { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vx-mk-tab tr.br td { background:rgba(249,115,22,.10); font-weight:600; }
.vx-mk-tab tr.on td { background:rgba(59,130,246,.10); }
.vx-mk-tab tbody tr:hover td { background:rgba(148,163,184,.06); }
.vx-mk-tag { font-size:9.5px; font-weight:700; text-transform:var(--vx-caixa, uppercase); border-radius:calc(4px * var(--vx-raio, 1)); padding:1px 5px; margin-right:4px; }
.vx-mk-tag.chapa { color:#60a5fa; background:rgba(59,130,246,.14); }
.vx-mk-tag.bloco { color:#f59e0b; background:rgba(245,158,11,.14); }
.vx-mk-nomes { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.vx-mk-nome { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 10px; background:var(--vx-bg-2); display:flex; flex-direction:column; gap:2px; min-width:0; }
.vx-mk-nome b { font-size:12.5px; color:var(--vx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-mk-nome span { font-size:11.5px; color:var(--vx-muted); }
.vx-mk-nome em { font-size:10.5px; color:var(--vx-faint); font-style:normal; }
.vx-mk-nome em a { color:var(--vx-teal-br); margin-left:4px; text-decoration:none; }
.vx-mk-nome em a:hover { text-decoration:underline; }
.vx-mk-vazio { font-size:12.5px; color:var(--vx-muted); padding:10px 12px; border:1px dashed var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); }
.vx-mk-mais { font-size:11.5px; color:var(--vx-muted); margin-top:6px; }
.vx-mk-ord { display:inline-flex; gap:4px; margin-left:auto; text-transform:none; letter-spacing:0; }
.vx-mk-ord button { background:transparent; border:1px solid var(--vx-border); color:var(--vx-muted); border-radius:var(--vx-pill, 99px); padding:3px 9px; font-size:11px; cursor:pointer; }
.vx-mk-ord button.on { border-color:#3b82f6; color:#60a5fa; }
.vx-mk-rank { overflow-x:auto; }
.vx-mk-rodape { margin-top:12px; font-size:11px; color:var(--vx-faint); line-height:1.5; }
:root.vx-light .vx-mk-seg button.on, :root.vx-light .vx-mk-bt, :root.vx-light .vx-mk-ord button.on { color:#1d4ed8; }
:root.vx-light .vx-mk-leg { background:rgba(255,255,255,.85); color:#1e293b; }
:root.vx-light .vx-mk-leg .vx-mk-sig { color:#475569; border-color:rgba(15,23,42,.2); }
/* tema claro: verde, azul-claro e âmbar do escuro ficavam com contraste de 1,9–2,5:1 sobre o branco */
:root.vx-light .vx-mk em.up, :root.vx-light .vx-mk span.up { color:#15803d; }
:root.vx-light .vx-mk em.down, :root.vx-light .vx-mk span.down { color:#b91c1c; }
:root.vx-light .vx-mk span.novo, :root.vx-light .vx-mk-tag.chapa, :root.vx-light .vx-mk-lnk:hover { color:#1d4ed8; }
:root.vx-light .vx-mk-tag.bloco { color:#b45309; }
@media (max-width: 900px) {
  .vx-mk-corpo { grid-template-columns:minmax(0,1fr); }
  .vx-mk-lado { max-height:260px; }
  .vx-mk-duas { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 600px) {
  .vx-mk { padding:12px 12px 10px; }
  .vx-mk-ctrl { width:100%; }
  .vx-mk-seg { width:100%; }
  .vx-mk-seg button { flex:1 1 0; padding:7px 6px; }
  .vx-mk-sel { flex:1 1 140px; max-width:none; }
  .vx-mk-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vx-mk-kpi b { font-size:18px; }
  .vx-mk-ord { margin-left:0; flex-wrap:wrap; }
  /* a legenda sai de cima do mapa: num quadro de 170px ela cobria 40% da altura — e o Brasil, embaixo dela */
  .vx-mk-leg { position:static; border-radius:0 0 calc(12px * var(--vx-raio, 1)) calc(12px * var(--vx-raio, 1)); max-width:none; background:rgba(8,12,20,.85); }
}

/* ─────────────────────────────────────────────────────────────────────────────────────────────
   COMPRADORES — PAINEL (23/09/2026). Mesma linguagem do PainelMercado: Brasil em laranja, concorrente em azul,
   temperatura com os limiares da Prospecção (frio é cinza, não vermelho: aqui frio é "menos provável", não
   "problema"). A lista é GRADE e não <table>: no celular cada linha vira cartão sem trocar de marcação, e grade
   com minmax(0,…) não herda a armadilha do flex-basis 0 que nunca quebra linha.
   ───────────────────────────────────────────────────────────────────────────────────────────── */
.vx-cp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px 18px; flex-wrap:wrap; margin-bottom:12px; }
.vx-cp-head > div:first-child { flex:1 1 320px; min-width:0; }
.vx-cp-acoes { display:flex; gap:8px; align-items:center; flex:0 0 auto; flex-wrap:wrap; }
.vx-cp-acoes .vx-mk-bt { min-height:34px; }
.vx-cp-filtros .vx-cp-busca { flex:1 1 220px; min-width:180px; max-width:320px; }
/* a origem não encolhe recortada (o .vx-seg tem overflow:hidden, e flex com overflow zera o mínimo): rola de lado */
.vx-cp-oseg { flex:0 1 auto; max-width:100%; overflow-x:auto; height:40px; align-self:center; }
.vx-cp-oseg button { flex:0 0 auto; white-space:nowrap; }
.mud-list-item .vx-cp-hs { display:inline-block; padding-left:14px; font-size:12.5px; }
/* A OPÇÃO DO FILTRO FONTE (23/09/2026): o PAÍS em destaque (com o estado ou a cidade, quando há) e o tipo de dado
   miúdo ao lado — nunca o nome do órgão, que só Configurações mostra. Mora no popover do MudSelect, que o MudBlazor
   desenha fora da página: por isso sem ancestral no seletor. O tipo desce para baixo do país só quando a lista é
   estreita demais para os dois; dentro do campo (o valor escolhido), fica numa linha e o que não cabe some */
.vx-cp-fopc { display:inline-flex; align-items:baseline; flex-wrap:wrap; column-gap:6px; min-width:0; max-width:100%; line-height:1.3; }
.vx-cp-fopc .p { font-weight:700; }
.vx-cp-fopc .t { font-size:11.5px; font-weight:400; color:var(--vx-muted); }
.mud-input-slot .vx-cp-fopc { flex-wrap:nowrap; overflow:hidden; }

/* A BUSCA PAGA NUMA LINHA SÓ (23/09/2026): Produto, País destino, Quantos trazer e o botão, com a mesma altura e o
   mesmo pé. Antes a linha era a dos filtros (flex, align-items:flex-end), e o texto de ajuda do país, embaixo dele,
   subia aquele campo e deixava o botão solto no pé da linha. O que desalinhava, medido no MudBlazor 9.5: a caixa do
   campo denso tem ~37,6px (texto de 14px × 1,1876 + 21 de padding) e o botão ~36,5px; o campo guarda 8px em cima
   para o rótulo flutuante e 4px embaixo. Então: a altura vem da variável, nos dois; o pé de cada campo é o pé da
   caixa (margem de baixo zerada); e a linha alinha pelo pé. Flex com quebra, e não grade de colunas fixas: a busca
   mora num cartão cuja largura a tela não sabe — sem espaço, o botão desce inteiro para a linha de baixo, à direita,
   em vez de espremer os campos; no celular, uma coluna */
.vx-cp-busca-linha { --vx-cp-bl-h:40px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px; margin:12px 0 4px; }
.vx-cp-busca-linha > * { flex:1 1 180px; min-width:0; }
.vx-cp-busca-linha .mud-input-control.mud-input-control-margin-dense,
.vx-cp-busca-linha .mud-input-control.mud-input-outlined-with-label { margin-bottom:0; }
.vx-cp-busca-linha .mud-input.mud-input-outlined { min-height:var(--vx-cp-bl-h); }
.vx-cp-busca-linha .mud-input-control-helper-container { display:none; }
.vx-cp-busca-bt { white-space:nowrap; }
.vx-cp-busca-linha > .vx-cp-busca-bt { flex:0 0 auto; margin-left:auto; height:var(--vx-cp-bl-h); min-height:var(--vx-cp-bl-h); }
@media (max-width:768px) { .vx-cp-busca-linha { --vx-cp-bl-h:44px; } }   /* campo e botão de dedo, como o resto da casa */
@media (max-width:600px) {
  .vx-cp-busca-linha > * { flex-basis:100%; }
  .vx-cp-busca-linha > .vx-cp-busca-bt { flex:1 1 100%; margin-left:0; }
}
/* a DICA do seletor mora num invólucro sem caixa: o title posto no MudSelect cai num <input type=hidden> e nunca
   aparece; com display:contents o seletor continua sendo item da linha de filtros, como os outros */
.vx-cp-ftit { display:contents; }
.vx-cp-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:12px 0; }
.vx-cp-kpi { text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; transition:border-color .15s, background .15s; }
.vx-cp-kpi:hover:not(:disabled) { border-color:rgba(59,130,246,.55); }
.vx-cp-kpi:disabled { cursor:default; }
.vx-cp-kpi.on { border-color:#3b82f6; background:rgba(59,130,246,.08); }
.vx-cp-ativos { display:flex; gap:6px; align-items:center; overflow-x:auto; white-space:nowrap; margin:4px 0 8px; padding-bottom:2px; }
.vx-cp-ativos .lbl { font-size:11px; color:var(--vx-faint); flex:0 0 auto; }
.vx-cp-ativos .vx-tagchip { flex:0 0 auto; cursor:pointer; color:var(--vx-text); --tg:#3b82f6; }
.vx-cp-ativos .vx-tagchip span { opacity:.6; margin-left:2px; }
.vx-cp-limpar { font-size:12px; color:var(--vx-muted); flex:0 0 auto; margin-left:4px; }
.vx-cp-leitura { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); padding:12px 14px; margin:12px 0; }
.vx-cp-leitura .cab { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.vx-cp-leitura .cab b { font-size:13px; }
.vx-cp-leitura .cab span { font-size:11.5px; color:var(--vx-faint); }
.vx-cp-leitura ul { margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vx-cp-leitura li { display:grid; grid-template-columns:12px minmax(0,1fr); gap:6px; font-size:12.5px; list-style:none; line-height:1.5; }
.vx-cp-leitura li > i, .vx-cp-sinais li > i { width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--vx-faint); }
.vx-cp-leitura li.op > i, .vx-cp-sinais li.op > i { background:var(--vx-teal-br); }
.vx-cp-leitura li.at > i, .vx-cp-sinais li.at > i { background:var(--vx-morno); }
.vx-cp-ver { margin-left:4px; color:#60a5fa; font-weight:600; white-space:nowrap; }
.vx-cp-so-cel { display:none; }
.vx-cp-grade { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:14px 0; }
.vx-cp-bloco { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); padding:12px 14px; min-width:0; }
/* O TÍTULO DO BLOCO VEM EM DOIS: h3 no monitor (não dobra) e botão com aria-expanded no celular (dobra). Um botão
   no monitor anunciava "recolhido" com o corpo à vista; display:none tira o outro da árvore de acessibilidade */
.vx-cp-btit { width:100%; background:none; border:0; padding:0; margin:0 0 2px; font-family:inherit; text-align:left; cursor:pointer; }
.vx-cp-btit .vx-mk-sig { margin-left:auto; }
.vx-cp-btit-l { cursor:default; }
.vx-cp-btit-c { display:none; }
/* o mercado do território somado (Reunião → França) é o do país-mãe: esmaecido, com a explicação no title. Preso à
   .vx-mk-tab td: só .vx-cp-somado (0,1,0) perdia a cor para o .vx-mk-tab td (0,1,1), e os US$ 413,9 mi da Reunião saíam
   com o peso dos da França (conferência de 23/09/2026). Cor, e não opacity: opacity apagaria também a linha da célula */
.vx-mk-tab td.vx-cp-somado { color:var(--vx-faint); font-style:italic; cursor:help; }
.vx-cp-resumo { display:none; text-transform:none; letter-spacing:0; font-weight:500; color:var(--vx-teal-soft); }
.vx-cp-fina { font-size:11.5px; color:var(--vx-faint); margin:0 0 8px; line-height:1.45; }
.vx-cp-aviso { color:var(--vx-muted); }
.vx-cp-sub { font-size:11px; font-weight:700; letter-spacing:calc(.3px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin:12px 0 6px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vx-cp-nota { font-size:10.5px; font-weight:400; text-transform:none; letter-spacing:0; color:var(--vx-faint); }
.vx-cp-ordb { display:flex; flex-wrap:wrap; margin:0 0 8px; }
.vx-cp-mais { display:inline-block; margin-top:8px; font-size:12px; color:#60a5fa; font-weight:600; }
/* A TABELA DE PAÍSES MORA EM MEIA GRADE NO MONITOR (658px a 1707 de tela): com cabeçalho e etiqueta sem quebrar, o
   mínimo dela era 797px e a coluna Leitura sumia atrás da rolagem (conferência de 23/09/2026). Agora quebram o
   cabeçalho e a etiqueta, e as colunas que têm substituto saem pela largura do BLOCO, não da tela — container query,
   como a .vx-cli-lista: "Quentes livres" vira o sufixo "· N quentes" do país, e o "Cresce/ano" já está no title do
   país. Medido em cópias da tabela com os dados de hoje: 573px com tudo, 509 sem Quentes livres, 422 sem as duas —
   daí 600 e 500. A rolagem do invólucro fica como última rede (celular estreito) */
.vx-cp-tabwrap { container:vxcptab / inline-size; min-width:0; overflow-x:auto; }
/* .vx-mk-tab.vx-cp-tabpais, e não só .vx-cp-tabpais: o cabeçalho numérico é th.n, e o nowrap do .vx-mk-tab .n (0,2,0)
   venceria — justo "Quentes livres", "Com import." e "Do Brasil", os que mais alargavam */
.vx-mk-tab.vx-cp-tabpais th { white-space:normal; vertical-align:bottom; }
.vx-cp-tabpais td { vertical-align:top; }
/* A CÉLULA DA LEITURA CONTINUA CÉLULA. Ela leva a classe .vx-cp-chips, e com o display:flex dela o navegador a
   embrulhava numa célula anônima: a linha de baixo da Leitura saía mais alta que a das vizinhas quando o nome do país
   quebrava em duas linhas. As etiquetas correm em linha, com a margem no lugar do gap (o padding de baixo desconta) */
.vx-cp-tabpais td.vx-cp-chips { display:table-cell; padding-bottom:2px; }
.vx-cp-tabpais td.vx-cp-chips > .vx-tagchip { margin:0 4px 4px 0; vertical-align:top; }
/* a etiqueta da tabela não é alvo de dedo (cursor:default): fica miúda também no celular, onde o .vx-tagchip.mini
   sobe para 32px e cada linha da tabela passava de 80px de altura */
.vx-cp-tabpais .vx-tagchip.mini { white-space:normal; line-height:1.2; min-height:0; padding:3px 8px; }
.vx-cp-qlsuf { display:none; font-size:11px; color:var(--vx-quente); }
@container vxcptab (max-width:600px) {
  .vx-cp-tabpais .c-ql { display:none; }
  .vx-cp-tabpais .vx-cp-qlsuf { display:inline; }
}
@container vxcptab (max-width:500px) { .vx-cp-tabpais .c-cresce { display:none; } }
@container vxcptab (max-width:420px) { .vx-cp-tabpais th, .vx-cp-tabpais td { padding-left:4px; padding-right:4px; } }
.vx-cp-barras .l { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; margin-bottom:6px; }
.vx-cp-barras button.l { width:100%; background:none; border:0; padding:3px 4px; margin:0 0 3px; border-radius:calc(6px * var(--vx-raio, 1)); font:inherit; color:inherit;
  text-align:left; cursor:pointer; }
.vx-cp-barras button.l:hover, .vx-cp-barras button.l.on { background:rgba(59,130,246,.08); }
.vx-cp-barras .l.trac { border:1px dashed var(--vx-border); color:var(--vx-muted); }
.vx-cp-barras .t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.vx-cp-barras .n { font-size:11.5px; color:var(--vx-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.vx-cp-barras .bar { grid-column:1 / -1; height:6px; border-radius:calc(3px * var(--vx-raio, 1)); background:rgba(148,163,184,.15); overflow:hidden; }
.vx-cp-barras .bar i { display:block; height:100%; background:#3b82f6; }
.vx-cp-barras .l.br .bar i { background:#f97316; } .vx-cp-barras .l.br .n, .vx-cp-barras .l.br .t { font-weight:700; }
.vx-cp-e1 { font-size:12.5px; margin:0 0 8px; }
.vx-cp-empilha { display:flex; height:10px; border-radius:calc(5px * var(--vx-raio, 1)); overflow:hidden; background:rgba(148,163,184,.15); }
.vx-cp-empilha i { flex:0 0 auto; }
.vx-cp-empilha i.br { background:#f97316; }
.vx-cp-empilha i.brm { background:repeating-linear-gradient(45deg,#f97316 0 4px,#fdba74 4px 6px); }
.vx-cp-empilha i.co { background:#3b82f6; }
.vx-cp-leg { display:flex; gap:4px 14px; flex-wrap:wrap; margin:6px 0 10px; font-size:11.5px; color:var(--vx-muted); }
.vx-cp-leg i { display:inline-block; width:10px; height:10px; border-radius:calc(2px * var(--vx-raio, 1)); vertical-align:-1px; margin-right:3px; }
.vx-cp-leg i.br { background:#f97316; } .vx-cp-leg i.co { background:#3b82f6; }
.vx-cp-leg i.brm { background:repeating-linear-gradient(45deg,#f97316 0 3px,#fdba74 3px 5px); }
/* o número da legenda separado do texto (01/10/2026, o Daniel: "um pouquinho de espaço"): o botão é flex, e num
   container flex o espaço entre o texto e o <b> some */
.vx-cp-leg b { margin-left:5px; font-variant-numeric:tabular-nums; }
.vx-cp-opo { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:4px 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--vx-border); }
.vx-cp-opo:last-of-type { border-bottom:0; }
.vx-cp-opo .t { min-width:0; }
.vx-cp-opo .nm, .vx-cp-np .nm { display:block; max-width:100%; font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-cp-opo .s { font-size:11px; color:var(--vx-faint); }
.vx-cp-opo .bts, .vx-cp-lin .bts { display:flex; gap:6px; align-items:center; justify-content:flex-end; }
.vx-cp-chips { display:flex; gap:4px; flex-wrap:wrap; align-items:center; min-width:0; }
.vx-cp-chips .vx-tagchip.mini { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.vx-cp-orb { cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; min-height:30px; }
.vx-cp-orb:disabled { opacity:.6; cursor:default; }
.vx-cp-abre { width:32px; height:32px; flex:0 0 auto; border-radius:calc(8px * var(--vx-raio, 1)); border:1px solid var(--vx-border); background:transparent;
  color:var(--vx-muted); font-size:18px; line-height:1; cursor:pointer; }
.vx-cp-abre:hover { color:var(--vx-text); border-color:#3b82f6; }
.vx-cp-np { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vx-cp-np li { min-width:0; }
.vx-cp-np li span { display:block; font-size:11px; color:var(--vx-faint); }
.vx-cp-hist.vx-bars { height:120px; }
.vx-cp-hist .vx-bar-v { opacity:1; }
.vx-fec-arq.teal { color:var(--vx-teal-soft); border-color:color-mix(in srgb, var(--vx-teal-br) 35%, transparent); }
.vx-cp-parece { --tg:var(--vx-morno); color:var(--vx-morno); border-color:rgba(242,180,65,.45); }

/* a lista */
.vx-cp-lista { margin:18px 0 8px; }
.vx-cp-lhead { display:flex; justify-content:space-between; align-items:center; gap:8px 14px; flex-wrap:wrap; margin-bottom:6px; }
.vx-cp-lhead .n { font-size:13px; outline:none; }
.vx-cp-lhead .n span { color:var(--vx-muted); }
.vx-cp-lhead .n .vx-cp-atualiza { color:var(--vx-teal-soft); }
.vx-cp-ordem { display:flex; align-items:center; gap:8px; min-width:0; }
.vx-cp-ordem .lbl { font-size:11.5px; color:var(--vx-faint); }
.vx-cp-ord-sel { display:none; }
.vx-cp-como { margin:0 0 10px; font-size:12px; color:var(--vx-muted); }
.vx-cp-como summary, .vx-cp-porque summary { cursor:pointer; color:#60a5fa; font-weight:600; font-size:12px; }
.vx-cp-como-tab { display:flex; flex-direction:column; gap:6px; margin-top:8px; padding:10px 12px; border:1px solid var(--vx-border);
  border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); max-width:900px; }
.vx-cp-como-tab .l { display:grid; grid-template-columns:110px minmax(0,1fr); gap:10px; line-height:1.45; }
.vx-cp-cab, .vx-cp-lin { display:grid; grid-template-columns:48px minmax(0,2.2fr) minmax(0,1.7fr) minmax(0,1.1fr) 150px 130px 150px; gap:10px; }
.vx-cp-cab { position:sticky; top:0; z-index:1; font-size:10.5px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); padding:6px 12px;
  background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0 0; }
.vx-cp-lin { align-items:start; padding:10px 12px; border:1px solid var(--vx-border); border-top:0; cursor:pointer; background:var(--vx-surface); }
.vx-cp-lin:hover { background:var(--vx-surface-2); }
.vx-cp-lin.on { box-shadow:inset 3px 0 0 #3b82f6; }
.vx-cp-lin > * { min-width:0; }
.vx-cp-lin .nm { display:block; max-width:100%; background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--vx-text);
  text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-cp-lin .nm:hover, .vx-cp-lin .nm:focus-visible { color:#60a5fa; text-decoration:underline; }
.vx-cp-lin .l2 { font-size:11.5px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }
.vx-cp-lin .l3 { margin-top:4px; }
.vx-cp-lin .fontes { font-size:10.5px; color:var(--vx-faint); }
.vx-cp-lin .l3 a { font-size:11px; color:var(--vx-teal-br); text-decoration:none; }
.vx-cp-lin .c-quando, .vx-cp-lin .c-vol, .vx-cp-lin .c-orig { font-size:12.5px; }
.vx-cp-lin .c-acao { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.vx-cp-lin .c-acao .vx-fec-arq { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* EM ÓRBITA, À VISTA (pedido do Daniel, 23/09/2026: "poderia sinalizar"). Quem já é lead no funil aparece de longe:
   a LINHA ganha filete e fundo verde-água, a BANDEIRINHA vai ao lado do nome (lista e alto da ficha) e a ETIQUETA diz
   de quem é — na ficha, entre as etiquetas e no rodapé, no lugar do "+ levar para a órbita". Âmbar (.outro) quando o
   lead é de outro vendedor. A cor é uma variável só (--vx-cp-orb), e a linha segue a bandeira que tem dentro (:has):
   o filete nunca diz verde ao lado de uma bandeira âmbar. inline-block, e não inline-flex: dono comprido corta com
   reticências, e flex não corta */
.vx-cp-orbtag { --vx-cp-orb:var(--vx-teal-br); display:inline-block; max-width:100%; vertical-align:middle;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 9px 2px 7px; border-radius:var(--vx-pill, 999px);
  font-size:10.5px; font-weight:700; line-height:14px; color:var(--vx-cp-orb);
  background:color-mix(in srgb, var(--vx-cp-orb) 14%, transparent); border:1px solid color-mix(in srgb, var(--vx-cp-orb) 55%, transparent); }
/* o ponto com anel — a órbita desenhada, igual onde quer que a etiqueta apareça */
.vx-cp-orbtag::before { content:""; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%;
  vertical-align:0; background:currentColor; box-shadow:0 0 0 2px color-mix(in srgb, var(--vx-cp-orb) 30%, transparent); }
.vx-cp-orbtag.outro { --vx-cp-orb:var(--vx-morno); }
/* A BANDEIRINHA (pedido do Daniel, 23/09/2026: "bandeirinha em vez de texto" — saiu o "EM ÓRBITA" da lista) e a MARCA
   DA PROSPECÇÃO: dois ícones pequenos ao lado do nome, na lista, nas Oportunidades e no alto da ficha. O que dizem vai
   no title e no aria-label ("em órbita com fulano desde 23/09/2026"). A bandeira usa a variável da órbita — verde-água,
   âmbar (.outro) quando o lead é de outro vendedor —; a da Prospecção é azul, a cor que o módulo já dá ao que é link e
   ação. A página põe nome e ícones numa fileira (.l1, flex): o nome cede com reticências, os ícones nunca */
.vx-cp-band, .vx-cp-prmark { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:20px; height:20px;
  border-radius:calc(6px * var(--vx-raio, 1)); vertical-align:middle; line-height:0; cursor:help; }
.vx-cp-band { --vx-cp-orb:var(--vx-teal-br); color:var(--vx-cp-orb); background:color-mix(in srgb, var(--vx-cp-orb) 15%, transparent); }
.vx-cp-band.outro { --vx-cp-orb:var(--vx-morno); }
.vx-cp-prmark { color:#60a5fa; background:rgba(96,165,250,.14); }
.vx-cp-band .mud-icon-root, .vx-cp-prmark .mud-icon-root { display:block; }
.vx-cp-lin .nm { min-width:0; }
.vx-cp-lin .l1, .vx-cp-opo .l1 { display:flex; align-items:center; gap:6px; min-width:0; }
.vx-cp-lin .l1 > .nm, .vx-cp-opo .l1 > .nm { flex:0 1 auto; min-width:0; max-width:none; }
/* no alto da ficha, dentro do título (o nome do diálogo diz "em órbita com…"): do tamanho da letra de 18px */
.vx-cp-fnome .vx-cp-band, .vx-cp-fnome .vx-cp-prmark { width:24px; height:24px; margin-left:6px; vertical-align:-3px; }
.vx-cp-fnome .vx-cp-band + .vx-cp-prmark { margin-left:4px; }
/* no rodapé da ficha, a etiqueta tem a altura dos botões vizinhos (.vx-cp-pebt, 34px) */
.vx-cp-ficha-pe .vx-cp-orbtag { font-size:12px; font-weight:600; line-height:20px; padding:6px 12px 6px 10px; }
/* "na Prospecção" no rodapé da ficha, no lugar do "+ prospecção": a mesma altura, o azul da marca */
.vx-cp-prtag { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:var(--vx-pill, 999px); font-size:12px;
  font-weight:600; color:#60a5fa; background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.4); }
.vx-cp-lin.vx-cp-linha-orbita { --vx-cp-orb:var(--vx-teal-br); box-shadow:inset 3px 0 0 var(--vx-cp-orb);
  background:color-mix(in srgb, var(--vx-cp-orb) 7%, var(--vx-surface)); }
.vx-cp-lin.vx-cp-linha-orbita:hover { background:color-mix(in srgb, var(--vx-cp-orb) 11%, var(--vx-surface-2)); }
.vx-cp-lin.vx-cp-linha-orbita.outro, .vx-cp-lin.vx-cp-linha-orbita:has(.vx-cp-band.outro) { --vx-cp-orb:var(--vx-morno); }
/* aberta na ficha E em órbita: o azul de "é esta" na borda, e o filete da órbita logo ao lado */
.vx-cp-lin.vx-cp-linha-orbita.on { box-shadow:inset 3px 0 0 #3b82f6, inset 6px 0 0 var(--vx-cp-orb); }
/* "compra de: pedreira-x.com.br (Castelo, Brasil) e mais 2" — uma linha curta embaixo do lugar, que corta com
   reticências como a .l2; um tom acima dela, porque é o concorrente com nome */
.vx-cp-lin .l2.vx-cp-lcompra { color:color-mix(in srgb, var(--vx-text) 78%, transparent); }
/* o "+ prospecção" da lista vai embaixo do "+ órbita": os dois e a seta não cabem na fileira da coluna de 150px */
.vx-cp-lin .c-acao > .vx-cp-prbt { align-self:flex-end; }
.vx-cp-opo .bts { flex-wrap:wrap; max-width:250px; }
/* AS CAIXAS DE OCULTAR, acima da lista (pedido do Daniel, 23/09/2026): marcadas por padrão, com a contagem ao lado
   ("ocultando 12 em órbita · mostrar"). Com a Situação do mesmo grupo escolhida, a caixa esmaece (.off) e diz que a
   Situação manda. A caixa é o input nativo, com o verde da casa (accent-color) e o rótulo inteiro como alvo do dedo */
.vx-cp-ocultar { display:flex; flex-wrap:wrap; align-items:center; gap:2px 20px; margin:0 0 6px; font-size:12.5px; }
.vx-cp-ocx { display:inline-flex; flex-wrap:wrap; align-items:center; gap:0 8px; min-width:0; }
.vx-cp-ocx label { display:inline-flex; align-items:center; gap:7px; min-height:32px; cursor:pointer; color:var(--vx-text); }
.vx-cp-ocx input { width:16px; height:16px; margin:0; flex:0 0 auto; accent-color:var(--vx-teal-br); cursor:pointer; }
.vx-cp-ocx .n { font-size:11.5px; color:var(--vx-muted); }
.vx-cp-ocx .n .vx-mk-lnk { color:#60a5fa; font-weight:600; }
.vx-cp-ocx.off label, .vx-cp-ocx.off input { color:var(--vx-faint); cursor:default; }
.vx-cp-prio { display:inline-grid; place-items:center; width:38px; height:26px; border-radius:calc(8px * var(--vx-raio, 1)); font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; }
.vx-cp-prio.q { background:var(--vx-quente); color:var(--vx-sobre-destaque, #04110c); }
.vx-cp-prio.m { background:var(--vx-morno); color:#1a1200; }
.vx-cp-prio.f { background:var(--vx-surface-2); color:var(--vx-muted); border:1px solid var(--vx-border); }
.vx-cp-prod { display:inline-block; font-size:11px; padding:2px 7px; border-radius:calc(6px * var(--vx-raio, 1)); margin:0 4px 4px 0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top; }
.vx-cp-prod.chapa { color:#60a5fa; background:rgba(59,130,246,.14); }
.vx-cp-prod.bloco { color:#f59e0b; background:rgba(245,158,11,.14); }
.vx-cp-prod.artif { color:#a78bfa; background:rgba(167,139,250,.14); }
.vx-cp-prod.ladr, .vx-cp-prod.fora { color:var(--vx-muted); background:rgba(148,163,184,.14); }
.vx-mk-tag.artif { color:#a78bfa; background:rgba(167,139,250,.14); }
.vx-mk-tag.ladr, .vx-mk-tag.fora { color:var(--vx-muted); background:rgba(148,163,184,.14); }
.vx-cp-orig.br { color:#f97316; font-weight:600; } .vx-cp-orig.conc { color:#60a5fa; }
.vx-cp-sem { color:var(--vx-faint); font-style:italic; font-size:12px; }
/* A PEDRA PELO NOME NO MANIFESTO (02/10/2026, o Daniel: "o nome dos produtos — deve ter algo como Perla"): na linha, embaixo
   do código; no bloco "O que compram", os nomes do recorte — o clique busca quem compra */
.vx-cp-pedras { font-size:11.5px; color:var(--vx-text); margin-top:1px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-cp-pedras-tit { margin:12px 0 6px; }
.vx-cp-pedras-lista { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.vx-cp-pedra { font:inherit; font-size:12px; padding:3px 10px; border-radius:var(--vx-pill, 999px); border:1px solid var(--vx-border);
  background:var(--vx-surface-2); color:var(--vx-text); cursor:pointer; }
.vx-cp-pedra b { margin-left:5px; font-weight:700; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-cp-pedra:hover { border-color:var(--vx-teal); }
.vx-cp-pedra.on { border-color:var(--vx-teal); background:var(--vx-teal-soft); }
.vx-cp-pedra.fixa, .vx-cp-pedra.fixa:hover { cursor:default; border-color:var(--vx-border); }
.vx-cp-parado { color:var(--vx-morno); font-weight:600; }
/* A PRÓXIMA COMPRA PELO RITMO (28/09/2026, PrevisaoCompra): na linha da lista, no alto da ficha e em "Quando compra".
   Verde-água = ligar já (em breve, ou pode ter comprado agora); âmbar = atrasada; cinza = prevista mais longe */
.vx-cp-prox { color:var(--vx-muted); font-weight:600; }
.vx-cp-prox.quente { color:var(--vx-teal-br); }
.vx-cp-prox.atrasada { color:var(--vx-morno); }
.vx-cp-proxtag { --vx-cp-px:var(--vx-muted); display:inline-block; vertical-align:middle; white-space:nowrap; padding:2px 9px;
  border-radius:var(--vx-pill, 999px); font-size:10.5px; font-weight:700; line-height:14px; color:var(--vx-cp-px);
  background:color-mix(in srgb, var(--vx-cp-px) 12%, transparent); border:1px solid color-mix(in srgb, var(--vx-cp-px) 45%, transparent); }
.vx-cp-proxtag.quente { --vx-cp-px:var(--vx-teal-br); }
.vx-cp-proxtag.atrasada { --vx-cp-px:var(--vx-morno); }
.vx-cp-proxima { margin-top:10px; padding:10px 12px; border-radius:calc(10px * var(--vx-raio, 1)); font-size:12.5px; line-height:1.5; color:var(--vx-text);
  border:1px solid var(--vx-border-2); background:var(--vx-surface); }
.vx-cp-proxima b { display:block; font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); margin-bottom:2px; }
.vx-cp-proxima.quente { border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-cp-proxima.quente b { color:var(--vx-teal-br); }
.vx-cp-proxima.atrasada { border-color:color-mix(in srgb, var(--vx-morno) 55%, transparent); }
.vx-cp-proxima.atrasada b { color:var(--vx-morno); }
.vx-tagchip.mini.trac { border-style:dashed; }
.vx-cp-meses { display:inline-grid; grid-template-columns:repeat(12,8px); gap:2px; vertical-align:middle; margin-right:6px; }
.vx-cp-meses i { height:10px; border-radius:calc(2px * var(--vx-raio, 1)); background:rgba(148,163,184,.18); }
.vx-cp-meses i.on { background:var(--vx-teal-br); }
.vx-cp-meses i.fora { background:repeating-linear-gradient(45deg,transparent 0 2px,rgba(148,163,184,.25) 2px 3px); }
.vx-cp-lista .vx-pager { margin-top:14px; }
.vx-cp-duas { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }

/* a ficha (gaveta): o rodapé é filho flex — nunca position:fixed, que a animação vx-slidein prenderia */
.vx-cp-ficha { width:680px; }
.vx-cp-ficha:focus { outline:none; }
/* fixos só a navegação (cabeça) e o rodapé: nome, etiquetas e atalhos moram no corpo que rola — na cabeça, eles
   comiam metade da altura da gaveta no celular */
.vx-cp-fhead { padding:10px 18px; }
.vx-cp-fnav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; min-width:0; }
.vx-cp-fnav .vx-mk-bt:disabled { opacity:.4; cursor:default; }
.vx-cp-fpos { font-size:12px; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-cp-ftopo { padding-top:14px; margin-bottom:10px; }
.vx-cp-fnome { font-size:18px; font-weight:700; margin:0 0 2px; color:var(--vx-text); overflow-wrap:anywhere; outline:none; }
.vx-cp-fsub { font-size:12px; color:var(--vx-muted); }
.vx-cp-fcompra { margin-top:2px; overflow-wrap:anywhere; }
.vx-cp-fchips { margin-top:8px; }
.vx-cp-faixa { font-size:12px; color:var(--vx-muted); margin-right:4px; }
/* os atalhos grudam no alto do corpo que rola; a margem negativa leva o fundo de borda a borda (o corpo tem 18px dos
   lados). O corpo não tem padding em cima (o respiro está no .vx-cp-ftopo): com ele, o top:0 do sticky deixava uma
   fresta por onde o texto passava visível por cima da barra.
   E ROLA DE LADO SEM BARRA (23/09/2026): a barra verde da casa (o * do alto desta folha) aparecia embaixo das abas, e a
   última saía cortada no meio. Quem avisa que há mais à direita é o ESMAECIDO da borda: um degradê para o fundo da
   própria fileira, grudado (sticky) na borda direita. Não é mask-image: a fileira é sticky SOBRE o corpo que rola, e a
   máscara deixaria ver o texto passando por baixo dela; no tema claro, ainda, a gaveta é branca e a fileira cinza, e
   a máscara dissolveria a barra. O degradê é o último item da fileira e ocupa o lugar do padding da direita: no fim
   da rolagem ele cai no vão depois da última aba e não apaga nada; com as abas cabendo, some no fundo. O
   scroll-padding tira do degradê a aba que ganha foco pelo teclado. Gap e padding das abas encolheram para as nove
   caberem na gaveta de 680px, onde a última sobrava por pouco */
.vx-cp-ficha-nav { position:sticky; top:0; z-index:2; display:flex; gap:4px; overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; scroll-padding-inline:18px 34px; overscroll-behavior-x:contain;
  background:var(--vx-bg-2); margin:0 -18px 12px; padding:8px 0 8px 18px; border-top:1px solid var(--vx-border);
  border-bottom:1px solid var(--vx-border); }
.vx-cp-ficha-nav::-webkit-scrollbar { display:none; }
.vx-cp-ficha-nav::after { content:""; position:sticky; right:0; z-index:1; flex:0 0 32px; align-self:stretch;
  margin:-8px 0 -8px -4px; pointer-events:none; background:linear-gradient(to right, transparent, var(--vx-bg-2) 80%); }
.vx-cp-atalho { flex:0 0 auto; background:transparent; border:1px solid var(--vx-border); color:var(--vx-muted); border-radius:var(--vx-pill, 99px);
  padding:4px 9px; font:inherit; font-size:11.5px; cursor:pointer; min-height:30px; }
.vx-cp-atalho:hover { color:var(--vx-text); border-color:#3b82f6; }
.vx-cp-fbody { min-height:0; padding-top:0; }
.vx-cp-fbloco { margin-bottom:14px; }
/* o atalho leva o título da seção ao alto da gaveta (vxCompradores.irSecao: scrollIntoView com block start, depois o
   foco sem rolar) e a margem desconta a barra de atalhos grudada no alto — o focus() sozinho centralizava e a ignorava */
.vx-cp-fsec { margin-top:6px; outline:none; scroll-margin-top:58px; }
.vx-cp-fsec .vx-mk-ord { margin-left:auto; }
.vx-cp-sinais { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vx-cp-sinais li { display:grid; grid-template-columns:12px minmax(0,1fr); gap:6px; font-size:12.5px; line-height:1.5; }
.vx-cp-porque { margin:10px 0 6px; font-size:12px; }
.vx-cp-parcelas { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; color:var(--vx-muted); }
.vx-cp-parcelas span { cursor:help; border-bottom:1px dotted var(--vx-border); }
.vx-cp-parcelas b { color:var(--vx-text); }
.vx-cp-teto { font-size:11.5px; color:var(--vx-faint); margin-top:4px; }
.vx-cp-fkpis { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); margin:10px 0 0; }
.vx-cp-fkpis .vx-mk-kpi b, .vx-cp-bkpis .vx-mk-kpi b { font-size:18px; }
.vx-cp-bkpis { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:8px 0; }
.vx-cp-selo { display:inline-block; font-size:11px; color:var(--vx-teal-soft); border:1px solid color-mix(in srgb, var(--vx-teal-br) 35%, transparent); border-radius:var(--vx-pill, 99px);
  padding:2px 9px; margin:0 0 8px; }
.vx-cp-fmerc { font-size:12.5px; margin:4px 0; }
.vx-cp-fmerc .up { color:#22c55e; } .vx-cp-fmerc .down { color:#ef4444; }
.vx-cp-decs { margin:0; padding-left:18px; font-size:12.5px; display:flex; flex-direction:column; gap:4px; }
.vx-cp-tempo { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(14px,1fr); grid-auto-rows:100%; align-items:end; gap:4px; height:110px; }
.vx-cp-tempo i { display:block; min-height:3px; border-radius:calc(3px * var(--vx-raio, 1)) calc(3px * var(--vx-raio, 1)) 0 0; background:var(--vx-teal-br); }
.vx-cp-tempo i.vz { height:3px; background:rgba(148,163,184,.35); border-radius:calc(2px * var(--vx-raio, 1)); }
.vx-cp-tempo i.fora { height:100%; border-radius:calc(3px * var(--vx-raio, 1)); background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(148,163,184,.25) 3px 5px); }
.vx-cp-tempo.anos { height:60px; grid-auto-columns:minmax(24px,1fr); }
.vx-cp-tempo.vx-cp-tempo-m { height:auto; grid-auto-rows:auto; align-items:start; margin:3px 0 6px; }
.vx-cp-tempo-m span { font-size:9.5px; color:var(--vx-faint); text-align:center; white-space:nowrap; overflow:hidden; }
.vx-cp-preco .l { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,2fr) auto; gap:8px; align-items:center; margin-bottom:5px; font-size:12px; }
.vx-cp-preco .l .r { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vx-muted); }
.vx-cp-preco .l .bar { height:8px; border-radius:calc(4px * var(--vx-raio, 1)); background:rgba(148,163,184,.15); overflow:hidden; }
.vx-cp-preco .l .bar i { display:block; height:100%; background:#94a3b8; }
.vx-cp-preco .l.eu .r { color:var(--vx-text); font-weight:700; } .vx-cp-preco .l.eu .bar i { background:#3b82f6; }
.vx-cp-preco .l.br .bar i { background:#f97316; }
.vx-cp-preco .l .v { white-space:nowrap; text-align:right; }
.vx-cp-fonte { padding:8px 0; border-bottom:1px solid var(--vx-border); font-size:12px; }
.vx-cp-fonte:last-child { border-bottom:0; }
.vx-cp-fonte .s { color:var(--vx-muted); font-size:11.5px; margin-top:2px; }
.vx-cp-fonte .s a { color:var(--vx-teal-br); }
.vx-cp-fonte .vx-cp-fpais { font-weight:400; color:var(--vx-muted); }
/* DE QUEM COMPRA (23/09/2026): o fornecedor na declaração, um por linha — o rótulo, o lugar, os números e, miúda, a via
   ("identificado pelo endereço (inferência)"). O fornecedor brasileiro em laranja, como o Brasil em todo o módulo; o
   não identificado em itálico, porque só diz a cidade */
.vx-cp-forns { display:flex; flex-direction:column; }
.vx-cp-forn { padding:7px 0; border-bottom:1px solid var(--vx-border); font-size:12px; min-width:0; }
.vx-cp-forn:last-child { border-bottom:0; }
.vx-cp-forn .t { overflow-wrap:anywhere; }
.vx-cp-forn .t b { font-size:12.5px; color:var(--vx-text); }
.vx-cp-forn .t b.ni { font-weight:600; font-style:italic; color:var(--vx-muted); }
.vx-cp-forn .t .o { color:var(--vx-muted); }
.vx-cp-forn.br .t b:not(.ni) { color:#f97316; }
.vx-cp-forn .s { margin-top:2px; font-size:11.5px; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-cp-forn .s.v { color:var(--vx-faint); font-style:italic; }

/* H. QUEM DO BRASIL VENDE PARA LÁ (23/09/2026): a largura inteira da grade — é lista de nomes, e em meia coluna cada
   cartão virava três linhas —, em cartões que descem para uma coluna sozinhos. O nome do fornecedor em laranja (é
   Brasil); os compradores dele são botões que abrem a ficha */
.vx-cp-bloco.vx-cp-bh { grid-column:1 / -1; }
.vx-cp-fbrs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:8px; }
.vx-cp-fbr { border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 10px; background:var(--vx-bg-2); min-width:0; font-size:12px; }
.vx-cp-fbr .t { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; min-width:0; }
.vx-cp-fbr .t b { font-size:13px; color:#f97316; overflow-wrap:anywhere; }
/* o que o Raio-X achou do fornecedor (01/10/2026): site, telefone e e-mail no cartão, cada um um link */
.vx-cp-fbr .ct { display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:3px; font-size:11.5px; min-width:0; }
.vx-cp-fbr .ct a { color:var(--vx-teal-br); text-decoration:none; overflow-wrap:anywhere; min-width:0; }
.vx-cp-fbr .ct a:hover { text-decoration:underline; }
.vx-cp-fbr .t b.ni { font-weight:600; font-style:italic; color:var(--vx-muted); }
.vx-cp-fbr .t .c { font-size:11.5px; color:var(--vx-muted); }
.vx-cp-fbr .n { margin-top:2px; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-cp-fbr .q { margin-top:4px; line-height:1.6; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-cp-fbr .q .lbl { color:var(--vx-faint); margin-right:4px; }
.vx-cp-fbr .q .nm { font-weight:600; color:var(--vx-text); }

/* O DIÁLOGO DO "+ PROSPECÇÃO" (23/09/2026): o segmento em pílulas (um só), as etiquetas que ligam e desligam (as
   automáticas já ligadas) e o campo para as do vendedor. A classe mora no próprio .mud-dialog — o MudBlazor põe a
   Class do diálogo nele, e não num ancestral */
.mud-dialog.vx-cp-dlg { border-radius:calc(16px * var(--vx-raio, 1)); }
.vx-cp-dlg-tit { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--vx-text); }
.vx-cp-dlg-tit .mud-icon-root { color:#60a5fa; }
.vx-cp-dlg-sub { margin-top:2px; font-size:12px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-cp-dlg-corpo { display:flex; flex-direction:column; gap:8px; padding:2px 0 4px; }
.vx-cp-dlg-rot { margin-top:4px; font-size:10.5px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-cp-dlg-rot span { margin-left:4px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--vx-faint); }
.vx-cp-dlg-segs, .vx-cp-dlg-tags { display:flex; flex-wrap:wrap; gap:6px; }
.vx-cp-dlg-seg, .vx-cp-dlg-tag { display:inline-flex; align-items:center; gap:5px; min-height:32px; max-width:100%; padding:0 12px;
  border-radius:var(--vx-pill, 99px); border:1px solid var(--vx-border-2); background:transparent; color:var(--vx-muted); font:inherit;
  font-size:12.5px; cursor:pointer; overflow-wrap:anywhere; text-align:left; }
.vx-cp-dlg-seg:hover, .vx-cp-dlg-tag:hover { color:var(--vx-text); border-color:#3b82f6; }
.vx-cp-dlg-seg.on { border-color:#3b82f6; color:#fff; background:rgba(59,130,246,.22); font-weight:600; }
.vx-cp-dlg-tag.on { border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); color:var(--vx-text); background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
.vx-cp-dlg-tag > span { font-size:11px; opacity:.8; }
.vx-cp-dlg-nova { display:flex; align-items:center; gap:8px; margin-top:4px; }
.vx-cp-dlg-nova .vx-input { flex:1 1 auto; min-width:0; height:40px; font-size:13.5px; }
.vx-cp-dlg-nova .vx-mk-bt { flex:0 0 auto; min-height:40px; }
/* AS COLUNAS VÊM DA FICHA (--cols), só as que alguma fonte da empresa publica: origem, exportador e valor entram e
   saem conforme a empresa — combinações de classes fixas não davam conta de quatro colunas opcionais */
.vx-cp-regs { font-size:12px; --cols:78px minmax(0,1.6fr) minmax(0,1fr) 78px 64px 72px 56px; }
.vx-cp-reg { display:grid; grid-template-columns:var(--cols); gap:8px; padding:6px 0;
  border-bottom:1px solid var(--vx-border); align-items:start; }
.vx-cp-reg > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.vx-cp-reg .p { white-space:nowrap; }
.vx-cp-reg .n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-cp-reg.cab { font-size:10.5px; font-weight:700; text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-cp-reg a { color:var(--vx-teal-br); text-decoration:none; }
.vx-cp-contatos { display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
.vx-cp-contatos .k { display:inline-block; min-width:70px; font-size:11px; color:var(--vx-faint); }
.vx-cp-contatos a, .vx-cp-pessoa a { color:var(--vx-teal-br); overflow-wrap:anywhere; }
.vx-cp-quem { margin-top:12px; }
.vx-cp-quem .vx-pd-doc { cursor:pointer; font:inherit; font-size:12px; }
.vx-cp-pessoas { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:8px; }
.vx-cp-pessoa { border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); padding:8px 10px; min-width:0; font-size:12.5px; }
.vx-cp-pessoa .n { font-weight:700; }
.vx-cp-pessoa .acoes { display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; align-items:center; }
.vx-cp-pessoa .aberto { margin-top:6px; font-size:12px; }
.vx-cp-ficha-pe { flex:0 0 auto; display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 18px;
  border-top:1px solid var(--vx-border); background:var(--vx-surface); }
.vx-cp-pebt { cursor:pointer; font:inherit; font-size:12.5px; min-height:34px; }
.vx-cp-pebt:disabled { opacity:.6; cursor:default; }
/* VIGIAR (29/09/2026, a lista de vigiados): aceso em azul-céu, a cor da notícia de vigiado no sino — na ficha e na linha
   dos maiores compradores */
.vx-cp-vigia { display:inline-flex; align-items:center; gap:5px; }
.vx-cp-vigia.on, .vx-rk-vigia.on { border-color:#38bdf8; color:#38bdf8; background:rgba(56,189,248,.10); }
.vx-rk-vigia { display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:1px 7px; border-radius:var(--vx-pill, 999px); cursor:pointer;
  font:inherit; font-size:10.5px; font-weight:700; vertical-align:middle; border:1px solid var(--vx-border-2); background:transparent;
  color:var(--vx-muted); }
.vx-rk-vigia:hover { color:var(--vx-text); }
:root.vx-light .vx-cp-vigia.on, :root.vx-light .vx-rk-vigia.on { color:#0369a1; border-color:#0284c7; }

/* OS CRÉDITOS: UMA linha discreta (decisão do Daniel, 23/09/2026: a tela não ensina à concorrência onde buscar o dado).
   As licenças abertas das fontes EXIGEM a atribuição, e ela não some do sistema: o texto completo mora em
   Configurações → Comércio exterior; aqui fica a menção, pequena, sem nome de órgão. Esta folha é pública, e por
   isso nem as licenças se nomeiam neste comentário */
.vx-cp-creditos { margin:22px 0 4px; padding-top:10px; border-top:1px solid var(--vx-border); font-size:11px; line-height:1.5;
  color:var(--vx-faint); }
.vx-cp-creditos a { color:inherit; text-decoration:underline dotted; text-underline-offset:2px; }
.vx-cp-creditos a:hover { color:var(--vx-muted); }

@media (max-width:1100px) {
  .vx-cp-grade { grid-template-columns:minmax(0,1fr); }
  .vx-cp-cab, .vx-cp-lin { grid-template-columns:44px minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr) 124px 112px 128px; gap:8px; }
}
@media (max-width:768px)  { .vx-cp-ficha { width:100vw; max-width:100vw; } }   /* senão o 680px ganha do 100vw do drawer */
@media (max-width:720px) {
  .vx-cp-rot { display:none; }
  .vx-cp-acoes .vx-mk-bt { min-width:40px; min-height:40px; justify-content:center; }
  .vx-cp-filtros .vx-cp-busca { flex:1 1 100%; max-width:none; }
  .vx-cart-filtros.vx-cp-filtros:not(.fabre) > .vx-cp-oseg { display:none; }
  .vx-cart-filtros.vx-cp-filtros.fabre > .vx-cp-oseg { flex:1 1 100%; }
  .vx-cart-filtros.vx-cp-filtros:not(.fabre) > .vx-cp-ftit { display:none; }
  .vx-cart-filtros.vx-cp-filtros.fabre > .vx-cp-ftit > .mud-select { flex:1 1 100%; }
  .vx-cp-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .vx-cp-kpi b { font-size:18px; }
  .vx-cp-leitura:not(.toda) li:nth-child(n+4) { display:none; }
  .vx-cp-so-cel { display:inline; }
  .vx-cp-leitura .vx-cp-so-cel { display:inline-block; margin-top:6px; font-size:12px; color:#60a5fa; }
  .vx-cp-bloco.fechado .vx-cp-corpo { display:none; }
  .vx-cp-bloco.fechado .vx-cp-resumo { display:inline; }
  .vx-cp-btit { min-height:32px; }
  .vx-cp-btit-l { display:none; }
  .vx-cp-btit-c { display:flex; }
  /* as colunas da tabela de países saem pela largura do bloco (@container vxcptab), não mais por aqui */
  .vx-cp-ord-seg { display:none; }
  .vx-cp-ord-sel { display:block; width:auto; min-width:0; max-width:190px; height:36px; }
  .vx-cp-lin { grid-template-columns:40px minmax(0,1fr); padding:10px; border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); margin-bottom:8px; row-gap:6px; }
  .vx-cp-lin > :not(.c-prio) { grid-column:2; } .vx-cp-lin > .c-prio { grid-row:1 / span 6; }
  .vx-cp-lin .c-acao { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  .vx-cp-lin .c-acao .vx-fec-arq { max-width:220px; }
  .vx-cp-lin .l2 { white-space:normal; }
  .vx-cp-cab, .vx-cp-meses, .vx-cp-mtxt { display:none; } .vx-cp-duas { grid-template-columns:minmax(0,1fr); }
  .vx-cp-lin .vx-cp-chips .vx-tagchip.mini, .vx-cp-opo .vx-tagchip.mini, .vx-cp-fchips .vx-tagchip.mini { min-height:24px; padding:0 8px; }
  .vx-cp-como-tab .l { grid-template-columns:minmax(0,1fr); gap:2px; }
  .vx-cp-opo { grid-template-columns:40px minmax(0,1fr); }
  .vx-cp-opo .bts { grid-column:2; justify-content:flex-start; }
  .vx-cp-fhead, .vx-cp-ficha-pe { padding-left:12px; padding-right:12px; }
  .vx-cp-fbody { padding:0 12px 12px; }
  .vx-cp-ftopo { padding-top:12px; }
  /* sem padding à direita também aqui: quem ocupa o lugar é o degradê (::after) */
  .vx-cp-ficha-nav { margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:0; scroll-padding-inline:12px 34px; }
  /* as etiquetas da ficha numa linha que rola de lado: quebrando, três linhas de chips empurravam a análise para
     a segunda tela. Com o ancestral (.vx-cp-ficha) no seletor: a div leva também .vx-cp-chips, e foi uma regra
     .vx-cp-chips de mesmo peso, vinda de outra folha (a do carrinho, quando usava o mesmo prefixo), que quebrava a
     linha de novo — e esta tem de valer com ou sem a outra classe */
  .vx-cp-ficha .vx-cp-fchips { flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; }
  .vx-cp-ficha .vx-cp-fchips > * { flex:0 0 auto; }
  .vx-cp-ficha .vx-cp-fchips .vx-tagchip.mini { max-width:none; }
  .vx-cp-ficha .vx-cp-fchips .vx-cp-orbtag { line-height:18px; }
  .vx-cp-preco .l { grid-template-columns:minmax(0,1fr) auto; }
  .vx-cp-preco .l .bar { grid-column:1 / -1; grid-row:2; }
  /* cada registro vira cartão, com o rótulo de cada campo em cima do valor (data-l) */
  .vx-cp-reg.cab { display:none; }
  .vx-cp-regs .vx-cp-reg { grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 10px; margin-bottom:6px; }
  .vx-cp-reg > span::before { content:attr(data-l); display:block; font-size:9.5px; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.3px * var(--vx-tracking, 1)); color:var(--vx-faint); }
  .vx-cp-reg .n { text-align:left; }
  .vx-cp-reg .p { white-space:normal; }
  /* as caixas de ocultar uma embaixo da outra, com alvo de dedo; o "+ prospecção" entra na fileira do "+ órbita" (a
     .c-acao vira linha que quebra); os ícones ao lado do nome crescem um pouco para o dedo achar o title */
  .vx-cp-ocultar { flex-direction:column; align-items:flex-start; gap:0; }
  .vx-cp-ocx label { min-height:40px; }
  .vx-cp-lin .c-acao > .vx-cp-prbt { align-self:auto; }
  .vx-cp-opo .bts { max-width:none; }
  .vx-cp-band, .vx-cp-prmark { width:22px; height:22px; }
  .vx-cp-dlg-seg, .vx-cp-dlg-tag { min-height:38px; }
  .vx-cp-dlg-nova .vx-input, .vx-cp-dlg-nova .vx-mk-bt { height:44px; min-height:44px; }
}
:root.vx-light .vx-cp-orig.br, :root.vx-light .vx-cp-barras .l.br .n, :root.vx-light .vx-cp-barras .l.br .t { color:#c2410c; }
:root.vx-light .vx-cp-orig.conc, :root.vx-light .vx-cp-prod.chapa, :root.vx-light .vx-cp-ver, :root.vx-light .vx-cp-mais,
:root.vx-light .vx-cp-como summary, :root.vx-light .vx-cp-porque summary, :root.vx-light .vx-cp-lin .nm:hover { color:#1d4ed8; }
:root.vx-light .vx-cp-prod.artif, :root.vx-light .vx-mk-tag.artif { color:#6d28d9; }
:root.vx-light .vx-cp-prod.bloco { color:#b45309; }
:root.vx-light .vx-cp-parado, :root.vx-light .vx-cp-parece { color:#b45309; }
:root.vx-light .vx-cp-prox.quente, :root.vx-light .vx-cp-proxima.quente b { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-cp-proxtag.quente { --vx-cp-px:#0b6b4d; }
:root.vx-light .vx-cp-prox.atrasada, :root.vx-light .vx-cp-proxima.atrasada b { color:#b45309; }
:root.vx-light .vx-cp-proxtag.atrasada { --vx-cp-px:#b45309; }
:root.vx-light .vx-cp-fmerc .up { color:#15803d; } :root.vx-light .vx-cp-fmerc .down { color:#b91c1c; }
/* a etiqueta de órbita no claro: o fundo e a borda seguem a variável (verde-água e âmbar da casa), mas o TEXTO escurece
   — o teal-br e o âmbar sobre fundo quase branco ficavam abaixo de 4,5:1 em letra de 10px */
:root.vx-light .vx-cp-orbtag { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-cp-orbtag.outro { color:#92400e; }
/* a bandeirinha, a marca da Prospecção e o laranja do fornecedor no claro, pela mesma conta: o fundo segue a cor da
   casa, o ícone e a letra escurecem (ícone de 15px pede 3:1, letra pequena 4,5:1 sobre o quase branco) */
:root.vx-light .vx-cp-band { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-cp-band.outro { color:#92400e; }
:root.vx-light .vx-cp-prmark, :root.vx-light .vx-cp-prtag, :root.vx-light .vx-cp-ocx .n .vx-mk-lnk,
:root.vx-light .vx-cp-dlg-tit .mud-icon-root { color:#1d4ed8; }
:root.vx-light .vx-cp-fbr .t b:not(.ni), :root.vx-light .vx-cp-forn.br .t b:not(.ni) { color:#c2410c; }
:root.vx-light .vx-cp-dlg-seg.on { color:#1d4ed8; background:rgba(59,130,246,.12); }
:root.vx-light .vx-cp-dlg-tag.on { color:var(--vx-teal-escuro, #0b6b4d); background:rgba(22,168,119,.10); border-color:rgba(22,168,119,.5); }

/* ═══════════════════════ INTELIGÊNCIA DE MERCADO — aba Hoje (24/09/2026) ═══════════════════════
   As classes vx-intel-* seguem a maquete aprovada pelo Daniel, sobre os tokens da casa (--vx-*): o tema claro vem de
   graça onde o token muda, e o que era cor chapada tem a sua linha em :root.vx-light lá embaixo. Tudo em px inteiro
   ou var(): número com vírgula em style derruba a declaração (armadilha do pt-BR). */
/* no :root, e nao no .vx-intel: o Um por vez e a folha do Duelo moram FORA do .vx-page (o fixed), e sem isto o cadeado, o selo
   "outro" e a jogada deles ficavam sem cor. Os nomes ja tem prefixo; nenhuma outra tela os usa */
:root { --vx-intel-coral:#FF6B6B; --vx-intel-amber:#F2B441; --vx-intel-violet:#B18CFF; --vx-intel-cyan:#5BC0EB; }
.vx-intel .muted { color:var(--vx-muted); } .vx-intel .faint { color:var(--vx-faint); }
.vx-intel-cab { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; min-width:0; margin-bottom:6px; }
.vx-intel-cab .tit { flex:1 1 280px; min-width:0; }
.vx-intel-modo { margin-left:auto; display:flex; align-items:center; gap:8px; }
.vx-intel-modo small { color:var(--vx-muted); }
.vx-intel-modo .seg { display:inline-flex; border:1px solid var(--vx-border-2); border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; background:var(--vx-surface); }
.vx-intel-modo .seg button { border:0; background:transparent; padding:6px 12px; min-height:32px; color:var(--vx-muted); font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; }
.vx-intel-modo .seg button.on { background:var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); }
/* as abas numa fileira rolável de 44 px, com min-width:0 e max-width:100%: sem isso a fileira estica a página no celular */
.vx-intel-abas { display:flex; gap:4px; overflow-x:auto; min-width:0; max-width:100%; border-bottom:1px solid var(--vx-border); margin:6px 0 14px; }
.vx-intel-abas a, .vx-intel-abas span { flex:0 0 auto; display:inline-flex; align-items:center; padding:0 14px; min-height:44px; color:var(--vx-muted); font-weight:600; border-bottom:2px solid transparent; text-decoration:none; white-space:nowrap; }
.vx-intel-abas a:hover { color:var(--vx-text); }
.vx-intel-abas .on { color:var(--vx-text); border-bottom-color:var(--vx-teal-br); }
.vx-intel-abas .adm { font-size:10px; color:var(--vx-intel-amber); margin-left:4px; font-weight:700; }
/* as abas desta tela à esquerda; os atalhos para as outras telas à direita, com cara de link (sem o traço de aba), para
   ninguém esperar que eles fiquem nesta página. No celular, os dois grupos rolam juntos na mesma linha */
.vx-intel-abas .abas, .vx-intel-abas .atalhos { display:flex; gap:4px; flex:0 0 auto; align-items:stretch; }
.vx-intel-abas .atalhos { margin-left:auto; align-items:center; gap:2px; padding-left:12px; }
.vx-intel-abas .atalhos .rot { font-size:11px; color:var(--vx-faint); padding:0 4px 0 0; min-height:0; border:0; font-weight:600; }
.vx-intel-abas a.atalho { min-height:32px; padding:0 10px; font-size:13px; color:var(--vx-teal-br); border:1px solid transparent; border-radius:var(--vx-pill, 999px); }
.vx-intel-abas a.atalho:hover { color:var(--vx-text); border-color:var(--vx-border-2); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-intel-abas a.atalho .seta { margin-left:4px; font-size:15px; line-height:1; border:0; padding:0; min-height:0; color:inherit; }
.vx-intel-corpo { min-height:100vh; }
.vx-intel-hoje { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.vx-intel-hoje .col { min-width:0; }
.vx-intel-faixa { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal) 16%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal) 4%, transparent))); border:1px solid color-mix(in srgb, var(--vx-teal-br) 25%, transparent); border-radius:var(--vx-r); padding:10px 12px; min-width:0; }
.vx-intel-faixa .vx { width:16px; height:16px; flex:0 0 auto; color:var(--vx-teal-br); }
.vx-intel-faixa .txt { flex:1 1 260px; min-width:0; }
.vx-intel-faixa b { font-size:15px; } .vx-intel-faixa .sub { color:var(--vx-muted); font-size:12px; }
.vx-intel-faixa a { color:var(--vx-teal-br); }
/* O PLACAR DA SEMANA (27/09/2026): quanto da fila virou ação — no topo da fila do vendedor e em cada cartão da Equipe */
.vx-intel-placar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px; min-width:0; }
.vx-intel-placar .barra { flex:1 1 160px; max-width:320px; height:8px; border-radius:var(--vx-pill, 999px); background:rgba(127,127,127,.18); overflow:hidden; }
.vx-intel-placar .barra span { display:block; height:100%; border-radius:inherit; background:var(--vx-cheio, linear-gradient(90deg, var(--vx-teal), var(--vx-teal-br))); transition:width .5s cubic-bezier(.4,0,.2,1); }
.vx-intel-placar .n { font-size:12.5px; color:var(--vx-muted); }
.vx-intel-placar .n b { color:var(--vx-text); }
.vx-intel-placar.ok .n b { color:var(--vx-teal-br); }
/* A ABA EQUIPE: um cartão por vendedor, lado a lado; quem não fez nada ainda fica com a borda âmbar */
.vx-eq-grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:12px; margin-top:14px; }
.vx-eq-card { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); padding:12px 14px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.vx-eq-card.ok { border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); }
.vx-eq-card.parado { border-color:rgba(242,180,65,.45); }
.vx-eq-card .cab { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.vx-eq-card .cab b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-eq-card .cab .pct { font-size:20px; font-weight:750; color:var(--vx-teal-br); font-variant-numeric:tabular-nums; }
.vx-eq-card.parado .cab .pct { color:var(--vx-intel-amber); }
.vx-eq-card .vx-intel-placar { margin-top:0; }
.vx-eq-card .vx-intel-placar .barra { max-width:none; }
.vx-eq-card .nums { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--vx-muted); }
.vx-eq-card .nums b { color:var(--vx-text); font-variant-numeric:tabular-nums; }
.vx-eq-card .nums .pend b { color:var(--vx-intel-amber); }
.vx-eq-card .jog { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:11.5px; font-weight:600; }
.vx-eq-card .rod { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--vx-faint); border-top:1px solid var(--vx-border); padding-top:8px; }
.vx-eq-card .rod a { color:var(--vx-teal-br); font-weight:600; text-decoration:none; }
:root.vx-light .vx-eq-card.parado .cab .pct, :root.vx-light .vx-eq-card .nums .pend b { color:#b45309; }
/* A ABA FONTES (27/09/2026): o saldo de créditos que o Vortex conta, as coletas e onde a base enxerga */
.vx-fo-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap:12px; }
.vx-fo-card { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); padding:12px 14px; min-width:0; }
.vx-fo-card h2 { margin:0 0 10px; font-size:15px; font-weight:650; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.vx-fo-card h2 small { font-weight:500; color:var(--vx-muted); font-size:12px; }
.vx-fo-card h2 .lnk { margin-left:auto; font-size:12.5px; color:var(--vx-teal-br); text-decoration:none; font-weight:600; }
.vx-fo-card .cart { padding:8px 0; border-top:1px solid var(--vx-border); }
.vx-fo-card .cart:first-of-type { border-top:0; padding-top:0; }
.vx-fo-card .cart .rot { font-size:12px; font-weight:700; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-fo-card .cart .rot small { text-transform:none; letter-spacing:0; font-weight:500; margin-left:4px; }
.vx-fo-card .cart .valor { font-size:26px; font-weight:750; color:var(--vx-teal-br); font-variant-numeric:tabular-nums; line-height:1.2; }
.vx-fo-card .cart.zero .valor { color:var(--vx-intel-amber); }
.vx-fo-card .cart .sub { font-size:12px; color:var(--vx-muted); }
.vx-fo-card .informar { margin-top:10px; padding-top:10px; border-top:1px solid var(--vx-border); }
.vx-fo-card .informar label { display:block; font-size:12px; color:var(--vx-muted); margin-bottom:4px; }
.vx-fo-card .informar .lin { display:flex; gap:8px; flex-wrap:wrap; }
.vx-fo-card .informar input, .vx-fo-card .informar select { min-height:36px; border:1px solid var(--vx-border-2); border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface-2); color:var(--vx-text); font:inherit; font-size:14px; padding:0 8px; }
.vx-fo-card .informar input { width:140px; }
.vx-fo-card .informar select option { background:var(--vx-surface-2); color:var(--vx-text); }
.vx-fo-card .informar .dica, .vx-fo-card .custos { font-size:12px; color:var(--vx-faint); margin:6px 0 0; line-height:1.45; }
/* o ciclo da coleta dos EUA (01/10/2026): semanal · mensal · anual, um botão aceso */
.vx-fo-card .informar .vx-fo-ciclo { align-items:center; margin:2px 0 8px; font-size:12px; color:var(--vx-muted); }
.vx-fo-card .informar .vx-fo-ciclo button { min-height:30px; padding:0 12px; border:1px solid var(--vx-border-2); border-radius:var(--vx-pill, 99px);
  background:transparent; color:var(--vx-text); font:inherit; font-size:12.5px; cursor:pointer; }
.vx-fo-card .informar .vx-fo-ciclo button.on { background:var(--vx-teal-br); border-color:var(--vx-teal-br); color:var(--vx-sobre-destaque, #04110c); font-weight:600; }
.vx-fo-card .informar .vx-fo-ciclo button:disabled { opacity:.6; cursor:default; }
.vx-fo-card ul.col { list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; }
.vx-fo-card ul.col li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--vx-border); font-size:12.5px; min-width:0; }
.vx-fo-card ul.col li:first-child { border-top:0; }
.vx-fo-card ul.col li .f { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-fo-card ul.col li .f small { color:var(--vx-faint); }
.vx-fo-card ul.col li .e { flex:0 0 auto; color:var(--vx-teal-br); font-weight:600; }
.vx-fo-card ul.col li.off .e { color:var(--vx-faint); font-weight:500; }
.vx-fo-card ul.col li.ruim .e { color:var(--vx-intel-amber); }
.vx-fo-achado { margin:0 0 10px; font-size:13px; color:var(--vx-muted); }
.vx-fo-achado b { color:var(--vx-intel-amber); font-size:15px; }
.vx-fo-tab { display:flex; flex-direction:column; border:1px solid var(--vx-border); border-radius:var(--vx-r); overflow:hidden; background:var(--vx-surface); }
.vx-fo-tab .h, .vx-fo-tab .r { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.3fr) repeat(3, minmax(0, .8fr)); gap:10px; padding:8px 12px; align-items:center; font-size:13px; }
.vx-fo-tab .h { font-size:11.5px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); background:var(--vx-surface-2); }
.vx-fo-tab .r { border-top:1px solid var(--vx-border); color:var(--vx-text); text-decoration:none; }
.vx-fo-tab .r:hover { background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); }
.vx-fo-tab .r small { color:var(--vx-faint); margin-left:4px; }
.vx-fo-tab .r.cego span:nth-child(4) { color:var(--vx-intel-amber); font-weight:600; }
@media (max-width: 640px) {
  .vx-fo-tab .h { display:none; }
  .vx-fo-tab .r { grid-template-columns:1fr 1fr; }
  .vx-fo-tab .r span[data-l]:not(:first-child)::before { content:attr(data-l) " "; color:var(--vx-faint); font-size:11px; }
  .vx-fo-tab .r span:first-child { grid-column:1 / -1; }
}
:root.vx-light .vx-fo-card .cart.zero .valor, :root.vx-light .vx-fo-achado b, :root.vx-light .vx-fo-tab .r.cego span:nth-child(4), :root.vx-light .vx-fo-card ul.col li.ruim .e { color:#b45309; }
.vx-fo-teste { list-style:none; margin:8px 0 0; padding:0; font-size:12.5px; line-height:1.5; }
.vx-fo-teste li { padding:4px 0 4px 18px; position:relative; }
.vx-fo-teste li::before { content:""; position:absolute; left:2px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--vx-teal-br); }
.vx-fo-teste li.ruim::before { background:var(--vx-intel-amber); }
/* A BUSCA ÚNICA E O PLACAR DA INTELIGÊNCIA (27/09/2026): a caixa no cabeçalho de toda aba (país, empresa; Enter leva ao país
   ou filtra Empresas) e a fileira de chips com o Brasil no mundo, os rivais, quem cresce e o ano do Brasil */
.vx-ib-busca { position:relative; flex:0 1 360px; min-width:0; display:flex; align-items:center; align-self:center; }
.vx-ib-busca .ic { position:absolute; left:11px; font-size:17px; color:var(--vx-faint); pointer-events:none; }
.vx-ib-busca input { width:100%; min-width:0; min-height:38px; border:1px solid var(--vx-border-2); border-radius:var(--vx-pill, 999px); background:var(--vx-surface); color:var(--vx-text); font:inherit; font-size:13.5px; padding:0 14px 0 34px; }
.vx-ib-busca input:focus { outline:none; border-color:var(--vx-teal-br); box-shadow:0 0 0 3px color-mix(in srgb, var(--vx-teal-br) 15%, transparent); }
.vx-ib-busca .lista { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30; list-style:none; margin:0; padding:6px; background:var(--vx-surface-2); border:1px solid var(--vx-border-2); border-radius:calc(12px * var(--vx-raio, 1)); box-shadow:var(--vx-sombra, 0 12px 32px rgba(0,0,0,.35)); max-height:min(70vh, 460px); overflow:auto; }
.vx-ib-busca .lista .grupo { font-size:10.5px; font-weight:700; letter-spacing:calc(.5px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-faint); padding:8px 10px 4px; }
.vx-ib-busca .lista .op { display:flex; flex-direction:column; gap:1px; padding:7px 10px; border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; min-width:0; }
.vx-ib-busca .lista .op b { font-size:13px; font-weight:600; color:var(--vx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-ib-busca .lista .op small { font-size:11.5px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-ib-busca .lista .op:hover { background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); }
.vx-ib-busca .lista .op.on { background:color-mix(in srgb, var(--vx-teal-br) 20%, transparent); box-shadow:inset 3px 0 0 var(--vx-teal-br); }
.vx-ib-busca .lista .op.on small { color:var(--vx-text); }
.vx-ib-busca .lista .op.busca b { color:var(--vx-teal-br); }
.vx-ib-placar { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; min-width:0; }
.vx-ib-placar .chip { display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border-radius:var(--vx-pill, 999px); font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; border:1px solid var(--vx-border-2); background:var(--vx-surface); color:var(--vx-muted); }
.vx-ib-placar .chip:hover { border-color:var(--vx-teal-br); color:var(--vx-text); }
.vx-ib-placar .chip.tom-br { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 40%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-ib-placar .chip.tom-cresce { color:var(--vx-intel-amber); border-color:rgba(242,180,65,.4); }
.vx-ib-placar .chip.tom-ano { color:var(--vx-text); }
.vx-ib-placar .chip .dica { display:none; }
.vx-ib-placar .mais { display:none; min-height:28px; border:1px dashed var(--vx-border-2); border-radius:var(--vx-pill, 999px); background:transparent; color:var(--vx-muted); font:inherit; font-size:12px; font-weight:600; padding:0 10px; cursor:pointer; }
@media (max-width: 760px) {
  .vx-ib-busca { flex:1 1 100%; order:3; }
  .vx-ib-placar .chip { white-space:normal; }
  .vx-ib-placar:not(.aberto) .chip.extra { display:none; }
  .vx-ib-placar .mais { display:inline-flex; align-items:center; }
  .vx-ib-placar.aberto .chip { flex-direction:column; align-items:flex-start; padding:6px 12px; border-radius:calc(12px * var(--vx-raio, 1)); }
  .vx-ib-placar.aberto .chip .dica { display:block; font-size:11px; font-weight:500; color:var(--vx-muted); margin-top:2px; }
}
/* os botões da tela (importar, "vendo como") ficam à direita mesmo quando quebram para a linha de baixo, entre 1024 e 1366 px
   (revisão de 28/09/2026: caíam sozinhos à esquerda) */
.vx-intel-cab > :last-child:not(.tit):not(.vx-ib-busca) { margin-left:auto; }
/* o detalhe do país aberto pela busca sobe para a tela sem ficar embaixo da barra do topo */
.vx-mk-det { scroll-margin-top:76px; }
:root.vx-light .vx-ib-busca .lista { box-shadow:var(--vx-sombra, 0 12px 32px rgba(15,23,42,.14)); }
:root.vx-light .vx-ib-placar .chip.tom-br, :root.vx-light .vx-ib-busca .lista .op.busca b { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-ib-placar .chip.tom-cresce { color:#b45309; }
/* QUEM ABASTECE QUEM (27/09/2026): comprador × fornecedor × mês, em bolhas — a página 3 da DataGo, com o motivo para ligar.
   A GRADE DECIDE PELA PRÓPRIA LARGURA (container "vxqa", revisão de 27/09/2026): todos os meses com espaço; os 12 mais
   recentes numa tela média (.velho12 some); os 6 mais recentes no celular (.velho some) — a linha nunca rola de lado.
   Sem overflow:hidden na grade: ele virava o contêiner de rolagem e soltava o cabeçalho preso (clip corta sem isso). */
.vx-conc-modo .pills a { flex:0 0 auto; display:inline-flex; align-items:center; border:1px solid var(--vx-border-2); background:var(--vx-surface); border-radius:var(--vx-pill, 999px); padding:0 14px; min-height:34px; font-size:12.5px; color:var(--vx-muted); font-weight:600; text-decoration:none; }
.vx-conc-modo .pills a.on { border-color:var(--vx-teal-br); color:var(--vx-text); background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
.vx-qa { container-type:inline-size; container-name:vxqa; min-width:0; }
.vx-qa .vx-intel-ctl { flex-wrap:wrap; }
.vx-qa-so { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-qa-busca { flex:1 1 200px; min-width:0; max-width:320px; min-height:34px; border:1px solid var(--vx-border-2); border-radius:var(--vx-pill, 999px); background:var(--vx-surface); color:var(--vx-text); font:inherit; font-size:13px; padding:0 14px; }
.vx-qa-periodo { font-size:12px; color:var(--vx-muted); margin:0 0 4px; }
.vx-qa-grade { --qa-m:28px; border:1px solid var(--vx-border); border-radius:var(--vx-r); background:var(--vx-surface); overflow:clip; margin-top:6px; }
.vx-qa-lin { display:grid; grid-template-columns:minmax(0, 1fr) repeat(var(--qa-n, 12), var(--qa-m)) 44px; align-items:center; padding:3px 10px; min-width:0; }
.vx-qa-lin .nm { display:flex; align-items:center; gap:6px; min-width:0; font-size:13px; padding-right:8px; }
.vx-qa-lin .nm .tx { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-qa-lin .nm small { flex:0 0 auto; color:var(--vx-faint); font-size:11.5px; white-space:nowrap; }
.vx-qa-lin .nm a { color:var(--vx-text); text-decoration:none; font-weight:650; }
.vx-qa-lin .nm a:hover { color:var(--vx-teal-br); }
.vx-qa-lin .m { display:flex; align-items:center; justify-content:center; height:26px; }
.vx-qa-lin .t { text-align:right; font-size:12.5px; font-weight:650; font-variant-numeric:tabular-nums; }
.vx-qa-lin.cab { position:sticky; top:56px; z-index:1; background:var(--vx-surface-2); border-bottom:1px solid var(--vx-border); font-size:11px; font-weight:700; color:var(--vx-muted); text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.3px * var(--vx-tracking, 1)); }
.vx-qa-lin.cab .m { font-size:10.5px; letter-spacing:0; text-transform:none; white-space:nowrap; }
.vx-qa-lin.cab .nm { font-size:11px; }
.vx-qa-lin.cab .ano-cel, .vx-qa-lin.cab .ano-med { display:none; font-size:inherit; color:inherit; }
.vx-qa-lin.vazio .nm { white-space:normal; color:var(--vx-muted); padding:8px 0; }
.vx-qa-link { border:0; background:transparent; color:var(--vx-teal-br); font:inherit; font-weight:600; cursor:pointer; padding:0 0 0 6px; }
.vx-qa-grupo { border-top:1px solid var(--vx-border); padding:4px 0; }
.vx-qa-grupo.quente { box-shadow:inset 3px 0 0 var(--vx-intel-coral); }
.vx-qa-lin.forn .nm { padding-left:16px; color:var(--vx-muted); font-size:12.5px; }
.vx-qa-lin.forn.ni .nm { font-style:italic; color:var(--vx-faint); }
.vx-qa-lin .tag { flex:0 0 auto; font-size:10px; font-weight:700; border-radius:var(--vx-pill, 999px); padding:1px 7px; }
.vx-qa-lin .tag.br { color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
.vx-qa-lin .tag.casa { color:var(--vx-sobre-destaque, #04110c); background:var(--vx-teal-br); }
.vx-qa-lin .b { display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-style:normal; font-size:9.5px; font-weight:700; line-height:1; color:var(--vx-sobre-destaque, #04110c); }
.vx-qa-lin .b.emp { background:rgba(233,236,244,.55); }
.vx-qa-lin .b.br { background:var(--vx-teal-br); }
.vx-qa-lin .b.fora { background:var(--vx-intel-coral); }
.vx-qa-lin .b.ni { background:rgba(233,236,244,.30); }
.vx-qa-lin .z { width:3px; height:3px; border-radius:50%; background:var(--vx-border-2); }
.vx-qa-sinais > span { display:flex; flex-wrap:wrap; gap:4px 6px; padding:2px 10px 4px 10px; }
.vx-qa-sinais span span { font-size:11.5px; color:var(--vx-muted); background:var(--vx-surface-2); border-radius:var(--vx-pill, 999px); padding:2px 9px; }
.vx-qa-sinais span span.q { color:var(--vx-intel-coral); background:rgba(255,107,107,.10); font-weight:600; }
.vx-qa-sinais span span.casa { color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); font-weight:600; }
.vx-qa-mais { display:block; width:100%; border:1px solid var(--vx-border); border-top:0; border-radius:0 0 var(--vx-r) var(--vx-r); background:transparent; color:var(--vx-teal-br); font:inherit; font-size:13px; font-weight:600; padding:10px; cursor:pointer; }
.vx-qa-rodape { font-size:11.5px; color:var(--vx-faint); margin:8px 0 0; }
@container vxqa (max-width: 980px) {
  .vx-qa-lin { grid-template-columns:minmax(0, 1fr) repeat(var(--qa-n12, 12), var(--qa-m)) 44px; }
  .vx-qa-lin .velho12 { display:none; }
  .vx-qa-lin.cab .ano-med { display:inline; }
}
@container vxqa (max-width: 620px) {
  .vx-qa-lin { grid-template-columns:minmax(0, 1fr) repeat(var(--qa-nm, 6), 26px) 38px; padding:3px 8px; }
  .vx-qa-lin .velho { display:none; }
  .vx-qa-lin.cab .ano-med { display:none; }
  .vx-qa-lin.cab .ano-cel { display:inline; }
}
:root.vx-light .vx-qa-lin .b.emp { background:rgba(26,29,39,.28); }
:root.vx-light .vx-qa-lin .b.ni { background:rgba(26,29,39,.16); }
:root.vx-light .vx-qa-sinais span span.q { color:#b42318; }
:root.vx-light .vx-qa-lin .tag.br, :root.vx-light .vx-qa-sinais span span.casa, :root.vx-light .vx-qa-mais, :root.vx-light .vx-qa-link { color:var(--vx-teal-escuro, #0b6b4d); }
/* o saldo ao lado de um botão pago (SaldoChip) */
.vx-saldo-chip { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:var(--vx-pill, 999px); font-size:11.5px; font-weight:600; color:var(--vx-teal-br); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); border:1px solid color-mix(in srgb, var(--vx-teal-br) 28%, transparent); white-space:nowrap; }
.vx-saldo-chip.zero { color:var(--vx-intel-amber); background:rgba(242,180,65,.10); border-color:rgba(242,180,65,.35); }
:root.vx-light .vx-saldo-chip.zero { color:#b45309; }
.vx-intel-ctl { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; min-width:0; }
.vx-intel-ctl .rot { color:var(--vx-faint); font-size:12px; }
.vx-intel-ctl .pills { display:flex; gap:6px; overflow-x:auto; min-width:0; max-width:100%; }
.vx-intel-ctl .pills button { flex:0 0 auto; border:1px solid var(--vx-border-2); background:var(--vx-surface); border-radius:var(--vx-pill, 999px); padding:0 12px; min-height:34px; font:inherit; font-size:12.5px; color:var(--vx-muted); font-weight:600; cursor:pointer; }
.vx-intel-ctl .pills button.on { border-color:var(--vx-teal-br); color:var(--vx-text); background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
/* a lista dos países que não cabem em botão (a Europa e o Comtrade trazem dezenas): mesmo corpo do botão, e acende
   como ele quando o país escolhido está nela */
.vx-conc-outros { flex:0 1 auto; max-width:100%; min-width:0; border:1px solid var(--vx-border-2); background:var(--vx-surface); border-radius:var(--vx-pill, 999px); padding:0 10px; min-height:34px; font:inherit; font-size:12.5px; color:var(--vx-muted); font-weight:600; cursor:pointer; }
.vx-conc-outros.on { border-color:var(--vx-teal-br); color:var(--vx-text); background:color-mix(in srgb, var(--vx-teal-br) 12%, transparent); }
.vx-conc-outros:focus-visible { outline:2px solid var(--vx-teal-br); outline-offset:2px; }
/* A LISTA ABERTA FICAVA ILEGÍVEL (27/09/2026, print do Daniel): o Chrome pinta a lista com o fundo do select — o verde
   translúcido do ".on" sobre branco vira menta clara — e a opção herda o texto claro do tema escuro. Fundo sólido e texto
   do tema em cada opção; no claro as variáveis já trocam. */
.vx-conc-outros option { background:var(--vx-surface-2); color:var(--vx-text); font-weight:500; }
.vx-intel-ctl .pills button i { font-style:normal; color:var(--vx-faint); margin-left:4px; font-weight:500; }
/* ROLA DE LADO SEM A BARRA VERDE (24/09/2026), como a ficha de Compradores (.vx-cp-ficha-nav): no celular as abas e as
   fileiras de pílulas não cabem, e a barra da casa (o * do alto desta folha) aparecia grossa embaixo de cada uma. Quem
   avisa que há mais à direita é o esmaecido da borda — um degradê para o fundo da página, último item da fileira,
   grudado na direita; com tudo cabendo, ele cai no vão depois do último item e some no fundo. */
.vx-intel-abas, .vx-intel-ctl .pills { scrollbar-width:none; overscroll-behavior-x:contain; }
.vx-intel-abas::-webkit-scrollbar, .vx-intel-ctl .pills::-webkit-scrollbar { display:none; }
.vx-intel-abas::after, .vx-intel-ctl .pills::after { content:""; position:sticky; right:0; flex:0 0 28px; align-self:stretch;
  margin-left:-4px; pointer-events:none; background:linear-gradient(to right, transparent, var(--vx-bg) 80%); }
.vx-intel-expl { color:var(--vx-muted); font-size:12.5px; margin:2px 0 8px; }
.vx-intel-novas { display:flex; gap:8px; overflow-x:auto; min-width:0; max-width:100%; padding:8px 0 2px; }
.vx-intel-novas a { flex:0 0 auto; max-width:320px; text-align:left; border:1px solid var(--vx-border); background:var(--vx-surface); border-radius:calc(12px * var(--vx-raio, 1)); padding:7px 10px; font-size:12px; color:var(--vx-muted); white-space:normal; text-decoration:none; }
.vx-intel-novas a b { color:var(--vx-text); display:block; font-size:11px; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); margin-bottom:2px; }
.vx-intel-grupo { margin:14px 0 6px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.vx-intel-grupo b { font-size:12px; letter-spacing:calc(.8px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }
.vx-intel-grupo span { color:var(--vx-faint); font-size:12px; }
:is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-CONVERTER { color:var(--vx-intel-coral); } :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-DISPUTAR { color:var(--vx-intel-amber); } :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-CHEGAR_ANTES { color:var(--vx-teal-br); }
/* Apresentar (o cadastro do ramo, 25/09/2026): o ciano, longe do verde-água de Chegar antes e do violeta da intenção */
:is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-APRESENTAR { color:var(--vx-intel-cyan); }
/* AGORA (28/09/2026): os quentes da hora — rosa, que nenhuma outra jogada usa (o violeta é da intenção) */
:is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-AGORA { color:#f472b6; }
.vx-intel-info { border-left:3px solid var(--vx-teal); background:color-mix(in srgb, var(--vx-teal-br) 6%, transparent); padding:8px 10px; border-radius:0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0; font-size:12.5px; margin:8px 0; color:var(--vx-text); }
.vx-intel-info a { color:var(--vx-teal-br); font-weight:600; margin-left:4px; }
.vx-intel-alerta { border-left:3px solid var(--vx-intel-amber); background:rgba(242,180,65,.07); padding:8px 10px; border-radius:0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0; color:#F7D08A; font-size:12.5px; margin:8px 0; }
.vx-intel-sec { margin:18px 0 0; min-width:0; }
.vx-intel-sec h2 { margin:0 0 6px; font-size:15px; font-weight:650; display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--vx-text); }
.vx-intel-sec h2 small { font-weight:500; color:var(--vx-muted); font-size:12px; }
.vx-intel-sec .caixa { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); padding:12px 14px; min-width:0; }
.vx-intel-sec .caixa > b { font-size:12px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }
.vx-intel-sec .caixa ul { list-style:none; margin:6px 0 0; padding:0; }
.vx-intel-sec .caixa li { display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-top:1px solid var(--vx-border); font-size:13px; }
.vx-intel-sec .caixa li span:last-child { font-weight:650; white-space:nowrap; }
.vx-intel-sec .caixa p { margin:4px 0 0; font-size:13px; }
.vx-intel-sec .aviso { font-size:12px; color:var(--vx-faint); margin:8px 0 0; }
.vx-intel-mais { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.vx-intel .lnk, .vx-intel-cartao .lnk, .vx-duelo .lnk { border:0; background:transparent; color:var(--vx-teal-br); font:inherit; font-weight:600; padding:6px 4px; min-height:32px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.vx-intel .lnk.cinza, .vx-intel-cartao .lnk.cinza, .vx-duelo .lnk.cinza { color:var(--vx-muted); }
.vx-intel .btn, .vx-intel-cartao .btn, .vx-intel-upv .btn, .vx-duelo .btn { border:1px solid var(--vx-border-2); background:var(--vx-surface-2); color:var(--vx-text); border-radius:calc(11px * var(--vx-raio, 1)); padding:0 14px; min-height:38px; font:inherit; font-weight:650; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; text-decoration:none; }
.vx-intel .btn.cheio, .vx-intel-cartao .btn.cheio, .vx-duelo .btn.cheio { background:var(--vx-cheio, linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br))); color:var(--vx-sobre-destaque, #04110c); border-color:transparent; }
.vx-intel .btn.cont, .vx-intel-cartao .btn.cont, .vx-duelo .btn.cont { background:transparent; border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); color:var(--vx-teal-br); }
.vx-intel .btn.min, .vx-intel-upv .btn.min { min-height:32px; padding:0 10px; font-size:12.5px; }
.vx-intel-cartao .btn:disabled, .vx-intel-cartao .lnk:disabled, .vx-duelo .btn:disabled, .vx-duelo .lnk:disabled { opacity:.55; cursor:default; }

/* ── o cartão de ação ── */
.vx-intel-cartao { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); padding:12px 14px; margin:0 0 10px; min-width:0; position:relative; transition:border-color .2s, opacity .25s; color:var(--vx-text); }
.vx-intel-cartao.sel { border-color:color-mix(in srgb, var(--vx-teal-br) 60%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
.vx-intel-cartao.st-orbita { border-color:var(--vx-teal-br); background:linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 9%, transparent)), var(--vx-surface)); }
.vx-intel-cartao.st-radar { border-color:rgba(91,192,235,.6); }
.vx-intel-cartao.st-pulada { opacity:.45; }
.vx-intel-cartao.fosco { opacity:.42; }
.vx-intel-cartao .c1 { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.vx-intel-cartao .nota { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:12.5px; border:2px solid; }
.vx-intel-cartao .nota.quente { border-color:var(--vx-teal-br); color:var(--vx-teal-br); } .vx-intel-cartao .nota.morno { border-color:var(--vx-morno); color:var(--vx-morno); } .vx-intel-cartao .nota.frio { border-color:var(--vx-frio); color:var(--vx-frio); }
.vx-intel-cartao .pais { min-width:0; flex:1 1 160px; font-size:12.5px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-intel-cartao .pais b { color:var(--vx-text); letter-spacing:calc(.6px * var(--vx-tracking, 1)); font-weight:700; }
.vx-intel-cartao .iso { font-family:ui-monospace, Consolas, monospace; font-size:10.5px; border:1px solid var(--vx-border-2); border-radius:calc(5px * var(--vx-raio, 1)); padding:0 4px; margin-right:5px; color:var(--vx-muted); }
.vx-intel-cartao .jog { font-size:10.5px; font-weight:700; letter-spacing:calc(.7px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); }
.vx-intel-cartao .est { font-size:10.5px; font-weight:700; letter-spacing:calc(.5px * var(--vx-tracking, 1)); border-radius:calc(6px * var(--vx-raio, 1)); padding:3px 7px; white-space:nowrap; }
.vx-intel-cartao .est.orbita { background:color-mix(in srgb, var(--vx-teal-br) 16%, transparent); color:var(--vx-teal-br); } .vx-intel-cartao .est.outro { background:rgba(242,180,65,.14); color:var(--vx-intel-amber); }
.vx-intel-cartao .est.cliente { background:color-mix(in srgb, var(--vx-teal-soft) 14%, transparent); color:#8FE6C7; } .vx-intel-cartao .est.radar { background:rgba(91,192,235,.14); color:var(--vx-intel-cyan); }
.vx-intel-cartao .est.pulada { background:rgba(255,255,255,.06); color:var(--vx-faint); }
.vx-intel-cartao .emp { margin:6px 0 6px; font-size:16px; font-weight:650; line-height:1.25; overflow-wrap:anywhere; color:var(--vx-text); }
.vx-intel-cartao .cc { display:flex; gap:6px; flex-wrap:wrap; min-width:0; align-items:center; }
.vx-intel-cartao .chip { display:inline-flex; align-items:center; gap:5px; border-radius:var(--vx-pill, 999px); padding:3px 10px; font-size:12px; font-weight:600; border:1px solid var(--vx-border-2); background:var(--vx-surface-2); max-width:100%; white-space:normal; line-height:1.3; }
.vx-intel-cartao .chip.op { border-color:color-mix(in srgb, var(--vx-teal-br) 45%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, transparent); color:#9FF0D5; }
.vx-intel-cartao .chip.at { border-color:rgba(242,180,65,.5); background:rgba(242,180,65,.10); color:#F7D08A; }
.vx-intel-cartao .chip.in { border-color:rgba(177,140,255,.55); background:rgba(177,140,255,.10); color:#D7C6FF; }
.vx-intel-cartao .chip.fa { color:var(--vx-muted); }
.vx-intel-cartao .chip.contra { background:transparent; border-style:dashed; color:var(--vx-text); font-weight:500; }
.vx-intel-cartao .cad { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:var(--vx-intel-amber); font-weight:600; white-space:nowrap; }
.vx-intel-cartao .arg { margin:8px 0 2px; font-size:13.5px; overflow-wrap:anywhere; }
.vx-intel-cartao .base { margin:0; color:var(--vx-faint); font-size:11.5px; overflow-wrap:anywhere; }
.vx-intel-cartao .patio { margin:6px 0 0; font-size:12.5px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-intel-cartao .patio i { font-style:normal; color:var(--vx-teal-soft); font-weight:600; }
.vx-intel-cartao .alerta { border-left:3px solid var(--vx-intel-amber); background:rgba(242,180,65,.07); padding:8px 10px; border-radius:0 calc(10px * var(--vx-raio, 1)) calc(10px * var(--vx-raio, 1)) 0; color:#F7D08A; font-size:12.5px; margin:8px 0; }
.vx-intel-cartao .desceu { font-size:11.5px; color:var(--vx-intel-amber); margin-top:6px; }
.vx-intel-cartao .acoes { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.vx-intel-cartao .acoes .dir { margin-left:auto; display:flex; gap:2px; flex-wrap:wrap; }
.vx-intel-cartao.compacto { padding:10px 12px; }
.vx-intel-cartao.compacto .emp { font-size:14.5px; margin:4px 0; }
.vx-intel-cartao.compacto .arg { font-size:12.5px; margin:6px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── um por vez: irmão do .vx-page (a animação da página prenderia o fixed) ── */
.vx-intel-upv { position:fixed; inset:0; z-index:1400; background:rgba(8,8,14,.96); display:flex; flex-direction:column; color:var(--vx-text); outline:none; }
.vx-intel-upv .topo { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--vx-border); }
.vx-intel-upv .corpo { flex:1 1 auto; overflow:auto; padding:14px 16px; min-width:0; }
.vx-intel-upv .corpo .inner { max-width:760px; margin:0 auto; }
.vx-intel-upv .nav { display:flex; gap:8px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--vx-border); }
.vx-intel-upv .nav .btn { flex:1 1 0; min-height:44px; min-width:0; }
.vx-intel-upv .kbd { font-family:ui-monospace, Consolas, monospace; font-size:11px; border:1px solid var(--vx-border-2); border-radius:calc(5px * var(--vx-raio, 1)); padding:0 5px; color:var(--vx-muted); }
.vx-intel-upv .muted { color:var(--vx-muted); }

/* ═══════════════ O DUELO ("por quê ›") — 24/09/2026 ═══════════════
   PorQue.razor + js/vx-intel.js. A COR DO MAPA MORA AQUI: o JS só põe classe (arco rival/vizinho/pais/consulta/casa/rota,
   terra, balao…), então o tema claro e o acento trocam sem redesenhar nem re-animar. O traço nunca mente: cheio é compra
   da empresa, tracejado é o país (Fonte M), pontilhado é consulta; a rota da casa é tracejada até o "+ órbita". A espessura
   do arco vem do JS como atributo — nenhum stroke-width aqui para .arco, senão o CSS venceria o atributo. Tudo em px
   inteiro, % ou var(): número com vírgula no CSS derruba a declaração (armadilha do pt-BR). */
:root { --vx-duelo-rival:#F2B441; --vx-duelo-vizinho:#FF6B6B; --vx-duelo-brasil:#FF8C7A; --vx-duelo-consulta:#B18CFF; --vx-duelo-casa:#2BD4A0;
  --vx-duelo-mar:#0f1426; --vx-duelo-terra:#22263a; --vx-duelo-borda:rgba(255,255,255,.08); --vx-duelo-grade:rgba(255,255,255,.05);
  --vx-duelo-alvo:rgba(43,212,160,.22); --vx-duelo-balao:rgba(11,11,20,.9); --vx-duelo-balao-txt:#E9ECF4; --vx-duelo-balao-borda:rgba(255,255,255,.2);
  --vx-duelo-guia:rgba(255,255,255,.4); --vx-duelo-aro:#ffffff; --vx-duelo-rot-casa:#9FF0D5; --vx-duelo-eixo:rgba(255,255,255,.14);
  --vx-duelo-txt-br:#9FF0D5; --vx-duelo-txt-rv:#F7D08A; }
:root.vx-light { --vx-duelo-rival:#D97706; --vx-duelo-vizinho:#E0484A; --vx-duelo-brasil:#C2410C; --vx-duelo-consulta:#7C3AED; --vx-duelo-casa:#138A63;
  --vx-duelo-mar:#E3EAF3; --vx-duelo-terra:#d7dce4; --vx-duelo-borda:#ffffff; --vx-duelo-grade:rgba(15,23,42,.06); --vx-duelo-alvo:rgba(19,138,99,.22);
  --vx-duelo-balao:rgba(255,255,255,.94); --vx-duelo-balao-txt:#0f172a; --vx-duelo-balao-borda:rgba(15,23,42,.2); --vx-duelo-guia:rgba(15,23,42,.35);
  --vx-duelo-aro:#0f172a; --vx-duelo-rot-casa:#0b6b4d; --vx-duelo-eixo:rgba(15,23,42,.14); --vx-duelo-txt-br:#0b6b4d; --vx-duelo-txt-rv:#92400e; }

/* a grade do Hoje: a 2ª trilha só com o CONTEÚDO largo E o C# de acordo (.com-duelo — o vxIntel.vigiar mede o mesmo quadro).
   Pela largura do conteúdo, não da tela: o menu aberto come 240 px. 960 = Inteligencia.LarguraLado (um teste confere).
   Efeito do container-type: o quadro vira bloco de contenção de position:fixed de quem está dentro — por isso a folha e o
   Um por vez moram fora dele (e do .vx-page) */
.vx-intel-quadro { container: vxintel / inline-size; min-width:0; }
.vx-intel-lado { display:none; min-width:0; }
@container vxintel (min-width: 960px) {
  .vx-intel-hoje.com-duelo { grid-template-columns: minmax(0,1fr) 440px; }
  .vx-intel-hoje.com-duelo > .vx-intel-lado { display:block; align-self:start; position:sticky; top:56px; }   /* a barra Dense tem 48 px */
}
.vx-intel-lado > .vx-duelo { max-height:calc(100dvh - 72px); background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); overflow:hidden; }
/* a CALHA da barra de rolagem fica reservada desde o começo: a barra clássica do Windows (10–11 px) aparecia quando o SVG
   entrava, a largura do quadro do mapa caía e o ResizeObserver redesenhava pronto — cortava o giro aprovado e, na coluna,
   trocava o globo pelo plano (conferência de 24/09/2026) */
.vx-intel-lado > .vx-duelo > .corpo, .vx-intel-folha > .vx-duelo > .corpo { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; }

/* a folha: irmã do .vx-page; animação SEM fill-mode — o transform termina em none, senão prenderia o fixed de dentro
   (armadilha nº 5 do celular) */
.vx-intel-veu { position:fixed; inset:0; z-index:1340; background:rgba(0,0,0,.55); }
.vx-intel-folha { position:fixed; z-index:1350; top:0; right:0; bottom:0; width:min(560px, 100vw); margin:0 !important; display:flex; flex-direction:column;
  min-width:0; background:var(--vx-bg-2); color:var(--vx-text); border-left:1px solid var(--vx-border-2); border-radius:calc(18px * var(--vx-raio, 1)) 0 0 calc(18px * var(--vx-raio, 1)); outline:none;
  animation:vx-folha-lado .28s cubic-bezier(.4,0,.2,1); }
.vx-intel-folha > .vx-duelo { flex:1 1 auto; min-height:0; }
@keyframes vx-folha-lado { from { transform:translateX(105%); } }
@keyframes vx-folha-baixo { from { transform:translateY(105%); } }
html:has(.vx-intel-folha) { overflow:hidden; scrollbar-gutter:stable; }        /* quem rola a página é o <html> (ver "A PAGINA NAO ROLA POR TRAS") */
.vx-intel-upv .corpo { overscroll-behavior:contain; scrollbar-gutter:stable; }
.vx-intel-upv .inner > .vx-duelo { margin-top:12px; background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); }

/* o Duelo */
.vx-duelo { display:flex; flex-direction:column; min-width:0; color:var(--vx-text); }
.vx-duelo .muted { color:var(--vx-muted); }
.vx-duelo > .cab { flex:0 0 auto; padding:12px 14px 6px; min-width:0; position:relative; }
.vx-duelo .quem { font-size:12px; color:var(--vx-muted); overflow-wrap:anywhere; padding-right:44px; }
.vx-duelo .quem .iso { font-family:ui-monospace, Consolas, monospace; font-size:10.5px; border:1px solid var(--vx-border-2); border-radius:calc(5px * var(--vx-raio, 1)); padding:0 4px; margin-right:5px; }
.vx-duelo .quem b { color:var(--vx-text); letter-spacing:calc(.6px * var(--vx-tracking, 1)); } .vx-duelo .quem .emp { color:var(--vx-text); font-weight:600; }
.vx-duelo .cab .x { position:absolute; top:8px; right:10px; width:40px; height:40px; border-radius:calc(10px * var(--vx-raio, 1)); border:1px solid var(--vx-border-2); background:var(--vx-surface); color:var(--vx-text); cursor:pointer; font:inherit; }
.vx-duelo h3 { margin:4px 0 0; font-size:15px; line-height:1.3; overflow-wrap:anywhere; }
.vx-duelo .sub { color:var(--vx-muted); font-size:12px; margin:2px 0 8px; overflow-wrap:anywhere; }
.vx-duelo .sub.q { margin:12px 0 0; }
/* o aviso das declarações mais novas que as do cartão (a fila é congelada; o Duelo lê a base de hoje) */
.vx-duelo .cab .novo { font-size:11.5px; line-height:1.4; color:var(--vx-intel-amber); background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:calc(8px * var(--vx-raio, 1)); padding:6px 8px; margin:0 0 8px; overflow-wrap:anywhere; }
:root.vx-light .vx-duelo .cab .novo { color:#b45309; }
.vx-duelo > .corpo { flex:1 1 auto; min-height:0; min-width:0; padding:0 14px 12px; }
.vx-duelo > .rodape { flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--vx-border); }
.vx-duelo > .rodape .btn { flex:1 1 140px; min-width:0; min-height:44px; white-space:normal; }   /* base 140, não 0 (armadilha nº 4) */
.vx-duelo > .rodape .lnk, .vx-duelo > .rodape > .muted { flex:1 1 100%; justify-content:center; text-align:center; }
.vx-duelo .aprox, .vx-duelo .aviso { font-size:11.5px; color:var(--vx-faint); margin:4px 0 0; }
.vx-duelo .legenda { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:11px; color:var(--vx-muted); margin:6px 0 0; }
.vx-duelo .legenda span { display:inline-flex; align-items:center; gap:5px; } .vx-duelo .legenda svg { width:26px; height:8px; flex:0 0 auto; }
.vx-duelo .legenda line { stroke-width:2.5px; }
.vx-duelo .frase { margin:10px 0 0; font-weight:650; font-size:13.5px; overflow-wrap:anywhere; }
.vx-duelo > .corpo > .vx-intel-alerta { margin:8px 0 0; overflow-wrap:anywhere; }
.vx-duelo .contra { margin:6px 0 0; font-size:12px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-duelo .so-celular { display:none; }   /* o que o cartão do Um por vez já mostra no desktop: só no celular, que o esconde lá */
.vx-duelo .forn { list-style:none; margin:8px 0 0; padding:0; }
.vx-duelo .forn li { display:grid; grid-template-columns:10px minmax(0,1fr) minmax(0,auto); gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--vx-border); font-size:12.5px; }
.vx-duelo .forn li i { width:10px; height:10px; border-radius:50%; background:var(--vx-faint); }
.vx-duelo .forn li.rival i, .vx-duelo .forn li.pais i { background:var(--vx-duelo-rival); } .vx-duelo .forn li.vizinho i { background:var(--vx-duelo-vizinho); }
.vx-duelo .forn li.brasil.pais i { background:var(--vx-duelo-brasil); } .vx-duelo .forn li.consulta i { background:var(--vx-duelo-consulta); }
.vx-duelo .forn li.casa i { background:var(--vx-duelo-casa); } .vx-duelo .forn li.vazio { color:var(--vx-muted); }
.vx-duelo .forn .nm { min-width:0; overflow-wrap:anywhere; } .vx-duelo .forn .nm small { display:block; color:var(--vx-faint); font-size:11px; }
.vx-duelo .forn .v { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.vx-duelo .cad { display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:11.5px; color:var(--vx-intel-amber); font-weight:600; margin:6px 0 0; }
.vx-duelo .regua { margin:10px 0 0; background:var(--vx-surface-2); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 10px; }
.vx-duelo .regua .t { font-size:11.5px; color:var(--vx-muted); overflow-wrap:anywhere; } .vx-duelo .regua .selo { color:var(--vx-intel-amber); font-weight:600; }
.vx-duelo .regua svg { width:100%; height:46px; display:block; overflow:visible; } .vx-duelo .regua .eixo { stroke:var(--vx-duelo-eixo); stroke-width:2px; }
.vx-duelo .regua circle.br { fill:var(--vx-duelo-casa); } .vx-duelo .regua circle.rv { fill:var(--vx-duelo-rival); }
.vx-duelo .regua text { font-size:11px; font-weight:600; } .vx-duelo .regua text.br { fill:var(--vx-duelo-txt-br); } .vx-duelo .regua text.rv { fill:var(--vx-duelo-txt-rv); }
.vx-duelo .regua .nota { font-size:11.5px; color:var(--vx-faint); margin-top:2px; overflow-wrap:anywhere; }
.vx-duelo .meses { display:flex; flex-wrap:wrap; gap:3px; margin-top:6px; }
.vx-duelo .meses span { width:18px; height:18px; border-radius:calc(4px * var(--vx-raio, 1)); background:var(--vx-surface-3); display:grid; place-items:center; font-size:9px; color:var(--vx-faint); }
.vx-duelo .meses span.s { background:var(--vx-duelo-casa); color:var(--vx-sobre-destaque, #04110c); } .vx-duelo .meses span.x { background:transparent; border:1px dashed var(--vx-border-2); }

/* o mapa: TODA a cor por classe */
.vx-duelo-mapa { position:relative; width:100%; min-height:120px; border-radius:calc(12px * var(--vx-raio, 1)); overflow:hidden; background:radial-gradient(closest-side, var(--vx-brilho, color-mix(in srgb, var(--vx-teal-br) 6%, transparent)), transparent); }
.vx-duelo-mapa svg { display:block; width:100%; height:auto; } .vx-duelo-mapa svg.globo { touch-action:none; cursor:grab; }
.vx-duelo-mapa svg.globo:active { cursor:grabbing; }
.vx-duelo .semmapa { padding:30px 12px; text-align:center; color:var(--vx-faint); font-size:12.5px; }
.vx-duelo-mapa .esfera { fill:var(--vx-duelo-mar); stroke:color-mix(in srgb, var(--vx-teal-br) 25%, transparent); }
.vx-duelo-mapa .grade { fill:none; stroke:var(--vx-duelo-grade); }
.vx-duelo-mapa .terra { fill:var(--vx-duelo-terra); stroke:var(--vx-duelo-borda); stroke-width:.5px; } .vx-duelo-mapa .terra.alvo { fill:var(--vx-duelo-alvo); }
.vx-duelo .arco { fill:none; stroke-linecap:round; opacity:.95; }
.vx-duelo .arco.rival, .vx-duelo .arco.pais { stroke:var(--vx-duelo-rival); } .vx-duelo .arco.vizinho { stroke:var(--vx-duelo-vizinho); }
.vx-duelo .arco.pais { stroke-dasharray:5 4; } .vx-duelo .arco.pais.brasil { stroke:var(--vx-duelo-brasil); }
.vx-duelo .arco.consulta { stroke:var(--vx-duelo-consulta); stroke-dasharray:1 4; }
.vx-duelo .arco.casa, .vx-duelo .arco.rota { stroke:var(--vx-duelo-casa); } .vx-duelo .arco.rota.proposta { stroke-dasharray:7 4; }
.vx-duelo-mapa .brilhos { opacity:.22; } .vx-duelo-mapa .brilhos .arco { stroke-dasharray:none; }
.vx-duelo-mapa .destino { fill:none; stroke:var(--vx-duelo-casa); stroke-width:1.2px; opacity:.9; } .vx-duelo-mapa .destino.aro { stroke:var(--vx-duelo-aro); stroke-width:2.2px; }
.vx-duelo-mapa .ponto-dst { fill:var(--vx-duelo-casa); } .vx-duelo-mapa .ponto-casa { fill:var(--vx-duelo-aro); opacity:.85; }
.vx-duelo-mapa .rot-casa { fill:var(--vx-duelo-rot-casa); font-size:10.5px; font-weight:600; }
.vx-duelo-mapa .balao rect { fill:var(--vx-duelo-balao); stroke:var(--vx-duelo-balao-borda); }
.vx-duelo-mapa .balao.rival rect { stroke:var(--vx-duelo-rival); } .vx-duelo-mapa .balao.vizinho rect { stroke:var(--vx-duelo-vizinho); }
.vx-duelo-mapa .balao.pais.brasil rect { stroke:var(--vx-duelo-brasil); }
.vx-duelo-mapa .balao text { fill:var(--vx-duelo-balao-txt); font-size:10.5px; font-weight:600; }
.vx-duelo-mapa .ancora { fill:var(--vx-faint); } .vx-duelo-mapa .ancora.rival, .vx-duelo-mapa .ancora.pais { fill:var(--vx-duelo-rival); }
.vx-duelo-mapa .ancora.vizinho { fill:var(--vx-duelo-vizinho); } .vx-duelo-mapa .ancora.pais.brasil { fill:var(--vx-duelo-brasil); }
.vx-duelo-mapa .guia { stroke:var(--vx-duelo-guia); }
:root.vx-light .vx-duelo .cad, :root.vx-light .vx-duelo .regua .selo { color:#b45309; }
:root.vx-light .vx-duelo .meses span.s { color:#ffffff; }

@media (max-width:760px) {
  .vx-intel-folha { top:auto; left:0; width:100vw; max-width:100vw; height:88dvh; border-left:0; border-top:1px solid var(--vx-border-2);
                    border-radius:calc(18px * var(--vx-raio, 1)) calc(18px * var(--vx-raio, 1)) 0 0; animation-name:vx-folha-baixo; }
  .vx-duelo .forn .v { white-space:normal; }
  .vx-duelo .so-celular { display:block; }
}
@media (prefers-reduced-motion: reduce) { .vx-intel-folha { animation:none; } }

/* ── a aba CONCORRÊNCIA (PainelConcorrencia.razor): a manchete com as ações primeiro, o detalhe em caixas depois. Grid com
   minmax(0,…) em tudo: item de grid/flex com min-width:auto empurra a página para o lado no celular (armadilha nº 5) ── */
.vx-conc { min-width:0; }
.vx-conc-cadeado { display:flex; gap:8px; align-items:flex-start; border:1px dashed rgba(242,180,65,.45); background:rgba(242,180,65,.06); color:var(--vx-muted); border-radius:calc(10px * var(--vx-raio, 1)); padding:8px 12px; font-size:12px; margin:4px 0 12px; }
.vx-conc-cadeado .mud-icon-root { color:var(--vx-intel-amber); flex:0 0 auto; margin-top:1px; }
.vx-conc-manchete { background:linear-gradient(135deg, var(--vx-brilho, color-mix(in srgb, var(--vx-teal) 14%, transparent)), var(--vx-brilho, color-mix(in srgb, var(--vx-teal) 3%, transparent))); border:1px solid color-mix(in srgb, var(--vx-teal-br) 25%, transparent); border-radius:var(--vx-r); padding:12px 14px; margin:12px 0 14px; min-width:0; }
.vx-conc-manchete .tit { font-size:11.5px; letter-spacing:calc(.6px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-teal-soft); font-weight:700; margin-bottom:6px; overflow-wrap:anywhere; }
.vx-conc-manchete ul { margin:0; padding-left:18px; }
.vx-conc-manchete li { margin:4px 0; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.vx-conc-manchete li:first-child { font-size:15px; font-weight:600; }
.vx-conc-manchete .acoes { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.vx-conc-grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:12px; min-width:0; }
.vx-conc-caixa { background:var(--vx-surface); border:1px solid var(--vx-border); border-radius:var(--vx-r); padding:12px 14px; min-width:0; }
.vx-conc-caixa h3 { margin:0 0 8px; font-size:14px; font-weight:650; }
.vx-conc-caixa h3 small { display:block; font-weight:500; font-size:11.5px; color:var(--vx-faint); margin-top:2px; }
.vx-conc-linha { display:grid; grid-template-columns:22px minmax(0,1.2fr) minmax(40px,1fr) auto 44px; gap:8px; align-items:center; padding:5px 0; border-top:1px solid var(--vx-border); font-size:13px; }
.vx-conc-caixa.compreco .vx-conc-linha { grid-template-columns:22px minmax(0,1.2fr) minmax(40px,1fr) auto 44px auto; }
.vx-conc-linha .pos { color:var(--vx-faint); font-size:11.5px; text-align:right; }
.vx-conc-linha .nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-conc-linha .barra { height:8px; background:var(--vx-surface-2); border-radius:var(--vx-pill, 99px); overflow:hidden; }
.vx-conc-linha .barra i { display:block; height:100%; background:var(--vx-muted); opacity:.5; border-radius:var(--vx-pill, 99px); }
.vx-conc-linha .val, .vx-conc-linha .pct, .vx-conc-linha .kg { font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-conc-linha .pct { color:var(--vx-muted); text-align:right; }
.vx-conc-linha .kg { color:var(--vx-muted); font-size:12px; }
.vx-conc-linha.br { font-weight:650; }
.vx-conc-linha.br .nome { color:var(--vx-teal-br); }
.vx-conc-linha.br .barra i { background:var(--vx-teal-br); opacity:1; }
.vx-conc-linha.outras { color:var(--vx-faint); font-size:12px; }
.vx-conc-prod { display:grid; grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr); gap:8px; align-items:center; width:100%; text-align:left; padding:7px 4px; border:0; border-top:1px solid var(--vx-border); background:transparent; color:var(--vx-text); font:inherit; font-size:13px; cursor:pointer; min-height:44px; }
.vx-conc-prod:hover { background:color-mix(in srgb, var(--vx-teal-br) 5%, transparent); }
.vx-conc-prod .nome small, .vx-conc-reg .nome small { display:block; color:var(--vx-faint); font-size:11.5px; font-weight:400; }
.vx-conc-prod .br { font-weight:650; white-space:nowrap; }
.vx-conc-prod .lider, .vx-conc-reg .lider { color:var(--vx-muted); font-size:12px; text-align:right; }
.vx-conc-prod.lidera .br { color:var(--vx-teal-br); }
.vx-conc-prod.perto .br { color:var(--vx-intel-amber); }
.vx-conc-prod.fraco .br { color:var(--vx-faint); font-weight:500; }
.vx-conc-ano { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:6px 0; border-top:1px solid var(--vx-border); font-size:13px; }
.vx-conc-ano small { color:var(--vx-faint); font-size:11.5px; font-weight:400; }
.vx-conc-ano .var { font-weight:650; white-space:nowrap; text-align:right; }
.vx-conc-ano .var.sobe { color:var(--vx-teal-br); } .vx-conc-ano .var.desce { color:var(--vx-intel-coral); }
.vx-conc-reg { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr); gap:8px; align-items:center; padding:6px 0; border-top:1px solid var(--vx-border); font-size:13px; }
.vx-conc-reg .br { font-weight:650; }
.vx-conc-reg .br small { display:block; color:var(--vx-faint); font-size:11.5px; font-weight:400; }
.vx-conc-reg.fraca .br { color:var(--vx-intel-amber); }
.vx-conc-base { color:var(--vx-faint); font-size:11.5px; margin:12px 0 0; overflow-wrap:anywhere; }
.vx-conc-semnome { color:var(--vx-muted); font-size:12.5px; margin:10px 0 0; }
@media (max-width:760px) {
  .vx-conc-manchete li { font-size:13.5px; } .vx-conc-manchete li:first-child { font-size:14px; }
  .vx-conc-manchete .acoes .btn { flex:1 1 100%; min-height:44px; }
  .vx-conc-linha, .vx-conc-caixa.compreco .vx-conc-linha { grid-template-columns:18px minmax(0,1fr) auto 40px; }
  .vx-conc-linha .barra, .vx-conc-linha .kg { display:none; }
  .vx-conc-prod, .vx-conc-reg { grid-template-columns:minmax(0,1fr) auto; }
  .vx-conc-prod .lider, .vx-conc-reg .lider { grid-column:1 / -1; text-align:left; }
  .vx-conc-ano { grid-template-columns:auto minmax(0,1fr); } .vx-conc-ano .var { grid-column:1 / -1; text-align:left; }
}
:root.vx-light .vx-conc-cadeado { color:#6b5a2e; }
:root.vx-light .vx-conc-prod.perto .br, :root.vx-light .vx-conc-reg.fraca .br { color:#b45309; }

/* ── celular: a ação logo depois do argumento; a base e o pátio numa linha cada; nada estica a página ── */
@media (max-width:760px) {
  .vx-intel-cab .vx-page-titulo { font-size:20px; }
  .vx-intel-modo small { display:none; }
  .vx-intel-faixa { padding:8px 10px; flex-wrap:nowrap; }
  .vx-intel-faixa .sub, .vx-intel-faixa .vx, .vx-intel-expl, .vx-intel-ctl .rot { display:none; }
  .vx-intel-faixa b { font-size:13.5px; }
  .vx-intel-faixa .btn { min-height:36px; padding:0 10px; flex:0 0 auto; }
  .vx-intel-novas a { max-width:270px; font-size:11.5px; padding:6px 9px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vx-intel-cartao { display:flex; flex-direction:column; }
  .vx-intel-cartao > .c1 { order:1; } .vx-intel-cartao > .emp { order:2; font-size:15px; } .vx-intel-cartao > .cc { order:3; } .vx-intel-cartao > .arg { order:4; }
  .vx-intel-cartao > .acoes { order:5; gap:6px; } .vx-intel-cartao > .base { order:6; margin-top:8px; } .vx-intel-cartao > .patio { order:7; } .vx-intel-cartao > .desceu { order:8; }
  .vx-intel-cartao > .alerta { display:none; }
  .vx-intel-cartao .arg { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
  .vx-intel-cartao .base, .vx-intel-cartao .patio { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vx-intel-cartao .acoes .btn.cheio, .vx-intel-cartao .acoes .btn.cont { flex:1 1 calc(50% - 6px); min-height:44px; }
  .vx-intel-cartao .acoes .dir { margin-left:0; width:100%; justify-content:space-between; order:2; }
  .vx-intel-cartao .chip.contra .faint { display:none; }
  .vx-intel-upv .hide-m { display:none; }
}
@media (prefers-reduced-motion:reduce) { .vx-intel-cartao { transition:none; } }

/* ── tema claro: o que era cor chapada no escuro ── */
:root.vx-light .vx-intel-cartao .chip.op { color:var(--vx-teal-escuro, #0b6b4d); background:rgba(22,168,119,.10); }
:root.vx-light .vx-intel-cartao .chip.at, :root.vx-light .vx-intel-cartao .alerta, :root.vx-light .vx-intel-alerta { color:#92400e; }
:root.vx-light .vx-intel-cartao .chip.in { color:#5b21b6; }
:root.vx-light .vx-intel-cartao .est.cliente { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-intel-cartao .est.pulada { background:rgba(15,23,42,.06); }
:root.vx-light .vx-intel-cartao .est.radar { color:#0e7490; }
:root.vx-light .vx-intel-cartao .desceu, :root.vx-light .vx-intel-cartao .cad, :root.vx-light .vx-intel-abas .adm { color:#b45309; }
:root.vx-light :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-CONVERTER { color:#c2410c; } :root.vx-light :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-DISPUTAR { color:#b45309; } :root.vx-light :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-CHEGAR_ANTES { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-APRESENTAR { color:#0e6f93; }
:root.vx-light :is(.vx-intel, .vx-intel-upv, .vx-intel-folha) .j-AGORA { color:#be185d; }
:root.vx-light .vx-intel-cartao .est.outro { color:#92400e; }
:root.vx-light .vx-intel-upv { background:rgba(242,245,249,.98); }

/* O RANKING DOS EXPORTADORES BRASILEIROS (28/09/2026, PainelExportadoresBr): a linha da casa em verde-água, a barra da
   fatia em toneladas, e cada mês uma barrinha. A grade se ajusta à largura dela (container query "vxrk"): no celular, a
   posição, o nome e o volume na primeira linha; os compradores e o mês a mês embaixo — nada rola de lado */
.vx-rk { container: vxrk / inline-size; }
.vx-rk-casa { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin:4px 0 12px; padding:10px 14px; border-radius:calc(12px * var(--vx-raio, 1)); font-size:13px;
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 55%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-rk-casa b { color:var(--vx-teal-br); }
.vx-rk-casa span { color:var(--vx-muted); }
.vx-rk-casa.fora { border-color:var(--vx-border-2); background:var(--vx-surface); }
.vx-rk-casa.fora b { color:var(--vx-text); }
.vx-rk-lista { display:flex; flex-direction:column; border:1px solid var(--vx-border-2); border-radius:calc(12px * var(--vx-raio, 1)); overflow:hidden; }
.vx-rk-lin { display:grid; grid-template-columns:34px minmax(0,2.4fr) minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.3fr);
  gap:12px; align-items:start; padding:10px 14px; border-top:1px solid var(--vx-border); font-size:13px; }
.vx-rk-lin.cab { border-top:0; font-size:11px; font-weight:700; text-transform:var(--vx-caixa, uppercase); letter-spacing:calc(.4px * var(--vx-tracking, 1)); color:var(--vx-faint); background:var(--vx-surface-2); }
.vx-rk-lin.casa { background:color-mix(in srgb, var(--vx-teal-br) 7%, transparent); }
.vx-rk-lin .pos { font-weight:800; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-rk-lin.casa .pos, .vx-rk-lin.casa .nm b { color:var(--vx-teal-br); }
.vx-rk-lin .nm { min-width:0; }
.vx-rk-lin .nm b { font-weight:700; color:var(--vx-text); }
.vx-rk-lin .nm b.ni { color:var(--vx-muted); font-weight:600; }
.vx-rk-lin .nm .c { margin-left:6px; font-size:11.5px; color:var(--vx-muted); }
.vx-rk-lin .q { margin-top:3px; font-size:11.5px; color:var(--vx-muted); overflow:hidden; text-overflow:ellipsis; }
.vx-rk-lin .q .lbl { color:var(--vx-faint); margin-right:4px; }
.vx-rk-lin small { color:var(--vx-muted); font-size:11px; }
.vx-rk-lin .vol .barra { display:block; height:5px; margin-top:4px; border-radius:calc(3px * var(--vx-raio, 1)); background:var(--vx-border); overflow:hidden; }
.vx-rk-lin .vol .barra i { display:block; height:100%; background:var(--vx-teal-br); border-radius:calc(3px * var(--vx-raio, 1)); }
.vx-rk-lin .vol .val { display:block; margin-top:2px; }
.vx-rk-lin .comp .ps { font-size:11px; color:var(--vx-faint); margin-top:2px; }
.vx-rk-lin .tend { display:flex; align-items:flex-end; gap:8px; }
.vx-rk-lin .spark { display:inline-flex; align-items:flex-end; gap:2px; height:24px; }
.vx-rk-lin .spark i { display:block; width:5px; height:var(--h); min-height:2px; border-radius:calc(1px * var(--vx-raio, 1)); background:color-mix(in srgb, var(--vx-teal-br) 70%, transparent); }
.vx-rk-lin .spark i.z { height:2px; background:var(--vx-border); }
.vx-rk-lin .cr { font-weight:700; font-size:12px; color:var(--vx-muted); white-space:nowrap; }
.vx-rk-lin .cr.sobe { color:var(--vx-teal-br); }
.vx-rk-lin .cr.cai { color:var(--vx-morno); }
.vx-rk-mais { margin-top:10px; }
@container vxrk (max-width: 760px) {
  .vx-rk-lin { grid-template-columns:28px minmax(0,1fr) auto; gap:6px 10px; }
  .vx-rk-lin.cab, .vx-rk-lin .reg { display:none; }
  .vx-rk-lin .vol { text-align:right; }
  .vx-rk-lin .comp, .vx-rk-lin .tend { grid-column:2 / 4; }
}
:root.vx-light .vx-rk-casa b, :root.vx-light .vx-rk-lin.casa .pos, :root.vx-light .vx-rk-lin.casa .nm b,
:root.vx-light .vx-rk-lin .cr.sobe { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-rk-lin .cr.cai { color:#b45309; }

/* A PARTE DA CASA (28/09/2026, ParteDaCasa): no painel "Clientes da casa" da Concorrência (a mesma lista do ranking, com
   outras colunas) e na ficha, em "De quem compra". A barra: verde-água é a casa; o resto, cinza, são os concorrentes */
.vx-rk-lin.pc { grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,1fr); }
.vx-rk-lin.pc.fora .parte b { color:var(--vx-morno); }
.vx-rk-lin .parte b { font-weight:800; font-size:14px; color:var(--vx-teal-br); }
.vx-rk-lin .barra.dupla, .vx-cp-parte .barra { display:block; height:6px; margin-top:4px; border-radius:calc(3px * var(--vx-raio, 1)); overflow:hidden;
  background:color-mix(in srgb, var(--vx-muted) 35%, transparent); }
.vx-rk-lin .barra.dupla i, .vx-cp-parte .barra i { display:block; height:100%; background:var(--vx-teal-br); }
.vx-rk-lin .conc { min-width:0; }
.vx-rk-lin .conc b { font-weight:700; }
.vx-rk-lin .conc b.ni { color:var(--vx-muted); font-weight:600; }
.vx-rk-lin .conc .c { margin-left:6px; font-size:11.5px; color:var(--vx-muted); }
.vx-rk-lin .so-casa { color:var(--vx-teal-br); font-weight:700; font-size:12px; }
.vx-rk-lin .rec { display:flex; flex-direction:column; gap:1px; }
.vx-rk-via { font-size:11px; color:var(--vx-faint); }
@container vxrk (max-width: 760px) {
  .vx-rk-lin.pc { grid-template-columns:minmax(0,1fr) auto; }
  .vx-rk-lin.pc .parte { text-align:right; }
  .vx-rk-lin.pc .vol, .vx-rk-lin.pc .conc, .vx-rk-lin.pc .rec { grid-column:1 / 3; }
  .vx-rk-lin.pc .rec { flex-direction:row; gap:8px; }
}
.vx-cp-parte { margin:8px 0 10px; padding:10px 12px; border-radius:calc(10px * var(--vx-raio, 1)); font-size:12.5px;
  border:1px solid color-mix(in srgb, var(--vx-teal-br) 55%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-cp-parte .lin b { color:var(--vx-teal-br); margin-right:6px; }
.vx-cp-parte .lin span { color:var(--vx-muted); }
.vx-cp-parte.fora { border-color:color-mix(in srgb, var(--vx-morno) 55%, transparent); background:transparent; }
.vx-cp-parte.fora .lin b { color:var(--vx-morno); }
.vx-cp-forn.casa { padding-left:8px; box-shadow:inset 3px 0 0 var(--vx-teal-br); }
.vx-cp-forn.casa .t b { color:var(--vx-teal-br); }
:root.vx-light .vx-rk-lin .parte b, :root.vx-light .vx-rk-lin .so-casa, :root.vx-light .vx-cp-parte .lin b,
:root.vx-light .vx-cp-forn.casa .t b { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-rk-lin.pc.fora .parte b, :root.vx-light .vx-cp-parte.fora .lin b { color:#b45309; }

/* OS MAIORES COMPRADORES (28/09/2026, MaioresCompradores): a mesma lista do ranking, com a origem da pedra (a barra:
   verde-água é o Brasil) e os fornecedores da declaração. O mês que a fonte não coletou é um traço pontilhado — não é
   zero, e não se lê como queda */
.vx-rk-lin.mc { grid-template-columns:34px minmax(0,2.1fr) minmax(0,1.2fr) minmax(0,2fr) minmax(0,1.1fr); }
.vx-rk-lin .orig { min-width:0; }
.vx-rk-lin .orig .barra.dupla { margin:2px 0 0; }
.vx-rk-lin .orig .q { white-space:normal; }
.vx-rk-lin .orig .o { white-space:nowrap; }
.vx-rk-lin .orig .o.br, .vx-rk-lin .orig .f.casa { color:var(--vx-teal-br); font-weight:700; }
.vx-rk-lin .orig .sem-br { color:var(--vx-morno); font-weight:700; white-space:nowrap; }
.vx-rk-lin .orig .f { color:var(--vx-text); overflow-wrap:anywhere; }
.vx-rk-lin .orig .f.ni { color:var(--vx-muted); }
.vx-rk-lin .spark i.nd { height:0; min-height:0; border-top:2px dotted var(--vx-border-2); background:transparent; }
.vx-rk-lin .spark i.pa { opacity:.4; }
.vx-rk-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.vx-rk-tag { display:inline-block; white-space:nowrap; padding:2px 9px; border-radius:var(--vx-pill, 999px); font-size:11px; font-weight:700;
  border:1px solid var(--vx-border-2); color:var(--vx-muted); }
.vx-rk-tag.casa { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent);
  background:color-mix(in srgb, var(--vx-teal-br) 8%, transparent); }
.vx-rk-nota { margin-top:12px; }
.vx-rk-lin .vol .val.mes.on { color:var(--vx-text); font-weight:700; }
.vx-rk-aviso { padding:8px 12px; border-radius:calc(8px * var(--vx-raio, 1)); border-left:3px solid var(--vx-morno);
  background:color-mix(in srgb, var(--vx-morno) 7%, transparent); }
.vx-rk-aviso b { color:var(--vx-morno); }
@container vxrk (max-width: 760px) {
  .vx-rk-lin.mc { grid-template-columns:28px minmax(0,1fr) auto; }
  .vx-rk-lin.mc .orig { grid-column:2 / 4; }
}
:root.vx-light .vx-rk-lin .orig .o.br, :root.vx-light .vx-rk-lin .orig .f.casa, :root.vx-light .vx-rk-tag.casa { color:var(--vx-teal-escuro, #0b6b4d); }
:root.vx-light .vx-rk-lin .orig .sem-br, :root.vx-light .vx-rk-aviso b { color:#b45309; }

/* O VALOR ESTIMADO (28/09/2026, PrecoBrasil): o "≈" em itálico, para nunca se confundir com o valor declarado */
.vx-cp-est { font-style:italic; }
.vx-cp-lin .c-vol .vx-cp-est, .vx-rk-lin .vx-cp-est { color:var(--vx-muted); }
.vx-mk-kpi b.vx-cp-est { font-style:italic; }

/* O ÍCONE NO MEIO DO TEXTO (30/09/2026). O Daniel: "consegue pôr ícones de verdade" — o emoji colorido nos rótulos,
   botões e menus (🔎 📄 ✍️ 🪐…) era marca de sistema feito por IA, e cada aparelho o desenhava de um jeito. Virou o ícone
   Material do MudBlazor (<MudIcon Class="vx-ic">): do tamanho da letra, na cor do texto, alinhado à linha de base. */
.vx-ic.mud-icon-root { font-size: 1.12em !important; width: 1.12em; height: 1.12em; vertical-align: -0.2em; margin-right: .34em;
  flex: 0 0 auto; }
.vx-ic.so.mud-icon-root { margin-right: 0; }

/* O MAPA DE QUEM VENDE PARA QUEM (01/10/2026). O Daniel: "uma visão com essa lista, tipo um mapa mental, onde vou
   clicando e vendo as ramificações". As colunas e as alturas vêm do arranjo do Negocios (MapaQuemVende: coluna de 236px,
   vão de 64px, cartão de 64px); o desenho só não pode mudar essas medidas — a linha sai do meio da borda de cada cartão.
   A caixa rola dentro dela mesma (nos dois sentidos, no celular também): o mapa cresce para a direita a cada clique, e a
   página nunca ganha rolagem lateral. */
.vx-mapa-bloco { margin-top:4px; min-width:0; }
.vx-mapa-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.vx-mapa-cab .t { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 260px; }
.vx-mapa-cab .t b { font-size:14px; color:var(--vx-text); }
.vx-mapa-cab .t span { font-size:12px; color:var(--vx-muted); }
.vx-mapa-cab .acoes { display:flex; gap:6px; flex-wrap:wrap; }
.vx-mapa-cab .acoes .vx-mk-bt { display:inline-flex; align-items:center; gap:4px; }
.vx-mapa-leg { display:flex; flex-wrap:wrap; gap:4px 14px; margin:8px 0 10px; font-size:11px; color:var(--vx-muted); }
.vx-mapa-leg span { display:inline-flex; align-items:center; gap:5px; }
.vx-mapa-leg i { display:inline-block; width:12px; height:10px; border-radius:3px; border:1px solid var(--vx-border-2); background:var(--vx-surface); }
.vx-mapa-leg i.cmp { border-left:3px solid var(--vx-teal-br); }
.vx-mapa-leg i.br { border-left:3px solid #f97316; }
.vx-mapa-leg i.fora { border-left:3px solid var(--vx-faint); }
.vx-mapa-leg i.casa { border-left:3px solid var(--vx-morno); background:color-mix(in srgb, var(--vx-morno) 16%, var(--vx-surface)); }
.vx-mapa-leg i.prod { border-style:dashed; border-radius:var(--vx-pill, 99px); background:transparent; }
.vx-mapa-leg b.est { color:var(--vx-morno); }
/* segurar e arrastar para andar no mapa (01/10/2026): a mão aberta no fundo, fechada enquanto arrasta; sem seleção de texto */
.vx-mapa-rolo { cursor:grab; }
.vx-mapa-rolo.arrastando, .vx-mapa-rolo.arrastando * { cursor:grabbing !important; user-select:none; }
.vx-mapa-rolo { position:relative; overflow:auto; max-height:min(76vh, 980px); min-height:180px; border:1px solid var(--vx-border);
  border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-bg-2); overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.vx-mapa-rolo:focus { outline:none; }
/* A TELA CHEIA DO MAPA (02/10/2026, o Daniel: "modo tela cheia imersivo com análises comercial"): o bloco vira uma camada fixa
   sobre a página — acima da barra do app (1300) e abaixo do que abre por cima dela: a gaveta da ficha e o seletor, que o
   html.vx-mapa-cheia sobe (o diálogo, a 1400, já fica acima). O mapa ocupa o que sobra; a análise vai ao lado — embaixo,
   no celular. A página não rola atrás */
.vx-mapa-corpo, .vx-mapa-palco { min-width:0; }
.vx-mapa-bloco.cheia { position:fixed; inset:0; z-index:1320; margin:0; display:flex; flex-direction:column;
  padding:14px clamp(12px, 2vw, 22px); background:var(--vx-bg); overflow:hidden; }
.vx-mapa-bloco.cheia .vx-mapa-corpo { flex:1 1 auto; min-height:0; display:flex; gap:14px; }
.vx-mapa-bloco.cheia .vx-mapa-palco { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.vx-mapa-bloco.cheia .vx-mapa-rolo { flex:1 1 auto; max-height:none; min-height:0; }
.vx-mapa-bloco.cheia .vx-mapa-leg { margin:6px 0 8px; }
html.vx-mapa-cheia, html.vx-mapa-cheia body { overflow:hidden !important; }
html.vx-mapa-cheia { --mud-zindex-popover:1350; }
html.vx-mapa-cheia .vx-drawer-scrim { z-index:1330; }
html.vx-mapa-cheia .vx-pedido-drawer { z-index:1340; }
.vx-mapa-cab .acoes .vx-mk-bt.on { border-color:var(--vx-teal); color:var(--vx-teal-br); }
.vx-mapa-analise { flex:0 0 clamp(320px, 26vw, 420px); min-height:0; overflow:auto; overscroll-behavior:contain; padding:14px 16px 18px;
  border:1px solid var(--vx-border); border-radius:calc(12px * var(--vx-raio, 1)); background:var(--vx-surface); }
.vx-ma-cab { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; }
.vx-ma-cab b { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--vx-text); }
.vx-ma-cab span { font-size:12px; color:var(--vx-muted); }
.vx-ma-kpis { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
.vx-ma-kpis > div { display:flex; flex-direction:column; gap:2px; min-width:0; padding:9px 10px; border:1px solid var(--vx-border);
  border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface-2); }
.vx-ma-kpis b { font-size:16px; font-weight:800; color:var(--vx-text); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-ma-kpis span { font-size:11px; color:var(--vx-muted); }
.vx-ma-kpis .casa b { color:var(--vx-teal-br); }
.vx-ma-leitura { margin:0 0 6px; padding:0 0 0 16px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; line-height:1.45; color:var(--vx-text); }
.vx-ma-tit { margin:16px 0 8px; display:flex; align-items:baseline; gap:8px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--vx-muted); }
.vx-ma-tit small { text-transform:none; letter-spacing:0; font-weight:500; color:var(--vx-faint); }
.vx-ma-lista { display:flex; flex-direction:column; gap:6px; }
.vx-ma-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 6px; padding:8px 10px; border:1px solid var(--vx-border);
  border-left:3px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface-2); }
.vx-ma-item.br { border-left-color:#f97316; }
.vx-ma-item.fora { border-left-color:#60a5fa; }
.vx-ma-item .nm { all:unset; cursor:pointer; min-width:0; font-weight:700; font-size:13px; color:var(--vx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-ma-item .nm:hover, .vx-ma-item .bt:hover { color:var(--vx-teal-br); }
.vx-ma-item .bt { all:unset; cursor:pointer; color:var(--vx-muted); display:inline-flex; align-items:center; }
.vx-ma-item .sub { grid-column:1 / -1; font-size:11.5px; color:var(--vx-muted); }
.vx-ma-item .val { grid-column:1 / -1; font-size:12px; color:var(--vx-text); font-variant-numeric:tabular-nums; }
.vx-ma-barra { all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 8px; padding:6px 8px;
  border-radius:calc(8px * var(--vx-raio, 1)); cursor:pointer; }
.vx-ma-barra:hover { background:var(--vx-surface-2); }
.vx-ma-barra.fixa { cursor:default; }
.vx-ma-barra.fixa:hover { background:none; }
.vx-ma-barra .t { display:flex; align-items:center; gap:4px; min-width:0; font-size:12.5px; color:var(--vx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-ma-barra .n { font-size:12px; color:var(--vx-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-ma-barra .bar { grid-column:1 / -1; height:5px; border-radius:3px; background:var(--vx-surface-2); overflow:hidden; }
.vx-ma-barra .bar i { display:block; height:100%; border-radius:3px; background:var(--vx-teal); }
.vx-ma-barra.br .bar i { background:#f97316; }
.vx-ma-barra.fora .bar i { background:#60a5fa; }
.vx-ma-barra.casa .bar i { background:var(--vx-teal-br); }
.vx-ma-barra.agente .t { color:var(--vx-muted); }
.vx-ma-barra.agente .bar i { background:var(--vx-faint); }
.vx-ma-barra:focus-visible, .vx-ma-item .nm:focus-visible, .vx-ma-item .bt:focus-visible { outline:2px solid var(--vx-teal); outline-offset:2px; }
.vx-ma-selo { font-style:normal; font-size:10px; font-weight:700; padding:1px 6px; margin-left:4px; border-radius:var(--vx-pill, 999px);
  background:var(--vx-teal-soft); color:var(--vx-teal-br); }
@media (max-width:900px) {
  .vx-mapa-bloco.cheia { overflow:auto; }
  .vx-mapa-bloco.cheia .vx-mapa-corpo { flex:none; flex-direction:column; }
  .vx-mapa-bloco.cheia .vx-mapa-palco { flex:none; }
  .vx-mapa-bloco.cheia .vx-mapa-rolo { flex:none; height:62vh; }
  .vx-mapa-analise { flex:none; overflow:visible; }
}
.vx-mapa { position:relative; }
.vx-mapa-fios { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.vx-mapa-fios path { fill:none; stroke:var(--vx-border-2); stroke-width:1.6; transition:stroke .2s; }
.vx-mapa-fios path.prod, .vx-mapa-fios path.sn, .vx-mapa-fios path.mais { stroke-dasharray:3 4; stroke-width:1.2; }
.vx-mapa-fios path.aceso { stroke:var(--vx-teal-br); stroke-width:2.2; }
.vx-mapa-no { position:absolute; box-sizing:border-box; display:flex; align-items:stretch; min-width:0;
  border:1px solid var(--vx-border-2); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); color:var(--vx-text);
  animation:vx-mapa-entra .22s var(--vx-smooth) both; }
@keyframes vx-mapa-entra { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .vx-mapa-no { animation:none; } }
.vx-mapa-no > .corpo { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:6px 10px;
  border:0; border-radius:inherit; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.vx-mapa-no > .corpo:focus-visible { outline:2px solid var(--vx-teal-br); outline-offset:1px; }
/* O NOME QUE VAZAVA DO CARTÃO (01/10/2026, o print da Cajugram: "UGRAM GRANITOS E MARM DO BRAZIL LTDA." cortado à esquerda):
   o corpo é um <button>, e o navegador não estica os filhos dele — cada linha ficava da largura do próprio texto, centrada, e
   o nome longo saía pelas duas bordas sem as reticências. As linhas passam a ter a largura do cartão. */
.vx-mapa-no > .corpo { align-items:stretch; }
.vx-mapa-no .l1, .vx-mapa-no .l2, .vx-mapa-no .l3 { align-self:stretch; width:100%; max-width:100%; }
.vx-mapa-no .l1, .vx-mapa-no .l2, .vx-mapa-no .l3 { display:block; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-mapa-no .l1 { font-size:12.5px; line-height:16px; }
.vx-mapa-no .l1 b { font-weight:700; }
.vx-mapa-no .l1 b.ni { font-weight:600; font-style:italic; color:var(--vx-muted); }
.vx-mapa-no .l2, .vx-mapa-no .l3 { font-size:11px; line-height:14px; color:var(--vx-muted); font-variant-numeric:tabular-nums; }
.vx-mapa-no .vl { color:var(--vx-text); font-weight:600; }
.vx-mapa-no .vl.est { color:var(--vx-morno); }
.vx-mapa-no.cmp { border-left:3px solid var(--vx-teal-br); }
.vx-mapa-no.vnd.br { border-left:3px solid #f97316; }
.vx-mapa-no.vnd.br .l1 b:not(.ni) { color:#f97316; }
.vx-mapa-no.vnd.fora { border-left:3px solid var(--vx-faint); }
.vx-mapa-no.vnd.casa { border-left:3px solid var(--vx-morno); background:color-mix(in srgb, var(--vx-morno) 12%, var(--vx-surface)); }
.vx-mapa-no.vnd.casa .l1 b { color:var(--vx-morno); }
.vx-mapa-no.raiz { border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); background:color-mix(in srgb, var(--vx-teal-br) 10%, var(--vx-surface)); }
.vx-mapa-no.raiz > .corpo { cursor:default; }
.vx-mapa-no.lista .l1 { display:flex; align-items:center; gap:6px; }
.vx-mapa-no.lista .l1 .mud-icon-root { color:var(--vx-teal-br); flex:0 0 auto; }
.vx-mapa-no.prod, .vx-mapa-no.sn, .vx-mapa-no.mais { border-style:dashed; background:var(--vx-bg-2); }
.vx-mapa-no.prod { border-radius:var(--vx-pill, 99px); }
.vx-mapa-no.prod > .corpo { padding:0 12px; cursor:default; }
.vx-mapa-no.prod .l1 { font-size:11.5px; color:var(--vx-muted); }
.vx-mapa-no.prod .l1 b { font-weight:600; color:var(--vx-text); }
.vx-mapa-no.sn > .corpo { cursor:default; }
.vx-mapa-no.mais > .corpo { flex-direction:row; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--vx-teal-br); }
.vx-mapa-no.fechado:hover, .vx-mapa-no.aberto:not(.raiz):hover, .vx-mapa-no.mais:hover { border-color:var(--vx-teal-br); }
.vx-mapa-no.aceso { border-color:var(--vx-teal-br); box-shadow:0 0 0 1px color-mix(in srgb, var(--vx-teal-br) 45%, transparent); }
.vx-mapa-no .bts { display:flex; flex-direction:column; gap:2px; padding:4px 4px 4px 0; }
.vx-mapa-no .bt { display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:6px; background:transparent;
  color:var(--vx-faint); cursor:pointer; }
.vx-mapa-no .bt:hover, .vx-mapa-no .bt:focus-visible { color:var(--vx-text); background:var(--vx-border); }
.vx-mapa-no .qt { position:absolute; z-index:1; right:-12px; top:50%; transform:translateY(-50%); min-width:24px; height:22px; padding:0 6px;
  border:1px solid var(--vx-border-2); border-radius:var(--vx-pill, 99px); background:var(--vx-bg); color:var(--vx-muted);
  font:inherit; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; cursor:pointer; }
.vx-mapa-no.fechado .qt { color:var(--vx-teal-br); border-color:color-mix(in srgb, var(--vx-teal-br) 55%, transparent); }
.vx-mapa-no .qt:hover { background:var(--vx-surface-2); color:var(--vx-text); }
/* a troca "lista · mapa" do cabeçalho da lista */
.vx-cp-vista { display:inline-flex; }
.vx-cp-vista button { gap:5px; }
.vx-cp-vista .mud-icon-root { font-size:15px; }

/* o que passou entre o fornecedor e a empresa (01/10/2026): o produto e o valor estimado ("≈", na cor do estimado) — na
   ficha (De quem compra) e no bloco "Quem do Brasil vende para lá"; o nome do fornecedor no bloco abre o mapa */
.vx-cp-forn .s.p, .vx-cp-fbr .p { margin-top:2px; font-size:11.5px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-cp-forn .s.p .lbl, .vx-cp-fbr .p .lbl { color:var(--vx-faint); margin-right:4px; }
.vx-cp-est { color:var(--vx-morno); font-weight:600; }
.vx-cp-nomapa { font-size:11.5px; font-weight:600; }
h3 .vx-cp-nomapa { margin-left:8px; font-size:11.5px; text-transform:none; letter-spacing:0; }
.vx-cp-fbr-nm { display:inline-flex; align-items:center; gap:2px; padding:0; border:0; background:transparent; font:inherit; font-size:13px;
  font-weight:700; color:#f97316; text-align:left; cursor:pointer; overflow-wrap:anywhere; }
.vx-cp-fbr-nm.ni { font-weight:600; font-style:italic; color:var(--vx-muted); }
.vx-cp-fbr-nm:hover { text-decoration:underline; }
.vx-cp-fbr-nm .vx-ic.mud-icon-root { margin-right:0; margin-left:.2em; opacity:.7; }

/* os países que a chave da busca paga cobre (01/10/2026), em Inteligência › Fontes: um chip por país, o "×" tira */
.vx-fo-paises { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 8px; }
.vx-fo-paises .chip { display:inline-flex; align-items:center; gap:4px; min-height:28px; padding:0 4px 0 10px; border:1px solid var(--vx-border-2);
  border-radius:var(--vx-pill, 99px); background:var(--vx-surface-2); color:var(--vx-text); font-size:12.5px; }
.vx-fo-paises .chip.todos { padding:0 10px; color:var(--vx-morno); border-color:color-mix(in srgb, var(--vx-morno) 45%, transparent); }
.vx-fo-paises .chip button { display:grid; place-items:center; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:transparent;
  color:var(--vx-faint); font-size:15px; line-height:1; cursor:pointer; }
.vx-fo-paises .chip button:hover { color:var(--vx-text); background:var(--vx-border); }
.vx-fo-card .informar label.vx-fo-qualquer { display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12.5px; color:var(--vx-muted); cursor:pointer; }
.vx-fo-card .informar label.vx-fo-qualquer input { width:auto; min-height:0; }

/* O AGENTE DE CARGA (01/10/2026, o Daniel: "aí é quem transporta, correto?" — "talvez um modo de ver eles"): marcado,
   nunca escondido — o selo na lista, no bloco H e na ficha; no mapa, a borda tracejada azul e o caminhão, e a troca
   "comércio · transporte · tudo" no cabeçalho */
.vx-cp-agente { display:inline-flex; align-items:center; min-height:18px; padding:0 7px; border:1px dashed color-mix(in srgb, #60a5fa 60%, transparent);
  border-radius:var(--vx-pill, 99px); color:#60a5fa; font-size:10.5px; font-weight:600; line-height:1.4; white-space:nowrap; vertical-align:middle; }
.vx-cp-forn .t .vx-cp-agente, .vx-cp-fbr .t .vx-cp-agente { margin-left:6px; }
.vx-mapa-no.vnd.agente, .vx-mapa-no.cmp.agente { border-left:3px dashed #60a5fa; }
.vx-mapa-no.vnd.agente .l1 b:not(.ni), .vx-mapa-no.cmp.agente .l1 b { color:#93c5fd; }
.vx-mapa-no.agente .l1 .vx-ic.mud-icon-root { color:#60a5fa; margin-right:.25em; }
.vx-mapa-leg i.agente { border-left:3px dashed #60a5fa; }
.vx-mapa-modo { height:30px; }
.vx-mapa-modo button { padding:0 10px; font-size:12px; white-space:nowrap; }

/* DESDOBRAR POR CLIENTE (01/10/2026): o diálogo do card de vários clientes — cada cavalete com o seu cliente */
.vx-dpc-tit { display:flex; align-items:center; gap:8px; font-weight:600; }
.vx-dpc-tit .mud-icon-root { color:var(--vx-teal-br); }
.vx-dpc-tit span { font-size:12px; font-weight:400; color:var(--vx-faint); }
.vx-dpc { display:flex; flex-direction:column; gap:10px; }
.vx-dpc-fina { margin:0; font-size:12.5px; color:var(--vx-muted); line-height:1.45; }
.vx-dpc-load { display:flex; align-items:center; gap:10px; padding:12px 0; font-size:13px; color:var(--vx-muted); }
.vx-dpc-erro { padding:8px 10px; border-radius:calc(8px * var(--vx-raio, 1)); background:color-mix(in srgb, var(--vx-frio) 14%, transparent);
  color:var(--vx-text); font-size:12.5px; }
.vx-dpc-grupos { display:flex; flex-direction:column; gap:8px; }
.vx-dpc-grupo { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--vx-border-2);
  border-left:3px solid var(--vx-teal-br); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); }
.vx-dpc-grupo.sem { border-left-style:dashed; border-left-color:var(--vx-faint); }
.vx-dpc-grupo .o-que { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vx-dpc-grupo .o-que b { font-size:13px; color:var(--vx-text); }
.vx-dpc-grupo .o-que span { font-size:11.5px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-dpc-grupo select { flex:1 1 200px; min-width:0; height:36px; }
.vx-dpc-resumo { display:flex; flex-direction:column; gap:4px; padding-top:6px; border-top:1px solid var(--vx-border); }
.vx-dpc-resumo div { display:flex; justify-content:space-between; gap:12px; font-size:12.5px; }
.vx-dpc-resumo b { color:var(--vx-text); overflow-wrap:anywhere; }
.vx-dpc-resumo span { color:var(--vx-muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* A FICHA DO FORNECEDOR (01/10/2026): o que a base sabe dele e o que a web diz (o Raio-X da Prospecção) */
.vx-ff-tit { display:flex; align-items:center; gap:10px; }
.vx-ff-tit .mud-icon-root { color:#f97316; flex:0 0 auto; }
.vx-ff-tit b { display:block; font-size:15px; color:var(--vx-text); overflow-wrap:anywhere; }
.vx-ff-tit span { display:block; font-size:12px; color:var(--vx-faint); }
.vx-ff { display:flex; flex-direction:column; gap:14px; }
.vx-ff section h3 { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-ff section h3 small { margin-left:6px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--vx-faint); }
.vx-ff-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
@media (max-width:520px) { .vx-ff-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.vx-ff-kpis div { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); min-width:0; }
.vx-ff-kpis b { font-size:15px; color:var(--vx-text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vx-ff-kpis b.est { color:var(--vx-morno); }
.vx-ff-kpis span { font-size:11px; color:var(--vx-faint); }
.vx-ff-linha { margin:6px 0 0; font-size:12.5px; color:var(--vx-text); overflow-wrap:anywhere; }
.vx-ff-linha span { color:var(--vx-faint); margin-right:4px; }
.vx-ff-compradores { display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:260px; overflow:auto; }
.vx-ff-comp { display:flex; flex-direction:column; gap:2px; padding:7px 10px; border:1px solid var(--vx-border); border-left:3px solid var(--vx-teal-br);
  border-radius:calc(8px * var(--vx-raio, 1)); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; min-width:0; }
.vx-ff-comp:hover { border-color:var(--vx-teal-br); }
.vx-ff-comp b { font-size:12.5px; color:var(--vx-text); overflow-wrap:anywhere; }
.vx-ff-comp span { font-size:11.5px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-ff-busca { display:flex; align-items:center; gap:10px; padding:10px 0; font-size:12.5px; color:var(--vx-muted); }
.vx-ff-fina { margin:0; font-size:12.5px; color:var(--vx-muted); line-height:1.45; }
.vx-ff-web .vx-lib-kv b, .vx-ff-web .vx-lib-kv a { text-align:right; overflow-wrap:anywhere; min-width:0; }
.vx-ff-como { margin-top:8px; font-size:11.5px; color:var(--vx-faint); }
/* os vários telefones e e-mails do Raio-X, cada um um link (ligar e escrever direto) — a lista não herda a cor do rótulo */
.vx-ff-web .vx-lib-kv .vx-rx-lista { flex:0 1 auto; min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 12px;
  color:var(--vx-text); text-align:right; }
.vx-rx-lista a { overflow-wrap:anywhere; }
/* o Raio-X na ficha do comprador (02/10/2026): o mesmo bloco da ficha do fornecedor, dentro da seção Contatos */
.vx-cp-rx { margin-top:12px; padding:12px 14px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface-2); }
.vx-cp-rx-cab { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.vx-cp-rx-cab b { font-size:13px; color:var(--vx-text); display:inline-flex; align-items:center; gap:6px; }
.vx-cp-rx-cab small { font-size:11.5px; color:var(--vx-faint); font-weight:400; }
.vx-cp-rx-busca { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--vx-muted); padding:6px 0; }
.vx-ff-como ul { margin:6px 0 0; padding-left:18px; }
.vx-cp-fbr-ficha { margin-left:8px; font-size:11.5px; font-weight:600; }

/* O MAPA DOS ESTADOS UNIDOS (01/10/2026): com o filtro nos EUA — o mapa (Leaflet, a base Esri do vx-map) e, ao lado, o
   estado escolhido: quem está lá, o quê e os índices. No celular, o lado vai para baixo do mapa */
.vx-eua { margin:14px 0; padding:12px; border:1px solid var(--vx-border); border-radius:calc(14px * var(--vx-raio, 1)); background:var(--vx-bg-2); min-width:0; }
.vx-eua-cab b { display:block; font-size:14px; color:var(--vx-text); }
.vx-eua-cab span { display:block; margin-top:2px; font-size:12px; color:var(--vx-muted); }
.vx-eua-kpis { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:10px 0; }
@media (max-width:760px) { .vx-eua-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.vx-eua-kpis div { display:flex; flex-direction:column; gap:2px; padding:8px 10px; border:1px solid var(--vx-border); border-radius:calc(10px * var(--vx-raio, 1)); background:var(--vx-surface); min-width:0; }
.vx-eua-kpis b { font-size:15px; color:var(--vx-text); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.vx-eua-kpis span { font-size:11px; color:var(--vx-faint); overflow-wrap:anywhere; }
.vx-eua-corpo { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:12px; }
@media (max-width:900px) { .vx-eua-corpo { grid-template-columns:minmax(0,1fr); } }
.vx-eua-mapa { height:420px; min-height:300px; border-radius:calc(10px * var(--vx-raio, 1)); overflow:hidden; border:1px solid var(--vx-border); background:var(--vx-bg); }
@media (max-width:600px) { .vx-eua-mapa { height:300px; } }
.vx-eua-lado { display:flex; flex-direction:column; gap:8px; min-width:0; max-height:420px; overflow:auto; }
@media (max-width:900px) { .vx-eua-lado { max-height:none; } }
.vx-eua-lado .uf { display:flex; align-items:baseline; gap:8px; }
.vx-eua-lado .uf b { font-size:16px; color:var(--vx-text); }
.vx-eua-lado .uf span { font-size:12px; color:var(--vx-faint); }
.vx-eua-lado .ind { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; }
.vx-eua-lado .ind div { display:flex; flex-direction:column; padding:6px 8px; border:1px solid var(--vx-border); border-radius:calc(8px * var(--vx-raio, 1)); background:var(--vx-surface); min-width:0; }
.vx-eua-lado .ind b { font-size:14px; color:var(--vx-text); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vx-eua-lado .ind b.est { color:var(--vx-morno); }
.vx-eua-lado .ind span { font-size:10.5px; color:var(--vx-faint); }
.vx-eua-lado .nota { margin:0; font-size:12px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-eua-lado .nota span { color:var(--vx-faint); margin-right:4px; }
.vx-eua-lado .quem { display:flex; flex-direction:column; gap:5px; }
.vx-eua-emp { display:flex; flex-direction:column; gap:1px; padding:6px 9px; border:1px solid var(--vx-border); border-left:3px solid var(--vx-teal-br);
  border-radius:calc(8px * var(--vx-raio, 1)); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; min-width:0; }
.vx-eua-emp:hover { border-color:var(--vx-teal-br); }
.vx-eua-emp.agente { border-left:3px dashed #60a5fa; }
.vx-eua-emp b { font-size:12.5px; color:var(--vx-text); overflow-wrap:anywhere; }
.vx-eua-emp span { font-size:11px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-eua-portos { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px; font-size:11.5px; color:var(--vx-muted); }
.vx-eua-portos .lbl { color:var(--vx-faint); }
.vx-eua-portos b { color:#f97316; font-weight:600; margin-left:3px; }

/* o mapa dos EUA (01/10/2026, o segundo pedido): quem do Brasil manda para o estado, o porto que se detalha e o selo de quem
   importou do Brasil */
.vx-eua-lado h4 { margin:6px 0 0; font-size:11px; font-weight:700; letter-spacing:calc(.4px * var(--vx-tracking, 1)); text-transform:var(--vx-caixa, uppercase); color:var(--vx-muted); }
.vx-eua-lado h4 small { margin-left:6px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--vx-faint); }
.vx-eua-lado .uf .vx-mk-lnk { margin-left:auto; font-size:11.5px; }
.vx-eua-forn { display:flex; flex-direction:column; gap:1px; padding:6px 9px; border:1px solid var(--vx-border); border-left:3px solid var(--vx-faint);
  border-radius:calc(8px * var(--vx-raio, 1)); min-width:0; }
.vx-eua-forn.br { border-left-color:#f97316; }
.vx-eua-forn.br > b { color:#f97316; }
.vx-eua-forn.agente { border-left:3px dashed #60a5fa; }
.vx-eua-forn.agente > b { color:#93c5fd; }
.vx-eua-forn.casa { border-left-color:var(--vx-morno); }
.vx-eua-forn.casa > b { color:var(--vx-morno); }
.vx-eua-forn > b { font-size:12.5px; overflow-wrap:anywhere; }
.vx-eua-forn > span { font-size:11px; color:var(--vx-muted); overflow-wrap:anywhere; }
.vx-eua-forn .vx-mk-lnk { align-self:flex-start; font-size:11.5px; }
.vx-eua-selo { display:inline-block; margin-left:5px; padding:0 6px; border-radius:var(--vx-pill, 99px); font-size:9.5px; font-weight:700; font-style:normal;
  line-height:16px; vertical-align:1px; letter-spacing:.2px; }
.vx-eua-selo.br { background:color-mix(in srgb, #f97316 22%, transparent); color:#fdba74; border:1px solid color-mix(in srgb, #f97316 55%, transparent); }
.vx-eua-selo.agente { color:#93c5fd; border:1px dashed color-mix(in srgb, #60a5fa 60%, transparent); }
.vx-eua-portos .vx-mk-lnk { font-size:11.5px; color:var(--vx-muted); }
.vx-eua-portos .vx-mk-lnk.on { color:var(--vx-text); text-decoration:underline; }
/* no tema claro, o azul e o laranja claros (feitos para o fundo escuro) somem no branco: os mesmos tons, mais fechados */
:root.vx-light .vx-eua-forn.br > b, :root.vx-light .vx-eua-selo.br { color:#c2410c; }
:root.vx-light .vx-eua-forn.agente > b, :root.vx-light .vx-eua-selo.agente,
:root.vx-light .vx-mapa-no.vnd.agente .l1 b:not(.ni), :root.vx-light .vx-mapa-no.cmp.agente .l1 b { color:#1d4ed8; }
:root.vx-light .vx-eua-forn.casa > b { color:#b45309; }
/* o fundo do mapa enquanto os ladrilhos chegam: o .leaflet-container geral é azul-noite (!important), que pisca no claro */
:root.vx-light .vx-eua-mapa.leaflet-container { background:var(--vx-bg-2) !important; }