/* ====================================================================
   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: 8px; 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: 8px; 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: rgba(29,158,117,.75) transparent; }
:root.vx-light *::-webkit-scrollbar-thumb { background: rgba(29,158,117,.75) !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: rgba(29,158,117,.6) transparent; }
.vx-pipe::-webkit-scrollbar { height: 12px; }
.vx-pipe::-webkit-scrollbar-track { background: transparent !important; }
.vx-pipe::-webkit-scrollbar-thumb { background: rgba(29,158,117,.6) !important; border:3px solid transparent; background-clip: content-box; border-radius:8px; }
.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:3px; text-transform: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: 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%, rgba(43,212,160,.10), 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%, rgba(93,202,165,.5), 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%, rgba(43,212,160,.4), transparent 100%),
    radial-gradient(1px 1px at 38% 78%, rgba(233,236,244,.28), transparent 100%),
    radial-gradient(1px 1px at 9% 74%, rgba(93,202,165,.35), 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%, rgba(93,202,165,.4), 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%, rgba(43,212,160,.13), 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%, rgba(93,202,165,.05) 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, rgba(93,202,165,.5), 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, rgba(93,202,165,.4), 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, rgba(43,212,160,.55), 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:2px;
  background: linear-gradient(90deg, transparent, rgba(233,236,244,.85) 70%, #fff);
  box-shadow: 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: 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); }
.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: #04110c; letter-spacing: .02em; }

/* 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: 12px; box-shadow: 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: 12px;
  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: 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: 12px; }
/* 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: rgba(43,212,160,.12); border: 1px solid rgba(43,212,160,.3); }
.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: 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: 999px;
  background: rgba(43,212,160,.14); 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: uppercase; letter-spacing: .05em; }

.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: 8px;
}
.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: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br));
  box-shadow: 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: 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: #04110c; letter-spacing: .02em; }
/* 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: 999px;
  background: rgba(43,212,160,.14); 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: .06em; text-transform: 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: 14px;
  background: #0B0B14;
  animation: vx-splash-entra .5s ease-out both;
}
#vx-splash img { animation: vx-splash-gira 2.4s linear infinite; opacity: .96; }
#vx-splash span {
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  font-size: 19px; font-weight: 500; letter-spacing: .01em; color: #E9ECF4;
}
#vx-splash span b { color: #2BD4A0; font-weight: 500; }
/* entra com atraso: 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); } }
.vx-splash-sai { opacity: 0 !important; transition: opacity .4s ease; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  #vx-splash { animation: none; }
  #vx-splash img { animation: none; }
  .vx-splash-sai { transition: 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: 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:-1px; }
/* 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:.3px; 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: 12px; 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: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br));
  color:#04110c; font-weight: 700; font-size: 15px; border-radius: 12px; letter-spacing:.2px;
  transition: transform .18s var(--vx-spring), box-shadow .2s, filter .2s;
  box-shadow: 0 10px 26px -10px var(--vx-teal-glow);
}
.vx-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 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: 10px; 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:-.8px; }
.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: 999px; background: rgba(43,212,160,.12);
  color: var(--vx-teal-soft); border:1px solid rgba(43,212,160,.25); }
.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; }
@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:10px 10px 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:.4px; text-transform: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:9px; 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:12px;
  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:rgba(43,212,160,.32); background:rgba(43,212,160,.08); }
.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:.3px; text-transform: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:13px; 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:.4px; text-transform: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:11px; }
.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%, #1d9e75 100%);
  box-shadow: 0 22px 50px -24px rgba(29,158,117,.55);
}
.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:-.5px; color:#fff; }
.vx-hero p { margin: 6px 0 0; color: rgba(255,255,255,.82); font-size: 14px; max-width: 560px; }
.vx-hero-icon { width:54px; height:54px; border-radius: 15px; display:grid; place-items:center;
  background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); }

/* 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)); }
.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: 0 18px 38px -20px rgba(0,0,0,.7); }
.vx-card-ico { width:40px; height:40px; border-radius:11px; 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:-.5px; }

/* ====================== 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:.4px; text-transform:uppercase; color: var(--vx-muted); }
.vx-col-h .badge { font-size:11px; background: rgba(255,255,255,.08); padding: 2px 9px; border-radius: 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: 13px;
  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:7px;
  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: 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: 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 rgba(43,212,160,.25);
}
.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: 13px; 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: 0 16px 30px -16px rgba(0,0,0,.8); }
.vx-slab.sel { border-color: var(--vx-teal-br); box-shadow: 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: 999px; color:#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:#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; }
.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:7px;
  font-size:14px; font-weight:800; line-height:1.3; letter-spacing:.2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vx-tag b { font-size:8.5px; font-weight:700; letter-spacing:.7px; opacity:.65; text-transform:uppercase; }
.vx-tag-chapa { background:rgba(43,212,160,.16); color:var(--vx-teal-soft); border:1px solid rgba(43,212,160,.34); }
.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:12px; 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: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:#2BD4A0; }
.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:.6px; padding:2px 7px; border-radius: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:rgba(43,212,160,.16); 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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#04110c; border:none;
  border-radius:8px; 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:6px; }
.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: 12px; font-weight:700; font-size:14px;
  color:#04110c; background: 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: 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, rgba(43,212,160,.16), 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%, rgba(43,212,160,.28) 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: .14em; 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:.5px; text-transform:uppercase; color:var(--vx-faint); align-self:center; }
.vx-seg { display:inline-flex; height:28px; border:1px solid var(--vx-border); border-radius:10px; 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:#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:8px; 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:12px; background-size:cover; background-position:center;
  border:1px solid var(--vx-border-2); flex:0 0 auto; }
.vx-mat-name { font-size:16px; font-weight:500; letter-spacing:-.3px; 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:.2px; color:var(--vx-teal-soft);
  background:rgba(43,212,160,.13); border:1px solid rgba(43,212,160,.32); border-radius:999px;
  padding:3px 12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root.vx-light .vx-mat-badge { color:#0a7f5f; background:rgba(43,212,160,.12); border-color:rgba(43,212,160,.4); }
.vx-mat-sub { font-size:12px; color: var(--vx-muted); }
.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; }
/* 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: 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: 0 0 0 2px var(--vx-teal-br), 0 16px 34px -16px var(--vx-teal-glow); }
.vx-gcard.ofertada { opacity:.97; }

/* 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:1.5px;
  color: rgba(233,236,244,.14); text-shadow: 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:.3px; 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); }
.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; }
.vx-promo-pill { font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px; white-space:nowrap;
  background: linear-gradient(135deg,#c2551a,#ff7a59); color:#fff; letter-spacing:.2px; box-shadow:0 4px 12px -6px rgba(255,122,89,.7); }

/* 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:999px; white-space:nowrap;
  background: rgba(143,160,180,.12); color: var(--vx-muted); letter-spacing:.1px; }
.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:999px; color:#04110c;
  background: 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:999px; letter-spacing:.2px;
  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: 0 0 7px var(--vx-quente); }
.vx-gstat.s-res  i { background: var(--vx-morno);  box-shadow: 0 0 7px var(--vx-morno); }
.vx-gstat.s-vend i { background: var(--vx-frio);   box-shadow: 0 0 7px var(--vx-frio); }

.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:999px; letter-spacing:.3px;
  background: rgba(11,11,20,.5); color: var(--vx-teal-br); border:1px solid rgba(43,212,160,.4);
  -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: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:12px; background: var(--vx-surface); flex-wrap:wrap; }
.vx-modo-vigente .dot { width:13px; height:13px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 8px currentColor; }
.vx-modo-vigente .l { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; 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: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:#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: 999px;
  background: rgba(16,17,27,.92); backdrop-filter: blur(14px); border:1px solid var(--vx-border-2);
  box-shadow: 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: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:#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: 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:999px; padding:3px 9px; backdrop-filter:blur(4px); pointer-events:none; }
.vx-amb-estilo.e360 { color:#04110c; background: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. */
.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: 14px; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 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%, rgba(43,212,160,.12), transparent 55%),
    radial-gradient(900px 680px at 90% 2%, rgba(86,124,210,.07), transparent 55%),
    radial-gradient(1200px 900px at 50% 118%, rgba(43,212,160,.06), 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%, rgba(43,212,160,.10), 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:-.5px; 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%,#1d9e75 100%); position:relative; overflow:hidden;
  box-shadow: 0 22px 50px -24px rgba(29,158,117,.55); }
