/* Sellala Puntos — LABORATORIO (26-oct). Solo se carga con SELLALA_LAB_PUNTOS=1. Usa los tokens de sellala.css y panel.css.
   Pensado primero para el celular (390 px) y después para la compu. Solo paleta clara. */

/* ---------- fila de Sellar ---------- */
.px-chip{display:inline-flex;align-items:baseline;gap:3px;font:600 var(--t-etiqueta)/1 var(--mono);padding:5px 8px;border-radius:999px;background:var(--cobalto-suave);color:var(--cobalto);white-space:nowrap}
.px-chip b{font-size:.82rem}
.px-falta{font-size:var(--t-chico);color:var(--gris);white-space:nowrap}
.px-cobrar svg,.px-canj svg{width:18px;height:18px}
.px-canj{padding-inline:14px}

/* ---------- caja: hoja con teclado ---------- */
.px-hoja .pago-cab{align-items:center}
.px-av .av{width:40px;height:40px;font-size:.9rem}
.px-av .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--cobalto-suave);color:var(--cobalto)}
.px-av .ic svg{width:20px;height:20px}
.px-cuerpo{gap:10px;align-items:stretch}
.px-rot{margin:0;text-align:center;color:var(--gris);font:600 var(--t-etiqueta)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.px-monto{display:block;text-align:center;font:800 clamp(2.4rem,11vw,3.4rem)/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tinta);min-height:1.1em;overflow-wrap:anywhere}
.px-monto.vacio{color:var(--gris2)}
.px-gana{margin:0;text-align:center;font-size:var(--t-texto);color:var(--gris);min-height:1.5em}
.px-gana .px-mas{color:var(--ok);font:700 1.05rem/1 var(--display)}
.px-gana .px-y{color:var(--gris2)}
.px-gana.salta .px-mas{display:inline-block;animation:pxSalta .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes pxSalta{0%{transform:scale(.7)}100%{transform:none}}
.px-teclado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.px-tecla{height:clamp(54px,7.4vh,64px);border:none;border-radius:14px;background:var(--blanco);box-shadow:var(--sombra);font:600 1.45rem/1 var(--texto);font-variant-numeric:tabular-nums;color:var(--tinta);display:grid;place-items:center;transition:transform .1s var(--ease),background-color .15s;user-select:none;-webkit-user-select:none}
.px-tecla:active{transform:scale(.95);background:var(--hundido)}
.px-tecla.borrar{background:var(--hundido);color:var(--gris)}
.px-tecla.borrar svg{width:24px;height:24px}
.px-ok{min-height:56px;font-size:1.05rem}
.px-ok svg{width:20px;height:20px}
.btn.ancho{width:100%}
/* resultado */
.px-listo{align-items:center;text-align:center;gap:12px;padding-top:24px}
.px-hecho{display:flex;flex-direction:column;align-items:center;gap:6px}
.px-check{width:56px;height:56px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;animation:pxPop .5s cubic-bezier(.2,1.6,.4,1) both}
.px-check svg{width:30px;height:30px}
@keyframes pxPop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.px-grande{font:800 clamp(2.6rem,12vw,3.4rem)/1 var(--display);color:var(--ok);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.px-hecho>span:last-child{color:var(--gris);font-size:var(--t-texto)}
.px-saldo{margin:0;font-size:var(--t-texto)}
.px-saldo b{font:700 1.1rem/1 var(--display);font-variant-numeric:tabular-nums}
.px-prox{width:100%;background:var(--blanco);border-radius:14px;box-shadow:var(--sombra);padding:12px 14px;display:flex;flex-direction:column;gap:8px;text-align:left}
.px-prox-t{display:flex;justify-content:space-between;gap:10px;font-size:var(--t-nota);flex-wrap:wrap}
.px-prox-t span:last-child{color:var(--gris);font-family:var(--mono);font-size:var(--t-etiqueta)}
.px-barra{height:8px;border-radius:999px;background:var(--hundido);overflow:hidden}
.px-barra.grande{height:12px}
.px-barra i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--woop),#FF8A57);transition:width .7s var(--ease)}
.px-notas{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.px-notas li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-nota);padding:10px 12px;border-radius:12px;background:var(--blanco)}
.px-notas li svg{width:18px;height:18px;flex:none;color:var(--gris);margin-top:1px}
.px-notas li.ok{background:var(--ok-suave)} .px-notas li.ok svg{color:var(--ok)}
.px-notas li.aviso{background:var(--alerta-suave)} .px-notas li.aviso svg{color:var(--alerta)}
.px-pie-dos{display:flex;gap:8px}
.px-pie-dos .btn{flex:1;padding-inline:12px}
.px-pie-dos .btn svg{width:17px;height:17px}
/* canje */
.px-premios{display:flex;flex-direction:column;gap:8px}
.px-premio{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;background:var(--blanco);border-radius:14px;padding:14px 16px;box-shadow:var(--sombra);font:inherit;color:inherit;transition:box-shadow .15s,transform .1s}
.px-premio:active{transform:scale(.99)}
.px-premio[aria-pressed=true]{box-shadow:0 0 0 2px var(--woop),var(--sombra)}
.px-premio.no{opacity:.55}
.px-premio.nope{animation:pxNo .35s}
@keyframes pxNo{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.px-premio-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.px-premio-t b{font-weight:600}
.px-premio-t small{color:var(--gris);font-size:var(--t-chico)}
.px-premio-pts{font:700 1.2rem/1 var(--display);font-variant-numeric:tabular-nums;text-align:right}
.px-premio-pts small{display:block;font:600 var(--t-micro)/1.4 var(--mono);color:var(--gris);text-transform:uppercase}
.px-ayuda{margin:0;color:var(--gris);font-size:var(--t-chico);line-height:1.4}

/* ---------- ficha ---------- */
.px-ficha .fila-acc{display:flex;gap:8px;flex-wrap:wrap}
.px-ficha .fila-acc .btn svg{width:18px;height:18px}

/* ---------- Puntos y premios ---------- */
.px-cfg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.px-cfg-grid>*{min-width:0}
.px-cfg-previa{display:flex;flex-direction:column;gap:10px;min-width:0}
.px-modos{display:flex;flex-direction:column;gap:8px}
.px-modo{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:none;border-radius:14px;padding:14px;background:var(--papel);font:inherit;color:inherit;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s var(--ease),background-color .15s}
.px-modo[aria-checked=true]{background:var(--blanco);box-shadow:inset 0 0 0 2px var(--woop)}
.px-modo-ic{display:flex;gap:2px;flex:none;width:52px;height:44px;border-radius:12px;background:var(--blanco);color:var(--woop);align-items:center;justify-content:center}
.px-modo[aria-checked=true] .px-modo-ic{background:var(--woop-suave)}
.px-modo-ic svg{width:22px;height:22px}
.px-modo-ic svg+svg{color:var(--cobalto)}
.px-modo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.px-modo-t b{font-weight:600;font-size:var(--t-encabezado)}
.px-modo-t small{color:var(--tinta);font-size:var(--t-nota);opacity:.8}
.px-modo-t em{font-style:normal;color:var(--gris);font-size:var(--t-chico)}
.px-modo .radio{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--linea);flex:none;position:relative}
.px-modo[aria-checked=true] .radio{box-shadow:inset 0 0 0 7px var(--woop)}
.px-regla{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 1.05rem/1.2 var(--texto)}
.px-plata{position:relative;display:inline-flex;align-items:center}
.px-plata>span{position:absolute;left:14px;color:var(--gris);font-weight:600;pointer-events:none}
.px-plata .inp{padding-left:28px;width:140px;font-weight:600;font-variant-numeric:tabular-nums}
.px-plata.ancho .inp{width:100%}
.px-plata.ancho{display:flex}
.px-escalones{display:flex;gap:6px;flex-wrap:wrap}
.px-esc{border:none;border-radius:999px;padding:8px 14px;background:var(--hundido);color:var(--gris);font:600 var(--t-nota)/1 var(--texto);font-variant-numeric:tabular-nums}
.px-esc[aria-pressed=true]{background:var(--tinta);color:#fff}
.px-ejemplo{margin:0;font-size:var(--t-texto);background:var(--papel);border-radius:12px;padding:12px 14px;line-height:1.5}
.px-alerta{color:var(--alerta);font-weight:600}
.px-lista-premios{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.px-fila-premio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;padding:14px;border-radius:14px;background:var(--papel);position:relative}
.px-fila-premio .campo.ancho{grid-column:1/3}
.px-fila-premio .px-quitar{grid-column:3;grid-row:1;align-self:end;margin-bottom:4px}
.px-fila-premio .px-pct{grid-column:1/-1}
.px-suf,.px-pre{position:relative;display:flex;align-items:center}
.px-suf em,.px-pre em{position:absolute;font-style:normal;color:var(--gris);font-size:var(--t-chico);pointer-events:none}
.px-suf em{right:12px} .px-suf .inp{padding-right:62px}
.px-pre em{left:14px;font-size:var(--t-texto);font-weight:600} .px-pre .inp{padding-left:28px}
.px-suf .inp,.px-pre .inp{font-variant-numeric:tabular-nums}
.px-pct{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:10px;font-size:var(--t-chico)}
.px-pct b{font:700 1rem/1 var(--display);font-variant-numeric:tabular-nums}
.px-pct span{color:var(--gris)}
.px-pct>i{height:6px;border-radius:999px;background:var(--hundido);overflow:hidden}
.px-pct>i>i{display:block;height:100%;border-radius:inherit;transition:width .3s var(--ease),background-color .3s}
.px-pct.ok b{color:var(--ok)} .px-pct.ok>i>i{background:var(--ok)}
.px-pct.medio b{color:var(--alerta)} .px-pct.medio>i>i{background:var(--alerta)}
.px-pct.alto b{color:var(--error)} .px-pct.alto>i>i{background:var(--error)}
.px-pct.gris b{color:var(--gris2)}
.px-vacio{margin:0;color:var(--alerta);font-size:var(--t-nota)}
.px-guardar{position:sticky;bottom:calc(var(--barra) + 22px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;border-radius:999px;background:var(--tinta);color:#fff;box-shadow:0 12px 30px -10px rgba(21,22,28,.5);animation:pxSube .3s var(--ease)}
.px-guardar span{flex:1;font-size:var(--t-nota);font-weight:500}
.px-guardar .btn.suave{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
@keyframes pxSube{from{transform:translateY(20px);opacity:0}}
/* vista previa de la tarjeta */
.px-tp{--fondo:#2340E0;--txt:#fff;--sello:#F2561C;background:var(--fondo);color:var(--txt);border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 40px -18px rgba(21,22,28,.5);position:relative;overflow:hidden;transition:background-color .3s}
.px-tp::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0%,rgba(255,255,255,.2),transparent 55%);pointer-events:none}
.px-tp-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;position:relative}
.px-tp-cab b{font:700 1.05rem/1.1 var(--display)}
.px-tp-cab span{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.px-tp-sellos{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:8px;position:relative}
.px-tp-sellos i{aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--txt) 45%,transparent)}
.px-tp-sellos i.on{background:var(--sello);border:none}
.px-tp-meta{opacity:.8;font-size:var(--t-chico);position:relative;margin-top:-6px}
.px-tp-puntos{display:flex;align-items:center;gap:14px;position:relative;background:color-mix(in srgb,var(--txt) 12%,transparent);border-radius:14px;padding:12px}
.px-tp-saldo{display:flex;flex-direction:column;align-items:center;min-width:64px}
.px-tp-saldo b{font:800 1.9rem/1 var(--display);font-variant-numeric:tabular-nums}
.px-tp-saldo span{font:600 var(--t-micro)/1.4 var(--mono);text-transform:uppercase;opacity:.8}
.px-tp-prox{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-nota);line-height:1.3}
.px-tp .px-barra{background:color-mix(in srgb,var(--txt) 22%,transparent)}
.px-tp .px-barra i{background:var(--sello)}
.px-tp-lista{list-style:none;margin:0;padding:0;background:var(--blanco);border-radius:14px;box-shadow:var(--sombra);overflow:hidden}
.px-tp-lista li{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;font-size:var(--t-nota)}
.px-tp-lista li+li{box-shadow:0 -1px 0 var(--linea)}
.px-tp-lista li b{font-family:var(--mono);font-size:var(--t-chico);color:var(--gris);white-space:nowrap}
.px-tp-lista li.ya b{color:var(--ok)}

