/* ─────────────────────────────────────────────
   esleal.com — App de lealtad por negocio
   Variables de marca se inyectan en <style> inline
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    /* Brand (sobrescritos inline por negocio) */
    --brand-primary:    #E8623A;
    --brand-primary-hi: #F2855E;
    --brand-secondary:  #3B1F0C;
    --brand-secondary2: #5C341A;
    /* Sistema */
    --coral:     #E8623A;
    --coral-hi:  #F2855E;
    --cafe-dark: #3B1F0C;
    --cafe-2:    #5C341A;
    --amber:     #F4A628;
    --amber-hi:  #FFC15C;
    --cream:     #FDF5EC;
    --cream-2:   #F6E8D3;
    --texto:     #2D1A0E;
    --gris:      #7A5C46;
    --gris-hi:   #B79A82;
    /* Border radius */
    --r-sm:   6px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   24px;
    --r-pill: 9999px;
}

body {
    background: #f5f6fa;
    font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* ── Sellos ─────────────────────────────────── */
.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px dashed #ccc;
    color: #ccc;
    font-size: 18px;
    margin: 3px;
    transition: all .2s;
}

.stamp-filled {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ── Tarjetas ────────────────────────────────── */
.card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ── Navbar ──────────────────────────────────── */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ── Botones ─────────────────────────────────── */
.btn {
    border-radius: 10px;
    font-weight: 500;
}

/* ── Nav pills/tabs ──────────────────────────── */
.nav-pills .nav-link.active {
    background: var(--brand-primary) !important;
}
.nav-pills .nav-link {
    color: var(--brand-primary);
}

/* ── QR reader ───────────────────────────────── */
#qr-reader {
    border-radius: 12px;
    overflow: hidden;
}

/* ── Footer ──────────────────────────────────── */
footer a:hover {
    opacity: .8;
}

/* ── Responsive stamps ───────────────────────── */
@media (max-width: 576px) {
    .stamp { width: 36px; height: 36px; font-size: 11px; margin: 2px; }
}