.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:1.5px; color: rgba(255,255,255,.85); }
.vx-pub-hero h1 { margin:8px 0 14px; font-size: 30px; font-weight:500; color:#fff; letter-spacing:-.5px; 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: 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:8px; 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: 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:rgba(43,212,160,.12);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:-.8px; }
.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: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:3px; text-transform: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:-1px; 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:.3px; 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: 18px; overflow:hidden; cursor:zoom-in;
  background-size:cover; background-position:center; box-shadow: 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:0 2px 20px rgba(0,0,0,.6); }
.vx-pp-swatch { position:absolute; bottom:16px; right:16px; width:96px; height:96px; border-radius:12px; background-size:cover; background-position:center;
  border:2px solid rgba(255,255,255,.85); box-shadow: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:.4px; text-transform:uppercase; color:#04110c; background: var(--vx-teal-br); padding:3px 8px; border-radius:999px; box-shadow: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:.5px; text-transform:uppercase; color:#fff; background:rgba(8,10,18,.5); backdrop-filter:blur(6px); padding:5px 11px; border-radius:999px; }
.vx-pp-piece.sel .vx-pp-stage { box-shadow: 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:2px; text-transform: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:-.5px; margin:10px 0 16px; color:#fff; }
.vx-pp-spec { color: var(--vx-muted); font-size:14.5px; letter-spacing:.3px; }
.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:8px; 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: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, rgba(43,212,160,.16), rgba(43,212,160,.05)); 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:-.5px; color:#fff; }
.vx-pp-sec-cnt { font-size:12px; letter-spacing:1.5px; text-transform: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:16px; 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:0 26px 50px -28px rgba(0,0,0,.7); }
.vx-pp-slab.sel { border-color: var(--vx-teal-br); box-shadow: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: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: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: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)); color:#04110c; border-radius:50%; box-shadow: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:-.2px; }
.vx-pp-slab-ref { font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; color: var(--vx-faint); }
.vx-pp-slab-spec { color: var(--vx-muted); font-size:13px; letter-spacing:.2px; }
/* 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:.2px; color:var(--vx-teal-soft);
                   font-variant-numeric:tabular-nums; }
.vx-pp-meta-unit { margin-top:10px; font-size:13px; letter-spacing:.3px; 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:14px; 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:.3px; 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:16px; padding:12px 14px 12px 22px; box-shadow: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:1.5px; text-transform: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:12px; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)); color:#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:999px;
  padding:9px 15px; font-size:12.5px; font-weight:600; cursor:pointer; backdrop-filter:blur(8px); box-shadow: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:0 14px 30px -16px rgba(0,0,0,.7), 0 0 0 0 rgba(43,212,160,0);} 50%{ box-shadow:0 14px 30px -16px rgba(0,0,0,.7), 0 0 0 6px rgba(43,212,160,.12);} }
@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:.3px; color:rgba(233,236,244,.30); pointer-events:none; max-width:210px; line-height:1.3; }
.vx-cine-credit { font-size:10px; letter-spacing:.4px; 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:20px; padding: 32px; box-shadow: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; }
}

/* 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:14px; cursor:pointer;
  border:1px solid var(--vx-border); background:
    radial-gradient(120% 140% at 0% 0%, rgba(43,212,160,.10), 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: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:1px; text-transform:uppercase; color: var(--vx-teal-soft);
  background: rgba(43,212,160,.12); border:1px solid var(--vx-teal-br); border-radius: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:3px; text-transform: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, rgba(43,212,160,.16), rgba(43,212,160,.05) 32%, transparent 60%); animation:vx-cine-breathe 8s ease-in-out infinite; }
.vx-cine-aura.big { width:120vmax; height:120vmax; background:radial-gradient(circle, rgba(43,212,160,.20), transparent 55%); }
.vx-cine-mark { position:relative; width:58px; height:58px; filter:drop-shadow(0 0 26px rgba(43,212,160,.55)); 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:-1px;
  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:999px; cursor:pointer;
  border:none; font-size:16px; font-weight:700; color:#04110c; background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br));
  box-shadow:0 0 0 0 rgba(43,212,160,.5); 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:.5px; }

/* ── 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:linear-gradient(90deg,var(--vx-teal),var(--vx-teal-br)); box-shadow:0 0 12px rgba(43,212,160,.7); }
.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:-.5px; 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:16px; 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: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:#04110c; background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); border-radius: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: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:1.5px; text-transform: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:2px; text-transform: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:18px; 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:1px; text-transform:uppercase;
  color:var(--vx-teal-soft); background:rgba(43,212,160,.1); border:1px solid var(--vx-teal-br); border-radius: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:.3px; }
.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:12px; cursor:pointer; border:none; font-size:15px; font-weight:700;
  color:#04110c; background: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:rgba(43,212,160,.14); 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:2px; text-transform: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:14px; border:none; cursor:pointer; font-size:17px; font-weight:800;
  color:#04110c; background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); box-shadow: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:14px; 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: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:20px; }
.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:.2px; 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:9px; 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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#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:10px; box-shadow: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 rgba(43,212,160,.45); } 50% { box-shadow:0 0 0 14px rgba(43,212,160,0); } }
@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:-.5px;
  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:18px; 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: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:rgba(43,212,160,.28); 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); }
.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); }
.vx-of-stat { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; color:#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); }

/* 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:uppercase; letter-spacing:.06em; color:var(--vx-faint); }
.vx-cli-filtros select { font:inherit; font-size:12.5px; height:34px; padding:0 10px; border-radius:9px;
  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:#04110c; background: 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:6px;
  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; }

/* ====================== 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: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:10px; padding:6px 6px 6px 12px; }

/* MudBlazor overrides — cantos e fonte coerentes */
.mud-button-root { border-radius: 11px !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:11px; color:#04110c;
  background:linear-gradient(135deg,#1d9e75,#2bd4a0); transition:transform .15s, box-shadow .15s; }
.vx-doc-btn:hover { transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(43,212,160,.6); }
.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: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%, #1d9e75 30%, transparent 55% 100%); }
.vx-doc-co { font-size:24px; font-weight:700; letter-spacing:-1px; color:#0f172a; }
.vx-doc-co span { color:#1d9e75; }
.vx-doc-co-sub { font-size:12px; color:#6b7280; letter-spacing:.5px; text-transform:uppercase; }
.vx-doc-co-addr { font-size:11px; color:#6b7280; margin-top:2px; }
.vx-doc-logo-img { width:48px; height:48px; border-radius:8px; 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:1px; 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:.5px; color:#9ca3af; font-weight:600; text-transform: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:.5px; text-transform: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:3px; }

/* 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:4px;
  background:#ecf0f1; color:#0f172a; border:1px solid #dce4ec;
  font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform: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 #1d9e75; border-radius:0 4px 4px 0;
  padding:6px 10px; background:#fbfbfb; min-width:120px; }
.vx-doc-parc b { display:block; font-size:9.5px; color:#6b7280; letter-spacing:.4px; }
.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: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:3px; }
.vx-oc-etiq { display:inline-flex; align-items:center; justify-content:center; width:100%; height:38px;
  border:1px dashed #94a3b8; border-radius:3px; font-size:7.5px; letter-spacing:.5px;
  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; }
.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:#1d9e75; }

.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: 16px; }
  .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; }
  .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, .vx-gal-grid, .vx-gal-flow, .vx-amb-grid, .vx-pub-grid { grid-template-columns: 1fr 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: 12px; padding: 10px; }
.vx-cmp-img { height: 120px; border-radius: 8px; 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: 0 14px 40px -16px rgba(15,23,42,.28); color: var(--vx-text); }
:root.vx-light .vx-card { box-shadow: 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: 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: 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 (#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:#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:#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:12px;
  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: 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: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:.6px; text-transform:uppercase; color:#04140e;
  background: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br)); padding:1.5px 6px; border-radius:999px;
  flex:0 0 auto; box-shadow: 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:0 0 7px rgba(168,85,247,.8); }
.vx-pc-liberar { border:1px solid rgba(168,85,247,.5); background:rgba(168,85,247,.16); color:#e9d5ff;
  font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:99px; cursor:pointer; transition:filter .15s, transform .12s; }
.vx-pc-liberar:hover { filter:brightness(1.2); transform:translateY(-1px); }

/* 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: -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:#04110c; padding:3px 10px; border-radius: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:.5px; text-transform: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: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:.5px; text-transform: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: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:6px; }
.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:.5px; text-transform:uppercase; color: var(--vx-faint); margin-bottom:2px; }
.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:10px; padding:10px 12px; font-size:13px; margin-bottom:6px; }
.vx-pd-sec { font-size:12px; font-weight:600; letter-spacing:.4px; text-transform: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:10px; 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:12px; 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:uppercase; letter-spacing:.4px; 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:8px; padding:6px 9px; }
@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: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: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:10px; 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:uppercase; letter-spacing:.4px; 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:11px; border:none; cursor:pointer; font-size:13.5px; font-weight:700; transition:.15s; }
.vx-pd-btn.ok { background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#04110c; box-shadow: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:10px; 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:999px; color:#fff; }
.vx-acao-lbl { display:block; font-size:11px; letter-spacing:.4px; text-transform: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:8px; 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:11px; 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:999px; }
.vx-pend-st.ok { background: rgba(43,212,160,.16); 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:9px; 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-d { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* o nome do material embaixo da descrição do cavalete: 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); }
.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: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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); display:grid; place-items:center;
  box-shadow: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:18px 18px 0 0;
  padding:10px 14px 24px; box-shadow: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:99px; background:var(--vx-border-2); }
.vx-sheet-opt { display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:12px; 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:840px; margin:0 auto;
  background:var(--vx-bg-2); border:1px solid var(--vx-border); border-radius:18px 18px 0 0; display:flex; flex-direction:column;
  box-shadow: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; }
.vx-es-sec { font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--vx-muted); margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--vx-border); }
.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:6px; 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 10px 10px; }
.vx-pi-med label { display:flex; flex-direction:column; gap:3px; font-size:10.5px;
  letter-spacing:.02em; text-transform: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:8px; 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:8px; 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 10px 10px; }
.vx-pi-desc label { display:flex; flex-direction:column; gap:3px; font-size:10.5px; flex:1 1 220px; min-width:0;
  letter-spacing:.02em; text-transform: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:8px; 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:8px; 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:99px; font-size:9.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:var(--vx-teal-soft);
  background:rgba(43,212,160,.12); border:1px solid rgba(43,212,160,.28); }

.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:#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:6px; box-shadow: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:10px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
  box-shadow: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:2px; color:rgba(255,255,255,.92); text-shadow: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:10px; 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: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:.3px; }
@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:14px; 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:3px; font-weight:600; color:var(--vx-teal-br); text-transform:uppercase; margin-bottom:8px; }
.vx-tv-title { font-size:clamp(34px,6vw,84px); font-weight:600; line-height:1.02; letter-spacing:-1.5px; text-shadow: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:99px; }
.vx-tv-status.ok { background:rgba(43,212,160,.22); color:#5ff0c2; border:1px solid rgba(43,212,160,.5); }
.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:-1px; 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: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:9px; 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:10px;
  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:10px; transition:background .15s; }
  .vx-appbar-searchbtn:hover { background:var(--vx-surface-2); }
}

.vx-busca-sec { font-size:12px; font-weight:600; letter-spacing:.5px; text-transform: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:16px; 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:7px; overflow:hidden; }
.vx-bar-fill { height:100%; border-radius:7px; 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:10px; 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; }
.vx-pd-badge { position:absolute; top:6px; left:6px; display:inline-flex; align-items:center; gap:3px; padding:2px 8px; border-radius:999px;
  background:var(--vx-teal-br); color:#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:14px; 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:5px; 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:18px; padding:38px 30px; box-shadow: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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#04110c; font-weight:600; text-decoration:none; padding:11px 24px; border-radius:12px; }

/* ───────────────── Banner de template ativo (Galeria) ───────────────── */
.vx-tpl-banner { display:flex; align-items:center; gap:14px; margin:10px 0; padding:12px 16px; border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#c026d3); color:#fff; box-shadow:0 12px 30px -14px rgba(124,58,237,.6); }

/* ───────────────── 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: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:0 18px 60px -16px rgba(29,158,117,.65), 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 rgba(29,158,117,.5); 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:14px;
  border:1px solid rgba(43,212,160,.3); background:linear-gradient(180deg, rgba(43,212,160,.08), rgba(43,212,160,.02)); }
.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:10px;
  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:rgba(43,212,160,.08); }

.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:16px; font-size:14px; line-height:1.5; }
.vx-vbubble.u { align-self:flex-end; background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#04110c; font-weight:500; border-bottom-right-radius:5px; }
.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:5px; }
.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: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:12px; }
.vx-of-item .thumb { width:46px; height:46px; border-radius:8px; 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:8px; 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; }
/* 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:11px; }
.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; }
.vx-of-cur { font-size:13px; font-weight:700; color:var(--vx-teal-soft); }
.vx-of-modo { height:30px; border-radius:8px; 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:8px; 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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#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:8px; }
.vx-es-body::-webkit-scrollbar-thumb:hover { background:#05070b; }
.vx-of-pill { font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; }
.vx-of-pill.down { background:rgba(43,212,160,.16); 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:6px; 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:14px;
  background:linear-gradient(135deg, rgba(43,212,160,.10), rgba(43,212,160,.02));
  border:1px solid rgba(43,212,160,.22); }
.vx-of-detnum { font-size:16px; font-weight:700; letter-spacing:.3px; }
.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:99px; text-transform:uppercase; letter-spacing:.4px; }
.vx-of-detstat.s-disp { background:rgba(43,212,160,.16); 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:0 14px 36px -10px rgba(29,158,117,.7), 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:20px; overflow:hidden;
  box-shadow: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:.2px; }
.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:99px; color:#04110c; font-weight:700; font-size:13px; letter-spacing:.2px;
  background:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); box-shadow:0 6px 18px -8px rgba(29,158,117,.8);
  transition:transform .18s ease, box-shadow .18s ease; }
.vx-appbar-mic:hover { transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(29,158,117,.9); }
.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: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:.2px; }
.vx-cta.mud-button-root:hover { filter:brightness(1.07); transform:translateY(-1px);
  box-shadow: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:18px; 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: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: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,rgba(43,212,160,.18)) 0%, transparent 70%); pointer-events:none; }
.vx-kpi-ico { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:10px;
  background:var(--vx-kpi-ic,rgba(43,212,160,.14)); }
.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:.4px; text-transform: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:-.5px; 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: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:18px; 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:7px 7px 3px 3px; background: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); }

/* 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:#04110c; background: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:5px; background:var(--vx-surface); overflow:hidden; margin-top:5px; }
.vx-rank-fill { height:100%; border-radius:5px; background: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:#04110c; font-weight:700; border-radius:9px; 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:.3px; }

@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:20px; 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,#1D9E75 0%,#2BD4A0 60%,#38bdf8 130%); }
.vx-chapa-head-l { display:flex; align-items:center; gap:12px; }
.vx-chapa-head-ic { width:38px; height:38px; border-radius:11px; 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:99px; }
.vx-chapa-body { padding:14px 4px; display:flex; flex-direction:column; gap:14px; }
.vx-chapa-sec { border-radius:14px; 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:#2BD4A0; }
.vx-chapa-sec.accent-foto  { border-left-color:#f2b441; }
.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-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:9px; 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:12px; 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:1px; }
.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: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: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:0 16px 36px -22px rgba(0,0,0,.7); border-color:rgba(43,212,160,.35); }
.vx-int-cog { position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:8px; 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:11px; line-height:1.35; }
.vx-int-status.on  { background:rgba(43,212,160,.12); 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:10px; 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 10px 10px 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:rgba(43,212,160,.08) !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:9px; font-size:13.5px; font-weight:700; letter-spacing:.2px; color:#fff;
  background:linear-gradient(135deg,#0e9d6a,#16c089); box-shadow: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:8px; 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:22px; 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, rgba(43,212,160,.20) 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:-.4px; 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:14px; 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:.4px; text-transform: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, rgba(43,212,160,.0) 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 3.2s linear infinite; }
.vx-prosp-vortex.spin::before { animation-duration:.9s; }
.vx-prosp-vortex span, .vx-scan-vortex span { position:absolute; border-radius:50%; border:1px solid rgba(43,212,160,.5); inset:8px; opacity:0; animation:vxring 2.4s ease-out infinite; }
.vx-prosp-vortex span:nth-child(2), .vx-scan-vortex span:nth-child(2) { animation-delay:.8s; }
.vx-prosp-vortex span:nth-child(3), .vx-scan-vortex span:nth-child(3) { animation-delay:1.6s; }
.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:0 0 16px 2px rgba(43,212,160,.7); }
@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:.2px; }
.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:14px;
  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:12px;
  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: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:rgba(43,212,160,.16); 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:16px; 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: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: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:8px; 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:#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:rgba(43,212,160,.14); 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:.2px;
  padding:2px 8px; border-radius:99px; background:rgba(43,212,160,.14); color:var(--vx-teal-br); border:1px solid rgba(43,212,160,.3); }

/* ── Pré-cliente no funil (entrou pela prospecção, aguarda o financeiro liberar) ── */
.vx-deal.pre { border-style:dashed !important; border-color:rgba(43,212,160,.45) !important; background:linear-gradient(180deg, rgba(43,212,160,.05), 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:0 0 8px rgba(43,212,160,.6); 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:7px; font-size:11px; font-weight:700; color:#04110c; background: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:#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 rgba(43,212,160,.4); }
.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:-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:12px;
  background:linear-gradient(180deg, rgba(43,212,160,.06), transparent); }
.vx-xray .vx-pdet-kv:last-child { border-bottom:none; }
.vx-pdet-sec { font-size:11.5px; letter-spacing:.4px; text-transform: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:10px; 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:#04110c; grid-column:span 2; justify-content:center; }
.vx-pdet-link.wa .mud-icon-root { color:#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:10px; 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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br)); color:#04110c; }

.vx-map-wrap { position:relative; margin-top:6px; border-radius:16px; 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:5px 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:16px; overflow:hidden; border:1px solid var(--vx-border);
  background:
    radial-gradient(1000px 520px at 72% 16%, rgba(43,212,160,.13), 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:99px; padding:5px 7px; }
.vx-globe-bases .vx-fchip { font-size:11.5px; }
.vxg-lbl { background:rgba(8,12,20,.9); border:1px solid rgba(43,212,160,.4); border-radius:10px; padding:7px 11px;
  color:#e9ecf4; font-size:12px; box-shadow: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:-.5px; color:rgba(233,236,244,.92);
  text-shadow: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 rgba(43,212,160,.3); border-radius: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 rgba(43,212,160,.6); animation:vxlive 1.8s ease-out infinite; }
@keyframes vxlive { 0% { box-shadow:0 0 0 0 rgba(43,212,160,.6); } 100% { box-shadow:0 0 0 12px rgba(43,212,160,0); } }

/* 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:0 0 10px 2px rgba(43,212,160,.85); }
.vxmk .vxmk-pulse { position:absolute; left:50%; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%;
  background:rgba(43,212,160,.5); animation:vxmkpulse 2s ease-out infinite; }
.vxmk.hot .vxmk-dot { background:radial-gradient(circle at 35% 30%, #ffb38a, #ff6a3d 60%); box-shadow: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: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: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: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: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: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: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:0 0 6px #ff6a3d; }
.vx-map-legend i.m { background:#f2b441; box-shadow:0 0 6px rgba(242,180,65,.6); }
.vx-map-legend i.f { background:#38bdf8; box-shadow:0 0 6px #38bdf8; }
.vx-map-legend i.cap { background:#a855f7; box-shadow:0 0 6px #a855f7; }
.vx-map-legend i.cli { background:#22c55e; box-shadow:0 0 6px #22c55e; }

/* "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:12px; padding:6px 8px; }
.vx-map-areabtn { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius: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:rgba(43,212,160,.18); 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:7px; color:#e9ecf4; text-align:center; font-size:12px; }
.vx-map-go { height:30px; padding:0 14px; border-radius:99px; cursor:pointer; font-size:12px; font-weight:700; color:#04110c;
  background: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:12px; box-shadow: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:7px; 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: 12px;
  box-shadow: 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: 8px; 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: rgba(43,212,160,.14) !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: 8px; }
.mud-popover .mud-list::-webkit-scrollbar-thumb { background: var(--vx-surface-3) !important; border-radius: 8px; 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; }
.vx-cred-btn { background:transparent; color:var(--vx-teal-soft); border:1px solid var(--vx-border);
  border-radius:9px; padding:7px 12px; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.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:11px; padding:11px 13px; border:1px solid var(--vx-border); background:var(--vx-surface); }
.vx-cred-box.ok { border-color:rgba(43,212,160,.38); background:rgba(43,212,160,.06); }
.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:uppercase; letter-spacing:.5px; padding:2px 7px;
  border-radius: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:uppercase; letter-spacing:.4px; 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:12px; padding:12px 14px; display:flex; flex-direction:column; }
.vx-pm-kpis span { font-size:11px; text-transform:uppercase; letter-spacing:.5px; 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:10px; padding:5px 10px; }
.vx-pm-tab { border:1px solid var(--vx-border); border-radius:12px; 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:uppercase; letter-spacing:.5px; 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:8px; 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: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:rgba(43,212,160,.08); }
.vx-dm-etapa.agora .n { background:var(--vx-teal); color:#04110c; }
.vx-dm-etapa.feito { color:var(--vx-teal-soft); border-color:rgba(43,212,160,.3); }
.vx-dm-etapa.feito .n { background:rgba(43,212,160,.18); 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:16px; 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:10px; padding:10px 12px; display:flex; flex-direction:column; }
.vx-dm-info span { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; 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:10px; padding:10px 13px; }
.vx-dm-sel .cli span { font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; 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:rgba(43,212,160,.08); border:1px solid rgba(43,212,160,.32); border-radius:10px;
  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:rgba(43,212,160,.1);
  border:1px solid rgba(43,212,160,.38); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.vx-dm-erp span { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--vx-muted); }
.vx-dm-erp b { font-size:26px; font-weight:700; color:var(--vx-teal-br); letter-spacing:-.5px; }
.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:linear-gradient(135deg,var(--vx-teal),var(--vx-teal-br));
  color:#04110c; border:none; border-radius:11px; 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:8px; }
.vx-dp-inp { width:100%; background:#0e1319; color:var(--vx-text,#e6edf3); border:1px solid rgba(255,255,255,.16);
  border-radius:6px; 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:.3px; }
.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: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: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:14px; padding:18px 20px;
  box-shadow: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:9px; }
.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: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:rgba(43,212,160,.07); }
@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:6px; }
}

/* ── 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:.3px; 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. */
.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:1.2px; text-transform:uppercase; color:var(--vx-teal-soft); margin-bottom:9px; }
.vx-cr-cav-lbl .parcial { color:var(--vx-morno); letter-spacing:.6px; 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:.6px; text-transform:uppercase; padding:5px 12px;
  border-radius:999px; cursor:pointer; transition:background .15s; }
.vx-cr-cav-act:hover { background:rgba(43,212,160,.12); }
.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: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:1.2px; text-transform: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:3px;
  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: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:0 2px 10px rgba(0,0,0,.7); letter-spacing:.5px; }
.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:1.4px;
  text-transform:uppercase; padding:4px 34px; }
.vx-cr-chapa.rsv .vx-cr-ch-foto { filter:grayscale(.85) brightness(.72); }
.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:rgba(43,212,160,.12); 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:.8px; text-transform: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:1.2px; text-transform: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: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:4px; 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:3px; }
.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:6px;
  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:8px; overflow:hidden; background:#000;
  box-shadow: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; }

/* ── 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:4px; overflow:hidden; box-shadow: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:1.4px; 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:.6px; } }

/* ── 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: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:1.2px; 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:rgba(43,212,160,.55); }
.vx-cine-escala-palco .humano span { font-size:10.5px; letter-spacing:1px; 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:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:8px; }
.vx-up-fill { height:100%; border-radius:99px; background: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:10px; transition:border-color .15s, background .15s; }
.vx-trilha:hover { border-color:var(--vx-border-2); }
.vx-trilha.on { border-color:var(--vx-teal); background:rgba(43,212,160,.07); }
.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:rgba(43,212,160,.15); }
.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:10px; 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:.5px; color:var(--vx-faint);
  font-variant-numeric:tabular-nums; background:rgba(255,255,255,.05); border-radius: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; }


/* "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:.4px; 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:14px;
  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:8px; 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 6px 6px; }
.vx-capa-i b { position:absolute; top:6px; left:6px; font-size:9px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:#04140e; background:var(--vx-teal-br); padding:2px 7px; border-radius: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:0 0 0 1.5px rgba(43,212,160,.45), 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:10px; 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); }
.vx-pk-dif { min-width:64px; text-align:right; font-size:12px; color:var(--vx-muted); }
.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:rgba(43,212,160,.07); 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:rgba(43,212,160,.10); }
: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:6px; 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:rgba(43,212,160,.55); }
.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:10px; font-size:12.5px; line-height:1.5;
  color:var(--vx-teal-soft); background:rgba(43,212,160,.08); border:1px solid rgba(43,212,160,.28); }
:root.vx-light .vx-pp-pacaviso { color:#0a7f5f; background:rgba(43,212,160,.10); }
.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:10px; background:#fff; border:1px solid rgba(255,255,255,.55);
  box-shadow: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:9px;
  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:99px; font-size:11.5px; font-weight:600; letter-spacing:.2px;
  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:99px; font-size:10.5px; font-weight:700; letter-spacing:.3px;
  color:#fff; background:rgba(190,30,45,.92); box-shadow: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:10px; background:rgba(43,212,160,.06); border:1px solid rgba(43,212,160,.25); 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 rgba(43,212,160,.5); }
                         50% { opacity:.55; box-shadow:0 0 0 5px rgba(43,212,160,0); } }

/* 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:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.4px; 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:10px;
  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:.5px; }
.vx-chave-alerta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  padding:10px 12px; border-radius:10px; 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:11px;
  color:var(--vx-teal-br); background:rgba(43,212,160,.08); border:1px solid rgba(43,212,160,.32);
  transition: background .15s, border-color .15s, transform .12s; }
.vx-gal-mais:hover:not(:disabled) { background:rgba(43,212,160,.15); 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:7px;
  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:2px; 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:6px; 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: #2bd4a0 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. */
.vx-of-refresh { margin-left:auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22); color:#fff; cursor:pointer;
  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:.3px; }
.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:11px;
  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:5px; }

/* ══════════════════════════════════════════════════════════════════════════════
   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; }
  .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; }

  /* 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. */
  .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; }
  .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; }
  .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: 4 / 3; }
  .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; }
  .mud-appbar { left: 0 !important; width: 100% !important; }
}

