/* CANJEAR76 — estilos de la pantalla de canje de puntos.
   Reusa las variables del portal (--red, etc.) y el tono de puntos.css. */

.cjbox{
  background:#fff;border:1px solid #ececec;border-radius:16px;
  padding:22px 20px;margin-top:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.cjrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cjrow>span{font-weight:600;color:#333;font-size:15px}

.cjstepper{display:flex;align-items:center;gap:16px}
.cjbtn{
  width:38px;height:38px;border-radius:11px;border:1px solid #e2e2e2;
  background:#fafafa;font-size:22px;line-height:1;color:#e11b22;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-weight:700;
  transition:background .12s,border-color .12s;
}
.cjbtn:hover{background:#fff0f0;border-color:#f3c2c4}
.cjbtn:active{transform:scale(.94)}
.cjnum{font-family:"Days One",system-ui,sans-serif;font-size:34px;min-width:70px;text-align:center;color:#111}

.cjslider{margin:20px 0 4px}
.cjslider input[type=range]{
  width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;
  background:linear-gradient(#e11b22,#e11b22) no-repeat, #eee;background-size:50% 100%;
  cursor:pointer;
}
.cjslider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:#e11b22;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.cjslider input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#e11b22;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;
}
.cjlims{display:flex;justify-content:space-between;font-size:12px;color:#999;margin-top:2px}

.cjeq{margin-top:18px;font-size:15px;color:#444;text-align:center}
.cjeq b{font-family:"Days One",system-ui,sans-serif;color:#0a8a3f;font-size:22px;display:inline-block;margin-left:4px}
.cjnota{margin-top:10px;font-size:12.5px;color:#999;text-align:center;line-height:1.4}

/* ---- procesando ---- */
.cjproc{text-align:center;padding:40px 20px}
.cjproc p{color:#555;max-width:340px;margin:18px auto 0;line-height:1.5}
.cjspin{
  width:46px;height:46px;border-radius:50%;margin:0 auto;
  border:4px solid #f0d3d4;border-top-color:#e11b22;animation:cjspin .8s linear infinite;
}
@keyframes cjspin{to{transform:rotate(360deg)}}

/* ---- listo (cupon) ---- */
.cjok{
  background:#fff;border:1px solid #ececec;border-radius:16px;padding:26px 22px;margin-top:10px;
  text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.cjokico{
  width:56px;height:56px;border-radius:50%;background:#e9f8ef;color:#0a8a3f;
  display:flex;align-items:center;justify-content:center;margin:0 auto 6px;
}
.cjokico svg{width:30px;height:30px}
.cjcupon{margin:14px 0 6px}
.cjcupon span{display:block;font-size:13px;color:#888;margin-bottom:6px}
.cjcupon b{
  font-family:"IBM Plex Mono",monospace;font-size:26px;letter-spacing:1px;color:#111;
  background:#f6f6f6;border:1px dashed #cfcfcf;border-radius:10px;padding:10px 18px;display:inline-block;
}
.cjdetalle{display:flex;gap:14px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap}
.cjd{background:#fafafa;border:1px solid #eee;border-radius:11px;padding:10px 16px;min-width:120px}
.cjd span{display:block;font-size:12px;color:#999}
.cjd b{font-size:17px;color:#111}
.cjcomo{font-size:13.5px;color:#666;line-height:1.5;max-width:360px;margin:14px auto 20px}
.cjok .btn{display:inline-block;margin-bottom:6px}
.cjvolver{display:block;margin-top:12px;color:#888;font-size:14px;cursor:pointer;text-decoration:underline}
.cjvolver:hover{color:#e11b22}