/* ══════════════════════════════════════════════════════════════════
   Ventas por WhatsApp — interfaz
   Hereda los colores de la app anfitriona (variables --bg-card, --text-primary…)
   y funciona sola con sus propios valores si la app no las define.
   ══════════════════════════════════════════════════════════════════ */
.vw {
  --vw-card: var(--bg-card, #fff);
  --vw-app: var(--bg-app, #f6f5fb);
  --vw-tx: var(--text-primary, #1c1830);
  --vw-tx2: var(--text-secondary, #6b6584);
  --vw-tx3: var(--text-muted, #9691ac);
  --vw-bd: var(--border, #e9e6f5);
  --vw-bd2: var(--border-strong, #d8d3ec);
  --vw-hv: var(--bg-hover, #f4f2fb);
  --vw-brand: var(--brand-primary, #5b3df0);
  --vw-blue: #0a84ff;
  --vw-ok: #16a34a;
  --vw-warn: #d97706;
  --vw-bad: #e0453b;
  --vw-soft: color-mix(in srgb, var(--vw-tx) 5%, transparent);
  --vw-soft2: color-mix(in srgb, var(--vw-tx) 8%, transparent);
  --vw-bubble-in: var(--vw-card);
  --vw-bubble-out: #0a84ff;
  --vw-r: 18px;
  --vw-shadow: 0 1px 2px rgba(20,16,40,.05), 0 10px 30px -18px rgba(20,16,40,.35);
  --vw-pop: 0 18px 50px -14px rgba(20,16,40,.35), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 7%, transparent);
  --st-new: #0a84ff; --st-interested: #af52de; --st-closing: #ff9f0a; --st-won: #22c55e; --st-delivered: #14b8a6; --st-lost: #8e8e93;
  font-family: var(--font, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif);
  color: var(--vw-tx);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.011em;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .vw { --vw-bubble-out: #0b6bd8; --vw-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8); }
.vw *, .vw *::before, .vw *::after { box-sizing: border-box; }
.vw button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vw input, .vw textarea, .vw select { font: inherit; color: var(--vw-tx); }
.vw a { color: inherit; text-decoration: none; }
.vw svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }
.vw .sm svg.i, .vw svg.i.sm { width: 15px; height: 15px; }

/* ── contenedor principal ─────────────────────────────────────────── */
.vw-app { display: flex; flex-direction: column; background: var(--vw-card); border-radius: 22px; box-shadow: var(--vw-shadow); border: 1px solid var(--vw-bd); overflow: hidden; min-height: 520px; position: relative; }
.vw-top { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--vw-bd); min-height: 64px; }
.vw-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vw-title .wa { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(145deg, #34d399, #16a34a); box-shadow: 0 6px 14px -6px rgba(22,163,74,.6); flex: none; }
.vw-title h1 { font-size: 19px; font-weight: 750; letter-spacing: -.03em; margin: 0; white-space: nowrap; }
.vw-title small { display: block; font-size: 12px; color: var(--vw-tx3); font-weight: 500; letter-spacing: 0; }
.vw-lines { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; }
.vw-lines::-webkit-scrollbar { display: none; }
.vw-lchip { height: 32px; padding: 0 12px 0 8px; border-radius: 16px; border: 1px solid var(--vw-bd); background: transparent; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--vw-tx2); white-space: nowrap; flex: none; transition: background .15s, color .15s; }
.vw-lchip:hover { background: var(--vw-hv); }
.vw-lchip.on { background: var(--vw-tx); color: var(--vw-card); border-color: var(--vw-tx); }
.vw-lchip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vw-tx3); box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 0%, transparent); }
.vw-lchip .dot.ok { background: #22c55e; } .vw-lchip .dot.warn { background: #f59e0b; } .vw-lchip .dot.bad { background: #ef4444; }
.vw-lchip .ct { font-size: 11px; font-weight: 750; color: #ef4444; }
.vw-lchip.on .ct { color: #ff8a80; }
.vw-lchip .sw { width: 10px; height: 10px; border-radius: 3px; }
.vw-topr { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.vw-kpi { text-align: right; line-height: 1.15; padding-right: 4px; }
.vw-kpi span { display: block; font-size: 11.5px; color: var(--vw-tx3); font-weight: 600; }
.vw-kpi b { font-size: 18px; font-weight: 760; letter-spacing: -.025em; color: #16a34a; font-variant-numeric: tabular-nums; }
.vw-seg { display: inline-flex; background: var(--vw-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.vw-seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 650; color: var(--vw-tx2); white-space: nowrap; }
.vw-seg button.on { background: var(--vw-card); color: var(--vw-tx); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.vw-ib { width: 36px; height: 36px; border-radius: 11px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--vw-tx2); position: relative; flex: none; transition: background .15s; }
.vw-ib:hover, .vw-ib.on { background: var(--vw-soft); color: var(--vw-tx); }
.vw-ib .bdg { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 8px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 750; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--vw-card); }

/* ── embudo (etapas) ──────────────────────────────────────────────── */
.vw-pipe { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--vw-bd); overflow-x: auto; scrollbar-width: none; flex: none; }
.vw-pipe::-webkit-scrollbar { display: none; }
.vw-stg { border: 0; background: transparent; padding: 11px 14px 10px; text-align: left; position: relative; min-width: 128px; flex: none; border-radius: 12px 12px 0 0; }
.vw-stg:hover { background: var(--vw-hv); }
.vw-stg .n { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 650; color: var(--vw-tx2); white-space: nowrap; }
.vw-stg .n i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.vw-stg .v { display: flex; align-items: baseline; gap: 7px; margin-top: 3px; white-space: nowrap; }
.vw-stg .v b { font-size: 19px; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.vw-stg .v span { font-size: 12.5px; color: var(--vw-tx3); font-weight: 550; font-variant-numeric: tabular-nums; }
.vw-stg.on::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--vw-tx); }
.vw-stg + .vw-stg::before { content: ''; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 1px; background: var(--vw-bd); }
.vw-stg.today .n { color: #c2410c; }
.vw-stg.today .v b { color: #c2410c; }

/* ── cuerpo ───────────────────────────────────────────────────────── */
.vw-body { flex: 1; display: flex; min-height: 0; position: relative; }
.vw-list { width: 352px; flex: none; border-right: 1px solid var(--vw-bd); display: flex; flex-direction: column; min-height: 0; background: var(--vw-card); }
.vw-lhead { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 9px; }
.vw-search { display: flex; align-items: center; gap: 8px; height: 38px; border-radius: 11px; background: var(--vw-soft); padding: 0 12px; color: var(--vw-tx3); }
.vw-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; min-width: 0; height: 100%; }
.vw-search input::placeholder { color: var(--vw-tx3); }
.vw-lrow { display: flex; gap: 8px; align-items: center; }
.vw-lrow .vw-seg { flex: 1; min-width: 0; }
.vw-lrow .vw-seg button { flex: 1 1 auto; padding: 6px 3px; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vw .vw-new { width: 38px; height: 34px; border-radius: 10px; border: 0; background: var(--vw-tx); color: var(--vw-card); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vw-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 12px; }
.vw-it { display: flex; gap: 12px; padding: 11px 14px; cursor: pointer; position: relative; border: 0; background: transparent; width: 100%; text-align: left; transition: background .12s; }
.vw-it:hover { background: var(--vw-hv); }
.vw-it.on { background: color-mix(in srgb, var(--vw-blue) 9%, transparent); }
.vw-it.on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vw-blue); }
.vw-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 650; font-size: 15px; color: #fff; position: relative; letter-spacing: 0; }
.vw-av.sm { width: 34px; height: 34px; font-size: 12.5px; }
.vw-av .ln { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--vw-card); }
.vw-it .m { flex: 1; min-width: 0; }
.vw-it .a { display: flex; align-items: center; gap: 8px; }
.vw-it .a b { flex: 1; font-size: 14.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-it .a em { font-style: normal; font-size: 14px; font-weight: 720; font-variant-numeric: tabular-nums; }
.vw-it .a time { font-size: 11.5px; color: var(--vw-tx3); font-weight: 550; flex: none; }
.vw-it .a time.new { color: var(--vw-ok); font-weight: 700; }
.vw-it p { margin: 2px 0 0; font-size: 13px; color: var(--vw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-it p .me { color: var(--vw-tx3); }
.vw-it .c { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 11.5px; color: var(--vw-tx3); font-weight: 600; min-width: 0; }
.vw-sp { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; white-space: nowrap; }
.vw-sp i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.vw-who { width: 18px; height: 18px; border-radius: 50%; font-size: 9px; font-weight: 750; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vw-un { margin-left: auto; min-width: 19px; height: 19px; border-radius: 10px; background: var(--vw-ok); color: #fff; font-size: 11px; font-weight: 750; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; flex: none; }
.vw-flag { color: #c2410c; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-empty { padding: 40px 24px; text-align: center; color: var(--vw-tx3); font-size: 14px; line-height: 1.5; }
.vw-empty b { display: block; color: var(--vw-tx); font-size: 16px; margin-bottom: 4px; }
.vw-more { display: block; margin: 8px auto 0; border: 0; background: var(--vw-soft); border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 650; color: var(--vw-tx2); }

/* ── conversación ─────────────────────────────────────────────────── */
.vw-conv { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--vw-app); position: relative; }
.vw-ch { display: flex; align-items: center; gap: 11px; padding: 10px 16px; background: var(--vw-card); border-bottom: 1px solid var(--vw-bd); min-height: 62px; flex: none; }
.vw-ch .back { display: none; }
.vw-ch .who { min-width: 0; flex: 1; cursor: pointer; }
.vw-ch .who b { display: block; font-size: 15.5px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-ch .who span { display: block; font-size: 12.5px; color: var(--vw-tx3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-ch .acts { display: flex; align-items: center; gap: 6px; flex: none; }
.vw-steps { display: flex; align-items: center; flex: none; }
.vw-sx { border: 0; background: transparent; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--vw-tx3); padding: 6px 4px; border-radius: 8px; white-space: nowrap; }
.vw-sx:hover { color: var(--vw-tx); }
.vw-sx i { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--vw-bd2); background: var(--vw-card); flex: none; }
.vw-sx span { display: none; }
.vw-sx.now span, .vw-sx:hover span { display: inline; }
.vw-sx.done { color: var(--vw-tx2); } .vw-sx.done i { background: var(--vw-tx); border-color: var(--vw-tx); }
.vw-sx.now { color: var(--vw-tx); }
.vw-sx.now i { border-color: var(--c, var(--vw-tx)); background: var(--c, var(--vw-tx)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--vw-tx)) 20%, transparent); }
.vw-sl { width: 16px; height: 1.5px; background: var(--vw-bd2); flex: none; }
.vw-sl.done { background: var(--vw-tx); }
.vw-pill { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--vw-bd); background: var(--vw-card); font-size: 13px; font-weight: 650; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vw-pill:hover { background: var(--vw-hv); }
.vw-pill.dark { background: var(--vw-tx); color: var(--vw-card); border-color: var(--vw-tx); }
.vw-pill .dot { width: 8px; height: 8px; border-radius: 50%; }

.vw-msgs { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 10px; display: flex; flex-direction: column; gap: 4px; }
.vw-msgs > * { flex: none; }
.vw-day { align-self: center; font-size: 11.5px; font-weight: 650; color: var(--vw-tx3); background: var(--vw-card); padding: 4px 11px; border-radius: 9px; margin: 10px 0 6px; box-shadow: 0 0 0 1px var(--vw-bd); }
.vw-row { display: flex; flex-direction: column; max-width: min(68%, 560px); }
.vw-row.in { align-self: flex-start; }
.vw-row.out { align-self: flex-end; align-items: flex-end; }
.vw-row.gap { margin-top: 8px; }
.vw-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--vw-tx3); margin: 0 6px 3px; display: flex; align-items: center; gap: 5px; }
.vw-b { padding: 8px 12px 7px; border-radius: var(--vw-r); font-size: 14.5px; line-height: 1.42; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; position: relative; }
.vw-row.in .vw-b { background: var(--vw-bubble-in); box-shadow: 0 0 0 1px var(--vw-bd); border-bottom-left-radius: 6px; }
.vw-row.out .vw-b { background: var(--vw-bubble-out); color: #fff; border-bottom-right-radius: 6px; }
.vw-row.out.auto .vw-b { background: color-mix(in srgb, #af52de 14%, var(--vw-card)); color: var(--vw-tx); box-shadow: 0 0 0 1px color-mix(in srgb, #af52de 22%, transparent); }
.vw-row.out.campaign .vw-b { background: color-mix(in srgb, #ff9f0a 13%, var(--vw-card)); color: var(--vw-tx); box-shadow: 0 0 0 1px color-mix(in srgb, #ff9f0a 25%, transparent); }
.vw-row.out.phone .vw-b { background: color-mix(in srgb, #22c55e 85%, #000); color: #fff; }
.vw-b a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 2px; }
.vw-row.in .vw-b a { color: var(--vw-blue); text-decoration: none; }
.vw-b .meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -3px 10px; font-size: 10.5px; opacity: .72; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-b .meta svg { width: 14px; height: 14px; }
.vw-b .meta .rd { color: #7dd3fc; opacity: 1; }
.vw-row.auto .vw-b .meta .rd, .vw-row.campaign .vw-b .meta .rd { color: var(--vw-blue); }
.vw-b strong { font-weight: 700; }
.vw-b del { opacity: .7; }
.vw-b code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.vw-fail { display: flex; align-items: center; gap: 6px; margin: 3px 4px 0; font-size: 11.5px; color: var(--vw-bad); font-weight: 650; }
.vw-fail button { border: 0; background: color-mix(in srgb, var(--vw-bad) 12%, transparent); color: var(--vw-bad); border-radius: 7px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; }
.vw-row.note { align-self: center; max-width: min(76%, 600px); align-items: stretch; }
.vw-row.note .vw-b { background: color-mix(in srgb, #f59e0b 13%, var(--vw-card)); color: var(--vw-tx); border-radius: 14px; box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 35%, transparent); font-size: 13.5px; }
.vw-sys { align-self: center; font-size: 12px; font-weight: 600; color: var(--vw-tx2); background: var(--vw-soft); padding: 5px 12px; border-radius: 10px; margin: 6px 0; text-align: center; max-width: 86%; }
.vw-media { display: block; border-radius: 14px; overflow: hidden; margin: -4px -8px 6px; max-width: 320px; cursor: zoom-in; background: var(--vw-soft); }
.vw-media img, .vw-media video { display: block; width: 100%; max-height: 360px; object-fit: cover; }
.vw-row.out .vw-media { margin: -4px -8px 6px; }
.vw-sticker { width: 130px; height: 130px; object-fit: contain; display: block; }
.vw-audio { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.vw-audio button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: color-mix(in srgb, currentColor 14%, transparent); display: flex; align-items: center; justify-content: center; flex: none; }
.vw-audio .bar { flex: 1; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 22%, transparent); position: relative; overflow: hidden; cursor: pointer; }
.vw-audio .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: currentColor; border-radius: 4px; }
.vw-audio small { font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; min-width: 34px; }
.vw-doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, currentColor 9%, transparent); margin: -2px -4px 4px; min-width: 220px; }
.vw-doc .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--vw-card); color: var(--vw-bad); display: flex; align-items: center; justify-content: center; flex: none; font-size: 10px; font-weight: 800; }
.vw-doc b { font-size: 13.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.vw-doc span { font-size: 11.5px; opacity: .7; }
.vw-card { width: 286px; border-radius: 18px; overflow: hidden; background: var(--vw-card); box-shadow: 0 0 0 1px var(--vw-bd), 0 10px 24px -18px rgba(0,0,0,.4); color: var(--vw-tx); white-space: normal; }
.vw-row.out .vw-card { border-bottom-right-radius: 6px; }
.vw-card img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--vw-soft); }
.vw-card .bd { padding: 11px 13px 12px; }
.vw-card .k { font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--vw-tx3); }
.vw-card b { display: block; font-size: 14.5px; font-weight: 680; margin-top: 2px; }
.vw-card .pr { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; }
.vw-card .pr span { font-size: 17px; font-weight: 760; letter-spacing: -.02em; }
.vw-card .pr s { font-size: 12.5px; color: var(--vw-tx3); }
.vw-card .lk { margin-top: 8px; font-size: 12px; color: var(--vw-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.vw-card .ft { display: flex; align-items: center; justify-content: space-between; padding: 0 13px 11px; font-size: 11px; color: var(--vw-tx3); }
.vw-card.pay .tot { font-size: 26px; font-weight: 780; letter-spacing: -.035em; margin-top: 4px; }
.vw-card.order .bd { background: linear-gradient(180deg, color-mix(in srgb, #22c55e 12%, transparent), transparent); }
.vw-card.order pre { font: inherit; font-size: 13.5px; white-space: pre-wrap; margin: 6px 0 0; color: var(--vw-tx); line-height: 1.45; }
.vw-tk { display: inline-flex; align-items: center; gap: 4px; }
.vw-loc { display: flex; gap: 10px; align-items: center; }
.vw-loc .pin { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, #ef4444 14%, transparent); color: #ef4444; display: flex; align-items: center; justify-content: center; flex: none; }
.vw-quick { margin: 4px 6px 0; display: flex; gap: 6px; }
.vw-quick button { border: 0; background: var(--vw-card); box-shadow: 0 0 0 1px var(--vw-bd); border-radius: 9px; padding: 4px 10px; font-size: 12px; font-weight: 650; color: var(--vw-tx); display: inline-flex; align-items: center; gap: 5px; }
.vw-quick button:hover { background: var(--vw-hv); }

.vw-intent { align-self: center; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 13px; border-radius: 14px; background: var(--vw-card); box-shadow: 0 0 0 1px color-mix(in srgb, #ff9f0a 40%, transparent), 0 10px 26px -18px rgba(255,159,10,.9); font-size: 13px; color: var(--vw-tx2); margin: 10px 0 4px; max-width: 94%; }
.vw-intent b { color: var(--vw-tx); font-weight: 680; }
.vw-intent .sp { color: #ff9f0a; }
.vw-intent button { border: 0; background: var(--vw-tx); color: var(--vw-card); font-weight: 680; font-size: 12.5px; padding: 7px 12px; border-radius: 10px; white-space: nowrap; }
.vw-intent.paid { box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 45%, transparent), 0 10px 26px -18px rgba(34,197,94,.9); }
.vw-intent.paid .sp { color: #22c55e; }
.vw-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; background: var(--vw-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--vw-bd); }
.vw-jump { position: absolute; right: 22px; bottom: 150px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--vw-card); box-shadow: var(--vw-pop); display: flex; align-items: center; justify-content: center; z-index: 3; }

/* ── sugerencias y redacción ──────────────────────────────────────── */
.vw-sug { padding: 10px 16px 0; background: var(--vw-card); border-top: 1px solid var(--vw-bd); flex: none; }
.vw-sug .h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--vw-tx3); font-weight: 550; margin-bottom: 8px; white-space: nowrap; overflow: hidden; }
.vw-sug .h b { color: var(--vw-tx); font-weight: 680; }
.vw-sug .h kbd { margin-left: auto; font: inherit; font-size: 11px; color: var(--vw-tx3); border: 1px solid var(--vw-bd); border-radius: 6px; padding: 1px 6px; }
.vw-cards { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vw-cards::-webkit-scrollbar { display: none; }
.vw-sc { flex: 1 0 0; min-width: 190px; max-width: 340px; text-align: left; border: 0; border-radius: 14px; padding: 9px 12px 10px; background: var(--vw-card); box-shadow: 0 0 0 1px var(--vw-bd); transition: box-shadow .15s, transform .15s; }
.vw-sc:hover { box-shadow: 0 0 0 1.5px var(--vw-tx2); }
.vw-sc:active { transform: scale(.985); }
.vw-sc.top { box-shadow: 0 0 0 1.5px var(--vw-tx); }
.vw-sc .t { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--vw-tx3); }
.vw-sc .t code { margin-left: auto; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 650; color: var(--vw-blue); }
.vw-sc p { margin: 5px 0 0; font-size: 13px; line-height: 1.38; color: var(--vw-tx); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vw-comp { padding: 10px 16px 14px; background: var(--vw-card); flex: none; position: relative; }
.vw-sug + .vw-comp { padding-top: 8px; }
.vw-bar { display: flex; align-items: flex-end; gap: 8px; border-radius: 22px; box-shadow: 0 0 0 1px var(--vw-bd2); padding: 5px 5px 5px 6px; background: var(--vw-card); transition: box-shadow .15s; }
.vw-bar:focus-within { box-shadow: 0 0 0 1.5px var(--vw-tx2); }
.vw-bar.note { box-shadow: 0 0 0 1.5px #f59e0b; background: color-mix(in srgb, #f59e0b 7%, var(--vw-card)); }
.vw-bar textarea { flex: 1; border: 0; outline: 0; background: transparent; resize: none; font-size: 15px; line-height: 1.4; padding: 8px 4px; max-height: 160px; min-height: 38px; }
.vw-bar textarea::placeholder { color: var(--vw-tx3); }
.vw-tool { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--vw-tx2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.vw-tool:hover, .vw-tool.on { background: var(--vw-soft); color: var(--vw-tx); }
.vw-tool.on.note { color: #d97706; }
.vw-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--vw-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: transform .12s, opacity .12s; }
.vw-send:disabled { opacity: .35; }
.vw-send:active { transform: scale(.92); }
.vw-bar.note .vw-send { background: #f59e0b; }
.vw-hint { font-size: 11.5px; color: var(--vw-tx3); margin: 6px 6px 0; display: flex; gap: 10px; }
.vw-hint b { color: #d97706; }

/* ── menús emergentes ─────────────────────────────────────────────── */
.vw-pop { position: absolute; z-index: 40; background: var(--vw-card); border-radius: 16px; box-shadow: var(--vw-pop); padding: 6px; max-height: 380px; overflow-y: auto; overscroll-behavior: contain; animation: vwIn .14s ease-out; }
@keyframes vwIn { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.vw-pop .h { font-size: 11px; font-weight: 700; color: var(--vw-tx3); letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px 6px; display: flex; justify-content: space-between; }
.vw-qi { display: flex; gap: 12px; padding: 9px 10px; border-radius: 11px; align-items: flex-start; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: left; }
.vw-qi:hover, .vw-qi.on { background: var(--vw-hv); }
.vw-qi code { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--vw-blue); min-width: 86px; padding-top: 1px; }
.vw-qi .x { min-width: 0; flex: 1; }
.vw-qi .x b { display: block; font-size: 13px; font-weight: 650; }
.vw-qi .x span { display: block; font-size: 12.5px; color: var(--vw-tx2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-qi .k { font-size: 10.5px; font-weight: 700; color: var(--vw-tx3); background: var(--vw-soft); padding: 2px 7px; border-radius: 6px; flex: none; }
.vw-menu { min-width: 220px; }
.vw-mi { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 550; text-align: left; }
.vw-mi:hover { background: var(--vw-hv); }
.vw-mi .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.vw-mi.danger { color: var(--vw-bad); }
.vw-mi.on { font-weight: 700; }
.vw-mi .chk { margin-left: auto; color: var(--vw-blue); }
.vw-sep { height: 1px; background: var(--vw-bd); margin: 5px 6px; }
.vw-prod { display: flex; gap: 11px; align-items: center; padding: 8px; border-radius: 12px; }
.vw-prod:hover { background: var(--vw-hv); }
.vw-prod img, .vw-prod .ph { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; background: var(--vw-soft); flex: none; }
.vw-prod .x { flex: 1; min-width: 0; }
.vw-prod .x b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-prod .x span { font-size: 12.5px; color: var(--vw-tx2); font-variant-numeric: tabular-nums; }
.vw-prod .x s { color: var(--vw-tx3); margin-left: 4px; }
.vw-prod .bt { display: flex; gap: 4px; flex: none; }
.vw-prod .bt button { border: 0; background: var(--vw-soft); border-radius: 9px; padding: 6px 9px; font-size: 12px; font-weight: 680; white-space: nowrap; }
.vw-prod .bt button.pri { background: var(--vw-tx); color: var(--vw-card); }
.vw-prod .bt button:hover { filter: brightness(.96); }

/* ── panel derecho (pedido / cliente) ─────────────────────────────── */
.vw-side { width: 360px; flex: none; border-left: 1px solid var(--vw-bd); display: flex; flex-direction: column; background: var(--vw-card); min-height: 0; }
.vw-stabs { display: flex; gap: 4px; padding: 12px 14px 0; border-bottom: 1px solid var(--vw-bd); flex: none; }
.vw-stabs button { border: 0; background: transparent; padding: 8px 10px 11px; font-size: 13.5px; font-weight: 650; color: var(--vw-tx3); position: relative; }
.vw-stabs button.on { color: var(--vw-tx); }
.vw-stabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--vw-tx); }
.vw-stabs .x { margin-left: auto; display: none; }
.vw-sbody { flex: 1; overflow-y: auto; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 16px; overscroll-behavior: contain; }
.vw-sfoot { padding: 12px 16px 16px; border-top: 1px solid var(--vw-bd); flex: none; background: var(--vw-card); }
.vw-grp > .h { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 650; color: var(--vw-tx3); margin-bottom: 8px; letter-spacing: .01em; }
.vw-grp > .h button { border: 0; background: transparent; color: var(--vw-blue); font-size: 12.5px; font-weight: 680; padding: 0; }
.vw-oi { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.vw-oi + .vw-oi { border-top: 1px solid var(--vw-soft2); }
.vw-oi img, .vw-oi .ph { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--vw-soft); flex: none; }
.vw-oi .x { flex: 1; min-width: 0; }
.vw-oi .x b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-oi .x .pr { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.vw-oi .x input { width: 76px; border: 0; background: var(--vw-soft); border-radius: 7px; padding: 3px 7px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; outline: 0; }
.vw-oi .x select { border: 0; background: var(--vw-soft); border-radius: 7px; padding: 3px 5px; font-size: 12px; max-width: 110px; outline: 0; }
.vw-qty { display: flex; align-items: center; border-radius: 10px; box-shadow: 0 0 0 1px var(--vw-bd); flex: none; }
.vw-qty button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--vw-tx2); font-size: 16px; line-height: 1; }
.vw-qty span { min-width: 20px; text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vw-del { border: 0; background: transparent; color: var(--vw-tx3); width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.vw-del:hover { background: var(--vw-soft); color: var(--vw-bad); }
.vw-padd { position: relative; }
.vw-padd .vw-search { height: 38px; }
.vw-fl { border-radius: 14px; box-shadow: 0 0 0 1px var(--vw-bd); overflow: hidden; }
.vw-f { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 44px; }
.vw-f + .vw-f { border-top: 1px solid var(--vw-bd); }
.vw-f label { width: 82px; font-size: 12.5px; color: var(--vw-tx3); flex: none; font-weight: 550; }
.vw-f input, .vw-f textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 650; padding: 11px 0; }
.vw-f textarea { resize: none; min-height: 44px; line-height: 1.35; }
.vw-f input::placeholder, .vw-f textarea::placeholder { color: var(--vw-tx3); font-weight: 500; }
.vw-f .tg { font-size: 10px; font-weight: 750; padding: 2px 7px; border-radius: 6px; flex: none; letter-spacing: .02em; }
.vw-f .tg.auto { color: #15803d; background: color-mix(in srgb, #22c55e 15%, transparent); }
.vw-f .tg.miss { color: #c2410c; background: color-mix(in srgb, #f97316 15%, transparent); }
.vw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-chip { border: 0; padding: 8px 12px; border-radius: 11px; box-shadow: 0 0 0 1px var(--vw-bd); background: var(--vw-card); font-size: 12.5px; font-weight: 650; color: var(--vw-tx2); }
.vw-chip.on { box-shadow: 0 0 0 1.5px var(--vw-tx); color: var(--vw-tx); }
.vw-tot { display: flex; flex-direction: column; gap: 4px; }
.vw-tot .r { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--vw-tx2); }
.vw-tot .r input { width: 90px; text-align: right; border: 0; background: var(--vw-soft); border-radius: 8px; padding: 4px 8px; font-size: 13px; font-weight: 650; outline: 0; font-variant-numeric: tabular-nums; }
.vw-tot .big { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.vw-tot .big span { font-size: 13px; color: var(--vw-tx2); }
.vw-tot .big b { font-size: 26px; font-weight: 780; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.vw-btn { height: 48px; border-radius: 14px; border: 0; width: 100%; font-size: 14.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s, opacity .12s, filter .12s; }
.vw-btn:active { transform: scale(.985); }
.vw-btn:disabled { opacity: .45; cursor: not-allowed; }
.vw-btn.pri { background: var(--vw-tx); color: var(--vw-card); }
.vw-btn.ok { background: #16a34a; color: #fff; }
.vw-btn.ghost { background: transparent; color: var(--vw-blue); height: 38px; font-size: 13.5px; }
.vw-btn.soft { background: var(--vw-soft); color: var(--vw-tx); }
.vw-btn.sm { height: 38px; font-size: 13.5px; border-radius: 11px; width: auto; padding: 0 14px; }
.vw-btn.danger { background: color-mix(in srgb, var(--vw-bad) 12%, transparent); color: var(--vw-bad); }
.vw-tog { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--vw-tx2); cursor: pointer; user-select: none; }
.vw-sw { width: 42px; height: 26px; border-radius: 13px; background: var(--vw-bd2); position: relative; flex: none; transition: background .18s; border: 0; padding: 0; }
.vw-sw::after { content: ''; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s; }
.vw-sw.on { background: #22c55e; }
.vw-sw.on::after { transform: translateX(16px); }
.vw-done { border-radius: 16px; padding: 16px; background: linear-gradient(160deg, color-mix(in srgb, #22c55e 16%, transparent), transparent); box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 30%, transparent); }
.vw-done b { display: block; font-size: 16px; font-weight: 720; }
.vw-done span { font-size: 13px; color: var(--vw-tx2); }
.vw-hist { display: flex; flex-direction: column; }
.vw-hist .r { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--vw-soft2); font-size: 13px; }
.vw-hist .r:first-child { border-top: 0; }
.vw-hist .r b { font-weight: 650; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.vw-hist .r span { color: var(--vw-tx3); font-size: 12px; }
.vw-hist .r em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw-kv { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 14px; box-shadow: 0 0 0 1px var(--vw-bd); }
.vw-kv div { padding: 12px; }
.vw-kv div + div { border-left: 1px solid var(--vw-bd); }
.vw-kv b { display: block; font-size: 18px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vw-kv span { font-size: 11.5px; color: var(--vw-tx3); font-weight: 600; }

/* ── tablero ──────────────────────────────────────────────────────── */
.vw-board { flex: 1; display: flex; gap: 12px; padding: 14px 16px; overflow-x: auto; background: var(--vw-app); min-height: 0; }
.vw-col { width: 272px; flex: none; display: flex; flex-direction: column; min-height: 0; border-radius: 16px; transition: background .15s; }
.vw-col.drop { background: color-mix(in srgb, var(--vw-blue) 8%, transparent); }
.vw-colh { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; flex: none; }
.vw-colh i { width: 9px; height: 9px; border-radius: 50%; }
.vw-colh b { font-size: 13.5px; font-weight: 700; }
.vw-colh span { font-size: 12.5px; color: var(--vw-tx3); font-weight: 600; }
.vw-colh em { margin-left: auto; font-style: normal; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.vw-colb { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 2px 10px; }
.vw-kc { background: var(--vw-card); border-radius: 14px; padding: 11px 12px; box-shadow: 0 0 0 1px var(--vw-bd), 0 6px 16px -14px rgba(0,0,0,.35); cursor: pointer; border: 0; text-align: left; width: 100%; transition: box-shadow .15s, transform .15s; }
.vw-kc:hover { box-shadow: 0 0 0 1px var(--vw-bd2), 0 10px 24px -14px rgba(0,0,0,.45); }
.vw-kc.drag { opacity: .45; }
.vw-kc .a { display: flex; align-items: center; gap: 8px; }
.vw-kc .a b { flex: 1; font-size: 13.5px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-kc .a em { font-style: normal; font-size: 13.5px; font-weight: 740; font-variant-numeric: tabular-nums; }
.vw-kc p { margin: 4px 0 0; font-size: 12.5px; color: var(--vw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-kc .c { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--vw-tx3); font-weight: 600; }
.vw-kc .c .vw-who { margin-left: auto; }
.vw-rules { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 11px 18px; border-top: 1px solid var(--vw-bd); font-size: 12.5px; color: var(--vw-tx2); flex: none; scrollbar-width: none; }
.vw-rules b { color: var(--vw-tx); }

/* ── páginas (campañas, rendimiento, ajustes) ─────────────────────── */
.vw-page { flex: 1; overflow-y: auto; padding: 22px 24px 40px; background: var(--vw-app); min-height: 0; }
.vw-page h2 { font-size: 22px; font-weight: 760; letter-spacing: -.03em; margin: 0; }
.vw-page .sub { font-size: 14px; color: var(--vw-tx2); margin: 4px 0 18px; }
.vw-ph { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.vw-ph > div { flex: 1; min-width: 220px; }
.vw-ph .sub { margin-bottom: 0; }
.vw-box { background: var(--vw-card); border-radius: 20px; padding: 18px; box-shadow: var(--vw-shadow); border: 1px solid var(--vw-bd); }
.vw-box + .vw-box { margin-top: 14px; }
.vw-box h3 { font-size: 15.5px; font-weight: 720; margin: 0; letter-spacing: -.015em; display: flex; align-items: center; gap: 8px; }
.vw-box > p, .vw-box .sub2 { font-size: 13px; color: var(--vw-tx2); margin: 4px 0 0; line-height: 1.45; }
.vw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.vw-grid2 > .vw-box { margin: 0; }
.vw-ph .vw-seg { flex: none; width: auto; min-width: 0; }
.vw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vw-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--vw-card); border-radius: 20px; box-shadow: var(--vw-shadow); border: 1px solid var(--vw-bd); margin-bottom: 14px; }
.vw-kpis > div { padding: 16px 18px; }
.vw-kpis > div + div { border-left: 1px solid var(--vw-bd); }
.vw-kpis span { font-size: 12px; font-weight: 650; color: var(--vw-tx3); display: flex; align-items: center; gap: 6px; }
.vw-kpis span i { width: 7px; height: 7px; border-radius: 50%; }
.vw-kpis b { display: block; font-size: 26px; font-weight: 780; letter-spacing: -.035em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.vw-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vw-tbl th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--vw-tx3); letter-spacing: .03em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--vw-bd); }
.vw-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--vw-soft2); font-variant-numeric: tabular-nums; }
.vw-tbl tr:last-child td { border-bottom: 0; }
.vw-tbl .n { display: flex; align-items: center; gap: 9px; font-weight: 650; }
.vw-bars { display: flex; align-items: flex-end; gap: 4px; height: 150px; margin-top: 14px; }
.vw-bars div { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #22c55e, #16a34a); min-height: 3px; position: relative; opacity: .9; }
.vw-bars div.z { background: var(--vw-soft2); }
.vw-bars div:hover { opacity: 1; }
.vw-bars div[data-t]:hover::after { content: attr(data-t); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--vw-tx); color: var(--vw-card); font-size: 11.5px; font-weight: 650; padding: 4px 8px; border-radius: 7px; white-space: nowrap; z-index: 2; }
.vw-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--vw-tx3); margin-top: 6px; }
.vw-set { display: flex; gap: 20px; align-items: flex-start; }
.vw-snav { width: 210px; flex: none; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; }
.vw-snav button { border: 0; background: transparent; text-align: left; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--vw-tx2); display: flex; align-items: center; gap: 10px; }
.vw-snav button:hover { background: var(--vw-soft); }
.vw-snav button.on { background: var(--vw-card); color: var(--vw-tx); box-shadow: var(--vw-shadow); }
.vw-smain { flex: 1; min-width: 0; }
.vw-lcard { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.vw-lcard + .vw-lcard { border-top: 1px solid var(--vw-bd); }
.vw-lic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 750; font-size: 16px; flex: none; position: relative; }
.vw-lic .st { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--vw-card); background: var(--vw-tx3); }
.vw-lic .st.ok { background: #22c55e; } .vw-lic .st.warn { background: #f59e0b; } .vw-lic .st.bad { background: #ef4444; }
.vw-lcard .x { flex: 1; min-width: 0; }
.vw-lcard .x b { display: block; font-size: 15px; font-weight: 700; }
.vw-lcard .x span { font-size: 13px; color: var(--vw-tx2); }
.vw-lcard .bt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vw-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.vw-badge.ok { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; }
.vw-badge.warn { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #b45309; }
.vw-badge.bad { background: color-mix(in srgb, #ef4444 13%, transparent); color: #dc2626; }
.vw-badge.neu { background: var(--vw-soft); color: var(--vw-tx2); }
[data-theme="dark"] .vw-badge.ok { color: #4ade80; } [data-theme="dark"] .vw-badge.warn { color: #fbbf24; } [data-theme="dark"] .vw-badge.bad { color: #f87171; }
.vw-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.vw-field > label { font-size: 12.5px; font-weight: 650; color: var(--vw-tx2); }
.vw-field > small { font-size: 12px; color: var(--vw-tx3); line-height: 1.4; }
.vw-in { height: 46px; border-radius: 13px; border: 0; box-shadow: 0 0 0 1px var(--vw-bd2); background: var(--vw-card); padding: 0 14px; font-size: 15px; font-weight: 650; outline: 0; width: 100%; transition: box-shadow .15s; }
.vw-in:focus { box-shadow: 0 0 0 2px var(--vw-tx2); }
textarea.vw-in { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
select.vw-in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--vw-tx3) 50%), linear-gradient(135deg, var(--vw-tx3) 50%, transparent 50%); background-position: calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.vw-row2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.vw-row2 > * { flex: 1; min-width: 140px; }
.vw-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-vars button { border: 0; background: var(--vw-soft); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 650; color: var(--vw-blue); }
.vw-rep { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.vw-rep + .vw-rep { border-top: 1px solid var(--vw-bd); }
.vw-rep code { font-family: inherit; font-weight: 700; color: var(--vw-blue); font-size: 13px; min-width: 92px; padding-top: 2px; }
.vw-rep .x { flex: 1; min-width: 0; }
.vw-rep .x b { font-size: 14px; font-weight: 680; display: flex; align-items: center; gap: 8px; }
.vw-rep .x p { margin: 3px 0 0; font-size: 13px; color: var(--vw-tx2); white-space: pre-wrap; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vw-rep .bt { display: flex; gap: 4px; }
.vw-ck { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.vw-ck + .vw-ck { border-top: 1px solid var(--vw-bd); }
.vw-ck .ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.vw-ck .ic.ok { background: #22c55e; } .vw-ck .ic.bad { background: #ef4444; } .vw-ck .ic.warn { background: #f59e0b; }
.vw-ck b { display: block; font-size: 14px; font-weight: 650; }
.vw-ck span { font-size: 12.5px; color: var(--vw-tx2); }
.vw-code { display: flex; gap: 8px; align-items: center; background: var(--vw-soft); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
.vw-code span { flex: 1; }
.vw-camp { display: flex; gap: 16px; align-items: center; padding: 14px 0; }
.vw-camp + .vw-camp { border-top: 1px solid var(--vw-bd); }
.vw-camp .x { flex: 1; min-width: 0; }
.vw-camp .x b { font-size: 15px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.vw-camp .x span { font-size: 12.5px; color: var(--vw-tx2); }
.vw-prog { height: 8px; border-radius: 8px; background: var(--vw-soft2); overflow: hidden; margin-top: 8px; }
.vw-prog i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #16a34a, #4ade80); transition: width .6s; }
.vw-cstats { display: flex; gap: 18px; font-size: 12.5px; color: var(--vw-tx2); margin-top: 6px; flex-wrap: wrap; }
.vw-cstats b { color: var(--vw-tx); font-variant-numeric: tabular-nums; }
.vw-count { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--vw-blue) 7%, var(--vw-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--vw-blue) 22%, transparent); margin-top: 14px; }
.vw-count b { font-size: 28px; font-weight: 780; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.vw-count span { font-size: 13px; color: var(--vw-tx2); line-height: 1.35; }
.vw-preview { border-radius: 18px; background: var(--vw-app); padding: 16px; margin-top: 14px; }
.vw-preview .vw-b { background: #d9fdd3; color: #111b21; border-radius: 12px 12px 12px 4px; display: inline-block; max-width: 100%; box-shadow: 0 1px .5px rgba(11,20,26,.13); }
[data-theme="dark"] .vw-preview .vw-b { background: #005c4b; color: #e9edef; }

/* ── bloqueo y bienvenida ─────────────────────────────────────────── */
.vw-lock { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 20px; background: radial-gradient(900px 400px at 50% -10%, color-mix(in srgb, #22c55e 12%, transparent), transparent 70%), var(--vw-card); }
.vw-lock .in { max-width: 520px; text-align: center; }
.vw-lock .ic { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 18px; background: linear-gradient(145deg, #34d399, #16a34a); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 40px -16px rgba(22,163,74,.7); }
.vw-lock .ic svg.i { width: 34px; height: 34px; }
.vw-lock h2 { font-size: 28px; font-weight: 780; letter-spacing: -.035em; margin: 0; }
.vw-lock p { font-size: 15px; color: var(--vw-tx2); line-height: 1.5; margin: 8px 0 20px; }
.vw-lock ul { list-style: none; padding: 0; margin: 0 auto 24px; text-align: left; display: inline-flex; flex-direction: column; gap: 10px; }
.vw-lock li { display: flex; gap: 10px; font-size: 14.5px; align-items: flex-start; }
.vw-lock li i { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, #22c55e 16%, transparent); color: #16a34a; display: flex; align-items: center; justify-content: center; flex: none; margin-top: -1px; }
.vw-lock li i svg.i { width: 13px; height: 13px; stroke-width: 2.6; }
.vw-lock .vw-btn { max-width: 300px; margin: 0 auto; }
.vw-steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0; text-align: left; }
.vw-steps3 div { padding: 14px; border-radius: 16px; box-shadow: 0 0 0 1px var(--vw-bd); background: var(--vw-card); }
.vw-steps3 em { font-style: normal; width: 26px; height: 26px; border-radius: 9px; background: var(--vw-tx); color: var(--vw-card); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 750; margin-bottom: 10px; }
.vw-steps3 b { display: block; font-size: 14px; font-weight: 700; }
.vw-steps3 span { font-size: 12.5px; color: var(--vw-tx2); line-height: 1.4; }

/* ── ventanas (modal) ─────────────────────────────────────────────── */
.vw-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10,8,20,.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: vwFade .16s ease-out; }
@keyframes vwFade { from { opacity: 0; } to { opacity: 1; } }
.vw-dlg { background: var(--vw-card); color: var(--vw-tx); border-radius: 24px; width: 100%; max-width: 520px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); animation: vwPop .2s cubic-bezier(.2,.9,.3,1.2); overflow: hidden; }
.vw-dlg.wide { max-width: 720px; }
@keyframes vwPop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.vw-dlg .hd { display: flex; align-items: center; gap: 10px; padding: 18px 20px 6px; }
.vw-dlg .hd h3 { flex: 1; margin: 0; font-size: 19px; font-weight: 760; letter-spacing: -.025em; }
.vw-dlg .bd { padding: 6px 20px 18px; overflow-y: auto; }
.vw-dlg .ft { display: flex; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--vw-bd); }
.vw-dlg .ft .vw-btn { flex: 1; }
.vw-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 4px; text-align: center; }
.vw-qr .box { width: 264px; height: 264px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--vw-bd); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.vw-qr .box img { width: 240px; height: 240px; image-rendering: pixelated; }
.vw-qr ol { text-align: left; font-size: 13.5px; color: var(--vw-tx2); line-height: 1.6; margin: 0; padding-left: 18px; }
.vw-qr ol b { color: var(--vw-tx); }
.vw-ok { width: 74px; height: 74px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; animation: vwPop .3s; }
.vw-ok svg.i { width: 38px; height: 38px; stroke-width: 2.6; }
.vw-spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--vw-soft2); border-top-color: var(--vw-tx); animation: vwSpin .8s linear infinite; }
@keyframes vwSpin { to { transform: rotate(360deg); } }
.vw-light { position: fixed; inset: 0; z-index: 3100; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
.vw-light img, .vw-light video { max-width: 100%; max-height: 100%; border-radius: 12px; }
.vw-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3200; background: #1c1830; color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6); max-width: calc(100vw - 32px); animation: vwIn .2s; display: flex; align-items: center; gap: 10px; }
.vw-toast.err { background: #b91c1c; }
.vw-toast.ok { background: #15803d; }
.vw-skel { background: linear-gradient(90deg, var(--vw-soft) 0%, var(--vw-soft2) 50%, var(--vw-soft) 100%); background-size: 200% 100%; animation: vwSk 1.2s ease-in-out infinite; border-radius: 10px; }
@keyframes vwSk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.vw-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; background: color-mix(in srgb, #f59e0b 14%, var(--vw-card)); color: var(--vw-tx); border-bottom: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); flex: none; }
.vw-banner.bad { background: color-mix(in srgb, #ef4444 12%, var(--vw-card)); border-bottom-color: color-mix(in srgb, #ef4444 28%, transparent); }
.vw-banner button { margin-left: auto; border: 0; background: var(--vw-tx); color: var(--vw-card); border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.vw-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--vw-tx3); text-align: center; padding: 30px; }
.vw-placeholder .ic { width: 64px; height: 64px; border-radius: 20px; background: var(--vw-card); box-shadow: var(--vw-shadow); display: flex; align-items: center; justify-content: center; color: var(--vw-tx2); }
.vw-placeholder b { color: var(--vw-tx); font-size: 16px; }

/* ── tablet: el panel del pedido se abre como cajón ───────────────── */
@media (max-width: 1240px) {
  .vw-side { position: absolute; right: 0; top: 0; bottom: 0; z-index: 30; box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); transform: translateX(105%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .vw-side.open { transform: none; }
  .vw-stabs .x { display: inline-flex; }
  .vw-steps .vw-sx span { display: none; }
  .vw-steps .vw-sx.now span { display: inline; }
}
@media (min-width: 1241px) { .vw-only-drawer { display: none !important; } }
@media (max-width: 1080px) {
  .vw-kpi { display: none; }
  .vw-list { width: 300px; }
  .vw-steps { display: none; }
  .vw-kpis { grid-template-columns: repeat(3, 1fr); }
  .vw-kpis > div:nth-child(4) { border-left: 0; }
  .vw-kpis > div:nth-child(n+4) { border-top: 1px solid var(--vw-bd); }
}

/* ── celular ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vw-app { border-radius: 0; border: 0; box-shadow: none; background: var(--vw-card); }
  .vw-top { padding: 10px 14px; gap: 10px; flex-wrap: wrap; min-height: 0; }
  .vw-title { flex: 1; min-width: 0; }
  .vw-title > div { min-width: 0; }
  .vw-title h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vw-topr { flex-wrap: nowrap; }
  .vw-title small { display: none; }
  .vw-title .wa { width: 30px; height: 30px; border-radius: 10px; }
  .vw-lines { order: 3; flex-basis: 100%; }
  .vw-topr { gap: 2px; }
  .vw-topr .vw-seg { display: none; }
  .vw-pipe { padding: 0 6px; }
  .vw-stg { min-width: 0; padding: 9px 11px 8px; }
  .vw-stg .v b { font-size: 17px; }
  .vw-list { width: 100%; border-right: 0; }
  .vw-it { padding: 11px 16px; }
  .vw-conv { position: fixed; inset: 0; z-index: 2500; transform: translateX(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); padding-top: env(safe-area-inset-top); }
  .vw-conv.open { transform: none; }
  .vw-ch { padding: 8px 10px; gap: 8px; min-height: 56px; }
  .vw-ch .back { display: inline-flex; }
  .vw-ch .acts .hide-m { display: none; }
  .vw-msgs { padding: 12px 10px 8px; }
  .vw-row { max-width: 84%; }
  .vw-sug { padding: 8px 10px 0; }
  .vw-sug .h { display: none; }
  .vw-sc { min-width: 200px; }
  .vw-comp { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .vw-hint { display: none; }
  .vw-side { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 88dvh; border-left: 0; border-radius: 26px 26px 0 0; z-index: 2600; transform: translateY(105%); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.5); padding-bottom: env(safe-area-inset-bottom); }
  .vw-side.open { transform: none; }
  .vw-side::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--vw-bd2); margin: 8px auto 0; flex: none; }
  .vw-board { padding: 12px; }
  .vw-col { width: 82vw; }
  .vw-page { padding: 16px 14px 90px; }
  .vw-set { flex-direction: column; gap: 12px; }
  .vw-snav { width: 100%; flex-direction: row; overflow-x: auto; position: static; scrollbar-width: none; }
  .vw-snav button { white-space: nowrap; padding: 8px 12px; }
  .vw-grid2, .vw-grid3, .vw-steps3 { grid-template-columns: 1fr; }
  .vw-kpis { grid-template-columns: 1fr 1fr; }
  .vw-kpis > div { border-left: 0 !important; border-top: 1px solid var(--vw-bd); }
  .vw-kpis > div:nth-child(-n+2) { border-top: 0; }
  .vw-kpis > div:nth-child(even) { border-left: 1px solid var(--vw-bd) !important; }
  .vw-lcard { flex-wrap: wrap; }
  .vw-lcard .bt { width: 100%; justify-content: flex-start; }
  .vw-dlg { border-radius: 24px 24px 0 0; align-self: flex-end; max-height: 92dvh; }
  .vw-modal { padding: 0; align-items: flex-end; }
  .vw-pop.sheet { position: fixed !important; left: 8px !important; right: 8px !important; bottom: calc(8px + env(safe-area-inset-bottom)) !important; top: auto !important; width: auto !important; max-height: 70dvh; border-radius: 22px; }
  .vw-jump { bottom: 140px; right: 14px; }
  .vw-tbl .hide-m { display: none; }
}
body.vw-full .mnav { display: none !important; }
body.vw-full { overflow: hidden; }
.vw-scrim { position: absolute; inset: 0; background: rgba(10,8,20,.28); z-index: 29; animation: vwFade .18s; }
@media (max-width: 760px) { .vw-scrim { position: fixed; z-index: 2550; } }

/* ══════════════════════════════════════════════════════════════════
   Diseño v2 — ventanas, formularios, avisos y pantallas premium
   ══════════════════════════════════════════════════════════════════ */
.vw { --vw-fill: color-mix(in srgb, var(--vw-tx) 4.5%, var(--vw-card)); --vw-fill2: color-mix(in srgb, var(--vw-tx) 7%, var(--vw-card)); --vw-wa: #25D366; --vw-ease: cubic-bezier(.2,.8,.2,1); }

/* Logo de WhatsApp (sin cuadro) */
.vw-walogo { width: 24px; height: 24px; display: block; flex: none; }
.vw-walogo.t { width: 34px; height: 34px; filter: drop-shadow(0 6px 12px rgba(37,211,102,.32)); }
.vw-walogo.xs { width: 16px; height: 16px; }
.vw .lg .vw-walogo, .vw-placeholder .lg .vw-walogo { width: 58px; height: 58px; margin: 0 auto 14px; filter: drop-shadow(0 14px 26px rgba(37,211,102,.35)); }
.vw-lock .lg .vw-walogo { width: 72px; height: 72px; margin: 0 auto 18px; }
@media (max-width: 760px) { .vw-walogo.t { width: 30px; height: 30px; } }

/* Ventanas */
.vw-modal { background: rgba(14,12,24,.34); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.vw-dlg { border-radius: 30px; max-width: 540px; box-shadow: 0 40px 100px -30px rgba(10,8,30,.55), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 6%, transparent); animation: vwPop2 .32s var(--vw-ease); }
@keyframes vwPop2 { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.vw-dlg .grab { display: none; }
.vw-dlg .hd { align-items: flex-start; gap: 14px; padding: 26px 26px 8px; }
.vw-dlg .hd .ht { flex: 1; min-width: 0; }
.vw-dlg .hd h3 { font-size: 22px; font-weight: 780; letter-spacing: -.035em; line-height: 1.15; }
.vw-dlg .hd p { margin: 5px 0 0; font-size: 14px; color: var(--vw-tx2); line-height: 1.4; }
.vw-dlg .hd .hic { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--vw-fill); color: var(--vw-tx); }
.vw-dlg .hd .hic.wa { background: none; width: 44px; }
.vw-dlg .hd .hic.wa .vw-walogo { width: 42px; height: 42px; filter: drop-shadow(0 8px 16px rgba(37,211,102,.3)); }
.vw-dlg .hd .hic svg.i { width: 22px; height: 22px; }
.vw-x { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--vw-fill); color: var(--vw-tx2); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .15s, transform .15s; }
.vw-x:hover { background: var(--vw-fill2); color: var(--vw-tx); }
.vw-x:active { transform: scale(.92); }
.vw-x svg.i { width: 16px; height: 16px; stroke-width: 2.2; }
.vw-dlg .bd { padding: 10px 26px 22px; }
.vw-dlg .ft { border-top: 0; padding: 8px 26px 26px; gap: 10px; }
.vw-dlg .ft .vw-btn { height: 52px; border-radius: 16px; font-size: 15.5px; font-weight: 700; }
.vw-dlg .vw-field { margin-top: 18px; gap: 8px; }
.vw-dlg .vw-field:first-child { margin-top: 6px; }
.vw-field > label { font-size: 13px; font-weight: 700; color: var(--vw-tx); letter-spacing: -.005em; }
.vw-field > label em { font-style: normal; font-weight: 600; color: var(--vw-tx3); margin-left: 4px; }
.vw-field > small { font-size: 12.5px; color: var(--vw-tx3); }
.vw-lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--vw-tx2); }
@media (max-width: 760px) {
  .vw-dlg { border-radius: 28px 28px 0 0; animation: vwSheet .34s var(--vw-ease); }
  @keyframes vwSheet { from { transform: translateY(100%); } to { transform: none; } }
  .vw-dlg .grab { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--vw-bd2); margin: 8px auto -6px; flex: none; }
  .vw-dlg .hd { padding: 20px 20px 6px; }
  .vw-dlg .bd { padding: 8px 20px 18px; }
  .vw-dlg .ft { padding: 8px 20px calc(18px + env(safe-area-inset-bottom)); }
}

/* Campos */
.vw-in { height: 52px; border-radius: 15px; box-shadow: none; background: var(--vw-fill); border: 1.5px solid transparent; font-size: 16px; font-weight: 650; padding: 0 16px; transition: border-color .15s, background .15s, box-shadow .15s; }
.vw-in::placeholder { color: var(--vw-tx3); font-weight: 550; }
.vw-in:hover { background: var(--vw-fill2); }
.vw-in:focus { background: var(--vw-card); border-color: color-mix(in srgb, var(--vw-tx) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vw-tx) 8%, transparent); }
textarea.vw-in { padding: 14px 16px; border-radius: 16px; }
select.vw-in { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239691ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-size: 18px; background-position: calc(100% - 14px) 50%; padding-right: 44px; }

/* Chips → píldoras modernas */
.vw-chip { padding: 9px 15px; border-radius: 999px; box-shadow: none; background: var(--vw-fill); font-size: 13.5px; font-weight: 650; color: var(--vw-tx2); transition: background .15s, color .15s, transform .12s; }
.vw-chip:hover { background: var(--vw-fill2); color: var(--vw-tx); }
.vw-chip:active { transform: scale(.96); }
.vw-chip.on { background: var(--vw-tx); color: var(--vw-card); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--vw-tx) 60%, transparent); }

/* Tarjetas de opción */
.vw-opts { display: flex; flex-direction: column; gap: 10px; }
.vw-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 15px 16px; border-radius: 18px; border: 1.5px solid var(--vw-bd); background: var(--vw-card); transition: border-color .15s, box-shadow .2s, transform .12s; }
.vw-opt:hover { border-color: var(--vw-bd2); }
.vw-opt:active { transform: scale(.99); }
.vw-opt .oi { width: 40px; height: 40px; border-radius: 13px; background: var(--vw-fill); display: flex; align-items: center; justify-content: center; flex: none; color: var(--vw-tx2); transition: background .15s, color .15s; }
.vw-opt .oi svg.i { width: 20px; height: 20px; }
.vw-opt .ot { flex: 1; min-width: 0; }
.vw-opt .ot b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; font-weight: 720; letter-spacing: -.015em; }
.vw-opt .ot small { display: block; margin-top: 3px; font-size: 13px; color: var(--vw-tx2); line-height: 1.4; }
.vw-opt .ck { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--vw-bd2); display: flex; align-items: center; justify-content: center; flex: none; color: transparent; transition: all .18s; }
.vw-opt .ck svg.i { width: 13px; height: 13px; stroke-width: 3; }
.vw-opt.on { border-color: var(--vw-tx); box-shadow: 0 12px 30px -18px color-mix(in srgb, var(--vw-tx) 55%, transparent); }
.vw-opt.on .oi { background: var(--vw-tx); color: var(--vw-card); }
.vw-opt.on .ck { background: var(--vw-tx); border-color: var(--vw-tx); color: var(--vw-card); }
.vw-tag { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #15803d; background: color-mix(in srgb, #22c55e 15%, transparent); padding: 3px 8px; border-radius: 999px; }

/* Selector de tiendas */
.vw-stpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.vw-st { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 15px; border: 1.5px solid var(--vw-bd); background: var(--vw-card); text-align: left; transition: border-color .15s, background .15s; }
.vw-st:hover { border-color: var(--vw-bd2); }
.vw-st .sn { flex: 1; min-width: 0; font-size: 14px; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-st .tick { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--vw-bd2); display: flex; align-items: center; justify-content: center; color: transparent; flex: none; transition: all .15s; }
.vw-st .tick svg.i { width: 12px; height: 12px; stroke-width: 3.2; }
.vw-st.on { border-color: var(--vw-tx); background: color-mix(in srgb, var(--vw-tx) 3%, var(--vw-card)); }
.vw-st.on .tick { background: var(--vw-tx); border-color: var(--vw-tx); color: var(--vw-card); }
.sa { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0; overflow: hidden; }
.sa { position: relative; }
.sa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.sa.img { background: transparent !important; color: transparent; }
.sa.img img { opacity: 1; }

/* Colores, notas, grupos, enlaces */
.vw-colors { display: flex; gap: 10px; flex-wrap: wrap; }
.vw-color { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .15s, box-shadow .15s; }
.vw-color.on { box-shadow: 0 0 0 3px var(--vw-card), 0 0 0 5px var(--c); transform: scale(1.04); }
.vw-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 13px 14px; border-radius: 15px; background: var(--vw-fill); font-size: 13.5px; line-height: 1.45; color: var(--vw-tx2); }
.vw-note.ok { background: color-mix(in srgb, #22c55e 10%, var(--vw-card)); color: color-mix(in srgb, #15803d 85%, var(--vw-tx)); }
.vw-note.ok svg.i { color: #16a34a; margin-top: 1px; }
.vw-mgrp { margin-top: 18px; padding: 4px 16px; border-radius: 18px; background: var(--vw-fill); }
.vw-mgrp .vw-field { margin-top: 12px; }
.vw-mgrp .vw-field:last-child { margin-bottom: 14px; }
.vw-mgrp .vw-in { background: var(--vw-card); }
.vw-row-tog { display: flex; align-items: center; gap: 14px; padding: 14px 0; cursor: pointer; }
.vw-row-tog > span { flex: 1; min-width: 0; }
.vw-row-tog b { display: block; font-size: 14.5px; font-weight: 700; }
.vw-row-tog small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--vw-tx3); line-height: 1.4; }
.vw-link { margin-top: 18px; border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 650; color: var(--vw-tx2); display: inline-flex; align-items: center; gap: 8px; }
.vw-link.danger { color: var(--vw-bad); }
.vw-btn.danger-t { color: var(--vw-bad); }
.vw-btn.xl { height: 56px; padding: 0 30px; border-radius: 18px; font-size: 16px; font-weight: 720; }
.vw-btn.busy { position: relative; color: transparent !important; }
.vw-btn.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: vwSpin .7s linear infinite; }
@keyframes vwSpin { to { transform: rotate(360deg); } }

/* Aviso flotante (toast) */
.vw-toast { top: calc(18px + env(safe-area-inset-top)); bottom: auto; padding: 11px 18px 11px 11px; border-radius: 999px; background: color-mix(in srgb, #1c1830 88%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); font-size: 14.5px; font-weight: 650; box-shadow: 0 18px 44px -16px rgba(10,8,30,.6), 0 0 0 1px rgba(255,255,255,.06); animation: vwToast .38s var(--vw-ease); gap: 10px; }
.vw-toast.ok, .vw-toast.err { background: color-mix(in srgb, #1c1830 88%, transparent); }
@keyframes vwToast { from { opacity: 0; transform: translate(-50%, -16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0); } }
.vw-toast .ti { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: rgba(255,255,255,.14); }
.vw-toast.ok .ti { background: #22c55e; }
.vw-toast.err .ti { background: #ff453a; }
.vw-toast .ti svg.i { width: 14px; height: 14px; stroke-width: 2.8; color: #fff; }

/* Aviso de mensaje nuevo */
.vw-ntf { position: fixed; top: calc(74px + env(safe-area-inset-top)); right: 16px; z-index: 3300; width: min(360px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 22px; background: color-mix(in srgb, var(--vw-card) 82%, transparent); backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%); box-shadow: 0 24px 60px -20px rgba(10,8,30,.5), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 8%, transparent); cursor: pointer; animation: vwNtf .42s var(--vw-ease); }
.vw-ntf.out { opacity: 0; transform: translateX(20px); transition: all .25s; }
@keyframes vwNtf { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
.vw-ntf .av { width: 42px; height: 42px; border-radius: 50%; color: #fff; font-weight: 750; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
.vw-ntf .tx { flex: 1; min-width: 0; }
.vw-ntf .t1 { display: flex; align-items: center; gap: 6px; }
.vw-ntf .t1 b { font-size: 14.5px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-ntf .t2 { display: block; font-size: 13.5px; color: var(--vw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.vw-ntf .t3 { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--vw-tx3); }
.vw-ntf .x { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--vw-fill); color: var(--vw-tx3); display: flex; align-items: center; justify-content: center; flex: none; align-self: flex-start; }
@media (max-width: 760px) { .vw-ntf { right: 12px; left: 12px; width: auto; } }

/* Tienda que se atiende ahora */
.vw-attend { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 5px; border-radius: 999px; border: 0; background: var(--vw-fill); color: var(--vw-tx); transition: background .15s; flex: none; }
.vw-attend:hover { background: var(--vw-fill2); }
.vw-attend .sa { width: 30px; height: 30px; border-radius: 50%; font-size: 11px; }
.vw-attend > span:not(.sa) { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.vw-attend small { font-size: 10.5px; font-weight: 700; color: var(--vw-tx3); text-transform: uppercase; letter-spacing: .05em; }
.vw-attend b { font-size: 13.5px; font-weight: 720; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-attend svg.i { width: 14px; height: 14px; color: var(--vw-tx3); }
.vw-mi.st { gap: 10px; }
.vw-mi.st .sa { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.vw-mi.st span:not(.sa) { flex: 1; }
.vw-mi.st.on { font-weight: 750; }
.vw-mnote { padding: 8px 12px 6px; font-size: 12px; color: var(--vw-tx3); line-height: 1.4; }
.vw-stseg { display: flex; flex-direction: column; gap: 6px; }
.vw-stseg button { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 13px; border: 1.5px solid var(--vw-bd); background: var(--vw-card); font-size: 13.5px; font-weight: 650; text-align: left; }
.vw-stseg button .sa { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.vw-stseg button.on { border-color: var(--vw-tx); font-weight: 750; }

/* Pantalla sin licencia (premium) */
.vw-lock2 { flex: 1; position: relative; overflow-x: hidden; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 48px 40px; background: var(--vw-card); }
.vw-lock2 .glow { position: absolute; inset: -30% -10% auto -10%; height: 90%; background: radial-gradient(600px 320px at 22% 30%, color-mix(in srgb, #25D366 20%, transparent), transparent 70%), radial-gradient(520px 300px at 85% 20%, color-mix(in srgb, #7c3aed 14%, transparent), transparent 70%); pointer-events: none; }
.vw-lock2 .in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 56px; align-items: center; max-width: 1080px; width: 100%; }
.vw-eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 9px; border-radius: 999px; background: var(--vw-fill); font-size: 13px; font-weight: 700; color: var(--vw-tx); }
.vw-eyebrow i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #5a3400; background: linear-gradient(135deg, #fde68a, #f59e0b); padding: 3px 7px; border-radius: 7px; }
.vw-lock2 h2 { margin: 18px 0 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; }
.vw-lock2 h2 span { background: linear-gradient(90deg, #16a34a, #25D366 55%, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vw-lock2 .lead { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--vw-tx2); max-width: 520px; }
.vw-lock2 .feats { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.vw-lock2 .feats li { display: flex; gap: 12px; align-items: flex-start; }
.vw-lock2 .feats .fi { color: #16a34a; flex: none; margin-top: 1px; }
.vw-lock2 .feats .fi svg.i { width: 22px; height: 22px; stroke-width: 1.8; }
.vw-lock2 .feats b { display: block; font-size: 15px; font-weight: 720; letter-spacing: -.015em; }
.vw-lock2 .feats small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--vw-tx2); line-height: 1.45; }
.vw-lock2 .cta { margin-top: 34px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vw-lock2 .cta .vw-btn { box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--vw-tx) 70%, transparent); }
.vw-lock2 .cta span { font-size: 13px; color: var(--vw-tx3); font-weight: 600; }
.vw-lock2 .note { margin-top: 24px; color: var(--vw-tx2); }
.vw-lock2 .demo { position: relative; display: flex; justify-content: center; }
.vw-lock2 .ph { width: 100%; max-width: 360px; border-radius: 34px; background: #efeae2; box-shadow: 0 50px 100px -40px rgba(10,8,30,.55), 0 0 0 9px #16131f, 0 0 0 10px #2a2635; overflow: hidden; }
[data-theme="dark"] .vw-lock2 .ph { background: #0b141a; }
.vw-lock2 .phh { display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: color-mix(in srgb, #fff 92%, transparent); border-bottom: 1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .vw-lock2 .phh { background: #1f2c34; color: #e9edef; }
.vw-lock2 .phh b { font-size: 14px; font-weight: 700; flex: 1; }
.vw-lock2 .phh em { font-style: normal; font-size: 11.5px; color: #16a34a; font-weight: 650; }
.vw-lock2 .phb { padding: 16px 12px 22px; display: flex; flex-direction: column; gap: 8px; min-height: 360px; }
.vw-lock2 .b { max-width: 84%; padding: 8px 11px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; color: #111b21; box-shadow: 0 1px .5px rgba(11,20,26,.13); opacity: 0; animation: vwMsg 9s infinite; }
.vw-lock2 .b.bi { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.vw-lock2 .b.bo, .vw-lock2 .b.pc { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 4px; }
[data-theme="dark"] .vw-lock2 .b.bi { background: #202c33; color: #e9edef; }
[data-theme="dark"] .vw-lock2 .b.bo, [data-theme="dark"] .vw-lock2 .b.pc { background: #005c4b; color: #e9edef; }
.vw-lock2 .b.pc { display: flex; gap: 10px; align-items: center; padding: 6px 11px 6px 6px; }
.vw-lock2 .pimg { width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, #a7f3d0, #34d399 60%, #0f766e); flex: none; }
.vw-lock2 .b.pc b { display: block; font-size: 13px; }
.vw-lock2 .b.pc small { font-size: 12px; } .vw-lock2 .b.pc s { opacity: .55; margin-right: 4px; }
.vw-lock2 .sys { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #fff; font-size: 12px; color: #6b7280; box-shadow: 0 6px 18px -10px rgba(245,158,11,.8), 0 0 0 1px #fde7c2; opacity: 0; animation: vwMsg 9s infinite; }
.vw-lock2 .sys b { color: #111; } .vw-lock2 .sys svg.i { width: 13px; height: 13px; color: #f59e0b; }
.vw-lock2 .d1 { animation-delay: 0s; } .vw-lock2 .d2 { animation-delay: .9s; } .vw-lock2 .d3 { animation-delay: 1.9s; } .vw-lock2 .d4 { animation-delay: 2.8s; } .vw-lock2 .d5 { animation-delay: 3.7s; }
@keyframes vwMsg { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.vw-lock2 .won { position: absolute; right: -6px; bottom: 34px; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--vw-card); box-shadow: 0 24px 50px -18px rgba(10,8,30,.45), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 6%, transparent); opacity: 0; animation: vwWon 9s infinite; animation-delay: 4.6s; }
.vw-lock2 .won > svg.i { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #22c55e; color: #fff; stroke-width: 3; }
.vw-lock2 .won small { display: block; font-size: 11px; font-weight: 700; color: var(--vw-tx3); text-transform: uppercase; letter-spacing: .05em; }
.vw-lock2 .won b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: #16a34a; }
@keyframes vwWon { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 8%, 40% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vw-lock2 .b, .vw-lock2 .sys, .vw-lock2 .won { animation: none; opacity: 1; } }
@media (max-width: 980px) {
  .vw-lock2 { padding: 28px 18px 40px; align-items: flex-start; }
  .vw-lock2 .in { grid-template-columns: 1fr; gap: 34px; }
  .vw-lock2 .feats { grid-template-columns: 1fr; gap: 16px; }
  .vw-lock2 .cta .vw-btn { width: 100%; }
  .vw-lock2 .cta span { width: 100%; text-align: center; }
  .vw-lock2 .won { right: 4px; }
}

/* ── v1.2: chip único del número, disponibilidad, panel de conexión ── */
.vw-lchip.lc { padding: 0 10px 0 10px; gap: 7px; }
.vw-lchip.lc .sa { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; margin-left: -2px; }
.vw-lchip.lc .lb { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.vw-lchip.lc svg.i { width: 13px; height: 13px; opacity: .7; margin-left: -1px; }
.vw-lchip.lc.on .dot.ok { box-shadow: 0 0 0 2px rgba(34,197,94,.28); }
.vw-avail { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 10px; border-radius: 16px; border: 1px solid var(--vw-bd); background: var(--vw-card); font-size: 12.5px; font-weight: 700; color: var(--vw-tx2); white-space: nowrap; transition: background .15s; }
.vw-avail:hover { background: var(--vw-hv); }
.vw-avail .ad { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.vw-avail.off { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.vw-avail.off .ad { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.22); animation: vwPulse 1.6s ease-in-out infinite; }
@keyframes vwPulse { 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }
.vw-menu .h { font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--vw-tx3); padding: 10px 10px 4px; }
.vw-lmh { display: flex; align-items: center; gap: 11px; padding: 8px 10px 10px; }
.vw-lmh .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--vw-tx3); }
.vw-lmh > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.vw-lmh b { font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; }
.vw-lmh small { font-size: 12px; color: var(--vw-tx3); font-weight: 550; margin-top: 1px; }
.vw-lmh .dot.ok, .vw-cml .dot.ok { background: #22c55e; } .vw-lmh .dot.warn, .vw-cml .dot.warn { background: #f59e0b; } .vw-lmh .dot.bad, .vw-cml .dot.bad { background: #ef4444; }
.vw-mi.strong { font-weight: 720; color: #15803d; }
.vw-mi svg.i { width: 17px; height: 17px; color: var(--vw-tx3); flex: none; }
.vw-mi.strong svg.i { color: #16a34a; }
.vw-mi.st svg.i { margin-left: auto; color: #16a34a; }
.vw-mnote { font-size: 11.5px; line-height: 1.45; color: var(--vw-tx3); padding: 8px 10px 4px; border-top: 1px solid var(--vw-bd); margin-top: 6px; }
.vw-cmh { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.vw-cmh svg { width: 30px; height: 30px; color: #16a34a; flex: none; }
.vw-cmh > span { display: flex; flex-direction: column; }
.vw-cmh b { font-size: 15px; font-weight: 760; letter-spacing: -.01em; }
.vw-cmh small { font-size: 12px; color: var(--vw-tx3); font-weight: 550; }
.vw-cml { display: flex; align-items: center; gap: 10px; padding: 10px; margin: 0 2px 6px; border-radius: 12px; background: var(--vw-fill); }
.vw-cml .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--vw-tx3); }
.vw-cml .x { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vw-cml .x b { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-cml .x small { font-size: 11.5px; color: var(--vw-tx3); font-weight: 550; }
.vw-cml .okc { color: #16a34a; display: flex; }
.vw-cml .okc svg.i { width: 16px; height: 16px; }
@media (max-width: 760px) { .vw-avail .at { display: none; } .vw-avail { padding: 0 11px; } .vw-lchip.lc .lb { max-width: 120px; } }

/* ── v1.3: un solo control arriba (número · tienda · estado) ── */
.vw-wsw { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px 0 13px; border-radius: 18px; border: 0; background: var(--vw-tx); color: var(--vw-card); font-size: 13.5px; font-weight: 680; white-space: nowrap; flex: none; max-width: 340px; transition: transform .15s, opacity .15s; }
.vw-wsw:hover { opacity: .92; }
.vw-wsw:active { transform: scale(.97); }
.vw-wsw .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9ca3af; }
.vw-wsw .dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.vw-wsw .dot.warn { background: #f59e0b; } .vw-wsw .dot.bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); }
.vw-wsw .sa { width: 22px; height: 22px; border-radius: 7px; font-size: 9px; margin: 0 -1px; }
.vw-wsw .lb { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vw-wsw .pz { font-size: 11px; font-weight: 750; color: #78350f; background: #fde68a; padding: 3px 7px; border-radius: 6px; }
.vw-wsw svg.i { width: 14px; height: 14px; opacity: .6; flex: none; }
.vw-top > .vw-wsw { margin-left: 4px; }
.vw-swm { padding: 8px !important; }
.vw-swm .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #9ca3af; }
.vw-swm .dot.ok { background: #22c55e; } .vw-swm .dot.warn { background: #f59e0b; } .vw-swm .dot.bad { background: #ef4444; }
.vw-swm .dot.all { background: conic-gradient(#22c55e, #7c3aed, #0ea5e9, #22c55e); }
.vw-swm .vw-mi.rd { align-items: center; }
.vw-swm .vw-mi .x { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vw-swm .vw-mi .x b { font-weight: 680; font-size: 13.5px; }
.vw-swm .vw-mi .x small { font-size: 11.5px; color: var(--vw-tx3); font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-swm .vw-mi.rd svg.i { color: #16a34a; margin-left: auto; }
.vw-swl { display: flex; align-items: center; gap: 6px; border-radius: 12px; }
.vw-swl .vw-btn { flex: none; margin-right: 6px; }
.vw-swp { display: flex; align-items: center; gap: 10px; padding: 6px 10px 8px; }
.vw-swp .x { display: flex; flex-direction: column; }
.vw-swp b { font-size: 13.5px; font-weight: 700; }
.vw-swp small { font-size: 11.5px; color: var(--vw-tx3); font-weight: 550; }
.vw-pzs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 10px 8px; }
.vw-pzs span { font-size: 12px; font-weight: 650; color: var(--vw-tx3); margin-right: 2px; }
.vw-pzs button { height: 30px; padding: 0 11px; border-radius: 15px; border: 1px solid var(--vw-bd); background: var(--vw-card); font-size: 12.5px; font-weight: 650; color: var(--vw-tx); transition: background .15s, border-color .15s; }
.vw-pzs button:hover { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
@media (max-width: 760px) { .vw-wsw { max-width: 230px; height: 34px; } }

/* ── v1.3: conectar WhatsApp ── */
.vw-x.fl { position: absolute; top: 18px; right: 18px; z-index: 2; }
.vw-dlg.vw-cx { position: relative; max-width: 500px; }
.vw-cx .bd { padding: 34px 32px 6px; }
.vw-cx .ft { padding: 14px 32px 30px; flex-direction: column; }
.cx-hero { text-align: center; margin-bottom: 24px; }
.cx-logo { position: relative; display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; margin-bottom: 14px; }
.cx-logo::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(37,211,102,.22), rgba(37,211,102,0) 68%); }
.cx-logo .vw-walogo { position: relative; width: 58px; height: 58px; }
.cx-logo.sm { width: 44px; height: 44px; margin-bottom: 10px; }
.cx-logo.sm .vw-walogo { width: 40px; height: 40px; }
.cx-hero h2, .px-tx h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.cx-hero p, .px-tx > p { margin: 9px auto 0; max-width: 360px; font-size: 14.5px; line-height: 1.5; color: var(--vw-tx2); }
.cx-sec { margin-bottom: 18px; }
.cx-lbl { font-size: 13px; font-weight: 720; margin-bottom: 9px; }
.cx-lic { display: block; margin-top: 8px; font-size: 12px; color: var(--vw-tx3); }
.cx-pick { display: flex; flex-direction: column; gap: 10px; }
.cx-num { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--vw-bd); background: var(--vw-card); text-align: left; transition: border-color .15s, background .15s, box-shadow .15s; }
.cx-num:hover { border-color: color-mix(in srgb, var(--vw-tx) 25%, var(--vw-bd)); }
.cx-num.on { border-color: var(--vw-tx); box-shadow: 0 10px 24px -14px rgba(10,10,30,.35); }
.cx-num .pd { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); flex: none; }
.cx-num .pd.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vw-tx3); }
.cx-num .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-num b { font-size: 16px; font-weight: 750; letter-spacing: -.015em; }
.cx-num small { font-size: 13px; color: var(--vw-tx2); line-height: 1.35; }
.cx-num .rd { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--vw-bd); flex: none; transition: box-shadow .15s; }
.cx-num.on .rd { box-shadow: inset 0 0 0 7px var(--vw-tx); }
.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cx-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 16px 10px; border-radius: 18px; background: var(--vw-fill); font-size: 12.5px; line-height: 1.4; color: var(--vw-tx2); }
.cx-steps li b { color: var(--vw-tx); }
.cx-steps i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: var(--vw-tx); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--vw-tx) 22%, transparent); }
.cx-cloud .vw-field:first-child { margin-top: 0; }
.cx-link { display: block; margin: 18px auto 0; border: 0; background: none; font-size: 13px; font-weight: 600; color: var(--vw-tx3); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--vw-tx3) 40%, transparent); text-underline-offset: 3px; }
.cx-link:hover { color: var(--vw-tx); }
.vw-cx .cx-go { flex: none !important; width: 100%; height: 54px !important; border-radius: 17px !important; font-size: 16px !important; letter-spacing: -.01em; }

/* QR */
.vw-dlg.vw-pairx { max-width: 760px; }
.vw-pairx .bd { padding: 30px; }
.px { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; }
.px-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; border-radius: 24px; background: var(--vw-fill); text-align: center; }
.px-qr .box { width: 264px; height: 264px; border-radius: 18px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -18px rgba(0,0,0,.35); }
.px-qr .box img { width: 240px; height: 240px; image-rendering: pixelated; }
.px-qr small { font-size: 12.5px; color: var(--vw-tx3); line-height: 1.45; }
.px-qr .okt { color: #16a34a; font-size: 15px; }
.px-err { color: var(--vw-bad); }
.px-tx > p { margin: 8px 0 20px; }
.px-tx .cx-steps { grid-template-columns: 1fr; gap: 8px; }
.px-tx .cx-steps li { flex-direction: row; text-align: left; padding: 12px 14px; font-size: 13.5px; }
.px-tx .cx-steps i { flex: none; }
@media (max-width: 760px) {
  .vw-cx .bd { padding: 30px 20px 6px; }
  .vw-cx .ft { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); }
  .cx-steps { grid-template-columns: 1fr; }
  .cx-steps li { flex-direction: row; text-align: left; padding: 12px 14px; }
  .px { grid-template-columns: 1fr; gap: 18px; }
  .px-tx { order: -1; text-align: center; }
  .px-tx .cx-steps { text-align: left; }
  .vw-pairx .bd { padding: 26px 20px 24px; }
  .px-qr .box { width: 240px; height: 240px; } .px-qr .box img { width: 216px; height: 216px; }
}
.vw .vw-wsw, .vw .vw-wsw .lb { color: var(--vw-card); }
.vw-swl .vw-mi { flex: 1; min-width: 0; }
.vw-mi.st .sa.allst { background: var(--vw-fill2); color: var(--vw-tx); display: inline-flex; align-items: center; justify-content: center; }
.vw-mi.st .sa.allst svg.i { width: 15px; height: 15px; margin: 0; color: var(--vw-tx); }

/* ── v1.5: respuestas rápidas y caja de mensaje limpias ── */
#vw-sugw { flex: none; background: var(--vw-card); }
.vw-sug2 { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 16px 2px; }
.vw-sug2::-webkit-scrollbar { display: none; }
.vw-qr2 { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 300px; height: 34px; padding: 0 13px 0 11px; border: 0; border-radius: 17px; background: var(--vw-fill); color: var(--vw-tx); font-size: 13px; white-space: nowrap; transition: background .15s, transform .12s; }
.vw-qr2:hover { background: var(--vw-fill2); }
.vw-qr2:active { transform: scale(.97); }
.vw-qr2 svg.i { width: 14px; height: 14px; color: var(--vw-tx3); flex: none; }
.vw-qr2 b { font-weight: 700; flex: none; }
.vw-qr2 span { color: var(--vw-tx3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vw-comp { padding: 10px 16px 16px; border-top: 0; }
#vw-sugw:empty + .vw-comp, .vw-msgs + .vw-jump + #vw-sugw:empty + .vw-comp { box-shadow: 0 -1px 0 var(--vw-bd); }
.vw-sug2 { box-shadow: 0 -1px 0 var(--vw-bd); }
.vw-bar { box-shadow: none; background: var(--vw-fill); border-radius: 24px; padding: 5px; gap: 2px; align-items: flex-end; }
.vw-bar:focus-within { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vw-tx) 18%, transparent); background: var(--vw-card); }
.vw-bar textarea { padding: 9px 8px; font-size: 15px; font-weight: 500; }
.vw-bar .vw-tool { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--vw-tx3); display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background .15s, color .15s; }
.vw-bar .vw-tool:hover { background: var(--vw-fill2); color: var(--vw-tx); }
.vw-bar .vw-tool svg.i { width: 19px; height: 19px; }
.vw-send { background: var(--vw-tx); color: var(--vw-card); }
.vw-send:disabled { opacity: 1; background: transparent; color: var(--vw-tx3); }
.vw-send svg.i { width: 18px; height: 18px; }
.vw-hint { margin: 7px 10px 0; font-size: 12px; }
@media (max-width: 760px) { .vw-sug2 { padding: 10px 10px 2px; } .vw-qr2 { max-width: 240px; } .vw-comp { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); } }
.vw-ordx { border-radius: 20px; background: var(--vw-fill); padding: 16px; margin-bottom: 12px; }
.vw-ordx .oh { display: flex; flex-direction: column; gap: 2px; }
.vw-ordx .oh .k { font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--vw-tx3); }
.vw-ordx .oh b { font-size: 26px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.vw-ordx .oh small { font-size: 13px; color: var(--vw-tx2); }
.vw-ordx .ost { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vw-ordx .p { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 720; }
.vw-ordx .p svg.i, .vw-ordx .p .vw-walogo { width: 13px; height: 13px; }
.vw-ordx .p.ok { background: #dcfce7; color: #166534; }
.vw-ordx .p.wait { background: #fef3c7; color: #92400e; }
.vw-ordx .p.info { background: #dbeafe; color: #1e40af; }
.vw-ordx .p.bad { background: #fee2e2; color: #991b1b; }
.vw-ordx .p.chat { background: var(--vw-tx); color: var(--vw-card); }
.vw-ordx .oa { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.vw-ordx .oa .vw-btn { height: 44px; border-radius: 14px; font-weight: 700; justify-content: center; }
.vw-lnk { display: block; margin: 10px auto 0; border: 0; background: none; font-size: 12.5px; font-weight: 650; color: var(--vw-tx3); }
.vw-lnk.danger:hover { color: var(--vw-bad); }
.vw-ordx .nt { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: var(--vw-tx3); }
.vw-ordx .nt b { color: var(--vw-tx2); }
.vw .vw-bar textarea, .vw .vw-bar textarea:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important; }
.vw-bar:focus-within { background: var(--vw-fill); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--vw-tx) 14%, transparent); }
.vw-bar.note, .vw-bar.note:focus-within { background: color-mix(in srgb, #f59e0b 9%, var(--vw-card)); box-shadow: 0 0 0 1.5px #fbbf24; }
.vw-bar .vw-tool.on.note { color: #d97706; background: color-mix(in srgb, #f59e0b 16%, transparent); }

/* ── v1.6: móvil más limpio y aprovechado ── */
.vw-popbg { position: fixed; inset: 0; z-index: 3390; background: rgba(14,12,24,.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: vwFade .16s; }
.vw-pop .grab { display: none; }
@media (max-width: 760px) {
  .vw-pop.sheet { z-index: 3400 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 26px 26px 0 0 !important; max-height: 78dvh; padding: 6px 10px calc(14px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -20px 50px -20px rgba(0,0,0,.45); animation: vwSheet .3s var(--vw-ease); }
  .vw-pop.sheet .grab { display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--vw-bd2); margin: 4px auto 8px; }
  .vw-pop.sheet .vw-mi { padding: 12px 10px; font-size: 15px; }
  .vw-top { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .vw-title { flex: none; }
  .vw-title h1, .vw-title small { display: none; }
  .vw-wsw { flex: 1; min-width: 0; max-width: none; justify-content: flex-start; }
  .vw-wsw .lb { flex: 1; text-align: left; }
  .vw-topr { gap: 0; margin-left: 0; }
  .vw-topr .vw-kpi { display: none; }
  .vw-topr .vw-ib { width: 36px; height: 36px; }
  .vw-avail { height: 34px; width: 34px; padding: 0; justify-content: center; border-radius: 50%; margin-right: 2px; }
  .vw-banner { padding: 8px 12px; gap: 8px; font-size: 13px; line-height: 1.3; }
  .vw-banner span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vw-banner button { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 15px; flex: none; }
  .vw-pipe { padding: 0 4px; }
  .vw-stg { padding: 7px 10px 6px; }
  .vw-stg .n { font-size: 11.5px; gap: 5px; }
  .vw-stg { min-width: 0; }
  .vw-stg .v b { font-size: 16px; }
  .vw-lhead { padding: 10px 12px 6px; }
  .vw-it { padding: 10px 12px; gap: 12px; }
  .vw-toast { top: calc(10px + env(safe-area-inset-top)); padding: 7px 14px 7px 7px; font-size: 13.5px; gap: 8px; max-width: calc(100vw - 24px); }
  .vw-toast .ti { width: 22px; height: 22px; }
  .vw-ntf { top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; padding: 9px 10px; gap: 10px; border-radius: 18px; }
}

/* ── v1.6: caja de mensaje potente, notas de voz y dictado ── */
.vw-qr2 { padding: 0 14px 0 12px; }
.vw-qr2 b { font-weight: 720; }
.vw-tip { position: fixed; z-index: 3500; max-width: 340px; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--vw-card) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px -16px rgba(10,8,30,.4), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 9%, transparent); pointer-events: none; animation: vwIn .12s ease-out; }
.vw-tip p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--vw-tx); white-space: pre-wrap; }
.vw-tip small { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 650; color: var(--vw-tx3); }
.vw-bar { position: relative; padding: 6px; border-radius: 28px; min-height: 58px; align-items: center; }
.vw .vw-bar textarea { font-size: 16.5px !important; font-weight: 650 !important; line-height: 1.4; padding: 10px 8px !important; min-height: 44px; color: var(--vw-tx); }
.vw-send { width: 46px; height: 46px; position: relative; box-shadow: 0 8px 18px -10px rgba(10,8,30,.55); transition: transform .12s, background .15s; }
.vw-send svg.i { width: 21px; height: 21px; stroke-width: 2.5; }
.vw-send:active { transform: scale(.9); }
.vw-send .s1, .vw-send .s2 { display: inline-flex; }
.vw-send .s2 { display: none; }
.vw-send.mic .s1 { display: none; }
.vw-send.mic .s2 { display: inline-flex; }
.vw-send.mic { background: #16a34a; color: #fff; }
.vw-send:disabled { background: var(--vw-fill2); color: var(--vw-tx3); box-shadow: none; }
.vw-bar.rec .vw-send { background: #16a34a; color: #fff; }
.vw-bar.rec .vw-send .s1 { display: inline-flex; } .vw-bar.rec .vw-send .s2 { display: none; }
.vw-recbar { position: absolute; left: 6px; right: 58px; top: 6px; bottom: 6px; display: none; align-items: center; gap: 10px; padding: 0 8px 0 2px; background: var(--vw-fill); border-radius: 22px; }
.vw-bar.rec .vw-recbar { display: flex; }
.vw-recbar .del { color: var(--vw-bad); }
.vw-recbar .rd { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: vwBlink 1s infinite; flex: none; }
.vw-recbar b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; min-width: 40px; }
.vw-recbar small { margin-left: auto; font-size: 12px; color: var(--vw-tx3); white-space: nowrap; }
.vw-recbar .wv { display: flex; align-items: center; gap: 3px; height: 22px; }
.vw-recbar .wv i { width: 3px; border-radius: 3px; background: #16a34a; animation: vwWave 1s ease-in-out infinite; height: 30%; }
.vw-recbar .wv i:nth-child(2n) { animation-delay: .15s; } .vw-recbar .wv i:nth-child(3n) { animation-delay: .3s; } .vw-recbar .wv i:nth-child(5n) { animation-delay: .45s; }
@keyframes vwWave { 50% { height: 100%; } }
@keyframes vwBlink { 50% { opacity: .25; } }
.vw-tool.live { color: #fff !important; background: #ef4444 !important; animation: vwPulseR 1.4s infinite; }
@keyframes vwPulseR { 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.18); } }
.vw-b a, .vw-row.in .vw-b a { text-decoration: none !important; font-weight: 650; cursor: pointer; word-break: break-all; }
.vw-row.out .vw-b a { color: inherit; opacity: .95; border-bottom: 0; }
.vw-row.in .vw-b a { color: #0a7cff; }
@media (max-width: 760px) {
  .vw .vw-bar textarea { font-size: 17px !important; font-weight: 700 !important; }
  .vw-bar { min-height: 54px; }
  .vw-bar .vw-tool { width: 36px; height: 36px; }
  .vw-recbar small { display: none; }
}
.vw-pushc { display: flex; align-items: center; gap: 11px; padding: 10px 10px 10px 13px; border-radius: 16px; background: color-mix(in srgb, #16a34a 9%, var(--vw-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #16a34a 18%, transparent); }
.vw-pushc > svg.i { width: 20px; height: 20px; color: #16a34a; flex: none; }
.vw-pushc > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vw-pushc b { font-size: 13.5px; font-weight: 750; }
.vw-pushc small { font-size: 12px; color: var(--vw-tx2); line-height: 1.35; }
.vw-pushc .vw-x.sm { width: 28px; height: 28px; }
#vw-pushc:empty { display: none; }
/* v1.7: botón enviar verde con avión de papel (blanco siempre visible) */
.vw .vw-send, .vw .vw-send.mic, .vw .vw-bar.rec .vw-send { background: #16a34a; color: #fff !important; }
.vw .vw-send:hover { background: #15803d; }
.vw .vw-send .s1 svg.i { width: 21px; height: 21px; stroke-width: 2.3; transform: translate(-1px, 1px); color: #fff; stroke: #fff; }
.vw .vw-send .s2 svg.i { color: #fff; stroke: #fff; }
.vw .vw-bar.note .vw-send { background: #f59e0b; }
.vw .vw-send:disabled { background: var(--vw-fill2); color: var(--vw-tx3) !important; }
.vw .vw-send:disabled svg.i { stroke: var(--vw-tx3); }
/* Avisos (toasts): tarjeta fina, nunca globo gordo */
.vw-toast { border-radius: 16px; padding: 9px 14px 9px 9px; font-size: 13.5px; line-height: 1.3; max-width: min(420px, calc(100vw - 24px)); align-items: center; }
.vw-toast .ti { width: 24px; height: 24px; }

/* ── v1.7: encabezado compacto + motor de ventas en vivo ── */
.vw-top { padding: 10px 16px; min-height: 58px; }
.vw-title h1 { font-size: 18px; }
.vw-title small { font-size: 11.5px; }
.vw-flow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--vw-bd); background: color-mix(in srgb, var(--vw-tx) 1.5%, var(--vw-card)); }
.vw-live { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #15803d; padding: 0 4px 0 2px; }
.vw-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: vwLive 1.8s infinite; }
@keyframes vwLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.vw-fwrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.vw-fwrap::-webkit-scrollbar { display: none; }
.vw-fs { flex: 1 1 0; min-width: 118px; display: flex; flex-direction: column; justify-content: center; gap: 1px; height: 46px; padding: 0 12px; border: 0; border-radius: 13px; text-align: left; background: color-mix(in srgb, var(--c) 6%, var(--vw-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 14%, transparent); transition: background .15s, box-shadow .15s, transform .15s; }
.vw-fs:hover { background: color-mix(in srgb, var(--c) 11%, var(--vw-card)); }
.vw-fs.on { background: color-mix(in srgb, var(--c) 16%, var(--vw-card)); box-shadow: inset 0 0 0 1.5px var(--c); }
.vw-fs .fl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--vw-tx2); white-space: nowrap; }
.vw-fs .fl i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.vw-fs .fv { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; line-height: 1.05; }
.vw-fs .fv b { font-size: 18px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--vw-tx3); }
.vw-fs.has .fv b { color: var(--vw-tx); }
.vw-fs .fv small { font-size: 11.5px; font-weight: 650; color: color-mix(in srgb, var(--c) 70%, var(--vw-tx)); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.vw-fs.bump { animation: vwBump .7s var(--vw-ease); }
@keyframes vwBump { 30% { transform: scale(1.04); box-shadow: inset 0 0 0 1.5px var(--c), 0 6px 18px -8px var(--c); } }
.vw-fa { flex: none; display: inline-flex; color: var(--vw-tx3); opacity: .55; }
.vw-fa svg.i { width: 13px; height: 13px; }
.vw-fx { flex: none; display: flex; gap: 6px; padding-left: 4px; border-left: 1px solid var(--vw-bd); margin-left: 2px; padding-left: 10px; }
.vw-fc { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; border-radius: 11px; background: transparent; font-size: 12px; font-weight: 650; color: var(--vw-tx3); white-space: nowrap; }
.vw-fc b { font-size: 14px; font-weight: 800; color: var(--vw-tx2); font-variant-numeric: tabular-nums; }
.vw-fc svg.i { width: 14px; height: 14px; }
.vw-fc:hover { background: var(--vw-hv); }
.vw-fc.today { color: #c2410c; } .vw-fc.today b { color: #c2410c; }
.vw-fc.on { background: var(--vw-fill2); color: var(--vw-tx); }
@media (max-width: 1100px) { .vw-fx span { display: none; } }
@media (max-width: 760px) {
  .vw-flow { padding: 7px 10px; gap: 6px; }
  .vw-live span { display: none; }
  .vw-fs { min-width: 98px; height: 42px; padding: 0 10px; }
  .vw-fs .fv b { font-size: 16px; }
  .vw-fx { padding-left: 6px; gap: 2px; } .vw-fc { padding: 0 8px; }
}

/* v1.7.1: etapa de la conversación visible y de tamaño fijo */
.vw-stage { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 12px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, var(--vw-card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); color: var(--vw-tx); transition: background .15s; }
.vw-stage:hover { background: color-mix(in srgb, var(--c) 16%, var(--vw-card)); }
.vw-stage .sb { display: inline-flex; gap: 3px; }
.vw-stage .sb i { width: 14px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--vw-tx) 12%, transparent); }
.vw-stage .sb i.on { background: var(--c); }
.vw-stage .sb i.now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent); }
.vw-stage b { font-size: 13.5px; font-weight: 750; white-space: nowrap; color: color-mix(in srgb, var(--c) 55%, var(--vw-tx)); }
.vw-stage svg.i { width: 14px; height: 14px; color: var(--vw-tx3); }
.vw-mi.stg .sd { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.vw-mi.stg span { flex: 1; }
.vw-mi.stg em { font-style: normal; font-size: 11px; font-weight: 750; color: var(--vw-tx3); margin-right: 8px; font-variant-numeric: tabular-nums; }
.vw-mi.stg svg.i { color: #16a34a; margin-left: auto; }
.vw-ch .who { min-width: 90px; }

@media (max-width: 760px) { .vw-stage { height: 32px; padding: 0 8px 0 10px; } .vw-stage b { font-size: 12.5px; } }
.vw-conv { container-type: inline-size; container-name: vwconv; }
.vw-ch { overflow: hidden; }
@container vwconv (max-width: 680px) { .vw-ch .vw-pill .nm { display: none; } .vw-ch .vw-pill { padding: 0 9px; } }
@container vwconv (max-width: 400px) { .vw-stage .sb { display: none; } }
@container vwconv (max-width: 470px) { .vw-ch .who span { display: none; } .vw-ch { gap: 8px; } }
.vw-stage .sb i { width: 11px; }
.vw-stage { gap: 8px; }
@container vwconv (max-width: 460px) { .vw-stage b { display: none; } .vw-stage { padding: 0 8px 0 10px; } .vw-stage .sb i { width: 13px; } }

/* ── v1.7.2: flujo de ventas limpio (sin cajas) ── */
.vw-flow2 { display: flex; align-items: center; gap: 18px; padding: 10px 20px 11px; border-bottom: 1px solid var(--vw-bd); background: var(--vw-card); overflow: visible; }
.vw-fmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.vw-fits { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.vw-fits::-webkit-scrollbar { display: none; }
.vw-fi { flex: none; display: inline-flex; align-items: baseline; gap: 7px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px; background: transparent; white-space: nowrap; transition: background .15s, transform .15s; }
.vw-fi + .vw-fi { margin-left: 2px; }
.vw-fi:hover { background: var(--vw-hv); }
.vw-fi b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 34px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--vw-tx3) 70%, transparent); }
.vw-fi.has b { color: var(--c); }
.vw-fi span { font-size: 13px; font-weight: 650; color: var(--vw-tx2); display: inline-flex; align-items: baseline; gap: 6px; }
.vw-fi small { font-size: 12px; font-weight: 650; color: var(--vw-tx3); font-variant-numeric: tabular-nums; }
.vw-fi.on { background: color-mix(in srgb, var(--c) 12%, var(--vw-card)); }
.vw-fi.on span { color: var(--vw-tx); }
.vw-fi.bump b { animation: vwBumpN .7s var(--vw-ease); display: inline-block; }
@keyframes vwBumpN { 35% { transform: translateY(-3px) scale(1.12); } }
.vw-rail { display: flex; gap: 3px; height: 4px; border-radius: 4px; overflow: hidden; margin: 0 10px; }
.vw-rail i { display: block; height: 100%; border-radius: 4px; min-width: 6px; transition: flex .4s var(--vw-ease); }
.vw-rail.empty { background: var(--vw-fill2); }
.vw-fx2 { flex: none; display: flex; gap: 4px; align-self: flex-start; }
@media (max-width: 1100px) { .vw-fx2 span { display: none; } }
@media (max-width: 760px) {
  .vw-flow2 { padding: 8px 10px 9px; gap: 8px; }
  .vw-fi { padding: 0 9px 0 8px; height: 30px; }
  .vw-fi b { font-size: 18px; line-height: 30px; }
  .vw-fi span { font-size: 12px; }
  .vw-fi small { display: none; }
  .vw-rail { margin: 0 8px; }
}
.vw-fsep { flex: none; display: inline-flex; color: var(--vw-tx3); opacity: .4; } .vw-fsep svg.i { width: 12px; height: 12px; } .vw-fi + .vw-fi { margin-left: 0; }

/* ── v1.7.9: presentación = sistema de ventas completo (bandeja, etapas, pedidos, vendido) ── */
.vw-lock2 .vwd { width: 100%; max-width: 420px; border-radius: 24px; background: var(--vw-card); box-shadow: 0 50px 100px -40px rgba(10,8,30,.5), 0 0 0 1px color-mix(in srgb, var(--vw-tx) 7%, transparent); overflow: hidden; color: var(--vw-tx); }
.vw-lock2 .vwd-h { display: flex; align-items: center; gap: 9px; padding: 14px 16px; border-bottom: 1px solid var(--vw-bd); }
.vw-lock2 .vwd-h b { flex: 1; font-size: 14.5px; font-weight: 750; }
.vw-lock2 .vwd-h .team { display: inline-flex; align-items: center; }
.vw-lock2 .vwd-h .team i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; color: #fff; box-shadow: 0 0 0 2px var(--vw-card); background: #7c3aed; }
.vw-lock2 .vwd-h .team i:nth-child(2) { background: #0ea5e9; } .vw-lock2 .vwd-h .team i:nth-child(3) { background: #f59e0b; }
.vw-lock2 .vwd-h .team em { font-style: normal; margin-left: 8px; font-size: 11.5px; font-weight: 700; color: #16a34a; }
.vw-lock2 .vwd-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 14px 4px; }
.vw-lock2 .vwd-k > div { padding: 10px 11px; border-radius: 14px; background: var(--vw-fill); }
.vw-lock2 .vwd-k small { display: block; font-size: 11px; font-weight: 650; color: var(--vw-tx3); }
.vw-lock2 .vwd-k b { position: relative; display: block; margin-top: 3px; font-size: 18px; font-weight: 800; letter-spacing: -.03em; height: 22px; }
.vw-lock2 .vwd-k .g { background: color-mix(in srgb, #22c55e 12%, var(--vw-card)); } .vw-lock2 .vwd-k .g b { color: #16a34a; }
.vw-lock2 .vwd-k .g b span { position: absolute; left: 0; top: 0; }
.vw-lock2 .vwd-k .v1 { animation: vwdA 9s infinite; } .vw-lock2 .vwd-k .v2 { opacity: 0; animation: vwdB 9s infinite; }
.vw-lock2 .vwd-f { display: flex; align-items: center; gap: 4px; padding: 10px 14px 6px; font-size: 11px; font-weight: 650; color: var(--vw-tx2); white-space: nowrap; }
.vw-lock2 .vwd-f span b { color: var(--vw-tx); font-weight: 800; } .vw-lock2 .vwd-f span.ok, .vw-lock2 .vwd-f span.ok b { color: #16a34a; }
.vw-lock2 .vwd-f i { flex: 1; height: 2px; min-width: 6px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--vw-tx) 12%, transparent), #22c55e); }
.vw-lock2 .vwd-l { padding: 4px 8px 12px; }
.vw-lock2 .vwd-l .r { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 14px; }
.vw-lock2 .vwd-l .r.hot { animation: vwdHot 9s infinite; }
.vw-lock2 .vwd-l .av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; }
.vw-lock2 .a1 { background: linear-gradient(135deg, #f472b6, #db2777); } .vw-lock2 .a2 { background: linear-gradient(135deg, #60a5fa, #2563eb); } .vw-lock2 .a3 { background: linear-gradient(135deg, #a78bfa, #7c3aed); } .vw-lock2 .a4 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.vw-lock2 .vwd-l .tx { flex: 1; min-width: 0; } .vw-lock2 .vwd-l .tx b { display: block; font-size: 13.5px; font-weight: 720; }
.vw-lock2 .vwd-l .tx small { position: relative; display: block; height: 17px; font-size: 12.5px; color: var(--vw-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vw-lock2 .vwd-l .tx small span { position: absolute; left: 0; top: 0; }
.vw-lock2 .vwd-l .m1 { animation: vwdA 9s infinite; } .vw-lock2 .vwd-l .m2 { opacity: 0; color: #16a34a; font-weight: 700; animation: vwdB 9s infinite; }
.vw-lock2 .vwd-l .st { position: relative; flex: none; width: 78px; height: 22px; }
.vw-lock2 .vwd-l .st em { position: absolute; right: 0; top: 0; font-style: normal; height: 22px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.vw-lock2 .st .sn { background: #e0f2fe; color: #0369a1; } .vw-lock2 .st .si { background: #ede9fe; color: #6d28d9; } .vw-lock2 .st .sc, .vw-lock2 .st .s1 { background: #fef3c7; color: #92400e; } .vw-lock2 .st .s2 { background: #16a34a; color: #fff; }
.vw-lock2 .st .s1 { animation: vwdA 9s infinite; } .vw-lock2 .st .s2 { opacity: 0; animation: vwdB 9s infinite; }
.vw-lock2 .vwd-l .sel { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; background: var(--vw-fill); color: var(--vw-tx2); }
@keyframes vwdA { 0%, 38% { opacity: 1; } 44%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes vwdB { 0%, 38% { opacity: 0; transform: translateY(4px); } 44%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes vwdHot { 0%, 38% { background: transparent; } 44%, 70% { background: color-mix(in srgb, #22c55e 10%, transparent); } 90%, 100% { background: transparent; } }
.vw-lock2 .vwd + .won { animation-delay: 4s; bottom: -44px; }
@media (prefers-reduced-motion: reduce) { .vw-lock2 .vwd * { animation: none !important; } .vw-lock2 .v2, .vw-lock2 .m2, .vw-lock2 .s2 { opacity: 0 !important; } }
@media (max-width: 420px) { .vw-lock2 .vwd-f { font-size: 10px; } .vw-lock2 .vwd-l .st { width: 70px; } }
@media (max-width: 480px) { .vw-lock2 .cta .vw-btn { font-size: 15px; padding: 0 14px; white-space: nowrap; } }