/* ============================================================
   AMORA — Modern Dating App (Demo PWA)
   ============================================================ */
:root {
  --brand-1: #ff3b6b;
  --brand-2: #ff8a3b;
  --brand-3: #a855f7;
  --grad-brand: linear-gradient(135deg, #ff3b6b 0%, #ff8a3b 100%);
  --grad-brand-2: linear-gradient(135deg, #ff3b6b 0%, #a855f7 100%);
  --grad-hero: radial-gradient(1200px 700px at 10% -10%, rgba(255,59,107,.55), transparent 60%),
               radial-gradient(1000px 700px at 110% 10%, rgba(168,85,247,.35), transparent 60%),
               linear-gradient(180deg, #ffe4ec 0%, #ffd1de 100%);

  --bg: #ffe4ec;
  --bg-soft: #fff0f5;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --text: #14161d;
  --text-soft: #5b6270;
  --text-muted: #8a94a6;
  --border: #ececf3;
  --border-strong: #dcdfe9;
  --danger: #ef4444;
  --success: #10b981;
  --warning: #f59e0b;
  --info: #3b82f6;

  --shadow-sm: 0 1px 2px rgba(20, 22, 29, 0.05);
  --shadow-md: 0 6px 20px rgba(20, 22, 29, 0.08);
  --shadow-lg: 0 20px 60px rgba(20, 22, 29, 0.14);
  --shadow-brand: 0 12px 32px rgba(255, 59, 107, 0.35);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --tab-height: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --bg: #0b0c10;
  --bg-soft: #12141b;
  --surface: #171923;
  --surface-2: #1e2130;
  --text: #f0f2f7;
  --text-soft: #b7bdcc;
  --text-muted: #7c8394;
  --border: #262a36;
  --border-strong: #333747;
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --grad-hero: radial-gradient(1200px 500px at 10% -10%, rgba(255,59,107,.22), transparent 60%),
               radial-gradient(900px 500px at 110% 10%, rgba(168,85,247,.22), transparent 60%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Hide MuleRun / hosting overlays (precise selectors only) */
[class*="mulepage"], [id*="mulepage"],
[class*="mulerun"], [id*="mulerun"],
[data-mulerun],
a[href*="mulerun.com"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg) var(--grad-hero) fixed !important;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html { background: var(--bg) !important; }
body { background: var(--bg) var(--grad-hero) fixed !important; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ============================================================
   STAGE (desktop layout hosting the phone)
   ============================================================ */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: var(--bg) var(--grad-hero);
  background-attachment: fixed;
  overflow: hidden;
}

.stage-side {
  align-self: center;
  max-width: 380px;
  color: var(--text-soft);
}
.stage-side-right { justify-self: start; display: grid; gap: 16px; }
.stage-side-left { justify-self: end; }

.brand-block {
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.brand-logo { margin-bottom: 12px; }
.brand-name {
  font-size: 34px; margin: 0 0 6px; letter-spacing: -.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
}
.brand-tag { margin: 0 0 18px; color: var(--text-soft); }
.brand-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; font-size: 14px; }
.brand-points li span { color: var(--brand-1); margin-right: 8px; }
.brand-admin {
  display: inline-block; padding: 10px 14px; border-radius: 999px;
  background: var(--grad-brand); color: white; text-decoration: none;
  font-weight: 600; font-size: 13px; box-shadow: var(--shadow-brand);
  margin-top: 6px;
}
.admin-login-modal { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; }
.admin-login-modal .alm-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.admin-login-modal .alm-card { position: relative; background: var(--surface, #fff); color: var(--text, #111); border-radius: 16px; padding: 22px; width: min(400px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.admin-login-modal h3 { margin: 0 0 6px; }
.admin-login-modal .field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.admin-login-modal .field span { font-size: 12px; color: var(--text-soft, #666); }
.admin-login-modal .input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #ddd); background: var(--surface, #fff); color: inherit; }
.admin-login-modal .alm-err { color: #d32f2f; min-height: 18px; margin: 4px 0; }
.admin-login-modal .alm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.admin-login-modal .btn { padding: 10px 14px; border-radius: 999px; border: 0; font-weight: 600; cursor: pointer; }
.admin-login-modal .btn.ghost { background: transparent; border: 1px solid var(--border, #ddd); color: inherit; }
.admin-login-modal .btn.primary { background: var(--grad-brand); color: #fff; }

.welcome-closed {
  text-align: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,59,107,.18), rgba(168,85,247,.18));
  border: 1px solid rgba(255,59,107,.35);
  backdrop-filter: blur(6px);
  color: var(--text, #fff);
  margin: 6px 0;
}
.welcome-closed strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--brand-1, #ff3b6b);
  letter-spacing: .01em;
}
.welcome-closed p {
  margin: 0;
  font-size: 12.5px;
  opacity: .95;
  color: var(--text, #fff);
  font-weight: 500;
}
[data-theme="dark"] .welcome-closed { color: #f0f2f7; }
[data-theme="dark"] .welcome-closed p { color: #d4d8e2; }
[data-theme="light"] .welcome-closed { color: #14161d; }
[data-theme="light"] .welcome-closed p { color: #3a3f4a; }

/* Refuerzo global de negritas dentro de la pantalla de bienvenida:
   asegura que <strong>, <b>, títulos y elementos con clase típica de énfasis
   se rendericen visualmente en negrita, aunque haya reglas de peso previas. */
.screen-hero strong,
.screen-hero b,
.screen-hero h1,
.screen-hero h2,
.screen-hero h3,
.screen-hero h4 { font-weight: 800 !important; }
.welcome-steps-title { font-weight: 700 !important; }
.welcome-step-h { font-weight: 700 !important; }
.welcome-badge { font-weight: 600 !important; }
.brand-name { font-weight: 900 !important; }
.brand-points li { font-weight: 500; }
.mock-title { font-weight: 700 !important; }
.mock-badge { font-weight: 700 !important; }

.pay-methods { padding: 12px 16px; }
.pay-methods-title { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.pay-methods-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pay-method { padding: 6px 12px; border-radius: 999px; background: var(--surface-2, rgba(0,0,0,.05)); font-size: 13px; font-weight: 600; border: 1px solid var(--border, rgba(0,0,0,.06)); }

.mock-card {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); max-width: 300px;
}
.mock-badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,59,107,.12); color: var(--brand-1);
  font-size: 12px; font-weight: 700; margin-bottom: 10px;
}
.mock-title { font-weight: 700; font-size: 15px; }
.mock-sub { color: var(--text-soft); font-size: 13px; margin-top: 4px; }
.mock-avatars { display: flex; margin-top: 10px; }
.mock-avatars span {
  width: 34px; height: 34px; border-radius: 50%;
  background: #ccc center/cover;
  border: 2px solid var(--surface);
  margin-left: -8px;
}
.mock-avatars span:first-child { margin-left: 0; }

/* ============================================================
   PHONE FRAME
   ============================================================ */
.phone {
  --phone-w: 400px;
  --phone-h: 820px;
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  /* V441: NO limitamos la altura al viewport. El escalado se hace por JS con
     transform: scale() → el marco tiene SIEMPRE 400×820 lógicos y el JS lo
     visualmente escala para que quepa. Si dejamos max-height: 100dvh el
     marco se comprime al hacer zoom y se rompe el layout interior. */
  background: var(--surface);
  border-radius: 44px;
  box-shadow:
    0 0 0 12px #111318,
    0 0 0 13px #2a2d38,
    var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  justify-self: center;
  isolation: isolate;
  will-change: transform;
}
/* V441: Ya NO cambiamos las dimensiones del .phone según viewport.
   El marco tiene SIEMPRE 400×820 CSS-px, y un script mide el hueco y
   aplica transform: scale() para que quepa. El contenido interno nunca
   se recalcula al hacer zoom, es siempre el mismo diseño. */
@media (hover: hover) and (pointer: fine) {
  .phone .app-viewport::after { display: none !important; }
  .phone .app-viewport { overflow: hidden !important; }
  .theme-toggle { display: none !important; }
  .stage-side-left .theme-card { display: flex; }
}

/* Tarjeta de cambio de tema en el lateral izquierdo (solo escritorio). */
.theme-card {
  display: none;
  width: 100%;
  margin-top: 14px;
  padding: 14px 16px;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.theme-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,59,107,.35);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.theme-card-ic {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(255,59,107,.25);
}
.theme-card-txt {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.theme-card-txt strong { font-size: 14px; font-weight: 700; color: var(--text); }
.theme-card-txt small { font-size: 12px; color: var(--text-soft); }
.theme-card-chev { color: var(--text-soft); flex: 0 0 auto; display: inline-flex; }
.phone-notch {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; background: #111318;
  border-radius: 20px; z-index: 10;
}
.phone-status {
  height: 42px; padding: 0 26px 0 30px;
  display: flex; align-items: flex-end; justify-content: space-between;
  color: var(--text); font-weight: 600; font-size: 13px;
  padding-bottom: 6px;
  position: relative; z-index: 5;
}
.ps-icons { display: inline-flex; gap: 6px; align-items: center; }
.ps-battery {
  width: 22px; height: 10px; border: 1.4px solid currentColor;
  border-radius: 3px; position: relative; padding: 1.5px;
}
.ps-battery::after {
  content: ""; position: absolute; right: -3px; top: 3px;
  width: 2px; height: 4px; background: currentColor; border-radius: 1px;
}
.ps-battery span {
  display: block; height: 100%; width: 70%; background: currentColor; border-radius: 1px;
}
.phone-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 5px; background: rgba(0,0,0,.35); border-radius: 3px;
  z-index: 10;
}
[data-theme="dark"] .phone-home { background: rgba(255,255,255,.35); }

/* App viewport */
.app-viewport {
  flex: 1; min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Tab bar */
.tabbar {
  position: relative;
  height: var(--tab-height);
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
  background: var(--tab-bg, var(--surface));
  border-top: 1px solid var(--border);
  display: grid; grid-template-columns: repeat(6, 1fr);
  z-index: 5;
}
.tab svg { width: 20px; height: 20px; }
.tab span { font-size: 10px; }
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) { .tab span { font-size: 9.5px; } .tab svg { width: 18px; height: 18px; } }
.tab {
  border: 0; background: transparent;
  color: var(--tab-inactive, var(--text-muted));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 0 4px;
  position: relative;
  transition: color .18s;
}
.tab span { font-size: 10.5px; font-weight: 600; }
.tab.active { color: var(--tab-active, var(--brand-1)); }
.tab-badge {
  position: absolute;
  top: 6px; right: calc(50% - 22px);
  background: var(--brand-1); color: white;
  min-width: 16px; height: 16px; border-radius: 999px;
  font-size: 10px; font-weight: 700; font-style: normal;
  padding: 0 4px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  animation: fadeIn .35s cubic-bezier(.2,.7,.2,1);
}
/* Per-section font & text color overrides (set by applyDesign) */
.screen[data-section="welcome"] { font-family: var(--font-welcome, var(--font)); color: var(--text-welcome, inherit); }
.screen[data-section="discover"] { font-family: var(--font-discover, var(--font)); color: var(--text-discover, var(--text)); }
.screen[data-section="search"] { font-family: var(--font-search, var(--font)); color: var(--text-search, var(--text)); }
.screen[data-section="nearby"] { font-family: var(--font-search, var(--font)); color: var(--text-search, var(--text)); }
.screen[data-section="likes"] { font-family: var(--font-likes, var(--font)); color: var(--text-likes, var(--text)); }
.screen[data-section="chats"] { font-family: var(--font-chats, var(--font)); color: var(--text-chats, var(--text)); }
.screen[data-section="profile"] { font-family: var(--font-profile, var(--font)); color: var(--text-profile, var(--text)); }
.tabbar { font-family: var(--font-tabbar, var(--font)); }
/* Ensure children pick the section text color */
.screen[data-section="discover"] h1, .screen[data-section="discover"] h2, .screen[data-section="discover"] h3, .screen[data-section="discover"] p, .screen[data-section="discover"] span, .screen[data-section="discover"] small { color: inherit; }
.screen[data-section="search"] h1, .screen[data-section="search"] h2, .screen[data-section="search"] h3, .screen[data-section="search"] p, .screen[data-section="search"] span, .screen[data-section="search"] small { color: inherit; }
.screen[data-section="likes"] h1, .screen[data-section="likes"] h2, .screen[data-section="likes"] h3, .screen[data-section="likes"] p, .screen[data-section="likes"] span, .screen[data-section="likes"] small { color: inherit; }
.screen[data-section="chats"] h1, .screen[data-section="chats"] h2, .screen[data-section="chats"] h3, .screen[data-section="chats"] p, .screen[data-section="chats"] span, .screen[data-section="chats"] small { color: inherit; }
.screen[data-section="profile"] h1, .screen[data-section="profile"] h2, .screen[data-section="profile"] h3, .screen[data-section="profile"] p, .screen[data-section="profile"] span, .screen[data-section="profile"] small { color: inherit; }
.screen[data-section="welcome"] .welcome-title { color: var(--text-hero-title, #fff); }
.screen[data-section="welcome"] .welcome-sub { color: var(--text-hero-sub, rgba(255,255,255,.9)); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.screen-hero {
  min-height: 100%;
  background: var(--grad-brand);
  color: white;
  padding: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  position: relative;
}
.screen-hero.hero-solid { background: var(--hero-solid, var(--surface)); color: var(--text); }
.screen-hero.hero-solid::before, .screen-hero.hero-solid::after { display: none; }
/* Light hero background (any style): make controls readable */
.screen-hero.hero-light { color: #14161d; }
.screen-hero.hero-light .welcome-title { color: #14161d; }
.screen-hero.hero-light .welcome-sub { color: #5b6270; opacity: 1; }
.screen-hero.hero-light .btn-primary { background: #fff; color: var(--brand-1); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.screen-hero.hero-light .btn-ghost { background: #fff; color: #14161d; border: 1.5px solid rgba(0,0,0,.12); backdrop-filter: none; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.screen-hero.hero-light .oauth-btn { background: #fff; color: #14161d; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.screen-hero.hero-light .welcome-terms { color: #5b6270; opacity: 1; }
.screen-hero.hero-radial { background: radial-gradient(600px 400px at 50% 15%, color-mix(in srgb, var(--brand-1) 40%, transparent), transparent 60%), var(--surface); color: var(--text); }
.screen-hero.hero-radial::before, .screen-hero.hero-radial::after { display: none; }
.screen-hero.hero-image { background-size: cover; background-position: center; color: #fff; }
.screen-hero.hero-image::before, .screen-hero.hero-image::after { display: none; }
.screen-hero::before {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(255,255,255,.14); filter: blur(20px);
}
.screen-hero::after {
  content: ""; position: absolute; inset: auto auto -30% -20%;
  width: 380px; height: 380px; border-radius: 50%;
  background: rgba(255,255,255,.1); filter: blur(20px);
}

/* -------- Welcome -------- */
.welcome-logo {
  margin-top: 42px; margin-bottom: 20px;
  display: flex; justify-content: center; align-items: center;
  position: relative; z-index: 1;
}
.welcome-heart {
  width: var(--logo-size, 88px); height: var(--logo-size, 88px);
  background: var(--logo-bg, rgba(255,255,255,.14));
  border-radius: var(--logo-radius, 22px);
  display: grid; place-items: center;
  overflow: hidden;
  backdrop-filter: blur(6px);
  animation: pop .8s cubic-bezier(.2,.9,.2,1);
  color: var(--logo-color, #fff);
}
.welcome-heart.logo-transparent {
  background: transparent;
  backdrop-filter: none;
  overflow: visible;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
.welcome-heart img { display:block; width:100%; height:100%; object-fit: contain; }
@keyframes pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.welcome-title { text-align: center; margin: 18px 0 6px; font-size: 40px; font-weight: 800; letter-spacing: -.02em; position: relative; z-index: 1;}
.welcome-sub { text-align: center; opacity: .92; margin: 12px 0 24px; font-size: 15px; position: relative; z-index: 1;}
.welcome-cta {
  display: grid; gap: 10px; margin-top: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px) + 24px);
  position: relative; z-index: 1;
}
.btn {
  border: 0; border-radius: 999px; height: 52px;
  font-size: 15px; font-weight: 700; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .1s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: white; color: var(--brand-1); box-shadow: var(--shadow-sm); }
.btn-ghost { background: rgba(255,255,255,.95); color: #14161d; border: 1.5px solid rgba(0,0,0,.08); backdrop-filter: none; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.btn-brand { background: var(--grad-brand); color: white; box-shadow: var(--shadow-brand); }
/* En modo claro, el botón "Enviar código" del registro se lee mejor con
   texto negro en negrita sobre el degradado brand. En oscuro se mantiene
   el blanco por contraste. */
.btn-register-submit { color: #0b0c10; font-weight: 800; letter-spacing: .01em; }
[data-theme="dark"] .btn-register-submit { color: #fff; font-weight: 700; }
.btn-outline { background: transparent; color: var(--text); border: 1.5px solid var(--border-strong); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 13px; }
.btn-danger { background: #fee2e2; color: var(--danger); }
[data-theme="dark"] .btn-danger { background: rgba(239,68,68,.15); color: #fca5a5;}

.welcome-or {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; margin: 6px 0 4px; position: relative; z-index: 1;
}
.welcome-or-line { height: 1px; background: rgba(255,255,255,.35); display: block; }
.welcome-or-text { font-size: 11.5px; opacity: .85; letter-spacing: .04em; text-transform: uppercase; }
.screen-hero.hero-light .welcome-or-line { background: rgba(0,0,0,.12); }
.screen-hero.hero-light .welcome-or-text { color: #5b6270; opacity: 1; }

.welcome-oauth {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 6px;
}
.oauth-btn {
  height: 52px; border-radius: 16px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transition: transform .1s, box-shadow .2s, filter .2s;
  cursor: pointer;
}
.oauth-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.16); filter: brightness(1.03); }
.oauth-btn:active { transform: scale(.97); }
.oauth-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.oauth-btn span { display: inline-block; }

.oauth-google { background: #fff; color: #14161d; border: 1px solid rgba(0,0,0,.1); }
.oauth-apple { background: #000; color: #fff; }
.oauth-facebook { background: #1877F2; color: #fff; }
.oauth-facebook svg path { fill: #fff; }

/* On very narrow screens the label wraps ugly — hide it on <=380px and show icon only.
   V441: solo aplicamos en móviles reales (touch) para que el zoom del navegador
   en escritorio NO oculte las etiquetas dentro del marco del teléfono. */
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .oauth-btn { gap: 0; font-size: 0; height: 52px; }
  .oauth-btn span { display: none; }
  .oauth-btn svg { width: 22px; height: 22px; }
}
.welcome-terms { font-size: 11.5px; opacity: .8; text-align: center; margin-top: 12px; position: relative; z-index: 1;}
.welcome-terms a { text-decoration: underline; }
.welcome-terms-link { color: inherit; text-decoration: underline; cursor: pointer; }
.welcome-terms-link:hover { opacity: .8; }
.welcome-rules-line { margin-top: 6px; opacity: .95; font-weight: 600; }
.welcome-rules-line .welcome-terms-link { color: #ff3b6b; text-decoration: underline; }
.welcome-admin-link { display: block; text-align: center; margin-top: 14px; font-size: 11px; opacity: .55; color: inherit; text-decoration: none; letter-spacing: .04em; position: relative; z-index: 1; }
.welcome-admin-link:hover { opacity: .9; text-decoration: underline; }

/* -------- Generic screen with topbar -------- */
.topbar {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: 42px 1fr 42px; align-items: center;
  height: 56px; padding: 0 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topbar-title { text-align: center; font-weight: 700; font-size: 16px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; background: transparent;
  border: 0; color: var(--text); display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--surface-2); }

.form {
  padding: 24px 20px 24px;
  display: grid; gap: 14px;
}
/* Formulario de registro-email: más compacto para que quepa el aviso KYC
   + email + los 5 consentimientos + botón sin scroll en 420×900. */
.screen-register-email .form { padding: 14px 18px 20px; gap: 10px; }
.form-hero { margin-bottom: 4px; }
.form-hero h2 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.01em; }
.form-hero p { margin: 0; color: var(--text-soft); font-size: 14px; }
.screen-register-email .form-hero h2 { font-size: 20px; margin: 0 0 2px; }
.screen-register-email .form-hero p { font-size: 12.5px; line-height: 1.35; }
.screen-register-email .field label { font-size: 10.5px; }
.screen-register-email .field input { height: 42px; font-size: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--text-soft); letter-spacing: .03em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  height: 50px; border-radius: 14px; border: 1.4px solid var(--border-strong);
  padding: 0 14px; font-size: 15px; color: var(--text); background: var(--surface);
  transition: border .15s, box-shadow .15s;
}
.field textarea { height: 100px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-1);
  box-shadow: 0 0 0 4px rgba(255,59,107,.14);
}
.field .hint { font-size: 12px; color: var(--text-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Verification code inputs — compact */
.otp {
  display: flex; justify-content: center; gap: 8px; max-width: 320px; margin: 0 auto;
}
.otp input {
  width: 42px; height: 48px; text-align: center; font-size: 18px; font-weight: 700;
  padding: 0; border-radius: 10px; border: 1.4px solid var(--border-strong);
  background: var(--surface); color: var(--text);
}
@media (max-width: 360px) and ((pointer: coarse) or (hover: none)) {
  .otp { gap: 6px; }
  .otp input { width: 36px; height: 44px; font-size: 16px; }
}
.otp input:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 4px rgba(255,59,107,.14); }
.otp-hint { color: var(--text-soft); font-size: 13px; text-align: center; margin: 8px 0 0; }
.otp-hint b { color: var(--text); }
.otp-demo-box {
  margin-top: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,59,107,.08), rgba(255,138,59,.08));
  border: 1.5px dashed var(--brand-1);
  display: grid; gap: 8px; text-align: center;
}
.otp-demo-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--brand-1); text-transform: uppercase; }
.otp-demo-hint { font-size: 12.5px; color: var(--text-soft); margin: 0; }
.otp-demo-code { font-size: 28px; font-weight: 800; letter-spacing: 8px; color: var(--text); font-family: "SF Mono", Menlo, Consolas, monospace; }
.otp-demo-box .btn { justify-self: center; }
.link-btn { background: transparent; border: 0; color: var(--brand-1); font-weight: 700; padding: 0; }
.link-btn:disabled { color: var(--text-muted); }

/* ---------- Aviso previo de verificación de identidad (KYC) ---------- */
.kyc-notice {
  position: relative;
  margin: 2px 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}
.kyc-notice::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: 14px;
  background: var(--grad-brand-2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
}
.kyc-notice-ic {
  grid-row: 1 / 3;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--grad-brand-2);
  color: #fff;
  box-shadow: 0 4px 10px rgba(168,85,247,.3);
  align-self: start;
  margin-top: 2px;
}
.kyc-notice-ic svg { width: 22px; height: 22px; }
.kyc-notice-h {
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.kyc-notice-h .kyc-notice-pill {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(16,185,129,.15);
  color: #059669;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-theme="dark"] .kyc-notice-h .kyc-notice-pill { color: #34d399; background: rgba(52,211,153,.16); }
.kyc-notice-sub {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--text-soft);
}
.kyc-notice-sub b { color: var(--text); font-weight: 700; }
.kyc-notice-steps {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text);
}
.kyc-notice-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  white-space: nowrap;
}
.kyc-notice-step-n {
  width: 18px; height: 18px;
  border-radius: 6px;
  display: inline-grid; place-items: center;
  background: var(--grad-brand);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
}
.kyc-notice-sep { color: var(--text-muted); font-size: 9px; }
.kyc-notice-docs {
  grid-column: 1 / 3;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-soft);
  font-style: italic;
  margin-top: -2px;
}
[data-theme="dark"] .kyc-notice-docs { color: #d4dae8; }
.kyc-notice-more {
  grid-column: 1 / 3;
  justify-self: end;
  background: transparent;
  border: 0;
  color: var(--brand-1);
  font-weight: 800;
  font-size: 11.5px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-top: 2px;
}
.kyc-notice-more:hover { color: var(--brand-3); }

/* ---------- Bloque de consentimientos RGPD ---------- */
.legal-block {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,59,107,.05), rgba(255,138,59,.05));
  border: 1px solid rgba(255,59,107,.14);
  display: grid; gap: 6px;
}
.legal-block h4 {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--brand-1);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.legal-block-compact { margin: 8px 0; padding: 10px 12px; }
.legal-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 12px;
  line-height: 1.32;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.legal-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--brand-1);
  flex: 0 0 auto;
}
.legal-check .muted { color: var(--text-soft); font-size: 12.5px; }
.legal-link {
  color: var(--brand-1);
  text-decoration: underline;
  font-weight: 600;
}
.legal-link:hover { text-decoration: underline; }

/* ---------- KYC / verificación de edad ---------- */
.kyc-steps { display: grid; gap: 12px; margin: 6px 0 4px; }
.kyc-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,59,107,.06), rgba(255,138,59,.06));
  border: 1px solid rgba(255,59,107,.14);
}
.kyc-step-emoji { font-size: 26px; text-align: center; }
.kyc-step h4 { margin: 0 0 2px; font-size: 15px; }
.kyc-step p  { margin: 0; color: var(--text-soft); font-size: 13px; }
.kyc-legal   { font-size: 12px; color: var(--text-soft); margin: 6px 0 0; text-align: center; }
.kyc-preview {
  width: 100%; aspect-ratio: 16/10; border-radius: 14px;
  background: var(--surface-alt, #f5f6fa);
  border: 1.5px dashed rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; overflow: hidden;
}
.kyc-preview img, .kyc-preview video { width: 100%; height: 100%; object-fit: cover; }
.kyc-preview-round { aspect-ratio: 1/1; max-width: 220px; margin: 0 auto; border-radius: 50%; }
.kyc-status  { font-size: 13px; color: var(--text-soft); text-align: center; margin: 4px 0; }
.kyc-final   { text-align: center; padding: 12px 0; }
.kyc-final-emoji { font-size: 56px; margin-bottom: 4px; }
.kyc-final h2 { margin: 6px 0; }
.kyc-final p  { color: var(--text-soft); margin: 0 0 12px; }

/* Welcome language selector.
   Placed on the LEFT of the screen so it doesn't fight with the theme toggle,
   and pushed down slightly so it's not glued to the top edge / logo. */
.welcome-lang {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 18px;
  right: auto;
  z-index: 210;
}
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .welcome-lang {
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 12px;
  }
}
/* Add breathing room above the logo so the language chip doesn't press onto it. */
.screen-hero .welcome-logo { margin-top: 56px; }
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .screen-hero .welcome-logo { margin-top: 48px; }
}
/* When rendered inside the desktop phone frame, cap the logo so it never pushes
   the CTA / OAuth buttons off the visible area. */
@media (min-width: 901px) and (hover: hover) {
  .phone .screen-hero {
    padding: 6px 18px 14px;
    min-height: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
  .phone .welcome-foot { margin-top: auto !important; }
  .phone .screen-hero .welcome-logo { margin-top: 14px; margin-bottom: 0; }
  .phone .welcome-heart,
  .phone .welcome-heart.logo-transparent {
    max-width: 172px;
    max-height: 172px;
  }
  .phone .welcome-sub { margin: 8px 0 10px; font-size: 13.5px; }
  .phone .welcome-cta { gap: 8px; padding-bottom: 4px; margin-top: 6px; }
  .phone .btn { height: 44px; font-size: 14.5px; }
  .phone .welcome-or { margin: 6px 0 4px; font-size: 11px; }
  .phone .welcome-oauth { gap: 8px; }
  .phone .oauth-btn { height: 42px; font-size: 13px; }
  .phone .oauth-btn span { font-size: 13px; }
  .phone .welcome-terms { margin-top: 4px; font-size: 10.5px; line-height: 1.4; }
  /* Chip idioma más compacto en escritorio */
  .phone .welcome-lang { top: 8px; left: 10px; }
  .phone .welcome-lang-btn { padding: 5px 10px; font-size: 11.5px; }

  /* Bloque inferior más generoso — usa el espacio disponible. */
  .phone .welcome-below {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    margin-top: 4px;
    margin-bottom: 6px;
  }
  .phone .welcome-steps-title {
    font-size: 11.5px; margin: 4px 0 4px;
    letter-spacing: .06em; font-weight: 700;
  }
  .phone .welcome-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .phone .welcome-step { padding: 9px 12px; gap: 10px; border-radius: 12px; }
  .phone .welcome-step-ic { width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; border-radius: 8px; }
  .phone .welcome-step-h { font-size: 13px; margin: 0; }
  .phone .welcome-step-p { font-size: 11.5px; line-height: 1.3; margin: 0; }
  .phone .welcome-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    margin-top: 4px;
    padding: 0 4px;
    justify-items: stretch;
  }
  .phone .welcome-badge {
    font-size: 11px; padding: 7px 12px; border-radius: 999px;
    min-width: 0; justify-content: center;
    white-space: nowrap;
    width: 100%;
  }
  .phone .welcome-foot  {
    font-size: 9.5px;
    text-align: center;
    margin: 4px 0 12px;
    line-height: 1.6;
    padding: 0 6px;
    /* El pie ahora tiene 6 enlaces (Ayuda, FAQ, Normas, Términos, Privacidad,
       Contacto). Aseguramos que puede envolver a 2 líneas si no cabe en 1. */
    white-space: normal;
    word-break: normal;
  }
  .phone .welcome-foot a { margin: 0 2px; display: inline-block; white-space: nowrap; }
  /* Testimonio + stats ocupan mucho vertical: los ocultamos dentro del marco
     de escritorio para que "Cómo funciona" y el pie de enlaces sí quepan. */
  .phone .welcome-quote,
  .phone .welcome-stats { display: none !important; }

  /* Sin fade — todo cabe dentro del frame. */
  .phone .app-viewport::after { display: none !important; }
}
.welcome-lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--text, #fff);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .15s, transform .1s;
}
.welcome-lang-btn:hover { background: rgba(255,255,255,.14); }
.welcome-lang-btn:active { transform: scale(.96); }
.welcome-lang-btn .wl-flag {
  display: inline-block;
  width: 22px; height: 16px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.welcome-lang-btn .wl-flag svg { display: block; width: 100%; height: 100%; }
.welcome-lang-btn .wl-code { letter-spacing: .06em; }
.welcome-lang-btn .wl-caret { display: inline-flex; opacity: .8; }
[data-theme="light"] .welcome-lang-btn {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: #222;
}
[data-theme="light"] .welcome-lang-btn:hover { background: rgba(0,0,0,.1); }

.welcome-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 200px;
  background: rgba(20,10,35,.95);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: wlPop .15s ease;
}
[data-theme="light"] .welcome-lang-menu {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}
@keyframes wlPop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.welcome-lang-menu .wl-item {
  display: grid;
  grid-template-columns: 24px 1fr 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 14px; font-weight: 600;
  text-align: left;
  cursor: pointer;
}
[data-theme="light"] .welcome-lang-menu .wl-item { color: #222; }
.welcome-lang-menu .wl-item:hover { background: rgba(255,255,255,.08); }
[data-theme="light"] .welcome-lang-menu .wl-item:hover { background: rgba(0,0,0,.06); }
.welcome-lang-menu .wl-item.current {
  background: linear-gradient(90deg, rgba(255,59,107,.2), rgba(255,138,59,.15));
}
.welcome-lang-menu .wl-flag {
  display: inline-block;
  width: 24px; height: 17px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.welcome-lang-menu .wl-flag svg { display: block; width: 100%; height: 100%; }
.welcome-lang-menu .wl-check { color: var(--brand-1, #ff3b6b); font-weight: 800; text-align: right; }

/* Zone selection */
.zone-options { display: grid; gap: 12px; margin-top: 8px; }
.zone-card {
  border-radius: var(--radius); border: 1.4px solid var(--border-strong);
  padding: 18px; background: var(--surface);
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px;
  transition: transform .1s, border-color .2s, box-shadow .2s;
}
.zone-card.selected { border-color: var(--brand-1); box-shadow: 0 0 0 4px rgba(255,59,107,.12); }
.zone-emoji {
  width: 54px; height: 54px; border-radius: 16px; background: var(--surface-2);
  display: grid; place-items: center; font-size: 26px;
}
.zone-card h4 { margin: 0 0 2px; font-size: 15px; }
.zone-card p { margin: 0; color: var(--text-soft); font-size: 12.5px; }
.zone-card .radio {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong);
  position: relative;
}
.zone-card.selected .radio { border-color: var(--brand-1); }
.zone-card.selected .radio::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand-1);
}

/* Zone card themed backgrounds */
.zone-card.zone-hetero {
  background: linear-gradient(135deg, #ff3b6b 0%, #ff6a4b 50%, #ff8a3b 100%);
  border-color: transparent;
  color: #fff;
}
.zone-card.zone-lgtb {
  background: linear-gradient(90deg,
    #e40303 0%,
    #ff8c00 20%,
    #ffed00 40%,
    #008026 60%,
    #004dff 80%,
    #750787 100%);
  border-color: transparent;
  color: #fff;
}
.zone-card.zone-hetero h4,
.zone-card.zone-lgtb h4 { color: #fff; }
.zone-card.zone-hetero p,
.zone-card.zone-lgtb p {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.zone-card.zone-hetero .zone-emoji,
.zone-card.zone-lgtb .zone-emoji {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  color: #fff;
}
.zone-card.zone-hetero .radio,
.zone-card.zone-lgtb .radio {
  border-color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.15);
}
.zone-card.zone-hetero.selected,
.zone-card.zone-lgtb.selected {
  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.zone-card.zone-hetero.selected .radio,
.zone-card.zone-lgtb.selected .radio {
  border-color: #fff;
  background: transparent;
}
.zone-card.zone-hetero.selected .radio::after,
.zone-card.zone-lgtb.selected .radio::after {
  background: #fff;
}

/* Photos step */
.photos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.photo-slot {
  aspect-ratio: 3/4; border-radius: 14px; background: var(--surface-2);
  border: 1.5px dashed var(--border-strong);
  display: grid; place-items: center; color: var(--text-muted);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.photo-slot.filled { border: 0; background-size: cover; background-position: center; }
.photo-slot .badge {
  position: absolute; top: 6px; left: 6px; background: var(--brand-1); color: white;
  font-size: 10px; padding: 2px 6px; border-radius: 6px; font-weight: 700;
}
.photo-slot .del {
  position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,.55); color: white; display: grid; place-items: center; border: 0;
  font-size: 14px;
}

/* Steps progress */
.stepper { display: flex; gap: 6px; padding: 12px 20px 4px; }
.stepper .step { flex: 1; height: 4px; border-radius: 999px; background: var(--border); }
.stepper .step.done { background: var(--brand-1); }

/* -------- Discover / Swipe cards -------- */
.discover {
  padding: 12px 14px 16px;
  min-height: 100%;
  display: flex; flex-direction: column;
}
.discover-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 6px 4px 12px;
}
.brand-mini {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px;
  background: var(--grad-brand); -webkit-background-clip: text; color: transparent;
}
.brand-logo-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto;
  line-height: 0;
}
.brand-logo-mini svg { width: 32px; height: 32px; display: block; }
/* Modo "crop": el PNG del logo incluye el texto "Aura" en la parte inferior
   que no cabe en la topbar. Mostramos sólo el corazón recortando por altura. */
.brand-logo-crop {
  overflow: hidden;
  width: 34px; height: 34px;
  border-radius: 8px;
}
.brand-logo-crop img {
  /* El PNG mide ~800×880; el corazón ocupa aprox. el 75% superior. */
  width: 42px; height: auto;
  display: block;
  margin: -1px 0 0 -4px;
  /* Recorte por altura para eliminar el texto "Aura" del PNG. */
  clip-path: inset(0 0 30% 0);
  -webkit-clip-path: inset(0 0 30% 0);
}
.brand-logo-mini > img:not(.brand-logo-crop img) {
  width: 30px; height: 30px; display: block; object-fit: contain;
}
@media (max-width: 420px) and ((pointer: coarse) or (hover: none)) {
  .brand-logo-mini { width: 28px; height: 28px; }
  .brand-logo-mini svg { width: 26px; height: 26px; }
  .brand-logo-crop { width: 28px; height: 28px; }
  .brand-logo-crop img { width: 36px; margin: -1px 0 0 -4px; }
  .brand-name-mini { font-size: 18px; }
}
.brand-name-mini {
  font-weight: 800; font-size: 20px; letter-spacing: .01em;
  /* Mismo degradado que el texto "Aura" del logotipo:
     naranja → magenta → púrpura → azul. */
  background: linear-gradient(90deg, #ff7a1a 0%, #ff2e93 35%, #a04bff 65%, #2f8bff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  flex: 0 0 auto;
}
.discover-topbar .chip { margin: 0 auto; }
/* Spacer invisible del mismo ancho que el logo para que el chip quede
   perfectamente centrado sin necesidad de mostrar el texto "Aura". */
.brand-topbar-spacer {
  display: inline-block;
  width: 34px; height: 34px;
  flex: 0 0 auto;
}
@media (max-width: 420px) and ((pointer: coarse) or (hover: none)) {
  .brand-topbar-spacer { width: 28px; height: 28px; }
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-soft);
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
}
.discover-stack {
  /* V749 · La pila de tarjetas RELLENA todo el alto disponible (flex:1) en
     CUALQUIER contexto (móvil, PWA, webview y el marco del escritorio). Antes
     tenía aspect-ratio:3/4.4 + max-height:62vh en la regla base, y esos topes
     seguían aplicándose cuando la media query de móvil no casaba (p. ej.
     webviews que reportan pointer:fine), dejando un HUECO enorme vacío debajo
     de la tarjeta. Sin topes, la tarjeta ocupa desde la topbar hasta la fila de
     acciones y el hueco desaparece. */
  position: relative; flex: 1 1 auto; min-height: 0;
  margin: 0 auto; width: 100%;
}
.swipe-card {
  position: absolute; inset: 0;
  border-radius: 22px;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  color: white;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
}
.swipe-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.75));
}
.swipe-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 20px;
  z-index: 2;
}
.swipe-card-body h3 {
  margin: 0; font-size: 26px; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.swipe-card-body .verified {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #3b82f6; color: white; font-size: 12px;
}
/* V761 · Insignia de actividad reciente sobre la tarjeta de Explorar */
.swipe-activity {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 5px 11px 5px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1; color: #fff;
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
}
.swipe-activity .act-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #94a3b8;
}
.swipe-activity.act-online .act-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.30); }
.swipe-activity.act-recent .act-dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }
.swipe-activity.act-today  .act-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.22); }
.swipe-activity.act-old    .act-dot { background: #94a3b8; }
/* V761 · El punto de estado del detalle refleja el nivel de actividad */
.pd-dot-online.act-recent { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.20); }
.pd-dot-online.act-today  { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,.20); }
.pd-dot-online.act-old    { background: #94a3b8; }
.swipe-card-body .meta { display: flex; gap: 10px; margin: 6px 0 10px; opacity: .95; font-size: 14px; }
.swipe-card-body .meta span { display: inline-flex; align-items: center; gap: 4px; }
/* V744 · Los iconos del bloque meta (ubicación / profesión) se generan con un
   SVG sin tamaño explícito (viewBox 24x24) → sin esta regla salían enormes
   (tamaño intrínseco 300x150). Los fijamos pequeños, alineados con el texto. */
.swipe-card-body .meta span svg { width: 15px; height: 15px; flex: 0 0 auto; }
.swipe-card-body .meta span.gps-off { color: #ffd24a; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
.swipe-card-body .meta span.gps-off svg { color: #ffd24a; }
.swipe-card-body .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.swipe-card-body .tag {
  background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.24);
  padding: 4px 10px; border-radius: 999px; font-size: 11px;
}
.swipe-card .stamp {
  position: absolute; top: 24px; padding: 10px 16px; border-radius: 10px;
  font-weight: 900; font-size: 26px; border: 3px solid; opacity: 0;
  z-index: 3; letter-spacing: .06em;
}
.swipe-card .stamp.like { color: #22c55e; border-color: #22c55e; left: 20px; transform: rotate(-14deg); }
.swipe-card .stamp.nope { color: #ef4444; border-color: #ef4444; right: 20px; transform: rotate(14deg); }
.swipe-card .indicators {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; gap: 4px; z-index: 3;
}
.swipe-card .indicators span {
  flex: 1; height: 3px; background: rgba(255,255,255,.4); border-radius: 3px;
}
.swipe-card .indicators span.active { background: white; }
.swipe-card-stack-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--text-muted); font-size: 14px;
}
.swipe-card-stack-hint b { color: var(--text); }

.action-row {
  display: flex; align-items: flex-start; justify-content: center;
  gap: 14px; padding: 16px 0 4px;
}
/* V746 · Cada acción es una columna: botón redondo + leyenda debajo. */
.action-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 0 0 auto;
}
.action-cap {
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  line-height: 1; text-align: center; white-space: nowrap;
}
.action-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  display: inline-grid; place-items: center; color: var(--text);
  transition: transform .1s;
}
.action-btn:active { transform: scale(.94); }
.action-btn.sm { width: 48px; height: 48px; }
.action-btn.rewind { color: #f59e0b; }
.action-btn.pass { color: #ef4444; }
.action-btn.super { color: #3b82f6; }
.action-btn.like { color: #22c55e; }
.action-btn.boost { color: #a855f7; }
/* V896 · Botón Boost cuando el propio usuario tiene un Boost ACTIVO: relleno
   degradado, icono blanco y halo pulsante. La leyenda pasa a mostrar el tiempo
   restante (lo pinta el JS). No añadimos un segundo rayo: el icono del botón ya
   es un rayo. */
.action-btn.boost.on {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #a855f7 0%, #ff3b6b 100%);
  box-shadow: 0 6px 16px rgba(168,85,247,.45);
  animation: boostPulse 1.8s ease-in-out infinite;
}
.action-item .action-cap { transition: color .15s; }
.action-item:has(.action-btn.boost.on) .action-cap {
  color: #a855f7; font-weight: 700;
}
@keyframes boostPulse {
  0%, 100% { box-shadow: 0 6px 16px rgba(168,85,247,.45); }
  50% { box-shadow: 0 6px 22px rgba(255,59,107,.65); }
}
.action-btn { position: relative; }
.action-btn svg { width: 26px; height: 26px; }
.action-btn.big svg { width: 30px; height: 30px; }

/* -------- Match screen (V810 · rediseño profesional) -------- */
.match-screen {
  position: absolute; inset: 0; z-index: 20;
  /* Capa 1: brillo superior (fijo). Capa 2: degradado de color EN MOVIMIENTO. */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(300deg, #ff2d6f 0%, #ff6a3d 20%, #e02d7d 40%, #9b3cf0 62%, #ff2d6f 100%);
  background-size: 100% 100%, 280% 280%;
  background-position: 50% 0%, 0% 50%;
  color: #fff; display: flex; flex-direction: column; align-items: center;
  padding: 46px 26px calc(26px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  animation: matchFade .4s ease, matchBgFlow 10s ease-in-out infinite;
}
/* El degradado recorre todo su ancho y vuelve, de forma continua y visible. */
@keyframes matchBgFlow {
  0%   { background-position: 50% 0%,   0% 50%; }
  50%  { background-position: 50% 0%, 100% 50%; }
  100% { background-position: 50% 0%,   0% 50%; }
}
/* Halo giratorio de luz detrás de los avatares */
.match-screen::before {
  content: ""; position: absolute; top: 20%; left: 50%;
  width: 150vw; height: 150vw; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, rgba(255,255,255,.16), transparent 25%, rgba(255,255,255,.16) 50%, transparent 75%, rgba(255,255,255,.16));
  opacity: .5; pointer-events: none;
  animation: matchHalo 14s linear infinite;
}
@keyframes matchHalo { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes matchFade { from { opacity: 0; } }

.match-badge {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.22);
  animation: matchPop .6s .05s both cubic-bezier(.2,.9,.2,1);
}
.match-badge svg { width: 15px; height: 15px; animation: matchBeat 1.5s 1.7s infinite ease-in-out; transform-origin: center; }

.match-screen h2 {
  position: relative; z-index: 2;
  font-size: 42px; line-height: 1.02; margin: 16px 0 6px; font-weight: 800;
  letter-spacing: -.03em; text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, #ffe4ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.28));
  animation: matchPop .6s .12s both cubic-bezier(.2,.9,.2,1);
}
.match-screen .match-sub {
  position: relative; z-index: 2; margin: 0; font-size: 15px; opacity: .95;
  animation: matchPop .6s .18s both cubic-bezier(.2,.9,.2,1);
}
@keyframes matchPop { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* V855 · Logo opcional (editable desde Admin) arriba de la pantalla de match. */
.match-logo {
  position: relative; z-index: 2; max-height: 46px; max-width: 60%;
  object-fit: contain; margin-bottom: 4px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.28));
  animation: matchPop .6s .02s both cubic-bezier(.2,.9,.2,1);
}
/* V855 · Sin animación de fondo: quita el halo giratorio (el degradado en
   movimiento ya se desactiva por estilo en línea). */
.match-noanim::before { animation: none !important; }

/* ---- Tarjetas de foto tipo “carta” superpuestas ---- */
.match-cards {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin: 40px 0 16px; perspective: 900px;
}
/* Halo de luz que late detrás de las tarjetas */
.match-cards::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 360px; height: 360px; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.38) 0%, rgba(255,255,255,.10) 44%, transparent 68%);
  animation: matchGlow 2.6s .6s ease-in-out infinite;
}
@keyframes matchGlow {
  0%,100% { transform: translate(-50%,-50%) scale(.86); opacity: .5; }
  50%     { transform: translate(-50%,-50%) scale(1.06); opacity: .95; }
}
.match-cards .mc {
  position: relative;
  width: 150px; height: 200px; border-radius: 26px;
  background-size: cover; background-position: center;
  border: 4px solid #fff;
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
  overflow: hidden;
  animation: matchIn 1s cubic-bezier(.34,1.56,.64,1) both;
}
/* Degradado inferior para que se lea el nombre */
.match-cards .mc::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.6));
}
.match-cards .mc .mc-name {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.match-cards .mc .mc-name svg { width: 15px; height: 15px; flex: none; color: #4f8cff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.match-cards .mc:first-child { transform: rotate(-9deg); margin-right: -30px; animation-name: matchInL; }
.match-cards .mc:last-child  { transform: rotate(9deg);  margin-left: -30px; animation-delay: .12s; animation-name: matchInR; z-index: 1; }
/* Corazón central con destello. Se coloca en el hueco inferior donde se juntan
   las dos cartas, para NO tapar las caras de los perfiles. */
.match-cards .match-heart {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, -60%);
  z-index: 4; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe3ec);
  color: #ff2d6f;
  box-shadow: 0 14px 34px rgba(255,45,111,.5), inset 0 0 0 3px rgba(255,255,255,.9);
  animation: matchHeart 1.1s .55s both cubic-bezier(.34,1.56,.64,1), matchBeat 1.5s 1.7s infinite ease-in-out;
}
.match-cards .match-heart svg { width: 32px; height: 32px; filter: drop-shadow(0 2px 4px rgba(255,45,111,.4)); }
.match-cards .match-heart::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
  animation: matchSpark 1s 1.1s ease-out both;
}
@keyframes matchInL { from { transform: translateX(-60px) rotate(-9deg) scale(.4); opacity: 0; } }
@keyframes matchInR { from { transform: translateX(60px)  rotate(9deg)  scale(.4); opacity: 0; } }
@keyframes matchHeart { from { transform: translate(-50%,-60%) scale(0) rotate(-30deg); opacity: 0; } }
@keyframes matchSpark {
  from { opacity: .9; transform: scale(1); }
  to   { opacity: 0;  transform: scale(2.5); }
}
@keyframes matchBeat {
  0%,100% { transform: translate(-50%,-60%) scale(1); }
  15%     { transform: translate(-50%,-60%) scale(1.16); }
  30%     { transform: translate(-50%,-60%) scale(1); }
  45%     { transform: translate(-50%,-60%) scale(1.1); }
  60%     { transform: translate(-50%,-60%) scale(1); }
}
/* El icono del badge y del corazón no deben trasladarse: solo escalar */
.match-badge svg { animation-name: matchBeatIcon; }
@keyframes matchBeatIcon {
  0%,100% { transform: scale(1); }
  15% { transform: scale(1.22); }
  30% { transform: scale(1); }
  45% { transform: scale(1.14); }
  60% { transform: scale(1); }
}

/* Corazones que suben flotando de fondo */
.match-hearts { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.match-hearts i {
  position: absolute; bottom: -32px; color: rgba(255,255,255,.5);
  animation: matchFloat linear infinite;
}
.match-hearts i svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes matchFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translateY(-115vh) rotate(200deg) scale(1.15); opacity: 0; }
}

.match-actions {
  position: relative; z-index: 2;
  margin-top: auto; display: grid; gap: 12px; width: 100%;
  animation: matchPop .6s .3s both cubic-bezier(.2,.9,.2,1);
}
.match-actions .btn-primary {
  background: #fff; color: #ff2d6f; font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}
.match-actions .btn-primary:hover { transform: translateY(-1px); }
.match-actions .btn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.45); font-weight: 700;
}

/* V871 · Respuestas rápidas de la pantalla de match: fila de iconos/emojis que
   envían un primer mensaje al instante. */
.match-quick {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; margin: 4px 0 14px;
  animation: matchPop .6s .22s both cubic-bezier(.2,.9,.2,1);
}
.match-quick-btn {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
  backdrop-filter: blur(4px);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.match-quick-btn:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.match-quick-btn:active { transform: scale(.94); }

/* V873 · En móvil el marco ocupa 100dvh: en teléfonos bajos la fila de
   respuestas rápidas (V871) alargaba el contenido y, con overflow:hidden,
   empujaba las acciones ("Enviar mensaje" / "Seguir descubriendo") fuera de
   la pantalla. Compactamos el bloque según la altura real para que todo
   quepa. Solo aplica al layout móvil a pantalla completa (mismo criterio que
   el resto del CSS responsive); en escritorio el marco es fijo 400×820 y ya
   cabe sin recortes. */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) and (max-height: 780px) {
  .match-screen { padding-top: 28px; }
  .match-screen h2 { font-size: 34px; margin: 10px 0 4px; }
  .match-cards { margin: 20px 0 12px; }
  .match-cards .mc { width: 128px; height: 168px; }
  .match-cards .match-heart { width: 52px; height: 52px; }
  .match-cards .match-heart svg { width: 28px; height: 28px; }
  .match-quick { margin: 2px 0 10px; }
  .match-quick-btn { padding: 7px 12px; font-size: 14px; }
  .match-actions { gap: 10px; }
}
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) and (max-height: 660px) {
  .match-screen { padding-top: 18px; }
  .match-screen h2 { font-size: 27px; margin: 6px 0 2px; }
  .match-screen .match-sub { font-size: 13px; }
  .match-badge { padding: 6px 14px; font-size: 11px; }
  .match-cards { margin: 12px 0 8px; }
  .match-cards .mc { width: 106px; height: 138px; }
  .match-cards .match-heart { width: 46px; height: 46px; }
  .match-cards .match-heart svg { width: 24px; height: 24px; }
  .match-quick { margin: 2px 0 8px; gap: 6px; }
  .match-quick-btn { padding: 6px 11px; font-size: 13px; }
  .match-actions { gap: 8px; }
  .match-actions .btn { height: 44px; }
}

/* -------- Plan celebration overlay (V810 · al activar un plan de pago) -------- */
.plan-celebrate {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 32px 26px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(165deg, #1b1030 0%, #2a1550 48%, #120a24 100%);
  animation: pcFade .35s ease;
}
.plan-celebrate.pc-out { animation: pcFadeOut .45s ease forwards; }
@keyframes pcFade { from { opacity: 0; } }
@keyframes pcFadeOut { to { opacity: 0; transform: scale(1.02); } }

/* Rayos de luz girando detrás del emblema */
.plan-celebrate::before {
  content: ""; position: absolute; top: 42%; left: 50%;
  width: 160vh; height: 160vh; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 12deg, rgba(255,255,255,.10) 12deg 20deg);
  opacity: .55; pointer-events: none; animation: pcRays 20s linear infinite;
}
@keyframes pcRays { to { transform: translate(-50%, -50%) rotate(360deg); } }

.pc-emblem {
  position: relative; z-index: 2;
  width: 118px; height: 118px; border-radius: 30px;
  display: grid; place-items: center;
  font-size: 56px;
  background: linear-gradient(160deg, #ffd76a, #ff8a3b 55%, #ff2d6f);
  box-shadow: 0 22px 60px rgba(255,138,59,.45), inset 0 0 0 2px rgba(255,255,255,.35);
  animation: pcEmblem .8s cubic-bezier(.2,.9,.2,1) both;
}
.pc-emblem.pc-premium { background: linear-gradient(160deg, #8f9bff, #6d5cff 55%, #ff2d6f); box-shadow: 0 22px 60px rgba(109,92,255,.45), inset 0 0 0 2px rgba(255,255,255,.35); }
.pc-emblem.pc-gold    { background: linear-gradient(160deg, #ffe08a, #f5b301 60%, #ff8a3b); box-shadow: 0 22px 60px rgba(245,179,1,.45), inset 0 0 0 2px rgba(255,255,255,.4); }
.pc-emblem.pc-platinum{ background: linear-gradient(160deg, #eaf1ff, #b8c6e6 55%, #8fa3c8); color:#2a2f45; box-shadow: 0 22px 60px rgba(184,198,230,.5), inset 0 0 0 2px rgba(255,255,255,.6); }
/* Plan gratuito: emblema verde sereno (no dorado/premium) para dejar claro que
   NO es una compra sino la vuelta al plan básico. */
.pc-emblem.pc-free    { background: linear-gradient(160deg, #7ee0a6, #34c77b 55%, #15a267); box-shadow: 0 22px 60px rgba(52,199,123,.42), inset 0 0 0 2px rgba(255,255,255,.4); }
@keyframes pcEmblem { from { transform: scale(.3) rotate(-14deg); opacity: 0; } }

/* Celebración de vuelta a Free: fondo verdoso calmado, título/barra sin dorado,
   rayos casi imperceptibles. Diferencia claramente el tono del de pago. */
.plan-celebrate-free {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(165deg, #0c1f18 0%, #123a2b 48%, #0a1712 100%);
}
.plan-celebrate-free::before { opacity: .28; }
.plan-celebrate-free .pc-title { color: #eafff4; }
.plan-celebrate-free .pc-bar > i { background: linear-gradient(90deg, #7ee0a6, #15a267); }

/* V855 · Logo opcional (editable desde Admin) en la celebración de plan. */
.pc-logo {
  position: relative; z-index: 2; max-height: 42px; max-width: 55%;
  object-fit: contain; margin-bottom: 14px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.3));
  animation: pcUp .6s .04s both cubic-bezier(.2,.9,.2,1);
}
.pc-noanim::before { animation: none !important; }
.pc-kicker {
  position: relative; z-index: 2; margin-top: 22px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
  animation: pcUp .6s .1s both cubic-bezier(.2,.9,.2,1);
}
.pc-title {
  position: relative; z-index: 2; margin-top: 6px;
  font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
  animation: pcUp .6s .16s both cubic-bezier(.2,.9,.2,1);
}
.pc-title .pc-plan {
  background: linear-gradient(90deg, #ffd76a, #ff8a3b, #ff2d6f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-sub {
  position: relative; z-index: 2; margin-top: 10px; max-width: 320px;
  font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82);
  text-wrap: balance;
  animation: pcUp .6s .22s both cubic-bezier(.2,.9,.2,1);
}
.pc-perks {
  position: relative; z-index: 2; margin-top: 22px; display: grid; gap: 9px;
  width: 100%; max-width: 320px;
  animation: pcUp .6s .3s both cubic-bezier(.2,.9,.2,1);
}
.pc-perk {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px; font-weight: 600;
}
.pc-perk .pc-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: #22c55e; color: #fff;
}
.pc-perk .pc-check svg { width: 13px; height: 13px; }
.pc-bar {
  position: relative; z-index: 2; margin-top: 26px;
  width: 100%; max-width: 320px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.pc-bar > i { display: block; height: 100%; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #ffd76a, #ff2d6f);
  animation: pcBar var(--pc-dur, 4.5s) linear forwards; }
@keyframes pcBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pcUp { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  .plan-celebrate::before, .pc-emblem, .pc-kicker, .pc-title, .pc-sub, .pc-perks, .match-screen, .match-screen::before, .match-cards .match-heart { animation: none !important; }
}

/* -------- Search & Filters -------- */
.search-bar {
  position: sticky; top: 0; z-index: 3;
  padding: 12px 14px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  /* V865 · Antes era una rejilla de 2 columnas (input + 1 chip). Ahora hay dos
     chips ("Buscan ahora" y "Filtros"): pasamos a flex con salto de línea para
     que en móviles estrechos los chips bajen debajo del buscador y nunca se
     salgan de la pantalla. El input ocupa toda la primera fila. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.search-bar .search-input { flex: 1 1 100%; min-width: 0; }
.search-bar .chip { flex: 0 0 auto; cursor: pointer; }
/* V865 · Chip "Buscan ahora" (rayo ámbar) en Buscar, coherente con el del mapa. */
.chip-now .chip-ic { display: inline-flex; color: #f59e0b; }
.chip-now.active { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; border-color: transparent; }
.chip-now.active .chip-ic { color: #fff; }
.search-input {
  height: 44px; border-radius: 999px; padding: 0 14px 0 40px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
}
.results-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 14px 26px;
}
/* V741 · Tarjeta rediseñada: anillo degradado permanente (visible sin hover,
   pensado para táctil), esquinas más suaves y panel de info tipo cristal. */
.result-card {
  aspect-ratio: 3/4; border-radius: 22px; background-size: cover; background-position: center;
  position: relative; overflow: hidden; color: white;
  box-shadow: 0 12px 30px rgba(20,22,29,.20);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  cursor: pointer;
}
.result-card::before {
  /* Anillo degradado de marca SIEMPRE visible (no depende del hover) */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: var(--grad-brand, linear-gradient(135deg,#ff3b6b,#ff8a3b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85; transition: opacity .18s ease;
}
.result-card:hover, .result-card:active {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 18px 40px rgba(255,59,107,.30);
}
.result-card:hover::before, .result-card:active::before { opacity: 1; }
.result-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.82));
}
.result-card .info {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  padding: 8px 11px; border-radius: 15px;
  background: rgba(18,18,26,.34); backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.12);
}
.result-card .info strong {
  font-size: 15.5px; font-weight: 800; display: block;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.result-card .info small { opacity: .95; font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.result-card .online {
  position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%; background: #22c55e;
  border: 2px solid white; z-index: 2;
}
.result-card .heart {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.35); backdrop-filter: blur(4px);
  border: 0; color: white; display: grid; place-items: center;
}
.result-card .heart.on { color: #ff3b6b; }

/* Filters sheet content */
.filters-body { padding: 8px 20px 24px; }
.filter-group { padding: 16px 0; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: 0; }
.filter-group h5 {
  margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip.selectable {
  cursor: pointer; user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}
.chip.selectable.active {
  background: var(--brand-1); color: white; border-color: transparent;
}
.slider-row { display: flex; align-items: center; gap: 12px; }
.slider-row input[type=range] { flex: 1; accent-color: var(--brand-1); }
.slider-row .val { min-width: 76px; text-align: right; font-weight: 700; font-size: 13px; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; cursor: pointer; inset: 0; background: var(--border-strong);
  border-radius: 999px; transition: background .2s;
}
.switch span::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 2px; top: 2px;
  background: white; border-radius: 50%; transition: transform .2s;
}
.switch input:checked + span { background: var(--brand-1); }
.switch input:checked + span::before { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.switch-row.gated { opacity: .6; }

/* -------- V748 · Filtros: cajas numéricas (edad/distancia) sin barras -------- */
.num-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.num-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 96px; }
.num-field > span { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .03em; }
.num-sep { color: var(--text-muted); font-weight: 700; align-self: flex-end; padding-bottom: 10px; }
.num-input {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700;
  text-align: center; padding: 0 8px; box-sizing: border-box;
}
.num-input:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent); }
.num-suffix { font-size: 13px; color: var(--text-soft); font-weight: 700; }

/* -------- V791 · Slider de doble mango (edad / peso) -------- */
.dual-range { display: flex; flex-direction: column; gap: 12px; }
.dual-range-val { font-size: 15px; font-weight: 800; color: var(--text); }
.dual-range-slider { position: relative; height: 36px; }
.dual-range-track {
  position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%);
  height: 6px; border-radius: 999px; background: var(--border-strong);
}
.dual-range-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: var(--brand-1);
}
.dual-range-input {
  position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 36px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent;
  pointer-events: none; /* solo los mangos capturan el toque */
}
.dual-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand-1); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.dual-range-input::-moz-range-thumb {
  pointer-events: auto; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand-1); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.dual-range-input::-moz-range-track { background: transparent; }
.unit-label { font-size: 12px; color: var(--text-soft); font-weight: 700; align-self: center; margin-right: 2px; }

/* -------- V792 · Control de rango (slider + cajas manuales + unidad) -------- */
.range-control { display: flex; flex-direction: column; }
.range-control .unit-row { align-items: center; }
.range-control .num-range { margin-bottom: 10px; }
.num-range-unit { align-self: flex-end; padding-bottom: 12px; }
/* Slider de valor único (distancia) */
.single-range-slider { display: flex; flex-direction: column; gap: 8px; }
.single-range-input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 12px 0;
  border-radius: 999px; background: var(--border-strong); accent-color: var(--brand-1);
}
.single-range-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand-1); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}
.single-range-input::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 2px solid var(--brand-1); box-shadow: 0 1px 4px rgba(0,0,0,.35); cursor: pointer;
}

/* -------- V748 · Filtros: buscador de ubicación -------- */
input.filter-search {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 15px; padding: 0 14px;
  box-sizing: border-box;
}
input.filter-search:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent); }
.filter-search-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; max-height: 200px; overflow-y: auto; }
.filter-search-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 14px; cursor: pointer;
}
.filter-search-item:hover, .filter-search-item.active { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 8%, var(--surface)); }
.filter-search-item .fs-count { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.filter-selected-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.filter-selected-row:empty { display: none; }

/* -------- V748 · Visor de foto de perfil ampliada -------- */
.avatar-viewer {
  position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 24px; box-sizing: border-box;
  animation: avatarViewerIn .18s ease;
}
@keyframes avatarViewerIn { from { opacity: 0; } to { opacity: 1; } }
.avatar-viewer-img {
  max-width: min(92vw, 520px); max-height: 76vh; width: auto; height: auto;
  border-radius: 16px; object-fit: contain; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.avatar-viewer-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.14); color: #fff; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.avatar-viewer-close:hover { background: rgba(255,255,255,.26); }
.avatar-viewer-actions { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; }
.avatar-viewer-change {
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 999px;
  border: 0; background: var(--brand-1); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.me-avatar.tappable { cursor: pointer; }

/* -------- Likes screen -------- */
.likes-tabs {
  display: grid; grid-template-columns: 1fr 1fr; padding: 8px 14px 0; gap: 6px;
}
.likes-tab {
  height: 42px; border-radius: 12px; border: 0; background: transparent;
  font-weight: 700; color: var(--text-soft);
}
.likes-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.likes-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px 20px;
}
.like-card { position: relative; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; }
.like-card.blurred { filter: blur(14px) saturate(1.2); }
.like-card::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.65));
}
.like-card .info { position: absolute; left: 10px; right: 10px; bottom: 10px; color: white; z-index: 2; }
.like-upgrade {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 3;
  color: white; text-align: center;
}
.like-upgrade .lock {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.4);
  display: grid; place-items: center;
}

/* -------- Chats / Matches -------- */
.matches-row {
  display: flex; overflow-x: auto; padding: 12px 14px 4px; gap: 12px;
  scrollbar-width: none;
}
.matches-row::-webkit-scrollbar { display: none; }
.match-avatar {
  min-width: 68px; text-align: center; cursor: pointer;
}
.match-avatar .img {
  width: 66px; height: 66px; border-radius: 50%; background-size: cover; background-position: center;
  border: 2.5px solid var(--brand-1); padding: 2px;
  background-clip: content-box;
  position: relative;
}
.match-avatar .name { font-size: 11px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68px; }
.match-avatar .new {
  position: absolute; top: 0; right: 0; width: 14px; height: 14px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--surface);
}
/* Global restriction banner */
.restriction-banner {
  position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 9999;
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  color: white; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(239, 68, 68, .35);
  animation: rbSlide .25s ease-out;
  pointer-events: auto;
}
/* Si la app muestra ya la pantalla de bloqueo completa, oculta el banner
   para no duplicar la señal visual. La pantalla 🚫 basta. */
body:has(.blocked-screen) .restriction-banner { display: none !important; }
/* En escritorio la app se muestra dentro de un "phone frame" centrado (400px).
   Sin este ajuste, position:fixed hace que el banner ocupe todo el ancho de
   la ventana. Lo limitamos al ancho del móvil simulado. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .restriction-banner {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(min(400px, 100vw) - 24px);
    max-width: 400px;
  }
  @keyframes rbSlide {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
  }
}
@keyframes rbSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.restriction-banner .rb-body {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
}
.restriction-banner .rb-ic { font-size: 22px; line-height: 1.1; }
.restriction-banner .rb-body > div:nth-child(2) { min-width: 0; }
.restriction-banner strong {
  display: block;
  font-size: 14.5px;
  line-height: 1.25;
  margin-bottom: 4px;
  color: #fff;
}
.restriction-banner .rb-detail {
  font-size: 12.5px;
  line-height: 1.45;
  opacity: .96;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.restriction-banner .rb-close {
  align-self: center;
  background: rgba(255,255,255,.22); color: #fff;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.restriction-banner .rb-close:hover { background: rgba(255,255,255,.35); }
/* V731 · Variante "verificación de edad requerida". No es una sanción de
   moderación, sino un requisito legal/edad, así que usamos ámbar en lugar de
   rojo para diferenciarlo visualmente del banner de restricciones. */
.restriction-banner.verify-gate-banner {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  box-shadow: 0 8px 24px rgba(245, 158, 11, .35);
}
/* Si coexistiera con el banner de restricciones, súbelo un poco para no taparlo. */
body.has-restriction .restriction-banner.verify-gate-banner { bottom: 150px; }
/* V732 · Cuando el margen de cortesía se agota, el banner de verificación pasa a
   rojo (rb-severe) para señalar que las funciones ya están bloqueadas. */
.restriction-banner.verify-gate-banner.rb-severe {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  box-shadow: 0 8px 24px rgba(239, 68, 68, .4);
}
/* V732 · Acciones del banner de verificación: "Verificar" + "Omitir" apiladas. */
.restriction-banner.verify-gate-banner .vg-actions {
  align-self: center;
  display: flex; flex-direction: column; gap: 6px;
}
.restriction-banner.verify-gate-banner .vg-omit {
  background: transparent;
  border-color: rgba(255,255,255,.45);
  opacity: .9; font-weight: 600;
}
.restriction-banner.verify-gate-banner .vg-omit:hover { background: rgba(255,255,255,.18); }
/* Severe variant: suspension/ban — hace el banner más notorio y persistente. */
body.account-banned .restriction-banner,
.restriction-banner.rb-severe {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
  box-shadow: 0 12px 32px rgba(220, 38, 38, .5);
}
body.account-suspended .restriction-banner {
  background: linear-gradient(135deg, #7f1d1d, #dc2626);
  box-shadow: 0 12px 32px rgba(220, 38, 38, .5);
}
body.account-suspended .restriction-banner strong,
body.account-suspended .restriction-banner .rb-detail {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
body.account-suspended .restriction-banner .rb-close {
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.7);
}
/* Pantalla de bloqueo cuando el backend rechaza el acceso (suspendido/baneado). */
/* Layout compacto sin scroll: aplica tanto en móvil real como en el marco
   "phone" de escritorio, ya que el viewport tiene overflow:hidden en ambos
   casos y el contenido debe caber íntegro en una sola vista. */
.blocked-screen {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 8px;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  justify-content: flex-start;
}
.blocked-screen .blk-hero { gap: 4px; margin-top: 0; }
.blocked-screen .blk-badge {
  width: 56px; height: 56px; font-size: 28px;
  box-shadow: 0 6px 16px rgba(255, 59, 107, .18);
}
.blocked-screen .blk-title { font-size: 18px; }
.blocked-screen .blk-sub { font-size: 12.5px; max-width: 320px; }
.blocked-screen .blk-card { padding: 10px 12px; gap: 6px; }
.blocked-screen .blk-row { font-size: 12.5px; }
.blocked-screen .blk-k { font-size: 10.5px; }
.blocked-screen .blk-warn { padding: 8px 12px; }
.blocked-screen .blk-warn-p { font-size: 11.5px; line-height: 1.4; margin: 0; }
.blocked-screen .blk-warn-p + .blk-warn-p { margin-top: 4px; }
.blocked-screen .blk-actions { gap: 6px; margin-top: 2px; }
.blocked-screen .blk-actions .btn { padding: 10px 12px; font-size: 14px; }
.blocked-screen .blk-foot { display: none; }

/* Ajuste extra para navegador móvil real (donde la altura útil es menor
   por la barra dinámica de Chrome y la navegación del sistema). En el
   marco "phone" de escritorio ya cabe sin este recorte. */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .blocked-screen {
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
  }
  .blocked-screen .blk-hero { gap: 2px; }
  .blocked-screen .blk-badge {
    width: 44px; height: 44px; font-size: 22px;
    box-shadow: 0 4px 10px rgba(255, 59, 107, .18);
    animation: none;
  }
  .blocked-screen .blk-title { font-size: 16px; }
  .blocked-screen .blk-sub { font-size: 11.5px; line-height: 1.35; max-width: 300px; }
  .blocked-screen .blk-card { padding: 8px 10px; gap: 4px; border-radius: 10px; }
  .blocked-screen .blk-row { font-size: 11.5px; }
  .blocked-screen .blk-k { font-size: 9.5px; }
  .blocked-screen .blk-warn { padding: 6px 10px; border-radius: 10px; }
  .blocked-screen .blk-warn-title { font-size: 12px; margin-bottom: 2px; }
  .blocked-screen .blk-warn-p { font-size: 10.5px; line-height: 1.35; }
  .blocked-screen .blk-warn-p + .blk-warn-p { margin-top: 3px; }
  .blocked-screen .blk-actions { gap: 5px; margin-top: 0; }
  .blocked-screen .blk-actions .btn { padding: 8px 10px; font-size: 13px; min-height: 36px; }
}
.blocked-screen .blk-hero {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 6px;
}
.blocked-screen .blk-badge {
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 42px; line-height: 1;
  box-shadow: 0 12px 30px rgba(255, 59, 107, .18);
  animation: blkPulse 2.4s ease-in-out infinite;
}
.blocked-screen .blk-badge.blk-bad {
  background: linear-gradient(135deg, #ff3b6b, #ff5b3b);
  color: #fff;
}
.blocked-screen .blk-badge.blk-warn {
  background: linear-gradient(135deg, #ffb03b, #ff8a3b);
  color: #fff;
}
@keyframes blkPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.blocked-screen .blk-title {
  margin: 4px 0 0; font-size: 22px; font-weight: 800;
  color: var(--text);
}
.blocked-screen .blk-sub {
  margin: 0; max-width: 340px;
  color: var(--text-soft, var(--text-muted, #b7bdcc));
  font-size: 14px; line-height: 1.45;
}
.blocked-screen .blk-card {
  width: 100%; max-width: 360px;
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.blocked-screen .blk-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 13px;
}
.blocked-screen .blk-k {
  color: var(--text-muted, #8a8f9a); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: 11px;
  flex: 0 0 auto;
}
.blocked-screen .blk-v {
  color: var(--text, #14161d); font-weight: 500;
  text-align: right; word-break: break-word;
}
.blocked-screen .blk-link {
  color: var(--brand-1, #ff3b6b); text-decoration: none;
}
.blocked-screen .blk-link:hover { text-decoration: underline; }
.blocked-screen .blk-note {
  font-size: 12px; color: var(--text-muted, #8a8f9a);
  max-width: 340px; margin: 0;
}
.blocked-screen .blk-actions {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%; max-width: 360px; margin-top: 4px;
}
/* Aviso de consecuencias (suspensión temporal / baneo definitivo) */
.blocked-screen .blk-warn {
  width: 100%; max-width: 360px;
  background: linear-gradient(135deg, rgba(255,176,59,.14), rgba(255,138,59,.14));
  border: 1px solid rgba(255,176,59,.35);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.blocked-screen .blk-warn-bad {
  background: linear-gradient(135deg, rgba(255,59,107,.14), rgba(255,91,59,.14));
  border-color: rgba(255,59,107,.35);
}
.blocked-screen .blk-warn-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13px;
  color: var(--text, #14161d);
  margin-bottom: 4px;
}
.blocked-screen .blk-warn-ico { font-size: 14px; }
.blocked-screen .blk-warn-p {
  margin: 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-soft, var(--text-muted, #b7bdcc));
}
.blocked-screen .blk-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
[data-theme="light"] .blocked-screen .blk-warn-p { color: #3a3f4a; }
.blocked-screen .blk-foot {
  font-size: 12px; color: var(--text-muted, #8a8f9a);
  max-width: 340px; margin: 6px 0 0;
}
[data-theme="light"] .blocked-screen .blk-card {
  background: #fff;
  border-color: #eef0f5;
  box-shadow: 0 4px 16px rgba(20,22,29,.05);
}
[data-theme="light"] .blocked-screen .blk-v { color: #14161d; }

/* Pantalla de apelación embebida (dentro del "teléfono"). */
.appeal-screen {
  display: flex; flex-direction: column;
  height: 100%; min-height: 100%;
  background: var(--bg, transparent);
}
.appeal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
}
.appeal-back {
  background: none; border: 0; padding: 6px 8px;
  border-radius: 8px; cursor: pointer;
  color: var(--brand-1, #ff3b6b);
  font-size: 14px; font-weight: 700;
}
.appeal-back:hover { background: rgba(255,59,107,.08); }
.appeal-topbar-title {
  font-size: 15px; font-weight: 800; color: var(--text);
}
.appeal-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.appeal-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 6px; margin-bottom: 4px;
}
.appeal-hero-ico {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff; font-size: 28px;
  box-shadow: 0 10px 24px rgba(255,59,107,.22);
}
/* Formulario de apelación (compartido con la pantalla embebida) */
/* (Legacy) La apelación ya no se muestra en el modal — se renderiza como
   pantalla embebida dentro del viewport. */
.appeal-title { margin: 4px 0 2px; font-size: 20px; font-weight: 800; color: var(--text); }
.appeal-sub { margin: 0 0 4px; font-size: 13px; color: var(--text-muted, #8a8f9a); line-height: 1.5; max-width: 320px; }
.appeal-form { display: flex; flex-direction: column; gap: 6px; }
.appeal-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #8a8f9a); font-weight: 600;
  margin-top: 8px;
}
.appeal-input, .appeal-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.12));
  color: var(--text, inherit);
  font: inherit;
}
.appeal-textarea { resize: vertical; min-height: 120px; line-height: 1.4; }
.appeal-input:focus, .appeal-textarea:focus {
  outline: none; border-color: var(--brand-1, #ff3b6b);
}
.appeal-helper { font-size: 11px; color: var(--text-muted, #8a8f9a); margin-top: 2px; }
.appeal-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
}
.appeal-ok {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; padding: 8px 0 4px;
}
.appeal-ok-icon {
  font-size: 44px; line-height: 1;
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
[data-theme="light"] .appeal-input, [data-theme="light"] .appeal-textarea {
  background: #fff; border-color: #dfe2ea; color: #14161d;
}
.restriction-sheet { display: grid; gap: 10px; padding: 4px; }
.restriction-list { display: grid; gap: 8px; }
.restriction-item {
  background: var(--surface-2); padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border);
}
.restriction-item .muted { color: var(--text-muted); }

/* Nearby users grid on the Chats screen */
.nearby-section { padding: 10px 16px 4px; border-bottom: 1px solid var(--border); }
.nearby-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.nearby-head h5 { margin: 0; color: var(--text-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.nearby-count { font-size: 11px; color: var(--text-muted); }
.nearby-grid {
  /* V830 · Antes eran 4 columnas fijas y sólo se bajaba a 3/2 en pantallas
     táctiles. En PC (puntero fino) la app va dentro de un marco tipo móvil
     (~382px), así que 4 columnas dejaban tarjetas de ~83px donde el texto de
     ubicación no cabía y se cortaba. Con auto-fill + minmax se ajustan solas a
     tantas columnas legibles como quepan, en PC y en móvil. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
/* V741 · Igual que .result-card: anillo degradado permanente + esquinas suaves. */
.nearby-card {
  position: relative; aspect-ratio: 3 / 4; border-radius: 20px;
  background-size: cover; background-position: center;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.nearby-card::before {
  /* Anillo degradado de marca SIEMPRE visible (no depende del hover) */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 2px;
  background: var(--grad-brand, linear-gradient(135deg,#ff3b6b,#ff8a3b));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .82; transition: opacity .18s ease;
}
.nearby-card:hover, .nearby-card:active {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 32px rgba(255,59,107,.28);
}
.nearby-card:hover::before, .nearby-card:active::before { opacity: 1; }
.nearby-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}
.nearby-status {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  color: #fff; font-size: 10px; font-weight: 600; line-height: 1;
}
.nearby-status .nearby-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #94a3b8;
}
.nearby-status.on .nearby-dot { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25); }
.nearby-status.off .nearby-dot { background: #94a3b8; }
.nearby-info {
  position: absolute; bottom: 6px; left: 6px; right: 6px; z-index: 2;
  color: white; line-height: 1.2;
  padding: 6px 8px; border-radius: 12px;
  background: rgba(18,18,26,.30); backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.10);
}
/* V770 · Nombre y ubicación en UNA sola línea con puntos suspensivos. Antes el
   texto largo (p. ej. "Madrid · No comparte su ubicación") se partía en muchas
   líneas y llenaba la tarjeta, tapando la foto y el perfil. */
.nearby-info strong {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: 12.5px; text-shadow: 0 1px 2px rgba(0,0,0,.4);
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  word-break: break-word; line-height: 1.15;
}
.nearby-info small {
  display: block; font-size: 10.5px; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nearby-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  color: #fff; font-size: 9.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px; max-width: 78%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nearby-chips-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 10px; align-items: center;
}
.chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-size: 12px; font-weight: 600;
}
.chip-filter.primary { background: var(--grad-brand); color: white; border-color: transparent; }
.chip-filter.active { background: rgba(255,59,107,.15); border-color: var(--brand-1); color: var(--brand-1); }
.chip-filter .chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;
}
.chip-filter .chip-dot.on { background: #22c55e; }
.chip-filter .chip-count {
  background: rgba(255,255,255,.28); color: white;
  min-width: 16px; height: 16px; border-radius: 999px;
  padding: 0 5px; font-size: 10.5px; display: inline-grid; place-items: center;
}
.nearby-empty {
  grid-column: 1 / -1;
  padding: 18px; text-align: center;
  background: var(--surface-2); border-radius: 12px;
  color: var(--text-muted); display: grid; gap: 4px;
}
.nearby-empty strong { color: var(--text); font-size: 14px; }

/* Locked cards (plan profile limit) */
.nearby-card.locked {
  position: relative; cursor: pointer;
  filter: blur(6px) saturate(.7);
  transition: transform .12s ease;
}
.nearby-card.locked::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  border-radius: inherit;
}
.nearby-card.locked .nearby-lock {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  filter: none; /* keep icon crisp */
}
.nearby-card.locked .nearby-lock span {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.nearby-upgrade {
  grid-column: 1 / -1;
  display: grid; gap: 4px; text-align: center;
  padding: 12px 14px; margin-top: 4px;
  background: linear-gradient(135deg, #ff3b6b 0%, #ff8a3b 100%);
  color: white; border: none; border-radius: 14px;
  cursor: pointer; font: inherit;
  box-shadow: 0 8px 22px rgba(255,59,107,.28);
}
.nearby-upgrade strong { font-size: 14px; }
.nearby-upgrade small { opacity: .95; font-size: 12px; }

/* Plan limit modal grid */
.plan-limit-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 12px 0 14px;
}
.plan-limit-card {
  position: relative;
  padding: 10px 8px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  text-align: center; display: grid; gap: 2px;
}
.plan-limit-card.best {
  border-color: transparent;
  background: linear-gradient(135deg, rgba(255,59,107,.12), rgba(255,138,59,.12));
  box-shadow: 0 0 0 1.5px #ff3b6b inset;
}
.plan-limit-card h4 { margin: 0; font-size: 13px; color: var(--text); }
.plan-limit-card .plm-num { font-size: 13px; font-weight: 700; color: var(--text); }
.plan-limit-card small { color: var(--text-muted); font-size: 11.5px; }
.plan-limit-card .plm-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: white; font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .plan-limit-grid { grid-template-columns: 1fr; }
}
.nearby-filters-sheet { display: grid; gap: 12px; padding: 4px; max-height: 78vh; overflow: auto; }
.nearby-filters-sheet .filter-group { display: grid; gap: 6px; }
.nearby-filters-sheet .filter-group h5 { margin: 0; font-size: 12px; text-transform: uppercase; color: var(--text-soft); letter-spacing: .04em; }
@media (max-width: 480px) and ((pointer: coarse) or (hover: none)) {
  .nearby-grid { grid-template-columns: repeat(2, 1fr); }
}

.chat-list { padding: 6px 0 20px; }
.chat-item {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 12px;
  padding: 12px 16px; align-items: center; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.chat-item:hover { background: var(--surface-2); }
.chat-item .avatar {
  width: 56px; height: 56px; border-radius: 50%; background-size: cover; background-position: center;
  position: relative;
}
.chat-item .avatar .online-dot {
  position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--surface);
}
.chat-item .txt strong { display: block; font-size: 15px; }
.chat-item .txt small { color: var(--text-soft); font-size: 13px; display: block; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;}
.chat-item .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.chat-item .meta time { font-size: 11px; color: var(--text-muted); }
.chat-item .meta .unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--brand-1); color: white; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center;
}

/* -------- Chat window -------- */
.chat-header {
  position: sticky; top: 0; z-index: 4;
  display: grid; grid-template-columns: 42px 48px 1fr auto auto; align-items: center;
  gap: 10px; padding: 8px 12px; height: 62px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.chat-header .name { line-height: 1.25; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-header .name strong { font-size: 15px; display: block; }
.chat-header .name small { font-size: 11.5px; display: block; margin-top: 2px; }
.chat-header .name small.status-online { color: var(--success); }
.chat-header .name small.status-offline { color: var(--text-muted); }
.chat-header .avatar {
  width: 42px; height: 42px; border-radius: 50%; background-size: cover; background-position: center;
}
.chat-header .avatar.clickable,
.chat-header .name.clickable { cursor: pointer; }
.chat-header .name.clickable { user-select: none; }
.chat-header .avatar.clickable:hover { filter: brightness(1.05); }
.chat-header .name.clickable:hover strong { text-decoration: underline; }
.messages {
  padding: 14px; display: flex; flex-direction: column; gap: 6px;
  min-height: calc(100% - 62px - 64px);
}
.message-day {
  align-self: center; font-size: 11px; color: var(--text-muted);
  background: var(--surface-2); padding: 4px 10px; border-radius: 999px; margin: 8px 0;
}
.msg {
  max-width: 78%; padding: 9px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.35; position: relative;
  word-wrap: break-word;
}
.msg time { display: block; font-size: 10.5px; margin-top: 3px; opacity: .7; }
.msg.in { background: var(--surface-2); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.out {
  background: var(--grad-brand); color: white; align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.msg.out time { color: rgba(255,255,255,.85); }
.msg-photo { padding: 4px; background: var(--surface-2); border-radius: 16px; }
.msg-photo img { border-radius: 14px; max-width: 200px; }
.msg-audio {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.msg-audio .play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.3); border: 0; display: grid; place-items: center; color: white; }
.msg.in .msg-audio .play { background: var(--brand-1); color: white; }
.msg-audio .wave { display: flex; gap: 2px; align-items: end; height: 22px; }
.msg-audio .wave span { width: 2px; background: currentColor; border-radius: 2px; opacity: .6; }

/* Read receipts on outgoing messages */
.msg-receipt {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 10.5px; line-height: 1;
  color: rgba(255,255,255,.9);
}
.msg-receipt small { color: rgba(255,255,255,.9); font-size: 10.5px; }
.receipt-check { font-weight: 700; letter-spacing: -1px; }
.receipt-check.single { opacity: .8; }
.receipt-check.double { color: #7ff2c9; opacity: 1; text-shadow: 0 0 6px rgba(127,242,201,.35); }
.receipt-unlock {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35);
  color: white; border-radius: 999px; padding: 3px 9px; font-size: 10.5px;
  cursor: pointer; font-weight: 600;
}
.receipt-unlock:hover { background: rgba(255,255,255,.28); }

/* Reads paywall modal */
.reads-paywall { display: grid; gap: 14px; padding: 4px; }
.rp-hero { text-align: center; display: grid; gap: 6px; padding: 4px 0 6px; }
.rp-hero-ic { font-size: 30px; }
.rp-h { margin: 0; font-size: 20px; }
.rp-p { margin: 0; color: var(--text-muted); font-size: 13.5px; }
.rp-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  background: var(--surface-2); padding: 10px; border-radius: 14px;
}
.rp-s-item { text-align: center; display: grid; gap: 3px; }
.rp-s-item small { color: var(--text-muted); font-size: 11px; }
.rp-s-item b { font-size: 14px; }
.rp-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rp-pack {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; display: grid; gap: 6px; text-align: center;
}
.rp-pack-title { font-weight: 700; font-size: 13px; }
.rp-pack-credits { color: var(--text-muted); font-size: 12px; }
.rp-pack-price { font-weight: 800; color: var(--brand-1); font-size: 15px; }
.rp-pack .btn.btn-sm { padding: 6px 8px; font-size: 12px; }
.rp-actions { display: grid; gap: 8px; margin-top: 4px; }
.rp-promo { display: grid; gap: 6px; margin-top: 2px; }
.rp-promo-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.rp-promo-input {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--input-bg, rgba(255,255,255,.06));
  color: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
}
.rp-promo-msg { font-size: 12px; min-height: 16px; opacity: .9; }
.rp-promo-msg.is-ok  { color: #22c55e; }
.rp-promo-msg.is-err { color: #ef4444; }
.rp-pack-price s { color: var(--text-muted); font-weight: 500; margin-right: 4px; }

/* Active-campaigns banner inside the reads paywall */
.rp-campaigns {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,59,107,.10), rgba(255,138,59,.08));
  border: 1px solid rgba(255,59,107,.22);
}
.rp-camp-head { display: flex; align-items: center; justify-content: space-between; }
.rp-camp-title { font-weight: 700; font-size: 12.5px; }
.rp-camp-all {
  background: transparent; border: 0; color: var(--brand-1, #ff3b6b);
  font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 4px;
}
.rp-camp-strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; }
.rp-camp-chip {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,59,107,.35);
  background: rgba(255,59,107,.08);
  color: inherit; cursor: pointer; font-size: 12px;
  transition: transform .15s ease, background .15s ease;
}
.rp-camp-chip:hover { transform: translateY(-1px); background: rgba(255,59,107,.16); }
.rp-camp-disc { font-weight: 800; color: var(--brand-1, #ff3b6b); }
.rp-camp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .05em; }

/* Offers screen (Yo → Ofertas y promociones) */
.offers-wrap { padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.offers-hero {
  text-align: center;
  padding: 20px 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,59,107,.28);
}
.offers-hero-emoji { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.offers-hero-h { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.offers-hero-p { margin: 0; font-size: 13.5px; opacity: .95; line-height: 1.4; }
.offers-list { display: flex; flex-direction: column; gap: 10px; }
.offers-loading { text-align: center; padding: 24px; color: var(--text-muted); }
.offers-section-h {
  margin: 8px 2px 2px; font-size: 13px; font-weight: 700;
  color: var(--text-soft); letter-spacing: .02em;
}
.offer-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 12px;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.offer-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
}
.offer-card.is-upcoming::before { background: linear-gradient(180deg, #3b82f6, #6366f1); }
.offer-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.offer-disc {
  font-size: 26px; font-weight: 900; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.offer-code-wrap { display: flex; align-items: center; gap: 6px; }
.offer-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800; font-size: 14px; letter-spacing: .06em;
  padding: 6px 10px; border-radius: 8px;
  background: rgba(255,59,107,.10);
  border: 1px dashed rgba(255,59,107,.35);
  color: var(--text);
}
.offer-copy-btn {
  background: transparent; border: 0; cursor: pointer;
  font-size: 16px; padding: 4px 6px; border-radius: 6px;
  color: var(--text-soft);
}
.offer-copy-btn:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.offer-desc { font-size: 13px; color: var(--text-soft); line-height: 1.4; }
.offer-sub { font-size: 12px; color: var(--text-muted); }
.offer-cta { align-self: flex-end; margin-top: 4px; padding: 6px 12px; font-size: 12px; }
.offers-empty {
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--border); border-radius: 14px; color: var(--text-muted);
}
.offers-empty-emoji { font-size: 40px; margin-bottom: 10px; }
.offers-empty h3 { margin: 4px 0 6px; color: var(--text); }
.offers-empty p { margin: 0; font-size: 13px; }
.rp-loading, .rp-empty { color: var(--text-muted); text-align: center; padding: 12px; grid-column: 1 / -1; }
@media (max-width: 420px) and ((pointer: coarse) or (hover: none)) {
  .rp-packs { grid-template-columns: 1fr; }
}

.composer {
  position: sticky; bottom: 0; z-index: 4;
  display: grid; grid-template-columns: 42px 1fr 42px 42px; gap: 8px; align-items: center;
  padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--border);
}
.composer input {
  height: 42px; border-radius: 999px; padding: 0 14px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
}
.composer input:focus { outline: none; border-color: var(--brand-1); }

/* V635 · Sugerencias de primer mensaje (rompehielo) sobre el composer */
.first-msg-suggest {
  position: sticky; bottom: 62px; z-index: 3;
  padding: 8px 12px 4px; background: var(--surface);
  border-top: 1px solid var(--border);
}
.first-msg-suggest-title {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin: 0 0 6px 2px;
}
.first-msg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.first-msg-chip {
  border: 1px solid var(--border-strong); background: var(--surface-2);
  color: var(--text); border-radius: 999px; padding: 8px 14px;
  font-size: 13px; line-height: 1.25; cursor: pointer; text-align: left;
  max-width: 100%; transition: border-color .15s, background .15s, transform .05s;
}
.first-msg-chip:hover { border-color: var(--brand-1); }
.first-msg-chip:active { transform: scale(.98); }

/* -------- Profile -------- */
.profile-hero {
  aspect-ratio: 1/1;
  background-size: cover; background-position: center;
  position: relative;
}
.profile-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--bg));
}
.profile-topbar {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
  display: flex; justify-content: space-between;
}
.profile-topbar .icon-btn {
  background: rgba(0,0,0,.35); color: white; backdrop-filter: blur(4px);
}
.profile-body { padding: 0 20px 24px; margin-top: -30px; position: relative; z-index: 2; }
.profile-name-row { display: flex; align-items: baseline; gap: 8px; }
.profile-name-row h2 { margin: 0; font-size: 30px; letter-spacing: -.01em; }
.profile-name-row .age { color: var(--text-soft); font-size: 22px; font-weight: 500; }
.profile-meta { color: var(--text-soft); margin: 4px 0 14px; font-size: 14px; }
.profile-meta .dot { margin: 0 6px; opacity: .5; }
.section { margin-top: 20px; }
.section h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); }
.section p { margin: 0; line-height: 1.5; font-size: 14.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600;
}
.badge svg { width: 14px; height: 14px; margin-right: 4px; }
.profile-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.profile-photo { aspect-ratio: 3/4; border-radius: 14px; background-size: cover; background-position: center; }
.profile-actions { display: flex; gap: 10px; margin-top: 20px; }
.profile-actions .btn { flex: 1; }

/* -------- Me / Settings / Subscriptions -------- */
.me-hero {
  padding: 24px 20px 20px;
  display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.me-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background-size: cover; background-position: center;
  padding: 3px; background-clip: content-box;
  background-color: var(--surface);
  outline: 3px solid transparent;
  border: 3px solid transparent;
  position: relative;
}
.me-avatar::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff3b6b, #ff8a3b, #a855f7, #ff3b6b);
  z-index: -1;
}
.me-name { font-size: 20px; font-weight: 800; margin: 0; }
/* V771 · Distintivo azul de cuenta verificada junto al nombre en el perfil. */
.me-name-row { display: inline-flex; align-items: center; gap: 6px; }
.me-verified-badge {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #2a7dff; color: #fff;
  box-shadow: 0 2px 6px rgba(42,125,255,.45);
}
.me-mail { color: var(--text-soft); font-size: 13px; }
.me-tier {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: white; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; margin-top: 4px;
}
.me-edit {
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 13px;
}
.settings-list { padding: 8px 0 20px; }
.settings-section {
  padding: 12px 20px 4px; font-size: 12px; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; letter-spacing: .04em;
}
.settings-item {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 20px; background: var(--surface); border-top: 1px solid var(--border);
  cursor: pointer;
}
.settings-item:hover { background: var(--surface-2); }
.settings-item .ico {
  width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2);
  display: grid; place-items: center; color: var(--brand-1);
}
.settings-item strong { font-size: 14.5px; font-weight: 600; display: block; }
.settings-item small { color: var(--text-muted); font-size: 12px; }
.settings-item .chev { color: var(--text-muted); }
.settings-item.danger .ico { color: var(--danger); }
.settings-item.danger strong { color: var(--danger); }

/* Subscriptions */
.subs-hero {
  background: var(--grad-brand);
  color: white; padding: 26px 20px 24px;
  text-align: center;
}
.subs-hero h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.subs-hero p { margin: 0; opacity: .95; }
.subs-toggle {
  display: inline-flex; background: rgba(255,255,255,.18); border-radius: 999px; padding: 4px;
  margin-top: 14px; backdrop-filter: blur(4px);
}
.subs-toggle button {
  border: 0; background: transparent; color: white; padding: 8px 16px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
}
.subs-toggle button.on { background: white; color: var(--brand-1); }
.plans { padding: 16px 14px 20px; display: grid; gap: 12px; }
.plan {
  border-radius: 20px; padding: 18px; background: var(--surface);
  border: 1.5px solid var(--border); position: relative; overflow: hidden;
}
.plan.gold { border-color: transparent;
  background: linear-gradient(135deg, #fffbeb, #fef3c7); }
.plan.gold::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px;
  background: linear-gradient(135deg, #f59e0b, #ea580c); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.plan.platinum {
  background: linear-gradient(135deg, #f3e8ff, #e0e7ff);
}
.plan.platinum::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1.5px;
  background: linear-gradient(135deg, #6366f1, #a855f7); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-theme="dark"] .plan.gold, [data-theme="dark"] .plan.platinum { color: #111; }
.plan .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan .tier { font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan .price { font-size: 22px; font-weight: 800; text-align: right; }
.plan .price small { font-size: 12px; color: var(--text-soft); font-weight: 500; }
.plan .plan-sub { font-size: 11px; color: var(--text-soft, #9ca0a9); font-weight: 500; margin-top: 2px; }
.plan .plan-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.plan ul { margin: 12px 0 14px; padding: 0; list-style: none; display: grid; gap: 6px; }
.plan ul li { font-size: 13.5px; padding-left: 20px; position: relative; }
.plan ul li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-1); font-weight: 800; }
.plan.gold ul li::before { color: #f59e0b; }
.plan.platinum ul li::before { color: #6366f1; }
.plan.free { opacity: .95; }
.plan.free .tier { color: var(--text-soft); }
.plan.free ul li::before { color: var(--text-soft); }

/* Free-tier quota row inside each plan card */
.plan-quota {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin: 10px 0 4px; padding: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
}
[data-theme="light"] .plan-quota { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.06); }
.plan.gold .plan-quota, .plan.platinum .plan-quota { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.1); }
.pq-item { display: grid; gap: 2px; text-align: center; align-content: start; }
.pq-item span { font-size: 15px; line-height: 1; }
.pq-item small { font-size: 11px; line-height: 1.25; color: inherit; opacity: .85; }

/* Chat topbar "buy reads" banner */
.topbar-reads-btn { color: var(--brand-1); }
.reads-banner {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px;
  align-items: center; width: calc(100% - 24px);
  margin: 8px 12px 4px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(255,59,107,.10), rgba(255,138,59,.10));
  border: 1px solid rgba(255,59,107,.25);
  border-radius: 12px;
  cursor: pointer; text-align: left; font: inherit; color: var(--text);
}
.reads-banner:hover { border-color: rgba(255,59,107,.45); }
.reads-banner .rb-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,59,107,.14); font-size: 18px;
}
.reads-banner .rb-body { display: grid; }
.reads-banner .rb-body strong { font-size: 13.5px; }
.reads-banner .rb-body small { font-size: 11.5px; color: var(--text-muted); }
.reads-banner .rb-cta {
  font-size: 12.5px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b); color: #fff;
}

/* Plan card ads status */
.pq-item.ads-on  span,
.pq-item.ads-on  small { color: #f59e0b; opacity: 1; }
.pq-item.ads-off span,
.pq-item.ads-off small { color: #22c55e; opacity: 1; }

/* Ad preview inside the Free plan card */
.plan-ad-preview {
  margin: 8px 0 4px; padding: 10px;
  border: 1px dashed rgba(0,0,0,.22); border-radius: 10px;
  background: rgba(255,255,255,.55);
  display: grid; gap: 6px;
}
[data-theme="dark"] .plan-ad-preview { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.plan.free .plan-ad-preview { background: rgba(0,0,0,.03); }
.plan-ad-preview .pap-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #b45309; background: rgba(245,158,11,.15);
  padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content;
}
.plan-ad-preview .pap-body { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; }
.plan-ad-preview .pap-thumb {
  width: 36px; height: 36px; border-radius: 8px;
  display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(135deg, #fde68a, #fca5a5);
}
.plan-ad-preview strong { font-size: 13px; }
.plan-ad-preview small { display: block; font-size: 11.5px; opacity: .8; margin-top: 2px; }

/* Real ad slots (Free users only) */
.ad-slot {
  margin: 10px 12px; padding: 10px 12px;
  background: var(--panel, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  display: grid; gap: 8px;
}
[data-theme="dark"] .ad-slot { background: rgba(255,255,255,.04); }
.ad-slot .ad-tag {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.ad-slot .ad-tag > span {
  background: rgba(245,158,11,.14); color: #b45309;
  padding: 2px 6px; border-radius: 4px;
}
[data-theme="dark"] .ad-slot .ad-tag > span { color: #fbbf24; }
.ad-slot .ad-remove {
  background: none; border: none; color: var(--brand-1);
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
  letter-spacing: 0; text-transform: none;
}
.ad-slot .ad-network-body { min-height: 60px; }
.ad-slot .ad-network-body ins.adsbygoogle { display: block; min-height: 90px; }
.ad-slot .ad-body {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
}
.ad-slot .ad-thumb {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, #fde68a, #f472b6);
}
.ad-slot .ad-info { min-width: 0; }
.ad-slot .ad-info strong { font-size: 13.5px; display: block; }
.ad-slot .ad-info small { font-size: 12px; color: var(--text-muted); display: block; line-height: 1.35; }
.ad-slot .ad-info .ad-brand {
  font-size: 10.5px; color: var(--text-muted); opacity: .8; margin-top: 2px; display: inline-block;
}
.ad-slot .ad-cta {
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b); color: white;
  border: none; padding: 8px 12px; border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 100px);
  background: var(--text); color: var(--bg);
  padding: 12px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); z-index: 100;
  /* V950 · visibility:hidden cuando no hay aviso. El escondite del toast era
     SOLO el desplazamiento translateY(100px): con el offset de V938/V947
     (bottom sube ~78px cuando hay tabbar) la pastilla "oculta" asomaba por el
     borde inferior del viewport como una raya blanca en escritorio con
     sesión iniciada. visibility se retira con retardo para que la animación
     de salida siga viéndose, y al entrar no espera porque .show lo devuelve
     al instante. */
  visibility: hidden;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), visibility 0s linear .35s;
}
.toast.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
}
/* V938 · Cuando la tabbar inferior está visible, bottom:32px cae ENCIMA del
   menú y tapa los botones (el aviso «Notificaciones activas» era el caso más
   visible). Lo subimos por encima de la barra usando la misma condición que
   ya usa .theme-toggle. En pantallas sin tabbar (welcome/onboarding/modales
   a pantalla completa) sigue en 32px como antes. */
body:has(#tabbar:not([hidden])) .toast {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tab-height, 62px) + 16px);
}
/* V947 · Refuerzo sin :has() · En la práctica el selector de arriba no se
   aplicaba en todos los clientes (WebViews/Chrome con caché previa) y el toast
   volvía a caer a bottom:32px, montado sobre la tabbar y recortado por el área
   de gestos: el aviso se veía "pillado" abajo tapando el menú. app.js refleja
   ahora la visibilidad de la tabbar en body.tabbar-on mediante un
   MutationObserver, y esta regla —sin :has()— es la que garantiza el offset en
   todos los navegadores. Misma altura que la regla de arriba para que ambas
   coincidan si las dos aplican. */
body.tabbar-on .toast {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tab-height, 62px) + 16px);
}

/* Modal / bottom sheet */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); animation: fadeIn .2s;}
.modal-sheet {
  position: relative;
  width: min(400px, 100%);
  max-height: 92dvh; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border-radius: 24px 24px 0 0;
  padding-top: 6px;
  animation: slideUp .3s cubic-bezier(.2,.9,.2,1);
}
.modal-sheet::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 999px;
  background: var(--border-strong); margin: 6px auto 8px;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } }

/* V764 · Cuando el mapa a pantalla completa (.map-overlay, z-index:4000) está
   abierto, sus hojas de acciones (tocar un pin, cuadrícula) usan el modal
   normal, que tenía z-index:60 y quedaba DETRÁS del mapa → "al pulsar en el
   usuario no sale nada". Subimos el modal por encima del mapa mientras está
   abierto. */
body.map-open .modal { z-index: 4100; }

/* Theme toggle — default top-right (welcome/onboarding). Moves to bottom-left
   when the app tabbar is visible so it doesn't collide with topbar filters. */
.theme-toggle {
  position: fixed; right: 14px; top: 14px; z-index: 200;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
  transition: none;
}
/* V756 · Dentro de la app el botón flotante de tema tapaba el botón "Volver"
   (acción izquierda de Explorar) y otros controles. Como el tema también se
   cambia desde Perfil → Tema, ocultamos el botón flotante cuando la app está
   abierta (tabbar visible). Sigue visible en bienvenida/onboarding. */
body:has(#tabbar:not([hidden])) .theme-toggle,
body.app-open .theme-toggle {
  display: none !important;
}

/* Empty state */
.empty {
  padding: 40px 24px; text-align: center; color: var(--text-soft);
}
.empty h3 { color: var(--text); margin: 8px 0 6px; }

/* Responsive: mobile fills phone frame.
   We also trigger on `pointer: coarse` and `hover: none` so that touch devices
   in "desktop site" mode still get the native mobile layout. */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  html, body { overflow-x: hidden; }
  .stage { padding: 0; grid-template-columns: 1fr; gap: 0; background: var(--bg); }
  .stage-side { display: none !important; }
  .phone {
    width: 100vw; height: 100dvh; max-height: none;
    max-width: 100vw;
    border-radius: 0;
    box-shadow: none;
  }
  .phone-notch { display: none; }
  .phone-home { display: none; }
  .phone-status { display: none; }
  .app-viewport { padding-top: env(safe-area-inset-top, 0); }
  /* Welcome/hero cabe sin scroll: escalado ajustado por contenido.
     El resto de pantallas (perfil detalle, "Yo", chats, likes, etc.) deben
     seguir permitiendo scroll normal. */
  .app-viewport .screen.screen-hero { overflow: hidden !important; }
  .app-viewport .screen-profile-detail,
  .app-viewport .screen-me,
  .app-viewport .screen-me-sub { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  /* V747 · En móvil la foto del perfil ocupaba 3/4 (muy alta) y tapaba toda la
     pantalla: el nombre y los detalles quedaban ocultos y no era evidente que
     había que hacer scroll. Limitamos su altura para que asome el inicio de la
     ficha bajo la foto y, junto al aviso "desliza para ver el perfil", se
     entienda que hay más contenido. */
  .screen-profile-detail .pd-gallery {
    aspect-ratio: auto;
    height: 58vh;
    max-height: 58vh;
  }
  .theme-toggle { right: 10px; top: 10px; }
  body:has(#tabbar:not([hidden])) .theme-toggle,
  body.app-open .theme-toggle {
    display: none !important;
  }

  /* Compact welcome/hero para móvil.
     Padding-bottom generoso para dejar espacio por encima de la barra
     dinámica de Chrome Android (que cambia de tamaño al hacer scroll). */
  .screen-hero {
    padding: 4px 12px 8px;
    justify-content: flex-start;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }
  .welcome-logo { margin-top: 4px; margin-bottom: 3px; }
  .welcome-heart, .welcome-heart.logo-transparent {
    width: min(var(--logo-size, 150px), 150px) !important;
    height: min(var(--logo-size, 150px), 150px) !important;
    max-width: 150px !important;
    max-height: 150px !important;
  }
  .welcome-title { display: none; }
  .welcome-sub { margin: 2px 0 4px; font-size: 12px; }
  .btn { height: 38px; font-size: 13px; }
  .welcome-cta {
    margin-top: 0; gap: 4px; padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .welcome-or { margin: 4px 0 2px; font-size: 10px; letter-spacing: .08em; }
  .welcome-oauth { grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 0; }
  .oauth-btn { height: 34px; border-radius: 10px; font-size: 11.5px; }
  .oauth-btn span { font-size: 11.5px; }
  .welcome-terms { margin-top: 2px; font-size: 10px; line-height: 1.25; }
}

/* PWA standalone (app instalada): sin barra de URL, hay más espacio vertical.
   Logo compacto y "Cómo funciona" ampliado. Todo debe caber sin cortarse.
   NO afecta al navegador móvil normal. */
@media all and (display-mode: standalone) {
  .welcome-logo { margin-top: 18px !important; margin-bottom: 8px !important; }
  .welcome-heart, .welcome-heart.logo-transparent {
    width: min(var(--logo-size, 180px), 180px) !important;
    height: min(var(--logo-size, 180px), 180px) !important;
    max-width: 180px !important;
    max-height: 180px !important;
  }
  .welcome-sub { margin: 6px 0 8px !important; font-size: 13.5px !important; }
  .welcome-below { margin-top: 16px !important; gap: 6px !important; }
  .welcome-steps-title { font-size: 11.5px !important; margin: 2px 0 3px !important; }
  .welcome-steps { gap: 6px !important; }
  .welcome-step { padding: 8px 10px !important; gap: 9px !important; border-radius: 12px !important; }
  .welcome-step-ic { width: 28px !important; height: 28px !important; font-size: 12.5px !important; flex: 0 0 28px !important; border-radius: 8px !important; }
  .welcome-step-h { font-size: 12.5px !important; }
  .welcome-step-p { font-size: 11.5px !important; line-height: 1.3 !important; margin-top: 1px !important; }
  .welcome-trust { gap: 5px 7px !important; margin-top: 6px !important; }
  .welcome-badge { padding: 5px 9px !important; font-size: 10.5px !important; }
  .welcome-foot { font-size: 10.5px !important; margin-top: 8px !important; margin-bottom: 12px !important; line-height: 1.45 !important; }
}

/* Utility */
.center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.small { font-size: 12.5px; color: var(--text-soft); }
.grow { flex: 1; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.pad { padding: 16px 20px; }

/* Scroll niceties */
.app-viewport::-webkit-scrollbar { width: 0; }
.screen::-webkit-scrollbar { width: 0; }

/* --- Modal helpers ---- */
.sheet-title { padding: 4px 20px 8px; font-size: 18px; font-weight: 800; }
.sheet-body { padding: 4px 20px 16px; color: var(--text-soft); font-size: 14px; }
.sheet-actions { padding: 8px 20px 20px; display: grid; gap: 8px; }

/* Report reasons */
.reason-list { padding: 0 20px 12px; display: grid; gap: 8px; }
.reason-item {
  padding: 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px;
  text-align: left; font-family: inherit; width: 100%;
}
[data-theme="dark"] .reason-item {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: #f0f2f7;
}
[data-theme="dark"] .reason-item.current { color: #ff8a3b; }
.reason-item:hover { border-color: var(--brand-1); }

/* ============================================================
   Welcome — bloque "welcome-below" (stats, cómo funciona, testimonio)
   ============================================================ */
.welcome-below {
  margin-top: 32px;
  margin-bottom: max(40px, env(safe-area-inset-bottom, 0px) + 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.welcome-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.welcome-stat {
  background: var(--surface, rgba(255,255,255,0.75));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border, rgba(255,255,255,0.9));
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(20, 22, 29, 0.04);
}
.welcome-stat-n {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.welcome-stat-l {
  font-size: 11px;
  color: var(--text-soft, #5a5e69);
  margin-top: 2px;
  letter-spacing: .3px;
}

.welcome-steps-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-soft, #5a5e69);
  text-align: center;
  margin: 8px 0 4px;
}
.welcome-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.welcome-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--surface, rgba(255,255,255,0.75));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border, rgba(255,255,255,0.9));
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
}
.welcome-step-txt { min-width: 0; }
.welcome-step-ic {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 4px 12px rgba(255, 59, 107, 0.25);
}
.welcome-step-txt { flex: 1; }
.welcome-step-h {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #14161d);
  line-height: 1.2;
}
.welcome-step-p {
  font-size: 12px;
  color: var(--text-soft, #5a5e69);
  margin-top: 3px;
  line-height: 1.4;
}

.welcome-quote {
  background: var(--surface, rgba(255,255,255,0.75));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border, rgba(255,255,255,0.9));
  border-radius: 18px;
  padding: 16px 16px 14px;
  text-align: left;
  position: relative;
}
.welcome-quote::before {
  content: "\201C";
  position: absolute;
  top: -6px; left: 14px;
  font-family: Georgia, serif;
  font-size: 60px; line-height: 1;
  color: var(--brand-1, #ff3b6b);
  opacity: .35;
}
.welcome-quote-txt {
  font-size: 13.5px;
  color: var(--text, #14161d);
  line-height: 1.5;
  padding-left: 8px;
}
.welcome-quote-by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-left: 8px;
}
.welcome-quote-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #eee center/cover;
}
.welcome-quote-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #14161d);
}
.welcome-quote-role {
  font-size: 11px;
  color: var(--text-muted, #9ca0a9);
}

.welcome-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 0 8px;
}
.welcome-badge {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(20, 22, 29, 0.06);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text, #14161d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  text-align: center;
}
.welcome-badge svg {
  width: 12px; height: 12px;
  color: var(--brand-1, #ff3b6b);
  flex: 0 0 auto;
}

.welcome-foot {
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted, #9ca0a9);
  margin-top: 10px;
  margin-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  line-height: 1.8;
  padding: 0 8px;
}
.welcome-foot a {
  color: var(--text-soft, #5a5e69);
  text-decoration: none;
  margin: 0 8px;
  display: inline-block;
}
.welcome-foot a:hover {
  color: var(--text, #14161d);
  text-decoration: underline;
}
.welcome-foot .foot-sep {
  display: inline-block;
  margin: 0 2px;
  color: var(--text-muted, #9ca0a9);
  opacity: 0.5;
  font-weight: 300;
  user-select: none;
  pointer-events: none;
}

/* Desktop: single-column centered layout for welcome-below */
@media (min-width: 720px) {
  .welcome-below {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    text-align: center;
    margin-top: 32px;
  }
  .welcome-steps { grid-template-columns: 1fr 1fr; display: grid; gap: 12px; }
  .welcome-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
  .welcome-foot { text-align: center; }
}

/* Mobile compact: fit "cómo funciona" without scroll.
   El objetivo es que en RETRATO, en cualquier tamaño de móvil (SE hasta Pro Max),
   NO queden huecos verticales grandes: el contenido se estira de forma
   proporcional y el footer se ancla al fondo sin dejar espacio blanco. */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  /* La CTA es el contenedor flex principal en el hero móvil. Le decimos que
     ocupe toda la altura restante para poder distribuir el espacio interno. */
  .screen-hero .welcome-cta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .welcome-below {
    margin-top: clamp(4px, 2vh, 14px) !important;
    margin-bottom: 0 !important;
    gap: clamp(2px, 1vh, 8px);
    padding-top: 0;
    /* Ocupa el resto del espacio disponible y distribuye los hijos. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* NO empujar el foot con margin-top:auto — eso creaba el hueco vacío.
     Ahora los pasos/trust son los que crecen para rellenar. */
  .welcome-below .welcome-foot { margin-top: 0 !important; }
  .welcome-cta { padding-bottom: 0 !important; }
  .welcome-steps-title {
    font-size: clamp(10px, 2.6vw, 12px);
    letter-spacing: .1em;
    margin: clamp(2px, 1vh, 6px) 0 clamp(2px, 1vh, 4px);
    flex: 0 0 auto;
  }
  .welcome-steps {
    gap: clamp(4px, 1.2vh, 8px);
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: 0;
  }
  .welcome-step {
    padding: clamp(6px, 1.4vh, 12px) clamp(10px, 3vw, 14px);
    gap: 10px;
    border-radius: 12px;
    align-items: center;
    min-height: 0;
  }
  .welcome-step-ic {
    width: clamp(26px, 7vw, 34px);
    height: clamp(26px, 7vw, 34px);
    font-size: clamp(12px, 3.2vw, 14px);
    border-radius: 8px;
    flex: 0 0 auto;
  }
  .welcome-step-h { font-size: clamp(11.5px, 3vw, 13.5px); line-height: 1.2; }
  .welcome-step-p { font-size: clamp(10.5px, 2.8vw, 12px); line-height: 1.3; margin-top: 1px; }
  .welcome-trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3px, 0.8vh, 6px) 6px;
    margin-top: clamp(3px, 0.8vh, 6px);
    padding: 0 2px;
    justify-items: stretch;
    flex: 0 0 auto;
  }
  .welcome-badge {
    justify-content: center;
    padding: clamp(4px, 1vh, 7px) clamp(6px, 2vw, 10px);
    font-size: clamp(9.5px, 2.6vw, 11px);
    min-width: 0;
    white-space: nowrap;
    width: 100%;
  }
  .welcome-badge svg { width: 11px; height: 11px; flex: 0 0 auto; }
  .welcome-foot {
    font-size: clamp(8.5px, 2.4vw, 10.5px);
    margin-top: clamp(3px, 0.8vh, 6px);
    margin-bottom: clamp(3px, 0.5vh, 6px);
    line-height: 1.35;
    padding: 0 4px;
    flex: 0 0 auto;
  }
  .welcome-foot a { margin: 0 1.5px; display: inline-block; white-space: nowrap; }
  /* Con 6 enlaces + copy no cabe: ocultamos el testimonio y las stats (que ya
     estaban ocultas) para no forzar scroll. */
  .welcome-quote, .welcome-stats { display: none !important; }
}

/* ============================================================
   Ajustes finos por altura de pantalla — evitan huecos en móviles
   altos (Pro Max, S23 Ultra) y aprietan más en pequeños (SE 1st gen).
   ============================================================ */
/* Móviles muy bajos (SE 1st gen ~568px, iPhone 8 ~667px landscape) */
@media (max-width: 900px) and (max-height: 640px) and ((pointer: coarse) or (hover: none)) {
  .welcome-heart, .welcome-heart.logo-transparent {
    width: min(var(--logo-size, 108px), 108px) !important;
    height: min(var(--logo-size, 108px), 108px) !important;
    max-width: 108px !important;
    max-height: 108px !important;
  }
  .welcome-logo { margin-top: 2px !important; margin-bottom: 0 !important; }
  .welcome-sub { display: none; }
  .welcome-below .welcome-steps { grid-template-rows: auto auto; }
}
/* Móviles altos (Pro Max, Ultra >800px) — repartimos el espacio extra
   en el bloque de pasos para que no se acumule al final. */
@media (max-width: 900px) and (min-height: 800px) and ((pointer: coarse) or (hover: none)) {
  .welcome-below { gap: 8px; }
  .welcome-heart, .welcome-heart.logo-transparent {
    width: min(var(--logo-size, 168px), 168px) !important;
    height: min(var(--logo-size, 168px), 168px) !important;
    max-width: 168px !important;
    max-height: 168px !important;
  }
  .welcome-step { padding: 14px 16px; }
  .welcome-badge { padding: 8px 12px; font-size: 11.5px; }
}
/* Móviles muy estrechos (~320px, iPhone 5/SE 1st) — reducimos aún más */
@media (max-width: 340px) and ((pointer: coarse) or (hover: none)) {
  .welcome-oauth { grid-template-columns: 1fr 1fr 1fr; gap: 3px !important; }
  .oauth-btn { height: 32px !important; font-size: 10.5px !important; padding: 0 4px !important; }
  .oauth-btn span { font-size: 10.5px !important; }
  .welcome-step-p { font-size: 10px !important; }
  .welcome-badge { font-size: 9.5px !important; padding: 4px 6px !important; }
  .welcome-foot { font-size: 8.5px !important; }
}

@media (prefers-color-scheme: dark) {
  .welcome-badge {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
  }
}
[data-theme="dark"] .welcome-badge {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .welcome-sub,
[data-theme="dark"] .screen-hero .welcome-sub,
[data-theme="dark"] .screen-hero.hero-light .welcome-sub {
  color: #ffffff !important;
  opacity: 0.95;
}
[data-theme="dark"] .welcome-step {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: #f0f2f7;
}
[data-theme="dark"] .welcome-step-h { color: #f0f2f7; }
[data-theme="dark"] .welcome-step-p { color: #b7bdcc; }
[data-theme="dark"] .welcome-steps-title { color: #b7bdcc; }
[data-theme="dark"] .welcome-foot { color: #7c8394; }
[data-theme="dark"] .welcome-foot a { color: #b7bdcc; }

/* ============================================================
   Info screens (footer links: Ayuda, FAQ, Términos, Privacidad, Contacto)
   ============================================================ */
/* V437: Fuerza color de texto legible en las pantallas de info aunque
   se haya heredado el data-section="welcome" con texto blanco. */
.screen[data-section="info"],
.screen[data-section="info"] h1,
.screen[data-section="info"] h2,
.screen[data-section="info"] h3,
.screen[data-section="info"] h4,
.screen[data-section="info"] p,
.screen[data-section="info"] li,
.screen[data-section="info"] span:not(.info-hero-ic *),
.screen[data-section="info"] small,
.screen[data-section="info"] a,
.screen[data-section="info"] strong,
.screen[data-section="info"] b {
  color: var(--text, #14161d);
}
[data-theme="dark"] .screen[data-section="info"],
[data-theme="dark"] .screen[data-section="info"] h1,
[data-theme="dark"] .screen[data-section="info"] h2,
[data-theme="dark"] .screen[data-section="info"] h3,
[data-theme="dark"] .screen[data-section="info"] h4,
[data-theme="dark"] .screen[data-section="info"] p,
[data-theme="dark"] .screen[data-section="info"] li,
[data-theme="dark"] .screen[data-section="info"] span:not(.info-hero-ic *),
[data-theme="dark"] .screen[data-section="info"] small,
[data-theme="dark"] .screen[data-section="info"] a,
[data-theme="dark"] .screen[data-section="info"] strong,
[data-theme="dark"] .screen[data-section="info"] b {
  color: #f0f2f7;
}
.screen[data-section="info"] a { text-decoration: underline; }
.screen[data-section="info"] .info-hero-ic { color: #fff; }

.screen-info {
  background: var(--bg, #f7f8fb);
  color: var(--text, #14161d);
  padding: 0;
  overflow-y: auto;
  height: 100%;
}
.screen-info .topbar {
  padding-right: 60px; /* leave room for the fixed theme-toggle button */
}
/* Hide the fixed theme toggle over info screens so it doesn't cover content */
body:has(.screen-info) .theme-toggle,
body.info-open .theme-toggle { display: none; }
.info-wrap {
  padding: 16px 20px 40px;
  max-width: 720px;
  margin: 0 auto;
}
.info-hero {
  text-align: center;
  padding: 16px 8px 20px;
  border-bottom: 1px solid var(--card-border, #e5e7eb);
  margin-bottom: 20px;
}
.info-hero-ic {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 59, 107, 0.35);
}
.info-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text, #14161d);
}
.info-hero-sub {
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}
.info-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #6b7280);
  margin: 22px 0 10px;
  font-weight: 700;
}
.info-card {
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
}
/* Banner de estado del plan (p. ej. en Modo invisible) */
.plan-status-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px; margin-bottom: 14px;
  border: 1px solid var(--card-border, #e5e7eb);
}
.plan-status-banner .psb-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
}
.plan-status-banner .psb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-status-banner .psb-txt strong { font-size: 14px; font-weight: 700; }
.plan-status-banner .psb-txt small { font-size: 12px; color: var(--text-muted, #8f95a3); }
.plan-status-banner.ok {
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.06));
  border-color: rgba(34,197,94,.35);
}
.plan-status-banner.ok .psb-ic { background: linear-gradient(135deg, #22c55e, #10b981); }
.plan-status-banner.locked {
  background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(255,59,107,.08));
  border-color: rgba(168,85,247,.35);
}
.plan-status-banner.locked .psb-ic { background: linear-gradient(135deg, #a855f7, #ff3b6b); }
/* Filas de interruptor bloqueadas (sin plan) */
.info-card.is-locked { position: relative; }
.switch-row-locked { opacity: .6; cursor: pointer; }
.switch-row-locked .lock-mini { color: var(--text-muted, #8f95a3); display: inline-flex; }
.switch-row-locked .switch { pointer-events: none; }
.info-list {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--text, #14161d);
  font-size: 14px;
  line-height: 1.65;
}
.info-list li { margin-bottom: 6px; }
.info-list li:last-child { margin-bottom: 0; }
.info-para {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #14161d);
}
.info-para:last-child { margin-bottom: 0; }

.info-cta {
  margin-top: 24px;
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, rgba(255, 59, 107, 0.08), rgba(255, 138, 59, 0.08));
  border: 1px solid rgba(255, 59, 107, 0.15);
  border-radius: 16px;
}
.info-cta-h {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text, #14161d);
}
.info-cta-p {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
}
.info-cta .btn { display: inline-block; padding: 10px 20px; }

/* Help / Contact grid cards */
.help-grid, .contact-grid, .privacy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 520px) {
  .help-grid, .contact-grid, .privacy-grid { grid-template-columns: 1fr 1fr; }
}
.help-card, .contact-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #14161d);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  width: 100%;
  font: inherit;
}
.help-card:hover, .contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 59, 107, 0.35);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.help-ic, .contact-ic {
  font-size: 26px;
  flex: 0 0 auto;
}
.help-body, .contact-body { flex: 1; min-width: 0; }
.help-h, .contact-h {
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--text, #14161d);
}
.help-p, .contact-p {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  word-break: break-word;
}
.help-arrow {
  color: var(--text-muted, #9ca3af);
  flex: 0 0 auto;
}

/* Privacy highlight cards */
.privacy-card {
  padding: 14px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  background: var(--surface, #fff);
  text-align: center;
}
.privacy-ic { font-size: 28px; margin-bottom: 8px; }
.privacy-h { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; color: var(--text, #14161d); }
.privacy-p { font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.4; }

/* Legal (terms) list */
.legal-list { display: flex; flex-direction: column; gap: 12px; }
.legal-item {
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  padding: 14px 16px;
}
.legal-h { font-size: 14.5px; font-weight: 700; margin: 0 0 6px; color: var(--text, #14161d); }
.legal-p { font-size: 13.5px; color: var(--text, #14161d); margin: 0; line-height: 1.6; opacity: 0.85; }

/* FAQ */
.faq-search {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--card-border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #14161d);
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
.faq-search:focus { border-color: #ff3b6b; }

.faq-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 10px;
  margin-bottom: 6px;
}
.faq-pill {
  flex: 0 1 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--card-border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #14161d);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
@media (max-width: 420px) and ((pointer: coarse) or (hover: none)) {
  .faq-pill { padding: 5px 9px; font-size: 11.5px; }
}
.faq-pill:hover { border-color: rgba(255, 59, 107, 0.4); }
.faq-pill.active {
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 59, 107, 0.3);
}

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-item[open] {
  border-color: rgba(255, 59, 107, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text, #14161d);
  list-style: none;
  user-select: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-txt { flex: 1; line-height: 1.4; }
.faq-q-ic {
  flex: 0 0 auto;
  color: var(--text-muted, #9ca3af);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-item[open] .faq-q-ic {
  transform: rotate(180deg);
  color: #ff3b6b;
}
.faq-a {
  padding: 0 16px 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text, #14161d);
  opacity: 0.85;
  border-top: 1px solid var(--card-border, #e5e7eb);
  padding-top: 12px;
}

/* V794 · Cabecera de subcategoría dentro de una categoría del FAQ */
.faq-subhead {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
  padding: 16px 4px 2px;
}
.faq-subhead:first-child { padding-top: 4px; }
/* Acento sutil a la izquierda de cada pregunta bajo su subcabecera */
.faq-list .faq-item { position: relative; }
/* Estado vacío del buscador */
.faq-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-muted, #9ca3af);
  font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.faq-empty-ic { font-size: 34px; }
[data-theme="dark"] .faq-subhead { color: #8b90a0; }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
  padding: 16px;
}
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 10px;
  background: var(--bg, #f7f8fb);
  color: var(--text, #14161d);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
/* Select con flecha custom y padding extra a la derecha para que la flecha no recorte el texto */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  background:
    var(--bg, #f7f8fb)
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23888888%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20d%3D%27M1%201l5%205%205-5%27%2F%3E%3C%2Fsvg%3E")
    no-repeat right 14px center / 12px 8px;
  line-height: 1.4;
  min-height: 42px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Fuerza que las <option> se vean legibles en todos los navegadores / temas */
.contact-form select option {
  background: #ffffff;
  color: #14161d;
  font-size: 14px;
  padding: 8px;
}
.contact-form select option[disabled],
.contact-form select option[value=""] {
  color: #9ca0a9;
}
.contact-form textarea { resize: vertical; min-height: 100px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: #ff3b6b;
}

/* Dark mode adjustments */
[data-theme="dark"] .screen-info { background: var(--bg, #0e1015); color: #f0f2f7; }
[data-theme="dark"] .info-hero { border-bottom-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .info-hero-title { color: #f0f2f7; }
[data-theme="dark"] .info-hero-sub { color: #b7bdcc; }
[data-theme="dark"] .info-section { color: #9aa0b0; }
[data-theme="dark"] .info-card,
[data-theme="dark"] .help-card,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .privacy-card,
[data-theme="dark"] .legal-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .faq-search,
[data-theme="dark"] .faq-pill,
[data-theme="dark"] .contact-form {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #f0f2f7;
}
[data-theme="dark"] .info-list,
[data-theme="dark"] .info-para,
[data-theme="dark"] .help-h,
[data-theme="dark"] .contact-h,
[data-theme="dark"] .privacy-h,
[data-theme="dark"] .legal-h,
[data-theme="dark"] .faq-q { color: #f0f2f7; }
[data-theme="dark"] .help-p,
[data-theme="dark"] .contact-p,
[data-theme="dark"] .privacy-p,
[data-theme="dark"] .legal-p,
[data-theme="dark"] .faq-a { color: #c8ccd6; }
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .contact-form textarea {
  background: rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.08);
  color: #f0f2f7;
}
[data-theme="dark"] .contact-form select {
  background:
    rgba(0,0,0,0.25)
    url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%278%27%20viewBox%3D%270%200%2012%208%27%3E%3Cpath%20fill%3D%27none%27%20stroke%3D%27%23c8ccd6%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20d%3D%27M1%201l5%205%205-5%27%2F%3E%3C%2Fsvg%3E")
    no-repeat right 14px center / 12px 8px;
}
/* Options en dark: el menú nativo respeta este color en la mayoría de navegadores modernos */
[data-theme="dark"] .contact-form select option {
  background: #1a1d24;
  color: #f0f2f7;
}
[data-theme="dark"] .contact-form select option[disabled],
[data-theme="dark"] .contact-form select option[value=""] {
  color: #7b7f8a;
}
[data-theme="dark"] .contact-form label { color: #b7bdcc; }
[data-theme="dark"] .info-cta {
  background: linear-gradient(135deg, rgba(255,59,107,0.12), rgba(255,138,59,0.12));
  border-color: rgba(255,59,107,0.25);
}
[data-theme="dark"] .info-cta-h { color: #f0f2f7; }
[data-theme="dark"] .info-cta-p { color: #b7bdcc; }
[data-theme="dark"] .faq-item[open] { border-color: rgba(255,59,107,0.5); }
[data-theme="dark"] .faq-a { border-top-color: rgba(255,255,255,0.08); }

/* ============================================================
   Swipe card: info button
   ============================================================ */
/* V741 · Pastilla "Ver perfil" (antes era solo un icono, poco descubrible). */
.swipe-info-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  height: 34px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, background 0.15s ease;
}
.swipe-info-btn svg { flex: 0 0 auto; }
.swipe-info-txt { white-space: nowrap; }
.swipe-info-btn:hover,
.swipe-info-btn:active {
  background: var(--grad-brand, linear-gradient(135deg, #ff3b6b, #ff8a3b));
  border-color: transparent;
  transform: scale(1.04);
}

/* ============================================================
   V742 · Interruptores de privacidad del perfil
   ============================================================ */
.privacy-block {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--border, rgba(0,0,0,.10));
  border-radius: 14px; padding: 6px 12px 10px; margin-top: 4px;
  background: rgba(127,127,127,.04);
}
.privacy-intro {
  font-size: 12.5px; color: var(--text-soft, #6b7280);
  margin: 8px 0 6px; line-height: 1.4;
}
.privacy-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 0; cursor: pointer;
  border-top: 1px solid var(--border, rgba(0,0,0,.06));
}
.privacy-row:first-of-type { border-top: 0; }
.privacy-lbl { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.privacy-eye { color: var(--text-soft, #9aa0b0); display: inline-flex; }
.privacy-switch { position: relative; flex: 0 0 auto; width: 42px; height: 24px; }
.privacy-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.privacy-slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(120,120,130,.35); transition: background .18s ease;
}
.privacy-slider::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .18s ease;
}
.privacy-switch input:checked + .privacy-slider {
  background: var(--grad-brand, linear-gradient(135deg, #ff3b6b, #ff8a3b));
}
.privacy-switch input:checked + .privacy-slider::before { transform: translateX(18px); }

/* ============================================================
   Profile detail screen
   ============================================================ */
.screen-profile-detail {
  background: var(--bg, #f7f8fb);
  color: var(--text, #14161d);
  overflow-y: auto;
  height: 100%;
  padding: 0;
}
.pd-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--card-border, #e5e7eb);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.pd-back {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text, #14161d);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s ease;
}
.pd-back:hover { background: rgba(0,0,0,0.05); }
.pd-title { font-size: 16px; font-weight: 700; }

.pd-wrap { padding: 0 0 100px; max-width: 720px; margin: 0 auto; }

.pd-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #000;
}
.pd-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.pd-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.5));
}
.pd-dots {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.pd-dot {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  transition: background 0.2s ease;
}
.pd-dot.active { background: #fff; }

/* V747 · Aviso "desliza para ver el perfil" superpuesto sobre el borde inferior
   de la foto. La foto es alta (3/4) y el resto del perfil queda debajo; este
   indicador deja claro que hay más contenido. Desaparece al hacer scroll. */
.pd-scroll-hint {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 12px; font-weight: 600;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  animation: pdHintBob 1.6s ease-in-out infinite;
  transition: opacity 0.25s ease;
}
.pd-scroll-hint-ic { display: inline-flex; }
@keyframes pdHintBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}
.pd-scrolled .pd-scroll-hint { opacity: 0; pointer-events: none; }

.pd-name {
  padding: 18px 20px 4px;
}
.pd-name h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text, #14161d);
}
.pd-verified {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a9eff, #2b7cff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pd-status {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pd-dot-online {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #9ca3af;
}
.pd-dot-online.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }

.pd-meta {
  padding: 12px 20px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text, #14161d);
}
.pd-meta-ic { color: var(--brand-1, #ff3b6b); display: inline-flex; }

.pd-section {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted, #6b7280);
  margin: 22px 20px 8px;
  font-weight: 700;
}
.pd-card {
  margin: 0 20px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
}
.pd-bio {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text, #14161d);
}
.pd-tags {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pd-tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,59,107,0.1), rgba(255,138,59,0.1));
  border: 1px solid rgba(255,59,107,0.2);
  color: var(--brand-1, #ff3b6b);
  font-size: 12.5px;
  font-weight: 600;
}
.pd-details .pd-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border, #eef0f4);
  font-size: 14px;
}
.pd-details .pd-row:last-child { border-bottom: 0; }
.pd-details .pd-row span { color: var(--text-muted, #6b7280); }
.pd-details .pd-row b { color: var(--text, #14161d); font-weight: 600; }

/* V776 · Preguntas de perfil (rompehielos) en el detalle de perfil */
.pd-prompts {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-prompt-card {
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 14px;
}
.pd-prompt-q {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-1, #ff3b6b);
  margin-bottom: 4px;
}
.pd-prompt-a {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text, #14161d);
}

/* V776 · Editor de preguntas de perfil (registro y edición) */
.prompts-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.prompt-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
  position: relative;
}
.prompt-item .prompt-q,
.prompt-item .prompt-a {
  width: 100%;
}
.prompt-item .prompt-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,59,107,0.12);
  color: var(--brand-1, #ff3b6b);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
[data-theme="dark"] .pd-prompt-card,
[data-theme="dark"] .prompt-item {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
}
[data-theme="dark"] .pd-prompt-a { color: #eef; }

.pd-actions {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  z-index: 20;
  padding: 10px 18px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
/* V747 · Cada acción es una columna: botón + leyenda debajo. */
.pd-act-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pd-act-cap {
  font-size: 10.5px; font-weight: 600; line-height: 1;
  color: var(--text-muted, #6b7280); white-space: nowrap;
}
.pd-act {
  border: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pd-act:hover { transform: translateY(-2px); }
.pd-act-pass { background: #fff; color: #ff3b6b; border: 1px solid #ff3b6b; }
.pd-act-super { background: linear-gradient(135deg, #4a9eff, #2b7cff); color: #fff; width: 48px; height: 48px; }
.pd-act-like { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }

/* Hide the fixed theme toggle over profile-detail to avoid overlap */
body:has(.screen-profile-detail) .theme-toggle,
body.profile-open .theme-toggle { display: none; }

/* Hide theme toggle inside chat window: header already has icons top-right */
body:has(.chat-header) .theme-toggle,
body.chat-open .theme-toggle { display: none; }

/* Oculta el toggle de tema cuando hay banner de restricciones activo:
   coinciden en la esquina inferior-izquierda y se superponen. */
body.has-restriction .theme-toggle { display: none; }

/* Oculta el banner rojo de restricciones cuando el modal está abierto,
   para que no tape los ítems de la lista dentro del modal. */
body:has(#modal:not([hidden])) #restrictionBanner { display: none; }

/* ============================================================
   "Yo" — sub-pantallas (Editar perfil, Mis fotos, etc.)
   ============================================================ */
.screen-me-sub {
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  height: 100%;
}
.screen-me-sub .info-wrap {
  padding: 12px 16px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.edit-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
}
.edit-avatar .me-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 3px solid var(--surface);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.photo-cell {
  position: relative;
  aspect-ratio: 3/4;
  /* V722 · Fallback para WebViews antiguos sin soporte de aspect-ratio:
     sin esto la celda colapsaba a 0 de alto y la foto no se veía / "no se
     adaptaba a la cuadrícula". Con aspect-ratio soportado, este mínimo
     no interfiere (el ratio calcula un alto mayor). */
  min-height: 38vw;
  border-radius: 12px;
  background: var(--surface-2, #f3f4f7);
  border: 1px dashed var(--card-border, #d1d5db);
  /* V725 · La cuadrícula muestra la foto ENTERA (contain), sin recortar, para
     que el usuario vea la imagen completa. El recorte 3:4 solo se aplica a la
     foto de perfil, mediante el editor al marcar principal. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  transition: border-color 0.15s ease;
  overflow: hidden;
}
/* En navegadores que sí soportan aspect-ratio, anulamos el mínimo para que
   el ratio 3/4 mande y las celdas queden perfectas. */
@supports (aspect-ratio: 3 / 4) {
  .photo-cell { min-height: 0; }
}
.photo-cell.has { border-style: solid; border-color: transparent; }
.photo-cell:hover { border-color: #ff3b6b; }
.photo-add { opacity: 0.6; }
.photo-del {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
}
.photo-main {
  position: absolute;
  bottom: 6px; left: 6px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
}
/* V723 · Botón explícito "Hacer principal" en fotos no principales. */
.photo-set-main {
  position: absolute;
  bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background 0.15s ease;
}
.photo-set-main:hover { background: linear-gradient(135deg, #ff3b6b, #ff8a3b); }

/* V725 · Editor de recorte 3:4 para la foto principal. */
.photo-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0,0,0,0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.photo-crop-box {
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--text, #111);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.photo-crop-title {
  margin: 2px 0 10px;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.photo-crop-viewport {
  position: relative;
  width: min(270px, 72vw);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  touch-action: none;
  cursor: grab;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85), 0 6px 18px rgba(0,0,0,0.25);
}
.photo-crop-viewport:active { cursor: grabbing; }
.photo-crop-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  max-width: none;
}
.photo-crop-hint {
  font-size: 12.5px;
  opacity: 0.75;
  text-align: center;
  margin: 10px 4px 4px;
}
.photo-crop-zoomrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 4px 12px;
}
.photo-crop-zoom { flex: 1; }
.photo-crop-zoomic {
  font-size: 18px;
  font-weight: 800;
  opacity: 0.7;
  width: 16px;
  text-align: center;
}
.photo-crop-actions {
  display: flex;
  gap: 10px;
}
.photo-crop-actions .btn { flex: 1; }

.reason-item.current {
  color: #ff3b6b;
  font-weight: 700;
}

/* Verify selfie preview */
.verify-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 12px 0 6px;
}
.verify-preview-img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--surface-2, #f3f4f7);
  border: 2px dashed var(--card-border, #d1d5db);
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: var(--text-muted, #9ca3af);
}
.verify-preview-img.has {
  border-style: solid;
  border-color: #22c55e;
}
.verify-preview-label {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  max-width: 260px;
}
[data-theme="dark"] .verify-preview-img {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .verify-preview-label {
  color: #b7bdcc;
}

/* Dark mode */
/* V725 · Usar background-COLOR, no el shorthand `background`. El shorthand
   reinicia background-size a `auto`, lo que anulaba nuestro `contain` en modo
   oscuro y hacía que la foto de la cuadrícula saliera recortada/ampliada. */
[data-theme="dark"] .photo-cell {
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

/* ============================================================
   Premium lock modal (blurred like tap)
   ============================================================ */
.like-upgrade {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  border-radius: inherit;
  transition: background 0.15s ease;
}
.like-upgrade:hover { background: rgba(0, 0, 0, 0.3); }
.like-upgrade .lock {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(255, 59, 107, 0.4);
}
.like-locked-wrap {
  border-radius: 14px;
  overflow: hidden;
}

/* Tarjetas desbloqueadas de "Te dieron like" — clicables y con acciones rápidas */
.like-unlocked-wrap {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  aspect-ratio: 3/4;
  transition: transform .15s ease, box-shadow .15s ease;
}
.like-unlocked-wrap:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.like-unlocked-wrap:active { transform: scale(.98); }
.like-unlocked-wrap .like-card {
  position: absolute; inset: 0;
  border-radius: 0;
}
.like-quick-actions {
  position: absolute; top: 8px; right: 8px;
  z-index: 3;
  display: flex; gap: 6px;
}
.lqa {
  width: 32px; height: 32px; border-radius: 999px;
  border: none; cursor: pointer;
  display: grid; place-items: center;
  color: white;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform .12s ease;
}
.lqa:active { transform: scale(.9); }
.lqa-pass { background: rgba(0,0,0,.55); }
.lqa-like { background: linear-gradient(135deg, #ff3b6b, #ff8a3b); }

/* Cabecera de hoja de filtros con botón X */
.sheet-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.sheet-titlebar .sheet-title { padding: 0; margin: 0; font-size: 17px; font-weight: 700; color: var(--text); }
.sheet-close {
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(0,0,0,.04));
  color: var(--text);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.sheet-close:hover { background: rgba(0,0,0,.08); }
[data-theme="dark"] .sheet-close:hover { background: rgba(255,255,255,.1); }
.sheet-close:active { transform: scale(.92); }

.premium-lock-sheet {
  padding: 4px 4px 8px;
}
.plm-hero {
  text-align: center;
  padding: 12px 8px 18px;
}
.plm-hero-ic {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(255, 59, 107, 0.35);
}
.plm-h {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #14161d);
}
.plm-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted, #6b7280);
  max-width: 380px;
  margin: 0 auto;
}

.plm-reasons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 14px;
}
.plm-reason {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2, #f3f4f7);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 12px;
}
.plm-r-ic {
  font-size: 22px;
  flex: 0 0 auto;
  line-height: 1;
  padding-top: 2px;
}
.plm-reason b {
  display: block;
  font-size: 14px;
  color: var(--text, #14161d);
  margin-bottom: 2px;
}
.plm-r-p {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  line-height: 1.45;
}

.plm-note {
  background: linear-gradient(135deg, rgba(255, 59, 107, 0.08), rgba(255, 138, 59, 0.08));
  border: 1px solid rgba(255, 59, 107, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.plm-note b {
  display: block;
  margin-bottom: 4px;
  font-size: 13.5px;
  color: var(--text, #14161d);
}
.plm-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted, #6b7280);
}

.plm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Dark */
[data-theme="dark"] .plm-h,
[data-theme="dark"] .plm-reason b,
[data-theme="dark"] .plm-note b { color: #f0f2f7; }
[data-theme="dark"] .plm-p,
[data-theme="dark"] .plm-r-p,
[data-theme="dark"] .plm-note p { color: #b7bdcc; }
[data-theme="dark"] .plm-reason {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .plm-note {
  background: linear-gradient(135deg, rgba(255, 59, 107, 0.15), rgba(255, 138, 59, 0.12));
  border-color: rgba(255, 59, 107, 0.28);
}

/* Dark mode for profile detail */
[data-theme="dark"] .screen-profile-detail { background: var(--bg, #0e1015); color: #f0f2f7; }
[data-theme="dark"] .pd-topbar {
  background: rgba(20,22,29,0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pd-back { color: #f0f2f7; }
[data-theme="dark"] .pd-back:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .pd-meta-item,
[data-theme="dark"] .pd-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: #f0f2f7;
}
[data-theme="dark"] .pd-bio,
[data-theme="dark"] .pd-name h2 { color: #f0f2f7; }
[data-theme="dark"] .pd-status,
[data-theme="dark"] .pd-section,
[data-theme="dark"] .pd-details .pd-row span { color: #b7bdcc; }
[data-theme="dark"] .pd-details .pd-row { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .pd-details .pd-row b { color: #f0f2f7; }
[data-theme="dark"] .pd-actions {
  background: rgba(30,33,42,0.95);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pd-act-pass { background: rgba(30,33,42,0.95); }

/* ==========================================================
   Fullscreen interstitial ad
   ========================================================== */
.aura-inter {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  animation: interFadeIn .18s ease;
}
@keyframes interFadeIn { from { opacity: 0; } to { opacity: 1; } }
.aura-inter-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(4px);
}
.aura-inter-card {
  position: relative;
  width: min(92vw, 380px);
  height: min(92vh, 640px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
}
[data-theme="dark"] .aura-inter-card { background: #14161c; color: #eee; }
.aura-inter-label {
  font: 700 11px/1 system-ui;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.aura-inter-duration {
  background: rgba(255,59,107,.12);
  color: #ff3b6b;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .5px;
}
.aura-inter-forced .aura-inter-close { display: none; }
[data-theme="dark"] .aura-inter-label { border-bottom-color: rgba(255,255,255,.06); }
.aura-inter-slot {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.aura-inter-slot > ins { max-width: 100%; max-height: 100%; }
.aura-inter-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font: 700 14px/1 system-ui;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, background .18s ease;
}
.aura-inter-close:disabled {
  cursor: not-allowed;
  opacity: .8;
  background: rgba(0,0,0,.5);
}
.aura-inter-close:not(:disabled):hover {
  transform: scale(1.08);
  background: rgba(0,0,0,.85);
}

/* =====================================================================
   Support Tickets — visual centre
   ===================================================================== */
.screen-tickets .ticket-wrap { padding-bottom: 40px; }

.ticket-hero {
  position: relative;
  background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b));
  color: #fff;
  border-radius: 22px;
  padding: 22px 20px 20px;
  margin: 8px 0 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255, 59, 107, .18);
}
.ticket-hero::before {
  content: "";
  position: absolute;
  right: -30px; top: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  pointer-events: none;
}
.ticket-hero::after {
  content: "";
  position: absolute;
  left: -20px; bottom: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 70%);
  pointer-events: none;
}
.ticket-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,.22);
  color: #fff;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ticket-hero-title {
  margin: 10px 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}
.ticket-hero-sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  opacity: .95;
  color: #fff;
}
.ticket-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
  z-index: 1;
}
.ticket-stat {
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: 10px 6px;
  text-align: center;
  color: #fff;
}
.ticket-stat strong { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.1; }
.ticket-stat span { display: block; font-size: 10.5px; opacity: .9; margin-top: 2px; }

.ticket-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-soft, #5a5e69);
  margin: 22px 0 12px;
}

/* Category grid */
.ticket-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ticket-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: 16px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.08));
  cursor: pointer;
  text-align: left;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
  color: var(--text, #14161d);
  font-family: inherit;
  min-height: 96px;
}
.ticket-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-1, #ff3b6b);
  box-shadow: 0 10px 22px rgba(20,22,29,.08);
}
.ticket-cat-card.active {
  border-color: var(--brand-1, #ff3b6b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1, #ff3b6b) 18%, transparent);
}
.ticket-cat-card.active::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--brand-1, #ff3b6b);
  color: #fff;
  font-size: 12px; font-weight: 800;
  display: grid; place-items: center;
}
.ticket-cat-ic {
  font-size: 24px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-1, #ff3b6b) 10%, transparent);
}
.ticket-cat-card.cat-blue   .ticket-cat-ic { background: rgba( 59,130,246,.14); }
.ticket-cat-card.cat-pink   .ticket-cat-ic { background: rgba(236, 72,153,.14); }
.ticket-cat-card.cat-purple .ticket-cat-ic { background: rgba(139, 92,246,.14); }
.ticket-cat-card.cat-green  .ticket-cat-ic { background: rgba( 34,197, 94,.14); }
.ticket-cat-card.cat-gold   .ticket-cat-ic { background: rgba(245,158, 11,.16); }
.ticket-cat-card.cat-red    .ticket-cat-ic { background: rgba(239, 68, 68,.14); }
.ticket-cat-card.cat-teal   .ticket-cat-ic { background: rgba( 20,184,166,.14); }
.ticket-cat-card.cat-orange .ticket-cat-ic { background: rgba(249,115, 22,.16); }
.ticket-cat-card.cat-slate  .ticket-cat-ic { background: rgba(100,116,139,.14); }
.ticket-cat-h {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text, #14161d);
}
.ticket-cat-p {
  font-size: 11.5px;
  color: var(--text-soft, #5a5e69);
  line-height: 1.35;
}

[data-theme="dark"] .ticket-cat-card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
  color: #f0f2f7;
}
[data-theme="dark"] .ticket-cat-h { color: #f0f2f7; }
[data-theme="dark"] .ticket-cat-p { color: #b7bdcc; }

/* Self-help */
.ticket-selfhelp[hidden] { display: none; }
.ticket-hint {
  color: var(--text-soft, #5a5e69);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ticket-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 0 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ticket-search-wrap:focus-within {
  border-color: var(--brand-1, #ff3b6b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1, #ff3b6b) 15%, transparent);
}
.ticket-search-ic {
  color: var(--text-soft, #7c8394);
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.ticket-search {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  padding: 14px 0;
  font-size: 14px;
  font-family: inherit;
  color: var(--text, #14161d);
}
[data-theme="dark"] .ticket-search-wrap {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .ticket-search { color: #f0f2f7; }

.ticket-matches {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ticket-match {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .18s ease;
}
.ticket-match[open] { border-color: var(--brand-1, #ff3b6b); }
.ticket-match-q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text, #14161d);
  font-size: 13.5px;
}
.ticket-match-q::-webkit-details-marker { display: none; }
.ticket-match-ic { font-size: 16px; flex: 0 0 auto; }
.ticket-match-txt { flex: 1; line-height: 1.35; }
.ticket-match-caret {
  color: var(--text-soft, #7c8394);
  display: inline-flex;
  transition: transform .2s ease;
}
.ticket-match[open] .ticket-match-caret { transform: rotate(180deg); }
.ticket-match-a {
  padding: 0 14px 14px 40px;
  color: var(--text-soft, #5a5e69);
  font-size: 13px;
  line-height: 1.55;
}
.ticket-match-a p { margin: 0 0 10px; }
.ticket-match-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-match-fq { font-size: 12px; color: var(--text-muted, #9ca0a9); }
.ticket-match-fb {
  border: 1px solid var(--border, rgba(0,0,0,.1));
  background: var(--surface, #fff);
  color: var(--text, #14161d);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .16s ease, background .16s ease;
}
.ticket-match-fb.yes:hover { border-color: #22c55e; color: #22c55e; }
.ticket-match-fb.no:hover  { border-color: var(--brand-1, #ff3b6b); color: var(--brand-1, #ff3b6b); }

[data-theme="dark"] .ticket-match {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
}
[data-theme="dark"] .ticket-match-q { color: #f0f2f7; }
[data-theme="dark"] .ticket-match-a { color: #b7bdcc; }
[data-theme="dark"] .ticket-match-fb {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #f0f2f7;
}

.ticket-no-match {
  text-align: center;
  padding: 22px 16px;
  background: var(--surface, #fff);
  border: 1px dashed var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
}
.ticket-no-match-ic { font-size: 32px; margin-bottom: 6px; }
.ticket-no-match-h { font-weight: 700; color: var(--text, #14161d); margin-bottom: 4px; }
.ticket-no-match-p { font-size: 12.5px; color: var(--text-soft, #5a5e69); }
[data-theme="dark"] .ticket-no-match {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .ticket-no-match-h { color: #f0f2f7; }
[data-theme="dark"] .ticket-no-match-p { color: #b7bdcc; }

.ticket-still {
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1, #ff3b6b) 10%, transparent), color-mix(in srgb, var(--brand-2, #ff8a3b) 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-1, #ff3b6b) 25%, transparent);
  border-radius: 16px;
  text-align: center;
}
.ticket-still-h { font-weight: 800; font-size: 14.5px; color: var(--text, #14161d); }
.ticket-still-p { font-size: 12.5px; color: var(--text-soft, #5a5e69); margin: 4px 0 12px; }
.ticket-still-btn { min-width: 180px; }
[data-theme="dark"] .ticket-still-h { color: #f0f2f7; }
[data-theme="dark"] .ticket-still-p { color: #b7bdcc; }

/* Ticket form */
.ticket-form-box[hidden] { display: none; }
.ticket-form { display: flex; flex-direction: column; gap: 14px; }
.ticket-form .field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-soft, #5a5e69);
  text-transform: uppercase;
}
.ticket-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-soft, #5a5e69);
}

.ticket-priority {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.ticket-pri {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  border: 1.5px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  background: var(--surface, #fff);
  cursor: pointer;
  text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ticket-pri input { position: absolute; opacity: 0; pointer-events: none; }
.ticket-pri.active {
  border-color: var(--brand-1, #ff3b6b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1, #ff3b6b) 18%, transparent);
}
.ticket-pri-ic { font-size: 20px; margin-bottom: 4px; }
.ticket-pri-h  { font-size: 12.5px; font-weight: 800; color: var(--text, #14161d); }
.ticket-pri-p  { font-size: 10.5px; color: var(--text-soft, #5a5e69); margin-top: 2px; line-height: 1.25; }
[data-theme="dark"] .ticket-pri {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.09);
}
[data-theme="dark"] .ticket-pri-h { color: #f0f2f7; }
[data-theme="dark"] .ticket-pri-p { color: #b7bdcc; }

.ticket-attach-row { display: flex; }
.ticket-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px dashed var(--border, rgba(0,0,0,.15));
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft, #5a5e69);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.ticket-attach-btn:hover {
  border-color: var(--brand-1, #ff3b6b);
  color: var(--brand-1, #ff3b6b);
}
.ticket-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ticket-attach-list:empty { display: none; }
.ticket-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 999px;
  background: var(--surface, #fff);
  font-size: 12px;
  color: var(--text, #14161d);
  max-width: 220px;
}
.ticket-attach-thumb {
  width: 26px; height: 26px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  flex: 0 0 26px;
}
.ticket-attach-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.ticket-attach-x {
  border: 0;
  background: transparent;
  color: var(--text-soft, #7c8394);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
}
.ticket-attach-x:hover { color: var(--brand-1, #ff3b6b); }
[data-theme="dark"] .ticket-attach-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #f0f2f7;
}

.ticket-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-1, #ff3b6b) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-1, #ff3b6b) 20%, transparent);
  font-size: 12px;
  color: var(--text-soft, #5a5e69);
  line-height: 1.4;
  cursor: pointer;
}
.ticket-consent input { margin-top: 2px; }
[data-theme="dark"] .ticket-consent { color: #b7bdcc; }

.ticket-submit { margin-top: 6px; }

/* Success screen */
.ticket-success {
  text-align: center;
  padding: 30px 20px;
}
.ticket-success-ic {
  font-size: 56px;
  margin: 10px auto 12px;
  animation: ticketPop .5s cubic-bezier(.2,1.6,.4,1);
}
@keyframes ticketPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.ticket-success-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text, #14161d);
  margin: 4px 0 8px;
}
.ticket-success-sub {
  color: var(--text-soft, #5a5e69);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 20px;
}
.ticket-success-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 16px;
  padding: 12px 16px;
  text-align: left;
  margin-bottom: 20px;
}
.ticket-success-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border, rgba(0,0,0,.08));
  font-size: 13px;
}
.ticket-success-row:last-child { border-bottom: 0; }
.ticket-success-row span { color: var(--text-soft, #5a5e69); }
.ticket-success-row strong { color: var(--text, #14161d); font-weight: 700; text-align: right; max-width: 60%; overflow-wrap: anywhere; }
[data-theme="dark"] .ticket-success-title { color: #f0f2f7; }
[data-theme="dark"] .ticket-success-sub { color: #b7bdcc; }
[data-theme="dark"] .ticket-success-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
[data-theme="dark"] .ticket-success-row span { color: #b7bdcc; }
[data-theme="dark"] .ticket-success-row strong { color: #f0f2f7; }

/* Small phones */
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .ticket-hero-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ticket-stat { padding: 8px 4px; }
  .ticket-stat strong { font-size: 14px; }
  .ticket-cat-grid { gap: 8px; }
  .ticket-cat-card { padding: 12px 10px; min-height: 90px; }
  .ticket-cat-h { font-size: 12.5px; }
  .ticket-cat-p { font-size: 11px; }
  .ticket-priority { gap: 6px; }
  .ticket-pri-h { font-size: 11.5px; }
  .ticket-pri-p { font-size: 10px; }
}

/* ============================================================
   Private Beta screen — aviso visual e interactivo cuando la app
   está en modo pruebas privadas (access_locked).
   ============================================================ */
.beta-screen {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  background:
    radial-gradient(700px 500px at 15% -10%, color-mix(in srgb, var(--brand-1, #ff3b6b) 32%, transparent), transparent 60%),
    radial-gradient(600px 420px at 100% 100%, color-mix(in srgb, var(--brand-2, #ff8a3b) 24%, transparent), transparent 65%),
    var(--surface, #14161d);
  color: var(--text, #fff);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
/* En el panel admin desplegado el botón "Entrar" debe verse siempre. */
.beta-admin-panel { padding-bottom: 4px; }
.beta-admin-cta { min-height: 44px; }
.beta-screen.beta-in { opacity: 1; transform: none; }
[data-theme="light"] .beta-screen { color: #14161d; }

.beta-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-top: 4px;
}
.beta-badge {
  width: 84px; height: 84px;
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b));
  color: #fff;
  box-shadow: 0 12px 40px rgba(255, 59, 107, 0.35);
  animation: betaBadgePulse 2.4s ease-in-out infinite;
}
.beta-badge svg { width: 42px; height: 42px; }
@keyframes betaBadgePulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 12px 40px rgba(255, 59, 107, 0.35); }
  50%      { transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 48px rgba(255, 59, 107, 0.5); }
}
.beta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: inherit;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .beta-pill {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.1);
}
.beta-title {
  font-size: 26px; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
  background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.beta-sub {
  font-size: 14px;
  line-height: 1.5;
  opacity: .9;
  max-width: 380px;
  margin: 0;
}

.beta-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .beta-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 30px rgba(20,22,29,0.06);
}
.beta-point {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 4px 2px;
}
.beta-point-ic {
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1, #ff3b6b) 25%, transparent), color-mix(in srgb, var(--brand-2, #ff8a3b) 25%, transparent));
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.beta-point-txt { flex: 1; min-width: 0; }
.beta-point-h { font-size: 14px; font-weight: 700; line-height: 1.2; }
.beta-point-p { font-size: 12.5px; line-height: 1.4; opacity: .85; margin-top: 2px; }

.beta-form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .beta-form {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 8px 30px rgba(20,22,29,0.06);
}
.beta-label {
  display: block;
  font-size: 13px; font-weight: 700;
  margin-bottom: 8px;
}
.beta-input-row {
  display: flex; gap: 8px;
}
.beta-input {
  flex: 1; min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
[data-theme="light"] .beta-input {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
}
.beta-input:focus {
  border-color: var(--brand-1, #ff3b6b);
  background: rgba(255,255,255,0.12);
}
[data-theme="light"] .beta-input:focus { background: #fff; }
.beta-input:disabled { opacity: .6; }
.beta-cta {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.beta-cta:disabled { opacity: .7; cursor: not-allowed; }
.beta-feedback {
  margin-top: 10px;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.35;
}
.beta-feedback-ok {
  background: rgba(75, 212, 130, 0.14);
  color: #4bd482;
  border: 1px solid rgba(75, 212, 130, 0.28);
}
.beta-feedback-err {
  background: rgba(255, 82, 82, 0.12);
  color: #ff7676;
  border: 1px solid rgba(255, 82, 82, 0.28);
}

.beta-actions {
  margin-top: 2px;
  display: flex; flex-direction: column; gap: 8px;
}
.beta-foot {
  text-align: center;
  font-size: 11.5px;
  opacity: .7;
  margin: 4px 0 0;
}
.beta-foot a { color: inherit; text-decoration: underline; }

/* Superadmin access (código de acceso reservado durante la beta) */
.beta-admin {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.12);
  text-align: center;
}
[data-theme="light"] .beta-admin { border-top-color: rgba(0,0,0,.10); }
.beta-admin-toggle {
  background: transparent; border: none; padding: 6px 10px;
  color: inherit; opacity: .55; font-size: 12px; cursor: pointer;
  border-radius: 8px;
}
.beta-admin-toggle:hover { opacity: .9; text-decoration: underline; }
.beta-admin-panel {
  margin-top: 8px;
  display: flex; gap: 8px; flex-direction: row; align-items: stretch;
  flex-wrap: wrap;
}
.beta-admin-input {
  flex: 1 1 60%; min-width: 0;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28); color: #fff;
  font-size: 14px; letter-spacing: 1px; text-align: center;
  box-sizing: border-box;
}
[data-theme="light"] .beta-admin-input {
  border-color: rgba(0,0,0,.16); background: rgba(0,0,0,.03); color: #14161d;
}
.beta-admin-cta {
  flex: 0 0 auto;
  min-width: 96px;
  padding: 10px 18px;
  min-height: 44px;
}
.beta-admin-fb {
  flex: 1 1 100%;
  font-size: 12.5px; text-align: center; padding: 4px 6px;
  border-radius: 8px;
}
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .beta-admin-panel { flex-direction: column; }
  .beta-admin-input, .beta-admin-cta { flex: 1 1 auto; width: 100%; }
}
.beta-admin-fb.beta-feedback-ok  { color: #22c55e; }
.beta-admin-fb.beta-feedback-err { color: #ef4444; }

/* ============================================================
   Modo REVISIÓN (review_mode) — pantalla "App en revisión".
   Reutiliza la base .beta-* pero con una paleta ámbar/azul de
   "mantenimiento" para diferenciarla de las pruebas privadas.
   ============================================================ */
.beta-screen.review-screen {
  background:
    radial-gradient(720px 520px at 15% -10%, rgba(255, 176, 32, 0.24), transparent 60%),
    radial-gradient(620px 440px at 100% 100%, rgba(56, 132, 255, 0.22), transparent 65%),
    var(--surface, #14161d);
}
.review-badge {
  background: linear-gradient(135deg, #f59e0b, #3884ff) !important;
  box-shadow: 0 12px 40px rgba(56, 132, 255, 0.35) !important;
  animation: reviewBadgePulse 2.4s ease-in-out infinite !important;
}
@keyframes reviewBadgePulse {
  0%, 100% { transform: translateY(0) scale(1) rotate(0deg); box-shadow: 0 12px 40px rgba(56,132,255,.35); }
  50%      { transform: translateY(-3px) scale(1.03) rotate(-6deg); box-shadow: 0 18px 48px rgba(245,158,11,.5); }
}
.review-pill {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
}
[data-theme="light"] .review-pill {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
}
.review-screen .beta-title {
  background: linear-gradient(135deg, #f59e0b, #3884ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Aviso destacado de cierre TEMPORAL */
.review-temp {
  display: flex; align-items: center; gap: 8px;
  align-self: center;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px; font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.review-temp-ic { display: inline-flex; }
[data-theme="light"] .review-temp {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
  color: #b45309;
}
.review-screen .beta-point-ic {
  background: linear-gradient(135deg, rgba(245,158,11,.25), rgba(56,132,255,.25));
}

/* Confetti overlay */
.beta-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.beta-confetti span {
  position: absolute;
  top: -12px;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: betaConfettiFall linear forwards;
  opacity: .9;
}
@keyframes betaConfettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

/* Responsive tweaks */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .beta-screen {
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    gap: 12px;
    overflow-y: auto;
  }
  .beta-badge { width: 72px; height: 72px; border-radius: 20px; }
  .beta-badge svg { width: 36px; height: 36px; }
  .beta-title { font-size: 22px; }
  .beta-sub { font-size: 13px; max-width: none; }
  .beta-card, .beta-form { padding: 12px; border-radius: 16px; }
  .beta-point-ic { width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; }
  .beta-point-h { font-size: 13px; }
  .beta-point-p { font-size: 11.5px; }
  .beta-input, .beta-cta { height: 42px; font-size: 13.5px; }
}
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .beta-input-row { flex-direction: column; }
  .beta-cta { width: 100%; }
  .beta-title { font-size: 20px; }
}

/* ============================================================
   FINAL COMPACTION OVERRIDES v409 — Welcome/Hero (mobile + PWA)
   Objetivo: que TODO el bloque welcome (logo + CTA + "Cómo funciona"
   + trust + foot) quepa sin scroll en Chrome Android y PWA instalada.
   Se coloca al final del archivo para ganar la cascada.
   ============================================================ */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  /* Contenedor hero: distribuye el espacio verticalmente. Si el contenido
     cabe se distribuye sin scroll; si excede (modo invite), permite scroll. */
  .app-viewport .screen.screen-hero {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 4px 12px 6px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
  }
  /* Logo compacto */
  .screen-hero .welcome-logo {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: clamp(96px, 20vh, 148px) !important;
    height: clamp(96px, 20vh, 148px) !important;
    max-width: 148px !important;
    max-height: 148px !important;
  }
  .screen-hero .welcome-title { display: none !important; }
  .screen-hero .welcome-sub {
    margin: 2px 0 4px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.25 !important;
  }
  /* CTA + botones */
  .screen-hero .welcome-cta {
    margin-top: 0 !important;
    gap: 5px !important;
    padding-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
  }
  .screen-hero .btn { height: 38px !important; font-size: 13px !important; }
  .screen-hero .welcome-or {
    margin: 3px 0 2px !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
  }
  .screen-hero .welcome-oauth {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px !important;
    margin-top: 0 !important;
  }
  .screen-hero .oauth-btn {
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
  }
  .screen-hero .oauth-btn span { font-size: 11.5px !important; }
  .screen-hero .welcome-terms {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }
  /* "Cómo funciona" y todo lo demás: flex row estable, sin overlap */
  .screen-hero .welcome-below {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    gap: 4px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .screen-hero .welcome-below .welcome-steps-title {
    font-size: 10.5px !important;
    letter-spacing: .08em !important;
    margin: 2px 0 2px !important;
    text-transform: uppercase !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-below .welcome-steps {
    gap: 4px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-below .welcome-step {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    min-height: 0 !important;
    position: relative !important;
  }
  .screen-hero .welcome-below .welcome-step-ic {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }
  .screen-hero .welcome-below .welcome-step-txt {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .screen-hero .welcome-below .welcome-step-h {
    font-size: 11.5px !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    position: static !important;
    display: block !important;
    white-space: normal !important;
  }
  .screen-hero .welcome-below .welcome-step-p {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin: 1px 0 0 !important;
    position: static !important;
    display: block !important;
    white-space: normal !important;
  }
  .screen-hero .welcome-below .welcome-trust {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 3px 4px !important;
    margin-top: 3px !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-below .welcome-badge {
    padding: 4px 7px !important;
    font-size: 9.5px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    justify-content: center !important;
  }
  .screen-hero .welcome-below .welcome-badge svg {
    width: 10px !important; height: 10px !important; flex: 0 0 auto !important;
  }
  .screen-hero .welcome-below .welcome-foot {
    font-size: 9.5px !important;
    line-height: 1.3 !important;
    margin-top: 3px !important;
    margin-bottom: 2px !important;
    padding: 0 2px !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-below .welcome-foot a {
    margin: 0 6px !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }
  .screen-hero .welcome-below .welcome-foot .foot-sep {
    display: inline-block !important;
    margin: 0 1px !important;
    color: currentColor !important;
    opacity: 0.45 !important;
    font-weight: 300 !important;
    user-select: none !important;
  }
  .screen-hero .welcome-below .welcome-quote,
  .screen-hero .welcome-below .welcome-stats {
    display: none !important;
  }
}

/* PWA standalone (app instalada): más espacio vertical disponible */
@media all and (display-mode: standalone) {
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: clamp(110px, 22vh, 170px) !important;
    height: clamp(110px, 22vh, 170px) !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
  .screen-hero .welcome-below .welcome-step {
    padding: 8px 11px !important;
  }
  .screen-hero .welcome-below .welcome-step-h { font-size: 12.5px !important; }
  .screen-hero .welcome-below .welcome-step-p { font-size: 11.5px !important; }
  .screen-hero .welcome-below .welcome-badge { font-size: 10.5px !important; padding: 5px 8px !important; }
  .screen-hero .welcome-below .welcome-foot { font-size: 10.5px !important; }
}

/* Móviles muy bajos (SE 1st gen, iPhone 8 landscape) */
@media (max-width: 900px) and (max-height: 640px) and ((pointer: coarse) or (hover: none)) {
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: clamp(80px, 16vh, 108px) !important;
    height: clamp(80px, 16vh, 108px) !important;
  }
  .screen-hero .welcome-sub { display: none !important; }
  .screen-hero .welcome-below .welcome-step { padding: 5px 8px !important; }
  .screen-hero .welcome-below .welcome-step-ic { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
  .screen-hero .welcome-below .welcome-step-h { font-size: 11px !important; }
  .screen-hero .welcome-below .welcome-step-p { font-size: 10px !important; }
}

/* ============================================================
   V412 — AUTO-FIT GLOBAL (todas las pantallas)
   Objetivo: eliminar huecos en la parte inferior en Chrome
   Android y en la PWA. Usa 100dvh (viewport dinámico que
   se ajusta cuando la barra de URL aparece/desaparece).
   El welcome sigue sin scroll; el resto de pantallas hace
   scroll normal pero SIN cortarse ni dejar hueco.
   ============================================================ */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  html, body {
    height: 100%;
    min-height: 100%;
    /* dvh se ajusta a la barra dinámica de Chrome Android */
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
  }
  /* Marco de la app en móvil ocupa todo el viewport dinámico */
  .stage {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .phone {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* app-viewport es el contenedor scrollable interno.
     V579 · Se usa flex-grow para NO empujar la tabbar fuera del
     área visible de .phone (que tiene overflow:hidden). */
  .app-viewport {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* V579 · Asegurar que la tabbar SIEMPRE es visible al final del .phone. */
  .phone .tabbar:not([hidden]) {
    flex: 0 0 auto !important;
    display: grid !important;
    z-index: 6 !important;
  }
  /* Pantallas normales: hacen scroll si el contenido es más
     largo, pero SIN dejar hueco final (el bottom-padding se
     calcula con safe-area). Las pantallas con tabbar añaden
     espacio para no quedar tapadas. */
  .app-viewport .screen {
    min-height: 100%;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    box-sizing: border-box;
  }
  /* Cuando hay tabbar visible, dejamos su altura como padding
     inferior para que el contenido no quede debajo. */
  body:has(#tabbar:not([hidden])) .app-viewport .screen:not(.screen-hero) {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tab-height, 62px) + 12px);
  }
  /* V752 · Explorar es de ALTURA FIJA: llena el viewport exacto (topbar + pila
     flex:1 + fila de acciones), NO hace scroll. El padding-bottom de arriba
     (var(--tab-height)) se pensó para pantallas scrollables cuya tabbar podía
     tapar el contenido; pero desde V581 la tabbar es hermana flex y NO se
     superpone, así que en Explorar ese padding solo empujaba el contenido hacia
     arriba dejando un HUECO vacío grande sobre la tabbar. Lo anulamos aquí: la
     pila crece y la fila de acciones queda pegada justo encima de la tabbar. */
  body:has(#tabbar:not([hidden])) .app-viewport .screen.screen-discover {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  /* Welcome/hero: ocupa como mínimo el 100%, pero puede crecer si el
     contenido excede (modo invite/pruebas privadas). */
  .app-viewport .screen.screen-hero {
    min-height: 100% !important;
    height: auto !important;
  }
  /* Perfil detalle, "Yo" y modales: se aseguran de rellenar */
  .app-viewport .screen-profile-detail,
  .app-viewport .screen-me,
  .app-viewport .screen-me-sub,
  .app-viewport .screen-info,
  .app-viewport .screen-search,
  .app-viewport .screen-discover,
  .app-viewport .screen-likes,
  .app-viewport .screen-chats,
  .app-viewport .screen-nearby {
    min-height: 100%;
  }
  /* Elimina cualquier hueco creado por márgenes al final del
     último hijo (típico del `<footer>` o del bloque de acciones). */
  .app-viewport .screen > *:last-child { margin-bottom: 0; }
}

/* PWA standalone: usa 100dvh también para que el sistema
   reserve la altura completa (sin URL bar). */
@media all and (display-mode: standalone) {
  html, body { min-height: 100dvh; }
  .phone { height: 100dvh !important; max-height: 100dvh !important; }
  .app-viewport .screen { min-height: 100%; }
}

/* ============================================================
   V413 — AJUSTE FULLSCREEN EN MÓVIL (elimina marco decorativo
   y huecos negros). En móvil, el marco redondeado tipo "iPhone"
   NO debe verse: la app ocupa toda la pantalla. Además, cuando
   una pantalla tiene más contenido del que cabe (ej. modo
   pruebas privadas con invitación + cómo funciona), permite
   scroll interno limpio sin dejar hueco al final.
   ============================================================ */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  /* Escenario: sin padding decorativo, sin overflow oculto. */
  .stage {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    max-height: none !important;
    min-height: 100dvh !important;
    background: var(--bg) !important;
    overflow: visible !important;
  }
  .stage-side { display: none !important; }
  /* Marco "phone" pierde su decoración en móvil: ocupa todo. */
  .phone {
    --phone-w: 100% !important;
    --phone-h: 100dvh !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    isolation: auto !important;
  }
  .phone-notch, .phone-status, .phone-home { display: none !important; }
  /* V581 · app-viewport usa flex-grow (NO 100dvh) para que la tabbar
     hermana sea visible dentro del .phone (que tiene overflow:hidden).
     Antes: height:100dvh empujaba la tabbar fuera del área visible. */
  .app-viewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* V581 · Tabbar SIEMPRE visible al pie del .phone en móvil fullscreen. */
  .phone .tabbar:not([hidden]) {
    flex: 0 0 auto !important;
    display: grid !important;
    position: relative !important;
    z-index: 6 !important;
  }
  /* Pantallas que pueden tener contenido largo (modo invite,
     welcome extendido, etc.): permitimos scroll dentro del
     hero SÓLO si el contenido excede el viewport. */
  .app-viewport .screen.screen-hero {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  }
  /* Contenido compacto sin huecos: welcome-below va justo debajo
     de la CTA (no se estira hasta el fondo). El scroll natural
     absorbe el exceso si el contenido excede el viewport. */
  .screen-hero .welcome-cta {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
  }
  .screen-hero .welcome-below {
    margin-top: 8px !important;
    gap: 8px !important;
    padding-top: 0 !important;
  }
  /* Ajuste del chip idioma / tema en full-screen móvil (que no
     se solape con la barra de estado del sistema/URL). */
  .welcome-lang, .welcome-theme {
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  }
}

/* ============================================================
   V417 — GPS Consent Modal (RGPD)
   ============================================================ */
.gps-consent-scrim {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10, 12, 20, 0.68);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease;
}
.gps-consent-scrim.open { opacity: 1; }
.gps-consent-modal {
  position: fixed; z-index: 9999;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.96);
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: linear-gradient(180deg, #1a1f2e 0%, #14171e 100%);
  color: #fff;
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.06) inset;
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transition: opacity .24s ease, transform .28s cubic-bezier(.2,.9,.3,1.2);
}
.gps-consent-modal.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
[data-theme="light"] .gps-consent-modal {
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
  color: #14161d;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 30px 80px rgba(20,22,29,.15);
}
.gps-consent-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.gps-consent-ic {
  width: 54px; height: 54px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  box-shadow: 0 8px 24px rgba(236,72,153,.35);
  flex: 0 0 54px;
}
.gps-consent-title {
  margin: 0;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2;
}
.gps-consent-lead {
  margin: 4px 0 14px;
  font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,.86);
}
[data-theme="light"] .gps-consent-lead { color: #4a4e5a; }
.gps-consent-benefits {
  list-style: none; padding: 0; margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.gps-consent-benefits li {
  position: relative;
  padding: 9px 12px 9px 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px; line-height: 1.4;
}
.gps-consent-benefits li::before {
  content: "✓";
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
[data-theme="light"] .gps-consent-benefits li {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.06);
}
.gps-consent-legal {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.09);
  border: 1px solid rgba(59, 130, 246, 0.22);
  margin-bottom: 18px;
}
.gps-consent-legal strong {
  display: block; font-size: 12.5px; font-weight: 700;
  margin-bottom: 4px;
  color: #93c5fd;
}
[data-theme="light"] .gps-consent-legal strong { color: #1e40af; }
.gps-consent-legal p {
  margin: 0;
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,.75);
}
[data-theme="light"] .gps-consent-legal p { color: #5a6070; }
.gps-consent-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.gps-consent-actions .btn {
  height: 46px; font-size: 14px; font-weight: 700;
}
.gps-consent-actions .btn-primary {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
  color: #fff; border: none;
  box-shadow: 0 6px 20px rgba(236,72,153,.35);
}
.gps-consent-actions .btn-primary:hover { transform: translateY(-1px); }
.gps-consent-actions .btn-ghost {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.1);
}
[data-theme="light"] .gps-consent-actions .btn-ghost {
  background: rgba(0,0,0,.04);
  color: #4a4e5a;
  border-color: rgba(0,0,0,.08);
}
.gps-consent-x {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.gps-consent-x:hover { background: rgba(255,255,255,.14); }
[data-theme="light"] .gps-consent-x {
  background: rgba(0,0,0,.06); color: #14161d;
}
@media (max-width: 480px) and ((pointer: coarse) or (hover: none)) {
  .gps-consent-modal { width: calc(100vw - 24px); padding: 20px 18px; }
  .gps-consent-title { font-size: 18px; }
  .gps-consent-lead { font-size: 13px; }
}

/* ============================================================
   V442 · GPS READER OVERLAY (política/términos apilados)
   Overlay a pantalla completa que se abre encima del modal de
   consentimiento cuando el usuario pulsa "Leer Política" o
   "Leer Términos". El modal permanece vivo detrás (visibility:
   hidden). Al pulsar el botón "atrás" del overlay volvemos al
   modal exactamente como estaba.
   ============================================================ */
.gps-reader-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg, #0f1218);
  color: var(--text, #fff);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .22s ease;
  overflow: hidden;
}
.gps-reader-overlay.open { opacity: 1; transform: translateY(0); }
[data-theme="light"] .gps-reader-overlay { background: #ffffff; color: #14161d; }
.gps-reader-top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; padding: 10px 12px;
  min-height: 48px;
  background: inherit;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
[data-theme="light"] .gps-reader-top { border-bottom-color: rgba(0,0,0,.08); }
.gps-reader-back {
  background: transparent; border: 0; color: inherit;
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.gps-reader-back:hover { background: rgba(255,255,255,.08); }
[data-theme="light"] .gps-reader-back:hover { background: rgba(0,0,0,.06); }
.gps-reader-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 16px 32px;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   V442 · NEARBY GPS NOTICE
   Aviso visible en la pestaña "Cerca" cuando la ubicación está
   apagada. Sin GPS, "Cerca" no puede filtrar por distancia real.
   ============================================================ */
.nearby-gps-notice {
  display: flex; align-items: center; gap: 12px;
  margin: 12px 16px 4px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(255,90,120,.12), rgba(255,90,120,.06));
  border: 1px solid rgba(255,90,120,.35);
  border-radius: 14px;
}
[data-theme="light"] .nearby-gps-notice {
  background: linear-gradient(180deg, rgba(255,90,120,.10), rgba(255,90,120,.04));
}
.nearby-gps-notice-ic {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: rgba(255,90,120,.20);
}
.nearby-gps-notice-body { flex: 1 1 auto; min-width: 0; }
.nearby-gps-notice-title { font-weight: 700; font-size: 14px; line-height: 1.2; margin-bottom: 2px; }
.nearby-gps-notice-lead { font-size: 12.5px; color: var(--text-soft, #b7b9c5); line-height: 1.35; }
.nearby-gps-notice-cta { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
@media (max-width: 380px) {
  .nearby-gps-notice { flex-wrap: wrap; }
  .nearby-gps-notice-cta { width: 100%; }
}

/* ============================================================
   V419 · NO-SCROLL WELCOME (MOBILE + DESKTOP FRAME)
   El usuario no hace scroll: todo debe caber en la primera
   pantalla. En modo invitación/cerrado ocultamos la sección
   inferior extra (cómo funciona + trust + foot) que la desborda.
   ============================================================ */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  html, body { overflow: hidden !important; height: 100dvh !important; }
  /* V581 · Solo aplicamos 100dvh cuando la tabbar NO está visible
     (pantalla welcome/hero). Cuando la tabbar está visible, dejamos
     que flex reparta el espacio entre .app-viewport y .tabbar. */
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 10px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  /* MÓVIL: TODO cabe sin scroll. Contenido apilado desde arriba, sin
     hueco grande entre OAuth y "Cómo funciona": el logo se agranda para
     ocupar el espacio visualmente. */
  .app-viewport .screen-hero .welcome-logo { margin: 0 auto 6px !important; flex: 0 0 auto !important; }
  .app-viewport .screen-hero .welcome-heart {
    transform: scale(1.05) !important;
    transform-origin: center top !important;
    margin-bottom: 6px !important;
  }
  .app-viewport .screen-hero .welcome-sub {
    font-size: 12.5px !important;
    margin: 8px 0 6px !important;
    line-height: 1.25 !important;
    flex: 0 0 auto !important;
  }
  .app-viewport .screen-hero .welcome-cta {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  .app-viewport .screen-hero .welcome-cta .btn { padding: 8px 12px !important; font-size: 12.5px !important; min-height: 0 !important; }
  .app-viewport .screen-hero .welcome-closed { padding: 8px 10px !important; margin: 0 0 4px !important; }
  .app-viewport .screen-hero .welcome-closed strong { font-size: 12.5px !important; }
  .app-viewport .screen-hero .welcome-closed p { font-size: 11px !important; line-height: 1.3 !important; margin: 2px 0 0 !important; }
  .app-viewport .screen-hero .welcome-invite-input { padding: 7px 10px !important; font-size: 12px !important; margin: 3px 0 !important; }
  .app-viewport .screen-hero .welcome-terms { font-size: 10px !important; line-height: 1.3 !important; margin: 2px 0 4px !important; }
  .app-viewport .screen-hero .welcome-below {
    margin-top: 4px !important;
    padding-top: 4px !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
  }
  .app-viewport .screen-hero .welcome-steps-title { font-size: 11.5px !important; margin: 2px 0 !important; }
  .app-viewport .screen-hero .welcome-steps { gap: 3px !important; }
  .app-viewport .screen-hero .welcome-step { padding: 3px 6px !important; gap: 6px !important; }
  .app-viewport .screen-hero .welcome-step-ic { width: 20px !important; height: 20px !important; font-size: 11px !important; }
  .app-viewport .screen-hero .welcome-step-h { font-size: 11px !important; }
  .app-viewport .screen-hero .welcome-step-p { font-size: 10px !important; line-height: 1.25 !important; }
  .app-viewport .screen-hero .welcome-trust { gap: 3px !important; margin: 3px 0 !important; }
  .app-viewport .screen-hero .welcome-badge { font-size: 9.5px !important; padding: 2px 6px !important; }
  .app-viewport .screen-hero .welcome-badge svg { width: 9px !important; height: 9px !important; }
  .app-viewport .screen-hero .welcome-foot { font-size: 9.5px !important; line-height: 1.35 !important; margin-top: 2px !important; }
  .app-viewport .screen-hero .welcome-foot a { font-size: 9.5px !important; }
  .app-viewport .screen-hero .foot-sep { margin: 0 3px !important; opacity: .5 !important; }
}

/* V421 · Enlaces de lectura previa dentro del modal de consentimiento GPS. */
.gps-consent-links {
  margin-top: 8px !important;
  font-size: 12.5px !important;
  color: rgba(255,255,255,.66) !important;
}
.gps-consent-link {
  color: #7ea6ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gps-consent-link:hover { color: #a9c1ff; }
[data-theme="light"] .gps-consent-links { color: #5a6070 !important; }
[data-theme="light"] .gps-consent-link { color: #2c5fda; }
[data-theme="light"] .gps-consent-link:hover { color: #1a3fa0; }

/* ============================================================
   V436 · WELCOME · Responsive con CONTAINER QUERIES
   El diseño responde al ancho del CONTENEDOR (.app-viewport) y no
   al viewport de la ventana. Esto evita que el zoom del navegador
   modifique el diseño en la simulación de escritorio: el marco
   del móvil siempre mide lo mismo, así que el contenido dentro
   nunca cambia aunque agrandes/reduzcas la ventana o el zoom.
   ============================================================ */

/* El contenedor de la app dentro del marco es la referencia. */
.app-viewport {
  container-type: inline-size;
  container-name: viewport;
}

/* Base de .screen-hero (sin depender de vw). */
.screen-hero {
  min-height: 100%;
  height: 100%;
  overflow: hidden;
  gap: 10px;
  justify-content: flex-start;
  align-items: stretch;
  --logo-size: 145px;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.screen-hero .welcome-logo {
  margin-top: 16px;
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.screen-hero .welcome-heart {
  width: var(--logo-size);
  height: var(--logo-size);
}
.screen-hero .welcome-sub {
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.35;
}

/* Formulario / CTA centrado con tope de 420px. */
.screen-hero .welcome-cta {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  gap: 10px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
  flex: 0 0 auto;
}
.screen-hero .welcome-or,
.screen-hero .welcome-oauth,
.screen-hero .welcome-terms,
.screen-hero .welcome-invite-input,
.screen-hero .welcome-closed {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}
.screen-hero .welcome-below {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* -------- Container queries (dependen del ancho del .app-viewport,
   NO del viewport ni del zoom). -------- */

/* Small: ≤360 px de contenedor */
@container viewport (max-width: 360px) {
  .screen-hero {
    --logo-size: 120px;
    padding: 14px;
    gap: 6px;
  }
  .screen-hero .welcome-logo { margin-top: 10px; margin-bottom: 6px; }
  .screen-hero .welcome-sub { font-size: 13px; margin: 6px 0 10px; }
  .screen-hero .welcome-cta { gap: 8px; }
  .screen-hero .welcome-cta .btn { height: 46px; font-size: 14px; }
}

/* Medium: 361-430 px de contenedor */
@container viewport (min-width: 361px) and (max-width: 430px) {
  .screen-hero {
    --logo-size: 145px;
    padding: 18px;
    gap: 10px;
  }
  .screen-hero .welcome-logo { margin-top: 16px; margin-bottom: 10px; }
  .screen-hero .welcome-sub { font-size: 14px; margin: 8px 0 14px; }
  .screen-hero .welcome-cta { gap: 10px; }
  .screen-hero .welcome-cta .btn { height: 50px; font-size: 15px; }
}

/* Large: >430 px de contenedor */
@container viewport (min-width: 431px) {
  .screen-hero {
    --logo-size: 170px;
    padding: 22px;
    gap: 14px;
  }
  .screen-hero .welcome-logo { margin-top: 22px; margin-bottom: 14px; }
  .screen-hero .welcome-sub { font-size: 15px; margin: 10px 0 18px; }
  .screen-hero .welcome-cta { gap: 12px; }
  .screen-hero .welcome-cta .btn { height: 52px; font-size: 15px; }
}

/* Fallback para navegadores SIN soporte de container queries:
   usamos media queries clásicas SOLO si el marco de escritorio no
   está activo (móvil real). En desktop el marco fijo protege el
   contenido, y las reglas por defecto (Medium) aplican. */
@supports not (container-type: inline-size) {
  @media (max-width: 360px) {
    .screen-hero {
      --logo-size: 120px;
      padding: 14px;
      gap: 6px;
    }
    .screen-hero .welcome-cta .btn { height: 46px; font-size: 14px; }
  }
  @media (min-width: 431px) and (max-width: 900px) {
    .screen-hero {
      --logo-size: 170px;
      padding: 22px;
      gap: 14px;
    }
  }
}

/* ============================================================
   V436 · Marco de móvil FIJO en simulación web
   ============================================================ */
@media (min-width: 901px) {
  .phone {
    width: var(--phone-w, 400px) !important;
    max-width: var(--phone-w, 400px) !important;
    min-width: var(--phone-w, 400px) !important;
    flex: 0 0 var(--phone-w, 400px) !important;
    justify-self: center;
    align-self: center;
    margin-inline: auto;
  }
  /* Fuerza que dentro del marco NO se apliquen los media queries
     de viewport que dependían del ancho de la ventana. Como los
     estilos ya son container-based, esto es solo un refuerzo. */
  .phone .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* ============================================================
   V441 · MARCO DEL MÓVIL A PRUEBA DE ZOOM (transform-scale)
   El JS del index.html mide el hueco y aplica transform: scale(k) al
   .phone. En CSS SÓLO forzamos las dimensiones lógicas fijas.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .stage {
    grid-template-columns: 1fr auto 1fr;
    padding: 24px;
    background: var(--bg) var(--grad-hero);
    overflow: hidden;
    align-items: center;
  }
  .stage-side { display: block; }
  .phone {
    width: 400px !important;
    max-width: 400px !important;
    min-width: 400px !important;
    height: 820px !important;
    max-height: 820px !important;
    min-height: 820px !important;
    flex: 0 0 400px !important;
    border-radius: 44px !important;
    box-shadow:
      0 0 0 12px #111318,
      0 0 0 13px #2a2d38,
      var(--shadow-lg) !important;
    /* transform-origin y transform los pone el JS */
  }
  #phoneScaleWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    justify-self: center;
    align-self: center;
  }
  .phone-notch { display: block !important; }
  .phone-home  { display: block !important; }
  .phone-status { display: flex !important; }
  .phone .app-viewport { overflow: hidden !important; }
  .phone .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  html, body { overflow: hidden !important; }
}

/* ============================================================
   VISTA PREVIA DEL PANEL DE ADMIN (iframe ?preview=…)
   El iframe hereda hover/pointer fino del PC anfitrión, por lo que
   las reglas @media (hover:hover) activarían la maqueta de escritorio
   (#stage a dos columnas + marco phone fijo de 400px) y desbordarían
   el marco de ~330px. En preview forzamos móvil a pantalla completa:
   sin sidebars y con el .phone ocupando todo el iframe.
   ============================================================ */
html.preview-mode,
html.preview-mode body {
  overflow: hidden !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
html.preview-mode .stage {
  grid-template-columns: 1fr !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  height: 100% !important;
}
html.preview-mode .stage-side,
html.preview-mode .stage-side-left,
html.preview-mode .stage-side-right {
  display: none !important;
}
html.preview-mode #phoneScaleWrap {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}
html.preview-mode .phone {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* El marco de teléfono real ya lo dibuja el panel (.cp-phone-real),
   así que ocultamos el notch/home del marco simulado interno. */
html.preview-mode .phone-notch,
html.preview-mode .phone-home {
  display: none !important;
}

/* ============================================================
   MODO PRUEBAS / BETA privada — welcome más compacto
   El welcome en modo beta añade: bloque "closed" + input invitación
   + botón CTA + botón "Ver estado de la beta / Soy superadmin",
   así que reducimos el logo y márgenes para que quepa el pie de página.
   ============================================================ */
.welcome-logo.welcome-logo-compact {
  margin-top: 18px;
  margin-bottom: 8px;
}
.welcome-logo.welcome-logo-compact .welcome-heart,
.welcome-logo.welcome-logo-compact .welcome-heart.logo-transparent {
  width: min(var(--logo-size, 88px), 88px) !important;
  height: min(var(--logo-size, 88px), 88px) !important;
  max-width: 88px !important;
  max-height: 88px !important;
}
.screen-hero-beta .welcome-sub { margin: 8px 0 12px; font-size: 14px; }
.screen-hero-beta .welcome-cta { gap: 8px; margin-top: 4px; }
.screen-hero-beta .welcome-terms { margin-top: 10px; font-size: 12px; }
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .welcome-logo.welcome-logo-compact { margin-top: 8px !important; margin-bottom: 4px !important; }
  .welcome-logo.welcome-logo-compact .welcome-heart,
  .welcome-logo.welcome-logo-compact .welcome-heart.logo-transparent {
    width: min(var(--logo-size, 76px), 76px) !important;
    height: min(var(--logo-size, 76px), 76px) !important;
    max-width: 76px !important;
    max-height: 76px !important;
  }
}

/* ============================================================
   V500 — RESPONSIVE UNIVERSAL (móvil 6.5"+, tablet, escritorio)
   Objetivo: que en TODAS las pantallas quepa todo el contenido
   del hero (incluidos los pasos "Cómo funciona", los chips de
   features y el pie con © 2026 Aura), sin cortes y con scroll
   natural cuando sea necesario.
   Todas las reglas usan !important para vencer específicos
   previos sin borrar reglas anteriores (compatible con V413/V417).
   ============================================================ */

/* --- Móviles (≥6.5" en adelante = ≥390px de ancho aproximado) --- */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  /* 1) Permitir SCROLL del hero cuando el contenido no cabe.
        Antes: overflow:hidden bloqueaba ver los pasos 3 y el footer. */
  .app-viewport .screen.screen-hero {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
    box-sizing: border-box !important;
  }

  /* 2) Tipografía fluida con clamp() — se adapta entre 320px y 480px */
  .screen-hero .welcome-sub {
    font-size: clamp(12.5px, 3.4vw, 15px) !important;
    margin: 6px 0 10px !important;
  }
  .screen-hero .welcome-terms {
    font-size: clamp(10.5px, 2.7vw, 12.5px) !important;
    line-height: 1.35 !important;
    margin: 6px 0 8px !important;
  }
  .screen-hero .welcome-steps-title {
    font-size: clamp(12px, 3vw, 14px) !important;
    margin: 6px 0 4px !important;
  }
  .screen-hero .welcome-step {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
  .screen-hero .welcome-step-h {
    font-size: clamp(12.5px, 3.2vw, 14.5px) !important;
  }
  .screen-hero .welcome-step-p {
    font-size: clamp(11.5px, 2.9vw, 13px) !important;
    line-height: 1.35 !important;
  }

  /* 3) Botones principales — mejor contraste con degradado marca
        (antes eran blanco puro sobre fondo oscuro). */
  .screen-hero .welcome-cta .btn-primary {
    background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(255, 59, 107, .28) !important;
  }
  .screen-hero .welcome-cta .btn-ghost {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  /* Tema claro: mantener botones blancos legibles */
  [data-theme="light"] .screen-hero .welcome-cta .btn-ghost {
    background: rgba(255,255,255,.9) !important;
    color: #14161d !important;
    border-color: rgba(0,0,0,.12) !important;
  }

  /* 4) Chips de trust en flex-wrap — 2 columnas en móviles pequeños,
        4 columnas si hay espacio. NO se cortan. */
  .screen-hero .welcome-trust {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    justify-content: center !important;
    margin: 10px 0 !important;
  }
  .screen-hero .welcome-badge {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 0 !important;
    font-size: clamp(10.5px, 2.8vw, 12px) !important;
    padding: 6px 10px !important;
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* 5) Footer con enlaces (Ayuda | Preguntas frecuentes | Normas |
        Términos | Privacidad | Contacto) + "© 2026 Aura · Hecho con ❤ en España"
        SIEMPRE visible al final del scroll. */
  .screen-hero .welcome-foot {
    margin-top: 14px !important;
    margin-bottom: 8px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    font-size: clamp(10.5px, 2.7vw, 12px) !important;
    line-height: 1.5 !important;
    text-align: center !important;
    display: block !important;
  }
  .screen-hero .welcome-foot a {
    display: inline-block !important;
    margin: 2px 3px !important;
    white-space: nowrap !important;
    text-decoration: underline !important;
    opacity: .95 !important;
  }
  .screen-hero .welcome-foot .foot-sep {
    margin: 0 2px !important;
    opacity: .5 !important;
  }
}

/* --- Móviles pequeños (≤380px, iPhone SE, Galaxy S8) --- */
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    max-height: 110px !important;
  }
  .screen-hero .welcome-oauth {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .screen-hero .oauth-btn {
    height: 36px !important;
    font-size: 11.5px !important;
  }
}

/* --- Tablet portrait / móviles gigantes (901px–1200px) ---
   V935 · Antes era `1fr min(400px,46vw) 0`: el 1fr izquierdo se comía todo
   el sobrante y la tarjeta, pegada al teléfono, dejaba un desierto muerto a
   la izquierda con la composición desplazada a la derecha. Ahora son dos
   columnas auto centradas como grupo: el espacio muerto se reparte a partes
   iguales en los dos bordes y la pareja tarjeta+teléfono queda centrada a
   cualquier ancho de la banda. */
@media (min-width: 901px) and (max-width: 1200px) and (hover: hover) {
  .stage {
    grid-template-columns: auto auto !important;
    gap: 32px !important;
    padding: 24px !important;
    justify-content: center !important;
  }
  .stage-side-right { display: none !important; }
  .stage-side-left {
    justify-self: center !important;
    align-self: center !important;
    max-width: 320px !important;
  }
  .brand-block {
    padding: 20px !important;
  }
  .brand-points li {
    font-size: 13px !important;
  }
}

/* --- Tablets portrait (iPad, iPad Pro): forzar layout tipo móvil
       porque el layout de 3 columnas queda descentrado.
       En tablets vertical, mostramos la app a pantalla completa
       como en móvil, sin sidebars decorativos. --- */
@media (min-width: 601px) and (max-width: 1400px) and (orientation: portrait) {
  html, body { overflow-x: hidden !important; }
  .stage {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }
  .stage-side,
  .stage-side-left,
  .stage-side-right { display: none !important; }
  #phoneScaleWrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    flex: 1 1 100% !important;
    transform: none !important;
  }
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    flex: 1 1 100% !important;
  }
  .phone-notch, .phone-status, .phone-home { display: none !important; }
  #phoneScaleWrap {
    width: 100% !important;
    height: 100dvh !important;
    flex: 1 1 100% !important;
  }
  /* V581 · Solo 100dvh cuando la tabbar NO está visible (welcome/hero). */
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 20px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  /* Aumentar tamaños porque hay más espacio horizontal */
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
  }
  .screen-hero .welcome-cta .btn { height: 48px !important; font-size: 16px !important; }
  .screen-hero .oauth-btn { height: 44px !important; font-size: 14px !important; }
  .screen-hero .welcome-trust {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .screen-hero .welcome-foot {
    font-size: 12.5px !important;
    text-align: center !important;
  }
  /* Centrar todo el contenido del hero horizontalmente en tablets */
  .app-viewport .screen.screen-hero {
    align-items: center !important;
  }
  .screen-hero .welcome-logo,
  .screen-hero .welcome-sub,
  .screen-hero .welcome-closed,
  .screen-hero .welcome-invite-input,
  .screen-hero .welcome-cta,
  .screen-hero .welcome-terms,
  .screen-hero .welcome-below,
  .screen-hero .welcome-steps,
  .screen-hero .welcome-foot {
    width: 100% !important;
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .screen-hero .welcome-sub { text-align: center !important; }
  .screen-hero .welcome-title { text-align: center !important; }
}

/* --- Móvil landscape (alto muy pequeño): permitir scroll ---
       En landscape la altura es <500px, imposible meter todo
       el hero sin scroll. Activamos scroll vertical natural. */
/* Landscape corto: bloque MOVIDO al final del archivo para asegurar
   máxima especificidad-por-orden sobre las reglas de móvil vertical.
   Ver bloque V510 al final. */
@media (min-width: 999999px) {
  html, body { overflow: hidden !important; }
  .stage {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }
  .stage-side,
  .stage-side-left,
  .stage-side-right { display: none !important; }
  #phoneScaleWrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    flex: 1 1 100% !important;
    transform: none !important;
  }
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    flex: 1 1 100% !important;
  }
  .phone-notch, .phone-status, .phone-home { display: none !important; }
  /* V581 · Solo 100dvh cuando la tabbar NO está visible (welcome/hero). */
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 8px 16px 10px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-content: start !important;
  }
  /* Columna izquierda ocupa top + fila */
  .screen-hero .welcome-logo,
  .screen-hero .welcome-sub {
    grid-column: 1 / 2 !important;
    text-align: center !important;
  }
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    margin: 0 auto !important;
  }
  .screen-hero .welcome-sub {
    font-size: 11.5px !important;
    margin: 2px 0 4px !important;
    line-height: 1.2 !important;
  }
  .screen-hero .welcome-title { display: none !important; }

  /* Card invite y CTAs en columna izquierda */
  .screen-hero .welcome-closed {
    grid-column: 1 / 2 !important;
    padding: 6px 10px !important;
    margin: 0 !important;
  }
  .screen-hero .welcome-closed strong { font-size: 12px !important; }
  .screen-hero .welcome-closed p {
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    margin: 2px 0 0 !important;
  }
  .screen-hero .welcome-invite-input {
    padding: 6px 8px !important;
    font-size: 11px !important;
    height: 30px !important;
    margin: 3px 0 !important;
  }
  .screen-hero .welcome-cta {
    grid-column: 1 / 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 2px 0 !important;
  }
  .screen-hero .welcome-cta .btn {
    height: 32px !important;
    min-height: 0 !important;
    font-size: 12px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
  .screen-hero .welcome-cta .btn-primary {
    background: linear-gradient(135deg, var(--brand-1,#ff3b6b), var(--brand-2,#ff8a3b)) !important;
    color: #fff !important;
    border: none !important;
  }
  .screen-hero .welcome-terms {
    grid-column: 1 / 2 !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
  }

  /* Columna derecha: pasos + chips + footer */
  .screen-hero .welcome-below {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .screen-hero .welcome-steps-title {
    font-size: 10.5px !important;
    margin: 0 0 2px !important;
    letter-spacing: .06em !important;
  }
  .screen-hero .welcome-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .screen-hero .welcome-step {
    padding: 4px 8px !important;
    gap: 6px !important;
    border-radius: 8px !important;
  }
  .screen-hero .welcome-step-ic {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
  }
  .screen-hero .welcome-step-h {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }
  .screen-hero .welcome-step-p {
    font-size: 10px !important;
    line-height: 1.15 !important;
    margin: 1px 0 0 !important;
  }
  .screen-hero .welcome-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3px !important;
    margin: 3px 0 !important;
  }
  .screen-hero .welcome-badge {
    padding: 3px 5px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
  }
  .screen-hero .welcome-badge svg {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }
  .screen-hero .welcome-foot {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
    text-align: center !important;
  }
  .screen-hero .welcome-foot a {
    white-space: nowrap !important;
    margin: 0 1px !important;
  }
  .screen-hero .welcome-foot br { display: inline !important; }
}

/* --- Escritorio estándar (≥1201px) --- */
@media (min-width: 1201px) and (hover: hover) {
  .stage {
    grid-template-columns: 1fr min(400px, 30vw) 1fr !important;
    gap: 32px !important;
    padding: 32px !important;
  }
}

/* --- MUY IMPORTANTE: garantizar que en escritorio el hero
       también permite scroll interno si el contenido excede
       la altura del marco de teléfono (400×820). --- */
@media (hover: hover) and (pointer: fine) {
  .phone .app-viewport .screen.screen-hero {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: 100% !important;
    max-height: 100% !important;
    padding: 12px 16px 20px !important;
    box-sizing: border-box !important;
  }
  .phone .app-viewport .screen.screen-hero::-webkit-scrollbar {
    width: 0 !important;
  }
}

/* ============================================================
   V501 — OCULTAR TOASTS EN PANTALLA DE BIENVENIDA
   El banner "Instala Aura" y el toast "Protege tu cuenta / 2FA"
   estaban apareciendo encima del hero, tapando el logo y el
   footer con los enlaces + copyright. Estos avisos son para
   USUARIOS DENTRO DE LA APP, no para la pantalla pre-login.
   Los ocultamos cuando la pantalla activa es el hero.
   ============================================================ */
body:has(.screen-hero) #auraInstallBanner,
body:has(.screen-hero) #twofaToast,
body:has(.screen-hero) #twofaReminder {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Fallback: si el navegador no soporta :has() (Firefox <121),
   escondemos también cuando la clase body indica welcome. */
body.welcome-open #auraInstallBanner,
body.welcome-open #twofaToast,
body.welcome-open #twofaReminder,
body:not(.app-open) #auraInstallBanner,
body:not(.app-open) #twofaToast,
body:not(.app-open) #twofaReminder {
  display: none !important;
  visibility: hidden !important;
}

/* ============================================================
   V502 — NO SCROLL: TODO CABE EN LA PANTALLA
   El usuario NO quiere scroll. Todo el contenido del hero
   (logo + subtítulo + CTAs/invite + OAuth + términos + 2 pasos
   + 4 chips + 6 enlaces + copyright) debe caber en el viewport
   visible de cualquier móvil ≥6.5" y en escritorio.

   Estrategia:
   - Usar unidades `dvh` para que se ajuste al viewport dinámico.
   - Flex column con `flex: 1` en las secciones flexibles.
   - Tipografía y paddings en `clamp()` con vh/vw para compresión.
   - Ocultar toasts sobre la bienvenida (ya hecho V501).
   - Chips en 4 columnas en fila única si hay espacio.
   - Footer en 1 sola línea con separadores compactos.
   ============================================================ */

/* --- MÓVIL: SIN SCROLL en ningún momento. Todo cabe en 100dvh --- */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  html, body {
    overflow: hidden !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* V581 · Solo 100dvh cuando la tabbar NO está visible (welcome/hero). */
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    overflow: hidden !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: calc(env(safe-area-inset-top, 0px) + 20px) 12px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  /* welcome-cta: contenido natural agrupado */
  .app-viewport .screen.screen-hero > .welcome-cta {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    min-height: 0 !important;
  }
  /* welcome-below: crece y empuja el footer al fondo */
  .screen-hero .welcome-cta > .welcome-below {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: 0 !important;
  }
  /* Footer siempre al fondo con margen automático */
  .app-viewport .screen.screen-hero .welcome-below .welcome-foot {
    margin-top: auto !important;
  }

  /* Logo compacto: escala con la altura del viewport */
  .screen-hero .welcome-logo {
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: clamp(64px, 12vh, 100px) !important;
    height: clamp(64px, 12vh, 100px) !important;
    max-width: clamp(64px, 12vh, 100px) !important;
    max-height: clamp(64px, 12vh, 100px) !important;
    margin: 0 auto !important;
  }

  /* Subtítulo compacto */
  .screen-hero .welcome-sub {
    margin: 2px 0 4px !important;
    font-size: clamp(11px, 1.5vh, 13px) !important;
    line-height: 1.2 !important;
  }
  .screen-hero .welcome-title { display: none !important; }

  /* Card de pruebas privadas — compacta */
  .screen-hero .welcome-closed,
  .screen-hero .welcome-invite-panel {
    padding: 6px 10px !important;
    margin: 2px 0 !important;
    font-size: clamp(11px, 1.5vh, 13px) !important;
  }
  .screen-hero .welcome-closed strong { font-size: clamp(12px, 1.6vh, 14px) !important; }
  .screen-hero .welcome-closed p { font-size: clamp(11px, 1.4vh, 12.5px) !important; line-height: 1.25 !important; margin: 2px 0 0 !important; }
  .screen-hero .welcome-invite-input {
    padding: 6px 10px !important;
    font-size: clamp(11px, 1.5vh, 12.5px) !important;
    margin: 2px 0 !important;
  }

  /* Bloque de CTAs compacto */
  .screen-hero .welcome-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 2px 0 !important;
    padding: 0 !important;
  }
  .screen-hero .welcome-cta .btn {
    height: clamp(34px, 5vh, 42px) !important;
    min-height: 0 !important;
    font-size: clamp(12.5px, 1.6vh, 14.5px) !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
  .screen-hero .welcome-cta .btn-primary {
    background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b)) !important;
    color: #fff !important;
    border: none !important;
  }

  /* Separador OAuth */
  .screen-hero .welcome-or {
    margin: 3px 0 !important;
    font-size: clamp(9.5px, 1.2vh, 11px) !important;
    letter-spacing: .06em !important;
  }
  .screen-hero .welcome-oauth {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .screen-hero .oauth-btn {
    height: clamp(30px, 4.2vh, 38px) !important;
    font-size: clamp(11px, 1.4vh, 13px) !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
  }
  .screen-hero .oauth-btn span { font-size: inherit !important; }

  /* Términos ultra-compactos */
  .screen-hero .welcome-terms {
    margin: 3px 0 !important;
    font-size: clamp(9.5px, 1.25vh, 11.5px) !important;
    line-height: 1.25 !important;
  }

  /* "CÓMO FUNCIONA" — llenar espacio */
  .screen-hero .welcome-below {
    margin: 0 !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  .screen-hero .welcome-steps-title {
    font-size: clamp(11px, 1.6vh, 13.5px) !important;
    margin: 6px 0 4px !important;
    letter-spacing: .06em !important;
  }
  .app-viewport .screen.screen-hero .welcome-below .welcome-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .app-viewport .screen.screen-hero .welcome-below .welcome-step {
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 12px !important;
    align-items: center !important;
  }
  .screen-hero .welcome-step-ic {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 12.5px !important;
    border-radius: 7px !important;
  }
  .screen-hero .welcome-step-h {
    font-size: clamp(12.5px, 1.7vh, 14px) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  .screen-hero .welcome-step-p {
    font-size: clamp(11.5px, 1.5vh, 12.5px) !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
  }

  /* Chips en 4 columnas en una sola fila */
  .screen-hero .welcome-trust {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    margin: 8px 0 !important;
  }
  .screen-hero .welcome-badge {
    padding: 7px 6px !important;
    font-size: clamp(9.5px, 1.25vh, 11px) !important;
    line-height: 1.2 !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .screen-hero .welcome-badge svg {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
  }

  /* Footer: pegado al fondo para llenar el espacio libre */
  .app-viewport .screen.screen-hero .welcome-below .welcome-foot {
    margin: auto 0 0 !important;
    padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    font-size: clamp(9.5px, 1.2vh, 11px) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .screen-hero .welcome-foot a {
    margin: 0 1px !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .screen-hero .welcome-foot .foot-sep {
    margin: 0 1px !important;
    opacity: .5 !important;
    display: inline-block !important;
  }
  /* Mantener <br> para separar enlaces de copyright */
  .screen-hero .welcome-foot br { display: inline !important; }
}

/* --- Móviles pequeños (≤380px) — reducir aún más --- */
@media (max-width: 380px) and ((pointer: coarse) or (hover: none)) {
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: clamp(70px, 14vh, 110px) !important;
    height: clamp(70px, 14vh, 110px) !important;
    max-width: 110px !important;
    max-height: 110px !important;
  }
  .screen-hero .welcome-trust {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .screen-hero .welcome-badge {
    font-size: 10px !important;
  }
}

/* --- Móviles cortos (≤820px de alto) — reducir logo y textos, forzar footer visible --- */
@media (max-width: 900px) and (max-height: 820px) and ((pointer: coarse) or (hover: none)) {
  .app-viewport .screen.screen-hero .welcome-heart,
  .app-viewport .screen.screen-hero .welcome-heart.logo-transparent {
    width: clamp(64px, 12vh, 96px) !important;
    height: clamp(64px, 12vh, 96px) !important;
    max-width: 96px !important;
    max-height: 96px !important;
  }
  .app-viewport .screen.screen-hero .welcome-sub { margin: 2px 0 4px !important; }
  .app-viewport .screen.screen-hero .welcome-steps { gap: 6px !important; }
  .app-viewport .screen.screen-hero .welcome-step { padding: 8px 10px !important; }
  .app-viewport .screen.screen-hero .welcome-trust { margin: 4px 0 !important; }
  .app-viewport .screen.screen-hero .welcome-below .welcome-foot {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 6px 0 0 !important;
  }
}

/* --- Móviles altos (≥800px de alto) — aprovechar espacio --- */
@media (max-width: 900px) and (min-height: 800px) and ((pointer: coarse) or (hover: none)) {
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: min(160px, 20vh) !important;
    height: min(160px, 20vh) !important;
    max-width: 160px !important;
    max-height: 160px !important;
  }
  .screen-hero .welcome-cta .btn {
    height: 44px !important;
    font-size: 15px !important;
  }
}

/* --- ESCRITORIO: hero dentro del phone frame 400×820 sin scroll ---
   Todo el contenido (logo + subtítulo + card invite + input +
   2 botones + términos + 2 pasos + 4 chips + footer con enlaces
   + copyright) debe caber en ~780px de alto útil del phone.
   Uso valores fijos y compactos, sin scroll. */
@media (hover: hover) and (pointer: fine) {
  .phone .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 14px 16px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }
  /* welcome-cta: contenido natural agrupado */
  .phone .app-viewport .screen.screen-hero > .welcome-cta {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-height: 0 !important;
  }
  /* welcome-below: contenido natural, no crecer */
  .phone .screen-hero .welcome-cta > .welcome-below {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  /* Aumentar tamaños de "cómo funciona" para llenar el espacio */
  .phone .screen-hero .welcome-below > .welcome-steps-title {
    font-size: 13px !important;
    margin: 6px 0 4px !important;
  }
  .phone .screen-hero .welcome-below > .welcome-steps {
    gap: 6px !important;
  }
  .phone .screen-hero .welcome-below .welcome-step {
    padding: 8px 12px !important;
  }
  .phone .screen-hero .welcome-below .welcome-step-ic {
    width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    font-size: 13px !important;
  }
  .phone .screen-hero .welcome-below .welcome-step-h {
    font-size: 13px !important;
  }
  .phone .screen-hero .welcome-below .welcome-step-p {
    font-size: 12px !important;
  }
  .phone .screen-hero .welcome-below .welcome-trust {
    margin: 8px 0 !important;
    gap: 6px !important;
  }
  .phone .screen-hero .welcome-below .welcome-badge {
    padding: 6px 8px !important;
    font-size: 11.5px !important;
  }
  /* Footer al fondo del bloque below */
  .phone .screen-hero .welcome-below .welcome-foot {
    margin-top: auto !important;
    padding-top: 6px !important;
    font-size: 11px !important;
  }

  /* Logo compacto */
  .phone .screen-hero .welcome-logo { margin: 2px auto !important; }
  .phone .screen-hero .welcome-heart,
  .phone .screen-hero .welcome-heart.logo-transparent {
    width: 90px !important;
    height: 90px !important;
    max-width: 90px !important;
    max-height: 90px !important;
    margin: 0 auto !important;
  }

  /* Subtítulo compacto */
  .phone .screen-hero .welcome-sub {
    margin: 2px 0 4px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .phone .screen-hero .welcome-title { display: none !important; }

  /* Card pruebas privadas ultra-compacta */
  .phone .screen-hero .welcome-closed {
    padding: 6px 10px !important;
    margin: 2px 0 !important;
  }
  .phone .screen-hero .welcome-closed strong { font-size: 12.5px !important; }
  .phone .screen-hero .welcome-closed p {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin: 2px 0 0 !important;
  }
  .phone .screen-hero .welcome-invite-input {
    padding: 7px 10px !important;
    font-size: 11.5px !important;
    margin: 2px 0 !important;
    height: 34px !important;
  }

  /* CTAs compactos */
  .phone .screen-hero .welcome-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 2px 0 !important;
  }
  .phone .screen-hero .welcome-cta .btn {
    height: 34px !important;
    min-height: 0 !important;
    font-size: 12.5px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
  }
  .phone .screen-hero .welcome-cta .btn-primary {
    background: linear-gradient(135deg, var(--brand-1, #ff3b6b), var(--brand-2, #ff8a3b)) !important;
    color: #fff !important;
    border: none !important;
  }

  /* OAuth compacto */
  .phone .screen-hero .welcome-or {
    margin: 3px 0 !important;
    font-size: 10px !important;
  }
  .phone .screen-hero .welcome-oauth {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px !important;
  }
  .phone .screen-hero .oauth-btn {
    height: 30px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
  }

  /* Términos compactos */
  .phone .screen-hero .welcome-terms {
    margin: 2px 0 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  /* Bloque "Cómo funciona" compacto */
  .phone .screen-hero .welcome-below {
    margin: 0 !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  .phone .screen-hero .welcome-steps-title {
    font-size: 11px !important;
    margin: 3px 0 2px !important;
    letter-spacing: .06em !important;
  }
  .phone .screen-hero .welcome-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  .phone .screen-hero .welcome-step {
    padding: 4px 8px !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }
  .phone .screen-hero .welcome-step-ic {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
  .phone .screen-hero .welcome-step-h {
    font-size: 12px !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }
  .phone .screen-hero .welcome-step-p {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 1px 0 0 !important;
  }

  /* Chips en 2 columnas × 2 filas — 4 chips completos, sin cortar */
  .phone .screen-hero .welcome-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
    margin: 4px 0 !important;
  }
  .phone .screen-hero .welcome-badge {
    padding: 4px 6px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
  }
  .phone .screen-hero .welcome-badge svg {
    width: 11px !important;
    height: 11px !important;
    flex: 0 0 11px !important;
  }

  /* Footer: 6 enlaces en 1 línea + copyright completo en línea separada */
  .phone .screen-hero .welcome-foot {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
  }
  .phone .screen-hero .welcome-foot a {
    margin: 0 1px !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .phone .screen-hero .welcome-foot .foot-sep {
    margin: 0 1px !important;
    opacity: .5 !important;
    display: inline-block !important;
  }
  /* Mantener el <br> para separar links de copyright */
  .phone .screen-hero .welcome-foot br { display: inline !important; }
}


/* ============================================================
   V510 — LANDSCAPE CORTO (max-height ≤ 500px): 2 columnas sin scroll
   La estructura HTML anida casi todo dentro de .welcome-cta, así que
   ponemos el grid en .welcome-cta (que contiene todo lo demás) para
   distribuir en 2 columnas.

   Layout final (landscape corto):
     [ HERO (flex column) ]
     ├── .welcome-lang (absolute, top-right)
     ├── .welcome-logo (centrado, mini)
     ├── .welcome-cta (grid 2 columnas)
     │    ├── COL 1: .welcome-closed + input + botones + .welcome-terms
     │    └── COL 2: .welcome-below (título + pasos + chips + footer)
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  html, body { overflow: hidden !important; }
  .stage {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }
  .stage-side,
  .stage-side-left,
  .stage-side-right { display: none !important; }
  #phoneScaleWrap {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    flex: 1 1 100% !important;
    transform: none !important;
  }
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    flex: 1 1 100% !important;
  }
  .phone-notch, .phone-status, .phone-home { display: none !important; }
  /* V581 · Solo 100dvh cuando la tabbar NO está visible. */
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* V581 · Cuando la tabbar está visible, usamos flex-grow y dejamos
     que la tabbar hermana reserve su espacio propio (más robusto que
     restar var(--tab-height) del height, que dependía del cálculo). */
  body:has(#tabbar:not([hidden])) .app-viewport {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  body:has(#tabbar:not([hidden])) .phone .tabbar {
    flex: 0 0 auto !important;
    display: grid !important;
    position: relative !important;
    z-index: 6 !important;
  }
  .app-viewport .screen.screen-hero,
  .phone .app-viewport .screen.screen-hero {
    overflow: hidden !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 4px 24px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }

  /* Logo mini */
  .screen-hero .welcome-logo {
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }
  .screen-hero .welcome-heart,
  .screen-hero .welcome-heart.logo-transparent {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    margin: 0 auto !important;
  }

  .screen-hero .welcome-sub {
    display: none !important;
  }
  .screen-hero .welcome-title { display: none !important; }

  /* welcome-cta: contenedor grid 2 columnas para repartir todo.
     Especificidad alta para ganar a las reglas V502 móvil. */
  .app-viewport .screen.screen-hero .welcome-cta,
  .phone .app-viewport .screen.screen-hero .welcome-cta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    align-content: start !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex-direction: initial !important;
  }

  /* COL 1: card invite, input, botones, términos */
  .screen-hero .welcome-cta > .welcome-closed,
  .screen-hero .welcome-cta > .welcome-invite-input,
  .screen-hero .welcome-cta > .btn,
  .screen-hero .welcome-cta > .welcome-terms {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .screen-hero .welcome-cta > .welcome-closed {
    padding: 4px 8px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }
  .screen-hero .welcome-cta > .welcome-closed strong {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }
  .screen-hero .welcome-cta > .welcome-closed p {
    font-size: 9.5px !important;
    line-height: 1.15 !important;
    margin: 1px 0 0 !important;
  }
  .screen-hero .welcome-cta > .welcome-invite-input {
    padding: 4px 8px !important;
    font-size: 10.5px !important;
    height: 26px !important;
    margin: 2px 0 !important;
    border-radius: 999px !important;
  }
  .screen-hero .welcome-cta > .btn {
    height: 26px !important;
    min-height: 0 !important;
    font-size: 11px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    margin: 1px 0 !important;
  }
  .screen-hero .welcome-cta > .btn-primary {
    background: linear-gradient(135deg, var(--brand-1,#ff3b6b), var(--brand-2,#ff8a3b)) !important;
    color: #fff !important;
    border: none !important;
  }
  .screen-hero .welcome-cta > .welcome-terms {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    margin: 2px 0 !important;
    text-align: center !important;
  }

  /* COL 2: welcome-below con título, pasos, chips, footer */
  .screen-hero .welcome-cta > .welcome-below {
    grid-column: 2 / 3 !important;
    grid-row: 1 / span 99 !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .screen-hero .welcome-steps-title {
    font-size: 9.5px !important;
    margin: 0 0 1px !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    line-height: 1.15 !important;
  }
  .screen-hero .welcome-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .screen-hero .welcome-step {
    padding: 3px 6px !important;
    gap: 5px !important;
    border-radius: 6px !important;
  }
  .screen-hero .welcome-step-ic {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
  }
  .screen-hero .welcome-step-h {
    font-size: 9.5px !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  .screen-hero .welcome-step-p {
    font-size: 8.5px !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  .screen-hero .welcome-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    margin: 2px 0 !important;
  }
  .screen-hero .welcome-badge {
    padding: 2px 4px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
  }
  .screen-hero .welcome-badge svg {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
  }
  .screen-hero .welcome-foot {
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    margin: 1px 0 0 !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .screen-hero .welcome-foot a {
    white-space: nowrap !important;
    margin: 0 1px !important;
    text-decoration: underline !important;
  }
  .screen-hero .welcome-foot br { display: inline !important; }
}

/* ============================================================
   V520 — Overrides configurables desde el panel de admin.
   Cada bloque puede ajustar su tamaño mediante variables CSS
   inyectadas desde app.js (applyDesign). Estas reglas usan
   selectores de alta especificidad para asobrescribir los
   valores fijos de los media-queries móvil/desktop/tablet.
   ============================================================ */
/* Logo: en móvil escalado a min(config, 18vh) para no cortarse en pantallas
   pequeñas. En escritorio (marco .phone) usa el valor exacto configurado. */
.app-viewport .screen.screen-hero .welcome-heart,
.app-viewport .screen.screen-hero .welcome-heart.logo-transparent {
  width: min(var(--welc-logo-size, 160px), 22vh, 200px) !important;
  height: min(var(--welc-logo-size, 160px), 22vh, 200px) !important;
  max-width: min(var(--welc-logo-size, 160px), 22vh, 200px) !important;
  max-height: min(var(--welc-logo-size, 160px), 22vh, 200px) !important;
}
.phone .screen-hero .welcome-heart,
.phone .screen-hero .welcome-heart.logo-transparent {
  width: var(--welc-logo-size, 160px) !important;
  height: var(--welc-logo-size, 160px) !important;
  max-width: var(--welc-logo-size, 160px) !important;
  max-height: var(--welc-logo-size, 160px) !important;
}
/* Subtítulo: móvil cap por vh, escritorio valor exacto */
.app-viewport .screen.screen-hero .welcome-sub {
  font-size: min(var(--welc-sub-size, 13px), 1.8vh, 14px) !important;
}
.phone .screen-hero .welcome-sub {
  font-size: var(--welc-sub-size, 13px) !important;
}
/* Tarjeta pruebas privadas */
.app-viewport .screen.screen-hero .welcome-closed,
.app-viewport .screen.screen-hero .welcome-invite-panel {
  padding: min(var(--welc-card-pad, 8px), 1.1vh, 10px) calc(min(var(--welc-card-pad, 8px), 1.1vh, 10px) + 4px) !important;
}
.phone .screen-hero .welcome-closed,
.phone .screen-hero .welcome-invite-panel {
  padding: var(--welc-card-pad, 8px) calc(var(--welc-card-pad, 8px) + 4px) !important;
}
/* Input código */
.app-viewport .screen.screen-hero .welcome-invite-input {
  height: min(var(--welc-input-h, 40px), 5.5vh, 44px) !important;
  min-height: min(var(--welc-input-h, 40px), 5.5vh, 44px) !important;
}
.phone .screen-hero .welcome-invite-input {
  height: var(--welc-input-h, 40px) !important;
  min-height: var(--welc-input-h, 40px) !important;
}
/* Botón principal */
.app-viewport .screen.screen-hero .welcome-cta .btn {
  height: min(var(--welc-btn-h, 42px), 5.8vh, 46px) !important;
  min-height: min(var(--welc-btn-h, 42px), 5.8vh, 46px) !important;
}
.phone .screen-hero .welcome-cta .btn {
  height: var(--welc-btn-h, 42px) !important;
  min-height: var(--welc-btn-h, 42px) !important;
}
/* Botón beta */
.app-viewport .screen.screen-hero .welcome-cta .btn.btn-ghost,
.app-viewport .screen.screen-hero .welcome-cta a.btn.btn-ghost {
  height: min(var(--welc-beta-h, 38px), 5.2vh, 42px) !important;
  min-height: min(var(--welc-beta-h, 38px), 5.2vh, 42px) !important;
}
.phone .screen-hero .welcome-cta .btn.btn-ghost,
.phone .screen-hero .welcome-cta a.btn.btn-ghost {
  height: var(--welc-beta-h, 38px) !important;
  min-height: var(--welc-beta-h, 38px) !important;
}
/* Steps padding */
.app-viewport .screen.screen-hero .welcome-below .welcome-step {
  padding-top: min(var(--welc-steps-pad, 6px), 0.9vh, 8px) !important;
  padding-bottom: min(var(--welc-steps-pad, 6px), 0.9vh, 8px) !important;
}
.phone .screen-hero .welcome-below .welcome-step {
  padding-top: var(--welc-steps-pad, 6px) !important;
  padding-bottom: var(--welc-steps-pad, 6px) !important;
}
/* Step icono */
.app-viewport .screen.screen-hero .welcome-below .welcome-step-ic {
  width: min(var(--welc-step-ic, 24px), 3.4vh, 28px) !important;
  height: min(var(--welc-step-ic, 24px), 3.4vh, 28px) !important;
  flex: 0 0 min(var(--welc-step-ic, 24px), 3.4vh, 28px) !important;
  font-size: calc(min(var(--welc-step-ic, 24px), 3.4vh, 28px) * .5) !important;
}
.phone .screen-hero .welcome-below .welcome-step-ic {
  width: var(--welc-step-ic, 24px) !important;
  height: var(--welc-step-ic, 24px) !important;
  flex: 0 0 var(--welc-step-ic, 24px) !important;
  font-size: calc(var(--welc-step-ic, 24px) * .5) !important;
}
/* Step tipografía */
.app-viewport .screen.screen-hero .welcome-below .welcome-step-h {
  font-size: min(var(--welc-step-h-size, 13px), 1.75vh, 14px) !important;
}
.phone .screen-hero .welcome-below .welcome-step-h {
  font-size: var(--welc-step-h-size, 13px) !important;
}
.app-viewport .screen.screen-hero .welcome-below .welcome-step-p {
  font-size: min(var(--welc-step-p-size, 11.5px), 1.55vh, 12.5px) !important;
}
.phone .screen-hero .welcome-below .welcome-step-p {
  font-size: var(--welc-step-p-size, 11.5px) !important;
}
/* Chips */
.app-viewport .screen.screen-hero .welcome-below .welcome-badge {
  min-height: min(var(--welc-chip-h, 28px), 4vh, 32px) !important;
  font-size: min(var(--welc-chip-font, 10.5px), 1.4vh, 11.5px) !important;
}
.phone .screen-hero .welcome-below .welcome-badge {
  min-height: var(--welc-chip-h, 28px) !important;
  font-size: var(--welc-chip-font, 10.5px) !important;
}
/* Footer: NUNCA se oculta; siempre visible en la pantalla */
.app-viewport .screen.screen-hero .welcome-foot,
.app-viewport .screen.screen-hero .welcome-below .welcome-foot,
.phone .screen-hero .welcome-foot {
  font-size: min(var(--welc-foot-size, 10.5px), 1.4vh, 11.5px) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* V521 — Overrides adicionales: título, textos, gaps, paddings */
.app-viewport .screen.screen-hero .welcome-title {
  font-size: var(--welc-title-size, 22px) !important;
}
.app-viewport .screen.screen-hero .welcome-closed strong,
.app-viewport .screen.screen-hero .welcome-invite-panel strong {
  font-size: var(--welc-closed-title, 15px) !important;
}
.app-viewport .screen.screen-hero .welcome-closed p,
.app-viewport .screen.screen-hero .welcome-invite-panel p {
  font-size: var(--welc-closed-p, 12.5px) !important;
}
.app-viewport .screen.screen-hero .welcome-terms {
  font-size: var(--welc-terms-size, 11.5px) !important;
}
.app-viewport .screen.screen-hero .welcome-steps-title {
  font-size: var(--welc-steps-title, 12.5px) !important;
}
.app-viewport .screen.screen-hero .welcome-or {
  font-size: var(--welc-or-size, 10px) !important;
}
.app-viewport .screen.screen-hero .oauth-btn {
  min-height: var(--welc-oauth-h, 38px) !important;
  height: var(--welc-oauth-h, 38px) !important;
}
/* Gaps configurables */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .app-viewport .screen.screen-hero {
    gap: var(--welc-gap, 6px) !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--welc-pad-top, 20px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--welc-pad-bot, 8px)) !important;
  }
  .app-viewport .screen.screen-hero .welcome-below {
    gap: var(--welc-below-gap, 4px) !important;
  }
}

/* V522 — Ultra-cortos: mayor prioridad para sobrescribir V521 y valores guardados */
@media (max-width: 900px) and (max-height: 620px) and ((pointer: coarse) or (hover: none)) {
  .app-viewport .screen.screen-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    gap: 4px !important;
  }
  .app-viewport .screen.screen-hero .welcome-heart,
  .app-viewport .screen.screen-hero .welcome-heart.logo-transparent {
    width: 52px !important; height: 52px !important;
    max-width: 52px !important; max-height: 52px !important;
  }
  .app-viewport .screen.screen-hero .welcome-sub { margin: 0 !important; font-size: 11px !important; }
  .app-viewport .screen.screen-hero .welcome-steps-title,
  .app-viewport .screen.screen-hero .welcome-steps,
  .app-viewport .screen.screen-hero .welcome-trust { display: none !important; }
  .app-viewport .screen.screen-hero .welcome-terms { display: none !important; }
}

/* V524 — Navegador móvil con barra URL (~680-780px): compactar sin ocultar el
   bloque CÓMO FUNCIONA + trust chips. Reduce logo, pasos y padding para que
   los chips no queden bajo el footer fijo. Sólo se aplica a alturas ≤ 780.
   PWA (≥ 800px) no se ve afectada. */
@media (max-width: 900px) and (max-height: 780px) and (min-height: 621px) and ((pointer: coarse) or (hover: none)) {
  .app-viewport .screen.screen-hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
    gap: 5px !important;
  }
  .app-viewport .screen.screen-hero .welcome-heart,
  .app-viewport .screen.screen-hero .welcome-heart.logo-transparent {
    width: 64px !important; height: 64px !important;
    max-width: 64px !important; max-height: 64px !important;
  }
  .app-viewport .screen.screen-hero .welcome-title {
    font-size: 17px !important;
    margin: 2px 0 !important;
  }
  .app-viewport .screen.screen-hero .welcome-sub {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }
  .app-viewport .screen.screen-hero .welcome-closed,
  .app-viewport .screen.screen-hero .welcome-invite-panel {
    padding: 6px 10px !important;
  }
  .app-viewport .screen.screen-hero .welcome-closed strong,
  .app-viewport .screen.screen-hero .welcome-invite-panel strong {
    font-size: 13px !important;
  }
  .app-viewport .screen.screen-hero .welcome-closed p,
  .app-viewport .screen.screen-hero .welcome-invite-panel p {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin: 2px 0 0 !important;
  }
  .app-viewport .screen.screen-hero input[type="text"],
  .app-viewport .screen.screen-hero .welcome-invite-input {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12.5px !important;
  }
  .app-viewport .screen.screen-hero .welcome-cta .btn,
  .app-viewport .screen.screen-hero .welcome-cta button {
    min-height: 38px !important; height: 38px !important;
    font-size: 13px !important;
  }
  .app-viewport .screen.screen-hero .welcome-beta-btn,
  .app-viewport .screen.screen-hero .welcome-superadmin-btn {
    min-height: 34px !important; height: 34px !important;
    font-size: 12px !important;
  }
  .app-viewport .screen.screen-hero .welcome-terms {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
    margin: 2px 0 !important;
  }
  .app-viewport .screen.screen-hero .welcome-steps-title {
    font-size: 11px !important;
    margin: 2px 0 !important;
  }
  .app-viewport .screen.screen-hero .welcome-steps {
    gap: 4px !important;
  }
  .app-viewport .screen.screen-hero .welcome-step {
    padding: 4px 8px !important;
  }
  .app-viewport .screen.screen-hero .welcome-step-num {
    width: 22px !important; height: 22px !important;
    font-size: 12px !important;
  }
  .app-viewport .screen.screen-hero .welcome-step h4 {
    font-size: 12px !important; margin: 0 !important;
  }
  .app-viewport .screen.screen-hero .welcome-step p {
    font-size: 10.5px !important; margin: 1px 0 0 !important; line-height: 1.25 !important;
  }
  .app-viewport .screen.screen-hero .welcome-trust {
    gap: 4px !important;
  }
  .app-viewport .screen.screen-hero .welcome-badge {
    min-height: 24px !important; height: 24px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }
  /* Espacio extra para que los chips no queden bajo el footer fijo */
  .app-viewport .screen.screen-hero .welcome-below {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 44px) !important;
  }
}

/* V531 — Footer del hero: mismo comportamiento en móvil, PWA y desktop.
   El hero es flex column con min-height:100dvh y el footer usa margin-top:auto
   para pegarse abajo SIN position:fixed (así no se solapa con los chips ni
   depende de qué ancestro sea position:relative). */
.app-viewport .screen.screen-hero,
.phone .screen-hero {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  position: relative !important;
}
.app-viewport .screen.screen-hero .welcome-foot,
.app-viewport .screen.screen-hero .welcome-below .welcome-foot,
.phone .screen-hero .welcome-foot,
.phone .screen-hero .welcome-below .welcome-foot {
  position: static !important;
  margin-top: auto !important;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  text-align: center !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 1 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  background: transparent !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  width: 100% !important;
}
.app-viewport .screen.screen-hero .welcome-foot a,
.phone .screen-hero .welcome-foot a {
  white-space: nowrap !important;
  display: inline-block !important;
  margin: 0 2px !important;
}
/* Espacio residual bajo los chips (welcome-below) para que respire */
.app-viewport .screen.screen-hero .welcome-below,
.phone .screen-hero .welcome-below {
  padding-bottom: 4px !important;
}

/* ============================================================
   V532 — Logo Aura: PNG oficial (el anillo arcoíris ya está en la
   propia imagen, no dibujamos ring CSS). Solo garantizamos que se
   muestre completo sin recortar, sin fondo extra, en cuadrado.
   ============================================================ */
.welcome-heart:has(> img),
.welcome-heart.logo-transparent {
  position: relative;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  aspect-ratio: 1 / 1 !important;
}
.welcome-heart:has(> img) > img,
.welcome-heart.logo-transparent > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
  display: block;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* V533 — Subir el logo. El logo queda inmediatamente debajo del
   selector de idioma (welcome-lang) con margen negativo para
   compensar el padding del hero y el margin-top propio. */
.app-viewport .screen.screen-hero,
.phone .screen-hero,
.screen-hero {
  padding-top: 0 !important;
  justify-content: flex-start !important;
  gap: 2px !important;
}
.app-viewport .screen.screen-hero .welcome-lang,
.phone .screen-hero .welcome-lang,
.screen-hero .welcome-lang {
  margin-top: 6px !important;
}
.app-viewport .screen.screen-hero .welcome-logo,
.phone .screen-hero .welcome-logo,
.screen-hero .welcome-logo {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
.app-viewport .screen.screen-hero .welcome-sub,
.phone .screen-hero .welcome-sub,
.screen-hero .welcome-sub {
  margin-top: 2px !important;
  margin-bottom: 6px !important;
}

/* ============================================================
   V528 — Modo oscuro: gradiente vertical morado/vino → negro
   La referencia buena muestra un fondo con degradado desde un
   morado/vino oscuro arriba hasta casi negro abajo. Reemplaza
   el solid negro anterior cuando el tema es dark.
   ============================================================ */
:root[data-theme="dark"] .screen-hero.hero-solid,
:root[data-theme="dark"] .phone .screen-hero.hero-solid,
:root[data-theme="dark"] .app-viewport .screen.screen-hero.hero-solid {
  background:
    linear-gradient(180deg,
      #5b1e33 0%,
      #43172a 22%,
      #2c1220 45%,
      #180b18 70%,
      #0a0710 100%
    ) !important;
  color: #f2f3f7 !important;
}
/* Modo claro: gradiente rosa muy suave con logo bien visible */
:root[data-theme="light"] .screen-hero.hero-solid,
:root[data-theme="light"] .phone .screen-hero.hero-solid,
:root[data-theme="light"] .app-viewport .screen.screen-hero.hero-solid {
  background:
    radial-gradient(120% 80% at 50% 0%,
      #fff2f5 0%,
      #ffe6ec 40%,
      #ffffff 100%
    ) !important;
  color: #14060b !important;
}

/* ============================================================
   V527 — Modo claro: fondo blanco con gradiente sutil rosa→naranja
   ============================================================ */
:root[data-theme="light"] .screen-hero.hero-solid {
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(255,59,107,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(255,138,59,.10), transparent 60%),
    #ffffff !important;
  color: #14161d !important;
}
:root[data-theme="light"] .screen-hero.hero-solid .welcome-title { color: #14161d !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-sub { color: #5b6270 !important; opacity: 1 !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-terms { color: #5b6270 !important; opacity: 1 !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-foot { color: #5b6270 !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-foot a { color: #14161d !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-closed,
:root[data-theme="light"] .screen-hero.hero-solid .welcome-invite-panel {
  background: rgba(255, 59, 107, 0.06) !important;
  border-color: rgba(255, 59, 107, 0.18) !important;
  color: #14161d !important;
}
:root[data-theme="light"] .screen-hero.hero-solid .welcome-closed p,
:root[data-theme="light"] .screen-hero.hero-solid .welcome-invite-panel p {
  color: #14161d !important;
}
:root[data-theme="light"] .screen-hero.hero-solid .welcome-step {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.08) !important;
}
:root[data-theme="light"] .screen-hero.hero-solid .welcome-step h4 { color: #14161d !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-step p { color: #5b6270 !important; }
:root[data-theme="light"] .screen-hero.hero-solid .welcome-badge {
  background: #ffffff !important;
  color: #14161d !important;
  border-color: rgba(0,0,0,.08) !important;
}
:root[data-theme="light"] .screen-hero.hero-solid input[type="text"],
:root[data-theme="light"] .screen-hero.hero-solid .welcome-invite-input {
  background: #ffffff !important;
  color: #14161d !important;
  border-color: rgba(0,0,0,.12) !important;
}
:root[data-theme="light"] .screen-hero.hero-solid .welcome-beta-btn,
:root[data-theme="light"] .screen-hero.hero-solid .welcome-superadmin-btn {
  background: #ffffff !important;
  color: #14161d !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* V534 — Side cards must render in light mode when theme is light.
   Prevents applyDesign() bg override from darkening the desktop side panels. */
:root[data-theme="light"] .stage-side-left .brand-block,
:root[data-theme="light"] .stage-side-left .theme-card,
:root[data-theme="light"] .stage-side-right .mock-card {
  background: #ffffff !important;
  border-color: #ececf3 !important;
  color: #14161d !important;
  box-shadow: 0 6px 22px rgba(20, 22, 29, 0.06) !important;
}
:root[data-theme="light"] .stage-side-left .brand-block *,
:root[data-theme="light"] .stage-side-left .theme-card *,
:root[data-theme="light"] .stage-side-right .mock-card * {
  color: inherit;
}
:root[data-theme="light"] .stage-side-left .brand-block small,
:root[data-theme="light"] .stage-side-left .theme-card small,
:root[data-theme="light"] .stage-side-right .mock-card small,
:root[data-theme="light"] .stage-side-left .brand-block .muted,
:root[data-theme="light"] .stage-side-right .mock-card .muted {
  color: #5b6270 !important;
}

/* V543 — Volver al tamaño que funcionaba en PWA (V541: 320px cap 42vh/60vw)
   y solo bajar un poco en navegador móvil pequeño. */
html body .welcome-heart,
html body .welcome-heart.logo-transparent,
html body .screen-hero .welcome-heart,
html body .app-viewport .screen.screen-hero .welcome-heart,
html body .phone .screen-hero .welcome-heart {
  width: min(var(--welc-logo-size, 320px), 42vh, 60vw) !important;
  height: min(var(--welc-logo-size, 320px), 42vh, 60vw) !important;
  max-width: min(var(--welc-logo-size, 320px), 42vh, 60vw) !important;
  max-height: min(var(--welc-logo-size, 320px), 42vh, 60vw) !important;
  min-width: 180px !important;
  min-height: 180px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1 !important;
}
/* V544 — Solo navegador móvil (NO PWA): logo más pequeño para que
   quepa el pie de página sin scroll. Cap 22vh / 38vw / 170px. */
@media (max-width: 768px) and (display-mode: browser) {
  html body .welcome-heart,
  html body .welcome-heart.logo-transparent,
  html body .screen-hero .welcome-heart,
  html body .app-viewport .screen.screen-hero .welcome-heart,
  html body .phone .screen-hero .welcome-heart {
    width: min(170px, 22vh, 38vw) !important;
    height: min(170px, 22vh, 38vw) !important;
    max-width: min(170px, 22vh, 38vw) !important;
    max-height: min(170px, 22vh, 38vw) !important;
    min-width: 120px !important;
    min-height: 120px !important;
  }
  html body .welcome-logo { margin-top: 10px !important; margin-bottom: 4px !important; }
}
html body .welcome-heart > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
}
html body .welcome-logo { margin-top: 20px !important; margin-bottom: 10px !important; }

/* ================================================================
   V545 · Fase 1 · Chat features (stickers, audios, efímeros, rompehielo)
   ================================================================ */
.composer .ephemeral-toggle { opacity: .7; }
.composer .ephemeral-toggle.active {
  opacity: 1;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  color: #fff;
  border-radius: 999px;
}
.bubble.ephemeral-msg {
  border: 1px dashed rgba(255,59,107,.55) !important;
  position: relative;
}
.bubble.ephemeral-msg::after {
  content: "⏱️ 24h";
  position: absolute;
  right: 6px; bottom: 4px;
  font-size: 10px;
  opacity: .7;
}
.bubble.audio-bubble audio { width: 220px; max-width: 60vw; }

/* Modal genérico */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: modalFadeIn .18s ease-out;
}
@keyframes modalFadeIn { from { opacity: 0 } to { opacity: 1 } }
.modal-card {
  background: var(--surface, #1a1a25);
  color: var(--text, #fff);
  border-radius: 18px;
  padding: 22px;
  max-width: 520px; width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  position: relative;
}
/* Botón de cierre (X) fijo arriba a la derecha de cualquier modal de aura2.
   V817 · ANTES usaba `float: right`. Como el contenido del modal
   (.notif-list-wrap, .rewards-shop) es `display:flex` (crea un contexto de
   formato de bloque), el bloque se ENCOGÍA para no solaparse con el float →
   TODO el contenido quedaba ~48px estrecho por la derecha (ese "margen" que no
   se iba). Lo sacamos del flujo con `position:absolute` para que el contenido
   ocupe el ancho completo de la tarjeta. Reservamos hueco en las cabeceras
   (más abajo) para que el título no quede debajo de la X. */
.modal-card .modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  float: none;
  margin: 0;
  width: 34px; height: 34px;
  border: none; border-radius: 999px;
  background: rgba(255,255,255,.1); color: inherit;
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
/* V817 · Hueco para la X en las cabeceras de estos modales, para que el
   título/acciones no queden debajo del botón de cierre. */
.modal-card .notif-head,
.modal-card .rewards-head,
.modal-card .rewards-shop > h3 { padding-right: 44px; }
.modal-card .modal-x:hover { background: rgba(255,255,255,.2); }
:root[data-theme="light"] .modal-card .modal-x { background: #eef0f5; }
:root[data-theme="light"] .modal-card .modal-x:hover { background: #e0e3ec; }
:root[data-theme="light"] .modal-card {
  background: #ffffff;
  color: #111827;
}
.modal-card h3 { margin: 0 0 10px; font-size: 20px; }
.modal-card .muted { opacity: .7; font-size: 14px; margin: 6px 0 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.modal-card .btn { padding: 10px 18px; border-radius: 999px; border: none; cursor: pointer; font-weight: 600; }
.modal-card .btn.primary { background: linear-gradient(135deg, #ff3b6b, #ff8a3b); color: #fff; }
.modal-card .btn.secondary { background: rgba(255,255,255,.08); color: inherit; }
:root[data-theme="light"] .modal-card .btn.secondary { background: #eef0f5; }

/* Plan-lock */
.plan-lock-card { text-align: center; }
.plan-lock-icon { font-size: 60px; line-height: 1; margin-bottom: 8px; }

/* Rompehielo */
.icebreaker-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.icebreaker-item {
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
  font-size: 15px;
}
.icebreaker-item:hover { background: rgba(255,59,107,.12); border-color: rgba(255,59,107,.4); }
:root[data-theme="light"] .icebreaker-item { background: #f6f7fb; border-color: #e6e8ef; }

/* Stickers */
.sticker-packs { display: flex; flex-direction: column; gap: 14px; margin: 10px 0; }
.sticker-pack.locked { opacity: .5; }
.sticker-pack h4 { margin: 0 0 6px; font-size: 14px; opacity: .85; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.sticker-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 6px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sticker-btn:hover { background: rgba(255,59,107,.12); border-color: rgba(255,59,107,.4); }
:root[data-theme="light"] .sticker-btn { background: #f6f7fb; border-color: #e6e8ef; }

/* Audio recorder */
.audio-rec-card { text-align: center; }
.rec-timer {
  font-size: 42px;
  font-weight: 700;
  margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
  color: #ff3b6b;
}

/* V546 · Fases 2/3/4 UI */
.aura-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,.86); color: #fff; padding: 10px 18px; border-radius: 999px;
  z-index: 10000; opacity: 0; transition: all .3s ease; font-size: 14px;
}
.aura-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Stories */
.stories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 10px 0; }
.story-item { cursor: pointer; position: relative; }
.story-caption { position: absolute; bottom: 6px; left: 8px; color: #fff; font-weight: 700; text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.story-viewer img { width: 100%; }

/* Gamificación */
.gami-header { display: flex; justify-content: space-around; text-align: center; margin: 14px 0; }
.gami-level, .gami-xp, .gami-streak { font-weight: 700; font-size: 16px; }
.gami-bar { height: 12px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; margin: 6px 0; }
:root[data-theme="light"] .gami-bar { background: #eef0f5; }
.gami-bar-fill { height: 100%; background: linear-gradient(90deg, #ff3b6b, #ff8a3b); transition: width .4s ease; }
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.achievement { text-align: center; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
:root[data-theme="light"] .achievement { background: #f6f7fb; }
.achievement.locked { opacity: .4; filter: grayscale(1); }
.ach-icon { font-size: 34px; }
.ach-name { font-weight: 700; font-size: 13px; margin-top: 4px; }
.ach-desc { font-size: 11px; margin-top: 2px; }

/* Eventos */
.events-list { display: flex; flex-direction: column; gap: 10px; }
.event-item { padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; }
:root[data-theme="light"] .event-item { border-color: #e6e8ef; background: #fafbfd; }
.event-title { font-weight: 700; font-size: 16px; }
.event-meta { font-size: 12px; margin: 4px 0 8px; }

/* Filtros */
.filters-basic, .filters-advanced { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; align-items: center; margin: 8px 0; }
.filters-basic input, .filters-advanced input { padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: inherit; }
:root[data-theme="light"] .filters-basic input, :root[data-theme="light"] .filters-advanced input { border-color: #e6e8ef; }
.filters-advanced.locked { opacity: .5; pointer-events: none; }

/* GDPR */
.gdpr-modal .modal-actions { gap: 8px; }

/* Video */
.video-modal .modal-card { max-width: 720px; width: 96%; }
.video-call-wrap video { display: block; }

/* V576 · FAB retirado. Las funciones ahora viven dentro de "Mi perfil". */
.aura2-fab, .aura2-menu, #aura2Fab, #aura2Menu { display: none !important; }

/* V576 · Tienda de recompensas / cupones XP */
.rewards-shop { display: flex; flex-direction: column; gap: 14px; }
.rewards-head h3 { margin: 0 0 4px; font-size: 20px; }
.reward-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.reward-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
:root[data-theme="light"] .reward-card { background: #fff; border-color: #e6e8ef; }
.reward-icon { font-size: 30px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.reward-body { flex: 1; min-width: 0; }
.reward-title { font-weight: 600; font-size: 14px; }
.reward-desc { font-size: 12px; margin: 2px 0 4px; }
.reward-meta { font-size: 11px; }
.reward-action { flex: 0 0 auto; }
.reward-flag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.reward-flag.ok { background: rgba(30,180,110,.18); color: #34d18a; }
.reward-flag.warn { background: rgba(240,180,60,.18); color: #f5b830; }
.reward-flag.off { background: rgba(200,80,80,.18); color: #ff7777; }

/* Formulario "Nueva quedada" */
.event-form .ev-form-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.event-form .ev-form-emoji {
  font-size: 26px; width: 46px; height: 46px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: linear-gradient(135deg, rgba(255,59,107,.18), rgba(255,138,59,.18));
}
.event-form .ev-field { margin-bottom: 14px; }
.event-form .ev-label {
  display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .4px; opacity: .8;
}
.event-form .ev-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 15px; font-family: inherit;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.event-form .ev-input:focus {
  outline: none; border-color: #ff5b86;
  box-shadow: 0 0 0 3px rgba(255,91,134,.18);
}
.event-form .ev-textarea { resize: vertical; min-height: 76px; line-height: 1.4; }
.event-form .ev-hint { font-size: 11px; opacity: .6; margin-top: 4px; }
:root[data-theme="light"] .event-form .ev-input {
  background: #f6f7fb; border-color: #dfe2ec;
}




/* V587 · Notificaciones in-app: campanita + badge + lista */
.me-hero-actions { display: flex; align-items: center; gap: 8px; }
.me-bell {
  position: relative; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 17px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.me-bell:hover { background: var(--surface-2); }
.me-bell-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: linear-gradient(135deg, #ff3b6b, #ef4444); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px rgba(255,59,107,.45);
}
.notif-list-wrap { display: flex; flex-direction: column; gap: 12px; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-head h3 { margin: 0; font-size: 19px; }
.notif-readall { font-size: 12px; padding: 6px 10px; }
.notif-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.notif-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px;
  border-radius: 12px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
:root[data-theme="light"] .notif-item { background: #fff; border-color: #e6e8ef; }
.notif-item.unread { background: rgba(255,59,107,.07); border-color: rgba(255,59,107,.22); }
.notif-icon { font-size: 22px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 13.5px; }
.notif-text { font-size: 12px; margin-top: 2px; white-space: pre-line; }
.notif-time { font-size: 11px; margin-top: 4px; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3b6b; flex: 0 0 auto; margin-top: 6px; }
.notif-empty { text-align: center; padding: 28px 12px; }

/* V588 · Soft-prompt de push (banner propio previo al prompt nativo) */
.push-soft {
  position: fixed; left: 12px; right: 12px; bottom: 76px; z-index: 9500;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  max-width: 520px; margin: 0 auto;
}
.push-soft.show { opacity: 1; transform: none; }
.push-soft-ico { font-size: 26px; flex: 0 0 auto; }
.push-soft-body { flex: 1; min-width: 0; }
.push-soft-body strong { display: block; font-size: 13.5px; }
.push-soft-body small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.push-soft-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.push-soft-yes {
  padding: 8px 14px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ff3b6b, #a855f7); color: #fff;
  font-weight: 700; font-size: 12.5px;
}
.push-soft-no {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-soft); font-weight: 600; font-size: 12px;
}

/* V608 · Banner IN-APP para notificaciones recibidas con la app abierta.
   Aparece arriba (bajo la barra de estado) para no chocar con el aviso de
   activación (push-soft), que va abajo. */
.push-inapp {
  position: fixed; left: 12px; right: 12px; top: 12px; z-index: 9600;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 12px 36px rgba(0,0,0,.32);
  opacity: 0; transform: translateY(-14px);
  transition: opacity .25s ease, transform .25s ease;
  max-width: 520px; margin: 0 auto;
  cursor: pointer;
}
.push-inapp.show { opacity: 1; transform: none; }
.push-inapp-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(255,90,120,.18);
}
.push-inapp-body { flex: 1 1 auto; min-width: 0; }
.push-inapp-body strong { display: block; font-size: 13.5px; line-height: 1.25; }
.push-inapp-body small {
  display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.push-inapp-close {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-soft); font-size: 14px; line-height: 1;
}

/* V612 · Contenedor de la tarjeta de Discover que hace de referencia para la
   capa de avisos superpuesta. Ocupa el mismo alto que la pila de tarjetas. */
.discover-stack-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.discover-stack-wrap > .discover-stack { flex: 1; }
/* V746 · En MÓVIL la tarjeta debe rellenar TODO el alto disponible entre la
   topbar y la fila de acciones. Antes quedaba limitada por aspect-ratio +
   max-height:62vh, dejando un hueco vacío grande abajo. Al quitar esos topes
   en móvil, la pila crece con flex:1 y el hueco desaparece; la fila de
   acciones queda anclada justo encima del tabbar. */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .discover { padding-bottom: 8px; }
  .discover-stack {
    aspect-ratio: auto;
    max-height: none;
    height: auto;
    min-height: 0;
  }
  .action-row { flex: 0 0 auto; padding: 12px 0 4px; }
}
/* V612 · Capa de avisos SUPERPUESTA sobre el borde superior de la tarjeta.
   position:absolute → 0 de alto en el layout: la tarjeta conserva su tamaño y
   NUNCA se recorta, aunque haya dos avisos (notificaciones + ubicación). Se
   apila justo bajo los indicadores de fotos de la tarjeta (top ~10px). */
.discover-notices {
  /* V613 · z-index POR ENCIMA de las tarjetas. Las swipe-card usan
     z-index:10-depth (la superior = 10) y .discover-stack NO crea contexto de
     apilado propio (position:relative + z-index auto), por lo que un z-index:4
     dejaba el aviso DEBAJO de la tarjeta → "no salía el aviso". Con z-index:20
     el aviso vuelve a verse superpuesto sobre el borde superior de la foto. */
  position: absolute; z-index: 20;
  top: 22px; left: 10px; right: 10px; /* justo bajo los indicadores de fotos */
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none; /* deja pasar el swipe salvo en los propios pills */
}
.discover-notices:empty { display: none; }
.discover-notices > .push-mini { pointer-events: auto; }

/* V610 · Aviso COMPACTO de activación de notificaciones en Discover. Una sola
   línea, discreto, para no tapar la tarjeta ni el feed.
   V612 · Al ir superpuesto sobre la foto usa fondo sólido semitransparente
   oscuro (legible sobre cualquier imagen) en vez del degradado tenue. */
.push-mini {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 6px 8px 6px 10px;
  border-radius: 999px;
  background: rgba(20,22,30,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-size: 12px; line-height: 1.2;
}
.push-mini-ico { flex: 0 0 auto; font-size: 14px; }
.push-mini-txt {
  flex: 1 1 auto; min-width: 0;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.push-mini-btn {
  flex: 0 0 auto; cursor: pointer;
  padding: 4px 11px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #ff3b6b, #a855f7); color: #fff;
  font-weight: 700; font-size: 11.5px;
}
.push-mini-btn:disabled { opacity: .6; cursor: default; }

/* V611/V612 · Variante del aviso compacto para la UBICACIÓN. Sobre la foto usa
   el mismo fondo oscuro legible que el de notificaciones; solo cambia el acento
   del borde y el botón (azul) para diferenciarlo del de notificaciones (rosa). */
.gps-inline-notice { border-color: rgba(59,130,246,.55); }
.gps-inline-notice .push-mini-btn {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

/* V592 · Preferencias de notificaciones (toggles) */
.nprefs-list { display: flex; flex-direction: column; gap: 2px; max-height: 55vh; overflow-y: auto; }
.nprefs-section {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 2px 6px;
}
.nprefs-section:first-child { padding-top: 2px; }
.npref-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
}
.npref-row + .npref-row { margin-top: 6px; }
.npref-info { flex: 1; min-width: 0; }
.npref-info strong { display: block; font-size: 13.5px; }
.npref-info small { display: block; font-size: 11.5px; margin-top: 2px; }
.npref-switch {
  position: relative; flex: 0 0 auto; width: 44px; height: 26px;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--bg); cursor: pointer; padding: 0;
  transition: background .2s ease, border-color .2s ease;
}
.npref-switch .npref-knob {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--text-muted);
  transition: transform .2s ease, background .2s ease;
}
.npref-switch.on { background: linear-gradient(135deg, #ff3b6b, #a855f7); border-color: transparent; }
.npref-switch.on .npref-knob { transform: translateX(18px); background: #fff; }
.notif-prefs-btn { font-size: 13px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* V794 · El modal de avisos y de preferencias debe caber SIEMPRE dentro del
   marco de la app. En escritorio el marco mide ~400px; el ancho global de
   modal (520px) se salía del contenedor del teléfono ("no se adapta al ancho
   del contenedor"). Lo acotamos a 380px, que también es el ancho real que ya
   ocupa en móvil, así se ve siempre contenido y coherente. */
.notif-modal { max-width: 380px; }
/* V794 · Texto de ayuda bajo la cabecera para que el usuario entienda que
   puede personalizar qué avisos recibe y por qué canal (app, móvil o email). */
.notif-subhint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2);
  font-size: 12px; line-height: 1.45; color: var(--text-soft);
}
:root[data-theme="light"] .notif-subhint { background: #f5f0ff; border-color: #e6dcff; color: #4b5563; }
.notif-subhint .nsh-ic { flex: 0 0 auto; font-size: 15px; line-height: 1.3; }
.notif-subhint b { color: var(--text); font-weight: 700; }

/* V815 · Los modales de aura2 (tienda de recompensas, bandeja de avisos y
   preferencias) seguían viéndose con MUCHO margen lateral. La causa real no
   era el max-width (a ~393px de ancho ya llenaban el popup: V812 era no-op en
   móvil) sino el PADDING acumulado: backdrop 14px + tarjeta 22px = 36px por
   lado. Aquí reducimos ambos para que el contenido llegue casi al borde del
   popup, manteniéndolo FLOTANTE y centrado (no anclado abajo). */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  .modal-backdrop { padding: 8px; align-items: center; }
  .modal-card,
  .modal-card.wide,
  .notif-modal {
    max-width: none;
    width: 100%;
    padding: 16px 12px;
  }
  /* Las listas internas ya no necesitan margen extra: que ocupen el ancho. */
  .modal-card .reward-list,
  .modal-card .notif-list,
  .modal-card .nprefs-list { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   V700 · BIENVENIDA A PANTALLA COMPLETA EN ESCRITORIO (sin marco)
   Cuando body.welcome-desktop está activo, la pantalla de bienvenida
   ROMPE el marco #phone y ocupa toda la ventana. Todas las reglas
   usan !important porque el JS de index.html aplica estilos inline
   (transform: scale, width/height fijos) al .phone que debemos vencer.
   Solo afecta a la bienvenida; el resto de pantallas siguen usando el
   marco de teléfono normal.
   ============================================================ */
body.welcome-desktop { overflow: auto !important; }
html:has(body.welcome-desktop) { overflow: auto !important; }
body.welcome-desktop .stage {
  display: block !important;
  grid-template-columns: none !important;
  max-height: none !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
/* Ocultar los paneles laterales de escritorio (brand-block, mock-cards, theme-card) */
body.welcome-desktop .stage-side-left,
body.welcome-desktop .stage-side-right { display: none !important; }
/* Neutralizar el wrapper de escalado y el marco físico del teléfono */
body.welcome-desktop #phoneScaleWrap {
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  flex: 1 1 auto !important;
  display: block !important;
}
body.welcome-desktop .phone {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
  isolation: auto !important;
}
/* Ocultar cromo del teléfono (notch, barra de estado, home indicator) */
body.welcome-desktop .phone-notch,
body.welcome-desktop .phone-status,
body.welcome-desktop .phone-home,
body.welcome-desktop #tabbar { display: none !important; }
body.welcome-desktop .app-viewport {
  overflow: visible !important;
  height: auto !important;
  min-height: 100dvh !important;
  background: transparent !important;
}
/* La propia pantalla hero a pantalla completa */
body.welcome-desktop .screen.screen-hero.hero-desktop {
  overflow: visible !important;
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;
  padding: 0 !important;
  display: block !important;
  background: transparent !important;
}
body.welcome-desktop .screen.screen-hero.hero-desktop::before,
body.welcome-desktop .screen.screen-hero.hero-desktop::after { display: none !important; }

/* ---- Estructura general de la maqueta a dos columnas ---- */
.dw-screen {
  --dw-b1: var(--brand-1, #ff3b6b);
  --dw-b2: var(--brand-2, #ff8a3b);
  --dw-grad: linear-gradient(135deg, var(--dw-b1), var(--dw-b2));
  --dw-glow-l: radial-gradient(80% 90% at 12% 30%, rgba(255,59,107,.30), transparent 60%);
  --dw-glow-r: radial-gradient(70% 80% at 92% 80%, rgba(255,138,59,.22), transparent 60%);
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  background: var(--bg);
}
[data-theme="light"] .dw-screen {
  --dw-glow-l: radial-gradient(80% 90% at 12% 30%, rgba(255,59,107,.16), transparent 60%);
  --dw-glow-r: radial-gradient(70% 80% at 92% 80%, rgba(255,138,59,.12), transparent 60%);
}
.dw-screen::before {
  content: ""; position: absolute; inset: 0;
  background: var(--dw-glow-l), var(--dw-glow-r);
  pointer-events: none; z-index: 0;
}

/* ---- Barra superior ---- */
.dw-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(9px,1.4vh,18px) clamp(24px,4vw,56px);
}
.dw-brand { display: flex; align-items: center; gap: 8px; line-height: 1; }
.dw-brand-logo { display: inline-flex; width: 52px; height: 52px; }
.dw-logo-img { width: 52px; height: 52px; object-fit: contain; display: block; }
[data-theme="dark"] .dw-logo-light { display: none; }
[data-theme="light"] .dw-logo-dark { display: none; }
.dw-lockup { display: flex; align-items: center; gap: 9px; line-height: 1; }
.dw-word { height: 30px; width: auto; object-fit: contain; display: block; position: relative; top: -3px; }
.dw-dash { color: var(--text-soft); font-weight: 400; opacity: .55; font-size: 17px; line-height: 1; }
.dw-tag {
  font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1;
  background: linear-gradient(95deg, #ff8a3b 0%, #ff3b6b 34%, #d43bff 66%, #3b7bff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (max-width: 720px) { .dw-dash, .dw-tag { display: none; } }
.dw-actions { display: flex; align-items: center; gap: 10px; }
.dw-theme-btn {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; cursor: pointer; display: grid; place-items: center;
  transition: transform .12s ease, background .2s ease;
}
.dw-theme-btn:hover { transform: translateY(-1px); }
/* La bienvenida de escritorio usa su propio selector de idioma dentro de .dw-actions,
   así que reposicionamos el .welcome-lang para que sea estático dentro de la barra. */
.dw-actions .welcome-lang { position: static; top: auto; left: auto; right: auto; }

/* ---- Cuerpo a dos columnas ---- */
.dw-split {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center;
  gap: clamp(24px,4vw,64px);
  padding: 4px clamp(24px,4vw,56px) clamp(14px,2.4vh,32px);
}
@media (max-width: 900px) {
  .dw-split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

/* ---- Columna izquierda ---- */
.dw-left { max-width: 560px; justify-self: center; width: 100%; }
.dw-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: var(--dw-b1); background: color-mix(in srgb, var(--dw-b1) 14%, transparent);
  padding: 7px 14px; border-radius: 999px; margin-bottom: clamp(10px,1.8vh,18px);
}
.dw-h1 {
  font-size: clamp(30px,4.2vw,58px); line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 clamp(10px,1.6vh,16px);
  background: var(--dw-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800;
}
.dw-lead {
  font-size: clamp(15px,1.4vw,19px); color: var(--text-soft); line-height: 1.45;
  margin: 0 0 clamp(14px,2.4vh,26px); max-width: 46ch;
}
/* CTA abierto (beta OFF) */
.dw-open-cta { display: flex; flex-direction: column; gap: 11px; }
/* Panel de invitación (beta ON) */
.dw-invite {
  background: linear-gradient(135deg, color-mix(in srgb, var(--dw-b1) 16%, transparent), color-mix(in srgb, var(--brand-3, #a855f7) 16%, transparent));
  border: 1px solid var(--border);
  border-radius: 22px; padding: clamp(16px,2.4vh,22px);
  box-shadow: var(--shadow-md);
}
.dw-invite-t { font-size: 18px; font-weight: 800; margin: 0 0 6px; background: var(--dw-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dw-invite-p { margin: 0 0 clamp(10px,1.8vh,14px); font-size: 14px; color: var(--text-soft); line-height: 1.45; }
/* Reset del input de invitación (vencemos las reglas .phone .welcome-invite-input) */
body.welcome-desktop .dw-invite .welcome-invite-input,
.dw-invite-input {
  width: 100% !important;
  max-width: none !important; /* el tope de 420px (móvil) dejaba el input más corto que el botón en escritorio */
  height: auto !important;
  min-height: 0 !important;
  padding: 13px 16px !important;
  border-radius: 13px !important;
  border: 1px solid var(--border) !important;
  background: rgba(0,0,0,.16) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}
[data-theme="light"] .dw-invite-input { background: rgba(0,0,0,.03) !important; }

/* Botones de la bienvenida de escritorio — vencen los caps de altura del marco */
body.welcome-desktop .hero-desktop .btn,
.dw-screen .btn {
  height: auto !important;
  min-height: 0 !important;
  border: 0; cursor: pointer; font-weight: 800; width: 100%;
  padding: 15px; border-radius: 14px; font-size: 16px;
  transition: transform .12s ease;
}
.dw-screen .btn:hover { transform: translateY(-1px); }
body.welcome-desktop .hero-desktop .btn.btn-primary,
.dw-screen .btn-primary {
  background: var(--dw-grad) !important; color: #fff !important;
  box-shadow: 0 12px 28px rgba(255,59,107,.38) !important;
}
body.welcome-desktop .hero-desktop .btn.btn-ghost,
.dw-screen .btn-ghost {
  background: var(--surface) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; font-weight: 700 !important;
  font-size: 14px !important; box-shadow: none !important;
}
.dw-open-cta .welcome-or { margin: 4px 0; }
.dw-open-cta .welcome-or-text { color: var(--text-soft); }
.dw-open-cta .welcome-or-line { background: var(--border); }
.dw-open-cta .welcome-oauth { grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 0; }
.dw-screen .oauth-btn { height: 50px !important; }
.dw-left .welcome-terms {
  font-size: 12.5px !important;
  color: var(--text-soft) !important;
  text-align: left !important; opacity: 1 !important;
  line-height: 1.5; margin: 16px 0 0;
}
.dw-left .welcome-terms .welcome-terms-link { color: var(--dw-b1); }

/* ---- Columna derecha: tarjeta showcase ---- */
.dw-right { justify-self: center; width: 100%; max-width: 520px; }
.dw-showcase {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 28px; padding: clamp(20px,2.6vh,32px);
  box-shadow: var(--shadow-lg);
}
.dw-sc-logo {
  width: clamp(88px,10.4vh,124px); height: clamp(88px,10.4vh,124px);
  margin: 0 auto clamp(4px,0.8vh,10px);
  display: flex; align-items: center; justify-content: center;
}
.dw-sc-logo .dw-logo-img { width: 100%; height: 100%; }
.dw-sc-sub { text-align: center; font-size: 14px; color: var(--text-soft); margin: 4px 0 clamp(12px,2.2vh,22px); }

/* Reutilizamos welcome-below dentro del showcase, pero reseteamos los caps del
   marco de teléfono para que se vea a tamaño completo de escritorio. */
.dw-below { margin: 0 !important; }
.dw-below .welcome-steps-title {
  font-size: 12px !important; letter-spacing: .14em; font-weight: 800;
  color: var(--text-soft); margin: 0 0 clamp(8px,1.4vh,12px) !important; text-align: center;
}
.dw-below .welcome-steps {
  display: flex !important; flex-direction: column;
  gap: clamp(7px,1.2vh,10px); margin-bottom: clamp(12px,2.2vh,20px);
}
.dw-below .welcome-step {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 13px 15px !important;
}
.dw-below .welcome-step-ic {
  flex: 0 0 32px !important; width: 32px !important; height: 32px !important;
  border-radius: 10px; background: var(--dw-grad); color: #fff;
  font-weight: 800; font-size: 14px !important; display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(255,59,107,.4);
}
.dw-below .welcome-step-h { font-size: 15px !important; margin: 0; }
.dw-below .welcome-step-p { font-size: 12.5px !important; color: var(--text-soft); line-height: 1.35; margin: 2px 0 0; }
.dw-below .welcome-trust {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 9px;
}
.dw-below .welcome-badge {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 11px 12px !important;
  min-height: 0 !important; font-size: 13px !important; font-weight: 700;
  color: var(--text);
}
.dw-below .welcome-badge svg { width: 15px; height: 15px; color: var(--dw-b1); }

/* ---- Pie de página ---- */
body.welcome-desktop .hero-desktop .welcome-foot,
.dw-screen > .welcome-foot {
  position: relative; z-index: 2;
  border-top: 1px solid var(--border);
  padding: clamp(8px,1.2vh,14px) clamp(24px,4vw,56px);
  text-align: center; font-size: 13px !important; color: var(--text-soft);
  margin: 0 !important; line-height: 1.6;
}
.dw-screen > .welcome-foot a { color: var(--text-soft); text-decoration: none; white-space: nowrap; margin: 0 4px; }
.dw-screen > .welcome-foot a:hover { color: var(--text); }
.dw-screen > .welcome-foot .foot-sep { opacity: .45; margin: 0 2px; }

@media (max-width: 900px) {
  .dw-h1 { font-size: clamp(28px,7vw,40px); }
  .dw-right { max-width: 560px; }
  .dw-split { padding-bottom: 24px; }
}

/* ============================================================
   V702 · AJUSTE FINAL DE ENCAJE DE LA BIENVENIDA
   Corrige dos defectos heredados de la maqueta V419/V700:
    (A) MÓVIL — el hero estaba fijado a 100dvh con overflow:hidden y el
        contenido anclado arriba. Resultado: en móviles altos/beta ON el
        pie quedaba CORTADO (inaccesible) y en móviles bajos/beta OFF
        quedaba un HUECO muerto enorme bajo el pie.
        Solución: el hero puede crecer y hay scroll de seguridad; el pie
        se ancla al fondo (margin-top:auto) para eliminar el hueco.
    (B) PC — la maqueta de escritorio no bajaba de ~690px de alto, así que
        en portátiles de poca altura aparecía scroll. Solución: en alturas
        cortas comprimimos tipografías/espaciados para que quepa sin scroll.
   Se añade AL FINAL para ganar la cascada sin tocar las reglas previas,
   de forma aditiva y sin afectar a otras pantallas.
   ============================================================ */

/* ---- (A) MÓVIL: centrado vertical + scroll de seguridad ----
   El contenedor scrollable (.app-viewport) mantiene la altura de la
   ventana con scroll de seguridad. El hero se centra verticalmente
   cuando el contenido es MÁS CORTO que la ventana (reparte el hueco
   arriba y abajo, sin un hueco enorme al pie) y CRECE con scroll
   cuando el contenido es MÁS ALTO (así el pie nunca se corta). */
@media (max-width: 900px) and ((pointer: coarse) or (hover: none)) {
  body:not(:has(#tabbar:not([hidden]))) .app-viewport {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .app-viewport .screen.screen-hero {
    overflow: visible !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    justify-content: center !important;
  }
  /* Todos los bloques del hero conservan su tamaño natural; el reparto
     lo hace justify-content:center del hero. Neutralizamos los
     flex-grow heredados que provocaban el descuadre. */
  .app-viewport .screen-hero > .welcome-cta { flex: 0 0 auto !important; }
  .app-viewport .screen-hero .welcome-below { flex: 0 0 auto !important; }
  .app-viewport .screen-hero .welcome-below .welcome-steps { flex: 0 0 auto !important; }
  .app-viewport .screen-hero .welcome-below .welcome-foot {
    flex: 0 0 auto !important;
    margin-top: clamp(8px, 1.6vh, 14px) !important;
    margin-bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Móviles de altura media (≈600–720px) en modo invitación: recortamos un
   poco el logo y los espacios para que TODO quepa sin necesitar scroll.
   OJO: reducimos el TAMAÑO REAL del logo (width/height), no con transform:
   scale, porque scale no cambia la altura que ocupa en el layout. */
@media (max-width: 900px) and (min-height: 601px) and (max-height: 720px) and ((pointer: coarse) or (hover: none)) {
  /* Prefijo html body … .screen.screen-hero para vencer la regla V543
     (línea ~7613) que fija el tamaño del logo con alta especificidad. */
  html body .app-viewport .screen.screen-hero .welcome-heart,
  html body .app-viewport .screen.screen-hero .welcome-heart.logo-transparent {
    transform: none !important;
    width: 116px !important; height: 116px !important;
    min-width: 116px !important; min-height: 116px !important;
    max-width: 116px !important; max-height: 116px !important;
    margin-bottom: 2px !important;
  }
  .app-viewport .screen-hero .welcome-logo { margin: 0 auto 2px !important; }
  .app-viewport .screen-hero .welcome-sub { margin: 4px 0 4px !important; }
  .app-viewport .screen-hero .welcome-below { gap: 4px !important; }
  .app-viewport .screen-hero .welcome-below .welcome-steps { gap: 4px !important; }
  .app-viewport .screen-hero .welcome-below .welcome-trust { margin: 2px 0 !important; gap: 4px !important; }
  .app-viewport .screen-hero .welcome-below .welcome-foot { margin-top: clamp(4px,1vh,8px) !important; }
  .app-viewport .screen-hero .welcome-cta { gap: 5px !important; }
}

/* ---- (B) PC: comprimir la maqueta de escritorio en pantallas de poca
   altura para que quepa sin scroll (portátiles ~640–768px útiles). ---- */
@media (hover: hover) and (pointer: fine) and (max-height: 760px) {
  body.welcome-desktop .dw-top { padding-top: clamp(6px,1vh,12px) !important; padding-bottom: clamp(6px,1vh,12px) !important; }
  body.welcome-desktop .dw-split { padding-top: 2px !important; padding-bottom: clamp(8px,1.4vh,18px) !important; align-items: center !important; }
  body.welcome-desktop .dw-h1 { font-size: clamp(26px,3.4vw,40px) !important; margin-bottom: clamp(6px,1vh,12px) !important; }
  body.welcome-desktop .dw-lead { font-size: clamp(13px,1.2vw,16px) !important; margin-bottom: clamp(10px,1.6vh,18px) !important; }
  body.welcome-desktop .dw-eyebrow { margin-bottom: clamp(6px,1vh,12px) !important; }
  body.welcome-desktop .dw-invite { padding: clamp(12px,1.8vh,18px) !important; }
  body.welcome-desktop .dw-invite-p { margin-bottom: clamp(8px,1.4vh,12px) !important; }
  body.welcome-desktop .dw-screen .btn { padding: 12px !important; font-size: 15px !important; }
  body.welcome-desktop .dw-sc-logo { width: clamp(72px,8vh,104px) !important; height: clamp(72px,8vh,104px) !important; }
  body.welcome-desktop .dw-showcase { padding: clamp(14px,2vh,24px) !important; }
  body.welcome-desktop .dw-below .welcome-step { padding: 10px 13px !important; }
  body.welcome-desktop .dw-screen > .welcome-foot { padding-top: clamp(6px,1vh,10px) !important; padding-bottom: clamp(6px,1vh,10px) !important; }
}
/* Alturas MUY cortas (portátiles 1366×640 con barra de marcadores): aún más. */
@media (hover: hover) and (pointer: fine) and (max-height: 660px) {
  body.welcome-desktop .dw-h1 { font-size: clamp(24px,3vw,34px) !important; }
  body.welcome-desktop .dw-lead { display: none !important; }
  body.welcome-desktop .dw-sc-logo { width: 64px !important; height: 64px !important; margin-bottom: 4px !important; }
  body.welcome-desktop .dw-sc-sub { margin-bottom: 10px !important; }
  body.welcome-desktop .dw-below .welcome-step-p { display: none !important; }
  body.welcome-desktop .dw-below .welcome-step { padding: 8px 12px !important; }
}

/* V744 · Aviso "GPS no permitido" en las tarjetas y el detalle del perfil.
   Se aplica al texto de ubicación cuando el usuario tiene la localización
   desactivada (no se inventan kilómetros). Tono ámbar sutil para que se
   distinga de la distancia real sin resultar agresivo. */
.gps-off,
.gps-off b,
.pd-meta-item.gps-off,
.pd-meta-item.gps-off span {
  color: #d97706 !important;
}
/* V774 · El ámbar sobre la tarjeta con foto + glass quedaba ilegible (bajo
   contraste, y el small heredaba opacity .9). Subimos a un ámbar más claro,
   forzamos opacidad total y añadimos sombra para que se lea en móvil y PC.
   V775 · Además el texto de aviso ("Madrid · No comparte su ubicación") es
   largo y la tarjeta lo truncaba con puntos suspensivos ("Madrid · No co…").
   Para el caso de ubicación oculta permitimos hasta 2 líneas (sin ellipsis)
   para que se lea entero; el nombre sigue en una sola línea. */
.nearby-info small.gps-off,
.result-card .info small.gps-off {
  color: #ffd24a !important;
  font-weight: 700;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.8);
  /* V830 · El texto de aviso ahora es corto ("📍 Ubicación oculta"). Lo dejamos
     envolver hasta 2 líneas para que se lea ENTERO en tarjetas estrechas, pero
     CONTENIDO dentro de la caja (overflow:hidden). El bug anterior usaba
     -webkit-line-clamp:2 con overflow:visible, y por eso el texto se salía de
     la tarjeta y quedaba cortado por el borde. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  font-size: 10px;
}

/* V758 · Botón "Buscar en el mapa" en la pestaña Cerca de ti */
.nearby-map-bar { padding: 10px 16px 0; }
.nearby-map-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* V759 · Mapa "Explora en el mapa" (estilo Grindr, más atractivo) --------
   Overlay a pantalla completa con barra superior glass, barra de filtros
   flotante, pines teardrop con foto y botón de "mi ubicación". */
.map-overlay {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
body.map-open { overflow: hidden; }

/* Barra superior "glass" translúcida sobre el mapa */
.map-topbar {
  position: relative; z-index: 20;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.map-icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text); border-radius: 50%; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.map-icon-btn:active { transform: scale(.92); }
.map-title {
  text-align: center; font-weight: 800; font-size: 15px; letter-spacing: .2px;
  color: var(--text);
}

/* Barra de filtros flotante bajo la topbar */
.map-filterbar {
  position: relative; z-index: 20;
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.map-filterbar-row {
  /* V863 · Los filtros se AJUSTAN a varias líneas (flex-wrap) en vez de hacer
     scroll horizontal. Con scroll, en móviles estrechos "Nuevos" salía cortado y
     "Filtros" quedaba oculto fuera de pantalla (el usuario no sabía que existían).
     Ahora, cuando no caben en una línea, bajan a la siguiente y SIEMPRE se ven
     todos. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}

/* V910 · El segmento de género del mapa se ELIMINÓ de la barra: el género se
   filtra ahora dentro de la hoja "Filtros" (chips), igual que en Explorar y
   Buscar. Por eso ya no hay reglas .map-seg / .map-seg-btn. */
/* V845 · El chip "En línea" no se encoge ni se corta al ir en la misma fila. */
.map-filterbar-row > .map-chip { flex: 0 0 auto; }

/* Chips de filtro (en línea, radio de km) */
.map-radius { display: flex; align-items: center; gap: 6px; }
.map-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: var(--text-soft); font-weight: 700; font-size: 13px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.map-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  box-shadow: 0 4px 12px rgba(255,59,107,.30);
}
.map-chip-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25);
}
/* V851 · Chip "Filtros" + insignia con el nº de filtros avanzados activos. */
.map-chip-filters .map-chip-ic { display: inline-flex; }
.map-chip-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 2px; border-radius: 999px;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #ff3b6b; background: #fff;
}
.map-chip.active .map-chip-count { color: #ff3b6b; background: #fff; }
.map-chip-count[hidden] { display: none; }
/* V852 · Chip "Nuevos": icono de destello. Cuando está activo se tiñe de
   verde/turquesa (mismo color que la etiqueta "Nuevo" del pin) en lugar del
   rosa de marca, para que su función quede clara y no se confunda con el resto. */
.map-chip-new .map-chip-ic { display: inline-flex; color: #10b981; }
.map-chip-new.active { background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 4px 12px rgba(16,185,129,.30); }
.map-chip-new.active .map-chip-ic { color: #fff; }

/* V865 · Chip "Buscan ahora": icono de rayo ámbar (energía/actividad inmediata),
   distinto del verde de "Nuevos" y del punto de "En línea", para que cada filtro
   tenga su color y no se confundan. */
.map-chip-now .map-chip-ic { display: inline-flex; color: #f59e0b; }
.map-chip-now.active { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 12px rgba(245,158,11,.30); }
.map-chip-now.active .map-chip-ic { color: #fff; }

/* ============================================================================
   V866 · Estado "Ahora mismo" (frase declarada, caduca en 1 h). Color ámbar
   (rayo) para distinguirlo del verde de "online". Piezas:
     · .now-bar        barra propia (editor) en "Cerca de ti"
     · .now-section    tira horizontal "Ahora mismo" (quién busca ahora cerca)
     · .now-editor     modal para escribir la frase
     · .map-pin.now    aro ámbar + rayo en el pin del mapa
     · .result-now     banda con la frase en la tarjeta de Buscar
     · .map-sheet-now  frase en la hoja del pin
============================================================================ */
.now-bolt { display: inline-flex; align-items: center; color: #f59e0b; }
/* Barra editable del propio usuario */
.now-bar { padding: 0 14px 6px; }
.now-bar-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.now-bar-inner.active { border-color: rgba(245,158,11,.55); background: linear-gradient(180deg, rgba(245,158,11,.10), var(--surface-2)); }
.now-bar-body { flex: 1 1 auto; min-width: 0; }
.now-bar-text { font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-bar-sub { font-size: 11px; color: var(--text-soft); margin-top: 1px; }
.now-bar-set, .now-bar-edit, .now-bar-clear {
  flex: 0 0 auto; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer;
}
.now-bar-set { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.now-bar-edit { background: var(--surface); border-color: var(--border); color: var(--text); }
.now-bar-clear { background: transparent; color: var(--text-soft); border-color: var(--border); }
/* Sección "Ahora mismo": tira horizontal */
.now-section { padding: 4px 0 10px; }
.now-section-head { display: flex; align-items: center; gap: 6px; padding: 4px 14px 8px; font-weight: 800; font-size: 14px; color: var(--text); }
.now-section-strip { display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.now-section-strip::-webkit-scrollbar { display: none; }
.now-card {
  flex: 0 0 auto; width: 108px; text-align: center; cursor: pointer;
  background: none; border: none; padding: 0;
}
.now-card-ava {
  position: relative; width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 6px;
  background-size: cover; background-position: center; border: 2px solid var(--border);
}
.now-card.declared .now-card-ava { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.now-card-bolt {
  position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); border: 2px solid var(--surface);
}
.now-card-name { font-weight: 700; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-card-text { font-size: 11px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Modal editor */
.now-editor { padding: 4px 2px; }
.now-editor-title { font-weight: 800; font-size: 18px; color: var(--text); margin-bottom: 4px; }
.now-editor-lead { font-size: 13px; color: var(--text-soft); margin-bottom: 12px; }
.now-editor-input {
  width: 100%; height: 46px; border-radius: 12px; padding: 0 14px;
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 15px;
}
.now-editor-hint { font-size: 11px; color: var(--text-soft); margin: 6px 2px 0; }
.now-editor-err { font-size: 12px; color: #ef4444; margin: 6px 2px 0; font-weight: 600; }
.now-editor-err[hidden] { display: none; }
.now-editor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.now-editor-chip {
  border-radius: 999px; padding: 7px 12px; font-size: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft);
}
/* Pin del mapa con estado declarado */
.map-pin.now { box-shadow: 0 0 0 3px rgba(245,158,11,.9), 0 6px 16px rgba(0,0,0,.35); }
.map-pin-bolt {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; z-index: 2;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); border: 2px solid #fff;
}
/* Frase en la hoja del pin */
.map-sheet-now {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 8px 10px;
  border-radius: 10px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35);
}
.map-sheet-now .now-text { font-size: 13px; font-weight: 600; color: var(--text); }
/* Banda en la tarjeta de Buscar */
.result-now {
  position: absolute; left: 8px; right: 8px; top: 8px; z-index: 4;
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(251,191,36,.95), rgba(245,158,11,.95));
  color: #fff; box-shadow: 0 4px 10px rgba(245,158,11,.35);
}
.result-now .now-bolt { color: #fff; }
.result-now .now-text { font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* V867 · Badge tipo Grindr sobre la foto del perfil (galería .pd-gallery).
   Esquina inferior izquierda: rayo + frase "Ahora mismo". En Fase 3 se le
   añadirá la miniatura de la foto "busco ahora" pegada a la derecha. */
.pd-gallery { position: relative; }
.pd-now-badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 5; max-width: 78%;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: rgba(20,16,8,.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(245,158,11,.55); box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.pd-now-badge .now-bolt { color: #fbbf24; flex: 0 0 auto; }
.pd-now-text { font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Distintivo repetido en la línea de estado del perfil */
.pd-now-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.4);
  font-size: 12px; font-weight: 700; color: #f59e0b;
}
.pd-now-tag .now-bolt { color: #f59e0b; }

/* V894 · Insignia de Boost ("Impulsado") sobre las tarjetas de perfil y en el
   detalle. Distinta del ámbar de "Busco ahora": usa el degradado rosa→naranja
   de la marca (Aura Boost) para que se lea a la primera como "perfil impulsado".
   ── Tarjeta de Explorar (swipe): esquina superior IZQUIERDA, bajo los
   indicadores. V900 · Antes iba a la derecha y se solapaba con el botón "Ver
   perfil" (también arriba a la derecha), tapándole el texto. La izquierda está
   libre, así ambos se leen. */
.swipe-boost {
  position: absolute; top: 20px; left: 12px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 12px rgba(255,59,107,.42);
}
.swipe-boost .sb-bolt { display: inline-flex; color: #fff; flex: 0 0 auto; }
/* Tarjeta de la lista/Buscar: bajo la banda "Busco ahora" si coincidieran. */
.result-boost {
  position: absolute; left: 8px; top: 8px; z-index: 5;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; line-height: 1; color: #fff;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 3px 9px rgba(255,59,107,.4);
}
.result-boost .sb-bolt { display: inline-flex; color: #fff; flex: 0 0 auto; }
/* Cuando la tarjeta también tiene la banda "Busco ahora" (ocupa el top), la
   insignia de boost baja para no solaparse con ella. */
.result-card.has-now .result-boost { top: 42px; }
/* Distintivo en la línea de estado del detalle del perfil. */
.pd-boost-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px;
  border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800;
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b);
  border: 1px solid rgba(255,255,255,.3);
}
.pd-boost-tag .sb-bolt { display: inline-flex; color: #fff; }

/* V869 · Cuando hay badge "busco ahora" en la esquina inferior izquierda, el
   aviso "Desliza para ver el perfil" (centrado abajo) se solapaba con él. Lo
   subimos por encima del badge para que no choquen. */
.pd-gallery.has-now-badge .pd-scroll-hint { bottom: 58px; }
.pd-gallery.has-now-thumb .pd-scroll-hint { bottom: 82px; }

/* V868 · Miniatura de la foto "busco ahora" pegada a la frase del badge (como
   Grindr). Va difuminada por defecto (blur + candado); al tocar se revela y un
   segundo toque la abre a pantalla completa. */
.pd-now-badge.has-thumb { padding-right: 6px; }
.pd-now-thumb {
  position: relative; flex: 0 0 auto; width: 40px; height: 52px;
  border-radius: 9px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: #1a1710;
}
.pd-now-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s ease; }
.pd-now-thumb.blurred .pd-now-thumb-img { filter: blur(9px) brightness(.85); }
.pd-now-thumb-lock {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,.25); pointer-events: none;
}
.pd-now-thumb.blurred .pd-now-thumb-lock { display: flex; }

/* V868 · Visor de foto a pantalla completa (al tocar la miniatura revelada). */
.photo-viewer {
  position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 16px; animation: pvFade .18s ease;
}
@keyframes pvFade { from { opacity: 0; } to { opacity: 1; } }
.photo-viewer-img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }
.photo-viewer-close {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.14); border: none;
}
.photo-viewer-close:hover { background: rgba(255,255,255,.24); }

/* V880 · Bolsa diaria de minutos dentro del editor de "Ahora mismo": presets de
   duración, saldo restante y, si se agotó, los packs de minutos a la venta. */
.now-editor-mins {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, rgba(128,128,128,.2));
  display: flex; flex-direction: column; gap: 8px;
}
.now-mins-title { font-size: 14px; font-weight: 700; color: var(--text, #111); }
.now-mins-balance { font-size: 12px; color: var(--muted, #888); }
.now-mins-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.now-mins-chip {
  padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: var(--chip-bg, rgba(128,128,128,.12)); color: var(--text, #111);
  border: 1px solid var(--border, rgba(128,128,128,.25));
}
.now-mins-chip.on {
  background: linear-gradient(135deg, #ff3b6b, #ff8a3b); color: #fff; border-color: transparent;
}
.now-mins-state { font-size: 13px; font-weight: 600; }
.now-mins-state.ok { color: #16a34a; }
.now-mins-state.low { color: #f59e0b; }
.now-mins-state.blocked { color: #ef4444; }
.now-mins-buy-lead { font-size: 13px; font-weight: 600; color: var(--text, #111); margin-top: 2px; }
.now-mins-packs { display: flex; flex-wrap: wrap; gap: 8px; }
.now-mins-pack {
  flex: 1 1 30%; min-width: 92px; padding: 10px 8px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--chip-bg, rgba(128,128,128,.12)); color: var(--text, #111);
  border: 1px solid var(--border, rgba(128,128,128,.25));
}
.now-mins-pack:hover { border-color: #ff8a3b; }
.now-mins-pack-min { font-size: 14px; font-weight: 800; }
.now-mins-pack-price { font-size: 12px; color: var(--muted, #888); }

/* V868 · Sección de foto "busco ahora" dentro del editor de estado. */
.now-editor-photo {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, rgba(128,128,128,.2));
  display: flex; flex-direction: column; gap: 8px;
}
.now-editor-photo-title { font-size: 14px; font-weight: 700; color: var(--text, #111); }
.now-editor-photo-hint { font-size: 12px; color: var(--muted, #888); }
.now-editor-photo-state { font-size: 13px; font-weight: 600; }
.now-editor-photo-state.pending { color: #f59e0b; }
.now-editor-photo-state.ok { color: #16a34a; }
.now-editor-photo-state.rej { color: #dc2626; }
.now-editor-photo-remove {
  align-self: flex-start; background: none; border: none; padding: 2px 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: #dc2626; text-decoration: underline;
}

/* Lienzo del mapa.
   V767 · position:relative + z-index:0 CREA un contexto de apilado propio, de
   forma que los paneles/controles internos de Leaflet (z-index 200-1000) quedan
   ATRAPADOS dentro del lienzo y no tapan la barra de búsqueda de ciudad
   (z-index 30) ni la leyenda. Antes, al inicializarse Leaflet, esos paneles
   subían por encima y "hacían desaparecer" el buscador tras cargar el mapa. */
.map-canvas { position: relative; z-index: 0; flex: 1; width: 100%; min-height: 0; background: var(--bg); }

/* V832 · Marcador FIJO en el centro del lienzo = centro de la zona de búsqueda.
   El círculo rosa se centra siempre en el centro del mapa; al panear (arrastrar)
   el mapa, el círculo se mueve con él. Este marcador CSS señala ese centro y no
   se arrastra (ya no hay asa suelta que tapaba el punto azul). */
.map-center-marker {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%);
  z-index: 690; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.map-center-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  color: #fff; white-space: nowrap; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(255,59,107,.5), 0 2px 6px rgba(0,0,0,.35);
}
.map-center-stem {
  width: 2px; height: 16px; margin-top: -1px;
  background: #ff3b6b; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.map-center-dot {
  width: 10px; height: 10px; border-radius: 50%; margin-top: -1px;
  background: #ff3b6b; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.map-error { padding: 40px 24px; text-align: center; color: var(--text-soft); margin: auto; }
.map-error strong { display: block; color: var(--text); margin-bottom: 6px; }

/* Botón flotante "mi ubicación" */
.map-locate {
  /* V842 · A la IZQUIERDA (antes bottomright, apilado sobre el zoom): el control
     +/− de Leaflet vive abajo-derecha, así que compartir esa esquina hacía que
     el botón redondo de "mi ubicación" tapara los símbolos +/−. Moviéndolo a la
     izquierda quedan separados sin depender de cálculos frágiles de altura.
     Sigue anclado sobre el panel de personas (--map-people-h) para no quedar
     tapado por la cuadrícula (hasta ~46vh en móvil). */
  position: absolute; left: 14px;
  bottom: calc(var(--map-people-h, 274px) + 70px); z-index: 30;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.30);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .12s ease;
}
.map-locate:active { transform: scale(.92); }

/* Leyenda inferior flotante */
.map-legend {
  position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 25;
  padding: 9px 14px; border-radius: 14px; text-align: center;
  font-size: 12px; line-height: 1.35; font-weight: 600;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

/* V840 · Panel inferior de personas en CUADRÍCULA con foto (como "Buscar"), en
   lugar del carrusel horizontal. Ocupa la parte baja del mapa, con la rejilla
   desplazable en vertical. Debajo, un texto de "no hay nadie cerca" cuando la
   lista queda vacía. Usa variables de tema para verse bien en claro y oscuro. */
.map-people {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 26;
  /* V845 · Panel más bajo (38dvh) para que se vea MÁS mapa. La rejilla interna
     conserva su scroll propio, así que no se pierde ninguna tarjeta; solo se
     gana altura de mapa por encima. Usamos dvh (viewport dinámico) porque en
     Chrome de móvil vh mide la pantalla COMPLETA (con la barra de URL oculta),
     lo que inflaba el panel y dejaba el mapa como una franja. */
  max-height: 34vh; max-height: 34dvh; display: flex; flex-direction: column;
  padding: 9px 12px calc(env(safe-area-inset-bottom, 0) + 10px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.map-people-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 2px 8px;
}
.map-people-title { font-size: 13px; font-weight: 800; color: var(--text); }
.map-people-title small { display: block; font-size: 11px; font-weight: 600; color: var(--text-soft); margin-top: 1px; }
.map-people-grid {
  /* V843 · Tarjetas .result-card iguales que en "Buscar". La rejilla es
     RESPONSIVE: en el ancho de móvil (~390px) salen 2 columnas como en "Buscar";
     en el mapa a pantalla completa en PC caben más columnas sin que las tarjetas
     se agiganten (antes, con 2 columnas fijas, en PC medían ~700px de ancho). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; overflow-y: auto; padding: 4px 2px 2px; min-height: 0;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.map-people-grid::-webkit-scrollbar { display: none; }
/* V846 · En el mapa las tarjetas son CUADRADAS (no 3/4 como en "Buscar"). Así
   la tarjeta entera —incluida la última línea (ciudad · km)— cabe sin recortarse
   y el panel queda MÁS BAJO, dejando ver bastante más mapa. El texto de la ficha
   se reduce un punto para que el nombre completo (p. ej. "Usuario de prueba, 25")
   quepa dentro del cuadrado sin cortarse. */
.map-people-grid .result-card { aspect-ratio: 1 / 1; }
.map-people-grid .result-card .info { padding: 6px 9px; border-radius: 13px; }
.map-people-grid .result-card .info strong { font-size: 13px; line-height: 1.15; }
.map-people-grid .result-card .info small { font-size: 11px; }
/* V843 · La cuenta de prueba conserva su etiqueta "Prueba" (arriba-izquierda,
   donde iría el corazón) y un borde ámbar para distinguirla. */
.map-people-grid .result-card.test { outline: 2px solid #f59e0b; outline-offset: -2px; }
.map-people-grid .result-card .map-person-tag {
  position: absolute; left: 10px; top: 10px; z-index: 4; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #1a1200;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
/* V852 · Distintivo "Nuevo" en la tarjeta de la cuadrícula (esquina superior
   izquierda, verde/turquesa). Marca a las cuentas recién registradas. */
.map-people-grid .result-card .map-new-tag {
  position: absolute; left: 10px; top: 10px; z-index: 4; padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #04231a;
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.map-person-card {
  position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; cursor: pointer;
  border-radius: 14px; overflow: hidden; text-align: left;
  background-size: cover; background-position: center;
  background-color: var(--surface-2);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  transition: transform .15s ease;
}
.map-person-card:hover, .map-person-card:active { transform: translateY(-2px) scale(1.02); }
.map-person-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,0) 58%);
}
.map-person-card.test { outline: 2px solid #f59e0b; outline-offset: -2px; }
.map-person-tag {
  position: absolute; left: 6px; top: 6px; z-index: 2; padding: 2px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; color: #1a1200;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.map-person-dot {
  position: absolute; right: 6px; top: 6px; z-index: 2; width: 11px; height: 11px;
  border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
.map-person-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6px 8px 8px; }
.map-person-name {
  /* V842 · El nombre se recortaba con "…" en tarjetas estrechas (p. ej.
     "Usuario de Pru…", "Hugo Serra…"). Ahora envuelve hasta 2 líneas (igual que
     las tarjetas de "Cerca de ti") para que no se corte. */
  font-size: 12px; font-weight: 800; color: #fff; line-height: 1.15;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere; word-break: break-word;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.map-person-sub {
  font-size: 10px; color: rgba(255,255,255,.85); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.map-people-empty {
  padding: 16px 14px; margin-top: 4px; border-radius: 14px; text-align: center;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--text-soft);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
  border: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
}
.map-people-empty[hidden], .map-people-grid[hidden] { display: none; }

/* V840 · Botón "Buscar cerca de aquí": flota centrado justo encima del panel de
   personas. Lanza la búsqueda en la posición actual del pin arrastrable. */
.map-here-btn {
  /* V840 · Se ancla JUSTO encima del panel de personas usando --map-people-h
     (altura real del panel, medida en JS). Así en PC (panel bajo) el botón
     queda pegado al panel y en móvil (panel alto ~46vh) sube con él, sin
     flotar a media pantalla. */
  position: absolute; left: 50%; bottom: calc(var(--map-people-h, 46vh) + 14px); transform: translateX(-50%);
  z-index: 28; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  box-shadow: 0 8px 22px rgba(255,59,107,.45), 0 2px 8px rgba(0,0,0,.3);
  transition: transform .12s ease, opacity .12s ease;
}
.map-here-btn:active { transform: translateX(-50%) scale(.96); }
.map-here-btn.loading { opacity: .65; pointer-events: none; }
.map-here-ic { display: inline-flex; }

/* V840 · Pin de búsqueda ARRASTRABLE (sustituye al marcador de centro fijo). */
.map-searchpin-wrap { background: none; border: 0; }
.map-searchpin {
  position: relative; display: flex; flex-direction: column; align-items: center;
  cursor: grab;
}
.map-searchpin:active { cursor: grabbing; }
.map-searchpin-pill {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  border: 2px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.map-searchpin-body {
  width: 40px; height: 40px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); display: grid; place-items: center;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.map-searchpin-body svg { transform: rotate(45deg); }

/* Pines teardrop con foto */
.map-pin-wrap { background: none; border: 0; }
.map-pin {
  width: 50px; height: 50px; border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--surface);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.45);
  position: relative; cursor: pointer;
  transition: transform .12s ease;
}
.map-pin:hover { transform: translateY(-2px) scale(1.04); }
.map-pin-stem {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #fff;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.35));
}
.map-pin.on { border-color: #22c55e; }
.map-pin.on .map-pin-stem { border-top-color: #22c55e; }
.map-pin.test { border-color: #f59e0b; }
.map-pin.test .map-pin-stem { border-top-color: #f59e0b; }
.map-pin-dot {
  position: absolute; right: -2px; top: -2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff;
}
.map-pin-tag {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 800; letter-spacing: .3px; color: #1a1200;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
/* V852 · Etiqueta "Nuevo" del pin: verde/turquesa (distinta del ámbar de
   "Prueba") para diferenciar de un vistazo a quien acaba de registrarse. */
.map-pin-tag.new {
  color: #04231a;
  background: linear-gradient(135deg, #34d399, #10b981);
}
/* Asegura que los controles de Leaflet queden sobre el overlay */
.map-overlay .leaflet-container { font: inherit; background: var(--bg); }
.map-overlay .leaflet-control-zoom {
  /* V842 · El control de zoom (bottomright) se eleva sobre el panel de personas
     usando la altura real del panel (--map-people-h). Ahora el botón de "mi
     ubicación" está a la IZQUIERDA, así que zoom y ubicación quedan a la misma
     altura pero en esquinas opuestas (ya no se solapan). */
  margin: 0 14px calc(var(--map-people-h, 190px) + 70px) 0 !important; border: 0;
}
.map-overlay .leaflet-control-zoom a {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, color .12s ease;
}
/* V842 · Al pulsar +/− en móvil, Leaflet dejaba el enlace con el fondo blanco
   por defecto y el foco "pegado" (el símbolo quedaba en blanco/invisible y
   seleccionado un buen rato). Forzamos el mismo estilo del tema en
   hover/focus/active y quitamos el resalte de selección, para que el glifo
   +/− SIEMPRE se lea y el estado no se quede pegado tras soltar. */
.map-overlay .leaflet-control-zoom a:hover,
.map-overlay .leaflet-control-zoom a:focus,
.map-overlay .leaflet-control-zoom a:active {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  color: var(--text);
  outline: none;
}
.map-overlay .leaflet-control-zoom a.leaflet-disabled {
  color: color-mix(in srgb, var(--text) 40%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

/* V768 · Aviso grande centrado en pantalla (unos segundos) cuando no hay nadie
   cerca y se va a volver a la zona del usuario */
.map-notice {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.96);
  z-index: 45; max-width: min(340px, 86vw); text-align: center;
  padding: 16px 20px; border-radius: 18px;
  font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.map-notice.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* V768 · Asa arrastrable del círculo de búsqueda */
/* V769 · Asa arrastrable como PASTILLA etiquetada "Mover zona" que flota sobre
   el centro del círculo, para no tapar el punto azul y ser fácil de identificar.
   Lleva una flecha inferior que apunta al centro del círculo. */
.map-circle-handle-wrap { background: none; border: 0; }
.map-circle-handle {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 999px;
  color: #fff; cursor: grab; white-space: nowrap;
  font-size: 12px; font-weight: 800; letter-spacing: .2px;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(255,59,107,.5), 0 2px 6px rgba(0,0,0,.35);
  touch-action: none;
}
.map-circle-handle::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid #fff;
}
.map-circle-handle:active { cursor: grabbing; transform: scale(1.04); }

/* V764 · Buscador por ciudad/provincia. V850 · YA NO flota sobre el mapa (antes
   lo tapaba): va DENTRO de la barra superior, en su propia fila, en flujo normal.
   Así el lienzo del mapa empieza limpio debajo, sin nada superpuesto encima. */
.map-searchbar {
  position: relative; left: auto; right: auto; top: auto;
  z-index: 20; display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.map-search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.map-search-input::placeholder { color: var(--text-soft); font-weight: 500; }
.map-search-go {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #ff5c8a, #ff3b6b);
  box-shadow: 0 4px 12px rgba(255,59,107,.35);
  transition: transform .12s ease, opacity .12s ease;
}
.map-search-go:active { transform: scale(.92); }
.map-search-go.loading { opacity: .6; pointer-events: none; }

/* V771 · Lista de autocompletado de lugares (ciudades, provincias, centros
   comerciales y POIs) bajo la barra de búsqueda del mapa. */
.map-search-suggest {
  /* V850 · top lo fija positionSuggest() en JS (el buscador ya no está fijo). */
  position: absolute; left: 12px; right: 12px; top: 176px;
  z-index: 31; max-height: 46vh; overflow-y: auto;
  padding: 6px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  -webkit-overflow-scrolling: touch;
}
.map-search-suggest[hidden] { display: none; }
.map-suggest-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
.map-suggest-item + .map-suggest-item {
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}
.map-suggest-item:active { background: color-mix(in srgb, var(--brand, #ff3b6b) 14%, transparent); }
.map-suggest-ic { flex: 0 0 auto; font-size: 18px; width: 22px; text-align: center; }
.map-suggest-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.map-suggest-txt strong {
  font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-suggest-txt small {
  font-size: 11px; color: var(--text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* V771 · Pantalla "Ya estás verificado" (cuenta con badge azul) */
.verify-ok-hero { text-align: center; padding: 8px 0 4px; }
.verify-ok-badge {
  width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #4f9dff, #2a7dff);
  box-shadow: 0 10px 26px rgba(42,125,255,.45);
}
.verify-ok-namecard {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px auto 4px; padding: 10px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  max-width: max-content;
}
.verify-ok-name { font-size: 16px; font-weight: 800; color: var(--text); }
.verify-ok-check {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #2a7dff; color: #fff;
  box-shadow: 0 2px 6px rgba(42,125,255,.45);
}
.verify-ok-perks { display: grid; gap: 10px; margin-top: 18px; }
.verify-ok-perk {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.verify-ok-perk-ic { flex: 0 0 auto; font-size: 20px; line-height: 1.2; }
.verify-ok-perk strong { display: block; font-size: 14px; color: var(--text); }
.verify-ok-perk small { display: block; font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* V766 · Punto azul "mi ubicación" (estilo Google Maps) */
.map-me-wrap { background: none; border: 0; }
.map-me { position: relative; width: 24px; height: 24px; }
.map-me-dot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #2a7dff; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(42,125,255,.4), 0 2px 6px rgba(0,0,0,.4);
}
.map-me-pulse {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(42,125,255,.30);
  animation: mapMePulse 2s ease-out infinite;
}
@keyframes mapMePulse {
  0% { transform: translate(-50%, -50%) scale(.6); opacity: .7; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
.map-me-tip {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px; font-size: 11px; font-weight: 700; padding: 3px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.map-me-tip::before { display: none; }

/* V862 · Se retira el circulo de precision de V860 (a peticion del usuario). */

/* V764 · Puntero que se "suelta" al tocar el mapa para buscar en ese punto */
.map-pointer-wrap { background: none; border: 0; }
.map-pointer {
  position: relative; width: 26px; height: 26px;
}
.map-pointer::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #ff3b6b; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.map-pointer-pulse {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,59,107,.35);
  animation: mapPointerPulse 1.6s ease-out infinite;
}
@keyframes mapPointerPulse {
  0% { transform: translate(-50%, -50%) scale(.5); opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* V763 · Cabecera de la hoja de acciones al tocar un pin */
.map-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.map-sheet-ava {
  width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto;
  background-size: cover; background-position: center;
  background-color: var(--surface); border: 1px solid var(--border);
}
.map-sheet-info { min-width: 0; }
.map-sheet-name { font-weight: 800; font-size: 17px; color: var(--text); }
.map-sheet-sub { font-size: 13px; color: var(--text-soft); margin-top: 2px; }
.map-sheet-badge {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #1a1200;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.map-sheet-badge.on { color: #fff; background: #22c55e; }
.map-sheet-badge.new { color: #04231a; background: linear-gradient(135deg, #34d399, #10b981); }

/* V763 · Cuadrícula tipo Grindr de personas cercanas */
.map-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 62vh; overflow-y: auto; margin: 4px 0 2px;
}
.map-grid-cell {
  position: relative; aspect-ratio: 1 / 1; border: 0; cursor: pointer;
  border-radius: 12px; overflow: hidden; padding: 0;
  background-size: cover; background-position: center; background-color: var(--surface);
}
.map-grid-cell.test { outline: 2px solid #f59e0b; outline-offset: -2px; }
.map-grid-dot {
  position: absolute; right: 6px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: #22c55e; border: 2px solid #fff;
}
.map-grid-tag {
  position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800; color: #1a1200;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.map-grid-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  font-size: 12px; font-weight: 700; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* V902 · Aviso de retorno de pago (compra completada / cancelada). Banner
   central sobre un velo, con emoji grande, título y subtítulo. Se muestra al
   volver de la pasarela de Stripe dentro de la app. */
.pay-notice {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s ease;
}
.pay-notice.pn-show { opacity: 1; }
.pay-notice.pn-hide { opacity: 0; }
.pay-notice-card {
  width: min(360px, 92vw); box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 26px 22px 20px; text-align: center;
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.97); transition: transform .24s cubic-bezier(.2,.9,.3,1.2);
}
.pay-notice.pn-show .pay-notice-card { transform: translateY(0) scale(1); }
.pn-emoji {
  width: 68px; height: 68px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 34px; line-height: 1;
}
.pay-notice.pn-ok .pn-emoji { background: rgba(34,197,94,.14); }
.pay-notice.pn-cancel .pn-emoji { background: rgba(245,158,11,.16); }
.pn-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.pn-sub { margin: 0 0 18px; font-size: 14px; color: var(--text-muted); line-height: 1.45; }
.pn-close {
  width: 100%; height: 46px; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
}
.pay-notice.pn-ok .pn-close { background: linear-gradient(135deg, #22c55e, #16a34a); }
.pay-notice.pn-cancel .pn-close { background: linear-gradient(135deg, #ff3b6b, #ff8a3b); }
.pn-close:active { transform: scale(.98); }

/* ============================================================
   V939 · Canal "Equipo de Aura" — estilos
   ============================================================ */
.chat-item-channel {
  background: linear-gradient(90deg, rgba(230,58,103,0.06), transparent 60%);
  border-left: 3px solid var(--brand, #e63a67);
}
.channel-avatar {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #fff;
}
.verified-tick {
  display: inline-flex;
  align-items: center;
  vertical-align: -2px;
  margin-left: 2px;
}
.verified-tick svg { display: block; }

/* Tarjeta broadcast dentro del hilo del canal */
.bcast-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px;
  margin: 6px 12px;
  max-width: 90%;
  align-self: flex-start;
}
.bcast-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.bcast-head strong { font-size: 14.5px; line-height: 1.3; }
.bcast-trash {
  flex: 0 0 auto; width: 28px; height: 28px;
  border-radius: 999px; border: 0; background: rgba(255,255,255,0.04);
  color: var(--text-muted, #94a3b8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bcast-trash:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
.bcast-image { display: block; width: 100%; border-radius: 10px; margin: 6px 0 8px; }
.bcast-body { font-size: 13.5px; line-height: 1.45; opacity: 0.92; white-space: pre-wrap; }
.bcast-buttons { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.bcast-btn {
  padding: 8px 14px; border-radius: 999px; border: 0;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.bcast-btn.primary { background: var(--brand, #e63a67); color: #fff; }
.bcast-btn.secondary { background: rgba(255,255,255,0.10); color: inherit; }
.bcast-btn:active { transform: scale(0.98); }
.bcast-time {
  font-size: 11px; color: var(--text-muted, #94a3b8);
  margin-top: 8px; text-align: right;
}
.channel-noreply {
  text-align: center; font-size: 12px; color: var(--text-muted, #94a3b8);
  padding: 10px 20px 14px; opacity: 0.9;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06));
}

/* ============================================================
   V951 · APP DE ESCRITORIO REAL (body.desktop-app)
   Con sesión iniciada en un PC (hover fino, >900px, ni tablet en
   portrait ni landscape bajito — lo decide _welcomeIsDesktop() en
   app.js), el marco de teléfono sobraba: el usuario de escritorio
   pagaba todo el ancho de su ventana por un móvil de 400px flotando
   en un escenario oscuro. Aquí el marco se retira y la app ocupa la
   ventana de verdad:
     · la tabbar se convierte en barra lateral izquierda (232px),
     · el viewport ocupa el resto a altura completa,
     · el cromo del móvil (notch, status, home) desaparece,
     · las pantallas de rejilla (Cerca) aprovechan el ancho y las de
       columna (Explorar, Chats, Perfil) se centran con un tope de
       lectura para que no haya líneas de 1400px.
   En móvil y tablet no existe esta clase: todo sigue exactamente igual.
   ============================================================ */
body.desktop-app { overflow: hidden !important; }
body.desktop-app .stage {
  grid-template-columns: 1fr !important;
  gap: 0 !important; padding: 0 !important;
  max-width: none !important; width: 100% !important;
  min-height: 100dvh !important;
}
body.desktop-app .stage-side,
body.desktop-app .stage-side-left,
body.desktop-app .stage-side-right { display: none !important; }
body.desktop-app #phoneScaleWrap {
  width: 100% !important; height: auto !important;
  min-height: 100dvh !important; flex: 1 1 auto !important;
  display: block !important;
}
body.desktop-app .phone {
  width: 100% !important; max-width: none !important; min-width: 0 !important;
  height: auto !important; min-height: 100dvh !important; max-height: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  transform: none !important;
  flex-direction: row !important;
}
body.desktop-app .phone-notch,
body.desktop-app .phone-status,
body.desktop-app .phone-home { display: none !important; }
/* La tabbar pasa a nav lateral: orden -1 para quedar a la izquierda. */
body.desktop-app .tabbar {
  order: -1;
  width: 232px; min-width: 232px; height: 100dvh;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  gap: 4px; padding: 18px 12px;
  grid-template-columns: none;
  border-top: 0; border-right: 1px solid var(--border);
}
body.desktop-app .tab {
  flex-direction: row; justify-content: flex-start;
  gap: 12px; padding: 11px 14px; border-radius: 12px;
}
body.desktop-app .tab svg { width: 22px; height: 22px; }
body.desktop-app .tab span { font-size: 14px; font-weight: 600; }
body.desktop-app .tab.active {
  background: var(--surface-2, rgba(127,127,127,.14));
  color: var(--text, #fff);
}
body.desktop-app .tab-badge {
  top: 50%; transform: translateY(-50%);
  right: auto; left: 28px;
}
body.desktop-app .app-viewport { flex: 1 1 auto; min-width: 0; }
/* Cerca: la rejilla ya era auto-fill; en escritorio gana columnas y algo
   más de aire para que las tarjetas no queden ridículas de anchas. */
body.desktop-app .nearby-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
body.desktop-app .nearby-section { padding: 16px 28px 8px; }
/* Columnas de lectura: Explorar (pila de perfiles), Chats y Perfil se
   centran con tope; el resto de pantallas igual, salvo Cerca que vive
   a ancho completo. */
body.desktop-app .screen:not([data-section="nearby"]) > * {
  max-width: 860px; margin-left: auto; margin-right: auto;
}
body.desktop-app .discover-stack-wrap {
  max-width: 460px; width: 100%;
  margin-left: auto; margin-right: auto;
}
body.desktop-app .chat-list { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   V952 · ESCRITORIO CON ACABADO (body.desktop-app)
   V951 montó la estructura (barra lateral + ancho completo) pero quedó sosa:
   panel plano sin marca y un vacío negro en el contenido. V952 le da el
   lenguaje visual que la app YA tiene (degradados de marca, cristal, tarjetas
   redondeadas): lienzo atmosférico, barra lateral de marca con ficha de
   usuario, topbar de cristal, dock de acciones flotante y estados vacíos
   cuidados. Todo con variables de tema (vale en claro y oscuro) y bajo
   body.desktop-app: el móvil no se toca.
   ========================================================================== */

/* 1 · Lienzo atmosférico: el contenido ya no vive sobre negro plano. Usa las
   variables de tema (brand/bg) para funcionar igual en claro y oscuro. */
body.desktop-app .phone {
  background:
    radial-gradient(1200px 700px at 6% -14%, color-mix(in srgb, var(--brand-1) 20%, transparent), transparent 62%),
    radial-gradient(1000px 640px at 102% 112%, color-mix(in srgb, var(--brand-3) 16%, transparent), transparent 60%),
    radial-gradient(760px 460px at 55% 46%, color-mix(in srgb, var(--brand-2) 7%, transparent), transparent 66%),
    var(--bg);
}
body.desktop-app .app-viewport,
body.desktop-app .screen { background: transparent; }

/* 2 · Barra lateral de marca: tinte de marca arriba. La cerradura (logo +
   título) la pone .desk-brand, inyectada por app.js con los assets reales. */
body.desktop-app .tabbar {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-1) 9%, var(--surface)) 0%, var(--surface) 46%);
  background-position: 0 0;
  background-repeat: no-repeat;
  border-right: 1px solid var(--border);
  padding: 18px 14px 16px;
  gap: 6px;
}
/* Ficha de usuario anclada abajo (nombre vía --aura-user-name, lo pone app.js). */
body.desktop-app .tabbar::after {
  content: var(--aura-user-name, "Tu cuenta");
  margin-top: auto;
  padding: 12px 14px 12px 18px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--brand-1), var(--brand-3)) left center / 4px 62% no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Navegación: filas redondeadas, icono en tile suave, activo en degradado. */
body.desktop-app .tab {
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--text-muted);
  transition: background .18s, color .18s, transform .12s;
}
body.desktop-app .tab:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
body.desktop-app .tab svg {
  width: 32px; height: 32px; box-sizing: border-box; padding: 5px;
  border-radius: 9px; background: var(--surface-2);
}
body.desktop-app .tab.active {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand-1) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.desktop-app .tab.active svg { background: rgba(255, 255, 255, .22); color: #fff; }
/* El badge de avisos vive en la esquina del tile del icono, no en la fila. */
body.desktop-app .tab-badge { left: 38px; }

/* 3 · Topbar de Explorar como barra de cristal pegajosa: el logo y los chips
   dejan de flotar sueltos y acompañan al hacer scroll. */
body.desktop-app .discover-topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  padding: 12px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
body.desktop-app .discover-topbar .brand-logo-mini,
body.desktop-app .discover-topbar .brand-logo-crop { width: 38px; height: 38px; }
body.desktop-app .discover-topbar .brand-logo-crop img { width: 47px; margin: -1px 0 0 -5px; }
body.desktop-app .discover-topbar .brand-topbar-spacer { width: 38px; height: 38px; }

/* 4 · Dock de acciones flotante: los botones de swipe dejan de ir sueltos. */
body.desktop-app .action-row {
  width: max-content;
  margin: 20px auto 26px;
  gap: 18px;
  padding: 12px 24px 10px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}
body.desktop-app .action-btn {
  background: var(--surface-2);
  border-color: var(--border);
  box-shadow: none;
  transition: transform .14s, box-shadow .14s;
}
body.desktop-app .action-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }

/* 5 · Estados vacíos como momento diseñado, no texto perdido en la nada.
   Cubre tanto .empty (listas) como el aviso de pila agotada en Explorar. */
body.desktop-app .empty {
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 40px 28px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
body.desktop-app .empty h3 { font-size: 20px; }
body.desktop-app .swipe-card-stack-hint {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}
/* El emoji del aviso se convierte en tile de marca. */
body.desktop-app .swipe-card-stack-hint div[style*="font-size:44px"] {
  width: 88px; height: 88px; margin: 0 auto 6px;
  display: grid; place-items: center;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--brand-1) 32%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 24%, transparent), color-mix(in srgb, var(--brand-3) 20%, transparent));
}

/* 6 · Tarjetas con presencia y scroll discreto. */
body.desktop-app .swipe-card { border-radius: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
body.desktop-app .screen::-webkit-scrollbar { width: 10px; }
body.desktop-app .screen::-webkit-scrollbar-track { background: transparent; }
body.desktop-app .screen::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; }

/* ==========================================================================
   V953 · MARCA REAL Y ANCHOS COHERENTES (body.desktop-app)
   El usuario pidió tres correcciones: el logo de la barra no era el de Aura,
   ni sus colores, ni el título; y unas secciones leían "móvil" (columna
   estrecha) mientras otras ocupaban todo el ancho. V953:
   - Cerradura de marca real (.desk-brand, la inyecta app.js): el PNG oficial
     recortado igual que .brand-logo-crop y el título con el degradado exacto
     de .brand-name-mini (naranja→magenta→púrpura→azul, 20px/800).
   - Anchos coherentes: el lienzo de sección pasa de 860 a 1160, la pila de
     Explorar gana presencia (520), Chats 980, los tabs de Likes ya no se
     estiran y el menú de Perfil se ordena en dos columnas. Cerca sigue a
     ancho completo. Ninguna sección vuelve a parecer un móvil incrustado.
   ========================================================================== */
body.desktop-app .desk-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
body.desktop-app .desk-brand-logo {
  width: 34px; height: 34px; overflow: hidden;
  border-radius: 10px; flex: 0 0 auto; line-height: 0;
}
body.desktop-app .desk-brand-logo img {
  width: 42px; height: auto; display: block;
  margin: -1px 0 0 -4px;
  clip-path: inset(0 0 30% 0);
  -webkit-clip-path: inset(0 0 30% 0);
}
body.desktop-app .desk-brand-name {
  font-weight: 800; font-size: 20px; letter-spacing: .01em;
  background: linear-gradient(90deg, #ff7a1a 0%, #ff2e93 35%, #a04bff 65%, #2f8bff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* Anchos: mismo lienzo amplio para todas las secciones salvo Cerca (completa). */
body.desktop-app .screen:not([data-section="nearby"]) > * { max-width: 1160px; }
body.desktop-app .discover-stack-wrap { max-width: 520px; }
/* Los topes por sección necesitan el combinador ".screen >" para igualar la
   especificidad (0,3,1) de la regla del lienzo y ganarle por orden de fuente.
   Sin él, el lienzo (1160) los pisaba: el tope de Chats estaba muerto desde
   V951 y el de Likes desde V953. La rejilla del perfil no compite por max-width
   (el lienzo ya se lo da) pero sí por display: vuelve a dos columnas. */
body.desktop-app .screen > .chat-list { max-width: 980px; margin-left: auto; margin-right: auto; }
body.desktop-app .screen > .likes-tabs { max-width: 640px; margin-left: auto; margin-right: auto; }
body.desktop-app .settings-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
body.desktop-app .settings-section { grid-column: 1 / -1; }

/* ==========================================================================
   V955 · PC SIN RESIDUOS DE MÓVIL (body.desktop-app)
   Las capturas del usuario mostraban cinco restos móviles en escritorio:
     1 · Subpantallas y sesiones recicladas caían en la maqueta del welcome
         (móvil con notch + tarjetas laterales): lo cierra el autocurado de
         render() en app.js (app-open + syncDesktopApp en cada render).
     2 · Filtros, zona y packs de lecturas abrían como hoja inferior móvil de
         400px flotando en mitad de la ventana.
     3 · Secciones topadas a 1160/520/980px con huecos negros a los lados,
         mientras el mapa ocupaba todo: el usuario lo leyó como "sin ajustar".
     4 · El mapa (position:fixed a la ventana) dejaba la barra de filtros
         flotando baja y tapaba la barra lateral.
     5 · Buscar y Likes mantenían la rejilla móvil de dos columnas.
   Todo vive bajo body.desktop-app: el móvil y la tablet no se tocan.
   ========================================================================== */

/* — 2 · Hojas y modales como diálogo centrado de escritorio — */
body.desktop-app .modal { align-items: center; padding: 28px; }
body.desktop-app .modal-sheet {
  width: min(760px, 100%);
  max-height: min(86dvh, 940px);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
  padding-top: 10px;
  animation: deskModalIn .16s ease;
}
body.desktop-app .modal-sheet::before { display: none; } /* sin asa de arrastre */
@keyframes deskModalIn { from { transform: scale(.97); opacity: 0; } }
/* Filtros: dos columnas de grupos dentro del diálogo. */
body.desktop-app .filters-body,
body.desktop-app .nearby-filters-sheet {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 24px; align-items: start;
}
body.desktop-app .filters-body .sheet-titlebar,
body.desktop-app .nearby-filters-sheet .sheet-titlebar { grid-column: 1 / -1; }
/* Los grupos con rango/slider ocupan fila completa para no ahogarse. */
body.desktop-app .filter-group:has(.single-range-slider),
body.desktop-app .filter-group:has(.num-range) { grid-column: 1 / -1; }
/* Zona: rejilla de tarjetas en vez de lista vertical estrecha. */
body.desktop-app .zone-options { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* — 3 · Lienzo a sangre: ninguna sección deja huecos laterales — */
body.desktop-app .screen:not([data-section="nearby"]) > * {
  max-width: none; margin-left: 0; margin-right: 0;
}
body.desktop-app .screen:not([data-section="nearby"]) {
  padding-left: 26px; padding-right: 26px; box-sizing: border-box;
}
/* Anchos diseñados: la pila de Explorar y los controles siguen centrados. */
body.desktop-app .discover-stack-wrap { max-width: 1060px; margin-left: auto; margin-right: auto; }
body.desktop-app .screen > .likes-tabs { max-width: 720px; margin-left: auto; margin-right: auto; }
/* — 5 · Rejillas responsivas en vez de las dos columnas del móvil — */
body.desktop-app .results-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
body.desktop-app .likes-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
body.desktop-app .settings-list { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); }
body.desktop-app .screen > .chat-list { max-width: none; }
/* Los estados vacíos no se estiran: tarjeta centrada de lectura. */
body.desktop-app .screen > .empty,
body.desktop-app .screen > .nearby-empty,
body.desktop-app .screen > .swipe-card-stack-hint {
  max-width: 760px; margin-left: auto; margin-right: auto;
}

/* — 4 · Mapa anclado al viewport de la app (no a la ventana) — */
body.desktop-app .app-viewport { position: relative; }
body.desktop-app .map-overlay { position: absolute; inset: 0; }

/* ==========================================================================
   V956 · AJUSTES DE ESCRITORIO: EXPLORAR, TICKETS, AVISOS Y NAVEGACIÓN
   Todo el rediseño visual queda limitado a body.desktop-app. Móvil conserva
   tamaños, composición y gestos originales.
   ========================================================================== */

/* Explorar: en un lienzo panorámico, cover recortaba las fotos verticales.
   contain garantiza que la imagen completa quede siempre dentro de la tarjeta. */
body.desktop-app .swipe-card {
  /* Capa 1: foto completa. Capa 3: la misma foto a sangre, oscurecida por la
     capa intermedia, para que las bandas laterales formen un fondo coherente. */
  background-image:
    var(--swipe-photo),
    linear-gradient(rgba(4,5,9,.76), rgba(4,5,9,.76)),
    var(--swipe-photo) !important;
  background-size: contain, cover, cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #0b0c12;
  border: 1px solid color-mix(in srgb, var(--brand-3) 22%, var(--border));
}
body.desktop-app .swipe-card::after {
  background:
    linear-gradient(90deg, rgba(5,6,10,.48), transparent 24%, transparent 76%, rgba(5,6,10,.48)),
    linear-gradient(180deg, transparent 38%, rgba(5,6,10,.82));
}

/* Navegación lateral: cada destino tiene identidad propia, manteniendo el
   degradado multicolor de Aura en vez de seis botones idénticos. */
body.desktop-app .tab[data-tab="discover"] { --tab-accent: #ff7a1a; --tab-accent-2: #ff2e93; }
body.desktop-app .tab[data-tab="search"]   { --tab-accent: #2f8bff; --tab-accent-2: #06b6d4; }
body.desktop-app .tab[data-tab="nearby"]   { --tab-accent: #14b8a6; --tab-accent-2: #22c55e; }
body.desktop-app .tab[data-tab="likes"]    { --tab-accent: #ff2e93; --tab-accent-2: #a04bff; }
body.desktop-app .tab[data-tab="chats"]    { --tab-accent: #8b5cf6; --tab-accent-2: #2f8bff; }
body.desktop-app .tab[data-tab="me"]       { --tab-accent: #f59e0b; --tab-accent-2: #ff5b69; }
body.desktop-app .tab {
  position: relative;
  overflow: visible;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tab-accent) 5%, transparent), transparent 72%);
}
body.desktop-app .tab::before {
  content: "";
  position: absolute;
  left: -5px;
  width: 3px;
  height: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tab-accent), var(--tab-accent-2));
  transition: height .18s ease;
}
body.desktop-app .tab svg {
  color: var(--tab-accent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tab-accent) 22%, var(--surface)),
    color-mix(in srgb, var(--tab-accent-2) 12%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--tab-accent) 24%, transparent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--tab-accent) 14%, transparent);
}
body.desktop-app .tab:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--tab-accent) 14%, var(--surface)), var(--surface-2));
  border-color: color-mix(in srgb, var(--tab-accent) 24%, transparent);
}
body.desktop-app .tab:hover::before,
body.desktop-app .tab.active::before { height: 28px; }
body.desktop-app .tab.active {
  background: linear-gradient(110deg, var(--tab-accent), var(--tab-accent-2));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tab-accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
body.desktop-app .tab.active svg {
  color: #fff;
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.28);
  box-shadow: none;
}

/* Tickets: el flujo de Perfil se mantiene dentro del shell de PC y aprovecha
   el ancho con un hero editorial, tres categorías por fila y formulario en
   dos columnas. */
body.desktop-app .screen.screen-tickets > .info-wrap.ticket-wrap {
  width: 100%;
  max-width: 1180px !important;
  margin: 0 auto;
  padding: 28px 12px 64px;
  box-sizing: border-box;
}
body.desktop-app .screen-tickets .ticket-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  grid-template-rows: auto auto auto;
  column-gap: 52px;
  align-items: center;
  padding: 38px 42px;
  border-radius: 28px;
  margin: 4px 0 30px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.28), transparent 28%),
    linear-gradient(120deg, #ff5b32 0%, #ff2e93 48%, #7545e8 100%);
  box-shadow: 0 24px 58px rgba(213, 45, 116, .24);
}
body.desktop-app .screen-tickets .ticket-hero-badge,
body.desktop-app .screen-tickets .ticket-hero-title,
body.desktop-app .screen-tickets .ticket-hero-sub { grid-column: 1; }
body.desktop-app .screen-tickets .ticket-hero-title {
  margin-top: 14px;
  font-size: clamp(30px, 3vw, 42px);
  max-width: 650px;
}
body.desktop-app .screen-tickets .ticket-hero-sub {
  max-width: 640px;
  font-size: 15px;
  margin-bottom: 0;
}
body.desktop-app .screen-tickets .ticket-hero-stats {
  grid-column: 2;
  grid-row: 1 / 4;
  width: 100%;
  gap: 12px;
}
body.desktop-app .screen-tickets .ticket-stat {
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 18px;
}
body.desktop-app .screen-tickets .ticket-stat strong { font-size: 21px; }
body.desktop-app .screen-tickets .ticket-stat span { font-size: 11.5px; }
body.desktop-app .screen-tickets .ticket-section-title { font-size: 14px; margin-top: 28px; }
body.desktop-app .screen-tickets .ticket-cat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.desktop-app .screen-tickets .ticket-cat-card {
  min-height: 126px;
  padding: 18px;
  border-radius: 20px;
}
body.desktop-app .screen-tickets .ticket-cat-card:hover { transform: translateY(-4px); }
body.desktop-app .screen-tickets .ticket-cat-ic { width: 48px; height: 48px; font-size: 27px; }
body.desktop-app .screen-tickets .ticket-cat-h { font-size: 15px; }
body.desktop-app .screen-tickets .ticket-cat-p { font-size: 12.5px; }
body.desktop-app .screen-tickets .ticket-selfhelp,
body.desktop-app .screen-tickets .ticket-form-box {
  margin-top: 26px;
  padding: 4px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
}
body.desktop-app .screen-tickets .ticket-search-wrap { max-width: 760px; }
body.desktop-app .screen-tickets .ticket-matches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}
body.desktop-app .screen-tickets .ticket-still { grid-column: 1 / -1; }
body.desktop-app .screen-tickets .ticket-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
body.desktop-app .screen-tickets .ticket-form > .field:nth-child(3),
body.desktop-app .screen-tickets .ticket-form > .field:has(textarea),
body.desktop-app .screen-tickets .ticket-form > .ticket-label,
body.desktop-app .screen-tickets .ticket-form > .ticket-priority,
body.desktop-app .screen-tickets .ticket-form > .ticket-attach-row,
body.desktop-app .screen-tickets .ticket-form > .ticket-attach-list,
body.desktop-app .screen-tickets .ticket-form > .ticket-consent,
body.desktop-app .screen-tickets .ticket-form > .ticket-submit { grid-column: 1 / -1; }
body.desktop-app .screen-tickets .ticket-priority { gap: 14px; }
body.desktop-app .screen-tickets .ticket-pri { min-height: 82px; justify-content: center; }
body.desktop-app .screen-tickets .ticket-submit { width: min(360px, 100%); justify-self: end; }

/* La vista de detalle sólo existe visualmente en PC. */
.notif-detail { display: none; }

body.desktop-app .modal-card.notif-modal {
  width: min(1040px, calc(100vw - 80px));
  max-width: 1040px;
  max-height: min(84dvh, 780px);
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}
body.desktop-app .notif-list-wrap { max-height: calc(min(84dvh, 780px) - 48px); }
body.desktop-app .notif-head h3 { font-size: 24px; }
body.desktop-app .notif-subhint { padding: 12px 14px; }
body.desktop-app .notif-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(420px, 1.2fr);
  min-height: 390px;
  max-height: 52vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface-2) 54%, transparent);
}
body.desktop-app .notif-list {
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 10px;
  gap: 7px;
  border-right: 1px solid var(--border);
}
body.desktop-app .notif-item {
  position: relative;
  padding: 13px 14px;
  border-radius: 14px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
body.desktop-app .notif-item:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--brand-3) 38%, var(--border)); }
body.desktop-app .notif-item.selected {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--brand-1) 15%, var(--surface)),
    color-mix(in srgb, var(--brand-3) 12%, var(--surface)));
  border-color: color-mix(in srgb, var(--brand-1) 45%, transparent);
  box-shadow: inset 3px 0 0 var(--brand-1);
}
body.desktop-app .notif-item .notif-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.desktop-app .notif-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 38px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--brand-3) 13%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 88%, transparent);
}
body.desktop-app .notif-detail-empty {
  margin: auto;
  max-width: 320px;
  text-align: center;
  color: var(--text-muted);
}
body.desktop-app .notif-detail-empty-ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 22px;
  font-size: 30px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 20%, transparent), color-mix(in srgb, var(--brand-3) 18%, transparent));
}
body.desktop-app .notif-detail-empty strong { display: block; color: var(--text); font-size: 18px; }
body.desktop-app .notif-detail-empty p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
body.desktop-app .notif-detail-top { display: flex; align-items: center; justify-content: space-between; }
body.desktop-app .notif-detail-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 30px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-1) 22%, transparent), color-mix(in srgb, var(--brand-3) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand-1) 28%, transparent);
}
body.desktop-app .notif-detail-state {
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand-1) 16%, transparent);
  color: var(--brand-1);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
body.desktop-app .notif-detail-state.is-read { background: var(--surface-2); color: var(--text-muted); }
body.desktop-app .notif-detail-title { margin: 26px 0 12px; font-size: 26px; line-height: 1.2; }
body.desktop-app .notif-detail-text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-soft); white-space: pre-line; }
body.desktop-app .notif-detail-time { margin-top: auto; padding-top: 28px; font-size: 12px; color: var(--text-muted); }
body.desktop-app .notif-modal .modal-actions { margin-top: 0; }