/* ══════════════════════════════════════════════════════════════════════════
   NATIVE — reader gating visual (App Store / Play Store)
   ══════════════════════════════════════════════════════════════════════════

   Stillova se publica bajo el modelo reader (Apple 3.1.3(a)): la app nativa deja
   usar el producto pero NO vende. La suscripción y las flores se compran solo en
   stillova.com. Así no hay comisión de tienda y los entitlements siguen saliendo
   de un solo lado (Lemon Squeezy → Supabase).

   js/utils.js blockedByNativeStore() corta las DOS rutas que pueden terminar en
   cobro — buyPack() en js/packs.js y pwProceed() en index.html —, pero eso no
   alcanza para el review: Guideline 3.1.1 mira la UI. Un paywall con precios y un
   botón "Empezar con Premium" es rechazo aunque el botón no haga nada. Este
   archivo apaga esa UI y la reemplaza por un aviso.

   ⚠️ Hasta el 11-sep-2026 este párrafo decía "las dos rutas" y era FALSO: había
   una sola llamada, la de buyPack. pwProceed no tenía guardia en JS y lo tapaba
   solo el CSS, sin segunda línea. La guardia que falta se agregó ese día.

   ⚠️ ESTA LISTA NO SE MANTIENE A MANO. La cubre scripts/test-reader-gating.js,
   que saca las superficies de venta de los onclick reales de index.html y falla
   si alguna queda destapada. Se corre con `node scripts/test-reader-gating.js`.
   Existe porque quien escribe una pantalla nueva en `main` no tiene cómo
   acordarse de este archivo, que solo vive en la rama de tiendas.

   Todo cuelga de .is-native, que index.html pone en <html> solo dentro del
   binario. En la web ninguna regla de acá aplica: el archivo es inerte.

   Qué NO se oculta a propósito:
   · .pw-context-cta — "Crear cuenta gratis". Crear cuenta no es comprar, y es la
     vía a la meditación de bienvenida. Ocultarla dejaría al usuario sin entrada.
   · El precio del plan que YA tiene (profile-plan-price-display) — es información
     sobre lo contratado, no una oferta de compra.

   Si algún día se agrega venta in-app (IAP v2), este archivo se borra entero y se
   quita el <link> de index.html. Es a propósito que viva separado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Superficies de compra que se apagan en el binario ──────────────────────
   !important porque varias de estas se muestran desde JS con style inline
   (display:block), y una declaración inline le gana a una clase normal. */
.is-native .pw-promo-banner,          /* trial "Activar" */
.is-native .pw-toggle-wrap,           /* mensual / anual */
.is-native .pw-cards,                 /* las 3 tarjetas de plan con precio */
.is-native .pw-flores-explainer,
.is-native .pw-cta-main,              /* "Empezar con Premium" */
.is-native .pw-cta-microcopy,         /* "Hoy se cobran $..." */
.is-native .pw-trust-microcopy,       /* "Pago seguro procesado por..." */
.is-native .pack-cards,               /* tarjetas de packs de flores */
.is-native #profile-packs-section,    /* "Más flores" del perfil */
.is-native #profile-manage-plan-btn { /* "gestionar plan →" */
  display: none !important;
}

/* El indicador "↓ Sigue mirando" del paywall es puramente CSS y está siempre
   presente. Sin las tarjetas de plan el contenido ya no desborda, así que invita
   a bajar hacia nada. */
.is-native .pw-scroll-hint {
  display: none !important;
}

/* ── Dos que se escaparon hasta el 11-sep-2026 ──────────────────────────────
   Las dos estaban visibles dentro del binario desde que existe la rama, y las
   dos son el caso textual que describe el encabezado de este archivo.

   1. El botón "Continúa con Premium" del banner Welcome del home. El banner en
      sí es informativo (cuántos días quedan del plan que YA tiene, y eso se
      queda), pero cuando bajan de 5 días js/navigation.js lo convierte en
      oferta: "¿Te quedas con sesiones de 20 min para siempre?" + este botón.
      El texto lo neutraliza navigation.js; el botón se apaga acá.
      !important obligatorio: navigation.js lo muestra con style.display en
      línea, y una declaración en línea le gana a una clase normal.

   2. El pie del modal de flores, que termina en el enlace "considera un plan
      mayor" → packModalToPlanPaywall(). Es steering a comprar dentro del
      binario, y no es una pantalla rara: js/auth.js desvía a ese modal CADA VEZ
      que alguien se queda sin flores. Se apaga el párrafo entero porque su
      primera mitad ("las flores extras se usan después de las del plan") habla
      de un producto que en el binario no se puede comprar. */
