/* =====================================================================
   Tarjeta de fidelidad con QR — estilos propios de la página.
   Se apoya en assets/rediseno.css (.rd-*) y en assets/pages/tarjetas-fidelidad.css (.ct-*, .metric, .status).
   Ids que usa el script: qrScreen, qrStatus, qrScan, qrNextDay, qrReset, qrDay, qrMToday, qrMTotal, qrMRedeem, qrLog.
   Sin degradados. Colores de marca: navy #061A33 y naranja #FF6B00.
   ===================================================================== */

.qr-demo{align-items:start}
@media (min-width:1000px){.qr-demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.qr-day{display:inline-block;padding:.3rem .8rem;border-radius:999px;background:var(--rd-cream);border:1px solid rgba(6,26,51,.14);font-family:var(--rd-head);font-weight:700;font-size:.85rem;color:var(--rd-night)}
.qr-sub{margin:1.2rem 0 .5rem;font-family:var(--rd-head);font-size:1rem;color:var(--rd-night)}
.qr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- el móvil ---------- */
.qr-phone{position:relative;width:min(100%,340px);margin:0 auto 1.4rem;padding:1.6rem .7rem .9rem;border:2px solid var(--rd-night);border-radius:38px;background:var(--rd-night)}
.qr-phone__speaker{position:absolute;top:.65rem;left:50%;width:4rem;height:.35rem;border-radius:999px;background:#3a4c66;transform:translateX(-50%)}
.qr-screen{min-height:27.5rem;border-radius:26px;background:#fff;overflow:hidden}

/* ---------- la tarjeta dentro del móvil ---------- */
.qr-app{padding:1rem 1rem 1.1rem}
.qr-app__top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--rd-muted)}
.qr-app__bar{margin:0;font-family:var(--rd-head);font-weight:800;color:var(--rd-night);max-width:none}
.qr-app__num{font-weight:700}
.qr-app__lema{margin:.5rem 0 .9rem;font-family:var(--rd-head);font-size:1.05rem;line-height:1.25;color:var(--rd-night);max-width:none}
.qr-app__lema b{color:var(--rd-orange-text,#B34700)}
.qr-stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.qr-stamps li{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center}
.qr-stamps svg{width:46%;height:46%;fill:currentColor;stroke:none}
.qr-stamps .qr-groove{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.qr-stamps .empty{border:2px dashed #9FB0C8;color:#9FB0C8}
.qr-stamps .empty .qr-groove{stroke:#fff}
.qr-stamps .full{background:var(--rd-night);border:2px solid var(--rd-night);color:#fff}
.qr-stamps .full .qr-groove{stroke:var(--rd-night)}
.qr-stamps .gift{background:#FFF1E6;border:2px solid var(--rd-orange);color:var(--rd-night)}
.qr-stamps .gift svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:44%;height:44%}
.qr-stamps .gift small{font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.qr-stamps .gift.on{background:var(--rd-orange);color:var(--rd-night);box-shadow:0 0 0 4px #FFE0C7}
.qr-app__prog{margin:.8rem 0 0;text-align:center;color:var(--rd-muted);max-width:none}
.qr-app__prog strong{font-family:var(--rd-head);font-size:1.2rem;color:var(--rd-night)}
.qr-app__falta{margin:.4rem 0 0;text-align:center;font-size:.88rem;color:var(--rd-muted);max-width:none}
.qr-prize{margin-top:.8rem;padding:.8rem;border:2px solid var(--rd-orange);border-radius:16px;background:#FFF7F0;text-align:center}
.qr-prize p{margin:0;max-width:none}
.qr-prize__t{font-family:var(--rd-head);font-weight:800;font-size:1.05rem;color:var(--rd-night)}
.qr-prize__p{margin:.15rem 0 .5rem!important;font-size:.9rem;color:var(--rd-ink)}
.qr-prize__n{font-size:.82rem;color:var(--rd-muted)}
.qr-redeem{display:block;width:100%;min-height:2.9rem;padding:.55rem 1rem;border:2px solid var(--rd-orange);border-radius:999px;background:var(--rd-orange);color:var(--rd-night);font-family:var(--rd-head);font-weight:800;font-size:.92rem;cursor:pointer;touch-action:manipulation}
.qr-redeem:hover{background:#ff8a33;border-color:#ff8a33}

/* ---------- el cupón ---------- */
.qr-coupon{padding:1.3rem 1rem 1.2rem;text-align:center;background:var(--rd-night);color:#fff;min-height:27.5rem}
.qr-coupon p{margin:0;max-width:none}
.qr-coupon__bar{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#C5D3E6}
.rd-tool .qr-coupon h3{margin:.25rem 0 0;font-size:1.5rem;line-height:1.1;text-transform:uppercase;letter-spacing:.03em;color:#fff}
.qr-coupon__premio{margin:.2rem 0 .8rem!important;color:#E8EEF6}
.qr-coupon__code{display:block;padding:.2rem 0 .2rem .25em;margin-bottom:.5rem!important;border-radius:14px;background:#fff;color:var(--rd-night);font-family:var(--rd-head);font-weight:800;font-size:2.3rem;letter-spacing:.25em}
.qr-coupon__clock{font-family:var(--rd-head);font-weight:800;font-size:2rem;font-variant-numeric:tabular-nums;color:#fff}
.qr-coupon__date{margin-bottom:.7rem!important;color:#C5D3E6;font-size:.9rem}
.qr-coupon__track{height:.6rem;margin:0 0 .5rem;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.qr-coupon__track i{display:block;height:100%;width:100%;background:var(--rd-orange);border-radius:999px;transition:width 1s linear}
.qr-coupon__left{font-size:.92rem}
.qr-coupon__n{margin:.6rem 0 .8rem!important;font-size:.8rem;color:#C5D3E6}
.qr-back{min-height:2.7rem;padding:.45rem 1.2rem;border:2px solid #fff;border-radius:999px;background:transparent;color:#fff;font-family:var(--rd-head);font-weight:700;font-size:.9rem;cursor:pointer;touch-action:manipulation}
.qr-back:hover{background:rgba(255,255,255,.14)}

/* ---------- controles y estado ---------- */
.qr-controls{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:.6rem}
@media (max-width:560px){.qr-controls{grid-template-columns:1fr 1fr}.qr-controls .ct-btn:first-child{grid-column:1 / -1}}
.qr-controls .ct-btn{min-height:3.25rem}

/* ---------- panel del dueño ---------- */
.qr-log{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.qr-log li{padding:.55rem .8rem;border:1px solid rgba(6,26,51,.12);border-left:4px solid var(--rd-night);border-radius:12px;background:#fff;font-size:.92rem;line-height:1.4}
.qr-log li.ok{border-left-color:var(--rd-orange)}
.qr-log li.no{border-left-color:#B42318;background:#FFF5F4}
.qr-log li.info{border-left-color:#0066FF}
.qr-log .qr-log__empty{color:var(--rd-muted);border-left-color:rgba(6,26,51,.2)}

/* ---------- reglas de la demo ---------- */
.qr-rules{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:860px){.qr-rules{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.qr-rules li{padding:1rem 1.2rem;border:1.5px solid rgba(6,26,51,.14);border-radius:18px;background:#fff;font-size:.95rem;line-height:1.5;color:var(--rd-ink)}
.qr-rules strong{display:block;margin-bottom:.15rem;font-family:var(--rd-head);color:var(--rd-night)}

/* ---------- pasos y bloques ---------- */
.qr-steps{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
@media (min-width:700px){.qr-steps{grid-template-columns:repeat(2,1fr);gap:2rem 2.5rem}}
@media (min-width:1100px){.qr-steps{grid-template-columns:repeat(4,1fr);gap:2rem}}
.qr-steps li{display:flex;gap:1rem;align-items:flex-start}
.qr-steps h3{font-size:1.2rem}
.qr-steps p{margin-top:.35rem;color:var(--rd-muted);font-size:.98rem}
.qr-incluye,.qr-limites{margin-bottom:0}
@media (min-width:860px){.qr-incluye{grid-template-columns:repeat(3,1fr);gap:2.2rem 2.5rem}}
.qr-incluye + .rd-banner{margin-top:3rem}

@media (prefers-reduced-motion:reduce){.qr-coupon__track i{transition:none}}