/* ============================================================
   PaidNite · sistema de diseño v3 — "noche eléctrica premium"
   Marca: diamante azul · Space Grotesk (display) + Inter (texto)
   Capas de azul-noche + gradiente eléctrico (azul→índigo) en CTAs,
   dorado dosificado en estrellas/insignias. Sin arcoíris.
   ============================================================ */
:root{
  /* profundidades de azul-noche, de fuera hacia dentro */
  --bg0:#03050a;          /* página, fuera del marco */
  --bg:#060a13;           /* lienzo del dispositivo */
  --bg2:#0a1120;          /* pozos: inputs, códigos */
  --panel:#0d1527;        /* tarjeta base */
  --panel2:#131e36;       /* tarjeta elevada */
  --line:rgba(150,190,240,.10);--line2:rgba(150,190,240,.20);
  --accent:#4a9ee0;--accent2:#2d7dd2;--deep:#1a5fa8;--sky:#8fc7f5;--ice:#dcecfb;
  --vio:#6d6cf0;          /* índigo eléctrico: SOLO dentro de gradientes */
  --gold:#f6c667;--gold2:#ffdf9e;
  --ok:#34d399;--warn:#fbbf24;--bad:#f87171;
  --text:#eef4fb;--muted:#94a8c6;--faint:rgba(238,244,251,.42);
  /* gradiente de acento (CTAs): azul eléctrico → índigo sutil */
  --grad:linear-gradient(135deg,#66b9f5 0%,#3b8ce2 52%,#5a6ceb 100%);
  /* gradiente de números clave (hielo → cielo → acento) */
  --grad-num:linear-gradient(115deg,#f2f9ff 0%,#a6d4fa 38%,#4a9ee0 76%,#7d7bf2 108%);
  /* borde 1px con gradiente (truco padding-box/border-box) */
  --grad-border:linear-gradient(155deg,rgba(130,195,255,.55),rgba(150,190,240,.10) 42%,rgba(109,108,240,.35));
  --glass:rgba(8,13,25,.86);
  --r-lg:22px;--r-md:16px;--r-sm:12px;
  --shadow-card:0 1px 0 rgba(255,255,255,.04) inset,0 2px 6px -2px rgba(0,0,0,.4),0 14px 34px -16px rgba(0,0,0,.6);
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.7),0 0 0 1px rgba(150,190,240,.09);
  --shadow-btn:0 1px 0 rgba(255,255,255,.25) inset,0 12px 30px -10px rgba(59,140,226,.6),0 4px 12px -6px rgba(90,108,235,.5);
  --ease:cubic-bezier(.3,.8,.3,1);
  color-scheme:dark; /* controles nativos (fecha, select) en oscuro */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{color:var(--text);font-family:"Inter",-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px;
  /* la página respira: resplandor azul tras el marco, nunca un rectángulo plano */
  background:radial-gradient(60% 42% at 50% 0%,rgba(38,86,150,.16),transparent 70%),
    radial-gradient(50% 38% at 82% 100%,rgba(70,60,160,.10),transparent 70%),var(--bg0)}
h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
a{color:inherit}
::selection{background:rgba(74,158,224,.4);color:#fff}
/* scrollbars discretos, de marca */
*{scrollbar-width:thin;scrollbar-color:rgba(150,190,240,.22) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(150,190,240,.18);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(150,190,240,.32);background-clip:padding-box}

/* ---------- marco móvil ---------- */
.device{max-width:440px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);
  position:relative;overflow:hidden;overflow:clip;
  box-shadow:0 0 0 1px rgba(150,190,240,.08),0 60px 140px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(45,125,210,.25)}
@media(min-width:480px){.device{margin:22px auto;min-height:min(920px,calc(100vh - 44px));
  height:min(920px,calc(100vh - 44px));border-radius:38px;border:1px solid rgba(150,190,240,.12)}}
/* atmósfera del marco: mesh azul-noche (resplandor arriba, índigo abajo) + viñeta */
.device::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(95% 58% at 78% -12%, rgba(52,124,206,.20), transparent 62%),
    radial-gradient(60% 40% at 8% 22%, rgba(30,90,160,.12), transparent 65%),
    radial-gradient(72% 46% at 4% 104%, rgba(84,80,200,.13), transparent 62%),
    radial-gradient(130% 90% at 50% 46%, transparent 55%, rgba(2,4,9,.5) 100%)}
/* grano fotográfico sutil: mata el "rectángulo plano" sin pesar nada */
.device::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.screen{display:none;position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1}
.screen.on{display:block;animation:screenIn .3s var(--ease)}
/* SOLO opacidad: un transform en un ancestro rompe el posicionamiento de Leaflet */
@keyframes screenIn{from{opacity:0}to{opacity:1}}

/* Pantallas de app (usuario/local): layout flex robusto — la vista ocupa TODO el
   alto bajo la appbar; la tabbar v3 es una píldora flotante (absolute) que se
   posa ENCIMA del contenido/mapa, como en las apps nativas caras. */
#userApp.on,#localApp.on{display:flex;flex-direction:column;overflow:hidden}
#userApp .appbar,#localApp .appbar{position:relative;flex:0 0 auto}
#userApp .view,#localApp .view{display:none}
#userApp .view.on,#localApp .view.on{display:block;flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* aire inferior: ni la píldora ni el FAB tapan el final de las listas */
#userApp .view .pad{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
#localApp .view .pad{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
.glow{position:absolute;border-radius:50%;filter:blur(95px);pointer-events:none;z-index:0}
.glow{mix-blend-mode:screen}
.glow.a{width:380px;height:380px;top:-150px;left:-110px;background:radial-gradient(closest-side,rgba(74,158,224,.5),transparent);animation:drift 15s ease-in-out infinite}
.glow.b{width:340px;height:340px;bottom:-160px;right:-110px;background:radial-gradient(closest-side,rgba(109,92,235,.4),transparent);animation:drift 17s ease-in-out infinite reverse}
.glow.c{width:300px;height:300px;top:35%;right:-130px;background:radial-gradient(closest-side,rgba(56,150,235,.3),transparent);animation:drift 19s ease-in-out infinite}
.pad{position:relative;z-index:1;padding:26px 20px 32px}

/* ---------- identidad ---------- */
.logo{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em}
.logo-img{width:34px;height:34px;flex:0 0 auto;filter:drop-shadow(0 4px 12px rgba(74,158,224,.4))}
.logo .nm span{color:var(--accent)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.muted{color:var(--muted)}
.grad-txt{background:var(--grad-num);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* número héroe (saldo de la Cartera): el protagonista de la pantalla */
.saldo-big{font-family:"Space Grotesk",sans-serif;font-size:60px;font-weight:700;
  letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 10px 30px rgba(74,158,224,.35))}
#promoSaldo.saldo-big{font-size:44px}

/* ---------- botones ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border:none;
  border-radius:15px;padding:15px 18px;color:#fff;font-size:15.5px;font-weight:700;letter-spacing:-.01em;
  background:var(--grad);position:relative;overflow:hidden;
  box-shadow:var(--shadow-btn);
  transition:transform .16s var(--ease),box-shadow .2s,filter .2s}
/* barniz superior: el CTA parece pulido, no plano */
.btn::before{content:"";position:absolute;inset:0 0 55%;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
.btn:hover{filter:brightness(1.07) saturate(1.05)}
.btn:active{transform:scale(.97);box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 16px -8px rgba(59,140,226,.5)}
.btn:disabled{opacity:.5;cursor:default;filter:none}
.btn.ghost{background:linear-gradient(180deg,rgba(150,190,240,.10),rgba(150,190,240,.05));
  border:1px solid var(--line2);color:var(--text);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.btn.ghost::before{display:none}
.btn.ghost:hover{background:linear-gradient(180deg,rgba(150,190,240,.15),rgba(150,190,240,.08));border-color:rgba(130,195,255,.34)}
.btn.sm{padding:10px 15px;font-size:13.5px;border-radius:12px;width:auto;min-height:44px}
.btn.ok{background:linear-gradient(140deg,#4ade80,#16a34a);color:#03170c;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 24px -10px rgba(52,211,153,.5)}
.btn.wa{background:linear-gradient(140deg,#3ee27c,#1da851);color:#03170c;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 24px -10px rgba(37,211,102,.45)}
.btn.danger{background:linear-gradient(140deg,#f87171,#b91c1c);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 24px -10px rgba(248,113,113,.5)}
/* estado "armado" de una acción destructiva (1er toque): rojo, pide el 2º toque */
button.armed{color:var(--bad) !important;border:1px solid rgba(248,113,113,.5) !important;
  background:rgba(248,113,113,.12) !important;font-size:12px !important;font-weight:700;
  width:auto !important;padding:7px 11px !important;border-radius:10px !important;animation:armedIn .18s var(--ease)}
@keyframes armedIn{from{transform:scale(.94)}to{transform:none}}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* WCAG AA: #8b9bb0 sobre #070b14 ≈ 6.9:1 (el antiguo --faint no llegaba a 4.5:1) */
.legal{font-size:10.5px;color:#8b9bb0;line-height:1.75;text-align:center}
.legal a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(74,158,224,.35)}

/* ---------- sistema de iconos (un solo lenguaje: línea 1.8 + currentColor) ---------- */
.di{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.di.fill{fill:currentColor;stroke:none}
h1 .di,h2 .di{vertical-align:-.12em}
/* caja de icono destacada (tarjetas): didáctica y con brillo de marca */
.ibx{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;color:var(--sky);background:linear-gradient(150deg,rgba(74,158,224,.22),rgba(26,95,168,.08));
  border:1px solid rgba(74,158,224,.2);box-shadow:0 8px 20px -10px rgba(45,125,210,.5)}
.ibx .di{width:21px;height:21px}
.ibx.ok{color:var(--ok);background:linear-gradient(150deg,rgba(74,222,128,.16),rgba(22,163,74,.05));
  border-color:rgba(74,222,128,.22);box-shadow:0 8px 20px -10px rgba(52,211,153,.4)}
.ibx.warn{color:var(--warn);background:linear-gradient(150deg,rgba(251,191,36,.16),rgba(217,119,6,.05));
  border-color:rgba(251,191,36,.24);box-shadow:0 8px 20px -10px rgba(251,191,36,.35)}
.ibx.bad{color:var(--bad);background:linear-gradient(150deg,rgba(248,113,113,.15),rgba(185,28,28,.05));
  border-color:rgba(248,113,113,.26);box-shadow:0 8px 20px -10px rgba(248,113,113,.35)}
.ibx.violet{color:#c4b5fd;background:linear-gradient(150deg,rgba(124,58,237,.22),rgba(76,29,149,.08));
  border-color:rgba(139,92,246,.26);box-shadow:0 8px 20px -10px rgba(124,58,237,.45)}
.wc-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff}
.wc-ic .di{width:19px;height:19px}
.ob-ico.ice .di{color:var(--ice);filter:drop-shadow(0 6px 18px rgba(140,220,255,.45))}
.ob-ico.violet .di{color:#c4b5fd;filter:drop-shadow(0 6px 18px rgba(124,58,237,.5))}
.appbar .out .di{width:17px;height:17px}
.appbar .zona .di{width:13px;height:13px;color:var(--accent)}
.chip .di{width:12px;height:12px;vertical-align:-.14em}
.sec-h .di{width:17px;height:17px}

/* ---------- age gate ---------- */
#agegate .pad{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100dvh;text-align:center}
#agegate .hero-logo{width:84px;height:84px;margin:0 auto;
  filter:drop-shadow(0 14px 38px rgba(74,158,224,.5));animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
#agegate h1{font-size:clamp(32px,9.5vw,44px);font-weight:700;margin:22px 0 12px;animation:rise .5s var(--ease) .08s backwards}
#agegate .lead{color:rgba(238,244,251,.66);font-size:15.5px;margin:0 auto 30px;max-width:300px;animation:rise .5s var(--ease) .16s backwards}
#agegate .actions{display:grid;gap:10px;max-width:330px;margin:0 auto;width:100%;animation:rise .5s var(--ease) .24s backwards}
#agegate .legal{animation:rise .5s var(--ease) .32s backwards}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#blocked{display:none;margin-top:18px;color:var(--bad);font-size:14px}

/* ---------- selector de cuenta ---------- */
#roles h1{font-size:clamp(27px,7.5vw,36px);font-weight:700;margin:26px 0 6px}
#roles .sub{color:var(--muted);font-size:14.5px;margin:0 0 24px}
.role{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 17px;margin-bottom:12px;color:var(--text);
  box-shadow:var(--shadow-card);transition:border-color .2s,transform .15s var(--ease),background .2s}
.role:hover{border-color:rgba(74,158,224,.5);background:var(--panel2)}
.role:active{transform:scale(.985)}
.role .ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:25px;flex:0 0 auto;background:linear-gradient(150deg,rgba(74,158,224,.2),rgba(26,95,168,.08));
  border:1px solid rgba(74,158,224,.16)}
.role b{font-family:"Space Grotesk",sans-serif;font-size:17px;display:block;letter-spacing:-.02em}
.role p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.role .arw{margin-left:auto;color:var(--faint);flex:0 0 auto;font-size:22px;transition:transform .2s var(--ease),color .2s}
.role:hover .arw{transform:translateX(3px);color:var(--accent)}

/* ---------- auth ---------- */
#auth .pad{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-start;padding-top:22px}
#auth .legal{margin-top:auto;padding-top:22px}
.field{margin-top:13px}
.field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.field input,.field select{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:13px;
  padding:13px 14px;color:var(--text);font-size:15px;outline:none;
  box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.6);
  transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus,.field select:focus{border-color:var(--accent);background:#0b1426;
  box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.6),0 0 0 3px rgba(74,158,224,.18);outline:none}
.field input::placeholder{color:var(--faint)}
.field .hint{font-size:11.5px;color:var(--muted);margin-top:5px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--muted);
  font-size:14px;padding:0;margin-bottom:18px;transition:color .2s}
.back:hover{color:var(--text)}
.authtabs{display:flex;background:rgba(6,10,19,.6);border:1px solid var(--line);border-radius:14px;padding:4px;margin:16px 0 4px;
  box-shadow:inset 0 2px 6px -3px rgba(0,0,0,.7)}
.authtabs button{flex:1;background:none;border:none;border-radius:11px;padding:11px;color:var(--muted);
  font-size:14px;font-weight:600;transition:color .2s,background .25s var(--ease)}
.authtabs button.on{background:var(--grad);color:#fff;
  box-shadow:0 6px 18px -6px rgba(59,140,226,.65),inset 0 1px 0 rgba(255,255,255,.22)}
.formmsg{margin-top:12px;font-size:13.5px;color:var(--bad);min-height:18px}
.check{display:flex;gap:10px;align-items:flex-start;margin:14px 0 2px;font-size:13px;color:var(--muted)}
.check input{width:auto;margin-top:3px;accent-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}

/* ---------- chrome de la app ---------- */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:13px 16px;
  background:linear-gradient(180deg,rgba(6,10,19,.92),rgba(6,10,19,.72));
  backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .appbar{background:rgba(6,10,19,.97)}}
/* filo de luz bajo la appbar: separa sin pesar */
.appbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 4%,rgba(130,195,255,.35) 30%,rgba(109,108,240,.25) 70%,transparent 96%)}
.appbar .logo-img{width:27px;height:27px}
.appbar .brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px}
.appbar .brand span{color:var(--accent)}
.appbar .zona{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#c9daf1;
  background:linear-gradient(180deg,rgba(150,190,240,.12),rgba(150,190,240,.05));
  border:1px solid var(--line2);padding:6px 12px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:auto}
/* en un contenedor flex la elipsis vive en el hijo de texto, no en la píldora */
.appbar .zona .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.appbar .out{background:rgba(148,184,230,.06);border:1px solid var(--line);color:var(--muted);width:34px;height:34px;
  border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:color .2s,border-color .2s}
.appbar .out:hover{color:var(--bad);border-color:rgba(248,113,113,.4)}
.view{display:none}
.view.on{display:block;animation:screenIn .3s var(--ease)}

/* fundido inferior: el contenido se disuelve antes de llegar a la píldora
   (bajo el FAB z24 y la píldora z30 — puro decorado, no intercepta toques) */
#userApp::after,#localApp::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:calc(98px + env(safe-area-inset-bottom));pointer-events:none;z-index:23;
  background:linear-gradient(180deg,transparent,rgba(4,7,14,.88) 82%)}
/* píldora flotante con cristal: la firma visual de la v3 */
.tabbar{position:absolute;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:30;display:flex;gap:2px;padding:6px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(150,190,240,.17);
  box-shadow:0 26px 54px -18px rgba(0,0,0,.85),0 6px 18px -8px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.07)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tabbar{background:rgba(8,13,25,.97)}}
.tabbar button{flex:1;background:none;border:none;color:var(--faint);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:600;
  min-height:52px;padding:6px 0 5px;border-radius:999px;
  transition:color .25s,background .25s,box-shadow .25s}
.tabbar button.on{color:#fff;
  background:linear-gradient(160deg,rgba(90,155,235,.34),rgba(90,108,235,.20));
  box-shadow:inset 0 0 0 1px rgba(130,195,255,.30),0 8px 20px -8px rgba(59,140,226,.55)}
.tabbar svg{width:21px;height:21px;transition:transform .2s var(--ease),filter .25s}
.tabbar button.on svg{transform:translateY(-1px);filter:drop-shadow(0 0 7px rgba(110,185,250,.9))}

/* ---------- mapa ---------- */
#map{width:100%;height:100%;background:#0a1526;touch-action:none}
/* isolation: los z-index internos de Leaflet (200-700) no compiten con el resto
   de la app — así el FAB del chat (z24) queda por encima del mapa y por debajo
   del sheet/scrim, sin duplicar botones. */
.mapwrap{position:relative;height:100%;overflow:hidden;isolation:isolate}
#v-mapa.view.on{overflow:hidden} /* el mapa gestiona sus propios gestos, sin scroll de página */
.welcome-card{position:absolute;z-index:500;left:12px;right:12px;top:10px;
  background:linear-gradient(130deg,rgba(84,164,238,.96),rgba(38,100,190,.96) 55%,rgba(74,88,215,.96));
  backdrop-filter:blur(10px);border:1px solid rgba(230,242,255,.3);
  border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:11px;
  box-shadow:0 16px 40px -12px rgba(10,30,70,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.welcome-card .amt{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.02em}
.welcome-card p{margin:1px 0 0;font-size:11.5px;opacity:.88}
/* versión compacta (ya hay saldo): una línea, el mapa respira */
.welcome-card.slim{left:auto;right:12px;max-width:70%;padding:7px 13px;border-radius:999px;gap:8px}
.welcome-card.slim .wc-ic{width:26px;height:26px;border-radius:8px}
.welcome-card.slim .wc-ic svg{width:14px;height:14px}
.welcome-card.slim .amt{font-size:13.5px;white-space:nowrap}
.welcome-card.slim p{display:none}
/* apilado vertical del mapa: píldora (12) → FAB chat (92) → geo (158): nunca se tapan */
.geo-btn{position:absolute;z-index:500;right:16px;bottom:calc(158px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:16px;
  border:1px solid var(--line2);background:var(--glass);backdrop-filter:blur(14px);color:var(--text);
  font-size:19px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .15s var(--ease)}
.geo-btn:active{transform:scale(.92)}
.leaflet-container{background:#0a1526;font-family:inherit}
/* pin de marca: gota con gradiente eléctrico y borde luminoso */
.pin{width:38px;height:46px;position:relative;filter:drop-shadow(0 6px 10px rgba(0,0,0,.65))}
.pin::after{content:"";position:absolute;left:50%;bottom:-3px;width:22px;height:7px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(90,160,240,.5),transparent);filter:blur(2px)}
.pin .body{width:38px;height:38px;border-radius:50% 50% 50% 3px;transform:rotate(45deg);
  background:linear-gradient(140deg,#79c4ff 0%,#3b8ce2 58%,#4f5fe8 108%);
  display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(235,246,255,.7);
  box-shadow:0 0 0 3px rgba(80,150,230,.18),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.pin .emo{transform:rotate(-45deg);font-size:18px}
/* pin seleccionado (ficha abierta / último visto): brilla y crece */
.pin.on .body{transform:rotate(45deg) scale(1.22);border-color:#fff;
  box-shadow:0 0 0 6px rgba(102,185,245,.30),0 10px 26px rgba(59,140,226,.7)}
.me-dot{width:16px;height:16px;border-radius:50%;background:#4a9ee0;border:2.5px solid #fff;
  box-shadow:0 0 0 2px rgba(74,158,224,.4),0 2px 6px rgba(0,0,0,.5)}
.me-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(74,158,224,.5);
  animation:mePulse 2s ease-out infinite}
@keyframes mePulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
/* controles de Leaflet en oscuro (atribución + zoom), despejados de la píldora */
.leaflet-control-attribution{background:rgba(10,21,38,.82)!important;color:var(--muted)!important;
  font-size:9.5px!important;backdrop-filter:blur(6px);border-radius:999px;
  margin:0 0 calc(84px + env(safe-area-inset-bottom)) 14px!important;padding:2px 9px!important}
.leaflet-control-attribution a{color:var(--accent)!important}
.leaflet-bar a{background:rgba(14,21,36,.92)!important;color:var(--text)!important;border-color:var(--line2)!important}
.leaflet-bar a:hover{background:rgba(26,37,58,.95)!important}
.leaflet-control-zoom{margin-left:14px!important;margin-bottom:calc(104px + env(safe-area-inset-bottom))!important;border:none!important}
/* en pantalla táctil / móvil el zoom es pellizco: fuera botones de escritorio */
@media (max-width:520px),(hover:none){.leaflet-control-zoom{display:none}}

/* ---------- tarjetas y listas ---------- */
.sec-h{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}
.sec-h h2{font-size:18px;letter-spacing:-.025em;display:flex;align-items:center;gap:8px}
.sec-h h2::before{content:"";width:3px;height:15px;border-radius:99px;background:var(--grad);
  box-shadow:0 0 10px rgba(90,140,235,.7);flex:0 0 auto}
.card{background:linear-gradient(180deg,rgba(21,32,56,.55),rgba(13,21,39,.9) 68%);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;
  margin-bottom:12px;box-shadow:var(--shadow-card)}
/* card clicable como <button> real: foco de teclado + feedback táctil */
button.card{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:transform .16s var(--ease),border-color .2s,background .2s}
button.card:hover{border-color:rgba(74,158,224,.4)}
button.card:active{transform:scale(.988)}
button.welcome-card{color:var(--text);text-align:left;font:inherit;cursor:pointer}
button.welcome-card:active{transform:scale(.985)}
/* tarjeta héroe (saldo): borde 1px con gradiente + aurora interna */
.card.hero{position:relative;overflow:hidden;border:1px solid transparent;
  background:
    linear-gradient(150deg,rgba(36,66,116,.60),rgba(12,20,38,.94) 52%,rgba(30,28,66,.55)) padding-box,
    var(--grad-border) border-box;
  box-shadow:var(--shadow-card),0 0 60px -24px rgba(59,140,226,.5)}
.card.hero::after{content:"";position:absolute;top:-80px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(102,185,245,.26),transparent);pointer-events:none;filter:blur(4px)}
.card.hero::before{content:"";position:absolute;bottom:-90px;left:-50px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(109,108,240,.16),transparent);pointer-events:none}
.loc{display:flex;gap:13px;align-items:flex-start}
.loc .thumb{width:54px;height:54px;border-radius:15px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:25px;overflow:hidden;
  background:linear-gradient(150deg,rgba(74,158,224,.20),rgba(26,95,168,.06));
  border:1px solid rgba(74,158,224,.18);box-shadow:0 8px 22px -10px rgba(59,140,226,.45)}
.loc .meta b{font-family:"Space Grotesk",sans-serif;font-size:15.5px;letter-spacing:-.02em}
.loc .meta .r{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
/* píldora indivisible: icono y texto nunca se parten en dos líneas */
.chip{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(150,190,240,.07);
  color:var(--muted);border:1px solid var(--line)}
.chip.on{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(59,140,226,.6),inset 0 1px 0 rgba(255,255,255,.22)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.chips .chip{cursor:pointer;padding:7px 13px;font-size:12.5px;
  transition:background .2s,color .2s,border-color .2s,transform .15s var(--ease),box-shadow .2s}
.chips .chip:hover{border-color:rgba(74,158,224,.45);color:var(--text)}
.chips .chip:active{transform:scale(.94)}
/* los filtros ahora son <button class="chip">: reset para que hereden el look .chip */
button.chip{appearance:none;-webkit-appearance:none;font:inherit;font-size:11px;font-weight:600;
  line-height:inherit;margin:0;background:rgba(148,184,230,.07);color:var(--muted);border:1px solid var(--line)}
button.chip.on{background:var(--grad);color:#fff;border-color:transparent}
.exp{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line)}
.exp:first-of-type{border-top:none}
.exp .info{flex:1;min-width:0}
.exp .info b{font-size:14.5px;font-weight:600}
.exp .info p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.exp .cost{margin-left:auto;text-align:right;flex:0 0 auto}
.exp .cost .c{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--sky);font-size:15px;
  font-variant-numeric:tabular-nums}

/* confirmación de canje (paso previo a gastar) */
.saldo-flow{display:flex;align-items:stretch;gap:7px;margin:0 0 15px}
.saldo-flow .s{flex:1;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:11px 6px;text-align:center}
.saldo-flow .s .lbl{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.saldo-flow .s b{font-family:"Space Grotesk",sans-serif;font-size:21px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.saldo-flow .s.gasto{border-color:rgba(74,158,224,.3)}
.saldo-flow .s.gasto b{color:var(--sky)}
.saldo-flow .s.ok{border-color:rgba(74,222,128,.28)}
.saldo-flow .s.ok b{color:var(--ok)}
.saldo-flow .s.bad{border-color:rgba(248,113,113,.35)}
.saldo-flow .s.bad b{color:var(--bad)}
.saldo-flow .arr{align-self:center;color:var(--faint);font-size:17px;flex:0 0 auto}
.warnbox{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-radius:13px;
  padding:11px 13px;font-size:13px;line-height:1.5;margin:0 0 12px}

/* ---------- Mejores experiencias (carrusel) + valoraciones ---------- */
.top-scroll{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 2px 12px;margin:0 -2px;scrollbar-width:none}
.top-scroll::-webkit-scrollbar{display:none}
.top-card{flex:0 0 178px;scroll-snap-align:start;text-align:left;font:inherit;color:var(--text);
  background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:18px;padding:10px;cursor:pointer;box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease),border-color .2s}
.top-card:hover{border-color:rgba(74,158,224,.45);transform:translateY(-2px)}
.top-card:active{transform:scale(.98)}
.top-card b{display:block;font-family:"Space Grotesk",sans-serif;font-size:14px;letter-spacing:-.01em;
  margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-card .tc-local{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-media{position:relative;height:96px;border-radius:13px;overflow:hidden;
  background:linear-gradient(150deg,rgba(74,158,224,.22),rgba(26,95,168,.07));
  border:1px solid rgba(74,158,224,.18);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -22px 26px -18px rgba(3,6,12,.8)}
.tc-media img{width:100%;height:100%;object-fit:cover}
.tc-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(4,7,14,.45));border-radius:inherit}
.tc-emoji{font-size:38px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
/* insignia dorada: el único dorado de la interfaz vive en el mérito */
.tc-badge{position:absolute;top:7px;left:7px;font-size:9.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#241503;background:linear-gradient(140deg,var(--gold2),var(--gold) 70%);
  padding:3px 8px;border-radius:999px;box-shadow:0 4px 14px -4px rgba(246,198,103,.5),inset 0 1px 0 rgba(255,255,255,.5)}
.tc-star{position:absolute;bottom:7px;right:7px;display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:700;color:#ffd166;background:rgba(5,9,16,.78);backdrop-filter:blur(4px);
  border:1px solid rgba(255,209,102,.3);padding:3px 7px;border-radius:999px}
.tc-star .di{width:11px;height:11px;fill:currentColor;stroke:none}
.tc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tc-coste{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:13.5px;color:var(--sky)}
.tc-coste .di{width:12px;height:12px}
.tc-votos{font-size:10.5px;color:var(--faint)}
/* chip de nota media (lista de locales y sheet) */
.chip.star{color:#ffd166;border-color:rgba(255,209,102,.3);background:rgba(255,209,102,.07)}
.chip.star .di{fill:currentColor;stroke:none}
/* estrellas para valorar (cartera): un toque = valorado */
.rate{display:flex;align-items:center;gap:3px;width:100%;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.rate .rl{font-size:11.5px;color:var(--muted);margin-right:5px}
/* objetivo táctil ≥44px de alto sin engordar el diseño: ::after expande el área */
.rate button{background:none;border:none;padding:3px 5px;color:var(--faint);position:relative;
  transition:transform .12s var(--ease),color .15s}
.rate button::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
.rate button:hover{color:#ffd166;transform:scale(1.18)}
.rate button:hover ~ button{color:var(--faint)}
.rate button .di{width:19px;height:19px}
.rate.hecho .di{width:15px;height:15px;color:rgba(148,184,230,.25)}
.rate.hecho .di.fill{color:#ffd166}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stat{background:linear-gradient(180deg,rgba(21,32,56,.5),rgba(13,21,39,.88) 70%);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 15px;
  box-shadow:var(--shadow-card)}
.stat .n{font-family:"Space Grotesk",sans-serif;font-size:27px;font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.stat .n.ok{color:var(--ok)}.stat .n.sky{color:var(--sky)}.stat .n.warn{color:var(--warn)}
.stat .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:3px;font-weight:600}

.row{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:none}
.tag{font-size:10px;font-weight:700;padding:3.5px 9px;border-radius:999px;text-transform:uppercase;
  letter-spacing:.05em;flex:0 0 auto}
.tag.ok{background:rgba(52,211,153,.14);color:var(--ok);border:1px solid rgba(52,211,153,.25)}
.tag.pend{background:rgba(251,191,36,.12);color:var(--warn);border:1px solid rgba(251,191,36,.22)}
.tag.bad{background:rgba(248,113,113,.12);color:var(--bad);border:1px solid rgba(248,113,113,.22)}
.tag.new{background:rgba(74,158,224,.14);color:var(--sky);border:1px solid rgba(74,158,224,.25)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---------- métodos de pago ---------- */
.metodo{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.metodo:first-child{border-top:none}
.metodo .mic{width:40px;height:40px;border-radius:12px;background:rgba(148,184,230,.07);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.metodo .del{margin-left:auto;background:none;border:none;color:var(--faint);font-size:15px;padding:7px;
  border-radius:8px;transition:color .2s}
.metodo .del:hover{color:var(--bad)}
.metodo .mkdef{background:none;border:1px solid var(--line2);color:var(--muted);font-size:11px;
  border-radius:999px;padding:4px 10px;transition:color .2s,border-color .2s}
.metodo .mkdef:hover{color:var(--sky);border-color:rgba(74,158,224,.4)}

/* ---------- movimientos ---------- */
.mov{display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line)}
.mov:first-of-type{border-top:none}
.mov .mc{width:36px;height:36px;border-radius:11px;background:rgba(148,184,230,.06);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 auto}
.mov .delta{margin-left:auto;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;
  flex:0 0 auto;font-variant-numeric:tabular-nums}
.mov .delta.pos{color:var(--ok)}.mov .delta.neg{color:var(--faint)}

/* ---------- campana de notificaciones ---------- */
.campana{position:relative}
.campana .badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--accent2,#e94db0);color:#fff;font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--bg)}
.notif{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--line)}
.notif:first-of-type{border-top:none}
.notif.no-leida{background:linear-gradient(90deg,rgba(74,158,224,.06),transparent);margin:0 -6px;padding-left:6px;padding-right:6px;border-radius:8px}
.notif .ni{width:34px;height:34px;border-radius:11px;background:rgba(148,184,230,.08);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.notif b{font-size:13.5px;font-family:"Space Grotesk",sans-serif}
.notif p{margin:2px 0 0;font-size:12.5px;color:var(--muted);line-height:1.4}
.notif .t{font-size:11px;color:var(--faint);margin-top:3px}

/* ---------- banners de estado ---------- */
.banner{border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.5;margin-bottom:12px;border:1px solid}
.banner b{font-family:"Space Grotesk",sans-serif}
.banner.pend{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.28);color:#fde68a}
.banner.bad{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.28);color:#fca5a5}
.banner.ok{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.28);color:#a7f3d0}

/* ---------- skeletons ---------- */
.skel{position:relative;overflow:hidden;background:rgba(148,184,230,.06);border-radius:9px;min-height:14px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(148,184,230,.09),transparent);
  animation:shimmer 1.4s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-row{display:flex;flex-direction:column;gap:9px;padding:6px 0}

/* ---------- estados vacíos ---------- */
.empty{text-align:center;padding:28px 16px}
.empty .eico{width:58px;height:58px;margin:0 auto 12px;border-radius:19px;display:flex;align-items:center;
  justify-content:center;font-size:26px;border:1px solid transparent;
  background:linear-gradient(150deg,rgba(36,66,116,.4),rgba(12,20,38,.85)) padding-box,var(--grad-border) border-box;
  box-shadow:0 14px 34px -16px rgba(59,140,226,.5)}
.empty b{font-family:"Space Grotesk",sans-serif;font-size:15px}
.empty p{color:var(--muted);font-size:13px;margin:5px 0 0}

/* ---------- sheet / modal / toast ---------- */
.scrim{position:absolute;inset:0;background:rgba(3,6,12,.6);backdrop-filter:blur(3px);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:50;background:var(--panel);
  border-radius:26px 26px 0 0;border-top:1px solid rgba(150,190,240,.24);
  padding:8px 18px calc(26px + env(safe-area-inset-bottom));transform:translateY(102%);
  transition:transform .32s var(--ease);max-height:86%;overflow-y:auto;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset,0 -30px 80px -24px rgba(0,0,0,.85)}
.sheet.on{transform:translateY(0)}
.grab{width:40px;height:4.5px;border-radius:99px;background:rgba(148,184,230,.22);margin:8px auto 15px}
/* cabecera fija del sheet: asa + botón ✕ siempre a mano aunque se haga scroll */
.sheet-head{position:sticky;top:0;z-index:6;margin:-8px -18px 0;padding:8px 18px 0;pointer-events:none;
  background:linear-gradient(180deg,var(--panel) 58%,rgba(14,21,36,0))}
.sheet-x{position:absolute;top:8px;right:12px;width:44px;height:44px;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;border-radius:14px;
  border:1px solid var(--line);background:rgba(14,21,36,.92);backdrop-filter:blur(8px);
  color:var(--muted);font-size:16px;line-height:1;
  transition:color .2s,border-color .2s,transform .12s var(--ease)}
.sheet-x:hover{color:var(--text);border-color:var(--line2)}
.sheet-x:active{transform:scale(.94)}
.modal{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  padding:22px;background:rgba(3,6,12,.72);backdrop-filter:blur(5px)}
.modal.on{display:flex}
.modal.on .ticket{animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
.ticket{background:#fff;color:#0b1a2e;border-radius:24px;width:100%;max-width:330px;overflow:hidden;
  text-align:center;box-shadow:var(--shadow-pop)}
.ticket .top{background:var(--grad);color:#fff;padding:19px 18px}
.ticket .top b{font-family:"Space Grotesk",sans-serif;font-size:17px;letter-spacing:-.02em}
.ticket .qr{padding:20px 20px 6px}
.ticket .qr img{width:172px;height:172px;border-radius:10px}
.ticket .code{font-family:ui-monospace,monospace;font-weight:700;font-size:20px;letter-spacing:1.5px;padding:2px 0 4px}
.ticket .fine{font-size:11.5px;color:#5a6b82;padding:0 22px 14px}
.ticket .dash{border-top:2px dashed #d5deea;margin:6px 20px;position:relative}
.ticket .dash::before,.ticket .dash::after{content:"";position:absolute;top:-9px;width:18px;height:18px;
  border-radius:50%;background:var(--bg)}
.ticket .dash::before{left:-30px}.ticket .dash::after{right:-30px}
.toast{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(16px);z-index:80;
  background:rgba(238,244,251,.97);color:#0b1a2e;font-size:13px;font-weight:600;padding:11px 18px;
  border-radius:13px;opacity:0;transition:.28s var(--ease);pointer-events:none;
  box-shadow:0 14px 40px -8px rgba(0,0,0,.5);max-width:85%;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============================================================
   ENTRADA PROFESIONAL (age-gate) — splash de marca
   ============================================================ */
#agegate .pad{padding-top:34px;padding-bottom:34px}
.splash-brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:6px}
.splash-logo{position:relative;width:104px;height:104px;display:flex;align-items:center;justify-content:center}
.splash-logo::before{content:"";position:absolute;inset:-34%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(84,168,238,.5),rgba(109,108,240,.12) 58%,transparent 74%);
  filter:blur(8px);animation:pulseGlow 4.5s ease-in-out infinite}
/* anillo de luz que orbita el diamante: primera impresión con drama */
.splash-logo::after{content:"";position:absolute;inset:-16px;border-radius:50%;
  background:conic-gradient(from 20deg,transparent 0 62%,rgba(130,195,255,.9) 74%,rgba(109,108,240,.5) 82%,transparent 90% 100%);
  -webkit-mask:radial-gradient(closest-side,transparent 78%,#000 82%,#000 92%,transparent 96%);
  mask:radial-gradient(closest-side,transparent 78%,#000 82%,#000 92%,transparent 96%);
  animation:orbit 7s linear infinite;opacity:.85}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
#agegate .hero-logo{width:100px;height:100px;position:relative;z-index:1;
  filter:drop-shadow(0 18px 44px rgba(74,158,224,.6));animation:float 5s ease-in-out infinite}
.splash-word{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:25px;letter-spacing:-.02em;position:relative;z-index:1}
.splash-word span{color:var(--accent)}
.splash-tag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:5px 13px;
  background:rgba(150,190,240,.05);backdrop-filter:blur(6px)}
#agegate h1{font-size:clamp(36px,10.5vw,50px);margin:26px 0 12px;letter-spacing:-.045em}
.value-row{display:flex;gap:9px;justify-content:center;margin:2px auto 26px;max-width:344px;
  animation:rise .5s var(--ease) .28s backwards}
/* tarjetas de cristal (glassmorphism) con borde luminoso */
.value{flex:1;position:relative;background:linear-gradient(160deg,rgba(148,184,230,.1),rgba(148,184,230,.02));
  border:1px solid rgba(148,184,230,.14);border-radius:16px;padding:15px 8px 13px;text-align:center;
  backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -14px rgba(0,0,0,.7)}
.value .vi{width:34px;height:34px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;color:var(--sky);background:radial-gradient(closest-side,rgba(74,158,224,.22),transparent);}
.value .vi svg{width:23px;height:23px;filter:drop-shadow(0 2px 8px rgba(74,158,224,.5))}
.value .vt{font-size:11px;color:#c7d6ea;line-height:1.3;font-weight:600;letter-spacing:-.01em}
#agegate .actions .btn{padding:16px}

/* fondo "luces de noche": manchas neón + grano + viñeta */
.night-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.night-bg .lz{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:drift 14s ease-in-out infinite}
.night-bg .l1{width:300px;height:300px;top:-80px;left:-70px;background:radial-gradient(closest-side,#4a9ee0,transparent);animation-delay:0s}
.night-bg .l2{width:280px;height:280px;top:6%;right:-90px;background:radial-gradient(closest-side,#8b5cf6,transparent);opacity:.40;animation-delay:-3s}
.night-bg .l3{width:320px;height:320px;bottom:2%;left:-100px;background:radial-gradient(closest-side,#6d6cf0,transparent);opacity:.4;animation-delay:-6s}
.night-bg .l4{width:260px;height:260px;bottom:-70px;right:-60px;background:radial-gradient(closest-side,#06b6d4,transparent);opacity:.38;animation-delay:-9s}
.night-bg .grain{position:absolute;inset:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.night-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(4,7,13,.85) 100%)}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(18px,-14px)}66%{transform:translate(-14px,12px)}}

/* botón principal con halo de neón (azul→índigo→cian, sin arcoíris) */
.glow-btn{position:relative;background:var(--grad);overflow:visible}
.glow-btn::before{content:"";position:absolute;inset:-3px;border-radius:18px;z-index:-1;
  background:linear-gradient(135deg,#4a9ee0,#6d6cf0 55%,#38bdf8);filter:blur(13px);opacity:.6;
  animation:breathe 4.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:.75}}

/* ============================================================
   ASISTENTE IA — chat
   ============================================================ */
.chat-fab{position:absolute;right:16px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:24;
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(220,236,251,.3);color:#fff;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 34px -8px rgba(59,140,226,.75),0 4px 14px -6px rgba(90,108,235,.6),0 0 0 6px rgba(74,158,224,.09);
  transition:transform .18s var(--ease)}
.chat-fab svg{width:25px;height:25px}
.chat-fab:active{transform:scale(.92)}
.chat-fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(74,158,224,.5);
  animation:fabPulse 2.6s ease-out infinite}
@keyframes fabPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.5);opacity:0}}
.chat-panel{position:absolute;left:0;right:0;bottom:0;z-index:70;height:90%;
  background:var(--bg);border-top:1px solid var(--line2);border-radius:24px 24px 0 0;
  display:flex;flex-direction:column;transform:translateY(101%);
  visibility:hidden;transition:transform .34s var(--ease),visibility 0s .34s;
  box-shadow:0 -22px 60px -20px rgba(0,0,0,.75)}
.chat-panel.on{transform:translateY(0);visibility:visible;transition:transform .34s var(--ease)}
.chat-head{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.chat-head .muted{display:flex;align-items:center;gap:5px}
.chat-head .muted::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chat-close{margin-left:auto;background:rgba(148,184,230,.07);border:1px solid var(--line);color:var(--muted);
  width:32px;height:32px;border-radius:10px;font-size:14px}
.chat-body{flex:1;min-height:0;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word;animation:rise .3s var(--ease)}
.msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px}
.msg.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:5px}
.msg.sys{align-self:center;background:transparent;color:var(--faint);font-size:12px;text-align:center;max-width:100%}
.typing{align-self:flex-start;display:flex;gap:4px;padding:13px 15px;background:var(--panel);border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:5px}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap}
.chat-suggest button{background:rgba(74,158,224,.08);border:1px solid var(--line2);color:var(--sky);
  font-size:12.5px;border-radius:999px;padding:8px 13px;text-align:left}
.chat-input{display:flex;gap:9px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);flex:0 0 auto}
.chat-input input{flex:1;background:var(--bg2);border:1px solid var(--line2);border-radius:14px;padding:12px 15px;color:var(--text);font-size:15px;outline:none}
.chat-input input:focus{border-color:var(--accent)}
.chat-send{width:46px;height:46px;flex:0 0 auto;border:none;border-radius:14px;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center}
.chat-send svg{width:20px;height:20px}
.chat-send:disabled{opacity:.5}

/* ---------- barra de progreso de grupos ---------- */
.gbar{height:8px;border-radius:99px;background:rgba(148,184,230,.1);overflow:hidden;margin-top:12px}
.gbar.big{height:11px}
.gbar-fill{height:100%;border-radius:99px;background:var(--grad);transition:width .5s var(--ease);
  box-shadow:0 0 14px rgba(74,158,224,.5)}

/* (v3) las 5 pestañas viven en la píldora flotante definida arriba */

/* ---------- Bienvenido (roles) rediseñado ---------- */
/* marca fija arriba, contenido en el centro óptico, legal anclado abajo */
#roles .pad{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
#roles .legal{margin-top:auto;padding-top:22px}
#roles .top-brand{margin-top:0;margin-bottom:auto;padding-bottom:26px}
#roles .top-brand{display:flex;align-items:center;gap:10px}
#roles .kicker{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
#roles h1{font-size:clamp(30px,8.5vw,40px);font-weight:700;line-height:1.05;margin:0 0 10px}
#roles .sub{color:rgba(238,244,251,.66);font-size:15px;margin:0 0 26px;max-width:330px}
.role-card{position:relative;display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  border:1px solid transparent;
  background:linear-gradient(135deg,rgba(23,36,64,.85),rgba(13,21,39,.95)) padding-box,var(--grad-border) border-box;
  border-radius:20px;padding:18px;margin-bottom:13px;color:var(--text);overflow:hidden;
  box-shadow:var(--shadow-card);transition:box-shadow .25s,transform .15s var(--ease),filter .2s}
.role-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--grad);
  box-shadow:0 0 18px rgba(90,140,235,.8)}
.role-card.b::before{background:linear-gradient(180deg,var(--vio),var(--accent));
  box-shadow:0 0 18px rgba(109,108,240,.7)}
.role-card:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:var(--shadow-card),0 16px 44px -16px rgba(59,140,226,.5)}
.role-card:active{transform:scale(.99)}
.role-card .rc-ic{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:28px;flex:0 0 auto;background:linear-gradient(150deg,rgba(74,158,224,.26),rgba(26,95,168,.09));
  border:1px solid rgba(74,158,224,.24);box-shadow:0 10px 26px -12px rgba(59,140,226,.7)}
.role-card b{font-family:"Space Grotesk",sans-serif;font-size:18px;display:block;letter-spacing:-.02em}
.role-card p{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}
.role-card .rc-go{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:rgba(74,158,224,.12);display:flex;align-items:center;justify-content:center;color:var(--sky);font-size:18px;
  transition:transform .2s var(--ease),background .2s}
.role-card:hover .rc-go{transform:translateX(3px);background:var(--grad);color:#fff}

/* ---------- FAQ / textarea (ayuda) ---------- */
.faq{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;background:var(--panel)}
.faq summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"＋";color:var(--sky);margin-right:8px;font-weight:700}
.faq[open] summary::before{content:"－"}
.faq p{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.field textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;
  color:var(--text);font-size:15px;outline:none;resize:vertical;font-family:inherit}
.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(74,158,224,.15)}

/* ---------- onboarding (carrusel de bienvenida) ---------- */
#onboarding{display:none;position:absolute;inset:0;z-index:1;flex-direction:column;overflow:hidden}
#onboarding.on{display:flex;animation:screenIn .34s var(--ease)}
.ob-skip-top{position:absolute;top:calc(16px + env(safe-area-inset-top));right:18px;z-index:3;background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;padding:6px 4px}
.ob-stage{position:relative;flex:1;min-height:0;z-index:1}
/* centro óptico: el contenido se sesga hacia arriba (padding-bottom) para no "flotar" sobre la nav */
.ob-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 34px 44px;opacity:0;transform:translateX(24px) scale(.98);transition:opacity .4s var(--ease),transform .45s var(--ease);pointer-events:none}
.ob-slide.on{opacity:1;transform:none;pointer-events:auto}
.ob-ico{width:150px;height:150px;border-radius:46px;display:flex;align-items:center;justify-content:center;font-size:62px;margin-bottom:34px;
  border:1px solid transparent;
  background:linear-gradient(150deg,rgba(40,72,124,.5),rgba(12,20,38,.9)) padding-box,var(--grad-border) border-box;
  box-shadow:0 30px 80px -20px rgba(45,125,210,.65),0 1px 0 rgba(255,255,255,.1) inset;position:relative}
.ob-ico::after{content:"";position:absolute;inset:-10px;border-radius:52px;
  background:radial-gradient(closest-side,rgba(94,176,240,.28),transparent);filter:blur(18px);z-index:-1}
.ob-slide.on .ob-ico{animation:obPop .55s var(--ease)}
@keyframes obPop{from{opacity:0;transform:scale(.7) translateY(10px)}to{opacity:1;transform:none}}
.ob-slide h2{font-size:30px;font-weight:700;letter-spacing:-.03em;margin-bottom:14px}
.ob-slide p{color:var(--muted);font-size:16px;max-width:310px;line-height:1.62}
.ob-nav{position:relative;z-index:2;padding:16px 26px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:20px;align-items:center}
.ob-dots{display:flex;gap:8px}
.ob-dot{width:8px;height:8px;border-radius:50%;background:rgba(148,184,230,.22);transition:width .35s var(--ease),background .35s}
.ob-dot.on{width:26px;background:var(--accent);box-shadow:0 0 12px rgba(74,158,224,.6)}
.ob-nav .btn{max-width:340px}

/* ============================================================
   SISTEMA DE ICONOS SVG (sustituye a los emojis de la interfaz)
   ============================================================ */
.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.2em;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.appbar .zona .ic{width:13px;height:13px;color:var(--accent)}
.appbar .out .ic{width:17px;height:17px}
.rc-ic svg{width:27px;height:27px;color:var(--sky)}
.ob-ico svg{width:66px;height:66px;color:var(--sky);filter:drop-shadow(0 6px 18px rgba(74,158,224,.45))}
.mov .mc svg{width:17px;height:17px;color:var(--sky)}
.mov .mc.pos{background:rgba(74,222,128,.09);border-color:rgba(74,222,128,.2)}
.mov .mc.pos svg{color:var(--ok)}
.mov .mc.neg{background:rgba(74,158,224,.09);border-color:rgba(74,158,224,.22)}
.notif .ni svg{width:16px;height:16px;color:var(--sky)}
.empty .eico svg{width:26px;height:26px;color:var(--sky)}
.metodo .mic svg{width:19px;height:19px;color:var(--sky)}
.welcome-card .wc-ic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.welcome-card .wc-ic svg{width:21px;height:21px;color:#fff}
.hd-ic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sky)}
.hd-ic svg{width:17px;height:17px}

/* ---------- tarjetas interactivas (accesibles) ---------- */
.card.tap{cursor:pointer;transition:transform .13s var(--ease),border-color .2s,background .2s}
.card.tap:hover{border-color:rgba(74,158,224,.4)}
.card.tap:active{transform:scale(.985)}
[role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- jerarquía de botones ---------- */
.btn.danger{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#fca5a5;box-shadow:none;font-weight:600}
.btn.danger:hover{background:rgba(248,113,113,.16)}
.metodo .del{width:32px;height:32px;border-radius:9px;border:1px solid transparent;display:flex;align-items:center;justify-content:center}
.metodo .del:hover{border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.08)}

/* ---------- despeje de píldora + FAB (nada queda tapado) ---------- */
#userApp .view.on .pad{padding-bottom:calc(158px + env(safe-area-inset-bottom))}
#v-mapa.view.on{padding-bottom:0!important}
/* el asistente acompaña donde se explora (Mapa y Locales); en Cartera, Grupos
   y Perfil taparía datos (estados de canje, botones de formulario) — fuera */
#userApp:has(#v-cartera.on) .chat-fab,
#userApp:has(#v-grupos.on) .chat-fab,
#userApp:has(#v-perfil.on) .chat-fab{display:none}

/* ============================================================
   VALORACIONES ⭐ — nota de los locales, simple y visual
   ============================================================ */
.stars{display:inline-flex;gap:1.5px;color:#fbbf24}
.stars svg{width:12.5px;height:12.5px;fill:currentColor;stroke:none}
.stars svg.off{fill:rgba(148,184,230,.22)}
.rate-badge{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:12.5px;color:#fbbf24;
  font-variant-numeric:tabular-nums}
.rate-badge .n-rev{font-weight:600;color:var(--muted)}
.rate-badge svg{width:13px;height:13px;fill:#fbbf24;stroke:none}
.chip.rate{color:#fbbf24;border-color:rgba(251,191,36,.28);background:rgba(251,191,36,.08);font-weight:700}
.chip.rate svg{width:11px;height:11px;fill:currentColor;stroke:none;vertical-align:-1.5px;margin-right:2px}
.chip.new{color:var(--sky);border-color:rgba(74,158,224,.3);background:rgba(74,158,224,.08);font-weight:700}

/* hoja de valorar: estrellas gigantes + etiquetas de una palabra */
.rate-stars{display:flex;justify-content:center;gap:8px;margin:16px 0 2px}
.rate-stars button{background:none;border:none;padding:5px;transition:transform .15s var(--ease)}
.rate-stars button:active{transform:scale(.85)}
.rate-stars svg{width:40px;height:40px;fill:rgba(148,184,230,.14);stroke:rgba(148,184,230,.35);stroke-width:1.2;transition:fill .15s,stroke .15s}
.rate-stars button.on svg{fill:#fbbf24;stroke:#f59e0b;filter:drop-shadow(0 5px 14px rgba(251,191,36,.4))}
.rate-word{text-align:center;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;min-height:22px;color:var(--sky)}
.rate-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.rate-tags .chip{cursor:pointer;padding:9px 14px;font-size:12.5px}
.rate-tags .chip.on{background:var(--grad);color:#fff;border-color:transparent}

/* ============================================================
   MEJORES EXPERIENCIAS 🏆 — el TOP de la ciudad, tipo podio
   ============================================================ */
.top-head{display:flex;align-items:baseline;justify-content:space-between;margin:18px 0 2px}
.top-head h2{font-size:20px}
.top-head .sub{font-size:12.5px;color:var(--muted)}
.top-scroll{display:flex;gap:11px;overflow-x:auto;margin:12px -20px 6px;padding:8px 20px 16px;
  scroll-snap-type:x mandatory;scroll-padding-left:20px;scrollbar-width:none;
  /* fundido en el borde derecho: se ve que hay más tarjetas deslizando */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent)}
.top-scroll::after{content:"";flex:0 0 12px} /* respiro al final del carrusel */
.top-scroll::-webkit-scrollbar{display:none}
.top-card{position:relative;flex:0 0 205px;scroll-snap-align:start;text-align:left;color:var(--text);
  background:linear-gradient(155deg,var(--panel2),var(--panel));border:1px solid var(--line2);
  border-radius:19px;padding:15px 14px 13px;box-shadow:var(--shadow-card);cursor:pointer;
  transition:transform .14s var(--ease),border-color .2s,box-shadow .25s}
.top-card:hover{border-color:rgba(74,158,224,.5);box-shadow:var(--shadow-card),0 14px 40px -16px rgba(59,140,226,.55)}
.top-card:active{transform:scale(.98)}
.top-card.n1{border-color:rgba(246,198,103,.45);background:linear-gradient(155deg,rgba(246,198,103,.10),var(--panel) 55%);
  box-shadow:var(--shadow-card),0 0 44px -18px rgba(246,198,103,.45)}
.top-rank{position:absolute;top:-9px;left:-7px;min-width:35px;height:35px;padding:0 8px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;gap:2px;
  font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:14.5px;color:#241503;
  background:linear-gradient(140deg,#fde68a,#f59e0b);border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 18px -6px rgba(245,158,11,.55)}
.top-rank.s2{background:linear-gradient(140deg,#eef2f7,#9fb0c4);color:#101a28}
.top-rank.s3{background:linear-gradient(140deg,#f3b58c,#b96a35);color:#2a1405}
.top-rank.rest{background:rgba(148,184,230,.15);color:var(--sky);border-color:var(--line2);box-shadow:none}
.top-card .t-ico{width:46px;height:46px;border-radius:14px;margin:6px 0 10px;overflow:hidden;flex:0 0 auto;
  background:linear-gradient(150deg,rgba(74,158,224,.2),rgba(26,95,168,.07));
  border:1px solid rgba(74,158,224,.18);display:flex;align-items:center;justify-content:center;font-size:23px}
.top-card .t-ico img{width:100%;height:100%;object-fit:cover}
.top-card b{font-family:"Space Grotesk",sans-serif;font-size:14.5px;display:block;line-height:1.25;
  letter-spacing:-.01em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.top-card .t-loc{font-size:11.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-card .t-meta{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;color:var(--muted)}
.top-card .t-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--line)}
.top-card .t-cost{font-family:"Space Grotesk",sans-serif;font-weight:700;color:var(--sky);font-size:14.5px}
.top-card .t-go{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}

/* ---------- confirmación de canje (paso previo, sin sustos) ---------- */
.confirm-sum{display:flex;align-items:center;gap:13px;background:var(--bg2);
  border:1px solid var(--line2);border-radius:16px;padding:14px;margin:12px 0}
.confirm-sum .cs-ico{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:22px;background:linear-gradient(150deg,rgba(74,158,224,.2),rgba(26,95,168,.07));
  border:1px solid rgba(74,158,224,.18)}
.confirm-line{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 2px;color:var(--muted)}
.confirm-line b{color:var(--text);font-variant-numeric:tabular-nums}
.confirm-line.total{border-top:1px solid var(--line);margin-top:4px;padding-top:11px}
.confirm-line.total b{font-family:"Space Grotesk",sans-serif;font-size:16px;color:var(--sky)}

/* ---------- estado "sin conexión" al arrancar (la sesión no se pierde) ---------- */
.offline{position:absolute;inset:0;z-index:75;display:flex;align-items:center;justify-content:center;
  padding:28px;background:var(--bg)} /* por debajo del toast (z80): los avisos se ven */
.offline-box{text-align:center;max-width:300px;width:100%}
.offline-box .eico{width:56px;height:56px;margin:0 auto 12px;border-radius:18px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(74,158,224,.14),rgba(26,95,168,.05));
  border:1px solid rgba(74,158,224,.14)}
.offline-box .eico .di{width:26px;height:26px;color:var(--sky)}
.offline-box b{font-family:"Space Grotesk",sans-serif;font-size:18px}
.offline-box p{color:var(--muted);font-size:13.5px;margin:6px 0 0;line-height:1.55}

/* ---------- justificantes de la solicitud (capturas que revisa el admin) ---------- */
.justs{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.justs:empty{display:none}
.just{position:relative;width:76px;height:76px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line2);background:var(--bg2)}
.just img{width:100%;height:100%;object-fit:cover;display:block}
.just button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  border:none;background:rgba(7,11,20,.82);color:#fff;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.just button::after{content:"";position:absolute;inset:-10px} /* área táctil 44px */

/* ============================================================
   v4 — WIDGETS NATIVOS ("que se sienta como una app cara")
   ============================================================ */

/* ---------- 1 · panel arrastrable sobre el mapa ---------- */
/* Hermano de #map: el transform vive en el PROPIO panel (regla Leaflet). */
.map-panel{position:absolute;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));
  height:min(88%,calc(100% - 86px));z-index:1100;display:flex;flex-direction:column;
  background:var(--glass);backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid rgba(150,190,240,.18);border-radius:24px;overflow:hidden;
  box-shadow:0 -18px 60px -18px rgba(0,0,0,.8),0 8px 30px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(calc(100% - 108px));will-change:transform}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .map-panel{background:rgba(8,13,25,.97)}}
.map-panel.snap{transition:transform .26s cubic-bezier(.25,.9,.3,1.02)}
.mp-grip{display:block;width:100%;flex:0 0 auto;background:none;border:none;color:var(--text);
  text-align:left;padding:3px 18px 11px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mp-grip:active{cursor:grabbing}
.mp-grip .grab{display:block;margin:8px auto 10px}
.mp-head{display:flex;align-items:baseline;gap:7px}
.mp-head b{font-family:"Space Grotesk",sans-serif;font-size:15.5px;letter-spacing:-.02em}
.mp-count{font-size:12px;color:var(--muted);font-weight:600}
.mp-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 12px 18px}
.mp-body .chips{margin:2px 0 12px}
.mp-body .card{margin-bottom:10px}
/* asomado: la lista no captura toques fantasma bajo el asa */
.map-panel:not(.abierto) .mp-body{pointer-events:none}
.map-panel.abierto .mp-body{pointer-events:auto}
/* controles del mapa despejados del panel asomado (nada queda tapado) */
.geo-btn{bottom:calc(262px + env(safe-area-inset-bottom))}
#userApp:has(#v-mapa.on) .chat-fab{bottom:calc(196px + env(safe-area-inset-bottom))}
.leaflet-control-attribution{margin:0 0 calc(190px + env(safe-area-inset-bottom)) 14px!important}
.leaflet-control-zoom{margin-bottom:calc(210px + env(safe-area-inset-bottom))!important}

/* ---------- 2 · tarjeta-cartera (membresía premium) ---------- */
.wallet{position:relative;overflow:hidden;width:100%;aspect-ratio:1.586;max-height:252px;
  border-radius:22px;padding:18px 20px;margin-bottom:10px;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid rgba(175,210,250,.32);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 7l9 9-9 23-9-23z' fill='none' stroke='%23ffffff' stroke-opacity='.075'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 88% -14%,rgba(140,205,255,.38),transparent 56%),
    radial-gradient(90% 70% at -8% 110%,rgba(109,108,240,.4),transparent 60%),
    linear-gradient(135deg,#2f74c0 0%,#1d4a90 48%,#3a3f9f 100%);
  box-shadow:0 26px 54px -18px rgba(18,58,128,.75),0 6px 18px -8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28)}
/* brillo diagonal: UNA pasada suave cada ~6,4 s */
.wl-shine{position:absolute;top:-60%;bottom:-60%;left:-28%;width:52%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.14) 50%,transparent);
  transform:translateX(-170%) rotate(8deg);animation:wlShine 6.4s ease-in-out infinite}
@keyframes wlShine{0%,72%{transform:translateX(-170%) rotate(8deg)}94%,100%{transform:translateX(430%) rotate(8deg)}}
.wl-top{display:flex;align-items:center;justify-content:space-between;position:relative}
.wl-brand{font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff}
.wl-brand span{color:#aee0ff}
.wl-tag{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(235,246,255,.85)}
.wl-tag .dot{width:5px;height:5px;border-radius:50%;background:#aee0ff;box-shadow:0 0 10px #aee0ff}
.wl-mid{display:flex;align-items:baseline;gap:9px;position:relative}
.wl-num{font-size:50px;color:#fff;
  background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#fff;
  filter:none;text-shadow:0 6px 24px rgba(6,20,44,.55)}
.wl-unit{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:rgba(235,246,255,.85)}
.wl-unit .di{width:14px;height:14px;color:#aee0ff}
.wl-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;position:relative}
.wl-name{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(6,20,44,.5);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-member{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(235,246,255,.62);margin-top:2px}
.wl-logo{width:30px;height:30px;flex:0 0 auto;opacity:.95;filter:drop-shadow(0 4px 12px rgba(6,20,44,.5))}
.wl-actions{display:flex;gap:8px;margin-bottom:12px}
.wl-actions .btn.sm{width:auto}

/* ---------- 3 · ticket con troquel ---------- */
.ticket.tk2{background:transparent;box-shadow:none;overflow:visible;border-radius:0;
  filter:drop-shadow(0 28px 50px rgba(0,0,0,.6))}
/* muescas semicirculares: máscara en 2 mitades (independiente de la altura del contenido) */
.tk2 .tk-a{background:var(--grad);color:#fff;border-radius:24px 24px 0 0;
  -webkit-mask:radial-gradient(circle 11px at 0 100%,transparent 10.5px,#000 11px) left top/51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%,transparent 10.5px,#000 11px) right top/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 100%,transparent 10.5px,#000 11px) left top/51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 100%,transparent 10.5px,#000 11px) right top/51% 100% no-repeat}
.tk2 .top{background:none;padding:20px 22px 6px}
.tk2 .tk-valid{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);padding:0 22px 17px}
.tk2 .tk-b{background:#eef3f9;border-radius:0 0 24px 24px;
  -webkit-mask:radial-gradient(circle 11px at 0 0,transparent 10.5px,#000 11px) left top/51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0,transparent 10.5px,#000 11px) right top/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 0,transparent 10.5px,#000 11px) left top/51% 100% no-repeat,
    radial-gradient(circle 11px at 100% 0,transparent 10.5px,#000 11px) right top/51% 100% no-repeat}
.tk-tear{position:relative;margin:0 24px;border-top:2px dashed #c3d0e0;height:0}
.tk-tear span{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:#eef3f9;
  color:#93a5bb;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:0 9px;white-space:nowrap}
/* el QR vive en su tarjeta blanca con sombra: da pena rasgarlo */
.tk2 .qr{width:198px;padding:13px;margin:22px auto 10px;background:#fff;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 32px -10px rgba(30,60,110,.3),0 3px 9px -3px rgba(30,60,110,.18)}
.tk2 .qr img{width:168px;height:168px;border-radius:8px}
.tk2 .code{font-size:23px;letter-spacing:2.5px;color:#12233c;padding:4px 0 6px}
.tk2 .fine{color:#5a6b82}

/* ---------- 4 · anillo de progreso + avatares (grupos) ---------- */
.gring{position:relative;flex:0 0 auto}
.gring svg{width:100%;height:100%;transform:rotate(-90deg);display:block}
.gring circle{fill:none;stroke-width:5;stroke-linecap:round}
.gring .bgc{stroke:rgba(148,184,230,.14)}
.gring .fg{stroke:url(#ringGrad);transition:stroke-dashoffset .9s var(--ease);
  filter:drop-shadow(0 0 5px rgba(90,140,235,.55))}
.gring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Space Grotesk",sans-serif;font-size:12px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gdetail{display:flex;align-items:center;gap:16px;margin:0 0 16px}
.gdetail .gring b{font-size:16.5px}
.avatar{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(145deg,hsl(var(--h,212) 72% 58%),hsl(calc(var(--h,212) + 42) 66% 40%));
  border:2px solid #0d1527;box-shadow:0 3px 8px -3px rgba(0,0,0,.55);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.avatar.big{width:62px;height:62px;font-size:21px;border-radius:22px;border-width:2.5px;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.avatar.mas{background:rgba(148,184,230,.16);color:var(--sky);font-size:9.5px;text-shadow:none}
.avstack{display:flex;align-items:center}
.avstack .avatar{margin-left:-9px}
.avstack .avatar:first-child{margin-left:0}
.avstack .avlbl{margin-left:8px;font-size:11.5px;color:var(--muted)}
.row .avatar{margin-right:2px}

/* ---------- 5 · confeti de canje ---------- */
.confetti{position:absolute;inset:0;pointer-events:none;z-index:85;overflow:hidden}
.confetti i{position:absolute;top:-14px;left:var(--x);width:var(--s);height:calc(var(--s)*.42);
  background:var(--c);border-radius:2px;opacity:0;
  animation:confFall 1.2s cubic-bezier(.22,.7,.45,1) var(--d) forwards}
@keyframes confFall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  85%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),640px) rotate(var(--rot))}}

/* ---------- 6 · pull-to-refresh ---------- */
#userApp .view{position:relative}
.ptr{position:absolute;top:-52px;left:50%;transform:translate(-50%,0);z-index:32;pointer-events:none}
.ptr.snap{transition:transform .3s var(--ease)}
.ptr-disc{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--line2);color:var(--sky);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.08)}
.ptr-disc .di{width:19px;height:19px;transition:transform .22s var(--ease),color .2s}
.ptr.ready .ptr-disc{border-color:rgba(130,195,255,.5)}
.ptr.ready .ptr-disc .di{transform:rotate(180deg) scale(1.12);color:#fff}
.ptr.on .ptr-disc .di{animation:ptrSpin .85s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* ---------- 7 · cabecera de perfil ---------- */
.phead{display:flex;align-items:center;gap:14px;margin:4px 0 18px}
.ph-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.chip.okc{color:var(--ok);border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.08);font-weight:700}
.chip.skyc{color:var(--sky);border-color:rgba(74,158,224,.32);background:rgba(74,158,224,.09);font-weight:700}
.chip.vioc{color:#c4b5fd;border-color:rgba(139,92,246,.34);background:rgba(139,92,246,.1);font-weight:700}

/* ---------- 8 · onboarding: dots clicables (área táctil ≥44px) ---------- */
.ob-dots button.ob-dot{appearance:none;-webkit-appearance:none;border:none;padding:0;margin:0;
  cursor:pointer;position:relative}
.ob-dots button.ob-dot::after{content:"";position:absolute;inset:-16px}

/* ---------- 9 · movimientos por día (cabecera sticky sutil) ---------- */
.mov-day{position:sticky;top:-1px;z-index:3;margin:0 -16px;padding:7px 16px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  background:linear-gradient(180deg,rgba(13,21,39,.97),rgba(13,21,39,.88));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mov-day:first-child{margin-top:-4px}
.mov-day + .mov{border-top:none}

/* movimiento reducido — cubre TODO lo anterior, también los efectos v4
   (panel, brillo de la wallet, confeti, anillos, count-up vía JS) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .wl-shine,.confetti{display:none !important}
}