{{-- Global "upgrade to Pro" bottom-sheet. Opened whenever the API answers a
     request with 403 + code:upgrade_required — replaces a hard redirect so an
     in-progress flow (quick-log, batch creation…) isn't lost just to show an
     upsell the user might dismiss. --}}
<div x-data="fmPremiumSheet()" x-on:fm-premium.window="open($event.detail && $event.detail.message)" x-show="show" x-cloak
     style="position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;justify-content:flex-end;">
    <div @click="show=false" style="position:absolute;inset:0;background:rgba(22,39,27,0.45);backdrop-filter:blur(2px);"></div>

    <div @click.stop style="position:relative;background:var(--surface-card);border-top-left-radius:30px;border-top-right-radius:30px;padding:14px 20px 32px;box-shadow:var(--shadow-xl);text-align:center;">
        <div style="width:40px;height:4px;border-radius:2px;background:var(--paper-4);margin:0 auto 16px;"></div>

        <span class="fm-glyph" style="width:52px;height:52px;border-radius:16px;background:var(--gold-100);color:var(--gold-700);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;">
            <i class="fa-solid fa-crown" style="font-size:22px;"></i>
        </span>

        <div style="font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--text-primary);margin-bottom:8px;">Función Pro</div>
        <p style="margin:0 0 22px;font:400 14.5px/1.5 var(--font-sans);color:var(--text-secondary);" x-text="message"></p>

        <a :href="window.FM_ROUTES.premium"
           style="display:block;background:var(--gold-500);color:var(--green-900);text-decoration:none;border-radius:var(--radius-md);padding:13px;font:700 15px/1 var(--font-sans);">
            Actualizar a Pro
        </a>
        <button type="button" @click="show=false"
                style="width:100%;margin-top:12px;background:none;border:none;cursor:pointer;color:var(--text-muted);font:500 13px/1 var(--font-sans);">
            Más tarde
        </button>
    </div>
</div>

<script>
function fmPremiumSheet() {
    return {
        show: false, message: '',
        open(message) {
            this.message = message || 'Esta función forma parte del plan Pro.';
            this.show = true;
        },
    };
}
</script>