:root {
  --bg: #000;
  --surface: #101010;
  --surface-2: #181818;
  --border: #262626;
  --text: #fff;
  --muted: #8b8b8b;
}

* { -webkit-tap-highlight-color: transparent; }
html, body { background: var(--bg); }
body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .01em;
}
.muted { color: var(--muted) !important; }

/* Navbar */
.navbar { background: var(--bg) !important; border-bottom: 1px solid var(--border); }
.navbar .navbar-brand { font-weight: 600; letter-spacing: .02em; font-size: 1rem; }

/* Superficies */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }

/* Botones (B&W: relleno blanco / contorno sutil) */
.btn { border-radius: 14px; font-weight: 600; }
.btn-lg { padding: 14px 16px; font-size: 1rem; }
.btn-light { background: #fff; border-color: #fff; color: #000; font-weight: 700; }
.btn-light:hover, .btn-light:active { background: #e8e8e8; border-color: #e8e8e8; color: #000; }
.btn-outline-light { border-color: var(--border); color: var(--text); }
.btn-outline-light:hover, .btn-outline-light:active { background: var(--surface-2); border-color: #3a3a3a; color: #fff; }

/* Inputs */
.form-control { background: var(--surface); color: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.form-control:focus { background: var(--surface); color: #fff; border-color: #fff; box-shadow: none; }
.form-control::placeholder { color: var(--muted); }
.form-label { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }

/* Puntos (grande y fino) */
.big-points { font-size: 4.4rem; font-weight: 200; letter-spacing: -.04em; line-height: 1; color: #fff; }

/* Escáner */
#reader { border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--border); min-height: 60px; }

/* Tarjeta blanca del QR */
.qr-card { background: #fff; padding: 18px; border-radius: 22px; display: inline-block; line-height: 0; }

/* Listas como tarjetas independientes */
.list-group-item { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; margin-bottom: 10px; color: #fff; }
.badge-pts { min-width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; background: #fff; color: #000; font-weight: 700; }

/* Banner de instalación */
#installBanner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1080; background: #fff; color: #000; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.55); font-size: 14px; animation: ibUp .25s ease-out; }
#installBanner span { flex: 1; line-height: 1.35; }
#installBanner .ib-install { background: #000; color: #fff; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; white-space: nowrap; }
#installBanner .ib-close { background: transparent; border: 0; color: #000; font-size: 22px; line-height: 1; padding: 2px 6px; }
@keyframes ibUp { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Tarjeta de sellos (compacta, estilo tarjeta de fidelidad) */
.stamp-card { max-width: 280px; margin: 18px auto 6px; background: #121212; border: 1px solid #262626; border-radius: 16px; padding: 16px 16px 12px; }
.stamp-grid { display: grid; gap: 8px; justify-content: center; }
.sello { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.sello-empty { border: 1.5px dashed #3a3a3a; }
.sello-filled { border: 1.5px solid #fff; background: #0d0d0d; color: #fff; overflow: hidden; }
.sello-filled img { width: 100%; height: 100%; object-fit: cover; }
.stamp-meta { text-align: center; color: var(--muted); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 12px; }

/* Tarjeta de fidelidad con la marca de García's (negro + oro + mármol) */
.fid-card { position: relative; overflow: hidden; max-width: 330px; margin: 6px auto 0; border-radius: 22px; border: 1px solid #2b2b2b; padding: 20px 20px 15px; color: #fff; text-align: center; background: #0d0d0d url("marble.jpg") center / cover; }
.fid-card > *:not(.fc-g) { position: relative; z-index: 1; }
.fid-card .fc-g { position: absolute; left: -42px; top: 118px; width: 230px; opacity: .06; pointer-events: none; z-index: 0; }
.fid-card .fc-head { text-align: left; }
.fid-card .fc-title { font-size: 27px; font-weight: 600; letter-spacing: .16em; }
.fid-card .fc-script { font-family: 'Great Vibes', cursive; color: #c9a15c; font-size: 44px; line-height: .68; margin-top: 2px; }
.fid-card .fc-qr { display: inline-block; background: #fff; border-radius: 14px; padding: 11px; margin-top: 16px; line-height: 0; }
.fid-card .fc-name { color: #9a9a9a; font-size: 13px; margin-top: 8px; }
.fid-card .stamp-grid { margin: 14px auto 0; }
.fid-card .sello-filled { border-color: #c9a15c; color: #c9a15c; background: #141414; }
.fid-card .sello-empty { border-color: #4a4a4a; }
.fid-card .fc-meta { color: #c9a15c; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-top: 10px; }
.fid-card .fc-foot { color: #6f6f6f; font-size: 11px; letter-spacing: .16em; margin-top: 14px; }
.fid-card .fc-promo { color: #c9a15c; font-size: .92rem; font-weight: 600; margin-top: 12px; }

/* Foto/avatar del cliente en la ficha */
.cli-foto { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); flex: 0 0 auto; }
.cli-foto-ph { display: flex; align-items: center; justify-content: center; background: #222; color: #fff; font-weight: 600; font-size: 1.6rem; }