/* Tarjeta DHE · estilos compartidos (cliente, escáner y admin) — mismo sistema "Acero & Latón" del sitio */
:root {
  --dhe-300: #7FBBFF; --dhe-400: #3D93FF; --dhe-500: #1E7BE8; --dhe-700: #0C4A94;
  --brass-300: #F3C778; --brass-400: #E9A93C; --brass-500: #D28A18; --brass-600: #A96C0E;
  --steel-950: #080C10; --steel-900: #0D141A; --steel-850: #121B23; --steel-800: #17222C; --steel-700: #1F2E3A;
  --ok: #2FBF71; --danger: #E5484D; --warn: #F2B01E;
  --bg: var(--steel-950); --bg-elev: var(--steel-900); --bg-card: var(--steel-850); --bg-soft: var(--steel-800);
  --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.18);
  --tx: #EAF1F6; --tx-soft: #A8B8C4; --tx-mute: #71828F;
  --accent: var(--dhe-400); --accent-ink: #04122A; --accent-rgb: 61,147,255;
  --font-display: "Sora","Segoe UI",system-ui,sans-serif; --font-body: "Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;
  --ease: cubic-bezier(.22,1,.36,1); --t: .3s;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F4F7FA; --bg-elev: #fff; --bg-card: #fff; --bg-soft: #EDF1F5;
    --line: rgba(13,20,26,.10); --line-strong: rgba(13,20,26,.2);
    --tx: #0D141A; --tx-soft: #45565F; --tx-mute: #6C7C87; --accent: var(--dhe-500); --accent-ink: #fff; --accent-rgb: 30,123,232;
  }
}
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--bg); color: var(--tx); line-height: 1.55; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -.02em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

