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

@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; }
.vx-login-brand h1 b { color: var(--vx-teal-br); 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-teal-br); 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;} }

/* ── 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); }
.vx-chip.on { background: var(--vx-teal); border-color: var(--vx-teal); color:#04110c; font-weight:500; }
.vx-chip.on.warn { background: var(--vx-morno); border-color: var(--vx-morno); }
.vx-chip.on.err  { background: var(--vx-frio);  border-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; }

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

.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; }

.vx-floatbar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1300;
  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; }

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

.vx-lightbox { position: fixed; inset:0; z-index: 200000; background: rgba(0,0,0,.94);
  display:flex; align-items:center; justify-content:center; cursor: zoom-out; animation: vx-fade .2s ease; }
.vx-lightbox img { max-width: 96vw; max-height: 94vh; object-fit:contain; border-radius: 10px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.9); }

/* ====================== 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-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); } }
@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; }
.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; }
.vx-pedido-drawer { position:fixed; top:0; right:0; bottom:0; width:440px; 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) */
.vx-pd-docs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; }
.vx-pd-docs .l { font-size:10px; letter-spacing:.5px; text-transform:uppercase; color: var(--vx-faint); margin-right: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); }
.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); }
/* 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); }
.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 { width:28px; height:28px; border-radius:6px; background-size:cover; background-position:center; flex:0 0 auto; }
: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; }
.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); }
.vx-map { height:min(64vh, 640px); width:100%; background:#0a0f1a; }

/* 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; 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 vira uma pilula miuda na MESMA linha do numero do pedido — assim ele identifica
   sem gastar uma linha inteira do cabecalho. */
.vx-pd-doc { 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-doc { 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); }
.vx-erp-dot { 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-dot { 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; }