/* Club Silvio’s — estilos tomados de maqueta.html */
:root{--bg:#EAF4FB;--surface:#fff;--ink:#1B2559;--muted:#5b678f;--blue:#2F63B0;--green:#4FAE24;--lime:#A5D44A;--line:#cfe0ee;--card:#1B2559;--card-ink:#fff;--slot:#2a3a7c;--error:#c62839}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1433;--surface:#18214d;--ink:#eaf1ff;--muted:#9fb0e0;--line:#2c3a78;--card:#223072;--slot:#16205a;--error:#ff8a95}
:root:not([data-theme="light"]) .brand img{background:#fff;border-radius:12px;padding:4px}}
:root[data-theme="dark"]{--bg:#0e1433;--surface:#18214d;--ink:#eaf1ff;--muted:#9fb0e0;--line:#2c3a78;--card:#223072;--slot:#16205a;--error:#ff8a95}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-weight:500;line-height:1.45;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
main{max-width:460px;margin:0 auto;padding:16px 16px 40px}
h1,h2,.num{font-family:'Baloo 2',system-ui,sans-serif;margin:0}
a{color:var(--blue)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.brand img{height:60px;width:auto}
.brand h1{font-size:24px;font-weight:800;line-height:1.05}
.brand p{margin:0;color:var(--muted);font-size:14px}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* Tarjeta */
.pass{background:var(--card);color:var(--card-ink);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(27,37,89,.25)}.pass-body{padding:16px 18px 18px}
.pass-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;color:#1B2559;padding:12px 16px}
.plogo{height:62px;width:auto;flex:none}
.pass-top h2{font-size:30px;font-weight:800;line-height:1.05;overflow-wrap:anywhere}.who{flex-basis:100%}.who small{display:block;font-size:13px;color:#5b678f}
.pts{text-align:right}.pts .num{font-size:38px;font-weight:800;line-height:1;color:#2F8F12}.pts .num.neg{color:#c62839}
.pts small{display:block;font-size:13px;opacity:.75}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 14px}
.slot{aspect-ratio:1;border-radius:50%;background:var(--slot);display:grid;place-items:center;position:relative;overflow:hidden}
.slot span{font:800 13px 'Baloo 2',sans-serif;opacity:.4}
.slot img{width:88%;height:88%;object-fit:contain;rotate:var(--r,0deg);animation:pop .35s ease-out}
.slot.on{background:var(--sb,#fff)}
.slot.part{background:conic-gradient(var(--lime) calc(var(--p)*1%),var(--slot) 0)}
.slot.part::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--slot)}
.slot.part span{position:relative;z-index:1;opacity:.7}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.bar{height:8px;border-radius:99px;background:var(--slot);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--lime));transition:width .4s}
.hint{margin:8px 0 0;font-size:14px;opacity:.9}
.reward{margin-top:14px;border-radius:14px;padding:12px;background:rgba(255,255,255,.08);font-size:14px}
.reward.ready{background:var(--green);color:#fff;font-weight:700}
.opts{display:grid;gap:8px;margin-top:10px}
.btn{border:0;border-radius:12px;padding:12px 16px;font:700 15px 'Nunito',sans-serif;background:var(--blue);color:#fff;cursor:pointer;width:100%}
.btn.alt{background:#fff;color:#1B2559;text-align:left}
.btn.line{background:none;color:var(--ink);border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.rules{margin:16px 2px 0;color:var(--muted);font-size:14px}
.pending{margin-top:12px;border-radius:14px;padding:12px;background:#fff;color:#1B2559;font-size:14px}
.pending b,.pending span{display:block}
.pending button{display:block}
.pending button{margin-top:8px;background:none;border:0;padding:0;color:#2F63B0;font:700 14px 'Nunito',sans-serif;cursor:pointer;text-decoration:underline}
/* Formularios y paneles */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}
.panel h2{font-size:21px;margin-bottom:4px}
.panel>p{margin:0 0 12px;color:var(--muted);font-size:14px}
label.campo{display:block;font-weight:700;margin:4px 0 6px}
input.txt{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:700 18px 'Nunito',sans-serif;background:var(--bg);color:var(--ink);letter-spacing:1px}
input.codigo{text-align:center;font-size:28px;letter-spacing:8px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:12px 0}
.check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--blue)}
.error,.panel>p.error{color:var(--error);font-weight:700;font-size:14px;min-height:1.2em;margin:10px 0}
.note{font-size:13px;color:var(--muted);margin-top:10px}
.link{background:none;border:0;padding:8px 0;color:var(--blue);font:700 14px 'Nunito',sans-serif;cursor:pointer}
.legal h2{font-size:18px;margin:18px 0 6px}.legal p,.legal li{font-size:15px}
/* Celebración */
.cele{position:fixed;inset:0;z-index:50;background:rgba(14,20,51,.82);display:grid;place-items:center;padding:20px;overflow:hidden}
.cele-box{position:relative;z-index:2;background:var(--surface);color:var(--ink);border-radius:26px;padding:22px 18px;width:100%;max-width:380px;text-align:center;animation:rise .5s cubic-bezier(.2,1.2,.4,1)}
.clogo{background:#fff;border-radius:18px;padding:8px 16px;display:inline-block;animation:float 2s ease-in-out infinite}.clogo img{height:92px;width:auto;display:block}
.cele-box h2{font-size:34px;font-weight:800;color:var(--blue);line-height:1.1;margin-top:4px}
.cele-box p{margin:6px 0 14px;color:var(--muted)}
.cele .opts .btn{background:var(--blue);color:#fff;text-align:center}
.later{margin-top:10px;background:none;border:0;color:var(--muted);font:700 14px 'Nunito',sans-serif;cursor:pointer;padding:8px}
.conf{position:absolute;inset:0;pointer-events:none;z-index:1}
.conf i{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
@keyframes rise{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes float{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.slot img,.cele-box,.clogo{animation:none}.conf{display:none}}
/* Panel del dueño (tomado de la maqueta: nav, stats, tablas) */
main.ancho{max-width:960px}
nav.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;margin-bottom:16px;overflow-x:auto}
nav.tabs button{flex:1;border:0;background:none;color:var(--muted);font:700 14px 'Nunito',sans-serif;padding:10px 8px;border-radius:10px;cursor:pointer;white-space:nowrap}
nav.tabs button[aria-selected="true"]{background:var(--blue);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px}
.stat .num{font-size:26px;font-weight:800;color:var(--blue)}.stat small{color:var(--muted);font-size:13px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-top:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700;border-top:0;white-space:nowrap}
td.n{text-align:right;white-space:nowrap}
tr.clic{cursor:pointer}tr.clic:hover td{background:var(--bg)}
.acciones{display:flex;gap:6px;flex-wrap:wrap}
.btn.chico{width:auto;padding:8px 12px;font-size:14px}
.btn.verde{background:var(--green)}
.etq{display:inline-block;border-radius:99px;padding:2px 8px;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted)}
.etq.ok{background:#e3f5da;color:#2b7a12}.etq.esp{background:#fff3cd;color:#8a6100}
.fila-form{display:grid;grid-template-columns:120px 1fr auto;gap:8px;align-items:end}
@media (max-width:600px){.fila-form{grid-template-columns:1fr}}
.ok-msg{color:#2b7a12;font-weight:700;font-size:14px;min-height:1.2em;margin:10px 0}
.buscar{display:flex;gap:8px;margin-bottom:10px}.buscar input{flex:1}
input.txt.chico{font-size:16px;letter-spacing:0;padding:10px 12px}
/* Botón oficial de Google Wallet: imagen sin modificar (lineamientos de marca de Google). */
.wallet-g{display:block;margin:16px auto 0;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.wallet-g img{height:55px;width:auto}
.wallet-g:disabled{opacity:.6}

/* Impresión / PDF de la lista de clientes */
@media print{
  body.imprimiendo-clientes{background:#fff}
  body.imprimiendo-clientes main>*:not(#app),body.imprimiendo-clientes #app>*:not(#tClientes),body.imprimiendo-clientes .no-imprimir{display:none!important}
  body.imprimiendo-clientes #tClientes{display:block!important}
  body.imprimiendo-clientes .panel{border:0;padding:0}
  body.imprimiendo-clientes table{font-size:11px}
  body.imprimiendo-clientes tr{break-inside:avoid}
  body.imprimiendo-clientes .tbl{overflow:visible}
}