/* Tipografías: Lora (títulos) e Inter si están instaladas; si no, Georgia y la del sistema. Sin descargas externas. */
:root{
  --teal:#024442; --teal2:#0a5a57; --red:#B23A2E; --cream:#F7EEDF; --cream2:#efe3cf;
  --ink:#173a38; --muted:#5d7371; --bg:#e3e8e6; --line:#dccfb8; --ok:#2f7d4f;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif;min-height:100vh;
  display:flex;justify-content:center;padding:28px 16px 48px}
.sheet{width:100%;max-width:420px;background:var(--cream);border-radius:28px;border-top:10px solid var(--red);
  box-shadow:0 18px 50px rgba(2,68,66,.18);padding:26px 22px 28px}
.logo{font:600 15px/1.15 Lora,Georgia,serif;letter-spacing:.14em;text-align:center;color:var(--teal);text-transform:uppercase;margin:2px 0 14px}
h1{font:700 24px/1.2 Lora,Georgia,serif;color:var(--teal);text-align:center;margin:6px 0 6px}
h2{font:700 17px/1.2 Lora,Georgia,serif;color:var(--teal);margin:22px 0 10px}
.lead{text-align:center;color:var(--muted);margin:0 0 18px}
label{display:block;font-weight:600;font-size:13px;margin:12px 0 5px;color:var(--teal)}
input,select{width:100%;padding:12px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;color:var(--ink)}
input:focus,select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(2,68,66,.15)}
.row{display:flex;gap:10px}.row>*{flex:1}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;margin:12px 0;font-weight:400;color:var(--ink)}
.chk input{width:20px;height:20px;margin-top:1px;flex:none;accent-color:var(--teal)}
button,.btn{display:block;width:100%;border:0;border-radius:12px;padding:14px;font:600 15px Inter,sans-serif;cursor:pointer;
  background:var(--teal);color:#fff;text-align:center;text-decoration:none;margin-top:14px}
button:hover{background:var(--teal2)}
button.red{background:var(--red)} button.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal)}
button:disabled{opacity:.5;cursor:not-allowed}
.err{background:#fbe3df;color:#8a2a20;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:13px;display:none}
.ok{background:#e0f1e6;color:#1f5d39;border-radius:10px;padding:10px 12px;margin-top:12px;font-size:13px;display:none}
.link{background:none;color:var(--teal);text-decoration:underline;padding:8px;margin-top:6px;width:auto;display:inline-block;font-weight:500}
.center{text-align:center}
.small{font-size:12px;color:var(--muted)}
.demo{background:#fff4d6;border:1px dashed #c9962b;color:#7a5a10;border-radius:10px;padding:8px 10px;font-size:12px;margin-bottom:14px;text-align:center}

/* La tarjeta */
.card{position:relative;border-radius:22px;padding:20px 20px 18px;color:var(--cream);overflow:hidden;
  background:linear-gradient(150deg,var(--teal) 0%,#033d3b 60%,#022a29 100%);box-shadow:0 12px 28px rgba(2,68,66,.35)}
.card:before{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:rgba(178,58,46,.55)}
.card .top{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.card .brand{font:600 12px/1.15 Lora,Georgia,serif;letter-spacing:.16em;text-transform:uppercase}
.card .prog{font-size:11px;opacity:.75;margin-top:3px;letter-spacing:.04em}
.tier{font:700 11px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:99px;color:#2b2000}
.tier.basico{background:var(--cream);color:var(--teal)}
.tier.plata{background:var(--teal);color:var(--cream)}
.tier.oro{background:var(--cream);color:var(--red)}
.tier.golden{background:var(--teal);color:#f7dc8b}
.tier.black{background:#e3b341;color:#141414}
.card .pts{position:relative;margin:26px 0 2px;font:700 46px/1 Lora,Georgia,serif}
.card .pts small{font:500 14px Inter,sans-serif;opacity:.8;margin-left:6px}
.card .name{position:relative;font:600 16px Inter,sans-serif;margin-top:4px}
.bar{position:relative;height:8px;background:rgba(255,255,255,.18);border-radius:99px;margin:16px 0 6px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#F7EEDF,#fff);border-radius:99px;transition:width .6s}
.next{position:relative;font-size:12px;opacity:.85}
.qr{background:#fff;border-radius:14px;padding:12px;width:176px;margin:18px auto 4px;position:relative}
.qr canvas,.qr img,.qr svg{display:block;width:100%;height:auto}
.code{position:relative;text-align:center;font:600 13px/1 'Inter';letter-spacing:.22em;margin-top:8px}
.bday{background:linear-gradient(90deg,#fff3d1,#ffe3a0);border:1px solid #e0b64a;color:#6b4a00;border-radius:14px;padding:12px 14px;margin:14px 0 0;font-weight:600;text-align:center}

.rew{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:9px}
.rew .ic{font-size:22px;width:34px;text-align:center}
.rew b{display:block}.rew span{font-size:12px;color:var(--muted)}
.rew .cost{margin-left:auto;font:700 14px Lora,Georgia,serif;color:var(--teal);white-space:nowrap}
.rew.on{border-color:var(--ok);background:#f2fbf5}.rew.off{opacity:.62}
.rew button{width:auto;margin:0 0 0 auto;padding:9px 14px;font-size:13px}
.mov{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.mov b.p{color:var(--ok)}.mov b.m{color:var(--red)}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:6px}
.tiers div{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:8px 2px;text-align:center;font-size:10px}
.tiers div.me{border-color:var(--teal);box-shadow:0 0 0 2px rgba(2,68,66,.15)}
.tiers b{display:block;font:700 11.5px Lora,Georgia,serif;color:var(--teal);line-height:1.15;margin-bottom:2px}

.cup{background:#fff;border:1.5px solid var(--ok);border-radius:16px;padding:14px;margin-bottom:12px}
.cup .qr{border:1.5px solid var(--line);margin:12px auto 2px}
.cup .code{color:var(--teal)}
.cup-h{display:flex;gap:12px;align-items:center}
.cup-h .ic{font-size:26px;width:36px;text-align:center}
.cup-h b{display:block}.cup-h span{font-size:12px;color:var(--muted)}
.cup.usado,.cup.caducado{border-color:var(--line);background:#faf6ee;opacity:.8}
.cup.usado .cup-h span{color:var(--ok);font-weight:600}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);background:var(--teal);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:9;max-width:90vw;text-align:center}

/* Una tarjeta por nivel, con los colores de la casa: verde, crema y rojo */
.card.plata{background:linear-gradient(150deg,#F7EEDF 0%,#efe3cf 100%);color:var(--teal);box-shadow:0 0 0 2px var(--teal) inset,0 12px 28px rgba(2,68,66,.25)}
.card.plata:before{background:rgba(178,58,46,.85)}
.card.plata .bar{background:rgba(2,68,66,.15)} .card.plata .bar i{background:linear-gradient(90deg,var(--teal),var(--red))}
.card.oro{background:linear-gradient(150deg,#B23A2E 0%,#8f2c22 100%);box-shadow:0 12px 28px rgba(178,58,46,.4)}
.card.oro:before{background:rgba(2,68,66,.8)}
.card.oro .bar i{background:linear-gradient(90deg,var(--cream),#fff)}
.card.golden{background:linear-gradient(150deg,#e3b341 0%,#c9962b 55%,#a56f00 100%);color:var(--teal);box-shadow:0 0 0 3px #fff2b0 inset,0 12px 30px rgba(201,150,43,.5)}
.card.golden:before{background:rgba(178,58,46,.8)}
.card.golden .bar{background:rgba(2,68,66,.18)} .card.golden .bar i{background:var(--teal)}
.card.black{background:linear-gradient(150deg,#262626 0%,#141414 55%,#000 100%);color:var(--cream);box-shadow:0 0 0 2px #c9962b inset,0 12px 30px rgba(0,0,0,.5)}
.card.black:before{background:rgba(178,58,46,.75)}
.card.black .bar{background:rgba(255,255,255,.14)} .card.black .bar i{background:linear-gradient(90deg,#e3b341,#fff2b0)}
.tier{white-space:nowrap;letter-spacing:.06em;padding:5px 10px}
.card .brand{font-size:11px;letter-spacing:.12em}