/* 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; }
  .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:.14em; text-transform:uppercase; color:#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:uppercase; letter-spacing:.03em; color:var(--vx-faint); margin-right:2px; }
.vx-sel-modo button { font:inherit; font-size:12.5px; padding:5px 12px; border-radius:99px; cursor:pointer;
  color:var(--vx-muted); background:var(--vx-surface); border:1px solid var(--vx-border); }
.vx-sel-modo button.on { color:#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:#04110c;
  background:var(--vx-teal); padding:2px 9px; border-radius: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:rgba(43,212,160,.07); border:1px solid rgba(43,212,160,.22); border-radius:10px;
  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; }
/* 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; }
.vx-pi-grupo .tot { margin-left:auto; color:var(--vx-teal-soft); font-weight:600; }

/* 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:uppercase; letter-spacing:.02em; 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:8px; 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:8px; 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:99px;
  font-size:10.5px; font-weight:700; letter-spacing:.4px; white-space:nowrap;
  color:#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; } }
.vx-gal-flow > .vx-mat-h, .vx-gal-flow > .vx-gcard { animation: vx-row-in .28s ease-out both; }
.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: 2px;
  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:-.02em; margin:0 0 4px; }
.vx-res-sub { color:var(--vx-muted); font-size:13px; max-width:620px; }

.vx-res-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:16px; }
.vx-res-card {
  background:var(--vx-surface); border:1px solid var(--vx-border);
  border-radius:12px; 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:9px; 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:7px; 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:11px; 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:7px; 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:.02em;
  background:rgba(255,255,255,.05); border:1px solid var(--vx-border);
  color:var(--vx-muted); padding:1px 6px; border-radius:5px;
}
.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:11px; 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:7px; 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 7px 7px;
}
.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:.02em;
  background:rgba(255,255,255,.05); border:1px solid var(--vx-border);
  color:var(--vx-muted); padding:1px 6px; border-radius:5px;
}
.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:8px;
  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: 10px;
}
.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: 8px; 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: 14px; 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: 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: 10px;
  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: 9px;
  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: 8px;
  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: 8px; 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: 6px; 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 10px 10px 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 3px 3px 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); }
/* 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: 3px; 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: 8px;
  font-size: 12px; line-height: 1.4;
  color: var(--vx-teal-soft);
  background: var(--vx-teal-glow);
  border: 1px solid rgba(93,202,165,.22);
}

/* 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: 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 cobre a tela inteira para fechar ao clicar 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. */
.vx-avisos-capa { position: fixed; inset: 0; 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: 12px; box-shadow: 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); }
.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: 14px;
  background: linear-gradient(135deg, var(--vx-teal), var(--vx-teal-br));
  color: var(--vx-bg);
  box-shadow: 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: uppercase; letter-spacing: .06em; opacity: .8; }
