/* La pantalla del socio, PORTADA de la app — no reconstruida.
   ─────────────────────────────────────────────────────────────────────────────
   Origen, fichero por fichero:
     app/Modules/Loyalty/Views/partials/hv-base.blade.php          (variables, .tabbar)
     app/Modules/Loyalty/Views/member/global/home.blade.php        (.hz-*)
     app/Modules/Loyalty/Views/member/global/partials/nav.blade.php (los 5 SVG)

   Las reglas son las suyas, copiadas. Lo unico que cambia:
     · Todo cuelga de `.appreal`, para que las variables y los nombres genericos
       (--ink, --muted, .card, .tab) NO se mezclen con los de la web comercial.
     · `.tabbar` pasa de `fixed` a `absolute`: aqui vive dentro del marco del
       movil, no de la ventana.
     · `--safe-t` / `--safe-b` a 0: no hay notch del sistema que esquivar.
     · Un `zoom` en el contenedor para que la pantalla real de 480px de ancho
       quepa en el movil dibujado. NADA de reescribir tamanos uno a uno: eso es
       lo que hace que el mockup y la app se separen con el tiempo.

   SI CAMBIA LA APP, SE VUELVE A COPIAR DE AHI. No se retoca a ojo. */

.appreal {
  --bg:#f5f7fa; --card:#fff; --ink:#16233b; --muted:#6b7280;
  --pri:#1E7AC7; --pri-d:#125C9E; --line:#e7eaf0;
  --sky:#E9F2FB; --gold:#F8C21C; --ok:#0F9D74;
  --r-tile:18px; --r-hero:26px; --sh-card:0 6px 16px rgba(20,30,55,.07);
  /* En la app, `--safe-t` es el hueco de la barra de estado del movil. Aqui el
     marco dibujado tiene su muesca, asi que se le da el alto de esa muesca en
     vez de cero: si no, el titulo queda pegado al borde y debajo del notch. */
  --safe-b:0px; --safe-t:16px;

  position:absolute; inset:0; overflow:hidden;
  background:var(--bg); color:var(--ink);
  font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* 480px es el ancho de `.wrap` en la app; el movil dibujado mide ~272. */
  zoom:.566;
}
.appreal * { box-sizing:border-box; }
.appreal .wrap { max-width:480px; margin:0 auto; padding:calc(12px + var(--safe-t)) 16px calc(24px + var(--safe-b)); }