/* Layout */
.app { max-width: 560px; margin: 0 auto; padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom)); }
.app--wide { max-width: 1100px; }
.top { display: flex; align-items: center; gap: .7rem; padding: 1rem 0 .8rem; }
.top__logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-strong); overflow: hidden; flex: none; }
.top__logo img { width: 100%; height: 100%; object-fit: cover; }
.top b { font-family: var(--font-display); display: block; font-size: 1rem; }
.top small { color: var(--tx-mute); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.top .spacer { margin-left: auto; }
.eyebrow { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lead { color: var(--tx-soft); }
.stack > * + * { margin-top: var(--gap, .9rem); }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { color: var(--tx-mute); font-size: .85rem; }
.small { font-size: .85rem; }

/* Tarjetas / superficies */
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem; }
.card--soft { background: var(--bg-soft); }
.card h2 { font-size: 1.25rem; }

/* Botones */
.btn { --bg-b: var(--accent); --tx-b: var(--accent-ink); --bd-b: transparent; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1.3rem; border-radius: 99px; border: 1px solid var(--bd-b); background: var(--bg-b); color: var(--tx-b); font-family: var(--font-display); font-weight: 600; font-size: .95rem; cursor: pointer; transition: transform var(--t) var(--ease), box-shadow var(--t), opacity var(--t); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(var(--accent-rgb), .6); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn--ghost { --bg-b: transparent; --tx-b: var(--tx); --bd-b: var(--line-strong); }
.btn--ghost:hover { box-shadow: none; --bd-b: var(--accent); --tx-b: var(--accent); }
.btn--ok { --bg-b: var(--ok); --tx-b: #06210F; }
.btn--gold { --bg-b: linear-gradient(120deg, var(--brass-300), var(--brass-500)); --tx-b: #1A1204; }
.btn--danger { --bg-b: transparent; --tx-b: var(--danger); --bd-b: rgba(229,72,77,.4); }
.btn--wa { --bg-b: #21B35A; --tx-b: #fff; }
.btn--block { width: 100%; }
.btn--sm { padding: .55rem .95rem; font-size: .85rem; }
.btn--lg { padding: 1.05rem 1.6rem; font-size: 1.05rem; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Formularios */
.field { display: grid; gap: .3rem; }
.field label { font-size: .84rem; font-weight: 600; color: var(--tx-soft); }
.field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-elev); outline: 0; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.field small { color: var(--tx-mute); font-size: .78rem; }
.field input.pin { text-align: center; letter-spacing: .4em; font-family: var(--font-display); font-size: 1.4rem; }
.field input.code { text-transform: uppercase; font-family: var(--font-display); letter-spacing: .12em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* Chips y estado */
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-soft); font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--tx-soft); }
.chip--ok { color: var(--ok); border-color: rgba(47,191,113,.4); background: rgba(47,191,113,.12); }
.chip--gold { color: var(--brass-300); border-color: rgba(233,169,60,.45); background: rgba(233,169,60,.12); }
.chip--accent { color: var(--accent); border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .12); }

/* ===== La tarjeta de lealtad ===== */
.lcard { position: relative; border-radius: var(--r-xl); overflow: hidden; padding: 1.35rem 1.35rem 1.2rem; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, #14202B 0%, #0B1219 60%, #0A0F15 100%); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(233,169,60,.12) inset; }
.lcard::before { content: ""; position: absolute; inset: -60% auto auto -20%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(61,147,255,.35), transparent 62%); z-index: -1; }
.lcard::after { content: ""; position: absolute; inset: auto -25% -70% auto; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(233,169,60,.28), transparent 62%); z-index: -1; }
.lcard__head { display: flex; align-items: center; gap: .7rem; }
.lcard__logo { width: 38px; height: 38px; border-radius: 50%; background: #fff; overflow: hidden; flex: none; }
.lcard__head b { font-family: var(--font-display); font-size: .98rem; display: block; }
.lcard__head small { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lcard__who { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.lcard__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.lcard__code { font-family: var(--font-display); font-size: .8rem; letter-spacing: .16em; color: var(--brass-300); }
.lcard__count { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--brass-300); text-align: right; }
.lcard__count small { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; margin-top: .25rem; }
.stamps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin-top: 1.1rem; }
.stamp { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.25); display: grid; place-items: center; color: rgba(255,255,255,.35); font-family: var(--font-display); font-weight: 700; font-size: .85rem; transition: transform .5s var(--ease), background .4s, border-color .4s; }
.stamp svg { width: 55%; height: 55%; }
.stamp.is-on { background: linear-gradient(140deg, var(--brass-300), var(--brass-500)); border-color: transparent; color: #1A1204; box-shadow: 0 8px 18px -8px rgba(233,169,60,.8); }
.stamp.is-new { animation: stampIn .6s var(--ease); }
@keyframes stampIn { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.18) rotate(4deg); } 100% { transform: none; opacity: 1; } }
.stamp.is-gift { border-style: solid; border-color: rgba(233,169,60,.6); color: var(--brass-300); }
.stamp.is-gift.is-on { background: linear-gradient(140deg, #fff, var(--brass-300)); }
.lcard__foot { margin-top: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: .8rem; font-size: .78rem; color: rgba(255,255,255,.7); }
.lcard--done { box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 2px rgba(233,169,60,.7) inset; animation: glow 2.2s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 30px 70px -30px rgba(0,0,0,.8), 0 0 0 2px rgba(233,169,60,.7) inset, 0 0 46px -6px rgba(233,169,60,.5); } }

/* QR */
.qr { display: grid; place-items: center; gap: .7rem; padding: 1.2rem; background: #fff; border-radius: var(--r-lg); color: #0D141A; }
.qr canvas, .qr img { border-radius: 8px; }
.qr b { font-family: var(--font-display); letter-spacing: .18em; font-size: 1.05rem; }
.qr small { color: #5E6F7D; font-size: .8rem; }

/* Historial */
.hist { display: grid; gap: .5rem; }
.hist__it { display: grid; grid-template-columns: 36px 1fr auto; gap: .7rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card); font-size: .9rem; }
.hist__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.hist__ico svg { width: 18px; height: 18px; }
.hist__it--canje .hist__ico { background: rgba(233,169,60,.15); color: var(--brass-400); }
.hist__it--ajuste .hist__ico { background: rgba(242,176,30,.15); color: var(--warn); }
.hist__it b { display: block; font-size: .92rem; }
.hist__it small { color: var(--tx-mute); font-size: .76rem; }
.hist__n { font-family: var(--font-display); font-weight: 700; color: var(--brass-300); }

/* Progreso */
.bar { height: 10px; border-radius: 99px; background: var(--bg-soft); overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brass-400), var(--brass-300)); transition: width .8s var(--ease); }

