@layer components {
  /* In-app breakout — bottom-sheet que saca al usuario del navegador in-app
     (IG/FB/TikTok) hacia la app o el navegador real. Chrome canónico (base
     app-install-modal): el <dialog> es transparente y full-bleed; TODO el chrome
     (fondo, radio superior, hairline, padding+safe-area, cap de ancho) vive en
     `__inner`. `showModal()` lo lleva al top-layer con ::backdrop nativo; el
     controller añade `.is-open` en doble rAF para el slide-up + fade del backdrop.

     Cerrado, el <dialog> ya es display:none (UA) → sin FOUC, sin hack [hidden]. */
  .inapp-breakout {
    /* Anclado abajo como bottom-sheet vía inset (override del centrado por
       defecto de dialog:modal). El chrome vive en `__inner`. */
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    background: transparent;
    color: var(--color-text, #fff);
    font-family: var(--font-body, Manrope, sans-serif);
    transform: translateY(110%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .inapp-breakout.is-open {
    transform: translateY(0);
  }

  /* Backdrop — ofusca + difumina el fondo, en sincronía con el slide-up. */
  .inapp-breakout::backdrop {
    background: rgb(0 0 0 / 0%);
    backdrop-filter: blur(0);
    transition:
      background 280ms ease-out,
      backdrop-filter 280ms ease-out;
  }

  .inapp-breakout.is-open::backdrop {
    background: rgb(0 0 0 / 70%);
    backdrop-filter: blur(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .inapp-breakout,
    .inapp-breakout::backdrop {
      transition: none;
    }
  }

  /* showModal() autoenfoca el primer elemento → sin anillo al abrir (igual que
     el consent-modal); el foco sigue siendo navegable por teclado. */
  .inapp-breakout :focus-visible {
    outline: none;
  }

  /* Chrome: fondo, radio superior, hairline, padding+safe-area, cap de ancho.
     Variante ancha (multi-columna de botones) → max-width 720px. */
  .inapp-breakout__inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 22px calc(22px + env(safe-area-inset-bottom));
    background: var(--color-surface, #111113);
    border-top: 1px solid var(--color-surface-border, rgb(255 255 255 / 8%));
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* Drag handle (grabber decorativo, aria-hidden) */
  .inapp-breakout__handle {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 0 auto 2px;
    border-radius: var(--radius-full, 9999px);
    background: rgb(255 255 255 / 22%);
  }

  /* El ✕ se ancla al `__inner` → el head deja sitio a su derecha. */
  .inapp-breakout__head {
    padding-right: 34px;
  }

  .inapp-breakout__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  .inapp-breakout__subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgb(255 255 255 / 75%);
  }

  /* Cierre (✕) — anclado a la esquina superior derecha del `__inner`. */
  .inapp-breakout__close {
    position: absolute;
    top: 14px;
    right: 16px;
    appearance: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface-border, rgb(255 255 255 / 8%));
    color: rgb(255 255 255 / 70%);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition:
      background 160ms ease,
      color 160ms ease;
  }

  .inapp-breakout__close:hover {
    background: rgb(255 255 255 / 14%);
    color: #fff;
  }

  .inapp-breakout__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .inapp-breakout__btn {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition:
      background 160ms ease,
      color 160ms ease;
  }

  /* Abrir en la app — primario (el win de negocio). */
  .inapp-breakout__btn--primary {
    background: var(--color-accent, #00a572);
    color: #000;
  }

  .inapp-breakout__btn--primary:hover {
    background: #00c084;
  }

  /* Abrir en el navegador — secundario, contorno. */
  .inapp-breakout__btn--secondary {
    background: transparent;
    color: #fff;
    border: 1px solid rgb(255 255 255 / 50%);
  }

  .inapp-breakout__btn--secondary:hover {
    background: rgb(255 255 255 / 10%);
  }

  /* Copiar enlace — terciario, texto. */
  .inapp-breakout__btn--ghost {
    background: transparent;
    color: rgb(255 255 255 / 80%);
    font-weight: 500;
    padding: 6px 18px;
  }

  .inapp-breakout__btn--ghost:hover {
    color: #fff;
  }

  .inapp-breakout__hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: rgb(255 255 255 / 55%);
  }

  @media (width >= 640px) {
    .inapp-breakout__actions {
      flex-flow: row wrap;
      justify-content: center;
    }

    .inapp-breakout__btn {
      width: auto;
      min-width: 220px;
    }
  }
}