/* ── hv-base: la barra inferior ─────────────────────────────────────────── */
.appreal .tabbar { position:absolute; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--line); padding-bottom:var(--safe-b); box-shadow:0 -2px 12px rgba(0,0,0,.05); }
.appreal .tabbar-inner { max-width:480px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; }
.appreal .tab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 10px; color:var(--muted); text-decoration:none; font-size:11px; font-weight:600; }
.appreal .tab svg { width:23px; height:23px; }
.appreal .tab.on { color:var(--pri); }
.appreal .tab-scan { position:relative; }
.appreal .tab-scan .bump { position:absolute; top:-30px; width:56px; height:56px; border-radius:50%; background:var(--pri); color:#fff;
    border:3px solid #fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 22px rgba(30,122,199,.5), 0 3px 8px rgba(20,30,55,.18); }
.appreal .tab-scan .bump svg { width:26px; height:26px; }
.appreal .tab-scan span { margin-top:38px; }

/* ── home.blade.php: el heroe ───────────────────────────────────────────── */
.appreal .hz-hero{ margin:calc(-12px - var(--safe-t)) -16px 0; padding:calc(16px + var(--safe-t)) 20px 102px;
    background:linear-gradient(155deg, #0E4F86 0%, #1E7AC7 62%, #2A93D8 100%);
    border-radius:0 0 26px 26px; color:#fff; position:relative; overflow:hidden; }
.appreal .hz-hero::before{ content:''; position:absolute; left:-50px; bottom:-70px; width:230px; height:230px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(33,163,140,.35), transparent); pointer-events:none; }
.appreal .hz-hero::after{ content:''; position:absolute; right:-60px; top:-80px; width:250px; height:250px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(229,24,124,.26), transparent); pointer-events:none; }
.appreal .hz-hero > *{ position:relative; z-index:1; }
.appreal .hz-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.appreal .hz-hello{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appreal .hz-hello .g{ font-size:16px; font-weight:400; opacity:.9; }
.appreal .hz-hello .nm{ font-size:16px; font-weight:700; letter-spacing:.01em; }
.appreal .hz-actions{ display:flex; gap:8px; flex:none; margin-top:1px; }
.appreal .hz-ic{ width:36px; height:36px; border:0; padding:0; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; text-decoration:none; position:relative; }
.appreal .hz-ic svg{ width:18px; height:18px; }
.appreal .hz-ic .dot{ position:absolute; top:8px; right:9px; width:7px; height:7px; border-radius:50%; background:#E5187C; border:1.5px solid var(--pri); }

/* ── home.blade.php: LA tarjeta ─────────────────────────────────────────── */
.appreal .hz-card{ display:block; text-decoration:none; position:relative; z-index:3; overflow:hidden;
    width:84%; max-width:292px; aspect-ratio:1.62 / 1; margin:-90px auto 0; border-radius:16px; --mem:#c9ccd3;
    background:#0E4F86 url('../img/tarjeta-socio.jpg') center/cover no-repeat;
    box-shadow:0 0 0 2px var(--mem), 0 0 0 3px rgba(90,100,115,.30), 0 14px 30px rgba(20,30,55,.20); }
.appreal .hz-card::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(125deg, rgba(0,0,0,.28) 0%, transparent 40%, transparent 62%, rgba(0,0,0,.40) 100%); }
.appreal .hz-card-brand{ position:absolute; top:10px; left:13px; z-index:2; display:flex; align-items:center; gap:6px;
    color:#fff; font-weight:800; font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,.45); }
.appreal .hz-card-brand img{ width:19px; height:19px; object-fit:contain; }
.appreal .hz-card-qr{ position:absolute; z-index:2; left:0; right:0; top:0; bottom:56px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.appreal .hz-card-qr .chip{ background:#fff; border-radius:10px; padding:5px; box-shadow:0 4px 12px rgba(0,0,0,.30); line-height:0; }
.appreal .hz-card-qr .chip img{ display:block; width:74px; height:74px; }
.appreal .hz-card-holder{ position:absolute; right:13px; bottom:66px; z-index:2; max-width:64%; text-align:right; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,.5); }
.appreal .hz-card-uid{ font-size:9.5px; font-weight:600; letter-spacing:.09em; opacity:.92; }
.appreal .hz-card-uname{ font-size:12.5px; font-weight:700; line-height:1.1; margin-top:2px; }
.appreal .hz-card-foot{ position:absolute; left:0; right:0; bottom:0; z-index:1; background:#fff; }
.appreal .hz-card-band{ height:6px; background:linear-gradient(90deg,#F8C21C,#F6AE1A); }
.appreal .hz-card-stats{ display:flex; }
.appreal .hz-stat{ flex:1; text-align:center; padding:9px 6px 10px; }
.appreal .hz-stat + .hz-stat{ border-left:1px solid var(--line); }
.appreal .hz-stat .v{ font-size:18px; font-weight:800; color:var(--pri); line-height:1; }
.appreal .hz-stat .k{ font-size:10.5px; color:var(--muted); font-weight:600; margin-top:5px; }

/* ── home.blade.php: secciones y banner VIP ─────────────────────────────── */
.appreal .hz-sec{ margin-top:18px; }
.appreal .hz-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; margin:0 2px 11px; }
.appreal .hz-sec-head h2{ font-size:17px; margin:0; font-weight:800; position:relative; padding-bottom:7px; color:var(--ink); }
.appreal .hz-sec-head h2::after{ content:''; position:absolute; left:0; bottom:0; width:30px; height:3px; border-radius:2px; background:linear-gradient(90deg, var(--pri), var(--pri-d)); }
.appreal .hz-sec-head a{ color:var(--pri); background:#E9F2FB; font-size:12px; font-weight:700; text-decoration:none; padding:6px 13px; border-radius:999px; }
.appreal .hz-vip{ position:relative; min-height:94px; border-radius:18px; overflow:hidden; display:flex; align-items:center; gap:14px; padding:15px 16px;
    background:linear-gradient(115deg,#0B3A63 0%,#1E6FB8 48%,#8A2E7A 118%); box-shadow:0 10px 26px rgba(20,30,55,.18); text-decoration:none; }
.appreal .hz-vip::before{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 42%, rgba(255,255,255,.10) 50%, transparent 58%); }
.appreal .hz-vip::after{ content:''; position:absolute; right:-30px; top:-40px; width:150px; height:150px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(248,194,28,.24), transparent); }
.appreal .hz-vip .crown{ position:relative; z-index:1; flex:none; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#F6C838;
    background:linear-gradient(135deg, rgba(248,194,28,.32), rgba(248,194,28,.08)); border:1px solid rgba(248,194,28,.55); box-shadow:0 3px 10px rgba(0,0,0,.16); }
.appreal .hz-vip .crown svg{ width:26px; height:26px; }
.appreal .hz-vip .tx{ position:relative; z-index:1; color:#fff; min-width:0; }
.appreal .hz-vip .tx .e{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#FCD98A; margin-bottom:1px; }
.appreal .hz-vip .tx .t{ display:block; font-weight:800; font-size:16px; }
.appreal .hz-vip .tx .d{ display:block; font-size:12px; opacity:.92; margin-top:2px; }
.appreal .hz-vip .go{ position:relative; z-index:1; margin-left:auto; flex:none; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.16); display:grid; place-items:center; color:#fff; }
.appreal .hz-vip .go svg{ width:18px; height:18px; }

/* ── home.blade.php: «Tu proxima recompensa» ────────────────────────────── */
.appreal .hz-row{ display:flex; gap:12px; overflow:hidden; margin:0 -16px; padding:0 16px 4px; }
.appreal .hz-rw{ flex:0 0 auto; width:248px; background:#fff; border:1px solid rgba(231,234,240,.7); border-radius:18px; overflow:hidden; box-shadow:var(--sh-card); display:flex; align-items:stretch; text-decoration:none; color:inherit; }
.appreal .hz-rw.ready{ border-color:var(--gold); box-shadow:0 0 0 1.5px var(--gold), 0 10px 24px rgba(248,194,28,.26); }
.appreal .hz-rw .ph{ flex:none; width:108px; position:relative; display:grid; place-items:center; color:#fff; }
.appreal .hz-rw .ph.k-gift{ background-image:linear-gradient(140deg,#12b581,#0F9D74); }
.appreal .hz-rw .ph.k-pct{ background-image:linear-gradient(140deg,#C0186A,#E5187C); }
.appreal .hz-rw .ph .ico{ width:40px; height:40px; opacity:.96; filter:drop-shadow(0 3px 8px rgba(0,0,0,.2)); }
.appreal .hz-rw .ph .flag{ position:absolute; top:0; left:0; background:#16A34A; color:#fff; font-size:9.5px;
    font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-bottom-right-radius:10px; }
.appreal .hz-rw .ph .flag.pct{ background:rgba(15,23,42,.72); }
.appreal .hz-rw .info{ flex:1; min-width:0; padding:11px 13px; display:flex; flex-direction:column; justify-content:center; }
.appreal .hz-rw .bdg{ align-self:flex-start; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; }
.appreal .hz-rw .bdg.pr{ color:var(--pri-d); background:var(--sky); }
.appreal .hz-rw .nm{ font-weight:800; font-size:14.5px; color:var(--ink); margin:6px 0 1px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appreal .hz-rw .bz{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appreal .hz-rw .ms{ margin-top:7px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appreal .hz-rw .ms b{ color:var(--ink); }

/* ── home.blade.php: «Promociones para ti» ──────────────────────────────── */
.appreal .hz-promo{ flex:0 0 200px; max-width:212px; background:#fff; border:1px solid rgba(231,234,240,.7); border-radius:18px;
    overflow:hidden; box-shadow:0 6px 16px rgba(20,30,55,.07); text-decoration:none; color:inherit; }
.appreal .hz-promo .ph{ position:relative; aspect-ratio:16/10; background:#e7eaf0 center/cover no-repeat; overflow:hidden; }
.appreal .hz-promo .ph::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 58%, rgba(0,0,0,.20)); }
.appreal .hz-ribbon{ position:absolute; top:13px; left:-30px; transform:rotate(-45deg); color:#fff; font-size:9.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:.04em; padding:3px 36px; box-shadow:0 2px 6px rgba(0,0,0,.22); z-index:2; }
.appreal .hz-pi{ padding:11px 12px 13px; }
.appreal .hz-promo .ti{ font-weight:700; font-size:13.5px; line-height:1.22; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appreal .hz-promo .biz{ color:var(--muted); font-size:11.5px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ Pantalla «Tus tarjetas» ═══════════════════════════════════════════════
   Origen: member/global/cards.blade.php + partials/card-face.blade.php
           + partials/stamps-grid.blade.php
   Del card-face se trae SOLO la cara delantera: el reverso se gira al tocar y
   en un mockup estatico no hay toque que darle. */

.appreal .cd-head{ margin:calc(-12px - var(--safe-t)) -16px 18px; padding:calc(16px + var(--safe-t)) 20px 16px;
    background:linear-gradient(155deg,#0E4F86 0%,#1E7AC7 62%,#2A93D8 100%); color:#fff;
    border-radius:0 0 26px 26px; position:relative; overflow:hidden; }
.appreal .cd-head::after{ content:''; position:absolute; right:-46px; top:-56px; width:180px; height:180px; border-radius:50%;
    background:radial-gradient(closest-side, rgba(248,194,28,.20), transparent); pointer-events:none; }
.appreal .cd-head > *{ position:relative; z-index:1; }
.appreal .cd-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.appreal .cd-title{ font-size:22px; font-weight:800; color:#fff; margin:0; }
.appreal .cd-sub{ font-size:13px; color:rgba(255,255,255,.85); margin:5px 0 0; }
.appreal .cd-seg{ display:flex; gap:3px; background:rgba(255,255,255,.18); border-radius:11px; padding:3px; flex:none; }
.appreal .cd-seg span{ width:32px; height:28px; color:#fff; opacity:.72; border-radius:8px; display:grid; place-items:center; }
.appreal .cd-seg span.on{ background:#fff; color:var(--pri); opacity:1; box-shadow:0 3px 8px rgba(0,0,0,.16); }
.appreal .cd-seg svg{ width:16px; height:16px; }

.appreal .tc-item{ margin-bottom:18px; }
.appreal .tc-card .hvf-f{ box-shadow:0 20px 34px -12px rgba(20,30,55,.32), 0 6px 14px -4px rgba(20,30,55,.16) !important; }
.appreal .hvf-f{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1.586/1; box-shadow:0 4px 14px rgba(0,0,0,.15); }
.appreal .hvf-cont{ position:relative; height:100%; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.appreal .hvf-elo{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; opacity:.75; }
.appreal .hvf-tit{ font-size:18px; font-weight:700; line-height:1.15; }
.appreal .hvf-desc{ font-size:13px; opacity:.9; }
.appreal .hvf-saldo{ display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.appreal .hvf-saldo .t{ font-size:11px; opacity:.75; }
.appreal .hvf-saldo .n{ font-size:22px; font-weight:800; }
.appreal .hvf-saldo .n i{ font-size:12px; font-weight:600; opacity:.8; font-style:normal; }
.appreal .cf-count{ position:absolute; left:12px; bottom:12px; padding:2px 9px; border-radius:999px;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
    font-size:11.5px; font-weight:800; letter-spacing:.02em; line-height:1.55; }

/* stamps-grid: 5 por fila, alineada a la derecha y al 75% del ancho. */
.appreal .cf-sellos{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6%; width:75%; margin-left:auto; }
.appreal .cf-sellos span{ aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.10); border:2px solid currentColor; }
.appreal .cf-sellos span.ok{ background:#16A34A; border-color:#16A34A; color:#fff; }
.appreal .cf-sellos span.premio{ color:#9CA3AF; border-color:#9CA3AF; }
.appreal .cf-sellos svg{ width:58%; height:58%; }

.appreal .tc-wal{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 2px 0; }
.appreal .tc-wbtn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
    border-radius:10px; background:#101418; color:#fff; font-size:13px; font-weight:700;
    letter-spacing:.01em; text-decoration:none; box-shadow:0 5px 14px -6px rgba(16,20,24,.5); }
.appreal .tc-wbtn svg{ width:16px; height:16px; }

/* card-face pinta el arte del negocio sobre el color de fondo, con su opacidad
   (`$d['bg_image']` / `bg_opacity`). Sin esta capa las tarjetas salen planas y
   no se parecen a las de verdad. */
.appreal .hvf-bg{ position:absolute; inset:0; background-size:cover; background-position:center; }

/* ── home.blade.php: «Tus negocios» ─────────────────────────────────────── */
.appreal .hz-biz-tile{ flex:0 0 196px; max-width:206px; background:#fff; border:1px solid rgba(231,234,240,.7); border-radius:18px;
    overflow:hidden; box-shadow:0 6px 16px rgba(20,30,55,.07); text-decoration:none; color:inherit; }
.appreal .hz-biz-tile .bt{ position:relative; aspect-ratio:3/2; display:grid; place-items:center; overflow:hidden;
    background:linear-gradient(140deg, var(--pri), var(--pri-d)); }
.appreal .hz-biz-tile .bt .art{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.appreal .hz-biz-tile .bt::after{ content:''; position:absolute; inset:0; background:rgba(10,20,40,.32); }
.appreal .hz-biz-tile .bt .ini{ position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:15px; background:rgba(255,255,255,.92); color:var(--pri-d);
    display:grid; place-items:center; font-weight:800; font-size:19px; }
.appreal .hz-biz-tile .mem-pill{ position:absolute; z-index:3; top:9px; right:9px; display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.92); color:#5a4200;
    font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.appreal .hz-biz-tile .mem-pill svg{ width:11px; height:11px; }
.appreal .hz-biz-tile .bi{ padding-top:11px; }
.appreal .hz-biz-tile .bi .n{ padding:0 12px; text-align:center; font-weight:800; font-size:14px; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Banda metalica con el color del nivel de membresia en ese local. */
.appreal .hz-biz-tile .bband{ height:6px; margin-top:10px;
    background:linear-gradient(90deg,
        color-mix(in srgb, var(--mem) 68%, #000) 0%,
        var(--mem) 26%,
        color-mix(in srgb, var(--mem) 60%, #fff) 50%,
        var(--mem) 74%,
        color-mix(in srgb, var(--mem) 68%, #000) 100%); }
.appreal .hz-biz-tile .bstats{ display:flex; }
.appreal .hz-biz-tile .bstat{ flex:1; text-align:center; padding:9px 4px 11px; min-width:0; }
.appreal .hz-biz-tile .bstat + .bstat{ border-left:1px solid var(--line); }
.appreal .hz-biz-tile .bstat .v{ font-size:16px; font-weight:800; color:var(--pri); line-height:1; }
.appreal .hz-biz-tile .bstat .k{ font-size:10px; color:var(--muted); font-weight:600; margin-top:4px; }