/* ============================================================
   ION LOYALTY — estilos de todas las pantallas
   Sin fuentes ni recursos externos (CSP: solo 'self').
   --brand-* salen de los colores que el dueño elige en el panel.
   ============================================================ */
:root{
  --bg:#f4f3ef; --panel:#ffffff; --panel2:#f8f7f4; --line:#e3e1db; --text:#1d2126; --muted:#69707a;
  --ink:#1f2933; --ok:#17804a; --ok-bg:#e7f5ec; --err:#c0392b; --err-bg:#fbeceb; --warn:#9a6700; --warn-bg:#fff4d6;
  --brand-bg:#1f2933; --brand-fg:#ffffff; --brand-accent:#f5b841; --r:16px;
  color-scheme:light;
}
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-text-size-adjust:100% }
body{ min-height:100vh; padding:max(16px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom)) }
h1,h2,h3{ margin:0; line-height:1.2 }
a{ color:inherit }
.wrap{ max-width:480px; margin:0 auto }
.wrap.wide{ max-width:1080px }
.hidden{ display:none !important }
.muted{ color:var(--muted) } .small{ font-size:13px; line-height:1.45 } .center{ text-align:center }
.ok{ color:var(--ok) } .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.04em }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap } .row.end{ justify-content:flex-end } .row.between{ justify-content:space-between }
.grow{ flex:1 1 auto; min-width:0 }

/* marca */
.brand{ text-align:center; margin:4px 0 18px }
.brand .logo{ width:60px; height:60px; border-radius:50%; margin:0 auto 10px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-bg); color:var(--brand-accent); font-weight:800; font-size:26px; box-shadow:0 6px 18px rgba(0,0,0,.12) }
.brand h1{ font-size:20px; letter-spacing:.01em }
.brand p{ margin:4px 0 0; color:var(--muted); font-size:14px }

/* bloques */
.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px }
.card h2{ font-size:16px; margin:0 0 12px }
.hero{ text-align:center; background:var(--brand-bg); color:var(--brand-fg); border:0 }
.hero .big{ font-size:46px; font-weight:800; color:var(--brand-accent); line-height:1 }
.hero .lbl{ font-size:14px; opacity:.85; margin-top:6px }
.hero .reward{ margin-top:12px; font-size:18px; font-weight:700 }
.hero p{ opacity:.85 }

/* formularios */
label.fld{ display:block; margin-bottom:12px }
label.fld > span{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; font-weight:600 }
.inp{ width:100%; font:inherit; font-size:16px; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:none }
.inp:focus{ border-color:var(--ink); background:#fff }
textarea.inp{ min-height:120px; resize:vertical; line-height:1.45 }
.chk{ display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; margin:10px 0; cursor:pointer }
.chk input{ width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink); flex:0 0 auto }
.grid2{ display:grid; grid-template-columns:1fr; gap:0 14px }
@media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr } }
/* colores de la tarjeta: paletas listas y colores de marca.
   La vista previa queda fija arriba mientras se eligen colores (en el celular no se pierde de vista). */