/* ---------- Datos ---------- */
.px-datos{display:flex;flex-direction:column;gap:16px}
.px-nums{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.px-num{background:var(--blanco);border-radius:var(--r-caja);box-shadow:var(--sombra);padding:18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.px-num-cab{display:flex;align-items:center;gap:10px}
.px-num-cab h2{font:600 var(--t-encabezado)/1.25 var(--texto);margin:0}
.px-num-cab .ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--papel);color:var(--gris);flex:none}
.px-num-cab .ic svg{width:18px;height:18px}
.px-num.ok .ic{background:var(--ok-suave);color:var(--ok)}
.px-num.cob .ic{background:var(--cobalto-suave);color:var(--cobalto)}
.px-num.woop .ic{background:var(--woop-suave);color:var(--woop)}
.px-num.alerta .ic{background:var(--alerta-suave);color:var(--alerta)}
.px-num-v{font:800 clamp(2rem,8vw,2.5rem)/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.px-num-v small{font:600 1rem/1 var(--texto);letter-spacing:0;color:var(--gris)}
.px-num.ok .px-num-v{color:var(--ok)}
.px-num.alerta .px-num-v{color:var(--alerta)}
.px-num .btn{align-self:flex-start;margin-top:2px}
.px-num .btn svg{width:16px;height:16px}
.px-delta{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-chico);font-weight:600;color:var(--gris)}
.px-delta svg{width:16px;height:16px}
.px-delta.sube{color:var(--ok)} .px-delta.baja{color:var(--alerta)}
.px-frase{margin:0;font-size:var(--t-nota);color:#3F434C;line-height:1.5}
.px-nota-arriba{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:12px;background:var(--cobalto-suave);color:#1C2C80;font-size:var(--t-nota)}
.px-nota-arriba svg{width:18px;height:18px;flex:none;margin-top:1px}
.px-datos-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.px-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.px-datos .cab-caja h2{display:flex;align-items:center;gap:8px}
.px-datos .cab-caja h2 svg{width:19px;height:19px;color:var(--gris)}
.px-riesgo .cab-caja h2 svg{color:var(--alerta)}
.px-clis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.px-cli{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px 0}
.px-cli+.px-cli{box-shadow:0 -1px 0 var(--linea)}
.px-cli-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.px-cli-t b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.px-cli-t small{color:var(--gris);font-size:var(--t-chico);line-height:1.35}
.px-cli-acc{grid-column:2;display:flex;gap:6px;flex-wrap:wrap}
.px-cli-acc .btn svg{width:16px;height:16px}
.px-wa{color:#0F5C38!important}
.px-cli-acc .btn.hecho{background:var(--ok-suave);box-shadow:none;color:var(--ok)!important;opacity:1}
.px-gbarra{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:3px}
.px-gbarra i{display:block;min-width:6px}
.px-gbarra i.n,.px-gley i.n{background:var(--cobalto)}
.px-gbarra i.f,.px-gley i.f{background:var(--ok)}
.px-gbarra i.r,.px-gley i.r{background:var(--alerta)}
.px-gbarra i.d,.px-gley i.d{background:var(--gris2)}
.px-gley{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.px-gley li{display:grid;grid-template-columns:10px auto minmax(0,1fr);gap:2px 8px;align-items:baseline}
.px-gley li i{width:10px;height:10px;border-radius:3px;align-self:center}
.px-gley li b{font:700 1.15rem/1 var(--display);font-variant-numeric:tabular-nums}
.px-gley li span{font-weight:600;font-size:var(--t-nota)}
.px-gley li small{grid-column:2/-1;color:var(--gris);font-size:var(--t-chico);line-height:1.3}
.px-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.px-top li{display:grid;grid-template-columns:22px auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0}
.px-top li+li{box-shadow:0 -1px 0 var(--linea)}
.px-pos{font:700 var(--t-nota)/1 var(--mono);color:var(--gris2);text-align:center}
.px-top li:first-child .px-pos{color:var(--woop)}
.px-top-plata{font:700 var(--t-texto)/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.px-comp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.px-comp li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.px-comp-t{font-weight:600;font-size:var(--t-nota)}
.px-comp-v{display:flex;flex-direction:column;align-items:flex-end;grid-row:1/3;grid-column:2}
.px-comp-v b{font:700 var(--t-texto)/1.1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.px-comp-v small{color:var(--gris);font-size:var(--t-chico);white-space:nowrap}
.px-comp-b{display:flex;flex-direction:column;gap:3px}
.px-comp-b i{display:block;height:6px;border-radius:999px;background:var(--woop);transition:width .6s var(--ease)}
.px-comp-b i.antes{background:var(--linea)}
.px-comp .px-delta{grid-column:1/-1}
.px-prem-dat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.px-prem-dat li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:center;padding:10px 0}
.px-prem-dat li+li{box-shadow:0 -1px 0 var(--linea)}
.px-prem-dat li>span{display:flex;flex-direction:column;gap:2px;grid-row:1/3;min-width:0}
.px-prem-dat li>span small{color:var(--gris);font-size:var(--t-chico)}
.px-prem-dat li>b{font:700 1.1rem/1 var(--display);text-align:right}
.px-prem-dat li>small{color:var(--gris);font-size:var(--t-chico);text-align:right}
.px-pie-datos{margin:0;color:var(--gris);font-size:var(--t-chico)}
.px-vacio-grande{align-items:flex-start}
.px-vacio-grande .ic-vacio{width:52px;height:52px;border-radius:16px;background:var(--ok-suave);display:grid;place-items:center;color:var(--ok)}
.px-vacio-grande .ic-vacio svg{width:24px;height:24px}
.px-vacio-grande p{color:var(--gris);max-width:60ch}
/* adelanto en Hoy */
.px-teaser{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-caja);background:var(--blanco);color:var(--tinta);text-decoration:none;margin-bottom:16px;box-shadow:var(--sombra);transition:box-shadow .15s var(--ease)}
.px-teaser:hover{box-shadow:0 0 0 1px #C9CCC2,0 6px 18px -8px rgba(21,22,28,.18)}
.px-teaser .ic{width:40px;height:40px;border-radius:12px;background:var(--ok-suave);display:grid;place-items:center;color:var(--ok);flex:none}
.px-teaser .ic svg{width:20px;height:20px}
.px-teaser-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.px-teaser-t b{font-weight:600}
.px-teaser-t small{color:var(--gris);font-size:var(--t-chico)}
.px-teaser::after{content:"";width:8px;height:8px;border-top:2px solid var(--gris2);border-right:2px solid var(--gris2);transform:rotate(45deg);flex:none;margin-right:4px}
/* listas largas: 3 a la vista y "Ver los N" */
.caja:not(.px-todos) .px-extra{display:none}
.px-vermas{align-self:flex-start}
.px-ambos{display:block;margin-top:8px;color:var(--alerta);font-weight:500}
/* fila de Sellar en "los dos" con la tarjeta de sellos llena: el riel arriba, cobrar y usar puntos abajo */
.fila .acc:has(.desliza):has(.px-cobrar){flex-wrap:wrap}
.fila .acc:has(.px-cobrar) .desliza{flex:1 1 100%}
.px-teaser .btn{flex:none}
@media (min-width:900px){.px-teaser::after{display:none}}

@media (max-width:899px){
  .px-teaser .btn{display:none}
  .fila .acc .btn.px-canj{flex:0 0 auto}
  .px-teaser{padding:12px 14px}
  .px-hoja .pago-cuerpo{padding:14px 16px}
  .px-hoja .pago-pie{padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))}
  .px-cli-acc .btn{flex:0 0 auto}
}
@media (min-width:640px){
  .px-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .px-gley{grid-template-columns:repeat(4,minmax(0,1fr))}
  .px-cli{grid-template-columns:auto minmax(0,1fr) auto}
  .px-cli-acc{grid-column:3}
}
@media (min-width:1100px){
  .px-cfg-grid{grid-template-columns:minmax(0,1fr) 340px}
  .px-cfg-grid>section{grid-column:1}
  .px-cfg-previa{grid-column:2;grid-row:1/span 5;align-self:start;position:sticky;top:24px}
  .px-guardar{bottom:24px}
  .px-modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .px-modo{flex-direction:column;align-items:flex-start;padding:16px}
  .px-modo .radio{position:absolute;top:14px;right:14px}
  .px-modo{position:relative}
  .px-fila-premio{grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr) auto;align-items:end}
  .px-fila-premio .campo.ancho{grid-column:auto}
  .px-fila-premio .px-pct{grid-column:auto;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;padding-bottom:6px}
  .px-fila-premio .px-pct>i{grid-column:1/-1}
  .px-fila-premio .px-quitar{grid-column:auto;grid-row:auto}
  .px-nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .px-datos-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.px-check,.px-gana.salta .px-mas,.px-guardar,.px-premio.nope{animation:none}.px-barra i,.px-comp-b i{transition:none}}

/* =====================================================================================================
   CAJA · diseño fase 1 (26-oct). ¿A quién le cargás? → Monto → Listo, y la hoja de Canjear.
   Vidrio solo en lo que flota (volver, deshacer, barra del visor). El contenido va sobre blanco sólido.
   Resortes: --px-res / --px-rebote los genera panel-puntos.js con la misma física del prototipo.
   ===================================================================================================== */
.pxf-vidrio{border:0;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(21,22,28,.06),0 6px 16px rgba(21,22,28,.08);color:var(--tinta);transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxf-vidrio:active{transform:scale(.94)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pxf-vidrio{background:rgba(255,255,255,.94)}}

/* ---------- ¿A quién le cargás? (la sección Sellar con puntos prendidos) ---------- */
#v-sellar.px-caja{max-width:640px;width:100%}
#v-sellar.px-caja .cabv h1{font:800 clamp(28px,8vw,34px)/1.08 var(--display);letter-spacing:-.025em}
#v-sellar.px-caja .cabv p{margin-top:4px;font:400 15px/1.4 var(--texto);color:var(--gris)}
#v-sellar.px-caja #btnEscanear{display:none}
#v-sellar.px-caja .sellar-top{gap:16px}
.pxv-visor{position:relative;display:block;width:100%;height:300px;border:0;padding:0;border-radius:32px;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 28% 22%,#5A4737 0,rgba(90,71,55,0) 55%),radial-gradient(circle at 78% 70%,#2E3340 0,rgba(46,51,64,0) 55%),#1C1B1E;box-shadow:0 1px 2px rgba(21,22,28,.1),0 16px 40px rgba(21,22,28,.18);transition:transform 180ms cubic-bezier(.3,.7,.4,1);font:inherit;color:#fff}
.pxv-visor:active{transform:scale(.98)}
.pxv-visor:focus-visible{outline:3px solid var(--cobalto);outline-offset:3px}
.pxv-mira{position:absolute;left:50%;top:44%;width:184px;height:184px;margin:-92px 0 0 -92px}
.pxv-mira i{position:absolute;width:36px;height:36px;border:4px solid #fff}
.pxv-mira i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:18px}
.pxv-mira i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:18px}
.pxv-mira i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:18px}
.pxv-mira i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:18px}
.pxv-linea{position:absolute;left:14px;right:14px;top:4px;height:3px;border-radius:2px;background:var(--woop);box-shadow:0 0 16px 4px rgba(242,86,28,.55);animation:pxvScan 1.8s ease-in-out infinite alternate}
@keyframes pxvScan{to{transform:translateY(172px)}}
.pxv-barra{position:absolute;left:12px;right:12px;bottom:12px;height:56px;border-radius:28px;background:rgba(30,30,36,.45);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 0 20px;font:600 15px/1.2 var(--texto);text-align:left}
.pxv-rayo{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.pxv-rayo svg{width:18px;height:18px}
#v-sellar.px-cam .pxv-visor{display:none}
#v-sellar.px-caja .camara{border-radius:32px}
#v-sellar.px-caja .buscador input{height:52px;border-radius:16px;box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.05);font-size:17px}
#v-sellar.px-caja .buscador input:focus{box-shadow:0 0 0 2px var(--tinta)}
#v-sellar.px-caja .buscador svg.lupa{color:var(--gris)}
.pxv-recientes{min-width:0}
.pxv-eti{margin:6px 0 10px;font:600 15px/1.2 var(--texto);color:var(--gris)}
.pxv-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 16px;margin:0 -16px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 16px}
.pxv-chips::-webkit-scrollbar{display:none}
.pxv-chip{flex:none;height:56px;border:0;border-radius:28px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.05);display:flex;align-items:center;gap:10px;padding:0 18px 0 8px;scroll-snap-align:start;font:inherit;color:inherit;cursor:pointer;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxv-chip:active{transform:scale(.96)}
.pxv-chip .av{width:40px;height:40px;font-size:13px}
.pxv-chip>span:last-child{display:flex;flex-direction:column;text-align:left}
.pxv-chip b{font:600 15px/1.25 var(--texto)}
.pxv-chip small{font:400 12px/1.3 var(--texto);color:var(--gris);font-variant-numeric:tabular-nums}
.pxv-nadie{margin:0;color:var(--gris);font-size:15px}
/* resultados de la búsqueda: una sola superficie con filas, tocar = cargarle */
#v-sellar.px-caja:not(.px-q) :is(#cuentaSellar,#listaSellar,#masSellar){display:none}
#v-sellar.px-caja.px-q .pxv-recientes{display:none}
#v-sellar.px-caja #cuentaSellar{margin:0}
#v-sellar.px-caja #listaSellar{gap:0;background:var(--blanco);border-radius:24px;padding:4px 0;overflow:hidden}
#v-sellar.px-caja #listaSellar>li.fila{background:transparent;box-shadow:none;border-radius:0;padding:8px 16px;grid-template-columns:minmax(0,1fr) auto;cursor:pointer;min-height:64px}
#v-sellar.px-caja #listaSellar>li.fila+li.fila::before{content:"";position:absolute;left:72px;right:0;top:0;height:1px;background:var(--linea)}
#v-sellar.px-caja #listaSellar>li.fila::after{content:"";width:9px;height:9px;border-top:2.4px solid #9A9EA8;border-right:2.4px solid #9A9EA8;transform:rotate(45deg);margin-right:6px;border-radius:1px}
#v-sellar.px-caja #listaSellar>li.fila:active{background:var(--hundido)}
#v-sellar.px-caja #listaSellar .acc,#v-sellar.px-caja #listaSellar .fila .siempre{display:none}
#v-sellar.px-caja #listaSellar .quien .av{width:44px;height:44px}
#v-sellar.px-caja #listaSellar .nom{font-size:17px}
#v-sellar.px-caja #listaSellar .vacio-caja{box-shadow:none;background:transparent}

/* ---------- el flujo: Monto → Listo ---------- */
html.px-flujo-abierto,html.px-canje-abierto{overflow:hidden}
.pxf{position:fixed;inset:0;z-index:90}
.pxf[hidden]{display:none}
.pxf-velo{position:absolute;inset:0;background:rgba(21,22,28,.32);opacity:0;transition:opacity 240ms ease-out}
.pxf.ver .pxf-velo{opacity:1}
.pxf-marco{position:absolute;inset:0;background:var(--papel);overflow:hidden;transform:translateY(105%);transition:transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1))}
.pxf.pxf-lado .pxf-marco{transform:translateX(105%)}
.pxf.ver .pxf-marco{transform:none}
.pxf-p{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 0 calc(16px + env(safe-area-inset-bottom,0px));transition:transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1)),opacity 240ms ease-out}
.pxf.listo .pxf-monto{transform:translateX(-28%);opacity:0;pointer-events:none}
.pxf-listo{opacity:0;transform:scale(1.04);pointer-events:none;align-items:center;padding-left:20px;padding-right:20px;overflow-y:auto;overscroll-behavior:contain;background:var(--papel)}
.pxf.listo .pxf-listo{opacity:1;transform:none;pointer-events:auto}
.pxf-cab{display:flex;align-items:center;gap:12px;padding:0 16px}
.pxf-atras{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.pxf-atras svg{width:18px;height:18px}
.pxf-cli{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:56px;padding:0 16px 0 6px;border-radius:28px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.05)}
.pxf-cli .av{width:44px;height:44px;font-size:14px}
.pxf-cli-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.pxf-cli-t b{font:600 15px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxf-cli-t small{font:400 13px/1.3 var(--texto);color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxf-centro{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 20px;container-type:inline-size}
.pxf-rot{margin:0;font:500 15px/1.3 var(--texto);color:var(--gris)}
.pxf-num{display:block;max-width:100%;white-space:nowrap;text-align:center;font:800 min(68px,calc(100cqw / (var(--n,2) * .74)))/1.05 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--tinta);transition:color .18s ease-out}
.pxf-num.vacio{color:#B4B7BF}
.pxf-prev{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.pxf-chip{height:34px;padding:0 14px;border-radius:17px;font:700 15px/1 var(--texto);display:inline-flex;align-items:center;white-space:nowrap;transition:background-color .26s,color .26s,transform .26s cubic-bezier(.34,1.56,.64,1)}
.pxf-chip.pts{background:#E3E7FC;color:#1B33B5}
.pxf-chip.sello{background:#FCE1D5;color:#A33A10}
.pxf-chip.gris{background:var(--hundido);color:var(--gris);transform:scale(.96)}
.pxf-chip.grande{height:36px;padding:0 16px;border-radius:18px;font-size:17px}
.pxf-chip.salta{animation:pxfSalta .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes pxfSalta{from{transform:scale(.86)}}
.pxf-regla{margin:0;font:400 13px/1.35 var(--texto);color:var(--gris);text-align:center}
.pxf-teclado{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 20px}
.pxf-tecla{height:clamp(50px,7.4vh,62px);border:0;border-radius:20px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 3px 8px rgba(21,22,28,.04);font:600 28px/1 var(--texto);font-variant-numeric:tabular-nums;color:var(--tinta);display:grid;place-items:center;cursor:pointer;transition:transform 140ms cubic-bezier(.3,.7,.4,1),background-color 140ms;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.pxf-tecla:active{transform:scale(.94);background:var(--hundido)}
.pxf-tecla svg{width:26px;height:26px}
.pxf-pie{padding:14px 20px 0}
.pxf-cta{width:100%;height:60px;border:0;border-radius:30px;background:var(--woop);color:#fff;font:700 19px/1 var(--texto);font-variant-numeric:tabular-nums;cursor:pointer;box-shadow:0 12px 28px rgba(242,86,28,.3);transition:transform 180ms cubic-bezier(.3,.7,.4,1),background-color 200ms ease-out,box-shadow .2s}
.pxf-cta:active{transform:scale(.97)}
.pxf-cta:disabled{background:var(--hundido);color:#8A8E98;box-shadow:none;cursor:default}
/* Listo */
.pxf-hecho{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:18px;background:#E2F0E8;color:#13683F;font:600 15px/1 var(--texto);flex:none;margin-top:6px}
.pxf-hecho>span{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.pxf-hecho svg{width:14px;height:14px}
.pxf-anillo{position:relative;width:min(240px,62vw,30vh);aspect-ratio:1;margin-top:20px;flex:none}
.pxf-anillo svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pxf-anillo circle{fill:none;stroke-width:20}
.pxf-anillo .pista{stroke:#DDE2FA}
.pxf-anillo .arco{stroke:var(--cobalto);stroke-linecap:round}
.pxf-anillo-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pxf-anillo-t b{font:800 clamp(34px,11vw,48px)/1 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pxf-anillo-t span{font:600 13px/1.2 var(--texto);color:var(--gris);margin-top:6px}
.pxf-anillo-t em{font:600 13px/1.2 var(--texto);font-style:normal;color:#A33A10;margin-top:2px;font-variant-numeric:tabular-nums}
.pxf-chips{display:flex;gap:8px;margin-top:18px;flex:none;flex-wrap:wrap;justify-content:center}
.pxf-sellos{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:18px;max-width:100%;flex:none}
.pxf-sellos i{width:28px;height:28px;border-radius:50%;background:var(--hundido);border:1.5px dashed #C2C4BB;display:grid;place-items:center;transform:rotate(var(--r))}
.pxf-sellos i.on{background:radial-gradient(circle at 35% 30%,#FF7B47,#F2561C 58%,#D44610);border:0;box-shadow:inset 0 0 0 2.5px rgba(255,255,255,.28),0 1px 2px rgba(150,50,10,.3);color:#fff}
.pxf-sellos i svg{width:14px;height:14px}
.pxf-sellos i.nuevo{animation:pxfSello var(--px-rebote-ms,520ms) var(--px-rebote,cubic-bezier(.34,1.56,.64,1)) .55s both}
@keyframes pxfSello{from{transform:rotate(var(--r)) scale(.01)}to{transform:rotate(var(--r)) scale(1)}}
.pxf-premio{margin-top:18px;width:100%;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:24px;background:var(--lima);box-shadow:0 10px 24px rgba(150,180,20,.25);color:var(--tinta);flex:none;animation:pxfEntra var(--px-rebote-ms,520ms) var(--px-rebote,cubic-bezier(.34,1.56,.64,1)) .9s both}
@keyframes pxfEntra{from{transform:translateY(10px) scale(.96);opacity:0}}
.pxf-premio>svg{width:26px;height:26px;flex:none}
.pxf-premio>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pxf-premio b{font:700 17px/1.25 var(--texto)}
.pxf-premio small{font:400 13px/1.35 var(--texto);color:#2F3214}
.pxf-premio-b{height:44px;padding:0 16px;border:0;border-radius:22px;background:var(--tinta);color:#fff;font:600 15px/1 var(--texto);flex:none;cursor:pointer;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxf-premio-b:active{transform:scale(.96)}
.pxf-prox{margin:14px 0 0;font:400 15px/1.45 var(--texto);color:#4A4D56;text-align:center;text-wrap:pretty;flex:none}
.pxf-nota{margin:8px 0 0;font:500 13px/1.4 var(--texto);color:var(--alerta);text-align:center;flex:none}
.pxf-espacio{flex:1;min-height:14px}
.pxf-deshacer-lugar{min-height:48px;display:flex;align-items:center;justify-content:center;flex:none}
.pxf-deshacer{height:48px;padding:0 16px 0 12px;border-radius:24px;display:flex;align-items:center;gap:10px;font:600 15px/1 var(--texto);cursor:pointer}
.pxf-deshacer svg{width:24px;height:24px;transform:rotate(-90deg)}
.pxf-deshacer circle{fill:none;stroke-width:2.5}
.pxf-deshacer .p{stroke:#DCDED6}
.pxf-deshacer .a{stroke:var(--tinta);stroke-linecap:round}
.pxf-deshacer .pxf-seg{color:var(--gris);font-weight:500;font-variant-numeric:tabular-nums;min-width:30px;text-align:left}
.pxf-registrado{margin:0;font:400 13px/1.2 var(--texto);color:var(--gris);animation:pxfEntra .3s ease-out both}
.pxf-pie.dos{display:flex;gap:10px;width:100%;padding:14px 0 0;flex:none}
/* celus bajos (iPhone SE, 667 px, P6 27-oct): "Cargar otra" y "Listo" quedaban cortados abajo. Anillo más chico y la botonera
   siempre a la vista (pegada abajo si igual hace falta desplazar). */
@media (max-width:899px) and (max-height:720px){
  .pxf-listo .pxf-anillo{width:min(170px,25vh);margin-top:12px}
  .pxf-listo .pxf-pie.dos{position:sticky;bottom:0;background:var(--papel);z-index:2}
}
.pxf-b{flex:1;height:56px;border:0;border-radius:28px;font:600 17px/1 var(--texto);cursor:pointer;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxf-b:active{transform:scale(.97)}
.pxf-b.blanco{background:var(--blanco);color:var(--tinta);box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.05)}
.pxf-b.tinta{background:var(--tinta);color:#fff}
.pxf-confeti{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:2}
.pxf-confeti i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--c);animation:pxfBurst var(--ms,1000ms) cubic-bezier(.15,.8,.3,1) forwards}
.pxf-confeti i.c{width:6px;height:13px;border-radius:2px}
@keyframes pxfBurst{0%{transform:translate(0,0) scale(.5) rotate(0deg);opacity:1}75%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r));opacity:0}}
.pxf :focus-visible,.pxc :focus-visible{outline:3px solid var(--cobalto);outline-offset:2px}

/* ---------- Canjear: hoja que sube con resorte ---------- */
.pxc{position:fixed;inset:0;z-index:95}
.pxc[hidden]{display:none}
.pxc-velo{position:absolute;inset:0;background:rgba(21,22,28,.32);opacity:0;transition:opacity 240ms ease-out}
.pxc.ver .pxc-velo{opacity:1}
.pxc-hoja{position:absolute;left:8px;right:8px;bottom:8px;max-height:calc(100% - 40px);overflow-y:auto;overscroll-behavior:contain;border-radius:40px;background:var(--blanco);box-shadow:0 -2px 8px rgba(21,22,28,.04),0 24px 64px rgba(21,22,28,.2);padding:8px 20px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(115%);transition:transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1))}
.pxc.ver .pxc-hoja{transform:none}
.pxc-asa{height:20px;display:flex;justify-content:center;align-items:center}
.pxc-asa::before{content:"";width:36px;height:5px;border-radius:3px;background:#C9CBC2}
.pxc-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.pxc-cab h3{margin:0;font:800 22px/1.15 var(--display);letter-spacing:-.02em;min-width:0}
.pxc-x{width:44px;height:44px;margin-right:-6px;border:0;background:transparent;display:grid;place-items:center;flex:none;cursor:pointer;color:#3C3F48}
.pxc-x svg{width:32px;height:32px;padding:9px;border-radius:50%;background:var(--hundido)}
.pxc-sub{margin:6px 0 0;font:400 15px/1.45 var(--texto);color:#4A4D56}
.pxc-sub b{color:var(--tinta);font-weight:600}
.pxc-lista{margin-top:16px;border-radius:20px;background:var(--papel);padding:4px}
.pxc-fila{position:relative;width:100%;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;border:0;background:transparent;text-align:left;font:inherit;color:inherit;border-radius:16px;cursor:pointer;transition:background-color .15s,transform .12s}
.pxc-fila+.pxc-fila::before{content:"";position:absolute;left:60px;right:12px;top:0;height:1px;background:var(--linea);transition:opacity .15s}
.pxc-fila:active{transform:scale(.99)}
.pxc-fila[aria-checked=true]{background:#DDF3E7}
.pxc-fila[aria-checked=true]::before,.pxc-fila[aria-checked=true]+.pxc-fila::before{opacity:0}
.pxc-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blanco);color:var(--ok);flex:none}
.pxc-ic svg{width:18px;height:18px}
.pxc-ic.sello{background:radial-gradient(circle at 35% 30%,#FF7B47,#F2561C 58%,#D44610);color:#fff}
.pxc-fila-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pxc-fila-t b{font:600 17px/1.25 var(--texto);overflow-wrap:anywhere}
.pxc-fila-t small{font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxc-pts{font:800 18px/1 var(--display);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.pxc-pts small{font:600 12px/1 var(--texto);color:var(--gris)}
.pxc-marca{width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none;transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pxc-marca svg{width:14px;height:14px}
.pxc-fila[aria-checked=true] .pxc-marca{transform:scale(1)}
.pxc-fila.no{opacity:.5;cursor:not-allowed}
.pxc-fila.nope{animation:pxNo .35s}
.pxc-ayuda{margin:12px 4px 0;font:400 13px/1.45 var(--texto);color:var(--gris)}
.pxc-ok{margin-top:16px;width:100%;height:56px;border:0;border-radius:28px;background:var(--ok);color:#fff;font:700 17px/1 var(--texto);cursor:pointer;box-shadow:0 10px 24px rgba(23,128,79,.28);transition:transform 180ms cubic-bezier(.3,.7,.4,1),background-color .2s,box-shadow .2s}
.pxc-ok:active{transform:scale(.97)}
.pxc-ok:disabled{background:var(--hundido);color:#8A8E98;box-shadow:none;cursor:default}
.pxc-hecho{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 8px 2px}
.pxc-hecho-ic{position:relative;width:76px;height:76px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;animation:pxfPop var(--px-rebote-ms,520ms) var(--px-rebote,cubic-bezier(.34,1.56,.64,1)) both}
.pxc-hecho-ic>svg{width:36px;height:36px}
@keyframes pxfPop{from{transform:scale(.6);opacity:0}}
.pxc-hecho b{font:800 22px/1.2 var(--display);letter-spacing:-.02em;margin-top:10px;text-wrap:balance}
.pxc-hecho p{margin:0;font:400 15px/1.45 var(--texto);color:#4A4D56}

/* ---------- compu: la caja flota en el medio, con el mismo cuerpo que en el celu ---------- */
@media (min-width:900px){
  .pxf-marco{inset:auto;left:50%;top:50%;width:440px;height:min(860px,calc(100vh - 48px));border-radius:36px;box-shadow:0 2px 6px rgba(21,22,28,.1),0 40px 90px rgba(21,22,28,.28);transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1)),opacity .2s ease-out}
  .pxf.pxf-lado .pxf-marco{transform:translate(-50%,-46%) scale(.96)}
  .pxf.ver .pxf-marco{transform:translate(-50%,-50%);opacity:1}
  .pxf-p{padding-top:20px;padding-bottom:20px}
  .pxf-anillo{width:min(240px,30vh)}
  .pxc-hoja{left:50%;right:auto;bottom:auto;top:50%;width:440px;max-height:calc(100vh - 48px);transform:translate(-50%,-44%) scale(.96);opacity:0;transition:transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1)),opacity .2s ease-out}
  .pxc.ver .pxc-hoja{transform:translate(-50%,-50%);opacity:1}
  .pxv-chips{flex-wrap:wrap;overflow:visible;margin:0;padding:4px 0 0}
  .pxv-visor{height:320px}
}
@media (prefers-reduced-motion:reduce){
  .pxf-marco,.pxf-p,.pxc-hoja{transition:opacity .15s linear!important}
  .pxf.pxf-lado .pxf-marco,.pxf-marco{transform:none}
  .pxf:not(.ver) .pxf-marco{opacity:0}
  .pxf.listo .pxf-monto{transform:none}
  .pxc-hoja{transform:none}.pxc:not(.ver) .pxc-hoja{opacity:0}
  .pxv-linea,.pxf-sellos i.nuevo,.pxf-premio,.pxc-hecho-ic,.pxf-chip.salta,.pxf-registrado{animation:none}
  .pxf-anillo .arco{transition:none!important}
}
.pxf-cli:has(.pxf-canj){padding-right:6px}
.pxf-canj{margin-left:auto;flex:none;height:44px;padding:0 14px 0 11px;border:0;border-radius:22px;background:#DDF3E7;color:#13683F;font:600 15px/1 var(--texto);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxf-canj:active{transform:scale(.96)}
.pxf-canj svg{width:18px;height:18px}
@media (max-width:359px){.pxf-canj span{display:none}.pxf-canj{padding:0 12px}}
/* compu (P6, 27-oct): la cabecera con "Canjear" se esconde y la ficha de al lado no lo tenía: sin esto no se podía canjear desde la caja */
.pxf-ficha .pxf-canj-ficha{margin:16px 0 0;padding:0 18px 0 14px}
.pxf-ficha .pxf-canj-ficha:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* =====================================================================================================
   DATOS · diseño fase 1 (26-oct): un número héroe por bloque y una frase; lo demás en hojas.
   ===================================================================================================== */
.pxd-grid{display:flex;flex-direction:column;gap:40px;min-width:0}
.pxd-grid>*{min-width:0}
.pxd-bloque{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pxd-bloque>*{max-width:100%}
.pxd-rot{margin:0;font:600 15px/1.3 var(--texto);color:var(--gris)}
.pxd-tit{margin:0;font:600 17px/1.3 var(--texto);letter-spacing:0;color:var(--tinta)}
.pxd-heroe{margin:6px 0 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font:800 clamp(36px,11vw,48px)/1.04 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--tinta)}
.pxd-heroe small{font:600 17px/1.2 var(--texto);letter-spacing:0;color:#3C3F48}
.pxd-heroe.pxd-m{font-size:clamp(26px,8vw,34px);gap:6px}
.pxd-heroe.pxd-m small{font-size:15px}
.pxd-fila-delta{margin:10px 0 0}
.pxd-pastilla{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:13px;font:700 13px/1 var(--texto)}
.pxd-pastilla svg{width:13px;height:13px}
.pxd-pastilla.sube{background:#E2F0E8;color:#13683F}
.pxd-pastilla.baja{background:#FBEBD3;color:#8A5208}
.pxd-pastilla.igual{background:var(--hundido);color:#4A4D56}
.pxd-delta{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:600 13px/1.3 var(--texto);color:#4A4D56}
.pxd-delta svg{width:14px;height:14px;flex:none}
.pxd-delta.sube{color:#13683F}
.pxd-delta.baja{color:#8A5208}
.pxd-frase{margin:12px 0 0;font:400 15px/1.45 var(--texto);color:#4A4D56;text-wrap:pretty}
.pxd-frase b{color:var(--tinta);font-weight:600}
.pxd-nota{margin:12px 0 0;font:400 13px/1.4 var(--texto);color:var(--gris)}
/* mes contra mes, al estilo Salud de Apple */
.pxd-comp{width:100%;margin-top:18px;display:grid;gap:6px}
.pxd-comp-f{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 13px/1.3 var(--texto);color:var(--gris)}
.pxd-comp-f b{font:700 15px/1.2 var(--texto);color:var(--cobalto);font-variant-numeric:tabular-nums}
.pxd-comp-f.antes{margin-top:8px}
.pxd-comp-f.antes b{color:#4A4D56}
.pxd-barra{display:block;height:12px;border-radius:6px;width:0;min-width:12px;transition:width 900ms var(--px-res,cubic-bezier(.32,.72,0,1))}
.pxd-barra.ahora{background:var(--cobalto)}
.pxd-barra.antes{background:#C9CBC2}
.pxd-barra.ya{width:var(--w)}
/* tarjeta blanca: la única en Datos, para lo que pide acción hoy */
.pxd-tarjeta{display:flex;flex-direction:column;align-items:flex-start;margin:0 -8px;padding:24px 20px;border-radius:32px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 12px 32px rgba(21,22,28,.08)}
.pxd-tarjeta>*{max-width:100%}
.pxd-cab{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}
.pxd-chip{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:12px;font:700 12px/1 var(--texto);white-space:nowrap;flex:none}
.pxd-chip svg{width:11px;height:11px}
.pxd-chip.pxd-c-aviso,.pxd-chip.pxd-c-medio{background:#FBEBD3;color:#8A5208}
.pxd-chip.pxd-c-ok{background:#E2F0E8;color:#13683F}
.pxd-chip.pxd-c-alto{background:#F9DEDE;color:#9C2525}
.pxd-chip.pxd-c-gris{background:var(--hundido);color:#4A4D56}
.pxd-quienes{display:flex;align-items:center;gap:12px;width:100%;margin-top:16px;padding:0;border:0;background:none;font:400 13px/1.35 var(--texto);color:#4A4D56;text-align:left;cursor:pointer}
.pxd-quienes>span:nth-child(2){flex:1;min-width:0}
.pxd-quienes>svg{width:14px;height:14px;color:#9A9EA8;flex:none}
.pxd-avs{display:flex;flex:none}
.pxd-avs .av{width:34px;height:34px;font-size:10px;letter-spacing:-.02em;box-shadow:0 0 0 2px var(--blanco)}
.pxd-avs .av+.av{margin-left:-6px}
.pxd-cta{margin-top:18px;width:100%;height:54px;border:0;border-radius:27px;background:var(--woop);color:#fff;font:700 19px/1 var(--texto);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 10px 24px rgba(242,86,28,.25);transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxd-cta:active{transform:scale(.97)}
.pxd-cta svg{width:20px;height:20px}
.pxd-gris{margin-top:16px;height:44px;padding:0 16px 0 18px;border:0;border-radius:22px;background:var(--hundido);color:var(--tinta);font:600 15px/1 var(--texto);display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
.pxd-gris:hover{color:var(--tinta)}
.pxd-gris:active{transform:scale(.97)}
.pxd-gris svg{width:14px;height:14px}
/* 4 grupos */
.pxd-gbarra{display:flex;gap:3px;height:14px;width:100%;margin-top:14px}
.pxd-gbarra i{display:block;min-width:8px;border-radius:7px}
.pxd-gbarra i.n{background:var(--lima)} .pxd-gbarra i.f{background:var(--cobalto)} .pxd-gbarra i.r{background:var(--woop)} .pxd-gbarra i.d{background:#C9CBC2}
.pxd-gley{list-style:none;margin:18px 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.pxd-gley b{display:flex;align-items:center;gap:8px;font:600 15px/1.3 var(--texto)}
.pxd-gley b span{color:var(--gris);font-variant-numeric:tabular-nums}
.pxd-gley b i{width:10px;height:10px;border-radius:50%;flex:none}
.pxd-gley i.n{background:#B8D62A} .pxd-gley i.f{background:var(--cobalto)} .pxd-gley i.r{background:var(--woop)} .pxd-gley i.d{background:#C9CBC2}
.pxd-gley small{display:block;margin:3px 0 0 18px;font:400 13px/1.35 var(--texto);color:var(--gris)}
/* ticket y frecuencia */
.pxd-par{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pxd-par>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* costo real */
.pxd-rango{position:relative;width:100%;height:28px;margin-top:18px}
.pxd-rango i{position:absolute;display:block}
.pxd-rango .pista{left:0;right:0;top:10px;height:8px;border-radius:4px;background:var(--hundido)}
.pxd-rango .sano{top:10px;height:8px;border-radius:4px;background:#BFE0CD}
.pxd-rango .pin{top:4px;left:0;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--tinta);border:4px solid var(--blanco);box-shadow:0 2px 6px rgba(21,22,28,.2);transition:left 700ms var(--px-res,cubic-bezier(.2,.8,.2,1))}
.pxd-rango .pin.ya{left:var(--x)}
.pxd-rango-et{position:relative;width:100%;height:16px;font:400 12px/16px var(--texto);color:var(--gris);font-variant-numeric:tabular-nums}
.pxd-rango-et span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pxd-rango-et span:first-child{transform:none}
.pxd-rango-et span:last-child{transform:translateX(-100%)}
/* mejores clientes */
.pxd-top{list-style:none;margin:12px 0 0;padding:0;width:100%}
.pxd-top li{position:relative;display:grid;grid-template-columns:20px 36px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px}
.pxd-top li+li::before{content:"";position:absolute;left:68px;right:0;top:0;height:1px;background:var(--linea)}
.pxd-top .pxd-pos{font:600 13px/1 var(--texto);color:var(--gris);text-align:right;font-variant-numeric:tabular-nums}
.pxd-top .av{width:36px;height:36px;font-size:11px}
.pxd-top .pxd-t{display:flex;flex-direction:column;min-width:0}
.pxd-top .pxd-t b{font:600 15px/1.3 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxd-top .pxd-t small{font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxd-top .pxd-plata{font:600 15px/1 var(--texto);font-variant-numeric:tabular-nums;white-space:nowrap}
.pxd-bloque:not(.px-todos) .px-extra{display:none}
/* más datos: una sola superficie, filas que abren hojas */
.pxd-lista{list-style:none;margin:12px 0 0;padding:4px 0;width:100%;background:var(--blanco);border-radius:20px}
.pxd-lista li{position:relative}
.pxd-lista li+li::before{content:"";position:absolute;left:60px;right:0;top:0;height:1px;background:var(--linea)}
.pxd-lista button{width:100%;min-height:56px;display:flex;align-items:center;gap:12px;padding:8px 16px;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:16px}
.pxd-lista button:active{background:var(--hundido)}
.pxd-lista .pxd-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--papel);color:#4A4D56;flex:none}
.pxd-lista .pxd-ic svg{width:18px;height:18px}
.pxd-lista .pxd-t{flex:1;min-width:0;font:500 16px/1.3 var(--texto)}
.pxd-lista .pxd-v{font:500 15px/1.2 var(--texto);color:var(--gris);font-variant-numeric:tabular-nums;white-space:nowrap}
.pxd-lista button>svg{width:14px;height:14px;color:#9A9EA8;flex:none}
.pxd-pie{margin:12px 0 0;font:400 13px/1.4 var(--texto);color:var(--gris)}
/* hojas de Datos */
.pxd-hoja .pxc-hoja{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.pxd-hoja-lista{margin-top:12px}
.pxd-hoja .px-cli{grid-template-columns:auto minmax(0,1fr)}
.pxd-hoja .px-cli-acc{grid-column:2}
.pxd-hoja .pxd-cta{margin-top:16px}
@media (min-width:1100px){
  .pxd-grid{display:block;columns:2;column-gap:56px}
  .pxd-grid>*{break-inside:avoid;margin:0 0 48px}
  .pxd-tarjeta{margin:0 0 48px}
  .pxd-heroe{font-size:52px}
  .pxd-heroe.pxd-m{font-size:36px}
}
@media (prefers-reduced-motion:reduce){.pxd-barra,.pxd-rango .pin{transition:none}}
.pxd-barra.cero{display:none}

/* Canjear premio · fase 2 (26-oct): cliente con su saldo, "Puede canjear" y "Todavía no", confirmar entrega en verde */
.pxc-cab h3{font-size:22px}
.pxc-cli{display:flex;align-items:center;gap:12px;margin-top:14px}
.pxc-cli .av{width:48px;height:48px;font-size:15px}
.pxc-cli-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pxc-cli-t b{font:600 17px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxc-cli-t small{font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxc-saldo{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pxc-saldo b{font:800 28px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pxc-saldo small{font:400 12px/1 var(--texto);color:var(--gris);margin-top:4px}
.pxc-grupo{margin:20px 4px 8px;font:600 13px/1.2 var(--texto);color:var(--gris)}
.pxc-lista{margin-top:0;border-radius:20px;background:var(--papel);padding:0;overflow:hidden}
.pxc-fila{min-height:56px;padding:0 14px;gap:14px;border-radius:0}
.pxc-fila+.pxc-fila::before{left:54px;right:0}
.pxc-fila[aria-checked=true]{background:transparent}
.pxc-fila[aria-checked=true]::before,.pxc-fila[aria-checked=true]+.pxc-fila::before{opacity:1}
.pxc-fila:not(.no):active{background:var(--hundido)}
.pxc-radio{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;border:2px solid #C9CBC2;color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.pxc-radio svg{width:14px;height:14px}
.pxc-fila[aria-checked=true] .pxc-radio{background:var(--ok);border-color:var(--ok);color:#fff}
.pxc-candado{width:26px;display:grid;place-items:center;color:var(--gris);flex:none}
.pxc-candado svg{width:18px;height:18px}
.pxc-n{flex:1;min-width:0;font:500 17px/1.3 var(--texto);padding:8px 0;overflow-wrap:anywhere}
.pxc-d{font:400 15px/1 var(--texto);color:#4A4D56;font-variant-numeric:tabular-nums;white-space:nowrap}
.pxc-d small{font-size:13px;color:var(--gris)}
.pxc-fila.no{opacity:1;cursor:not-allowed}
.pxc-fila.no .pxc-n{color:var(--gris)}
.pxc-nada{margin:0 4px;font:400 15px/1.4 var(--texto);color:var(--gris)}
.pxc-ayuda{margin:14px 4px 0}
.pxc-ok{display:flex;align-items:center;justify-content:center;gap:8px}
.pxc-ok svg{width:18px;height:18px}
.pxf-premio-b{background:var(--ok)}
.pxf-tecla{font-weight:500}

/* =====================================================================================================
   PUNTOS Y PREMIOS · fase 2 (26-oct): Elegí cómo premiar (con la tarjeta Wallet en vivo), regla con − y +,
   premios en una sola superficie con su % de costo y "¿Qué tan generoso?".
   ===================================================================================================== */
.px-cfg-grid{gap:28px}
.pxp-sec{display:flex;flex-direction:column;min-width:0}
.pxp-sec[hidden]{display:none}
.pxp-tit{margin:0 4px 12px;font:600 17px/1.3 var(--texto);letter-spacing:0;color:var(--tinta)}
.pxp-tit.grande{font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.pxp-rot{margin:0 4px 10px;font:600 13px/1.2 var(--texto);color:var(--gris)}
.pxp-rot-fila{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.pxp-rot-fila .pxp-rot{margin:0}
.pxp-rot-fila span{font:400 13px/1.2 var(--texto);color:var(--gris)}
.pxp-grupo,.pxp-regla,.pxp-premios,.pxp-vps{border-radius:28px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 12px 32px rgba(21,22,28,.08)}
.pxp-grupo{overflow:hidden}
.pxp-opc{position:relative;width:100%;display:flex;gap:14px;padding:16px;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background-color .15s}
.pxp-opc+.pxp-opc::before{content:"";position:absolute;left:56px;right:0;top:0;height:1px;background:var(--linea)}
.pxp-opc:active{background:var(--papel)}
.pxp-radio{width:26px;height:26px;flex:none;margin-top:1px;border-radius:50%;border:2px solid #C9CBC2;display:grid;place-items:center;color:transparent;transition:background-color .2s,border-color .2s,color .2s}
.pxp-radio svg{width:14px;height:14px}
.pxp-opc[aria-checked=true] .pxp-radio{background:var(--lima);border-color:#B8D62A;color:var(--tinta)}
.pxp-opc-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pxp-opc-t b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 17px/1.3 var(--texto)}
.pxp-opc-t b em{height:22px;padding:0 9px;border-radius:11px;background:var(--lima);font:600 12px/1 var(--texto);font-style:normal;display:inline-flex;align-items:center;color:var(--tinta)}
.pxp-opc-t small{font:400 15px/1.4 var(--texto);color:var(--gris)}
/* regla con − y + */
.pxp-regla{display:flex;align-items:center;gap:12px;padding:16px}
.pxp-paso{width:48px;height:48px;flex:none;border:0;border-radius:50%;background:var(--hundido);display:grid;place-items:center;color:var(--tinta);cursor:pointer;transition:transform 160ms cubic-bezier(.3,.7,.4,1)}
.pxp-paso:active{transform:scale(.92)}
.pxp-paso svg{width:18px;height:18px}
.pxp-regla-v{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;font:400 13px/1.2 var(--texto);color:var(--gris)}
.pxp-regla-n{display:flex;align-items:baseline;justify-content:center;max-width:100%}
.pxp-regla-n em{font:800 26px/1.1 var(--display);font-style:normal;color:var(--tinta)}
.pxp-regla-n input{width:5.4ch;field-sizing:content;min-width:2ch;max-width:100%;border:0;background:transparent;padding:0 2px;border-radius:8px;font:800 26px/1.1 var(--display);letter-spacing:-.03em;color:var(--tinta);font-variant-numeric:tabular-nums;outline:none}
.pxp-regla-n input:focus{box-shadow:0 0 0 2px var(--cobalto)}
.pxp-ej{margin:8px 12px 0;font:400 13px/1.45 var(--texto);color:var(--gris)}
.pxp-ej .px-ambos{margin-top:6px}
.pxp-sello{display:flex;align-items:center;gap:10px;margin:16px 4px 0;font:400 15px/1.4 var(--texto);color:#4A4D56}
.pxp-sello[hidden]{display:none}
.pxp-sello i{width:22px;height:22px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#FF7B47,#F2561C 58%,#D44610)}
/* premios */
.pxp-premios{list-style:none;margin:0;padding:0;overflow:hidden}
.pxp-premio{position:relative;display:flex;gap:4px;align-items:flex-start;padding:6px 0 0 4px}
.pxp-quitar{width:44px;height:44px;flex:none;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.pxp-quitar span{width:22px;height:22px;border-radius:50%;background:var(--error);color:#fff;display:grid;place-items:center}
.pxp-quitar svg{width:12px;height:12px}
.pxp-premio-c{flex:1;min-width:0;padding:8px 16px 14px 0;box-shadow:inset 0 -1px 0 var(--linea)}
.pxp-premio-1{display:flex;align-items:center;gap:8px}
.pxp-nom{flex:1;min-width:0;border:0;background:transparent;padding:4px 6px;margin:-4px 0 -4px -6px;border-radius:8px;font:600 17px/1.3 var(--texto);color:var(--tinta);outline:none}
.pxp-nom::placeholder{color:#9A9EA8;font-weight:500}
.pxp-pts{display:flex;align-items:baseline;gap:4px;flex:none;color:var(--cobalto);font:600 17px/1.3 var(--texto)}
.pxp-pts input{width:3.6ch;field-sizing:content;min-width:2ch;border:0;background:transparent;padding:2px 4px;border-radius:8px;text-align:right;font:600 17px/1.3 var(--texto);color:var(--cobalto);font-variant-numeric:tabular-nums;outline:none}
.pxp-nom:focus,.pxp-pts input:focus,.pxp-premio-3 input:focus{box-shadow:0 0 0 2px var(--cobalto);background:var(--papel)}
.pxp-premio-2{margin:4px 0 0;font:400 13px/1.35 var(--texto);color:#4A4D56}
.pxp-pct{font-weight:600;font-variant-numeric:tabular-nums}
.pxp-pct.n-ok{color:var(--ok)} .pxp-pct.n-medio{color:var(--alerta)} .pxp-pct.n-alto{color:var(--error)} .pxp-pct.n-gris{color:var(--gris)}
.pxp-premio-3{margin:2px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px;font:400 13px/1.4 var(--texto);color:var(--gris)}
.pxp-premio-3 label{display:inline-flex;align-items:baseline;gap:2px}
.pxp-premio-3 em{font-style:normal}
.pxp-premio-3 input{width:6ch;field-sizing:content;min-width:3ch;border:0;background:transparent;padding:0 3px;border-radius:6px;font:500 16px/1.3 var(--texto);color:var(--tinta);font-variant-numeric:tabular-nums;outline:none;box-shadow:inset 0 -1.5px 0 #C9CBC2}
.pxp-agregar button{width:100%;height:56px;border:0;background:transparent;display:flex;align-items:center;gap:12px;padding:0 16px 0 15px;cursor:pointer;color:#A33A10;font:600 17px/1 var(--texto)}
.pxp-agregar button:active{background:var(--papel)}
.pxp-agregar button>span{width:22px;height:22px;border-radius:50%;background:var(--woop);color:#fff;display:grid;place-items:center}
.pxp-agregar svg{width:12px;height:12px}
/* ¿Qué tan generoso? */
.pxp-gen{width:100%;height:32px;margin:0;accent-color:var(--woop);cursor:pointer}
.pxp-gen-et{display:flex;justify-content:space-between;font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxp-prom{margin-top:18px}
.pxp-prom-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:400 15px/1.3 var(--texto);color:#4A4D56}
.pxp-prom-f b{font:800 22px/1 var(--display);letter-spacing:-.02em;color:var(--tinta);font-variant-numeric:tabular-nums}
.pxp-chip{height:24px;padding:0 10px;border-radius:12px;font:600 12px/1 var(--texto);display:inline-flex;align-items:center}
.pxp-chip.n-ok{background:#E2F0E8;color:#13683F} .pxp-chip.n-medio{background:#FBEBD3;color:#8A5208} .pxp-chip.n-alto{background:#F9DEDE;color:#9C2525} .pxp-chip.n-gris{background:var(--hundido);color:#4A4D56}
.pxp-prom-n{margin:6px 0 0;font:400 13px/1.4 var(--texto);color:var(--gris)}
/* valor del premio de sellos */
.pxp-vps{display:flex;align-items:center;gap:12px;padding:16px}
.pxp-vps-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:600 17px/1.3 var(--texto)}
.pxp-vps-t small{font:400 13px/1.35 var(--texto);color:var(--gris)}
.pxp-plata{display:flex;align-items:baseline;gap:2px;flex:none;padding:8px 12px;border-radius:14px;background:var(--papel)}
.pxp-plata em{font:600 17px/1.2 var(--texto);font-style:normal;color:var(--gris)}
.pxp-plata input{width:5ch;field-sizing:content;min-width:3ch;border:0;background:transparent;font:600 17px/1.2 var(--texto);font-variant-numeric:tabular-nums;color:var(--tinta);outline:none}
/* la tarjeta Wallet de ejemplo */
.px-cfg-previa .pxp-rot{text-align:center}
.pxp-wallet-lugar{width:236px;height:331px;margin:0 auto}
.pxp-wallet{--fondo:#2340E0;--txt:#fff;--sello:#F2561C;width:300px;height:420px;transform:scale(.7867);transform-origin:top left;border-radius:20px;overflow:hidden;background:var(--fondo);color:var(--txt);display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(21,22,28,.08),0 18px 44px rgba(21,22,28,.18);transition:background-color .42s ease-out,color .42s ease-out}
.pxp-w-cab{display:flex;align-items:center;gap:10px;height:62px;padding:0 16px;flex:none}
.pxp-w-logo{width:34px;height:34px;flex:none;border-radius:9px;background:var(--txt);color:var(--fondo);display:grid;place-items:center;font:800 11px/1 var(--display);letter-spacing:-.02em}
.pxp-w-nom{flex:1;min-width:0;font:600 15px/1.2 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxp-w-hdr{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pxp-w-hdr small,.pxp-w-campos small{font:600 10px/1.2 var(--texto);letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.pxp-w-hdr b{font:600 20px/1.15 var(--texto);font-variant-numeric:tabular-nums}
.pxp-w-tira{position:relative;height:134px;flex:none;background:color-mix(in srgb,var(--fondo) 86%,#000)}
.pxp-w-v{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .3s ease-out,transform .42s cubic-bezier(.34,1.3,.64,1);pointer-events:none}
.pxp-wallet[data-modo=sellos] .v-sellos,.pxp-wallet[data-modo=puntos] .v-puntos,.pxp-wallet[data-modo=ambos] .v-ambos{opacity:1;transform:none}
.v-sellos{display:grid;place-items:center}
.pxp-w-grilla{display:grid;grid-template-columns:repeat(5,38px);gap:10px 14px;justify-content:center;align-content:center}
.pxp-w-grilla i,.pxp-w-fila i{border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--txt) 45%,transparent);transform:rotate(var(--r))}
.pxp-w-grilla i{width:38px;height:38px}
.pxp-w-grilla i.on,.pxp-w-fila i.on{background:var(--sello);border:0;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.18)}
.v-puntos,.v-ambos{padding:18px 20px 0}
.pxp-w-pts{margin:0;display:flex;align-items:baseline;gap:8px;font:600 15px/1 var(--texto)}
.pxp-w-pts b{font:800 44px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pxp-w-pts.chico b{font-size:40px}
.pxp-w-barra{display:block;margin-top:16px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--txt) 20%,transparent);overflow:hidden}
.pxp-w-barra i{display:block;height:100%;border-radius:6px;background:var(--sello);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.v-puntos small,.v-ambos small{display:block;margin-top:8px;font:500 12px/1.3 var(--texto);opacity:.78}
.pxp-w-fila{display:flex;gap:6px;margin-top:14px}
.pxp-w-fila i{width:22px;height:22px}
.pxp-w-campos{display:flex;justify-content:space-between;gap:12px;padding:12px 16px 0}
.pxp-w-campos span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pxp-w-campos .der{align-items:flex-end;text-align:right;flex:none}
.pxp-w-campos b{font:600 15px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxp-w-qr{margin:auto auto 16px;width:106px;height:106px;padding:7px;border-radius:12px;background:#fff;flex:none;line-height:0}
.pxp-w-qr svg{width:92px;height:92px}
@media (min-width:1100px){
  .px-cfg-grid{grid-template-columns:minmax(0,640px) 340px;justify-content:start;column-gap:56px}
  .pxp-wallet-lugar{width:300px;height:420px}
  .pxp-wallet{transform:none}
}
@media (prefers-reduced-motion:reduce){.pxp-w-v,.pxp-wallet,.pxp-w-barra i{transition:none}}
/* Datos · fase 2: los mejores clientes en una sola superficie blanca */
.pxd-tit.grande{font:700 20px/1.25 var(--texto)}
.pxd-top{margin-top:14px;padding:4px 16px;border-radius:24px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 12px 32px rgba(21,22,28,.08)}
.pxd-top li+li::before{left:68px;right:-16px}
.px-guardar .btn.woop{font-weight:700;color:#fff}
.px-guardar{z-index:31}

/* =====================================================================================================
   CAJA en la COMPU · fase 3 (26-oct): espacio de trabajo centrado, cliente y teclado lado a lado,
   se tipea con el teclado físico (Enter confirma, Esc cierra) y los atajos se ven, sutiles.
   ===================================================================================================== */
.pxf kbd,.pxv-kbd kbd,.pxf-kbd{min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:rgba(21,22,28,.06);box-shadow:inset 0 -1px 0 rgba(21,22,28,.1);font:600 12px/1 var(--texto);color:var(--gris);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.pxf-cta .pxf-kbd,.pxf-b.tinta .pxf-kbd{background:rgba(255,255,255,.2);box-shadow:none;color:#fff}
.pxf .pxf-kbd,.pxf-kbd,.pxf-atajos,.pxv-kbd,.pxf-barra,.pxf-ficha{display:none}
.pxf-cta,.pxf-b.tinta{display:flex;align-items:center;justify-content:center;gap:12px}
/* La compu no tiene cámara (Mus, 26-oct): nada de escanear, el buscador manda */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  #v-sellar .pxv-visor,#v-sellar #btnEscanear,#v-sellar .camara:not(.pantalla){display:none!important}
  #v-sellar.px-caja:not([hidden]){max-width:640px!important;display:block!important;margin-inline:auto} /* :not([hidden]): oculta no se ve encima de otras vistas */
  #v-sellar.px-caja .sellar-top{display:block}
  #v-sellar.px-caja .buscador{margin-top:20px}
}
@media (min-width:1100px) and (hover:hover){
  .pxf .pxf-kbd{display:inline-flex}
  .pxv-kbd{display:flex;gap:4px;position:absolute;right:14px;pointer-events:none}
  #v-sellar.px-caja .buscador .limpiar:not([hidden])+.pxv-kbd{display:none}
}
@media (min-width:1100px){
  /* ¿Quién es? en dos columnas: el visor a la izquierda, el buscador y los recientes a la derecha */
  #v-sellar.px-caja:not([hidden]){max-width:1040px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;row-gap:14px;align-content:start}
  #v-sellar.px-caja>*{grid-column:2;min-width:0}
  #v-sellar.px-caja .sellar-top{display:contents}
  #v-sellar.px-caja .pxv-visor,#v-sellar.px-caja .camara:not(.pantalla){grid-column:1;grid-row:1/span 8;height:600px;max-width:none;aspect-ratio:auto;align-self:start;border-radius:36px}
  #v-sellar.px-caja .pxv-mira{width:224px;height:224px;margin:-112px 0 0 -112px;top:45%}
  #v-sellar.px-caja .pxv-mira i{width:44px;height:44px}
  #v-sellar.px-caja .cabv h1{font-size:36px}
  #v-sellar.px-caja .cabv p{font-size:16px}
  #v-sellar.px-caja .buscador input{height:56px;border-radius:18px;font-size:18px;padding-right:96px}
  .pxv-eti{margin:8px 4px 8px}
  .pxv-chips{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0;padding:6px;background:var(--blanco);border-radius:24px;box-shadow:0 1px 2px rgba(21,22,28,.06),0 12px 32px rgba(21,22,28,.08);overflow:visible}
  .pxv-chip{width:100%;height:60px;border-radius:18px;box-shadow:none;padding:0 12px 0 10px;background:transparent}
  .pxv-chip:hover,.pxv-chip.pxv-hl{background:var(--papel)}
  .pxv-chip>span:last-child{flex:1;min-width:0}
  .pxv-chip b{font-size:16px}
  .pxv-chip small{font-size:13px}
  .pxv-chip::after{content:"↵";min-width:22px;height:22px;padding:0 6px;border-radius:6px;background:rgba(21,22,28,.06);box-shadow:inset 0 -1px 0 rgba(21,22,28,.1);font:600 12px/22px var(--texto);color:var(--gris);text-align:center;opacity:0;transition:opacity .15s}
  .pxv-chip:hover::after,.pxv-chip.pxv-hl::after{opacity:1}
  #v-sellar.px-caja #listaSellar>li.fila.pxv-hl{background:var(--papel)}

  /* el flujo ocupa toda la pantalla, con una barra arriba */
  .pxf-marco{left:0;top:0;right:0;bottom:0;width:auto;height:auto;border-radius:0;box-shadow:none;transform:scale(.985);opacity:0;transition:opacity .22s ease-out,transform var(--px-res-ms,520ms) var(--px-res,cubic-bezier(.32,.72,0,1))}
  .pxf.pxf-lado .pxf-marco{transform:scale(.985)}
  .pxf.ver .pxf-marco{transform:none;opacity:1}
  .pxf-barra{position:absolute;top:0;left:0;right:0;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;z-index:2}
  .pxf-barra-i{display:flex;align-items:center;gap:12px;flex:1}
  .pxf-atajo{display:flex;align-items:center;gap:6px;font:400 13px/1 var(--texto);color:var(--gris)}
  .pxf-barra-c{display:flex;align-items:center;gap:10px;font:600 15px/1 var(--texto)}
  .pxf-logo{width:32px;height:32px;border-radius:10px;background:var(--woop);color:#fff;display:grid;place-items:center;font:800 10px/1 var(--display)}
  .pxf-barra-d{flex:1;text-align:right;font:400 13px/1 var(--texto);color:var(--gris)}
  .pxf-p{top:84px;left:0;right:0;margin:0 auto;max-width:1136px;padding:0 48px 48px}
  /* Monto: la ficha del cliente a la izquierda, el teclado a la derecha */
  .pxf-monto{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto auto auto;grid-template-areas:"ficha centro" "ficha teclado" "ficha pie";column-gap:48px;align-content:center;align-items:center}
  .pxf-monto .pxf-cab{display:none}
  .pxf-ficha{display:block;grid-area:ficha;border-radius:36px;background:var(--blanco);box-shadow:0 1px 2px rgba(21,22,28,.06),0 16px 40px rgba(21,22,28,.08);padding:32px}
  .pxf-ficha-cab{display:flex;align-items:center;gap:14px}
  .pxf-ficha-cab .av{width:56px;height:56px;font-size:17px}
  .pxf-ficha-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .pxf-ficha-t b{font:600 20px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pxf-ficha-t small{font:400 14px/1.3 var(--texto);color:var(--gris)}
  .pxf-cambiar{height:40px;padding:0 14px;border:0;border-radius:20px;background:var(--hundido);font:600 14px/1 var(--texto);color:var(--tinta);cursor:pointer;transition:transform 180ms cubic-bezier(.3,.7,.4,1)}
  .pxf-cambiar:active{transform:scale(.96)}
  .pxf-ficha-anillo{display:flex;align-items:center;gap:28px;margin-top:32px}
  .pxf-mini{position:relative;width:140px;height:140px;flex:none}
  .pxf-mini svg{width:100%;height:100%;transform:rotate(-90deg)}
  .pxf-mini circle{fill:none;stroke-width:12}
  .pxf-mini .pista{stroke:#DDE2FA}
  .pxf-mini .arco{stroke:var(--cobalto);stroke-linecap:round}
  .pxf-mini>span{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .pxf-mini b{font:800 30px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .pxf-mini small{font:600 12px/1 var(--texto);color:var(--gris);margin-top:4px}
  .pxf-ficha-anillo p{margin:0;font:400 16px/1.45 var(--texto);color:#4A4D56}
  .pxf-ficha-anillo p b{color:var(--tinta);font-weight:600}
  .pxf-sellos.izq{justify-content:flex-start;margin-top:28px;gap:7px}
  .pxf-sellos.izq i{width:30px;height:30px}
  .pxf-ficha-regla{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--hundido);font:400 13px/1.4 var(--texto);color:var(--gris)}
  .pxf-monto .pxf-centro{grid-area:centro;flex:none;padding:0;gap:10px}
  .pxf-monto .pxf-regla{display:none}
  .pxf-num{font-size:min(64px,calc(100cqw / (var(--n,2) * .74)));height:86px;display:flex;align-items:center;justify-content:center}
  .pxf-monto .pxf-teclado{grid-area:teclado;padding:0;margin-top:24px}
  .pxf-tecla{height:60px;border-radius:18px;font-size:24px}
  .pxf-monto .pxf-pie{grid-area:pie;padding:16px 0 0}
  .pxf-cta{font-size:17px}
  .pxf-atajos{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;margin:12px 0 0;font:400 12px/1.4 var(--texto);color:var(--gris)}
  .pxf-atajos kbd{height:20px;min-width:20px;font-size:11px}
  /* Listo: centrado, más aire */
  .pxf-listo{justify-content:center;overflow:visible}
  .pxf-anillo{width:220px}
  .pxf-premio,.pxf-pie.dos{max-width:460px}
  .pxf-espacio{flex:0 0 28px}
  .pxf-deshacer .pxf-kbd.claro{margin-left:2px}
  .pxc-hoja{width:500px}
}
/* Datos en la compu · fase 3: plata que volvió y costo a la izquierda (ancho), por irse y ritmo a la derecha */
@media (min-width:1100px){
  .pxd-grid{display:grid;columns:auto;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"volvio riesgo" "costo ritmo" "grupos mejores" "mas mejores";column-gap:56px;row-gap:56px;align-items:start}
  .pxd-grid>*,.pxd-grid>.pxd-tarjeta{margin:0;break-inside:auto}
  .pxd-tarjeta{padding:28px}
}

/* ---- Caja en el celu, versión "C" (Mus, 26-oct): solo la cámara en un recuadro, recientes como tickets y cobro en un cupón ---- */
.pxv-cam{cursor:pointer;overflow:hidden;isolation:isolate}
#v-sellar.px-cam .pxv-cam{display:block}
.pxv-cam .camara{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;border-radius:inherit;background:transparent}
.pxv-cam .camara :is(.mira,.leyenda,.cerrar,.cam-cambiar){display:none!important}
.pxv-cam-off{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:rgba(255,255,255,.85);font:600 15px/1.3 var(--texto)}
.pxv-cam-off svg{width:30px;height:30px}
.pxv-cam.apagada .pxv-cam-off{display:flex}
.pxv-chips.pxv-tks{display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;overflow:visible;margin:0;padding:0 0 8px}
.pxv-tk{position:relative;display:flex;align-items:stretch;width:100%;min-height:68px;padding:0;border:0;border-radius:20px;background:var(--blanco);color:var(--tinta);text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.04);transition:transform 160ms cubic-bezier(.3,.7,.4,1)}
.pxv-tk:active{transform:scale(.98)}
.pxv-tk.pxv-hl{box-shadow:0 0 0 2px var(--tinta)}
.pxv-tk>.av{width:44px;height:44px;font-size:14px;align-self:center;margin-left:14px;flex:none}
.pxv-tk-t{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px}
.pxv-tk-t b{font:600 16px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxv-tk-t small{font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxv-tk-n{width:92px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:2px dashed rgba(21,22,28,.14);font:800 13px/1.15 var(--texto);text-align:center}
.pxv-tk-n b{font:800 22px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pxv-tk-n small{font:600 11px/1 var(--texto);color:var(--gris);margin-top:4px}
.pxv-tk.premio .pxv-tk-n{background:#FFE27A;border-radius:0 20px 20px 0}
.pxv-tk::before,.pxv-tk::after{content:"";position:absolute;right:83px;width:18px;height:18px;border-radius:50%;background:var(--papel)}
.pxv-tk::before{top:-9px}.pxv-tk::after{bottom:-9px}
.pxf-c .pxf-cab-c{gap:12px}
.pxf-cab-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pxf-cab-t b{font:700 16px/1.25 var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pxf-cab-t small{font:400 13px/1.3 var(--texto);color:var(--gris)}
.pxf-cupon{flex:1;min-height:0;display:flex;flex-direction:column;margin:12px 16px 0;background:var(--blanco);border-radius:28px;box-shadow:0 1px 2px rgba(21,22,28,.06),0 4px 12px rgba(21,22,28,.04)}
.pxf-cup-a{display:flex;align-items:center;gap:12px;padding:14px 18px;flex:none}
.pxf-cup-a .av{width:44px;height:44px;font-size:14px}
.pxf-cup-a .pxf-cli-t{flex:1}
.pxf-cup-n{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pxf-cup-n b{font:800 26px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pxf-cup-n small{font:600 11px/1 var(--texto);color:var(--gris);margin-top:4px}
.pxf-corte{position:relative;height:2px;margin:0 18px;flex:none;background:repeating-linear-gradient(90deg,rgba(21,22,28,.18) 0 8px,transparent 8px 14px)}
.pxf-corte::before,.pxf-corte::after{content:"";position:absolute;top:-12px;width:26px;height:26px;border-radius:50%;background:var(--papel)}
.pxf-corte::before{left:-31px}.pxf-corte::after{right:-31px}
.pxf-c .pxf-centro{gap:8px;padding:10px 16px 0}
.pxf-c .pxf-rot{font:600 12px/1 var(--texto);text-transform:uppercase;letter-spacing:.08em}
.pxf-c .pxf-teclado{gap:2px;padding:6px 10px 10px}
.pxf-c .pxf-tecla{background:transparent;box-shadow:none;height:clamp(48px,7vh,60px)}
.pxf-c .pxf-tecla:active{background:var(--hundido)}
.pxf-c .pxf-pie{padding-top:12px}

/* ======================================================================= premio apartado (27-oct) */
/* Etiqueta azul en la fila del cliente: "Mañana tarde". La hoja de la caja: cupón amarillo con su código y "Se lo di". */
.px-ap-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#2340E0;color:#fff;font:700 12.5px/1 var(--texto);white-space:nowrap}
.px-ap-chip svg{width:13px;height:13px}
.px-ap-ok{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#DDF3E7;color:#17804F;font:600 13.5px/1 var(--texto)}
.px-ap-ok svg{width:15px;height:15px}
.px-ap-h{margin:10px 0 0;font:800 24px/1.15 var(--display);letter-spacing:-.02em}
.px-ap-cup{margin-top:14px;border-radius:24px;background:#FFE27A;color:var(--tinta);position:relative}
.px-ap-a{padding:16px 18px 14px}
.px-ap-a small{display:block;font:700 11px/1.2 var(--texto);text-transform:uppercase;letter-spacing:.08em;color:rgba(21,22,28,.6)}
.px-ap-a b{display:block;font:700 20px/1.2 var(--texto);margin-top:6px;overflow-wrap:anywhere}
.px-ap-d{position:relative;border-top:2px dashed rgba(21,22,28,.22);padding:14px 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.px-ap-d::before,.px-ap-d::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--blanco)}
.px-ap-d::before{left:-9px}.px-ap-d::after{right:-9px}
.px-ap-d span{display:block;font:500 12px/1.2 var(--texto);color:rgba(21,22,28,.62)}
.px-ap-d b{display:block;font:700 14.5px/1.25 var(--texto);margin-top:3px}
.px-ap-cod{font-family:ui-monospace,Consolas,monospace!important;letter-spacing:.06em}
.px-ap-cancelar{display:block;width:100%;margin-top:10px;height:44px;border:0;background:none;font:600 15px/1 var(--texto);color:var(--gris);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.px-ap-seguro{margin-top:16px;border-radius:18px;background:#FFF1EC;padding:14px;display:flex;flex-direction:column;gap:6px;font:400 14px/1.4 var(--texto)}
.px-ap-seguro b{font-weight:700}
.px-ap-seguro div{display:flex;gap:8px;margin-top:6px}
.px-ap-ficha{display:flex;align-items:center;gap:12px;margin:-2px 0 14px;padding:12px;border-radius:16px;background:#E3E8FD}
.px-ap-ic{width:36px;height:36px;border-radius:12px;background:#2340E0;color:#fff;display:grid;place-items:center;flex:none}
.px-ap-ic svg{width:18px;height:18px}
.px-ap-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.px-ap-t b{font:600 15px/1.25 var(--texto)}.px-ap-t small{font:400 13px/1.3 var(--texto);color:#3F434C}

/* =====================================================================================================
   DATOS · diseño "C · Números arriba" (Mus, 27-oct, compu y celu): franja con los 5 números + detalle en tarjetas.
   ===================================================================================================== */
#datosCuerpo{display:flex;flex-direction:column;gap:14px;min-width:0}
.pxd3-rot{margin:0;font:600 13.5px/1.3 var(--texto);color:var(--gris)}
.pxd3-franja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hundido);border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(21,22,28,.05)}
.pxd3-n{background:var(--blanco);padding:16px 16px 15px;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.pxd3-n.prim{grid-column:span 2;background:var(--tinta);color:#fff}
.pxd3-n.prim .pxd3-rot{color:rgba(255,255,255,.7)}
.pxd3-n.prim .pxd3-v{color:var(--lima)}
.pxd3-v{margin:8px 0 0;display:flex;align-items:baseline;gap:6px;font:800 clamp(24px,7vw,30px)/1.05 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--tinta);white-space:nowrap}
.pxd3-n.prim .pxd3-v{font-size:clamp(32px,10vw,40px)}
.pxd3-v small{font:600 14px/1 var(--texto);letter-spacing:0;color:#3C3F48}
.pxd3-v.mal{color:#C23030}
.pxd3-sub{display:inline-flex;align-items:center;gap:4px;margin-top:7px;font:500 12.5px/1.3 var(--texto);color:var(--gris)}
.pxd3-sub svg{width:13px;height:13px;flex:none}
.pxd3-sub.baja{color:#C23030;font-weight:600}
.pxd3-sub.sube{color:#13683F;font-weight:600}
.pxd3-n.prim .pxd3-sub{color:rgba(255,255,255,.72)}
.pxd3-det{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.pxd3-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:20px;border-radius:26px;background:var(--blanco);box-shadow:0 0 0 1px rgba(21,22,28,.05),0 6px 18px -12px rgba(21,22,28,.18)}
.pxd3-card>*{max-width:100%}
.pxd3-riesgo{background:#FFE6DB}
.pxd3-riesgo .pxd-avs .av{box-shadow:0 0 0 2px #FFE6DB}
.pxd3-big{margin:8px 0 0;display:flex;align-items:baseline;gap:8px;font:800 clamp(40px,12vw,52px)/1 var(--display);letter-spacing:-.04em;color:var(--woop);font-variant-numeric:tabular-nums}
.pxd3-big small{font:600 16px/1 var(--texto);letter-spacing:0;color:var(--woop)}
.pxd3-card .pxd-frase{margin-top:10px;font-size:14.5px}
.pxd3-card .pxd-cta{height:52px;font-size:17px;border-radius:18px}
.pxd3-card .pxd-gbarra{height:12px}
.pxd3-gley{margin-top:14px}
.pxd3-sep{width:100%;height:1px;background:var(--hundido);margin:20px 0 16px}
.pxd3-card .pxd-rango{margin-top:6px}
.pxd3-pie-fila{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pxd3-pie-fila .pxd-frase{flex:1 1 320px}
.pxd3-pie-fila .pxd-gris{margin-top:10px}
.pxd3-card .pxd-top{margin-top:8px;padding:0;background:none;box-shadow:none;border-radius:0}
.pxd3-card .pxd-top li+li::before{right:0}
.pxd3-lista{margin:6px 0 0;padding:0;background:none}
.pxd3-lista button{padding:8px 4px}
.pxd3-lista li+li::before{left:48px}
#datosCuerpo>.pxd-pie{margin:4px 2px 0;max-width:80ch}
@media (min-width:900px){
  .pxd3-franja{grid-template-columns:1.4fr repeat(4,minmax(0,1fr))}
  .pxd3-n{padding:18px 20px}
  .pxd3-n.prim{grid-column:span 1}
  .pxd3-v{font-size:clamp(24px,2.1vw,34px)}
  .pxd3-n.prim .pxd3-v{font-size:clamp(28px,2.4vw,38px)}
  .pxd3-det{grid-template-columns:minmax(360px,1fr) minmax(0,2fr);gap:16px}
  .pxd3-ancho{grid-column:auto}
  .pxd3-card{padding:22px 24px}

}
/* en la compu, Datos usa el ancho de la pantalla (como Clientes), no la columna angosta del centro */
@media (min-width:1100px){.ec-v-datos .cont{max-width:1560px}}
@media (min-width:1400px){.pxd3-gley{grid-template-columns:repeat(4,minmax(0,1fr))}}