/* Pling 3.0 · demo. Tokens del Figma (design/figma/tokens/tokens.css), Material 3. */
:root {
  --primary: #454DF4; --on-primary: #fff; --primary-c: #E0E0FF; --on-primary-c: #00055F;
  --secondary: #B23119; --secondary-c: #FFDAD4; --on-secondary-c: #3D0700;
  --surface: #FBF8FF; --sc: #EFEDF4; --sc-low: #F5F2FA; --sc-high: #EAE7EF; --sc-highest: #E4E1E9;
  --on-surface: #1B1B21; --on-surface-v: #46464F; --outline: #777680; --outline-v: #C7C5D0;
  --error: #B3261E; --inverse: #303036; --on-inverse: #F2EFF7;
  --ok-c: #B6F2BE; --on-ok-c: #0B5A1E; --warn-c: #FFE0B2; --on-warn-c: #6B3E00; --pink-c: #FBD7F0; --on-pink-c: #5B1150;
  --wa: #25D366; --wa-dark: #075E54; --wa-bubble: #D9FDD3; --wa-bg: #EFE7DE;
  --f-title: 'Fredoka', system-ui, sans-serif; --f-text: 'Manrope', system-ui, sans-serif;
  --r-card: 16px; --r-lg: 24px; --sh-1: 0 1px 2px rgba(20, 20, 40, .08), 0 1px 3px rgba(20, 20, 40, .06);
  --sh-2: 0 4px 14px rgba(40, 40, 90, .10); --sh-3: 0 12px 32px rgba(40, 40, 90, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--f-text); color: var(--on-surface); background: #F1EFF8; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-title); font-weight: 500; margin: 0; }
p { margin: 0; }
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; user-select: none; flex: none; overflow: hidden; width: 1em; }
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: #c9c6d6; border-radius: 9px; } ::-webkit-scrollbar-track { background: transparent; }

.booting { position: fixed; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; color: var(--on-surface-v); }
.booting img { width: 140px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; padding: 10px 24px; background: rgba(251, 248, 255, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--outline-v); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; }
.brand small { font: 600 11px var(--f-text); color: var(--on-surface-v); background: var(--sc-high); padding: 3px 8px; border-radius: 99px; letter-spacing: .3px; }
.navtabs { display: flex; gap: 4px; margin-left: 12px; background: var(--sc); padding: 4px; border-radius: 99px; }
.navtabs button { padding: 8px 16px; border-radius: 99px; font: 600 14px var(--f-title); color: var(--on-surface-v); display: flex; gap: 6px; align-items: center; transition: background .2s, color .2s; }
.navtabs button.on { background: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(69, 77, 244, .3); }
.navtabs button:not(.on):hover { background: var(--sc-highest); }
.topbar .spacer { flex: 1; }
.topbar .note { font-size: 12px; color: var(--on-surface-v); display: flex; align-items: center; gap: 6px; }
.topbar .btn { white-space: nowrap; }