.member.preview{ position:sticky; top:8px; z-index:2; max-width:340px; padding:14px 16px; border-radius:18px }
.member.preview .nm{ font-size:18px }
.member.preview .stamps{ gap:6px; margin:10px 0 6px; max-width:300px }
.member.preview .stamp{ font-size:12px } .member.preview .stamp.on{ font-size:16px }
h3.sub{ font-size:14px; margin:18px 0 8px }
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px }
.swatch{ border:2px solid var(--line); background:var(--panel); border-radius:12px; padding:5px 5px 6px; cursor:pointer; font:inherit; color:var(--text); text-align:center }
.swatch:hover{ border-color:#b9b6ae }
.swatch[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }
.sw-card{ display:flex; align-items:center; justify-content:center; gap:5px; height:42px; border-radius:8px; font-weight:800; font-size:14px }
.sw-dot{ width:13px; height:13px; border-radius:50% }
.sw-name{ display:block; font-size:12px; font-weight:700; margin-top:5px }
details.custom{ margin-top:14px; border-top:1px solid var(--line); padding-top:10px }
details.custom summary{ cursor:pointer; font-weight:700; font-size:14px; padding:4px 0 }
.colorrow{ display:grid; grid-template-columns:1fr 50px 108px; gap:8px; align-items:center; margin:8px 0 }
.colorrow label{ font-size:14px; font-weight:600 }
.colorrow input[type=color]{ width:50px; height:44px; border:1px solid var(--line); border-radius:10px; padding:3px; background:#fff; cursor:pointer }
.inp.hex{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; padding:10px; text-transform:lowercase }
.inp.hex.bad{ border-color:var(--err); background:var(--err-bg) }
.notice{ border-radius:10px; padding:10px 12px; font-size:13px; font-weight:600; margin:12px 0 0 }
.notice.warn{ background:var(--warn-bg); color:var(--warn) } .notice.ok{ background:var(--ok-bg); color:var(--ok) }
.notice button{ margin-top:8px }

/* botones */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:12px 16px; font:inherit; font-weight:700; font-size:15px;
  cursor:pointer; text-decoration:none; min-height:46px; line-height:1.2 }
.btn.block{ display:flex; width:100% } .btn.block + .btn.block{ margin-top:10px }
.btn-primary{ background:var(--ink); color:#fff }
.btn-brand{ background:var(--brand-bg); color:var(--brand-fg) }
.btn-ok{ background:var(--ok); color:#fff }
.btn-gift{ background:var(--brand-accent); color:#1d2126 }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line) }
.btn-danger{ background:var(--err); color:#fff }
.btn-sm{ min-height:34px; padding:6px 12px; font-size:13px; border-radius:10px }
.btn:disabled{ opacity:.5; cursor:default }
.btn-xl{ min-height:64px; font-size:18px; border-radius:16px }
.err{ color:var(--err); font-size:14px; min-height:1.2em; margin:8px 0 0 }
details.terms summary{ cursor:pointer; font-size:14px; font-weight:700 }
details.terms pre{ white-space:pre-wrap; font:inherit; font-size:13px; color:var(--muted); margin:10px 0 0; max-height:260px; overflow:auto }

/* tarjeta del socio */
.member{ background:var(--brand-bg); color:var(--brand-fg); border-radius:22px; padding:20px; box-shadow:0 14px 34px rgba(0,0,0,.18) }
.member .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.member .prog{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-accent); font-weight:800 }
.member .nm{ font-size:22px; font-weight:800; margin-top:4px }
.member .since{ font-size:12px; opacity:.75; margin-top:2px }
.stamps{ display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:8px; margin:18px 0 8px }
.stamp{ position:relative; aspect-ratio:1; border-radius:50%; border:2px dashed currentColor; opacity:.45; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700 }
.stamp.on{ opacity:1; border:2px solid var(--brand-accent); background:var(--brand-accent); color:var(--brand-bg); font-size:20px }
.stamp.new{ animation:pop .8s cubic-bezier(.2,1.4,.4,1) both }
@keyframes pop{ 0%{ transform:scale(.3) rotate(-50deg); opacity:0 } 60%{ transform:scale(1.2) rotate(8deg); opacity:1 } 100%{ transform:none } }
@media (prefers-reduced-motion:reduce){ .stamp.new{ animation:none } }
.progress{ text-align:center; font-size:14px; opacity:.85 }
.progress b{ opacity:1 }
.banner{ margin-top:12px; text-align:center; border-radius:12px; padding:10px 12px; font-weight:700 }
.banner.gift{ background:var(--brand-accent); color:#1d2126 }
.banner.info{ background:rgba(255,255,255,.14) }
.barcodebox{ background:#fff; border-radius:12px; margin:16px 0 8px; padding:6px; overflow:hidden }
.barcodebox svg{ display:block; width:100%; height:auto }
.code{ text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:20px; letter-spacing:.08em; font-weight:700 }
.hist{ list-style:none; margin:0; padding:0 }
.hist li{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px }
.hist li:last-child{ border-bottom:0 }
@media (min-width:860px){ .cols{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:start } .wrap.card-page{ max-width:900px } }

/* pantalla del personal */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px }
.topbar .who{ font-size:14px; color:var(--muted) } .topbar .who b{ color:var(--text) }
.users{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:14px }
.users button{ min-height:56px; border-radius:14px; border:1px solid var(--line); background:var(--panel2); font:inherit; font-weight:700; cursor:pointer; padding:8px }
.users button.sel{ border-color:var(--ink); background:var(--ink); color:#fff }
.users button small{ display:block; font-weight:500; font-size:11px; opacity:.7; margin-top:2px }
.pin{ font-size:28px; letter-spacing:.5em; text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace }
.codeinput{ font-size:24px; text-align:center; letter-spacing:.12em; font-family:ui-monospace,Menlo,Consolas,monospace }
.socio{ border-radius:18px; padding:18px; background:var(--brand-bg); color:var(--brand-fg) }
.socio .nm{ font-size:26px; font-weight:800 }
.socio .num{ font-size:13px; opacity:.75; margin-top:2px }
.socio .count{ font-size:15px; margin-top:10px }
.socio .count b{ font-size:30px; color:var(--brand-accent) }
.flash{ border-radius:14px; padding:14px; font-weight:700; text-align:center; margin:12px 0 }
.flash.ok{ background:var(--ok-bg); color:var(--ok) } .flash.warn{ background:var(--warn-bg); color:var(--warn) } .flash.gift{ background:var(--brand-accent); color:#1d2126; font-size:17px }
.actions{ display:grid; gap:10px; margin-top:14px }
.scan video{ width:100%; border-radius:14px; background:#000; aspect-ratio:4/3; object-fit:cover }
.scan .frame{ position:relative }
.scan .frame::after{ content:""; position:absolute; left:8%; right:8%; top:38%; height:24%; border:3px solid rgba(255,255,255,.9); border-radius:10px; box-shadow:0 0 0 999px rgba(0,0,0,.25); pointer-events:none }

/* panel del dueño */
.tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin:0 0 16px; scrollbar-width:thin }
.tabs button{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:9px 14px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; color:var(--text) }
.tabs button.on{ background:var(--ink); border-color:var(--ink); color:#fff }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-bottom:14px }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px }
.kpi .v{ font-size:28px; font-weight:800 } .kpi .l{ font-size:13px; color:var(--muted); margin-top:2px }
.tblwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px }
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; background:var(--panel) }
.tbl th{ text-align:left; font-size:12px; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--panel2) }
.tbl td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap }
.tbl td.wrapc{ white-space:normal; min-width:200px }
.tbl tr:last-child td{ border-bottom:0 }
.tbl tr.click{ cursor:pointer } .tbl tr.click:hover td{ background:var(--panel2) }
.tbl .num{ text-align:right; white-space:nowrap }
.tbl tr.void td{ color:var(--muted); text-decoration:line-through }
.tbl tr.void td.keep{ text-decoration:none }
.pill{ display:inline-block; font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px; background:var(--panel2); border:1px solid var(--line); white-space:nowrap }
.pill.ok{ background:var(--ok-bg); border-color:transparent; color:var(--ok) } .pill.warn{ background:var(--warn-bg); border-color:transparent; color:var(--warn) }
.pill.err{ background:var(--err-bg); border-color:transparent; color:var(--err) } .pill.gift{ background:var(--brand-accent); border-color:transparent; color:#1d2126 }
.status{ display:flex; gap:12px; align-items:center; border-radius:14px; padding:14px; margin-bottom:14px; font-weight:600 }
.status.ok{ background:var(--ok-bg); color:var(--ok) } .status.warn{ background:var(--warn-bg); color:var(--warn) }
.preview{ max-width:340px }
.qrbox{ background:#fff; border-radius:16px; padding:14px; width:max-content; max-width:100%; margin:8px auto; border:1px solid var(--line) }
.qrbox svg{ display:block; width:220px; height:220px; max-width:100% }
.copyline{ display:flex; gap:8px } .copyline .inp{ font-size:13px }
dl.facts{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:14px } dl.facts dt{ color:var(--muted) } dl.facts dd{ margin:0 }

/* ventana, aviso */
.modal{ position:fixed; inset:0; background:rgba(15,18,22,.5); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50 }
.modal-box{ background:#fff; border-radius:18px; padding:20px; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:90vh; overflow:auto }
.modal-box h3{ font-size:18px; margin-bottom:6px }
.toast{ position:fixed; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translate(-50%,16px); opacity:0; visibility:hidden; background:var(--ink); color:#fff; padding:12px 18px; border-radius:12px;
  font-weight:700; font-size:14px; transition:transform .25s, opacity .25s, visibility .25s; z-index:60; max-width:calc(100% - 32px); text-align:center }
.toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible } .toast.err{ background:var(--err) } .toast.ok{ background:var(--ok) }

/* afiche para imprimir con el QR de inscripción */
.poster{ display:none }
@media print{
  body{ background:#fff; padding:0 }
  body.printing > *:not(.poster){ display:none !important }
  body.printing .poster{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:95vh; gap:14px; color:#000 }
  .poster h1{ font-size:34px } .poster .rw{ font-size:22px } .poster svg{ width:9cm; height:9cm }
}