/* Pasaporte de fidelidad: tapa de piel con dorado, papel de seguridad (tramado guilloché), sellos de tinta
   y hojas que se pasan. Los colores de la tapa y del dorado los elige el negocio (--pp, --foil). */
.pp{--paper:#f4eedf;--paper-ink:#2c2a26;max-width:340px;margin:4px auto 0;perspective:1700px}
.pp-book{position:relative;aspect-ratio:88/125;width:100%}

/* ---- Tapa ---- */
.pp-cover-btn{position:absolute;inset:0;z-index:60;padding:0;border:0;background:none;cursor:pointer;transform-origin:left center;
  transition:transform .95s cubic-bezier(.32,.72,.18,1),box-shadow .95s;-webkit-tap-highlight-color:transparent;border-radius:6px 16px 16px 6px}
.pp-cover-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--foil) 70%,transparent);outline-offset:4px}
.pp.is-open .pp-cover-btn{transform:rotateY(-172deg);pointer-events:none}
.pp.is-open .pp-cover-btn .pp-cover{box-shadow:none}
.pp-cover{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;aspect-ratio:88/125;padding:9% 10% 8%;
  border-radius:6px 16px 16px 6px;color:var(--foil);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:
    radial-gradient(120% 70% at 28% 6%,rgba(255,255,255,.16),transparent 58%),
    radial-gradient(90% 60% at 85% 104%,rgba(0,0,0,.34),transparent 62%),
    var(--pp);
  box-shadow:0 34px 60px -26px rgba(0,0,0,.6),0 10px 18px -10px rgba(0,0,0,.35),inset 11px 0 12px -9px rgba(0,0,0,.5),inset -1px 0 0 rgba(255,255,255,.06)}
.pp-cover::before{content:"";position:absolute;inset:11px 11px 11px 17px;border:1px solid color-mix(in srgb,var(--foil) 42%,transparent);border-radius:3px 10px 10px 3px;pointer-events:none}
.pp-cover>*{text-shadow:0 1px 0 rgba(0,0,0,.35)}
.pp-cover-club{font:600 .6rem/1.2 Georgia,"Iowan Old Style",serif;letter-spacing:.3em;opacity:.85;text-align:center}
.pp-crest{display:grid;place-items:center;width:40%;aspect-ratio:1;margin:12% 0 9%;border-radius:50%;
  box-shadow:0 0 0 1.5px var(--foil),0 0 0 5px transparent,0 0 0 6px color-mix(in srgb,var(--foil) 55%,transparent)}
.pp-crest svg{width:82%;height:82%}
.pp-crest img{width:70%;height:70%;object-fit:contain;filter:grayscale(1) sepia(.7) saturate(1.6) brightness(1.25);opacity:.92}
.pp-cover-title{font:700 clamp(.95rem,4.8vw,1.28rem)/1.15 Georgia,"Iowan Old Style","Palatino Linotype",serif;letter-spacing:.2em;text-align:center;text-wrap:balance;margin:0 0 8px}
.pp-cover-sub{font:italic 400 .8rem/1.3 Georgia,serif;letter-spacing:.02em;text-align:center;opacity:.85;min-height:1.3em}
.pp-chip{width:34px;margin-top:auto;opacity:.9}
.pp-cover-holder{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px;font:600 .62rem/1.2 Georgia,serif;letter-spacing:.18em;opacity:.8;text-align:center}
.pp-cover-holder small{font:500 .55rem/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;opacity:.8}

/* ---- Páginas (papel de seguridad) ---- */
.pp-pages{position:absolute;inset:0}
.pp-page{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px 16px 12px 20px;border-radius:4px 14px 14px 4px;color:var(--paper-ink);
  background:
    repeating-radial-gradient(circle at 50% 118%,transparent 0 7px,color-mix(in srgb,var(--pp) 8%,transparent) 7px 8px),
    repeating-radial-gradient(circle at 50% -18%,transparent 0 9px,color-mix(in srgb,var(--pp) 6%,transparent) 9px 10px),
    linear-gradient(90deg,rgba(0,0,0,.09),transparent 7%),
    var(--paper);
  box-shadow:0 26px 50px -26px rgba(0,0,0,.5),0 2px 0 #e7dfcb,0 4px 0 #ddd3bc,0 5px 8px -4px rgba(0,0,0,.25);
  transform-origin:left center;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .8s cubic-bezier(.32,.72,.18,1)}