/* Escáner */
.scan { position: relative; border-radius: var(--r-xl); overflow: hidden; background: #000; aspect-ratio: 1; border: 1px solid var(--line-strong); }
.scan video { width: 100%; height: 100%; object-fit: cover; }
.scan__frame { position: absolute; inset: 14%; border-radius: 22px; pointer-events: none; box-shadow: 0 0 0 999px rgba(0,0,0,.45); }
.scan__frame::before, .scan__frame::after, .scan__frame i::before, .scan__frame i::after { content: ""; position: absolute; width: 34px; height: 34px; border: 3px solid var(--brass-300); }
.scan__frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.scan__frame::after { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.scan__frame i::before { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.scan__frame i::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.scan__line { position: absolute; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scanline 2.2s ease-in-out infinite; }
@keyframes scanline { 0% { top: 16%; } 50% { top: 82%; } 100% { top: 16%; } }
.scan__msg { position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem; text-align: center; font-size: .85rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.scan.is-hit { border-color: var(--ok); }
.scan.is-hit .scan__frame::before, .scan.is-hit .scan__frame::after, .scan.is-hit .scan__frame i::before, .scan.is-hit .scan__frame i::after { border-color: var(--ok); }

/* Cliente encontrado (escáner) */
.found { border: 1px solid rgba(233,169,60,.35); background: linear-gradient(160deg, rgba(233,169,60,.08), transparent 60%), var(--bg-card); }
.found__name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.big { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--brass-300); line-height: 1; }
.big small { font-size: 1rem; color: var(--tx-mute); letter-spacing: 0; font-weight: 600; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 400px) { .actions { grid-template-columns: 1fr; } }

/* Admin */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); overflow-x: auto; margin: .6rem 0 1.2rem; }
.tabs button { background: transparent; border: 0; padding: .8rem 1rem; cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--tx-mute); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--tx); border-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stat { padding: 1rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-card); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; color: var(--accent); line-height: 1.1; }
.stat span { font-size: .8rem; color: var(--tx-soft); }
.stat--gold b { color: var(--brass-300); }
.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th, .table td { padding: .65rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
.table th { font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-mute); }
.table tr:hover td { background: var(--bg-soft); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card); }
.bars { display: flex; gap: 4px; align-items: end; height: 110px; padding: .5rem 0 0; }
.bars div { flex: 1; background: linear-gradient(180deg, var(--accent), var(--dhe-700)); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.bars div span { position: absolute; bottom: -1.3rem; left: 0; right: 0; text-align: center; font-size: .6rem; color: var(--tx-mute); }
.bars div b { position: absolute; top: -1.1rem; left: 0; right: 0; text-align: center; font-size: .66rem; color: var(--tx-soft); font-family: var(--font-display); }

/* Toast */
.toasts { position: fixed; z-index: 100; bottom: calc(18px + env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; display: grid; gap: .5rem; width: min(440px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--steel-800); color: #EAF1F6; border: 1px solid var(--line-strong); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); font-size: .9rem; animation: toastIn .4s var(--ease); }
.toast--err { border-color: rgba(229,72,77,.5); }
.toast--err::before { content: "!"; color: var(--danger); font-weight: 800; }
.toast--ok::before { content: "✓"; color: var(--ok); font-weight: 800; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Confeti simple al completar */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2.8s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* Instalar */
.install { display: flex; gap: .8rem; align-items: center; padding: .9rem 1rem; border-radius: var(--r-md); border: 1px dashed var(--line-strong); font-size: .86rem; color: var(--tx-soft); }
.install b { color: var(--tx); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }