/* Cupones › Nuevo cupón › «Cómo lo ve el cliente» (18-oct-2026). Lo pinta assets/js/cupon-nivel.js. */
#cpfNivel .cpn-opciones{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#cpfNivel .cpn-op{ display:flex; flex-direction:column; gap:10px; padding:10px 10px 12px; border:2px solid var(--br-2); border-radius:16px;
  background:var(--sf); color:var(--tx-2); font:inherit; cursor:pointer; text-align:left; min-width:0;
  transition:border-color .16s ease-out, transform .12s ease-out; }
@media (hover:hover){ #cpfNivel .cpn-op:hover{ border-color:var(--tx-3); } }
#cpfNivel .cpn-op:active{ transform:scale(.985); }
#cpfNivel .cpn-op.on{ border-color:var(--tx); color:var(--tx); }
#cpfNivel .cpn-op:focus-visible, #cpfNivel .cpn-super.puede:focus-visible{ outline:3px solid #0071e3; outline-offset:2px; }

/* La tarjeta, sin que sus clics le lleguen (el botón es la opción entera). */
#cpfNivel .cpn-carta{ display:block; width:100%; min-height:96px; pointer-events:none; border-radius:12px; overflow:hidden; }
#cpfNivel .cpn-escala{ display:block; width:400px; }
#cpfNivel .cpn-carta.dibujada .cpn-escala{ width:100%; }
#cpfNivel .cpn-escala .tcu{ margin:0 auto; }

#cpfNivel .cpn-nombre{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; font-size:16px; font-weight:700; white-space:nowrap; }
#cpfNivel .cpn-nombre .fa-circle-check{ display:none; }
#cpfNivel .cpn-op.on .cpn-nombre .fa-circle-check{ display:inline; }
#cpfNivel .cpn-op.on .cpn-nombre .fa-circle{ display:none; }

/* El súper exclusivo: reservado (con candado) o, si el cupón ya lo era, elegible para conservarlo. */
#cpfNivel .cpn-super{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:14px;
  background:#f2f2f2; color:var(--tx-2); width:100%; font:inherit; text-align:left; border:2px solid transparent; }
#cpfNivel .cpn-super > span:nth-child(2){ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
#cpfNivel .cpn-super b{ font-size:15px; font-weight:700; color:var(--tx); }
#cpfNivel .cpn-super span span{ font-size:13px; font-weight:600; color:var(--tx-2); }
#cpfNivel .cpn-medalla{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:#1a1a1a; color:#ffb500; font-size:15px; }
#cpfNivel .cpn-candado{ font-size:16px; color:var(--tx-3); }
#cpfNivel .cpn-super.puede{ cursor:pointer; background:var(--sf); border-color:var(--br-2); }
#cpfNivel .cpn-super.puede .cpn-tick{ display:none; color:var(--tx); font-size:18px; }
#cpfNivel .cpn-super.puede.on{ border-color:var(--tx); }
#cpfNivel .cpn-super.puede.on .cpn-tick{ display:inline; }

/* La tarjeta dibujada aquí, por si la pieza de la tienda no carga. */
#cpfNivel .cpn-dibujo{ display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:12px; min-height:96px; }
#cpfNivel .cpn-dibujo .s{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
#cpfNivel .cpn-dibujo .c{ font-size:30px; font-weight:800; line-height:1.05; }
#cpfNivel .cpn-dibujo .q{ font-size:13px; font-weight:600; }
#cpfNivel .cpn-dibujo.normal{ background:linear-gradient(135deg,#2a1450,#14082b); color:#fff; }
#cpfNivel .cpn-dibujo.normal .s{ color:#c9a6ff; }
#cpfNivel .cpn-dibujo.exclusivo{ background:linear-gradient(135deg,#ffd34d,#ffb500); color:#1a1200; }

/* En la lista de cupones: el nivel en su losa. */
.cpn-chip{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; padding:2px 8px; border-radius:6px;
  font-size:12px; font-weight:700; white-space:nowrap; vertical-align:2px; }
.cpn-chip.exclusivo{ background:#ffb500; color:#1a1200; }
.cpn-chip.super{ background:#1a1a1a; color:#ffb500; }

#cpfNivelF .cpn-nota{ margin:10px 0 0; font-size:13px; font-weight:600; color:var(--tx-2); }

@media (max-width:560px){ #cpfNivel .cpn-opciones{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ #cpfNivel .cpn-op{ transition:none; } #cpfNivel .cpn-op:active{ transform:none; } }