.pp-page.is-turned{transform:rotateY(-178deg);pointer-events:none}
.pp:not(.is-open) .pp-page{pointer-events:none}
.pp-phead{display:flex;justify-content:space-between;gap:8px;text-transform:uppercase;font:600 .52rem/1.2 Georgia,serif;letter-spacing:.2em;color:color-mix(in srgb,var(--pp) 70%,#555);
  padding-bottom:7px;border-bottom:1px solid color-mix(in srgb,var(--pp) 22%,transparent);margin-bottom:12px}
.pp-pfoot{margin-top:auto;padding-top:6px;text-align:center;font:500 .6rem Georgia,serif;color:color-mix(in srgb,var(--pp) 55%,#777)}

/* Página del titular */
.pp-id{display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:start}
.pp-photo{display:grid;place-items:center;aspect-ratio:3/4;border-radius:3px;font:600 1.6rem Georgia,serif;color:color-mix(in srgb,var(--pp) 75%,#444);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--pp) 10%,#ece4d1) 0 6px,color-mix(in srgb,var(--pp) 5%,#f1eadb) 6px 12px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pp) 25%,transparent)}
.pp-fields{margin:0;display:grid;gap:7px}
.pp-fields dt{font:600 .5rem/1.1 Georgia,serif;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--pp) 60%,#777)}
.pp-fields dd{margin:1px 0 0;font:600 .82rem/1.2 Georgia,"Iowan Old Style",serif;overflow-wrap:anywhere}
.pp-mono{font-family:ui-monospace,Menlo,monospace!important;font-size:.72rem!important;letter-spacing:.06em}
.pp-note{margin:12px 0 0;font:.72rem/1.35 Georgia,serif;color:#5a554b}
.pp-sign{margin:auto 0 0;padding:6px 2px 2px;border-bottom:1px solid #b9ae95;font:1.35rem/1 "Snell Roundhand","Brush Script MT","Segoe Script","Apple Chancery",cursive;color:#233a6b;
  white-space:nowrap;overflow:hidden;text-overflow:clip}
.pp-mrz{margin:8px 0 0;font:500 .56rem/1.45 "OCR B","OCR-B",ui-monospace,Menlo,monospace;letter-spacing:.09em;color:#403c35;white-space:nowrap;overflow:hidden}
.pp-idpage .pp-pfoot{display:none}

/* Sellos */
.pp-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px 10px;flex:1;min-height:0}
.pp-stamp{--ink:#1f2a44;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:92%;aspect-ratio:1;max-height:100%;padding:8%;border-radius:50%;color:var(--ink);text-align:center;transform:rotate(var(--r,0deg));
  border:2.4px solid currentColor;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4.4px currentColor;opacity:.86;mix-blend-mode:multiply}
.pp-stamp.is-rect{border-radius:9px;aspect-ratio:1.25;width:96%}
.pp-stamp.is-oval{border-radius:50%;aspect-ratio:1.35;width:100%}
.pp-stamp b{font:800 .66rem/1.1 ui-rounded,"Arial Narrow",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere}
.pp-stamp-top,.pp-stamp-date{font:700 .44rem/1.1 ui-monospace,Menlo,monospace;letter-spacing:.14em;opacity:.9}
.pp-stamp.is-new{animation:pp-thump .55s cubic-bezier(.16,1,.3,1) both}
@keyframes pp-thump{0%{opacity:0;transform:rotate(var(--r)) scale(1.9)}60%{opacity:.95}100%{opacity:.86;transform:rotate(var(--r)) scale(1)}}
.pp-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border-radius:10px;border:1.5px dashed color-mix(in srgb,var(--pp) 30%,#b7ad97);
  background:rgba(255,255,255,.28);color:#5b564c;font:inherit;text-align:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.pp-slot:hover{border-color:var(--pp);background:rgba(255,255,255,.55)}
.pp-slot b{font:600 .74rem/1.2 Georgia,serif;color:#35312a;overflow-wrap:anywhere}
.pp-slot small{font:600 .56rem/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--pp) 70%,#666)}
.pp-slot.is-pend{border-style:solid;background:rgba(255,196,0,.08)}.pp-slot.is-pend small{color:#9a6a00}
.pp-slot[disabled]{cursor:default}

/* Página final */
.pp-endpage{align-items:center;text-align:center}
.pp-stamp-big{width:62%;margin:14% auto 8%}
.pp-stamp-big b{font-size:1rem}
.pp-stamp.is-ghost{opacity:.3;border-style:dashed}
.pp-end-t{margin:0 0 4px;font:700 1.05rem/1.25 Georgia,serif}
.pp-end-s{margin:0;font:.8rem/1.4 Georgia,serif;color:#5a554b}

/* Controles */
.pp-ctrl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}
.pp-nav{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--fill);color:var(--ink);cursor:pointer;transition:opacity .2s,background-color .15s}
.pp-nav:hover{background:var(--fill-2)}.pp-nav[disabled]{opacity:.3;cursor:default}
.pp-nav .i{width:22px;height:22px}
.pp-count{font-size:.86rem;color:var(--muted);text-align:center;flex:1}
.pp-close{display:flex;margin:12px auto 0}
.pp:not(.is-open) .pp-nav{visibility:hidden}

/* Ajustes del negocio: vista previa de la tapa */
.pp-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:center}
.pp-admin-preview .pp-cover{max-width:210px;margin-left:auto}
@media (max-width:700px){.pp-admin-grid{grid-template-columns:1fr}.pp-admin-preview .pp-cover{max-width:200px;margin:0 auto}}

@media (prefers-reduced-motion:reduce){.pp-cover-btn,.pp-page{transition:none}.pp-stamp.is-new{animation:none}}