/* Vuelve · La tarjeta del cliente (estilo Wallet): sellos, puntos, monedero y QR. */
/* ---------- Tarjeta tipo Wallet ---------- */
.pass{position:relative;border-radius:22px;padding:20px 20px 18px;color:var(--on);background:linear-gradient(150deg, var(--c) 0%, var(--c2) 100%);box-shadow:0 26px 44px -24px color-mix(in srgb, var(--c) 80%, black), inset 0 1px 0 rgba(255,255,255,.22);overflow:hidden;isolation:isolate;}
.pass::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 70% at 100% 0%, rgba(255,255,255,.22), transparent 60%);z-index:-1;}
.pass::after{content:'';position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:26px solid color-mix(in srgb, var(--on) 8%, transparent);z-index:-1;}
.pass-top{display:flex;align-items:center;gap:12px;}
.pass-logo{width:42px;height:42px;border-radius:13px;background:color-mix(in srgb, var(--on) 18%, transparent);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.25rem;flex-shrink:0;backdrop-filter:blur(4px);}
.pass-id{flex:1;min-width:0;}
.pass-name{font-weight:800;font-size:1.05rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pass-kind{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72;margin-top:2px;}
.pass-ready{font-size:.72rem;font-weight:800;padding:6px 10px;border-radius:999px;background:var(--on);color:var(--c2);white-space:nowrap;}
.pass-body{margin:20px 0 18px;}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;}
.stamp{aspect-ratio:1;border-radius:50%;border:2px dashed color-mix(in srgb, var(--on) 42%, transparent);display:grid;place-items:center;}
.stamp.on{border:none;background:var(--on);color:var(--c2);box-shadow:0 4px 10px -4px rgba(0,0,0,.3);}
.stamp.on svg{width:55%;height:55%;}
.stamp.gift{border-style:solid;border-color:color-mix(in srgb, var(--on) 60%, transparent);}
.pts{display:flex;align-items:baseline;gap:8px;}
.pts-num{font-family:var(--display);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.02em;}
.pts-of{font-weight:600;opacity:.8;}
.pbar{height:10px;border-radius:999px;background:color-mix(in srgb, var(--on) 22%, transparent);margin-top:14px;overflow:hidden;}
.pbar > span{display:block;height:100%;border-radius:999px;background:var(--on);}
.pass-meta{display:grid;grid-template-columns:1fr auto;gap:14px;padding-top:14px;border-top:1px dashed color-mix(in srgb, var(--on) 35%, transparent);}
.pass-meta .k{display:block;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.7;}
.pass-meta .v{display:block;font-weight:700;font-size:.92rem;margin-top:2px;}
.pass-meta div:last-child{text-align:right;}
.pass-qr{margin-top:16px;background:#fff;border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);}
.pass-qr .qr{width:150px;height:150px;display:grid;place-items:center;cursor:zoom-in;}
.pass-qr .qr svg,.pass-qr .qr img{width:150px;height:150px;display:block;image-rendering:pixelated;border-radius:6px;}
.pass-qr .qr-tap{font-size:.72rem;color:var(--muted);}
#qr-zoom{position:fixed;inset:0;z-index:90;background:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;color:#13231D;}
#qr-zoom img{width:min(82vw,420px);height:auto;image-rendering:pixelated;}
#qr-zoom p{margin:0;font-weight:600;text-align:center}
#qr-zoom small{color:#3E5048}
.pass-qr small{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.74rem;color:var(--muted);letter-spacing:.04em;}
.pass-tilt{transform:rotate(-3deg);margin:8px 6px 0;}
.pass.solid{background:var(--c);}
.pass.solid::before,.pass.solid::after{display:none;}
.pass.pattern{background-image:var(--pat),linear-gradient(150deg, var(--c) 0%, var(--c2) 100%);background-size:38px 38px,auto;}
.pass-logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#fff;padding:4px;}
.pass-logo.has-img{background:#fff;padding:0;}
.plan-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.04em;vertical-align:middle;}
.plan-pill.premium{background:linear-gradient(135deg,#FFD978,#FFB627);color:#5A3A00;}
.plan-pill.esencial{background:var(--surface);border:1px solid var(--line);color:var(--muted);}
.locked{position:relative;}
.locked .lock-body{opacity:.42;pointer-events:none;filter:grayscale(.3);}
.lock-note{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:12px;background:#FFF6DC;color:#6B4700;font-size:.82rem;font-weight:700;}
.lock-badge{position:absolute;top:-30px;right:0;display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:#FFF6DC;color:#6B4700;font-size:.68rem;font-weight:800;letter-spacing:.03em;}
.upsell{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:16px;background:linear-gradient(135deg,#FFF6DC,#FFEFC2);color:#5A3A00;margin-bottom:18px;}
.upsell svg{flex-shrink:0;margin-top:1px;}
.upsell b{display:block;font-size:.92rem;margin-bottom:2px;}
.upsell p{margin:0;font-size:.82rem;line-height:1.45;}
.icon-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.icon-opt{aspect-ratio:1;border-radius:14px;border:1.5px solid var(--line);background:var(--surface-2);display:grid;place-items:center;color:var(--ink-2);cursor:pointer;}
.icon-opt.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep);}
.icon-opt svg{width:24px;height:24px;}
.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.style-opt{border:1.5px solid var(--line);border-radius:14px;padding:8px;background:var(--surface);cursor:pointer;font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--ink-2);}
.style-opt.on{border-color:var(--brand);color:var(--brand-deep);}
.style-opt .sw{height:44px;border-radius:10px;margin-bottom:6px;}
.color-row{display:flex;align-items:center;gap:10px;margin-top:12px;}
.color-row input[type=color]{width:50px;height:50px;border:1.5px solid var(--line);border-radius:12px;padding:3px;background:var(--surface);cursor:pointer;}
.logo-row{display:flex;align-items:center;gap:14px;}
.logo-box{width:72px;height:72px;border-radius:18px;border:1.5px dashed var(--line);background:#fff;display:grid;place-items:center;overflow:hidden;flex-shrink:0;color:var(--muted);}
.logo-box img{width:100%;height:100%;object-fit:contain;padding:6px;}
.cfg-design{position:relative;}
.preview-sticky{position:sticky;top:78px;z-index:4;padding-bottom:6px;}

.wallet-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.wallet-btn{height:48px;border-radius:12px;background:#000;color:#fff;border:none;font-family:var(--sans);font-weight:700;font-size:.82rem;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;}