/* ---------- Botones M3 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 99px; font: 500 14px var(--f-title);
  letter-spacing: .1px; transition: transform .12s var(--ease), box-shadow .2s, background .2s, opacity .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn .ms { font-size: 20px; }
.btn.filled { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(69, 77, 244, .28); }
.btn.filled:hover { background: #3b42e0; }
.btn.secondary { background: var(--secondary); color: #fff; box-shadow: 0 6px 16px rgba(178, 49, 25, .25); }
.btn.tonal { background: var(--primary-c); color: var(--on-primary-c); }
.btn.outlined { border: 1px solid var(--outline-v); color: var(--on-surface); background: transparent; }
.btn.outlined:hover { background: var(--sc-low); }
.btn.text { color: var(--primary); padding: 0 12px; }
.btn.danger { background: var(--secondary-c); color: var(--on-secondary-c); }
.btn.ok { background: #1E7B34; color: #fff; }
.btn.wa { background: #1F6F3A; color: #fff; }
.btn.full { width: 100%; }
.btn.lg { height: 52px; font-size: 16px; padding: 0 24px; }
.btn.sm { height: 32px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: .45; pointer-events: none; box-shadow: none; }
.icon-btn { width: 40px; height: 40px; border-radius: 99px; display: inline-flex; align-items: center; justify-content: center; color: var(--on-surface); flex: none; position: relative; }
.icon-btn:hover { background: rgba(29, 27, 32, .06); }
.dot-badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--error); color: #fff; font: 700 10px/16px var(--f-text); text-align: center; }

/* ---------- Escenario de la demo ---------- */
.demo { padding: 14px 16px 120px; }
.viewtabs { display: none; }
.stage { display: grid; grid-template-columns: auto minmax(280px, 330px) auto; justify-content: center; align-items: start; gap: 28px; }
.col { display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 52px; transition: box-shadow .35s, transform .35s; position: relative; }
.col-label { display: flex; align-items: center; gap: 8px; font: 600 13px var(--f-title); color: var(--on-surface-v); letter-spacing: .2px; min-height: 28px; text-align: center; }
.col-label .pill { background: #fff; border: 1px solid var(--outline-v); border-radius: 99px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.col.focus .phone, .col.focus .tt-wrap { box-shadow: 0 0 0 4px rgba(69, 77, 244, .55), 0 0 0 12px rgba(69, 77, 244, .14), var(--sh-3); }

.phone { --ph: clamp(600px, calc(100vh - 180px), 820px); width: 372px; height: var(--ph); border-radius: 44px; background: #16161c; padding: 9px; box-shadow: var(--sh-3); position: relative; transition: box-shadow .35s; flex: none; }
.phone-in { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; position: relative; display: flex; flex-direction: column;
  background: radial-gradient(120% 50% at 0% 35%, rgba(255, 218, 212, .55) 0, transparent 60%), radial-gradient(120% 60% at 100% 75%, rgba(224, 224, 255, .8) 0, transparent 60%), var(--surface); }
.statusbar { height: 30px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 26px; font: 600 12px var(--f-text); color: var(--on-surface); background: #fff; position: relative; z-index: 3; }
.statusbar .icons { display: flex; gap: 4px; align-items: center; }
.statusbar .icons .ms { font-size: 15px; }
.statusbar.dark { background: transparent; color: #fff; }
.statusbar.wa { background: var(--wa-dark); color: #fff; }
.notch { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); width: 90px; height: 20px; border-radius: 12px; background: #16161c; z-index: 5; }

/* ---------- Componentes dentro del teléfono ---------- */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; animation: screen-in .28s var(--ease); }
@keyframes screen-in { from { opacity: 0; transform: translateX(10px); } }
.appbar { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; min-height: 60px; background: #fff; position: relative; z-index: 2; }
.appbar h1 { font: 500 21px/28px var(--f-title); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.appbar .sub { font: 500 11px var(--f-text); color: var(--on-surface-v); display: block; margin-top: -2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar.big h1 { font-size: 24px; padding-left: 8px; }
.avatar { width: 38px; height: 38px; border-radius: 99px; object-fit: cover; background: var(--primary-c); flex: none; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pad { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.pad > * { flex-shrink: 0; }
.footer { flex: none; padding: 12px 16px 16px; background: rgba(251, 248, 255, .96); border-top: 1px solid rgba(199, 197, 208, .5); display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 2; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--on-surface-v); }
.small { font-size: 12px; line-height: 16px; }
.tiny { font-size: 11px; line-height: 14px; }
.title-m { font: 500 16px/22px var(--f-title); }
.title-s { font: 600 14px/20px var(--f-title); }
.title-l { font: 500 20px/26px var(--f-title); }
.price { font: 600 16px var(--f-title); color: var(--primary); }
.section-h { font: 500 16px var(--f-title); margin-top: 6px; }
.card { background: #fff; border-radius: var(--r-card); padding: 14px; box-shadow: var(--sh-1); }
.card.flat { box-shadow: none; border: 1px solid var(--outline-v); }
.card.tint { background: rgba(255, 255, 255, .72); }
.card.click { cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; }
.card.click:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.hr { height: 1px; background: var(--outline-v); opacity: .6; margin: 2px 0; }
.thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--sc-high); flex: none; display: flex; align-items: center; justify-content: center; color: var(--outline); }
.thumb.sm { width: 40px; height: 40px; border-radius: 8px; }
.thumb.lg { width: 72px; height: 72px; }
.thumbs { display: flex; flex: none; }
.thumbs .thumb { width: 44px; height: 52px; border: 2px solid #fff; border-radius: 9px; }
.thumbs .thumb + .thumb { margin-left: -24px; }
.code { font: 600 13px var(--f-text); color: var(--primary); letter-spacing: .3px; }
.codechip { display: inline-flex; align-items: center; background: #B6F2BE; color: #0B3A15; font: 600 13px var(--f-title); padding: 4px 10px; border-radius: 8px; letter-spacing: .4px; }
.attrs { font-size: 12px; color: var(--on-surface-v); }

.chip { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--outline-v); font: 500 13px var(--f-text); white-space: nowrap; background: transparent; color: var(--on-surface-v); transition: background .15s; flex: none; }
.chip .ms { font-size: 18px; }
.chip.sel { background: var(--primary-c); border-color: transparent; color: var(--on-primary-c); }
.chip:hover:not(.sel) { background: var(--sc-low); }
/* Filas de chips: se desplazan en horizontal con la rueda del mouse (sin Shift), arrastrando o con la barra visible (ui.js, hscroll). */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #c9c6d6 transparent; padding-bottom: 6px; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { height: 5px; }
.chips::-webkit-scrollbar-thumb { background: #c9c6d6; border-radius: 9px; }
.chips.wrap { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
.hs-drag { cursor: grabbing; user-select: none; }
.hs-drag * { cursor: grabbing !important; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 8px; font: 500 12px var(--f-text); white-space: nowrap; flex: none; }
.badge.live { background: var(--secondary-c); color: var(--secondary); font-weight: 700; }
.badge.live::before { content: ''; width: 7px; height: 7px; border-radius: 9px; background: var(--secondary); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.badge.blue { background: var(--primary-c); color: var(--on-primary-c); border: 1px solid #c8c9ff; }
.badge.line { border: 1px solid var(--outline-v); color: var(--on-surface); }
.badge.ok { background: var(--ok-c); color: var(--on-ok-c); }
.badge.warn { background: var(--warn-c); color: var(--on-warn-c); }
.badge.err { background: var(--secondary-c); color: var(--on-secondary-c); }
.badge.grey { background: var(--sc-high); color: var(--on-surface-v); }

/* Estado de la orden (D-10) */
.st { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 8px; font: 500 13px var(--f-text); white-space: nowrap; flex: none; }
.st-aconfirmar { background: var(--secondary-c); color: var(--on-secondary-c); }
.st-cotizar { background: var(--warn-c); color: var(--on-warn-c); }
.st-aprobado { background: var(--primary-c); color: var(--on-primary-c); }
.st-enviando { background: var(--pink-c); color: var(--on-pink-c); }
.st-conforme { background: var(--ok-c); color: var(--on-ok-c); }
.st-luego { background: var(--sc-highest); color: var(--on-surface); }
.st-acancelar, .st-adevolver { background: #fff; color: var(--error); border: 1px solid #f0b8b0; }
.st-cancelada, .st-devuelta { background: var(--sc-high); color: var(--on-surface-v); text-decoration: none; }

/* Campos */
.field { position: relative; display: block; }
/* Caja del campo: borde, ícono inicial, prefijo y botón final en fila; el input ocupa el resto. */
.field .fbox { display: flex; align-items: center; gap: 10px; min-height: 52px; border: 1px solid var(--outline); border-radius: 6px; padding: 0 14px; background: transparent; transition: border-color .15s; }
.field .fbox:focus-within { border: 2px solid var(--primary); padding: 0 13px; }
.field.has-err .fbox { border-color: var(--error); }
.field .fbox input, .field .fbox textarea, .field .fbox select { flex: 1; min-width: 0; width: 100%; height: 50px; border: 0; padding: 0; background: transparent; outline: none; font-size: 15px; }
.field.area .fbox { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.field.area .fbox:focus-within { padding-top: 11px; padding-bottom: 11px; }
.field .fbox textarea { height: 52px; resize: none; }
.field .fbox .lead { color: var(--on-surface-v); font-size: 22px; }
.field .pfx { flex: none; color: var(--on-surface); font-size: 15px; padding-right: 10px; border-right: 1px solid var(--outline-v); line-height: 22px; }
.field .fclear { flex: none; display: flex; color: var(--on-surface-v); border-radius: 99px; padding: 2px; }
.field .fclear:hover { background: var(--sc-high); }
.field .fclear .ms { font-size: 22px; }
.field .flabel { position: absolute; left: 10px; top: -8px; padding: 0 4px; font-size: 12px; line-height: 16px; color: var(--on-surface-v); background: var(--surface); border-radius: 4px; pointer-events: none; }
.field .fbox:focus-within + .flabel { color: var(--primary); }
.field .help { font-size: 11px; color: var(--on-surface-v); margin: 4px 4px 0; display: block; }
.on-white .field .flabel { background: #fff; }
.switch { width: 44px; height: 26px; border-radius: 99px; background: var(--sc-highest); border: 2px solid var(--outline); position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 4px; width: 16px; height: 16px; border-radius: 99px; background: var(--outline); transition: all .2s var(--ease); }
.switch.on { background: var(--primary); border-color: var(--primary); }
.switch.on::after { left: 20px; top: 2px; width: 18px; height: 18px; background: #fff; }
.check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--outline); display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; transition: all .15s; }
.check.on { background: var(--primary); border-color: var(--primary); }
.check .ms { font-size: 18px; }

/* Barra inferior */
.bottomnav { flex: none; display: flex; background: var(--sc-low); padding: 8px 2px 12px; position: relative; z-index: 2; border-top: 1px solid rgba(199, 197, 208, .4); }
.navitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 11px var(--f-title); color: var(--on-surface-v); position: relative; }
.navitem .ic { width: 56px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; transition: background .2s; position: relative; }
.navitem.on { color: var(--secondary); }
.navitem.on .ic { background: var(--secondary-c); }
.navitem.on .ms { font-variation-settings: 'FILL' 1; }
.navitem.locked { opacity: .38; }
.navitem .lock { position: absolute; right: 8px; top: -2px; font-size: 13px; }

/* Hojas, diálogos y avisos */
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); z-index: 20; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; background: var(--sc-low); border-radius: 28px 28px 0 0; max-height: 88%; display: flex; flex-direction: column; animation: sheet-up .32s var(--ease); box-shadow: var(--sh-3); }
@keyframes sheet-up { from { transform: translateY(100%); } }
.sheet .grab { width: 32px; height: 4px; border-radius: 4px; background: var(--outline); opacity: .5; margin: 12px auto 4px; flex: none; }
.sheet .sh-title { font: 500 20px var(--f-title); padding: 6px 20px 4px; }
.sheet .sh-body { overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.sheet .sh-body > * { flex-shrink: 0; }
.dialog { position: absolute; left: 24px; right: 24px; top: 50%; transform: translateY(-50%); z-index: 22; background: var(--sc-high); border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: pop .25s var(--ease); box-shadow: var(--sh-3); }
@keyframes pop { from { opacity: 0; transform: translateY(-50%) scale(.92); } }
.dialog h3 { font: 500 22px var(--f-title); }
.dialog .ic-top { width: 48px; height: 48px; border-radius: 99px; display: flex; align-items: center; justify-content: center; background: var(--primary-c); color: var(--primary); align-self: center; }
.dialog .actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.toast { position: absolute; left: 12px; right: 12px; bottom: 84px; z-index: 30; background: var(--inverse); color: var(--on-inverse); border-radius: 12px; padding: 12px 14px; font-size: 13px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sh-3); animation: toast-in .3s var(--ease); }
.toast.warn { background: #5b2a12; }
.toast.good { background: #134b24; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }
.push { position: absolute; left: 10px; right: 10px; top: 36px; z-index: 31; background: rgba(255, 255, 255, .97); border-radius: 18px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; box-shadow: var(--sh-3); animation: push-in .35s var(--ease); font-size: 13px; }
@keyframes push-in { from { opacity: 0; transform: translateY(-120%); } }

/* ---------- Consola del live (DEC-22) ---------- */
.clockpill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font: 500 14px var(--f-title); align-self: center; transition: background .4s, color .4s; }
.clockpill .dot { width: 8px; height: 8px; border-radius: 9px; background: currentColor; animation: blink 1.2s infinite; }
.clock-green { background: #CDF5D3; color: #0B5A1E; }
.clock-yellow { background: #FFE8A8; color: #6B4A00; }
.clock-red { background: var(--secondary-c); color: var(--secondary); }
.livecard { background: #fff; border-radius: 22px; padding: 14px; box-shadow: var(--sh-2); display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; overflow: hidden; }
.livecard .img { width: 100%; aspect-ratio: 4 / 3.2; border-radius: 14px; object-fit: cover; background: var(--sc-high); }
.livecard .bigcode { font: 500 52px/56px var(--f-title); letter-spacing: -1px; margin-top: 6px; }
.livecard .soldstamp { position: absolute; top: 26px; left: 26px; background: var(--secondary); color: #fff; font: 600 14px var(--f-title); padding: 6px 14px; border-radius: 8px; transform: rotate(-4deg); box-shadow: var(--sh-2); }
.activity { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.activity .badge { font-size: 13px; padding: 6px 12px; }
.credit-mini { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .8); border: 1px solid var(--outline-v); border-radius: 12px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.credit-mini b { font: 600 14px var(--f-title); }
.credit-mini .grow { min-width: 0; white-space: nowrap; }
.credit-mini .grow .tiny { overflow: hidden; text-overflow: ellipsis; }
.credit-mini.neg { border-color: #f0b8b0; background: #fff3f1; }
.credit-mini.neg b { color: var(--error); }
.credit-mini .bump { animation: bump .5s var(--ease); display: inline-block; }
@keyframes bump { 30% { transform: scale(1.25); color: var(--secondary); } }
.soldbar { border-radius: 18px; padding: 12px 14px; background: linear-gradient(135deg, #454DF4, #7a5cf5); color: #fff; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px rgba(69, 77, 244, .35); animation: pop2 .4s var(--ease); }
@keyframes pop2 { from { opacity: 0; transform: scale(.94); } }
.soldbar .who { font: 500 17px var(--f-title); }
.soldbar .info { font-size: 12.5px; opacity: .95; display: flex; gap: 6px; align-items: flex-start; }
.soldbar .btn { background: #fff; color: var(--primary); }
.plingburst { position: absolute; inset: 0; z-index: 25; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.plingburst .bubble { background: var(--secondary); color: #fff; font: 700 44px var(--f-title); padding: 10px 28px; border-radius: 26px; transform: rotate(-6deg); box-shadow: 0 16px 40px rgba(178, 49, 25, .45); animation: burst 1.6s var(--ease) forwards; text-align: center; }
.plingburst .bubble small { display: block; font: 600 13px var(--f-text); }
@keyframes burst { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 18% { transform: scale(1.12) rotate(-6deg); opacity: 1; } 30% { transform: scale(1) rotate(-6deg); } 80% { opacity: 1; } 100% { transform: scale(.9) rotate(-6deg) translateY(-30px); opacity: 0; } }
.pickcard { background: #fff; border-radius: 18px; padding: 10px; border: 2px solid transparent; cursor: pointer; display: flex; gap: 12px; align-items: center; transition: border-color .15s, box-shadow .2s; box-shadow: var(--sh-1); }
.pickcard.sel { border-color: var(--primary); }
.pickcard.out { opacity: .55; }
.pickcard img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }

/* Cámara para leer código (DEC-06) */
.camera { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 1 / 1; background: #222; }
.camera img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7) saturate(.8); }
.camera .frame { position: absolute; inset: 22%; border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.camera .frame::before, .camera .frame::after { content: ''; position: absolute; inset: -3px; border: 3px solid #fff; border-radius: 18px; clip-path: polygon(0 0, 30% 0, 30% 6%, 6% 6%, 6% 30%, 0 30%, 0 70%, 6% 70%, 6% 94%, 30% 94%, 30% 100%, 70% 100%, 70% 94%, 94% 94%, 94% 70%, 100% 70%, 100% 30%, 94% 30%, 94% 6%, 70% 6%, 70% 0); }
.camera .laser { position: absolute; left: 24%; right: 24%; height: 2px; background: #ff5a3c; box-shadow: 0 0 12px #ff5a3c; animation: laser 1.8s ease-in-out infinite alternate; top: 24%; }
@keyframes laser { to { top: 75%; } }
.camera .tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); background: #fff; padding: 8px 14px; border-radius: 6px; font: 600 26px var(--f-title); box-shadow: var(--sh-2); }

/* Mapa */
.map { position: relative; border-radius: 14px; overflow: hidden; height: 150px; background: #e8e6e1; cursor: crosshair; }
.map img { width: 100%; height: 100%; object-fit: cover; }
.map .pin { position: absolute; transform: translate(-50%, -100%); color: #D93025; font-size: 38px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); transition: left .25s var(--ease), top .25s var(--ease); width: auto; }

/* ---------- TikTok Live simulado ---------- */
.tt-wrap { width: 100%; max-width: 330px; aspect-ratio: 9 / 16.6; max-height: calc(100vh - 230px); border-radius: 28px; overflow: hidden; position: relative; background: #000; box-shadow: var(--sh-3); color: #fff; transition: box-shadow .35s; min-height: 480px; }
.tt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s; }
.tt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0, transparent 22%, transparent 55%, rgba(0, 0, 0, .65) 100%); }
.tt-top { position: absolute; top: 12px; left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; }
.tt-host { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .35); border-radius: 99px; padding: 3px 10px 3px 3px; font-size: 11px; }
.tt-host img { width: 28px; height: 28px; border-radius: 99px; object-fit: cover; }
.tt-host b { display: block; font-size: 12px; }
.tt-live { background: #FE2C55; font: 800 10px var(--f-text); padding: 3px 6px; border-radius: 4px; letter-spacing: .5px; }
.tt-viewers { background: rgba(0, 0, 0, .35); border-radius: 99px; padding: 4px 8px; font-size: 11px; display: flex; align-items: center; gap: 3px; margin-left: auto; }
.tt-viewers .ms { font-size: 14px; }
.tt-comments { position: absolute; left: 10px; bottom: 58px; width: 66%; display: flex; flex-direction: column; gap: 5px; mask-image: linear-gradient(transparent, #000 40%); -webkit-mask-image: linear-gradient(transparent, #000 40%); }
.tt-c { font-size: 12px; line-height: 15px; background: rgba(0, 0, 0, .28); border-radius: 12px; padding: 4px 8px; align-self: flex-start; animation: cin .35s var(--ease); }
.tt-c b { color: #b9c3ff; font-weight: 700; margin-right: 4px; }
@keyframes cin { from { opacity: 0; transform: translateY(8px); } }
.tt-bottom { position: absolute; left: 10px; right: 10px; bottom: 12px; display: flex; gap: 8px; align-items: center; }
.tt-input { flex: 1; height: 34px; border-radius: 99px; background: rgba(255, 255, 255, .18); font-size: 12px; display: flex; align-items: center; padding: 0 12px; color: rgba(255, 255, 255, .8); }
.tt-act { width: 34px; height: 34px; border-radius: 99px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.tt-act .ms { font-size: 19px; }
.tt-hearts { position: absolute; right: 14px; bottom: 56px; width: 40px; height: 200px; pointer-events: none; }
.tt-heart { position: absolute; bottom: 0; right: 8px; color: #FE2C55; animation: heart 2.6s ease-out forwards; font-size: 22px; }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-22px, -190px) scale(1.2); } }
.tt-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(160deg, #1d1d2b, #0d0d14); text-align: center; padding: 30px; }
.tt-off .ms { font-size: 44px; opacity: .6; }
.tt-flash { position: absolute; inset: 0; background: #fff; animation: flash .45s ease-out forwards; pointer-events: none; z-index: 9; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

/* Sticker con el código (DEC-18, D-33) */
.sticker { position: absolute; right: 12px; top: 64px; z-index: 4; transform: rotate(4deg); animation: stick .45s var(--ease); }
@keyframes stick { from { transform: rotate(-12deg) scale(.4); opacity: 0; } }
.sticker .s-in { background: #fff; color: #1B1B21; border-radius: 14px; padding: 6px 12px 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); text-align: center; }
.sticker .s-in small { display: block; font: 700 9px var(--f-text); color: #888; letter-spacing: 1px; }
.sticker .s-code { font: 600 30px/34px var(--f-title); letter-spacing: 1px; }
.sticker.captcha .s-in { background: repeating-linear-gradient(45deg, #fff8e8 0 6px, #fff 6px 12px); }
.sticker.captcha .s-code span { display: inline-block; font-family: 'Fredoka'; }
.sticker.captcha svg.noise { position: absolute; inset: 0; pointer-events: none; }
.sticker.iconos .s-in { background: #FFF2C4; }
.sticker.iconos .s-code { font-size: 24px; letter-spacing: 3px; }
.tt-caption { font-size: 11.5px; color: var(--on-surface-v); text-align: center; max-width: 320px; line-height: 16px; }

/* ---------- WhatsApp y web del comprador ---------- */
.wa-head { flex: none; background: var(--wa-dark); color: #fff; display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.wa-head .avatar { width: 36px; height: 36px; background: #fff; padding: 4px; object-fit: contain; }
.wa-head b { font-size: 15px; display: block; }
.wa-head small { font-size: 11px; opacity: .8; display: flex; align-items: center; gap: 3px; }
.wa-body { flex: 1; min-height: 0; overflow-y: auto; background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px); background-size: 14px 14px; padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.wa-day { align-self: center; background: #fff; font-size: 11px; color: #54656f; border-radius: 8px; padding: 4px 10px; box-shadow: var(--sh-1); margin: 4px 0; }
.wa-sys { align-self: center; background: #FFF5C4; font-size: 11px; color: #54656f; border-radius: 8px; padding: 6px 10px; max-width: 86%; text-align: center; }
.bubble { max-width: 82%; padding: 6px 8px 4px 9px; border-radius: 10px; font-size: 13.5px; line-height: 18px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); position: relative; animation: bin .25s var(--ease); white-space: pre-wrap; word-wrap: break-word; }
@keyframes bin { from { opacity: 0; transform: translateY(6px); } }
.bubble.in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bubble.out { background: var(--wa-bubble); align-self: flex-end; border-top-right-radius: 2px; }
.bubble .meta { font-size: 10px; color: #667781; text-align: right; margin-top: 2px; display: flex; gap: 3px; justify-content: flex-end; align-items: center; }
.bubble .meta .ms { font-size: 14px; color: #53bdeb; }
.bubble .bot { font: 700 10.5px var(--f-text); color: #1F6F3A; display: flex; align-items: center; gap: 3px; margin-bottom: 2px; }
.bubble .bot .ms { font-size: 14px; }
.linkcard { display: block; margin-top: 6px; background: rgba(0, 0, 0, .045); border-radius: 8px; overflow: hidden; text-align: left; width: 100%; transition: background .15s; }
.linkcard:hover { background: rgba(0, 0, 0, .08); }
.linkcard .lc { display: flex; gap: 8px; padding: 7px; align-items: center; }
.linkcard img, .linkcard .lcimg { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--primary); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.linkcard b { font-size: 12.5px; display: block; line-height: 16px; }
.linkcard u { font-size: 11.5px; color: #027eb5; text-decoration: none; display: block; }
.shot { width: 150px; border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 9 / 15; background: #111; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .sticker { top: 22px; right: 6px; transform: rotate(4deg) scale(.6); transform-origin: top right; animation: none; }
.shot .blur { position: absolute; inset: 0; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.shot .live-tag { position: absolute; top: 6px; left: 6px; background: #FE2C55; color: #fff; font: 800 8px var(--f-text); padding: 2px 4px; border-radius: 3px; }
.quick { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.quick button { background: #fff; border-radius: 8px; padding: 7px; color: #027eb5; font-weight: 600; font-size: 13px; box-shadow: 0 1px .5px rgba(0, 0, 0, .13); }
.quick button:hover { background: #f4f4f4; }
.wa-compose { flex: none; display: flex; gap: 6px; padding: 8px; background: #F0F2F5; align-items: center; }
.wa-compose input { flex: 1; min-width: 0; height: 40px; border-radius: 99px; border: 0; padding: 0 14px; outline: none; font-size: 13.5px; background: #fff; }
.wa-round { width: 40px; height: 40px; border-radius: 99px; background: #1F8F4E; color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.wa-shotbtn { flex: none; display: flex; align-items: center; gap: 6px; background: #fff; color: #1F6F3A; font: 700 12.5px var(--f-text); height: 40px; padding: 0 12px; border-radius: 99px; box-shadow: var(--sh-1); }
.wa-shotbtn .ms { font-size: 20px; }
.wa-shotbtn.pulse { animation: glow 1.6s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(37, 211, 102, .3); } }
.browser { flex: none; background: #fff; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--sc-highest); }
.browser .url { flex: 1; background: var(--sc); border-radius: 99px; height: 32px; display: flex; align-items: center; gap: 6px; padding: 0 12px; font-size: 12.5px; color: var(--on-surface-v); overflow: hidden; white-space: nowrap; }
.browser .url .ms { font-size: 15px; }
.timerbar { flex: none; background: #F7D9D4; color: var(--secondary); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 14px; }
.timerbar b { font-weight: 800; font-variant-numeric: tabular-nums; }
.timerbar.ok { background: #D7F3DC; color: #0B5A1E; }
.prod-hero { position: relative; height: 270px; flex: none; }
.prod-hero img { width: 100%; height: 100%; object-fit: cover; }
.prod-sheet { margin-top: -26px; position: relative; border-radius: 26px 26px 0 0; background: radial-gradient(120% 60% at 100% 10%, rgba(255, 218, 212, .45), transparent 60%), var(--surface); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { border-radius: 14px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.tile .v { font: 500 17px var(--f-title); display: flex; align-items: center; gap: 6px; }
.tile .k { font-size: 12px; color: var(--on-surface-v); }
.tile.p { background: var(--primary); color: #fff; }
.tile.p .k { color: rgba(255, 255, 255, .85); }
.tile.s { background: #F9DAD6; }
.qrbox { background: #fff; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; box-shadow: var(--sh-2); position: relative; }
.qrbox svg { width: 190px; height: 190px; }
.qrbox.dead svg { opacity: .15; filter: blur(1px); }
.spinner { width: 16px; height: 16px; border-radius: 99px; border: 2px solid var(--primary-c); border-top-color: var(--primary); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.bankpop { position: absolute; left: 12px; right: 12px; top: 40px; z-index: 32; background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--sh-3); display: flex; gap: 10px; align-items: center; animation: push-in .35s var(--ease); }
.bankpop .bk { width: 36px; height: 36px; border-radius: 10px; background: #0b4f9c; color: #fff; display: flex; align-items: center; justify-content: center; font: 800 12px var(--f-text); flex: none; }
.success-ic { width: 64px; height: 64px; border-radius: 99px; background: #B6F2BE; color: #1F6F3A; display: flex; align-items: center; justify-content: center; align-self: center; animation: pop2 .4s var(--ease); }
.success-ic .ms { font-size: 34px; }
.agenda { border-radius: 18px; background: var(--primary); color: #fff; padding: 16px; text-align: center; box-shadow: 0 10px 24px rgba(69, 77, 244, .3); }
.agenda small { display: block; font-size: 11px; letter-spacing: 1px; opacity: .9; margin-top: 6px; }
.agenda b { font: 600 18px var(--f-title); }
.slotbtn { height: 40px; border-radius: 8px; border: 1px solid var(--outline-v); width: 100%; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; }
.slotbtn.sel { background: var(--primary-c); border-color: transparent; color: var(--on-primary-c); font-weight: 600; }
.slotbtn[disabled] { opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.tl:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--outline-v); }
.tl.done:not(:last-child)::before { background: var(--primary); }
.tl .b { width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--outline-v); display: flex; align-items: center; justify-content: center; flex: none; background: #fff; color: var(--outline); }
.tl.done .b { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl.now .b { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 5px rgba(69, 77, 244, .15); }
.tl .b .ms { font-size: 16px; }
.tl .t { font: 500 14px var(--f-title); }
.prodgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--sh-1); text-align: left; position: relative; }
.pg img, .pg .noimg { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pg .in { padding: 8px 10px 10px; }
.pg .nm { font-size: 12.5px; font-weight: 600; line-height: 16px; height: 32px; overflow: hidden; }
.pg .tag { position: absolute; top: 8px; left: 8px; }
.pg.out img { filter: grayscale(1) opacity(.6); }
.noimg { display: flex; align-items: center; justify-content: center; background: var(--sc-high); color: var(--outline); }
.logline { display: flex; gap: 10px; font-size: 12.5px; line-height: 17px; padding: 6px 0; }
.logline .when { color: var(--on-surface-v); flex: none; width: 74px; font-size: 11.5px; }
.logline.warn { color: var(--secondary); font-weight: 600; }

/* Etiqueta de estado de un número grande */
.stat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat3 .tile .v { font-size: 15px; }
.fab-ext { position: absolute; right: 16px; bottom: 82px; z-index: 6; height: 52px; padding: 0 18px; border-radius: 16px; display: flex; align-items: center; gap: 10px; font: 500 15px var(--f-title); background: var(--sc-highest); box-shadow: var(--sh-2); }
.fab-ext.over { background: var(--secondary); color: #fff; animation: shake 2.4s infinite; }
@keyframes shake { 0%, 90%, 100% { transform: none; } 92% { transform: translateX(-3px); } 94% { transform: translateX(3px); } 96% { transform: translateX(-2px); } }
.tabs { display: flex; overflow-x: auto; background: #fff; flex: none; border-bottom: 1px solid var(--outline-v); scrollbar-width: thin; scrollbar-color: #d6d4e0 transparent; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { height: 4px; }
.tabs button { flex: none; padding: 12px 14px 10px; font: 500 14px var(--f-title); color: var(--on-surface-v); position: relative; white-space: nowrap; }
.tabs button.on { color: var(--primary); }
.tabs button.on::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.tabs button .n { font: 700 10px var(--f-text); background: var(--secondary); color: #fff; border-radius: 9px; padding: 1px 5px; margin-left: 4px; }
.empty { text-align: center; color: var(--on-surface-v); padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; }
.empty .ms { font-size: 40px; color: var(--outline-v); }
.info { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-c); color: var(--on-primary-c); border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 17px; }
.info .ms { font-size: 20px; }
.info.warn { background: var(--warn-c); color: var(--on-warn-c); }
.info.err { background: var(--secondary-c); color: var(--on-secondary-c); }
.info.ok { background: #D7F3DC; color: var(--on-ok-c); }
.decref { font: 600 10px var(--f-text); color: var(--primary); background: #fff; border: 1px solid #c8c9ff; border-radius: 6px; padding: 1px 5px; white-space: nowrap; vertical-align: middle; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th { text-align: left; font-weight: 600; color: var(--on-surface-v); padding: 6px 4px; border-bottom: 1px solid var(--outline-v); }
.table td { padding: 7px 4px; border-bottom: 1px solid var(--sc-high); }
.table tr.cur td { background: var(--primary-c); font-weight: 700; }

/* ---------- Panel de demo ---------- */
.fab-demo { position: fixed; right: 20px; bottom: 20px; z-index: 60; height: 52px; padding: 0 18px 0 14px; border-radius: 18px; background: #1B1B21; color: #fff; display: flex; align-items: center; gap: 8px; font: 500 15px var(--f-title); box-shadow: var(--sh-3); }
.fab-demo:hover { background: #2c2c35; }
.panel { position: fixed; right: 20px; bottom: 84px; z-index: 61; width: 380px; max-height: calc(100vh - 110px); background: #fff; border-radius: 22px; box-shadow: 0 20px 60px rgba(20, 20, 50, .3); display: flex; flex-direction: column; animation: panel-in .25s var(--ease); overflow: hidden; }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.panel-h { padding: 14px 16px 10px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--sc-high); }
.panel-h h3 { font-size: 17px; flex: 1; }
.panel-b { overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.panel-sec h4 { font: 600 12px var(--f-text); letter-spacing: .6px; text-transform: uppercase; color: var(--on-surface-v); margin: 6px 0 8px; }
.panel .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pbtn { text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--sc-low); font-size: 12.5px; line-height: 16px; display: flex; gap: 8px; align-items: flex-start; transition: background .15s; }
.pbtn:hover { background: var(--primary-c); }
.pbtn .ms { font-size: 18px; color: var(--primary); }
.pbtn b { display: block; font-weight: 700; }
.pbtn.on { background: var(--primary); color: #fff; }
.pbtn.on .ms { color: #fff; }
.scen-desc { font-size: 12.5px; line-height: 17px; background: #F5F2FA; border-left: 3px solid var(--primary); padding: 8px 10px; border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.seg { display: inline-flex; background: var(--sc); border-radius: 99px; padding: 3px; gap: 2px; }
.seg button { padding: 5px 11px; border-radius: 99px; font: 600 12px var(--f-text); color: var(--on-surface-v); }
.seg button.on { background: #fff; color: var(--primary); box-shadow: var(--sh-1); }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
.simclock { font: 600 13px var(--f-text); background: var(--sc); border-radius: 8px; padding: 4px 8px; font-variant-numeric: tabular-nums; }

/* ---------- Recorrido guiado ---------- */
.tourbar.inline { position: static; transform: none; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; animation: pop2 .3s var(--ease); }
.tourbar.inline h4 { font-size: 17px; line-height: 22px; }
.tourbar.inline p { font-size: 12.5px; line-height: 17px; }
.tourbar.inline .row { justify-content: flex-end; }
.tourbar.inline .btn.sm { padding: 0 10px; }
.scencard .btn.tonal { background: #33335a; color: #fff; }
.scencard .btn.tonal:hover { background: #3f3f6e; }
.tourbar.fixed { display: none; }
.demo.touring .tt-wrap { height: clamp(300px, calc(100vh - 420px), 560px); max-height: none; min-height: 0; width: auto; aspect-ratio: 9 / 16.6; }
.demo.touring .tt-caption, .demo.touring .col > .btn.wa, .demo.touring .col > .btn.outlined { display: none; }
.tourbar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 55; width: min(760px, calc(100vw - 230px)); background: #1B1B21; color: #fff; border-radius: 22px; padding: 14px 16px 14px 20px; display: flex; gap: 16px; align-items: center; box-shadow: 0 18px 50px rgba(20, 20, 50, .35); animation: toast-in .3s var(--ease); }
.tourbar .stepn { font: 600 11px var(--f-text); letter-spacing: .8px; color: #b9bcff; text-transform: uppercase; display: flex; gap: 8px; align-items: center; }
.tourbar h4 { font: 500 18px var(--f-title); margin: 2px 0 3px; }
.tourbar p { font-size: 13px; line-height: 18px; color: #d9d8e4; }
.tourbar .dec { color: #b9bcff; font-size: 11.5px; margin-top: 4px; display: block; }
.tourbar .btn.outlined { color: #fff; border-color: #55546a; }
.tourbar .btn.outlined:hover { background: #2a2a35; }
.tourbar .prog { height: 3px; background: #33334a; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.tourbar .prog i { display: block; height: 100%; background: #8f94ff; transition: width .4s var(--ease); }
.tour-start { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 14px; flex-wrap: wrap; }

/* ---------- El problema hoy ---------- */
.story { max-width: 1180px; margin: 0 auto; padding: 36px 24px 120px; }
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.hero h1 { font: 600 44px/50px var(--f-title); letter-spacing: -.5px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero p.lead { font-size: 18px; line-height: 28px; color: var(--on-surface-v); margin: 16px 0 24px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-art { position: relative; height: 340px; }
.hero-art .ph { position: absolute; border-radius: 22px; overflow: hidden; box-shadow: var(--sh-3); }
.hero-art .ph img { width: 100%; height: 100%; object-fit: cover; }
.hero-art .note { position: absolute; background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: var(--sh-3); font-size: 13px; display: flex; gap: 8px; align-items: center; }
.clock-big { font: 600 64px var(--f-title); color: var(--secondary); letter-spacing: -1px; line-height: 1; }
.daytl { position: relative; display: flex; flex-direction: column; gap: 22px; }
.daytl::before { content: ''; position: absolute; left: 76px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--primary-c), var(--secondary-c)); }
.pain { display: grid; grid-template-columns: 64px 26px 1fr; gap: 0 16px; align-items: start; }
.pain .hour { font: 600 16px var(--f-title); color: var(--on-surface-v); text-align: right; padding-top: 18px; }
.pain .knob { width: 22px; height: 22px; border-radius: 99px; background: #fff; border: 4px solid var(--secondary); margin-top: 18px; position: relative; z-index: 1; }
.pain-card { background: #fff; border-radius: 22px; box-shadow: var(--sh-2); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.pain-card .before, .pain-card .after { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.pain-card .after { background: linear-gradient(160deg, #F2F2FF, #FBF8FF); border-left: 1px dashed var(--outline-v); }
.pain-card .lbl { font: 700 11px var(--f-text); letter-spacing: 1px; text-transform: uppercase; display: flex; gap: 6px; align-items: center; }
.pain-card .before .lbl { color: var(--secondary); }
.pain-card .after .lbl { color: var(--primary); }
.pain-card h3 { font: 500 20px/26px var(--f-title); }
.pain-card p { font-size: 14px; line-height: 21px; color: var(--on-surface-v); }
.pain-card .src { font-size: 11.5px; color: var(--outline); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pain-card .src span { background: var(--sc); border-radius: 6px; padding: 2px 6px; font-weight: 600; color: var(--on-surface-v); }
.art { border-radius: 14px; padding: 12px; font-size: 13px; }
.art.notebook { background: repeating-linear-gradient(#fffdf5 0 22px, #c6d4f0 22px 23px); font-family: 'Comic Sans MS', 'Segoe Print', cursive; color: #2b3a8f; line-height: 23px; border-left: 3px solid #f4a3a3; padding-left: 14px; }
.art.notebook s { color: #b33; }
.art.chat { background: var(--wa-bg); display: flex; flex-direction: column; gap: 4px; }
.art.chat div { background: #fff; border-radius: 8px; padding: 4px 8px; align-self: flex-start; font-size: 12.5px; }
.art.chat div b { color: #c2185b; }
.art.receipt { background: #fff; border: 1px dashed var(--outline-v); font-family: ui-monospace, Consolas, monospace; font-size: 12px; position: relative; }
.art.receipt .stamp { position: absolute; right: 10px; top: 14px; border: 2px solid var(--secondary); color: var(--secondary); font: 800 12px var(--f-text); padding: 2px 6px; transform: rotate(10deg); border-radius: 4px; }
.pling-art { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pling-art .row { gap: 8px; }
.solve-link { align-self: flex-start; margin-top: auto; }
.story-close { margin-top: 44px; background: linear-gradient(135deg, #454DF4, #6c4ff5); border-radius: 28px; color: #fff; padding: 34px 36px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
.story-close h2 { font: 600 30px/36px var(--f-title); }
.story-close p { opacity: .92; margin-top: 10px; line-height: 22px; }
.story-close .btn.filled { background: #fff; color: var(--primary); }
.story-close ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.story-close li { display: flex; gap: 10px; font-size: 14px; align-items: flex-start; }

/* ---------- Calculadora ---------- */
.calc { max-width: 1180px; margin: 0 auto; padding: 32px 24px 120px; }
.calc h1 { font: 600 36px/42px var(--f-title); }
.calc .lead { color: var(--on-surface-v); font-size: 16px; line-height: 24px; margin: 8px 0 22px; max-width: 760px; }
.calc-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: start; }
.inp { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: var(--sh-1); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.inp label { font: 600 14px var(--f-text); }
.inp .src { grid-column: 1 / -1; font-size: 11.5px; line-height: 15px; color: var(--on-surface-v); display: flex; gap: 6px; }
.inp .src .ms { font-size: 15px; color: var(--outline); }
.inp .src.pl .ms { color: var(--primary); }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper input { width: 70px; height: 36px; border: 1px solid var(--outline-v); border-radius: 10px; text-align: center; font: 600 15px var(--f-text); outline: none; }
.stepper input:focus { border-color: var(--primary); }
.stepper button { width: 30px; height: 30px; border-radius: 99px; background: var(--sc); display: flex; align-items: center; justify-content: center; }
.stepper button .ms { font-size: 18px; }
.stepper .u { font-size: 11.5px; color: var(--on-surface-v); width: 86px; line-height: 14px; }
.inp .pling-v { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; background: var(--sc-low); border-radius: 10px; padding: 6px 8px; margin-top: 4px; }
.inp .pling-v input { width: 54px; height: 28px; border: 1px solid var(--outline-v); border-radius: 8px; text-align: center; font: 600 13px var(--f-text); }
.inputs { display: flex; flex-direction: column; gap: 10px; }
.inputs h3 { font: 500 18px var(--f-title); margin: 10px 0 2px; }
.results { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }
.kpi-hero { background: linear-gradient(135deg, #454DF4, #6c4ff5); color: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 16px 40px rgba(69, 77, 244, .3); }
.kpi-hero .k { font-size: 13px; opacity: .9; }
.kpi-hero .v { font: 600 46px/52px var(--f-title); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.kpi-hero .s { font-size: 13px; opacity: .9; margin-top: 4px; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--sh-1); }
.kpi .k { font-size: 12px; color: var(--on-surface-v); line-height: 16px; }
.kpi .v { font: 600 24px/30px var(--f-title); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 11.5px; color: var(--on-surface-v); margin-top: 2px; }
.kpi.good .v { color: #1E7B34; }
.kpi.cost .v { color: var(--secondary); }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 130px 1fr 92px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar .track { height: 14px; background: var(--sc); border-radius: 99px; overflow: hidden; }
.bar .track i { display: block; height: 100%; border-radius: 99px; transition: width .4s var(--ease); }
.bar .num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.disclaimer { font-size: 12px; line-height: 17px; color: var(--on-surface-v); background: #fff; border-radius: 14px; padding: 12px 14px; display: flex; gap: 8px; border: 1px solid var(--outline-v); }

/* ---------- Responsivo ---------- */
@media (max-width: 1240px) {
  .stage { gap: 16px; grid-template-columns: auto minmax(260px, 300px) auto; }
  .phone { width: 350px; }
}
@media (max-width: 1120px) {
  .viewtabs { display: flex; justify-content: center; margin: 0 auto 12px; }
  .stage { display: flex; justify-content: center; }
  .stage .col { display: none; }
  .stage .col.shown { display: flex; }
  .tt-wrap { max-width: 360px; }
  .tourbar { width: calc(100vw - 32px); bottom: 84px; }
  .tourbar.fixed { display: flex; }
  .tourbar.inline { display: none; }
  .demo:not(.x) .scencard { display: none; }
  .demo.touring .tt-wrap { height: auto; max-height: calc(100vh - 230px); min-height: 480px; width: 100%; }
  .demo.touring .tt-caption, .demo.touring .col > .btn.wa, .demo.touring .col > .btn.outlined { display: revert; }
  .demo.touring { padding-bottom: 240px; }
  .hero, .calc-grid, .story-close { grid-template-columns: 1fr; }
  .results { position: static; }
  .hero-art { display: none; }
}
@media (max-width: 720px) {
  .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .topbar .note { display: none; }
  .navtabs { margin-left: 0; order: 3; width: 100%; overflow-x: auto; }
  .navtabs button { padding: 7px 12px; font-size: 13px; flex: none; }
  .demo { padding: 10px 0 160px; }
  .phone { width: min(372px, calc(100vw - 16px)); --ph: calc(100vh - 210px); min-height: 560px; }
  .pain { grid-template-columns: 1fr; }
  .pain .hour { text-align: left; padding: 0 0 6px; }
  .pain .knob, .daytl::before { display: none; }
  .pain-card { grid-template-columns: 1fr; }
  .pain-card .after { border-left: 0; border-top: 1px dashed var(--outline-v); }
  .hero h1 { font-size: 32px; line-height: 38px; }
  .story, .calc { padding: 22px 16px 120px; }
  .panel { right: 8px; left: 8px; width: auto; bottom: 80px; }
  .fab-demo { right: 12px; bottom: 12px; }
  .tourbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; bottom: 10px; left: 10px; right: 76px; width: auto; transform: none; }
  .tourbar p, .tourbar .dec { display: none; }
  .tourbar h4 { font-size: 15px; line-height: 20px; }
  .tourbar .btn.sm { padding: 0 9px; }
  .fab-demo { width: 52px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .demo.touring { padding-bottom: 150px; }
  .kpis { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 96px 1fr 80px; }
  .story-close { padding: 24px; }
}

/* ======================================================================
   Modo libre, alta de la tienda, recorrido de bienvenida (Driver.js), consejos y encuesta
   ====================================================================== */

/* ---------- Alta e inicio de sesión (PM-01 a PM-08) ---------- */
.auth { gap: 14px; }
.auth .title-l { font-size: 24px; }
.gbtn { gap: 10px; background: #fff; }
.gbtn svg { flex: none; }
.sep { display: flex; align-items: center; gap: 10px; color: var(--on-surface-v); font: 600 11px var(--f-text); letter-spacing: .6px; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--outline-v); }
.eye { flex: none; margin-right: -6px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: var(--on-surface-v); border-radius: 99px; }
.eye:hover { background: var(--sc-high); }
.stephead { display: flex; flex-direction: column; gap: 6px; }
.prog { height: 4px; background: var(--sc-high); border-radius: 4px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--primary); border-radius: 4px; transition: width .4s var(--ease); }
.prog.light { background: rgba(255, 255, 255, .25); }
.prog.light i { background: #fff; }
.slotedit { display: flex; align-items: flex-end; gap: 8px; padding: 10px; }
.mini { display: flex; flex-direction: column; gap: 3px; font: 600 11px var(--f-text); color: var(--on-surface-v); flex: 1; min-width: 0; }
.mini select, .mini input { height: 38px; border: 1px solid var(--outline); border-radius: 6px; padding: 0 8px; background: #fff; font-size: 14px; width: 100%; min-width: 0; color: var(--on-surface); }
.radiocard { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border: 1px solid var(--outline-v); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s; }
.radiocard.sel { border: 2px solid var(--primary); padding: 11px 13px; background: #f7f7ff; }
.radiocard .check { margin-top: 2px; }
.radio { width: 20px; height: 20px; border-radius: 99px; border: 2px solid var(--outline); flex: none; margin-top: 2px; position: relative; }
.radio.on { border-color: var(--primary); }
.radio.on::after { content: ''; position: absolute; inset: 3px; border-radius: 99px; background: var(--primary); }
.stepcard { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; }
.stepcard .num { width: 28px; height: 28px; border-radius: 99px; background: var(--primary-c); color: var(--primary); display: flex; align-items: center; justify-content: center; font: 600 14px var(--f-title); flex: none; }
.stepcard.hi { background: var(--primary); color: #fff; }
.stepcard.hi .num { background: rgba(255, 255, 255, .22); color: #fff; }
.rowlink { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--sc-high); font-size: 13.5px; }
.rowlink:last-child { border-bottom: 0; }
.rowlink > .ms:first-child { color: var(--primary); }
.rowlink:hover { background: var(--sc-low); }
.demo-box { border: 1px dashed #9a9cf5; background: #f4f4ff; border-radius: 14px; padding: 10px 12px; color: var(--on-primary-c); }
.lnk { color: inherit; font-weight: 700; text-decoration: underline; margin-left: 4px; }

/* ---------- Barra del modo libre ---------- */
.freebar { max-width: 1180px; margin: 0 auto 14px; background: #fff; border: 1px solid var(--outline-v); border-radius: 18px; padding: 10px 14px; box-shadow: var(--sh-1); display: flex; flex-direction: column; gap: 8px; }
.fb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 19px; min-width: 220px; }
.fb-hint .ms { color: #c68a00; margin-top: 1px; }
.fb-ctrls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--sc-high); }
.fb-ctrls .sep { width: 1px; height: 22px; background: var(--outline-v); flex: none; }
.fb-ctrls .sep::before, .fb-ctrls .sep::after { display: none; }
.fb-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.fb-ctrls .seg button { font-size: 12px; padding: 4px 10px; }

/* ---------- Puntos que laten ---------- */
.hotspot { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 99px; z-index: 4; display: flex; align-items: center; justify-content: center; }
.hotspot i { width: 10px; height: 10px; border-radius: 99px; background: var(--secondary); box-shadow: 0 0 0 0 rgba(178, 49, 25, .55); animation: hot 1.8s infinite; }
@keyframes hot { 70% { box-shadow: 0 0 0 10px rgba(178, 49, 25, 0); } 100% { box-shadow: 0 0 0 0 rgba(178, 49, 25, 0); } }

/* ---------- Botones flotantes de la izquierda: ayuda y encuesta ---------- */
.left-fabs { position: fixed; left: 20px; bottom: 20px; z-index: 60; display: flex; align-items: flex-end; gap: 8px; }
.help-fab { width: 48px; height: 48px; border-radius: 99px; background: #fff; color: var(--primary); font: 600 22px var(--f-title); box-shadow: var(--sh-3); border: 1px solid var(--outline-v); }
.help-fab:hover { background: var(--primary-c); }
.fb-fab { height: 36px; padding: 0 14px 0 10px; border-radius: 99px; background: #fff; border: 1px solid var(--outline-v); display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--f-title); color: var(--on-surface); white-space: nowrap; flex: none; }
.fb-fab .ms { font-size: 19px; }
.fb-fab .ms { color: var(--secondary); }
.fb-fab:hover { background: var(--sc-low); }
.help-menu { position: fixed; left: 20px; bottom: 80px; z-index: 62; width: 320px; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(20, 20, 50, .28); padding: 8px; animation: panel-in .22s var(--ease); }
.hm-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 10px; font-family: var(--f-title); }
.hm-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px; border-radius: 12px; }
.hm-item:hover { background: var(--sc-low); }
.hm-item .ms { color: var(--primary); }
.hm-item b { display: block; font: 500 14px var(--f-title); }
.hm-item small { display: block; font-size: 12px; color: var(--on-surface-v); }
.hm-foot { display: flex; align-items: center; gap: 6px; padding: 8px 6px 2px 10px; border-top: 1px solid var(--sc-high); margin-top: 4px; }

/* ---------- Encuesta ---------- */
.fbcard { position: fixed; right: 20px; top: 66px; z-index: 63; width: 340px; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(20, 20, 50, .3); padding: 16px; display: flex; flex-direction: column; gap: 10px; animation: panel-in .25s var(--ease); }
.fbcard.prompt { border: 2px solid var(--primary-c); }
.fbx { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 99px; display: flex; align-items: center; justify-content: center; color: var(--on-surface-v); }
.fbx:hover { background: var(--sc-high); }
.fbq { font: 500 16px/21px var(--f-title); padding-right: 26px; }
.fbrate { display: flex; gap: 6px; }
.fbrate button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; border: 1px solid var(--outline-v); background: #fff; transition: transform .12s, background .15s, border-color .15s; }
.fbrate button span { font-size: 22px; line-height: 1; }
.fbrate button small { font-size: 10.5px; color: var(--on-surface-v); }
.fbrate button:hover { transform: translateY(-2px); }
.fbrate button.on { background: var(--primary-c); border-color: var(--primary); }
.fbcard textarea { width: 100%; border: 1px solid var(--outline-v); border-radius: 10px; padding: 8px 10px; resize: none; font-size: 13px; outline: none; }
.fbcard textarea:focus { border-color: var(--primary); }
.fbcard .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fbthanks { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 0; }

/* ---------- Driver.js con la identidad de Pling ---------- */
.driver-popover.pling-pop { font-family: var(--f-text); border-radius: 18px; padding: 16px 16px 12px; max-width: 330px; box-shadow: 0 18px 50px rgba(20, 20, 50, .3); color: var(--on-surface); }
.driver-popover.pling-pop .driver-popover-title { font: 500 18px/23px var(--f-title); }
.driver-popover.pling-pop .driver-popover-description { font-size: 13.5px; line-height: 19px; color: var(--on-surface-v); margin-top: 6px; }
.driver-popover.pling-pop .driver-popover-progress-text { font: 600 11px var(--f-text); color: var(--primary); letter-spacing: .3px; }
.driver-popover.pling-pop .driver-popover-footer { margin-top: 14px; gap: 6px; flex-wrap: wrap; }
.driver-popover.pling-pop .driver-popover-footer button { font: 500 13px var(--f-title); border-radius: 99px; padding: 6px 14px; text-shadow: none; border: 1px solid var(--outline-v); background: #fff; color: var(--on-surface); }
.driver-popover.pling-pop .driver-popover-footer .driver-popover-next-btn { background: var(--primary); color: #fff; border-color: var(--primary); }
.driver-popover.pling-pop .driver-popover-close-btn { color: var(--on-surface-v); }
.driver-popover.pling-pop .gskip { border: 0 !important; background: none !important; color: var(--on-surface-v) !important; padding: 6px 4px !important; text-decoration: underline; font: 500 12.5px var(--f-text); cursor: pointer; }
.driver-popover.pling-pop .driver-popover-description .gskip { margin-top: 8px; display: inline-block; }
.driver-popover.pling-pop .gcalc { display: inline-flex; align-items: center; gap: 4px; color: var(--primary) !important; border-color: #c8c9ff !important; }
.driver-popover.pling-pop .gcalc .ms { font-size: 17px; }
.gchoice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gchoice button { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--outline-v); background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.gchoice button:first-child { background: var(--primary); color: #fff; border-color: var(--primary); }
.gchoice button:first-child small { color: #dfe0ff; }
.gchoice button:hover { border-color: var(--primary); }
.gchoice .ms { font-size: 26px; }
.gchoice b { display: block; font: 500 15px var(--f-title); }
.gchoice small { display: block; font-size: 12px; color: var(--on-surface-v); }

@media (max-width: 720px) {
  .left-fabs { left: 12px; bottom: 12px; }
  .fb-fab { height: 32px; font-size: 13px; padding: 0 10px 0 8px; }
  .help-menu { left: 8px; right: 8px; width: auto; bottom: 70px; }
  .fbcard { left: 8px; right: 8px; width: auto; top: 100px; }
  .freebar { margin: 0 8px 12px; }
  .fb-ctrls .sep { display: none; }
}

@media (max-width: 1120px) { .left-fabs.up { bottom: 230px; } }
@media (max-width: 720px) { .left-fabs.up { bottom: 140px; } }

.demo.free .phone { --ph: clamp(600px, calc(100vh - 290px), 820px); }
.demo.free .tt-wrap { max-height: calc(100vh - 360px); }

/* ---------- Error visible (nunca página en blanco) ---------- */
.crash { max-width: 640px; margin: 80px auto; padding: 28px; background: #fff; border-radius: 24px; box-shadow: 0 10px 30px rgba(20, 20, 50, .12); display: flex; flex-direction: column; gap: 12px; font-family: var(--f-text, sans-serif); }
.crash img { height: 32px; align-self: flex-start; }
.crash h2 { font: 600 22px var(--f-title, sans-serif); }
.crash pre { white-space: pre-wrap; word-break: break-word; background: #F5F2FA; border-radius: 12px; padding: 12px; font-size: 12px; max-height: 260px; overflow: auto; }
.crash .btn { align-self: flex-start; }

/* ---------- Alineación con el Figma (ALINEACION_FIGMA.md) ---------- */
.title-xl { font: 500 30px/36px var(--f-title); }
.authbar.center .logo-c { display: flex; justify-content: center; }
.lnk-t { color: var(--primary); }
.bankcard { display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.prog.seg { height: 4px; background: var(--sc-high); position: relative; overflow: visible; }
.prog.seg::after { content: ''; position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 4px; background: var(--primary); }
.overline { font: 500 12px var(--f-text); letter-spacing: .6px; color: var(--on-surface-v); }
.daycard { background: rgba(255, 255, 255, .78); border-radius: var(--r-card); box-shadow: var(--sh-1); }
.daycard.open { background: #fff; }
.dayhead { gap: 14px; padding: 14px 14px; cursor: pointer; min-height: 56px; }
.daycard.open .dayhead { border-bottom: 1px solid var(--outline-v); }
.dname { font-size: 15.5px; }
.dayedit { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 10px; }
.slotgrp { display: flex; flex-direction: column; gap: 12px; }
.polcard { align-items: center; padding: 14px 16px; }
.polcard.sel { padding: 13px 15px; }
.polcard .pname { font: 600 15px var(--f-title); }
.rcheck { width: 28px; height: 28px; border-radius: 99px; border: 2px solid var(--primary); background: var(--primary-c); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; }
.rcheck.on { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-c); }
.rcheck .ms { font-size: 18px; }
.seg2 { display: flex; border: 1px solid var(--outline); border-radius: 99px; overflow: hidden; }
.seg2 button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font: 500 14px var(--f-text); color: var(--on-surface); }
.seg2 button + button { border-left: 1px solid var(--outline); }
.seg2 button.on { background: var(--primary-c); color: var(--on-primary-c); }
.seg2 button .ms { font-size: 18px; }
.linkbar { display: flex; align-items: center; gap: 10px; background: var(--primary-c); border-radius: 14px; padding: 12px 16px; font-size: 15px; }
.linkbar .ms { color: var(--primary); }
.linkbar .lnk { text-decoration: none; color: var(--primary); }
.stepcard .sct { font: 600 15px var(--f-title); }
.stepcard.hi .small { color: #fff; }
.confetti { position: relative; }
.menu-pop { position: absolute; top: 56px; right: 10px; z-index: 30; background: #ECEBF2; border-radius: 6px; box-shadow: var(--sh-2); min-width: 190px; padding: 6px 0; }
.menu-pop button { display: block; width: 100%; text-align: left; padding: 13px 16px; font-size: 14.5px; }
.menu-pop button:hover { background: rgba(0, 0, 0, .05); }
.menu-scrim { position: absolute; inset: 0; z-index: 29; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper .rb { width: 46px; height: 46px; border-radius: 99px; border: 1px solid var(--outline-v); display: flex; align-items: center; justify-content: center; background: transparent; }
.stepper .rb:hover { background: var(--sc-low); }
.stepper b { font: 600 20px var(--f-title); min-width: 22px; text-align: center; }
.cfgrow { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 14px; background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-1); }
.cfgrow .ic { width: 40px; height: 40px; border-radius: 99px; background: var(--primary-c); color: var(--primary); display: flex; align-items: center; justify-content: center; flex: none; }
.cfgrow:hover { box-shadow: var(--sh-2); }
.cfgrow b { font: 500 15.5px var(--f-title); }
.profile-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding-top: 6px; }
.profile-hero img { width: 112px; height: 112px; border-radius: 99px; object-fit: cover; border: 4px solid #fff; box-shadow: var(--sh-1); }
.profile-hero .nm { font: 600 22px var(--f-title); color: var(--primary); }
.tsheet-hero { border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #E8E7FF, #FCE3E0); text-align: center; padding: 18px 12px 0; }
.tsheet-hero h3 { font: 600 22px/27px var(--f-title); color: var(--primary); }
.tsheet-hero h3 em { font-style: normal; color: var(--secondary); }
.tsheet-hero img { margin: 10px auto 0; max-height: 170px; border-radius: 12px; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 7px; height: 7px; border-radius: 9px; background: var(--outline-v); }
.dots i.on { width: 18px; background: var(--primary); }
.searchbar { display: flex; align-items: center; gap: 12px; height: 52px; border-radius: 99px; background: var(--sc-high); padding: 0 18px; color: var(--on-surface-v); }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; }
.navitem { white-space: nowrap; font-size: 10.5px; }
.segbar { display: flex; border: 1px solid var(--outline); border-radius: 99px; overflow: hidden; }
.segbar button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; font-size: 14.5px; }
.segbar button + button { border-left: 1px solid var(--outline); }
.segbar button.on { background: var(--primary-c); color: var(--on-primary-c); }
.bigic { width: 80px; height: 80px; border-radius: 99px; background: var(--primary-c); color: var(--primary); display: flex; align-items: center; justify-content: center; align-self: center; }
.bigic .ms { font-size: 36px; }
.prog.seg i { height: 4px; border-radius: 4px; }
.prog.seg { flex: none; min-height: 4px; }

/* ---------- Componentes M3 (segunda pasada) ---------- */
/* Indicador de progreso lineal: indicador, separación de 4 px, pista y punto de parada. */
.lprog { display: flex; align-items: center; gap: 4px; height: 4px; width: 100%; flex: none; }
.lprog .lp-ind { height: 4px; border-radius: 2px; background: var(--primary); transition: width .4s var(--ease); flex: none; }
.lprog .lp-track { flex: 1; height: 4px; border-radius: 2px; background: var(--primary-c); position: relative; min-width: 8px; }
.lprog .lp-stop { position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 2px; background: var(--primary); }
.lprog.light .lp-ind, .lprog.light .lp-stop { background: #fff; }
.lprog.light .lp-track { background: rgba(255, 255, 255, .28); }
.lprog.dark .lp-ind, .lprog.dark .lp-stop { background: #8f94ff; }
.lprog.dark .lp-track { background: #33334a; }
.stephead .lprog { margin-top: 4px; }

/* Botones segmentados: contorno de 1 px, alto 40 px, divisores internos, elegido en secondary-container. */
.mseg { display: flex; width: 100%; border: 1px solid var(--outline); border-radius: 99px; overflow: hidden; background: var(--surface); flex: none; }
.mseg button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 8px; font: 500 14px var(--f-text); color: var(--on-surface); background: transparent; }
.mseg button + button { border-left: 1px solid var(--outline); }
.mseg button.on { background: var(--primary-c); color: var(--on-primary-c); }
.mseg button .ms { font-size: 18px; }
.mseg button span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fondo de celebración (Onboarding 05 y Catálogo finalizado). */
.celebrate { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; overflow: hidden; }
.celebrate span { position: absolute; line-height: 1; opacity: .9; }
.hero-cel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-top: 70px; }
.hero-cel > *:not(.celebrate) { position: relative; z-index: 1; }
.hero-cel .success-ic { width: 72px; height: 72px; }
.hero-cel h2 { font: 500 26px/32px var(--f-title); }

/* Cabecera con logo centrado: tres columnas iguales, así el logo queda en el centro exacto. */
.authbar.center { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; }
.authbar.center .logo-c { justify-content: center; }
.authbar.center > .icon-btn:last-child { justify-self: end; }

/* Leer código: cámara a pantalla completa con el selector encima y el aviso de la ticketera abajo. */
.leer { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.leer .leer-seg { position: relative; z-index: 2; padding: 12px 16px 0; }
.leer .leer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px; justify-content: center; }
.leer.scan { background: #222; }
.leer .camfull { position: absolute; inset: 0; cursor: pointer; }
.leer .camfull img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.leer .camfull .corners { position: absolute; left: 14%; right: 14%; top: 50%; aspect-ratio: 1 / 1; transform: translateY(-50%); }
.leer .camfull .corners i { position: absolute; width: 22%; height: 22%; border: 5px solid #fff; border-radius: 4px; }
.leer .camfull .corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.leer .camfull .corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.leer .camfull .corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.leer .camfull .corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.leer .camfull .tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-3deg); background: #f6f1e4; padding: 8px 14px; border-radius: 6px; font: 600 22px 'Segoe Print', var(--f-title); box-shadow: var(--sh-2); color: #222; }
.leer .tkbanner { position: relative; z-index: 2; margin: 0 16px 12px; display: flex; align-items: center; gap: 12px; background: var(--primary-c); border-radius: 16px; padding: 14px 16px; text-align: left; }
.leer .tkbanner .ms { color: var(--primary); font-size: 26px; }
.leer .tkbanner span.t { flex: 1; font-size: 13px; line-height: 18px; color: var(--on-surface-v); }
.leer .tkbanner b { color: var(--primary); font: 600 14px var(--f-title); white-space: nowrap; }
.leer .packchips { display: flex; flex-direction: column; gap: 6px; }

/* Consola del live: insignia «PRODUCTO COMPRADO» del Figma, centrada sobre la foto. */
.livecard .bought { position: absolute; left: 14px; right: 14px; top: 14px; aspect-ratio: 4 / 3.2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, .08); border-radius: 14px; animation: pop2 .35s var(--ease); }
.livecard .bought .ck { width: 52px; height: 52px; border-radius: 99px; background: #B6F2BE; color: #0B3B16; display: flex; align-items: center; justify-content: center; }
.livecard .bought .ck .ms { font-size: 28px; }
.livecard .bought .lbl { background: #B6F2BE; color: #0B3B16; font: 500 18px var(--f-title); letter-spacing: .4px; padding: 6px 16px; border-radius: 8px; }
.attempts { align-self: center; background: #B6F2BE; color: #0B3B16; border-radius: 8px; padding: 6px 14px; font-size: 14px; text-align: center; }

/* Catálogo: tres formas de agregar productos. */
.addways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.addways button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: #fff; box-shadow: var(--sh-1); font: 500 12.5px/16px var(--f-title); color: var(--on-surface); text-align: center; min-height: 86px; }
.addways button .ms { width: 40px; height: 40px; border-radius: 99px; background: var(--primary-c); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.addways button:hover { box-shadow: var(--sh-2); }
.prodrow { display: flex; align-items: center; gap: 12px; padding: 12px; }
.prodrow .acts { display: flex; gap: 0; flex: none; }
.slotbtn.danger { color: var(--error); }
.catmove { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: #fff; border-radius: var(--r-card); }
.photo-pick { border: 2px dashed var(--outline-v); border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: transparent; }
.photo-pick img { width: 100%; height: 100%; object-fit: cover; }
.photo-pick .chg { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: #fff; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 20px 6px; }
.sh-head .sh-title { padding: 0; }

/* Marca de Pling (campana) y avatar de la tienda (inicial) */
.store-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 99px; background: #F0E6FF; color: #6A3FB5; font: 700 16px var(--f-display, var(--f-text)); line-height: 1; }
.wa-head .store-avatar { background: #fff; color: #6A3FB5; }
.push .push-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-c, #E8E9FF); display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* ---------- Consejo por pantalla (modo libre): burbuja liviana, no bloquea ---------- */
.screen-tip { position: absolute; top: 120px; z-index: 40; width: 300px; background: #fff; color: var(--on-surface); border-radius: 18px; padding: 14px 14px 10px; box-shadow: 0 18px 50px rgba(20, 20, 50, .28); font-family: var(--f-text); animation: pop2 .3s var(--ease); }
.screen-tip.side-store { left: calc(100% + 10px); }
.screen-tip.side-buyer { right: calc(100% + 10px); }
.screen-tip::before { content: ''; position: absolute; top: 22px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.screen-tip.side-store::before { left: -6px; }
.screen-tip.side-buyer::before { right: -6px; }
.screen-tip .st-h { display: flex; align-items: flex-start; gap: 8px; }
.screen-tip .st-ic { width: 30px; height: 30px; border-radius: 10px; background: var(--primary-c, #E8E9FF); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.screen-tip .st-h b { font: 500 16px/21px var(--f-title); padding-top: 4px; }
.screen-tip .st-x { border: 0; background: none; color: var(--on-surface-v); cursor: pointer; padding: 2px; border-radius: 99px; display: inline-flex; }
.screen-tip p { font-size: 13.5px; line-height: 19px; color: var(--on-surface-v); margin: 8px 0 10px; }
.screen-tip .st-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.screen-tip .st-off { border: 0; background: none; color: var(--on-surface-v); text-decoration: underline; font: 500 12.5px var(--f-text); cursor: pointer; padding: 6px 2px; }
.screen-tip .st-ok { border: 0; background: var(--primary); color: #fff; font: 500 13px var(--f-title); border-radius: 99px; padding: 7px 16px; cursor: pointer; }
@media (max-width: 1240px) { .screen-tip { width: 270px; } }
@media (max-width: 1120px) {
  .screen-tip, .screen-tip.side-store, .screen-tip.side-buyer { position: fixed; top: auto; left: 50%; right: auto; bottom: 84px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); }
  .screen-tip::before { display: none; }
  .screen-tip { animation: stip-in .25s var(--ease); }
}
@media (max-width: 720px) { .screen-tip, .screen-tip.side-store, .screen-tip.side-buyer { bottom: 74px; } }
@keyframes stip-in { from { opacity: 0; } }

/* Calculadora: el stepper de la app (gap 14px) no debe ensanchar los campos; en teléfono todo cabe en 390 px */
.calc .stepper { gap: 4px; }
.calc-grid > * { min-width: 0; }
@media (max-width: 720px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .inp { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
  .calc .stepper input { width: 58px; }
  .calc .stepper .u { width: 60px; }
}