.is-native #home-welcome-premium-cta,
.is-native .pack-explainer {
  display: none !important;
}

/* ── Issue #376 (17-sep-2026): un camino de compra completo, con precio ─────
   La lista de arriba nunca miró la pantalla de fin de meditación: cuando una
   cuenta gratis se queda sin flores, js/player.js muestra #end-upsell con
   "Tu primer mes por $5.99" y un botón que llega hasta el checkout real de
   Lemon Squeezy — nadie en esa cadena llamaba a blockedByNativeStore(). Se
   cerró también el camino en JS (js/auth.js, upgradePlan() corta ahí mismo,
   antes que nada, así cualquier botón nuevo que llegue a esa función queda
   tapado sin acordarse de este archivo) — pero Guideline 3.1.1 mira la
   pantalla, no el código, así que se apaga igual acá.

   #end-upsell SIGUE VISIBLE como tarjeta — "sesión completada" no es venta,
   y ocultar la tarjeta entera dejaría a quien se quedó sin flores sin
   ningún cierre (mismo motivo que no-credits-cta en VISIBLE_A_PROPOSITO de
   scripts/test-reader-gating.js). Se tapan solo sus tres piezas de precio/
   compra, y el párrafo .native-store-note que index.html ya trae adentro
   de la tarjeta ocupa su lugar. */
.is-native #end-upsell .post-session-pre-price,
.is-native #end-upsell .post-session-cta-primary,
.is-native #end-upsell .post-session-price-meta,
.is-native #end-upsell .post-session-secondary-planes {
  display: none !important;
}

/* #end-guest es la misma tarjeta para invitados: INALCANZABLE desde jun-2026
   (la primera gratis ya exige cuenta), pero sigue en el HTML como defensa.
   Al no poder verla nadie, no hace falta el mismo cuidado de arriba — se
   apaga entera. #precheckout-modal es el paso de en medio: el "Pagar
   $X.XX" antes del cobro, sin nada más que preservar. */
.is-native #end-guest,
.is-native #precheckout-modal {
  display: none !important;
}

/* Hermano nombrado en el issue #376: el modal de packs de flores (#pack-
   modal, showPackModal — se abre solo, sin botón en el HTML, cuando a
   alguien se le acaban las flores) ya tapaba .pack-cards y .pack-explainer,
   pero el título y el texto de entrada seguían invitando a comprar ("Flores
   que no expiran" / "Compra flores extras…") justo antes del párrafo
   .native-store-note que ya cierra el modal (L3546). Se tapa el resto de la
   invitación para que el modal no se contradiga a sí mismo. */
.is-native #pack-headline,
.is-native #pack-modal .pw-value-prop,
.is-native #pack-context-banner {
  display: none !important;
}

/* ── Aviso que las reemplaza ────────────────────────────────────────────────
   Oculto por defecto: solo aparece dentro del binario. NO es un enlace a
   propósito — un enlace tappable para completar la compra afuera exige el
   External Link Account Entitlement de Apple. */
.native-store-note {
  display: none;
}

.is-native .native-store-note {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  margin: 18px auto 4px;
  padding: 14px 16px;
  max-width: 320px;
  border: 1px solid rgba(127, 127, 127, 0.18);
  border-radius: 12px;
}

/* Dentro del perfil el fondo es oscuro: el token de texto es otro. */
.is-native .profile-plan-card .native-store-note {
  color: var(--canvas);
  opacity: 0.7;
  font-size: 12px;
  margin: 12px 0 0;
  padding: 10px 12px;
  max-width: none;
  text-align: left;
}

.native-store-note strong {
  font-weight: 600;
}

/* ── Selector de "Entra en Stillova" — solo nativo ───────────────────────────
   Sobre .paywall-overlay/.paywall-card (mismo lenguaje visual que ya usa la
   app) para las dos rutas que Clerk oculta acá dentro: Google (por el
   navegador del sistema — ver js/auth.js, iniciarGoogleNativo) o correo (el
   modal normal de Clerk, ya sin social buttons). Este bloque no necesita el
   prefijo .is-native: la tarjeta que estiliza solo la inserta JS cuando
   window.IS_NATIVE es cierto, nunca existe en la web. */
.native-auth-card {
  text-align: center;
  padding-top: 20px;
}
.native-auth-close {
  position: absolute;
  top: 18px;
  right: 18px;
}
.native-auth-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  margin: 4px 0 2px;
}
.native-auth-sub {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 26px;
}
.native-auth-apple-btn svg,
.native-auth-google-btn svg { flex: none; }
.native-auth-apple-btn { margin-bottom: 10px; }
.native-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.native-auth-divider::before,
.native-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--faint);
}