.vx-venda-num { font-family: var(--vx-display); font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
@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: 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: 999px; border: 0; cursor: pointer;
  background: var(--vx-teal-br); color: var(--vx-bg);
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 8px 26px var(--vx-teal-glow);
}
.vx-chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px;
  border-radius: 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: 16px; overflow: hidden;
  background: var(--vx-surface); border: 1px solid var(--vx-border-2);
  box-shadow: 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: 12px; 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: 4px; }
.vx-chat-msg.ele { align-self: flex-start; background: var(--vx-surface-3); color: var(--vx-text); border-bottom-left-radius: 4px; }
.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: 10px; 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: 10px; 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:12px;
  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:0 0 8px rgba(242,180,65,.55); }
.vx-orb-calor.c-m { background:#8b93a7; }
.vx-orb-calor.c-f { background:#5d7fb4; box-shadow: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:12px; padding:10px; }
.vx-orb-col .cab { display:flex; align-items:center; justify-content:space-between; font-size:13px; margin:0 2px 10px; }
.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; }
.vx-orb-card {
  background:var(--vx-surface-2); border:1px solid var(--vx-border); border-radius:10px;
  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:7px; 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:-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:.05em; text-transform: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:9px; 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:8px; 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:9px; 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:9px; 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) {
  .vx-orb-kanban { flex-direction:column; }
  .vx-orb-col { min-width:0; }
}

/* ══ 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: 14px; overflow: hidden;
  background:
    radial-gradient(ellipse 42% 40% at 50% 50%, rgba(43,212,160,.10), 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: 9px; 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: 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 #2bd4a0; }
.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; margin: 8px 0 2px; padding: 5px 11px;
  border: 1px solid var(--vx-border); border-radius: 9px; 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: #2bd4a0; }

/* 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: 9px; padding: 7px 10px; max-width: 200px;
  font-size: 11.5px; line-height: 1.4; color: #e9ecf4;
  box-shadow: 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: 12px;
}
.vx-orb-conv .tit { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: 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: 5px; overflow: hidden; }
.vx-orb-conv .lin .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--vx-teal), var(--vx-teal-br)); border-radius: 5px; }
.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; }
}

/* ══ 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: 6px; 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: 6px; width: 24px; height: 24px; cursor: pointer; font-weight: 800; }

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

.vx-orb-corrigir { border: 1px solid var(--vx-border); background: transparent; color: var(--vx-muted);
  border-radius: 8px; padding: 5px 11px; font-size: 11.5px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.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: 9px; 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, rgba(43,212,160,.07), rgba(43,212,160,.02)), 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: .04em; text-transform: uppercase;
  color: var(--vx-bg); background: var(--vx-teal-br);
  padding: 3px 9px 3px 11px; border-radius: 0 16px 0 11px;
}
.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: 6px; 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: 12px; 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: 9px; 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: 12px; 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: 9px; 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: 12px;
}
.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: 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: 4px; 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: 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: rgba(43,212,160,.10); border-color: rgba(43,212,160,.45); color: var(--vx-teal); cursor: pointer; }
.vx-gam-nivel.on:hover:not(:disabled) { background: rgba(43,212,160,.20); 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: 5px; 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: 6px; 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; }
/* 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:8px; 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: 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: 14px; 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: uppercase; letter-spacing: .09em; color: #a9b6c7; }
.vx-cabine-topo b { font-size: 26px; font-weight: 700; letter-spacing: -.6px; }
.vx-cabine-topo .sub { font-size: 11.5px; color: #b3bfcf; margin-top: 1px; }
.vx-cabine-hero b { color: #e9ecf4; }
.vx-cabine-passo b { color: #2bd4a0; }
/* 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: 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: 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: 12px; 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: #2bd4a0; 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: 12px; padding: 9px 12px; backdrop-filter: blur(6px);
}
.vx-cabine-plc .tt { font-size: 10.5px; color: #9aa7b8; letter-spacing: .02em; 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: #2bd4a0; }
.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: 7px;
  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, rgba(43,212,160,.14), rgba(43,212,160,.14)),
    linear-gradient(180deg, rgba(43,212,160,.14), rgba(43,212,160,.14)),
    linear-gradient(180deg, rgba(43,212,160,.14), rgba(43,212,160,.14));
  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: 2px; 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: .07em;
  text-transform: 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: rgba(43,212,160,.85); 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 rgba(43,212,160,.6)); }
.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: 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: 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 */
}

