/* Tarjeta Small Café · estilos compartidos
   Paleta tomada de smallcafe.cl: carbón, dorado y papel claro. */
:root{
  --paper:#ECEBE7; --paper-2:#E5E2D7; --char:#322E2F; --char-2:#423D3E; --ink:#222222; --muted:#6E6869;
  --gold:#C4A65B; --gold-soft:#D5BF8A; --gold-ink:#7D6223; --white:#FFFFFF; --line:#DCD8CE;
  --ok:#2E7D4F; --ok-bg:#E1EFE6; --warn:#A0611A; --warn-bg:#F5E8D6; --danger:#B3261E; --danger-bg:#F8E1DF;
  --hand:"Patrick Hand SC","Comic Sans MS",cursive; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:15px/1.45 var(--body);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:var(--gold-ink)}
h1,h2,h3,h4{font-family:var(--hand);font-weight:400;letter-spacing:.03em;margin:0;text-wrap:balance}
button,input,select{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.wrap{max-width:440px;margin:0 auto;padding-inline:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(32px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:16px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.top .logo{height:84px;width:auto}
.hello{text-align:right}
.hello small{display:block;font-size:12px;color:var(--muted)}
.hello b{font:400 26px/1 var(--hand)}

.box{background:var(--white);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px}
.box h3{font-size:21px}
.muted{color:var(--muted)}
.hint{font-size:13px;color:var(--muted);margin:0}
.center{text-align:center}

label{font-size:13px;font-weight:600}
.field{display:flex;flex-direction:column;gap:4px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],input[inputmode],select{
  width:100%;background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;font-size:16px;color:var(--ink)}
input:focus{border-color:var(--char)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:500}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--char);flex-shrink:0}
.otp{font:700 28px var(--mono)!important;letter-spacing:.4em;text-align:center}

.btn{border:0;border-radius:12px;padding:13px 16px;font-weight:700;font-size:15px;cursor:pointer;background:var(--char);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn.gold{background:var(--gold);color:var(--char)}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--line)}
.btn.danger{background:none;color:var(--danger);border:1.5px solid var(--danger-bg)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:0;color:var(--gold-ink);text-decoration:underline;cursor:pointer;font-size:13px}

.msg{border-radius:12px;padding:10px 12px;font-size:14px}
.msg.err{background:var(--danger-bg);color:var(--danger)}
.msg.ok{background:var(--ok-bg);color:var(--ok)}
.msg.info{background:var(--paper);color:var(--ink)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;
  background:var(--char);color:var(--paper);padding:12px 18px;border-radius:14px;font-weight:600;font-size:14px;max-width:calc(100% - 32px);box-shadow:0 10px 30px -10px rgba(0,0,0,.4)}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--ok)}

/* ---- Tarjeta de timbres ---- */
.card{background:var(--char);color:var(--paper);border-radius:22px;padding:18px 16px 16px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;opacity:.06;background:var(--paper);
  -webkit-mask:url(img/icono.png) center/contain no-repeat;mask:url(img/icono.png) center/contain no-repeat}
.card-h{display:flex;justify-content:space-between;align-items:baseline;position:relative}
.card-h .t{font:400 20px var(--hand);letter-spacing:.06em;color:var(--gold)}
.card-h .c{font-weight:700;font-variant-numeric:tabular-nums}
.card-h .c span{color:var(--gold-soft);font-weight:500}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 12px;margin-top:16px;position:relative}
.cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.slot{width:100%;max-width:78px;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(236,235,231,.32);display:grid;place-items:center;font:400 22px var(--hand);color:rgba(236,235,231,.45)}
.slot.on{border:0;background:var(--gold);transform:rotate(var(--r,-6deg));box-shadow:0 0 0 3px var(--char),0 0 0 5px var(--gold)}
.slot.on i{width:62%;height:62%;background:var(--char);-webkit-mask:url(img/icono.png) center/contain no-repeat;mask:url(img/icono.png) center/contain no-repeat}
.slot.new{animation:thump .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes thump{0%{transform:scale(1.8) rotate(-30deg);opacity:0}100%{transform:scale(1) rotate(var(--r,-6deg));opacity:1}}
.slot.gift{border:2px solid var(--gold);background:rgba(196,166,91,.12);color:var(--gold);flex-direction:column;font:400 15px/1 var(--hand);gap:2px}
.slot.gift.ready{background:var(--gold);color:var(--char);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(196,166,91,.35)}}
.slot.gift svg{width:42%;height:42%}
.pts{font-size:11px;font-weight:600;color:var(--gold-soft);font-variant-numeric:tabular-nums;min-height:15px}
.pts.empty{color:rgba(236,235,231,.3)}
.gift-l{font:400 13px var(--hand);color:var(--gold)}
.points{margin-top:16px;background:var(--char-2);border-radius:14px;padding:12px 14px;position:relative}
.points .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.points .big{font:400 36px/1 var(--hand);color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.points .big span{font-size:18px;color:var(--gold)}
.points .next{font-size:12px;color:var(--gold-soft);text-align:right}
.bar{height:8px;border-radius:99px;background:rgba(236,235,231,.14);margin-top:10px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:var(--gold);border-radius:99px;transition:width .6s ease}
.rule{font-size:11px;color:rgba(236,235,231,.6);margin-top:8px}
.ready-msg{margin-top:12px;background:var(--gold);color:var(--char);border-radius:12px;padding:10px 12px;font-weight:600;font-size:14px;position:relative}

.qr{display:flex;gap:14px;align-items:center}
.qr .qrimg{width:132px;height:132px;flex-shrink:0;background:var(--white);border-radius:10px;display:grid;place-items:center}
.qr .qrimg img,.qr .qrimg canvas{width:100%;height:100%;image-rendering:pixelated}
.qr .code{font:700 20px var(--mono);letter-spacing:.14em}
.qr p{margin:4px 0 0;font-size:13px;color:var(--muted)}

.rw{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--paper-2)}
.rw:first-of-type{border-top:0}
.rw .p{font:400 18px var(--hand);background:var(--paper);border-radius:10px;padding:4px 8px;min-width:56px;text-align:center}
.rw .n{font-weight:600;font-size:14px}
.rw .s{font-size:12px;color:var(--muted)}
.mini{height:4px;border-radius:9px;background:var(--paper-2);margin-top:4px;overflow:hidden}
.mini b{display:block;height:100%;background:var(--gold)}
.tag-ok{font-size:12px;font-weight:700;color:var(--ok);background:var(--ok-bg);border-radius:99px;padding:3px 9px;white-space:nowrap}
.lock{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}

.log{display:flex;flex-direction:column}
.log div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--paper-2);font-size:13px}
.log div:first-child{border-top:0}
.log span:last-child{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.log b{color:var(--gold-ink);font-weight:600}

.pop{position:fixed;inset:0;z-index:40;background:rgba(34,30,31,.55);display:grid;place-items:center;padding:16px}
.pop > div{background:var(--white);border-radius:20px;padding:22px;max-width:340px;width:100%;text-align:center;display:flex;flex-direction:column;gap:10px}
.pop b{font:400 28px/1.1 var(--hand)}

.foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:13px}

@media (prefers-reduced-motion:reduce){.slot.new,.slot.gift.ready{animation:none}.bar b{transition:none}}