/* ══ 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 rgba(43,212,160,.22);
  border-radius: 16px; padding: 26px 26px 22px; text-align: center;
  box-shadow: 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: #04110c;
  border-radius: 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 rgba(43,212,160,.18); 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:rgba(43,212,160,.05); border-radius:8px; }
.vx-pd-item.cav:hover { background:rgba(43,212,160,.10); }
.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: 9px;
  background: rgba(43,212,160,.05); 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: 12px; }
@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: 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: 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:12px; box-shadow: 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: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:14px; }
.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; }


/* 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:11px; 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:.06em; text-transform:uppercase; color:#04110c; background:#f2b441;
  padding:2px 6px; border-radius: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:10px; 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:6px; 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:14px; background:#0e1116; box-shadow: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:10px; 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:6px;
  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); }
.vx-rt-barra select { background:transparent; border:1px solid var(--vx-border); border-radius:6px;
  color:var(--vx-muted); font:inherit; font-size:11.5px; height:26px; padding:0 4px; cursor:pointer; outline:none; }
.vx-rt-barra input[type=color] { width:26px; height:26px; padding:0; border:1px solid var(--vx-border);
  border-radius:6px; 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:96px; max-height:340px; 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; }
: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:12px; }
.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:uppercase; letter-spacing:.4px; color:var(--vx-teal-soft);
  border:1px solid var(--vx-border); border-radius:5px; 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:11px; 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:rgba(43,212,160,.13); border-radius:9px; padding:1px 6px; margin-left:-4px; }

/* ══ ENVIAR PROPOSTA — destinatarios de tres fontes numa lista so ══════════════════════════ */
.vx-env-sec { font-size:11px; text-transform:uppercase; letter-spacing:.6px; 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:10px; 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: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:10px; 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:uppercase; letter-spacing:.7px; 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:11px; 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:rgba(43,212,160,.13); color:var(--vx-teal-soft); }
.vx-intel-lista { display:flex; flex-direction:column; margin-top:6px;
  border:1px solid var(--vx-border); border-radius:11px; 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); }

/* 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 rgba(43,212,160,.28); background:rgba(43,212,160,.10);
  border-radius:6px; 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:999px; }
.vx-pp-unid button { background:transparent; border:none; border-radius:999px; cursor:pointer;
  font:inherit; font-size:11px; letter-spacing:.3px; 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:.2px; 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:13px; 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:.5px;
  text-transform: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:uppercase;
  letter-spacing:.6px; 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:rgba(43,212,160,.10); }
.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:uppercase; letter-spacing:.5px;
  color:#e0a03a; text-decoration:none; display:inline-block; }
.vx-tec-tab td.st .ok { color:var(--vx-teal-br, #2bd4a0); font-weight:700; }
.vx-tec-pegar { display:block; width:calc(100% - 30px); margin:11px 15px 14px; padding:9px;
  border:1px solid rgba(43,212,160,.45); border-radius:9px; background:transparent;
  color:#2bd4a0; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.vx-tec-pegar:hover { background:rgba(43,212,160,.10); }
.vx-tec-pegar.on { background:rgba(43,212,160,.16); 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:8px; 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:7px;
  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:8px; 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:12px; box-shadow:0 10px 30px -18px rgba(0,0,0,.5);
  border-bottom:3px solid #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:.3px;
  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:8px; overflow:hidden; }
.vx-tec-timbre .grp button { background:#fff; border:none; cursor:pointer; font:inherit;
  font-size:11px; font-weight:600; letter-spacing:.4px; 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:#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:8px; 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:5px; 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:7px;
  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:9px; 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:7px; padding:4px 8px; }
.vx-pi-mid:hover { color:var(--vx-teal-soft); border-color:var(--vx-teal-soft); }
.vx-pi-mid.on { background:rgba(43,212,160,.12); 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:10px; }
.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: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:12px;
  background:#000; display:block; }
.vx-cr-cav-midia img { height:120px; width:auto; max-width:100%; object-fit:cover;
  border-radius:10px; 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:.4px;
  text-transform: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 rgba(43,212,160,.45); 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:999px;
  background:var(--vx-teal-br, #2bd4a0); color:#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%,
             rgba(43,212,160,.9) 60%, rgba(43,212,160,.28) 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:9px;
  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 rgba(43,212,160,.20);
  transition:box-shadow .18s, transform .18s; }
.vx-tec-lote .cab .capa:hover { transform:scale(1.06);
  box-shadow:0 0 0 1px rgba(43,212,160,.6), 0 0 0 4px rgba(43,212,160,.28); }
/* selo de "irmao de proposta publica" no card do cockpit */
.vx-pc-irmao { font-size:9.5px; letter-spacing:.3px; color:#c084fc;
  background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.32);
  border-radius:5px; padding:1px 5px; white-space:nowrap; }