<script setup>
/*
 * MelissaPerfil — Pagina nativa Melissa pra "Meu Perfil".
 *
 * Substitui o embed cfg-perfil que vivia dentro do MelissaConfiguracoes.
 * Layout 2-col:
 *   - COL 1 (sidebar) — Gamificação (nivel + XP + badges + dicas) + Avatar
 *     (upload/remover) + footer Sair da conta
 *   - COL 2 (main) — Identidade + Contato + Bio + Sites e Redes
 *
 * Aparência (tema/cores) e Layout Variant ficaram fora — Aparencia ja
 * vive no MelissaConfiguracoes "Layout Melissa" e Layout Variant nao
 * faz sentido dentro do shell Melissa. Trocar senha vai pro cfg-seguranca.
 *
 * Logica de load/save espelhada do ProfilePage.vue (mesmas tabelas
 * profiles + user_settings + auth.user_metadata, mesmo bucket avatars).
 */
import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useToast } from 'primevue/usetoast';
import { useConfirm } from 'primevue/useconfirm';
import { useRouter } from 'vue-router';
import { supabase } from '@/lib/supabase/client';
import { useTenantStore } from '@/stores/tenantStore';
import { useLayout } from '@/layout/composables/layout';
import MelissaConfigList from './MelissaConfigList.vue';
// InputText/Select/Textarea/InputMask/Skeleton/Tag/Button: auto via PrimeVueResolver

const emit = defineEmits(['close']);

const toast = useToast();
const confirm = useConfirm();
const router = useRouter();
const tenantStore = useTenantStore();
const { layoutConfig, setVariant, isDarkTheme, toggleDarkMode } = useLayout();

// Opções do CHECK constraint da migration 20260521000003 (CFP #5)
const REGISTRATION_TYPE_OPTIONS = [
    { value: '', label: '— Não informado —' },
    { value: 'CRP', label: 'CRP — Psicólogo(a)' },
    { value: 'CRM', label: 'CRM — Médico(a)' },
    { value: 'CRFa', label: 'CRFa — Fonoaudiólogo(a)' },
    { value: 'CREFITO', label: 'CREFITO — Fisioterapeuta / T.O.' },
    { value: 'CRESS', label: 'CRESS — Assistente Social' },
    { value: 'CRN', label: 'CRN — Nutricionista' },
    { value: 'RMS', label: 'RMS — Residência Multiprofissional' },
    { value: 'outro', label: 'Outro' }
];

const UF_OPTIONS = [
    'AC','AL','AP','AM','BA','CE','DF','ES','GO','MA','MT','MS','MG','PA','PB',
    'PR','PE','PI','RJ','RN','RS','RO','RR','SC','SP','SE','TO'
].map(uf => ({ value: uf, label: uf }));

function goSeguranca() {
    // Página nativa Melissa — não vaza pra layout clássico
    router.push('/melissa/seguranca');
}

// Troca de layout variant (classic/rail/melissa). Confirma + persiste +
// hard reload — sair do shell Melissa requer reload pq AppLayout não tem
// branch pra essa rota; quem renderiza Melissa é a rota /melissa separada.
const variantSwitchOpen = ref(false);
async function switchToVariant(v) {
    if (!['classic', 'rail', 'melissa'].includes(v)) return;
    if (layoutConfig.variant === v) return;
    if (variantSwitchOpen.value) return;
    variantSwitchOpen.value = true;
    const labels = { classic: 'Clássico', rail: 'Rail', melissa: 'Melissa' };
    confirm.require({
        header: `Trocar para o layout ${labels[v]}`,
        message: 'A página será recarregada para aplicar o novo layout. Confirma?',
        icon: 'pi pi-th-large',
        acceptLabel: 'Trocar e recarregar',
        rejectLabel: 'Cancelar',
        accept: async () => {
            try {
                setVariant(v);
                if (userId.value) {
                    const { error } = await supabase
                        .from('user_settings')
                        .upsert(
                            {
                                user_id: userId.value,
                                layout_variant: v,
                                updated_at: new Date().toISOString()
                            },
                            { onConflict: 'user_id' }
                        );
                    if (error) {
                        const msg = String(error.message || '');
                        const tolerant = /does not exist/i.test(msg) || /permission denied/i.test(msg) || /violates row-level security/i.test(msg);
                        if (!tolerant) throw error;
                    }
                }
                toast.add({ severity: 'info', summary: `Aplicando ${labels[v]}`, detail: 'Recarregando…', life: 1500 });
                window.location.assign('/');
            } catch (e) {
                variantSwitchOpen.value = false;
                toast.add({ severity: 'error', summary: 'Erro ao trocar layout', detail: e?.message || 'Tente novamente.', life: 4000 });
            }
        },
        reject: () => { variantSwitchOpen.value = false; },
        onHide: () => { variantSwitchOpen.value = false; }
    });
}

const AVATAR_BUCKET = 'avatars';

// ── Breakpoints + drawer ───────────────────────────────────
const drawerOpen = ref(false);
const isMobile = ref(false);
let _mqMobile = null;
function _onMqMobileChange(e) {
    isMobile.value = e.matches;
    if (!e.matches) drawerOpen.value = false;
}
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
function fecharDrawer() { drawerOpen.value = false; }

// Toggle entre cards contextuais (default) e lista de configs (alterna
// inline na .mpr-side via v-if — sem overlay/popover, zero overhead).
const cfgOpen = ref(false);
function toggleCfg() { cfgOpen.value = !cfgOpen.value; }
function fecharCfg() { cfgOpen.value = false; }

// ── Estado ─────────────────────────────────────────────────
const loading = ref(true);
const saving = ref(false);
const dirty = ref(false);
const silentApplying = ref(true);

const userId = ref('');
const userEmail = ref('');
const userRole = ref(null);

const fieldErrors = reactive({
    full_name: '',
    nickname: '',
    phone: ''
});

function clearErr(field) { fieldErrors[field] = ''; }
function markDirty() {
    if (silentApplying.value) return;
    dirty.value = true;
}

const form = reactive({
    full_name: '',
    nickname: '',
    work_description: '',
    work_description_other: '',
    avatar_url: '',
    bio: '',
    phone: '',
    site_url: '',
    social_instagram: '',
    social_youtube: '',
    social_facebook: '',
    social_x: '',
    // Registro profissional (CFP #5 — exigido pra emissão de recibos/laudos)
    professional_registration_type: '',
    professional_registration_type_other: '',
    professional_registration_number: '',
    professional_registration_uf: ''
});

const customSocials = ref([]);

function addCustomSocial() {
    customSocials.value.push({ name: '', url: '' });
    markDirty();
}
function removeCustomSocial(idx) {
    customSocials.value.splice(idx, 1);
    markDirty();
}

const ui = reactive({
    avatarPreview: '',
    avatarFile: null,
    avatarFilePreviewUrl: ''
});

const fileInput = ref(null);

const workDescriptionOptions = [
    { label: 'Psicólogo(a) Clínico(a)', value: 'psicologo_clinico' },
    { label: 'Psicanalista', value: 'psicanalista' },
    { label: 'Psiquiatra', value: 'psiquiatra' },
    { label: 'Psicoterapeuta', value: 'psicoterapeuta' },
    { label: 'Neuropsicólogo(a)', value: 'neuropsicologo' },
    { label: 'Psicólogo(a) Organizacional', value: 'psicologo_organizacional' },
    { label: 'Psicólogo(a) Escolar / Educacional', value: 'psicologo_escolar' },
    { label: 'Psicólogo(a) Hospitalar', value: 'psicologo_hospitalar' },
    { label: 'Psicólogo(a) Jurídico(a)', value: 'psicologo_juridico' },
    { label: 'Coach / Mentor(a)', value: 'coach_mentor' },
    { label: 'Terapeuta Holístico(a)', value: 'terapeuta_holistico' },
    { label: 'Outro', value: 'outro' }
];

// ── Iniciais (avatar fallback) ──────────────────────────────
const initials = computed(() => {
    const name = form.full_name || userEmail.value || '';
    const parts = String(name).trim().split(/\s+/).filter(Boolean);
    const a = parts[0]?.[0] || 'U';
    const b = parts.length > 1 ? parts[parts.length - 1][0] : '';
    return (a + b).toUpperCase();
});

// ── Gamificação / Progresso ────────────────────────────────
const profileFields = computed(() => [
    { key: 'full_name', filled: !!form.full_name?.trim(), icon: 'pi pi-user', text: 'Preencha seu nome completo' },
    { key: 'nickname', filled: !!form.nickname?.trim(), icon: 'pi pi-comment', text: 'Escolha um nome de exibição' },
    { key: 'work_description', filled: !!form.work_description?.trim(), icon: 'pi pi-briefcase', text: 'Descreva seu trabalho' },
    { key: 'avatar', filled: !!(form.avatar_url?.trim() || ui.avatarFile), icon: 'pi pi-image', text: 'Adicione uma foto' },
    { key: 'bio', filled: !!form.bio?.trim(), icon: 'pi pi-pencil', text: 'Complete sua bio' },
    { key: 'phone', filled: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: 'pi pi-whatsapp', text: 'Informe seu WhatsApp' },
    { key: 'social', filled: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: 'pi pi-share-alt', text: 'Adicione uma rede social' }
]);

const profileProgress = computed(() => {
    const filled = profileFields.value.filter((f) => f.filled).length;
    return Math.round((filled / profileFields.value.length) * 100);
});

const progressSuggestions = computed(() => profileFields.value.filter((f) => !f.filled));

const progressColor = computed(() => {
    if (profileProgress.value >= 80) return '#10b981';
    if (profileProgress.value >= 50) return '#f59e0b';
    return '#ef4444';
});

const gameLevels = [
    { min: 0, max: 14, label: 'Iniciante', icon: '🌱', color: '#94a3b8' },
    { min: 15, max: 28, label: 'Aprendiz', icon: '🌿', color: '#60a5fa' },
    { min: 29, max: 42, label: 'Praticante', icon: '⚡', color: '#f59e0b' },
    { min: 43, max: 57, label: 'Avançado', icon: '🔥', color: '#f97316' },
    { min: 58, max: 71, label: 'Expert', icon: '💎', color: '#a78bfa' },
    { min: 72, max: 85, label: 'Mestre', icon: '🏆', color: '#10b981' },
    { min: 86, max: 100, label: 'Lendário', icon: '🌟', color: '#eab308' }
];

const currentLevel = computed(() =>
    gameLevels.find((l) => profileProgress.value >= l.min && profileProgress.value <= l.max) || gameLevels[0]
);
const nextLevel = computed(() => {
    const i = gameLevels.indexOf(currentLevel.value);
    return i < gameLevels.length - 1 ? gameLevels[i + 1] : null;
});
const xpToNext = computed(() => (nextLevel.value ? nextLevel.value.min - profileProgress.value : 0));

const badges = computed(() => [
    { key: 'name', earned: !!form.full_name?.trim(), icon: '👤', label: 'Identificado' },
    { key: 'nick', earned: !!form.nickname?.trim(), icon: '✏️', label: 'Apelido' },
    { key: 'work', earned: !!form.work_description?.trim(), icon: '💼', label: 'Profissional' },
    { key: 'photo', earned: !!(form.avatar_url?.trim() || ui.avatarFile), icon: '📷', label: 'Fotogênico' },
    { key: 'bio', earned: !!form.bio?.trim(), icon: '📝', label: 'Eloquente' },
    { key: 'phone', earned: !!form.phone?.trim()?.replace(/[^0-9]/g, ''), icon: '📱', label: 'Conectado' },
    { key: 'social', earned: !!(form.social_instagram || form.social_x || form.site_url || form.social_youtube || form.social_facebook || customSocials.value.length), icon: '🌐', label: 'Social' }
]);

// ── Validação ──────────────────────────────────────────────
function validateRequired() {
    const nameParts = form.full_name?.trim().split(/\s+/).filter(Boolean) || [];
    fieldErrors.full_name =
        nameParts.length === 0 ? 'Nome completo é obrigatório.'
        : nameParts.length < 2 ? 'Informe seu nome e sobrenome.'
        : '';
    fieldErrors.nickname = form.nickname?.trim() ? '' : 'Nome de exibição é obrigatório.';
    const digits = form.phone?.replace(/[^0-9]/g, '') || '';
    fieldErrors.phone = digits.length >= 10 ? '' : 'WhatsApp é obrigatório.';
    return !fieldErrors.full_name && !fieldErrors.nickname && !fieldErrors.phone;
}

// ── Avatar ─────────────────────────────────────────────────
function pickAvatar() { fileInput.value?.click(); }

function clearAvatarFile() {
    ui.avatarFile = null;
    if (ui.avatarFilePreviewUrl) {
        try { URL.revokeObjectURL(ui.avatarFilePreviewUrl); } catch { /* ignore */ }
    }
    ui.avatarFilePreviewUrl = '';
    if (fileInput.value) fileInput.value.value = '';
}

function onAvatarFileSelected(ev) {
    const file = ev?.target?.files?.[0];
    if (!file) return;
    if (!file.type?.startsWith('image/')) {
        toast.add({ severity: 'warn', summary: 'Arquivo inválido', detail: 'Escolha uma imagem (PNG/JPG/WebP).', life: 3500 });
        clearAvatarFile();
        return;
    }
    if (file.size > 5 * 1024 * 1024) {
        toast.add({ severity: 'warn', summary: 'Arquivo grande', detail: 'Máximo recomendado: 5MB.', life: 3500 });
        clearAvatarFile();
        return;
    }
    ui.avatarFile = file;
    if (ui.avatarFilePreviewUrl) {
        try { URL.revokeObjectURL(ui.avatarFilePreviewUrl); } catch { /* ignore */ }
    }
    ui.avatarFilePreviewUrl = URL.createObjectURL(file);
    ui.avatarPreview = ui.avatarFilePreviewUrl;
    markDirty();
}

function removeAvatar() {
    form.avatar_url = '';
    ui.avatarPreview = '';
    clearAvatarFile();
    markDirty();
}

function extFromMime(mime) {
    if (!mime) return 'png';
    if (mime.includes('jpeg')) return 'jpg';
    if (mime.includes('png')) return 'png';
    if (mime.includes('webp')) return 'webp';
    return 'png';
}

async function uploadAvatarIfNeeded() {
    if (!ui.avatarFile) return null;
    if (!userId.value) throw new Error('Sessão inválida para upload.');
    const file = ui.avatarFile;
    const ext = extFromMime(file.type);
    const path = `${userId.value}/avatar-${Date.now()}.${ext}`;
    const { error: upErr } = await supabase.storage
        .from(AVATAR_BUCKET)
        .upload(path, file, { upsert: true, contentType: file.type });
    if (upErr) throw upErr;
    const { data } = supabase.storage.from(AVATAR_BUCKET).getPublicUrl(path);
    const url = data?.publicUrl;
    if (!url) throw new Error('Upload ok, mas não consegui obter a URL pública.');
    return url;
}

// ── Carregar / Salvar ──────────────────────────────────────
async function ensureProfileExists(uid) {
    const { data: prof, error: selErr } = await supabase
        .from('profiles').select('id, role').eq('id', uid).maybeSingle();
    if (selErr) throw selErr;
    if (prof?.id) return prof;
    const { data: created, error: insErr } = await supabase
        .from('profiles').insert({ id: uid, role: 'portal_user' }).select('id, role').single();
    if (insErr) throw insErr;
    return created;
}

async function loadProfile() {
    silentApplying.value = true;
    loading.value = true;
    try {
        const { data: u, error: uErr } = await supabase.auth.getUser();
        if (uErr) throw uErr;
        const user = u?.user;
        if (!user) throw new Error('Você precisa estar logado.');

        userId.value = user.id;
        userEmail.value = user.email || '';

        await ensureProfileExists(user.id);

        const meta = user.user_metadata || {};
        form.full_name = meta.full_name || '';
        form.avatar_url = meta.avatar_url || '';
        ui.avatarPreview = form.avatar_url;

        const { data: prof, error: pErr } = await supabase
            .from('profiles')
            .select(
                'role, full_name, avatar_url, phone, bio, nickname, work_description, work_description_other, site_url, social_instagram, social_youtube, social_facebook, social_x, social_custom, professional_registration_type, professional_registration_type_other, professional_registration_number, professional_registration_uf'
            )
            .eq('id', user.id)
            .maybeSingle();

        if (!pErr && prof) {
            userRole.value = prof.role || null;
            form.full_name = prof.full_name ?? form.full_name;
            form.avatar_url = prof.avatar_url ?? form.avatar_url;
            form.phone = prof.phone ?? '';
            form.bio = prof.bio ?? '';
            form.nickname = prof.nickname ?? '';
            form.work_description = prof.work_description ?? '';
            form.work_description_other = prof.work_description_other ?? '';
            form.site_url = prof.site_url ?? '';
            form.social_instagram = prof.social_instagram ?? '';
            form.social_youtube = prof.social_youtube ?? '';
            form.social_facebook = prof.social_facebook ?? '';
            form.social_x = prof.social_x ?? '';
            form.professional_registration_type = prof.professional_registration_type ?? '';
            form.professional_registration_type_other = prof.professional_registration_type_other ?? '';
            form.professional_registration_number = prof.professional_registration_number ?? '';
            form.professional_registration_uf = prof.professional_registration_uf ?? '';
            customSocials.value = Array.isArray(prof.social_custom) ? prof.social_custom : [];
            ui.avatarPreview = form.avatar_url;
        }
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro', detail: e?.message || 'Não consegui carregar o perfil.', life: 6000 });
    } finally {
        loading.value = false;
        silentApplying.value = false;
        dirty.value = false;
    }
}

async function saveAll() {
    if (!validateRequired()) {
        toast.add({
            severity: 'warn',
            summary: 'Campos obrigatórios',
            detail: 'Preencha nome completo, nome de exibição e WhatsApp antes de salvar.',
            life: 4000
        });
        return;
    }
    saving.value = true;
    try {
        if (ui.avatarFile) {
            try {
                const uploadedUrl = await uploadAvatarIfNeeded();
                if (uploadedUrl) {
                    form.avatar_url = uploadedUrl;
                    ui.avatarPreview = uploadedUrl;
                }
            } catch (e) {
                toast.add({
                    severity: 'warn',
                    summary: 'Avatar não subiu',
                    detail: `Não consegui enviar o arquivo (bucket "${AVATAR_BUCKET}"). (${e?.message || 'erro'})`,
                    life: 6500
                });
            }
        }

        const metaPayload = {
            full_name: String(form.full_name || '').trim(),
            avatar_url: String(form.avatar_url || '').trim() || null
        };
        const { error: upErr } = await supabase.auth.updateUser({ data: metaPayload });
        if (upErr) throw upErr;

        await ensureProfileExists(userId.value);

        const profilePayload = {
            full_name: metaPayload.full_name,
            avatar_url: metaPayload.avatar_url,
            phone: String(form.phone || '').trim() || null,
            bio: String(form.bio || '').trim() || null,
            nickname: String(form.nickname || '').trim() || null,
            work_description: String(form.work_description || '').trim() || null,
            work_description_other:
                form.work_description === 'outro'
                    ? String(form.work_description_other || '').trim() || null
                    : null,
            site_url: String(form.site_url || '').trim() || null,
            social_instagram: String(form.social_instagram || '').trim() || null,
            social_youtube: String(form.social_youtube || '').trim() || null,
            social_facebook: String(form.social_facebook || '').trim() || null,
            social_x: String(form.social_x || '').trim() || null,
            social_custom: customSocials.value.filter((s) => s.name || s.url),
            // Registro profissional (CFP) — null se vazio
            professional_registration_type: String(form.professional_registration_type || '').trim() || null,
            // type_other só preenchido quando type === 'outro' (limpa quando muda)
            professional_registration_type_other:
                form.professional_registration_type === 'outro'
                    ? (String(form.professional_registration_type_other || '').trim() || null)
                    : null,
            professional_registration_number: String(form.professional_registration_number || '').trim() || null,
            professional_registration_uf: String(form.professional_registration_uf || '').trim() || null
        };

        const { data: updatedProfile, error: pErr2 } = await supabase
            .from('profiles')
            .update(profilePayload)
            .eq('id', userId.value)
            .select('id')
            .single();

        if (pErr2) {
            const msg = String(pErr2.message || '');
            const tolerant = /does not exist/i.test(msg) || /column .* does not exist/i.test(msg)
                || /relation .* does not exist/i.test(msg) || /permission denied/i.test(msg)
                || /violates row-level security/i.test(msg);
            if (!tolerant) throw pErr2;
        }
        if (!updatedProfile) throw new Error('Perfil não encontrado para atualização.');

        clearAvatarFile();
        dirty.value = false;
        toast.add({ severity: 'success', summary: 'Salvo', detail: 'Perfil atualizado.', life: 2500 });
    } catch (e) {
        toast.add({ severity: 'error', summary: 'Erro ao salvar', detail: e?.message || 'Não consegui salvar.', life: 6000 });
    } finally {
        saving.value = false;
    }
}

// ── Ancoras: badge/dica leva pra sessao do form ────────────
const SECTION_BY_FIELD = {
    full_name:        'identidade',
    nickname:         'identidade',
    work_description: 'identidade',
    name:             'identidade',
    nick:             'identidade',
    work:             'identidade',
    avatar:           'avatar',
    photo:            'avatar',
    bio:              'bio',
    phone:            'contato',
    social:           'redes'
};

function scrollToSection(field) {
    const sec = SECTION_BY_FIELD[field];
    if (!sec) return;
    nextTick(() => {
        const target = document.getElementById('mpr-sec-' + sec);
        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
}

// ── Sair da conta ──────────────────────────────────────────
function confirmSignOut() {
    confirm.require({
        header: 'Sair da conta',
        message: 'Tem certeza que deseja sair? Você precisará fazer login novamente.',
        icon: 'pi pi-sign-out',
        acceptLabel: 'Sair',
        rejectLabel: 'Cancelar',
        acceptClass: 'p-button-danger',
        accept: async () => {
            try { await supabase.auth.signOut(); }
            finally { router.push('/auth/login'); }
        }
    });
}

// ── Lifecycle ──────────────────────────────────────────────
onMounted(async () => {
    if (typeof window !== 'undefined' && window.matchMedia) {
        _mqMobile = window.matchMedia('(max-width: 1023px)');
        isMobile.value = _mqMobile.matches;
        try { _mqMobile.addEventListener('change', _onMqMobileChange); }
        catch { _mqMobile.addListener(_onMqMobileChange); }
    }
    await tenantStore.ensureLoaded();
    await loadProfile();
});

onBeforeUnmount(() => {
    if (_mqMobile) {
        try { _mqMobile.removeEventListener('change', _onMqMobileChange); }
        catch { _mqMobile.removeListener(_onMqMobileChange); }
    }
    clearAvatarFile();
});
</script>

<template>
    <!-- Drawer mobile: hospeda a sidebar contextual da pagina (Sua
         evolucao + Avatar + Sair) via Teleport target. A navegacao
         entre configs vive no botao "Configuracoes" no topo da
         .mpr-side, que abre o MelissaConfigPopover. -->
    <Transition name="mpr-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpr-mobile-drawer"
            :class="{ 'is-open': drawerOpen }"
        >
            <div id="mpr-mobile-drawer-target" class="mpr-mobile-drawer__scroll" />
        </div>
    </Transition>
    <Transition name="mpr-drawer-fade">
        <div
            v-show="isMobile && drawerOpen"
            class="mpr-mobile-drawer__backdrop"
            @click="fecharDrawer"
        />
    </Transition>

    <section class="mpr-page">
        <header class="mpr-page__head">
            <button
                class="mpr-menu-btn mpr-menu-btn--mobile-only"
                v-tooltip.bottom="'Configurações & Evolução'"
                @click="toggleDrawer"
            >
                <i class="pi pi-bars" />
                <span>Menu Perfil</span>
            </button>
            <div class="mpr-page__title">
                <i class="pi pi-user mpr-page__title-icon" />
                <span>Meu Perfil</span>
                <span class="mpr-page__count">{{ profileProgress }}%</span>
            </div>
            <div class="mpr-page__actions">
                <button
                    class="mpr-act-btn mpr-act-btn--primary"
                    v-tooltip.bottom="'Salvar alterações'"
                    :disabled="!dirty || saving"
                    @click="saveAll"
                >
                    <i :class="saving ? 'pi pi-spin pi-spinner' : 'pi pi-check'" />
                    <span>Salvar</span>
                </button>
                <button class="mpr-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
                    <i class="pi pi-times" />
                </button>
            </div>
        </header>

        <div class="mpr-subheader">
            <i class="pi pi-info-circle mpr-subheader__icon" />
            <span class="mpr-subheader__text">
                Suas informações pessoais e indicadores de evolução do perfil. Quanto mais
                campos preenchidos, mais alto o seu nível.
            </span>
        </div>

        <div class="mpr-body">
            <!-- ═══ COL 1: Sidebar (gamificação + avatar). Em desktop
                 fica em col 1 inline. Em mobile e teleportada pro
                 drawer "Menu Perfil" (abaixo do menu de configs). ═══ -->
            <Teleport to="#mpr-mobile-drawer-target" :disabled="!isMobile">
                <aside class="mpr-side">
                    <!-- Botao alterna entre cards (default) e lista
                         de configs. Click vira "Voltar" quando aberto. -->
                    <button
                        class="mpr-cfg-btn"
                        :class="{ 'is-open': cfgOpen }"
                        @click="toggleCfg"
                    >
                        <i :class="cfgOpen ? 'pi pi-arrow-left' : 'pi pi-cog'" />
                        <span>{{ cfgOpen ? 'Voltar' : 'Configurações' }}</span>
                        <i v-if="!cfgOpen" class="pi pi-chevron-down mpr-cfg-btn__chev" />
                    </button>

                    <!-- Estado: lista de configs -->
                    <div v-if="cfgOpen" class="mpr-side__scroll mpr-side__scroll--cfg">
                        <MelissaConfigList @select="fecharCfg" />
                    </div>

                    <!-- Estado: cards contextuais (default) -->
                    <div v-else class="mpr-side__scroll">
                        <!-- Card: Sua evolução -->
                        <div class="mpr-w mpr-w--side">
                            <div class="mpr-w__head">
                                <div class="mpr-w__icon"><i class="pi pi-star" /></div>
                                <div class="mpr-w__title">
                                    <div class="mpr-w__title-text">Sua evolução</div>
                                    <div class="mpr-w__sub">Nível, conquistas e pendências</div>
                                </div>
                            </div>

                            <div class="mpr-w__body">
                            <div class="mpr-level">
                                <div
                                    class="mpr-level__icon"
                                    :style="{
                                        backgroundColor: currentLevel.color + '22',
                                        borderColor: currentLevel.color + '55',
                                        color: currentLevel.color
                                    }"
                                    v-tooltip.top="currentLevel.label"
                                >{{ currentLevel.icon }}</div>
                                <div class="mpr-level__text">
                                    <div class="mpr-level__name">
                                        {{ currentLevel.label }}
                                        <span
                                            class="mpr-level__num"
                                            :style="{
                                                backgroundColor: currentLevel.color + '20',
                                                color: currentLevel.color
                                            }"
                                        >Nível {{ gameLevels.indexOf(currentLevel) + 1 }}</span>
                                    </div>
                                    <div class="mpr-level__pct" :style="{ color: progressColor }">
                                        {{ profileProgress }}% completo
                                    </div>
                                </div>
                            </div>

                            <div class="mpr-progress">
                                <div
                                    class="mpr-progress__bar"
                                    :style="{
                                        width: profileProgress + '%',
                                        backgroundColor: currentLevel.color
                                    }"
                                />
                            </div>

                            <p class="mpr-progress__hint">
                                <span v-if="nextLevel" :style="{ color: nextLevel.color }">
                                    {{ xpToNext }}% até {{ nextLevel.label }} {{ nextLevel.icon }}
                                </span>
                                <span v-else style="color: #10b981">🎉 Perfil 100% completo!</span>
                            </p>

                            <!-- Badges -->
                            <div class="mpr-badges-head">Conquistas</div>
                            <div class="mpr-badges">
                                <button
                                    v-for="badge in badges"
                                    :key="badge.key"
                                    type="button"
                                    class="mpr-badge"
                                    :class="badge.earned ? 'is-earned' : 'is-locked'"
                                    v-tooltip.top="badge.earned ? badge.label : 'Bloqueado — ' + badge.label"
                                    @click="scrollToSection(badge.key)"
                                >
                                    <span class="mpr-badge__icon">{{ badge.icon }}</span>
                                    <span class="mpr-badge__label">{{ badge.label }}</span>
                                </button>
                            </div>

                            <!-- Dicas (campos faltando) -->
                            <div v-if="progressSuggestions.length" class="mpr-tips">
                                <div class="mpr-tips__head">O que falta</div>
                                <button
                                    v-for="(tip, i) in progressSuggestions"
                                    :key="i"
                                    type="button"
                                    class="mpr-tip"
                                    @click="scrollToSection(tip.key)"
                                >
                                    <i :class="tip.icon" />
                                    {{ tip.text }}
                                </button>
                            </div>
                            </div><!-- /.mpr-w__body -->
                        </div>

                        <!-- Card: Avatar -->
                        <div id="mpr-sec-avatar" class="mpr-w mpr-w--side">
                            <div class="mpr-w__head">
                                <div class="mpr-w__icon"><i class="pi pi-image" /></div>
                                <div class="mpr-w__title">
                                    <div class="mpr-w__title-text">Avatar</div>
                                    <div class="mpr-w__sub">Foto exibida no menu e cabeçalho</div>
                                </div>
                            </div>
                            <div class="mpr-w__body">
                            <div class="mpr-avatar">
                                <div class="mpr-avatar__preview">
                                    <img v-if="ui.avatarPreview" :src="ui.avatarPreview" alt="Avatar" />
                                    <span v-else class="mpr-avatar__initials">{{ initials }}</span>
                                </div>
                                <div class="mpr-avatar__actions">
                                    <button class="mpr-btn mpr-btn--primary" @click="pickAvatar">
                                        <i class="pi pi-upload" />
                                        <span>{{ ui.avatarPreview ? 'Trocar' : 'Enviar' }}</span>
                                    </button>
                                    <button
                                        v-if="ui.avatarPreview"
                                        class="mpr-btn mpr-btn--danger"
                                        @click="removeAvatar"
                                    >
                                        <i class="pi pi-times" />
                                        <span>Remover</span>
                                    </button>
                                </div>
                                <input
                                    ref="fileInput"
                                    type="file"
                                    accept="image/*"
                                    hidden
                                    @change="onAvatarFileSelected"
                                />
                                <div class="mpr-avatar__hint">JPG, PNG ou WebP. Máximo 5 MB.</div>
                            </div>
                            </div><!-- /.mpr-w__body -->
                        </div>
                    </div>

                    <div v-if="!cfgOpen" class="mpr-side__footer">
                        <button class="mpr-btn mpr-btn--danger mpr-btn--full" @click="confirmSignOut">
                            <i class="pi pi-sign-out" />
                            <span>Sair da conta</span>
                        </button>
                    </div>
                </aside>
            </Teleport>

            <!-- ═══ COL 2: Main (form) ═══ -->
            <div class="mpr-main">
                <!-- Skeleton enquanto carrega -->
                <template v-if="loading">
                    <div class="mpr-w" v-for="n in 3" :key="`sk-${n}`">
                        <div class="mpr-w__body">
                            <Skeleton width="40%" height="20px" class="mb-3" />
                            <Skeleton v-for="m in 3" :key="`sk-${n}-${m}`" width="100%" height="40px" class="mb-2" />
                        </div>
                    </div>
                </template>

                <template v-else>
                    <!-- ── Identidade ── -->
                    <div id="mpr-sec-identidade" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-id-card" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Identidade</div>
                                <div class="mpr-w__sub">Nome, apelido e descrição profissional</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                        <div class="mpr-grid">
                            <div class="mpr-field mpr-field--full">
                                <FloatLabel variant="on">
                                    <InputText
                                        id="mpr_name"
                                        v-model="form.full_name"
                                        class="w-full"
                                        autocomplete="name"
                                        :invalid="!!fieldErrors.full_name"
                                        @input="markDirty(); clearErr('full_name')"
                                    />
                                    <label for="mpr_name">Nome completo *</label>
                                </FloatLabel>
                                <small v-if="fieldErrors.full_name" class="mpr-err">{{ fieldErrors.full_name }}</small>
                                <small v-else class="mpr-hint">Aparece no menu, cabeçalhos e registros.</small>
                            </div>

                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText
                                        id="mpr_nickname"
                                        v-model="form.nickname"
                                        class="w-full"
                                        autocomplete="nickname"
                                        :invalid="!!fieldErrors.nickname"
                                        @input="markDirty(); clearErr('nickname')"
                                    />
                                    <label for="mpr_nickname">Como deveríamos te chamar? *</label>
                                </FloatLabel>
                                <small v-if="fieldErrors.nickname" class="mpr-err">{{ fieldErrors.nickname }}</small>
                                <small v-else class="mpr-hint">Apelido ou nome preferido.</small>
                            </div>

                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <Select
                                        id="mpr_work"
                                        v-model="form.work_description"
                                        :options="workDescriptionOptions"
                                        optionLabel="label"
                                        optionValue="value"
                                        class="w-full"
                                        @change="markDirty"
                                    />
                                    <label for="mpr_work">Como descreve seu trabalho?</label>
                                </FloatLabel>
                                <small class="mpr-hint">Exibido no seu perfil público.</small>
                            </div>

                            <div v-if="form.work_description === 'outro'" class="mpr-field mpr-field--full">
                                <FloatLabel variant="on">
                                    <InputText
                                        id="mpr_work_other"
                                        v-model="form.work_description_other"
                                        class="w-full"
                                        @input="markDirty"
                                    />
                                    <label for="mpr_work_other">Especifique a profissão</label>
                                </FloatLabel>
                            </div>
                        </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Registro Profissional (CFP #5) ── -->
                    <div id="mpr-sec-registro" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-id-card" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Registro profissional</div>
                                <div class="mpr-w__sub">Conselho regional — exigido para emissão de recibos, atestados e laudos</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                            <div class="mpr-grid">
                                <div class="mpr-field mpr-field--half">
                                    <FloatLabel variant="on">
                                        <Select
                                            id="mpr_reg_type"
                                            v-model="form.professional_registration_type"
                                            :options="REGISTRATION_TYPE_OPTIONS"
                                            optionLabel="label"
                                            optionValue="value"
                                            class="w-full"
                                            @change="markDirty"
                                        />
                                        <label for="mpr_reg_type">Tipo de registro</label>
                                    </FloatLabel>
                                    <small class="mpr-hint">Conselho profissional ao qual você é vinculado.</small>
                                </div>

                                <!-- Campo livre quando tipo='outro' -->
                                <div v-if="form.professional_registration_type === 'outro'" class="mpr-field mpr-field--half">
                                    <FloatLabel variant="on">
                                        <InputText
                                            id="mpr_reg_type_other"
                                            v-model="form.professional_registration_type_other"
                                            class="w-full"
                                            @input="markDirty"
                                        />
                                        <label for="mpr_reg_type_other">Nome do conselho/instituição *</label>
                                    </FloatLabel>
                                    <small class="mpr-hint">Ex: APM, ABRAP, etc.</small>
                                </div>

                                <div class="mpr-field mpr-field--half">
                                    <FloatLabel variant="on">
                                        <InputText
                                            id="mpr_reg_number"
                                            v-model="form.professional_registration_number"
                                            class="w-full"
                                            :disabled="!form.professional_registration_type"
                                            @input="markDirty"
                                        />
                                        <label for="mpr_reg_number">Número do registro</label>
                                    </FloatLabel>
                                    <small class="mpr-hint">Ex: 06/12345</small>
                                </div>

                                <div class="mpr-field mpr-field--half">
                                    <FloatLabel variant="on">
                                        <Select
                                            id="mpr_reg_uf"
                                            v-model="form.professional_registration_uf"
                                            :options="UF_OPTIONS"
                                            optionLabel="label"
                                            optionValue="value"
                                            :disabled="!form.professional_registration_type"
                                            :filter="true"
                                            class="w-full"
                                            @change="markDirty"
                                        />
                                        <label for="mpr_reg_uf">UF</label>
                                    </FloatLabel>
                                    <small class="mpr-hint">Estado do conselho.</small>
                                </div>

                                <div v-if="form.professional_registration_type && form.professional_registration_number" class="mpr-field mpr-field--full">
                                    <div class="mpr-preview-box">
                                        <span class="mpr-preview-label">Aparecerá nos documentos como:</span>
                                        <strong class="mpr-preview-value">
                                            {{ form.professional_registration_type === 'outro'
                                                ? (form.professional_registration_type_other || 'Conselho não informado')
                                                : form.professional_registration_type }}
                                            {{ form.professional_registration_number }}{{ form.professional_registration_uf ? '/' + form.professional_registration_uf : '' }}
                                        </strong>
                                    </div>
                                </div>
                            </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Contato ── -->
                    <div id="mpr-sec-contato" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-phone" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Contato</div>
                                <div class="mpr-w__sub">WhatsApp e e-mail de login</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                        <div class="mpr-grid">
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputMask
                                        id="mpr_phone"
                                        v-model="form.phone"
                                        mask="(99) 99999-9999"
                                        class="w-full"
                                        :invalid="!!fieldErrors.phone"
                                        @input="markDirty(); clearErr('phone')"
                                    />
                                    <label for="mpr_phone">WhatsApp *</label>
                                </FloatLabel>
                                <small v-if="fieldErrors.phone" class="mpr-err">{{ fieldErrors.phone }}</small>
                                <small v-else class="mpr-hint">Usado pra atendimento e suporte.</small>
                            </div>
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText
                                        id="mpr_email"
                                        :value="userEmail"
                                        readonly
                                        placeholder=" "
                                        class="w-full"
                                    />
                                    <label for="mpr_email">E-mail (login)</label>
                                </FloatLabel>
                                <small class="mpr-hint">Pra trocar, vá em Segurança.</small>
                            </div>
                        </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Bio ── -->
                    <div id="mpr-sec-bio" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-pencil" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Bio</div>
                                <div class="mpr-w__sub">Apresentação curta para o seu perfil público</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                        <FloatLabel variant="on">
                            <Textarea
                                id="mpr_bio"
                                v-model="form.bio"
                                rows="4"
                                class="w-full"
                                @input="markDirty"
                            />
                            <label for="mpr_bio">Conte um pouco sobre você</label>
                        </FloatLabel>
                        <small class="mpr-hint">Apresentação curta — aparece no seu perfil público.</small>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Sites e Redes ── -->
                    <div id="mpr-sec-redes" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-share-alt" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Sites e Redes</div>
                                <div class="mpr-w__sub">Site, redes sociais e links customizados</div>
                            </div>
                            <button class="mpr-w__action" @click="addCustomSocial">
                                <i class="pi pi-plus" />
                                <span>Adicionar</span>
                            </button>
                        </div>
                        <div class="mpr-w__body">
                        <div class="mpr-grid">
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText id="mpr_site" v-model="form.site_url" class="w-full" @input="markDirty" />
                                    <label for="mpr_site">Site</label>
                                </FloatLabel>
                            </div>
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText id="mpr_ig" v-model="form.social_instagram" class="w-full" @input="markDirty" />
                                    <label for="mpr_ig">Instagram</label>
                                </FloatLabel>
                            </div>
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText id="mpr_yt" v-model="form.social_youtube" class="w-full" @input="markDirty" />
                                    <label for="mpr_yt">YouTube</label>
                                </FloatLabel>
                            </div>
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText id="mpr_fb" v-model="form.social_facebook" class="w-full" @input="markDirty" />
                                    <label for="mpr_fb">Facebook</label>
                                </FloatLabel>
                            </div>
                            <div class="mpr-field mpr-field--half">
                                <FloatLabel variant="on">
                                    <InputText id="mpr_x" v-model="form.social_x" class="w-full" @input="markDirty" />
                                    <label for="mpr_x">X (Twitter)</label>
                                </FloatLabel>
                            </div>
                        </div>

                        <!-- Customs -->
                        <div v-if="customSocials.length" class="mpr-customs">
                            <div
                                v-for="(s, idx) in customSocials"
                                :key="`cs-${idx}`"
                                class="mpr-custom"
                            >
                                <FloatLabel variant="on" class="flex-1">
                                    <InputText
                                        :id="`cs_name_${idx}`"
                                        v-model="s.name"
                                        class="w-full"
                                        @input="markDirty"
                                    />
                                    <label :for="`cs_name_${idx}`">Nome (ex: TikTok)</label>
                                </FloatLabel>
                                <FloatLabel variant="on" class="flex-1">
                                    <InputText
                                        :id="`cs_url_${idx}`"
                                        v-model="s.url"
                                        class="w-full"
                                        @input="markDirty"
                                    />
                                    <label :for="`cs_url_${idx}`">URL</label>
                                </FloatLabel>
                                <button
                                    class="mpr-btn mpr-btn--danger mpr-btn--icon"
                                    v-tooltip.left="'Remover'"
                                    @click="removeCustomSocial(idx)"
                                >
                                    <i class="pi pi-trash" />
                                </button>
                            </div>
                        </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Layout (variante de navegação) ── -->
                    <div id="mpr-sec-layout" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-th-large" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Layout</div>
                                <div class="mpr-w__sub">Estilo de navegação principal — troca exige reload</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                            <div class="mpr-lv-grid">
                                <button
                                    class="mpr-lv-card"
                                    :class="{ 'mpr-lv-card--current': layoutConfig.variant === 'classic' }"
                                    :disabled="layoutConfig.variant === 'classic'"
                                    @click="switchToVariant('classic')"
                                >
                                    <div class="mpr-lv-preview mpr-lv-preview--classic">
                                        <div class="mpr-lv-sidebar" />
                                        <div class="mpr-lv-main">
                                            <div class="mpr-lv-bar" />
                                            <div class="mpr-lv-line" />
                                            <div class="mpr-lv-line mpr-lv-line--sm" />
                                        </div>
                                    </div>
                                    <div class="mpr-lv-foot">
                                        <div class="mpr-lv-radio">
                                            <div v-if="layoutConfig.variant === 'classic'" class="mpr-lv-dot" />
                                        </div>
                                        <div>
                                            <div class="mpr-lv-name">Clássico</div>
                                            <div class="mpr-lv-sub">Sidebar lateral com menu completo</div>
                                        </div>
                                    </div>
                                </button>

                                <button
                                    class="mpr-lv-card"
                                    :class="{ 'mpr-lv-card--current': layoutConfig.variant === 'rail' }"
                                    :disabled="layoutConfig.variant === 'rail'"
                                    @click="switchToVariant('rail')"
                                >
                                    <div class="mpr-lv-preview mpr-lv-preview--rail">
                                        <div class="mpr-lv-rail" />
                                        <div class="mpr-lv-panel" />
                                        <div class="mpr-lv-main">
                                            <div class="mpr-lv-bar" />
                                            <div class="mpr-lv-line" />
                                            <div class="mpr-lv-line mpr-lv-line--sm" />
                                        </div>
                                    </div>
                                    <div class="mpr-lv-foot">
                                        <div class="mpr-lv-radio">
                                            <div v-if="layoutConfig.variant === 'rail'" class="mpr-lv-dot" />
                                        </div>
                                        <div>
                                            <div class="mpr-lv-name">Rail</div>
                                            <div class="mpr-lv-sub">Ícones no canto esquerdo + painel expansível. Disponível apenas no desktop.</div>
                                        </div>
                                    </div>
                                </button>

                                <button
                                    class="mpr-lv-card"
                                    :class="{ 'mpr-lv-card--current': layoutConfig.variant === 'melissa' }"
                                    :disabled="layoutConfig.variant === 'melissa'"
                                    @click="switchToVariant('melissa')"
                                >
                                    <div class="mpr-lv-preview mpr-lv-preview--melissa">
                                        <div class="mpr-lv-melissa-bg" />
                                        <div class="mpr-lv-melissa-dock" />
                                    </div>
                                    <div class="mpr-lv-foot">
                                        <div class="mpr-lv-radio">
                                            <div v-if="layoutConfig.variant === 'melissa'" class="mpr-lv-dot" />
                                        </div>
                                        <div>
                                            <div class="mpr-lv-name">Melissa</div>
                                            <div class="mpr-lv-sub">Lockscreen-style com dock central (atual)</div>
                                        </div>
                                    </div>
                                </button>
                            </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Preferências (tema + aparência) ── -->
                    <div id="mpr-sec-preferencias" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-palette" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Preferências</div>
                                <div class="mpr-w__sub">Aparência do sistema</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                            <div class="mpr-grid">
                                <div class="mpr-field mpr-field--full">
                                    <label class="mpr-label">Tema</label>
                                    <div class="mpr-theme-row">
                                        <button
                                            type="button"
                                            class="mpr-lv-card mpr-theme-card"
                                            :class="{ 'mpr-lv-card--current': !isDarkTheme }"
                                            @click="isDarkTheme && toggleDarkMode()"
                                        >
                                            <i class="pi pi-sun mpr-theme-icon" style="color: #f59e0b;" />
                                            <div class="mpr-theme-text">
                                                <div class="mpr-lv-name">Claro</div>
                                                <div class="mpr-lv-sub">Fundo branco</div>
                                            </div>
                                            <div class="mpr-lv-radio">
                                                <div v-if="!isDarkTheme" class="mpr-lv-dot" />
                                            </div>
                                        </button>
                                        <button
                                            type="button"
                                            class="mpr-lv-card mpr-theme-card"
                                            :class="{ 'mpr-lv-card--current': isDarkTheme }"
                                            @click="!isDarkTheme && toggleDarkMode()"
                                        >
                                            <i class="pi pi-moon mpr-theme-icon" style="color: #6366f1;" />
                                            <div class="mpr-theme-text">
                                                <div class="mpr-lv-name">Escuro</div>
                                                <div class="mpr-lv-sub">Menos fadiga visual</div>
                                            </div>
                                            <div class="mpr-lv-radio">
                                                <div v-if="isDarkTheme" class="mpr-lv-dot" />
                                            </div>
                                        </button>
                                    </div>
                                    <small class="mpr-hint">A preferência é salva no seu perfil.</small>
                                </div>
                            </div>
                        </div><!-- /.mpr-w__body -->
                    </div>

                    <!-- ── Segurança ── -->
                    <div id="mpr-sec-seguranca" class="mpr-w">
                        <div class="mpr-w__head">
                            <div class="mpr-w__icon"><i class="pi pi-shield" /></div>
                            <div class="mpr-w__title">
                                <div class="mpr-w__title-text">Segurança</div>
                                <div class="mpr-w__sub">Senha e proteção da conta</div>
                            </div>
                        </div>
                        <div class="mpr-w__body">
                            <div class="mpr-grid">
                                <div class="mpr-field mpr-field--full">
                                    <div class="mpr-info-row">
                                        <div class="mpr-info-text">
                                            <div class="mpr-info-title">E-mail de acesso</div>
                                            <div class="mpr-info-value">{{ userEmail }}</div>
                                        </div>
                                        <small class="mpr-hint mpr-info-hint">Para trocar o e-mail, contate o suporte.</small>
                                    </div>
                                </div>
                                <div class="mpr-field mpr-field--full">
                                    <button type="button" class="mpr-lv-card mpr-action-card" @click="goSeguranca">
                                        <i class="pi pi-key mpr-action-icon" />
                                        <div class="mpr-action-text">
                                            <div class="mpr-lv-name">Trocar senha</div>
                                            <div class="mpr-lv-sub">Atualize sua senha de acesso ao sistema</div>
                                        </div>
                                        <i class="pi pi-arrow-right mpr-action-arrow" />
                                    </button>
                                </div>
                            </div>
                        </div><!-- /.mpr-w__body -->
                    </div>
                </template>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* ═══════ Page chrome ═══════ */
.mpr-page {
    position: absolute;
    inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-medium);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    border: 1px solid var(--m-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--m-text);
    animation: mpr-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes mpr-page-enter {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}

.mpr-page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--m-border);
    flex-shrink: 0;
    gap: 10px;
}
.mpr-page__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpr-page__title-icon {
    color: var(--p-primary-color);
    font-size: 1.05rem;
}
.mpr-page__count {
    margin-left: auto;
    background: color-mix(in srgb, var(--p-primary-color) 18%, transparent);
    color: var(--p-primary-color);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 700;
}
.mpr-page__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mpr-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.mpr-act-btn:hover {
    background: var(--m-bg-soft-hover);
}
.mpr-act-btn--primary {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mpr-act-btn--primary:hover {
    background: color-mix(in srgb, var(--p-primary-color) 88%, black);
}
.mpr-act-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mpr-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.mpr-close:hover {
    background: var(--m-bg-soft-hover);
    color: var(--m-text);
}

.mpr-menu-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}
.mpr-menu-btn:hover { background: var(--m-bg-soft-hover); }

.mpr-subheader {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 18px;
    background: var(--m-bg-soft);
    border-bottom: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}
.mpr-subheader__icon {
    color: var(--p-primary-color);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════ Body 2-col ═══════ */
.mpr-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* Botao "Configuracoes" no topo da .mpr-side. Click alterna entre
   cards (default) e lista de configs (estado is-open: vira "Voltar"). */
.mpr-cfg-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px 12px 0;
    padding: 10px 12px;
    background: var(--m-bg-medium);
    border: 1px solid var(--m-border);
    border-radius: 9px;
    color: var(--m-text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    flex-shrink: 0;
}
.mpr-cfg-btn:hover {
    background: var(--m-bg-soft-hover);
    border-color: var(--m-border-strong);
}
.mpr-cfg-btn.is-open {
    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
    color: var(--p-primary-color);
}
.mpr-cfg-btn > i:first-child {
    color: var(--p-primary-color);
    font-size: 0.92rem;
}
.mpr-cfg-btn > span {
    flex: 1;
}
.mpr-cfg-btn__chev {
    color: var(--m-text-muted);
    font-size: 0.7rem;
}

/* Variante do scroll quando renderiza a lista de configs em vez
   dos cards — sem gap entre items (a propria lista controla). */
.mpr-side__scroll--cfg {
    padding: 8px;
    gap: 0;
}

/* COL 1: sidebar */
.mpr-side {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--m-bg-soft);
    border-right: 1px solid var(--m-border);
    overflow: hidden;
}
.mpr-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpr-side__scroll::-webkit-scrollbar { width: 5px; }
.mpr-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mpr-side__footer {
    flex-shrink: 0;
    padding: 12px;
    background: var(--m-bg-medium);
    border-top: 1px solid var(--m-border);
}

/* COL 2: main */
.mpr-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpr-main::-webkit-scrollbar { width: 5px; }
.mpr-main::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}

/* Desktop (>=1024px): cards em 2 colunas (50/50) no main. Internal
   grid colapsa pra 1 col pra nao ficar cramped. Cada card tem
   min-height 300px + max-height 100% (do container) e overflow-y:
   auto no body — adicionar redes/customs nao quebra layout, scroll
   interno engata. Mesma logica nos cards da sidebar (Sua evolucao,
   Avatar) que cresciam quando muitas badges/dicas apareciam. */
@media (min-width: 1024px) {
    /* Fake dialog: largura adaptativa, alinhada a esquerda (apos o
       config-aside global). Espelha pattern de Seguranca/Pagamento/etc:
       - 1024–1012px : full-width (right: 6px) — overlap minimo
       - 1012–2012px : width = 1000px fixo (right cresce com viewport)
       - >= 2012px   : width = ~50% do viewport (right: 50%) */
    .mpr-page {
        right: max(6px, min(50%, calc(100% - 1006px)));
    }

    /* Cards do main empilhados em 1-col (era grid 2-col antes).
       .mpr-main herda flex-direction: column do base — cards crescem
       com conteudo, sem scroll interno. Cada card ocupa width total
       do dialog (max ~1000px). */
    .mpr-main > .mpr-w {
        flex-shrink: 0;
        height: auto;
    }
    /* Cards da sidebar (Sua evolucao + Avatar): altura natural,
       flex-shrink: 0 evita compressao quando total passa do
       .mpr-side__scroll (scroll externo). */
    .mpr-side > .mpr-side__scroll > .mpr-w--side {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        height: auto;
    }
}

/* ═══════ Card-base (mpr-w) — visual igual aos cards do MelissaFinanceiro:
   head com icon-box colorido + titulo + subtitulo + border-bottom; body
   com padding interno separado; box-shadow pra elevacao. */
.mpr-w {
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}
/* Cards na sidebar — bg --m-bg-medium destacando do bg --m-bg-soft
   da .mpr-side (espelha o pattern do MelissaPacientes .mp-w). */
.mpr-w--side {
    background: var(--m-bg-medium);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.mpr-w__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--m-border);
}
.mpr-w__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--p-primary-color) 15%, transparent);
    color: var(--p-primary-color);
    font-size: 1rem;
}
.mpr-w__icon > i { font-size: 0.95rem; }
.mpr-w__title {
    flex: 1;
    min-width: 0;
}
.mpr-w__title-text {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
    line-height: 1.2;
}
.mpr-w__sub {
    font-size: 0.74rem;
    color: var(--m-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.mpr-w__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 7px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-medium);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background-color 120ms ease;
}
.mpr-w__action:hover { background: var(--m-bg-soft-hover); }
.mpr-w__action > i { font-size: 0.72rem; color: var(--p-primary-color); }

/* Body do card — wrapper unificado pra padding/gap consistente */
.mpr-w__body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══════ Gamificação ═══════ */
.mpr-level {
    display: flex;
    align-items: center;
    gap: 10px;
}
.mpr-level__icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.mpr-level__text {
    flex: 1;
    min-width: 0;
}
.mpr-level__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--m-text);
}
.mpr-level__num {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}
.mpr-level__pct {
    font-size: 0.74rem;
    font-weight: 700;
    margin-top: 2px;
}

.mpr-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--m-bg-soft);
    overflow: hidden;
}
.mpr-progress__bar {
    height: 100%;
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mpr-progress__hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--m-text-muted);
    font-weight: 600;
}

.mpr-badges-head {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
}
.mpr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.mpr-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--m-border);
    font-size: 0.7rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease;
}
.mpr-badge:hover { transform: translateY(-1px); }
.mpr-badge.is-earned {
    background: color-mix(in srgb, var(--p-primary-color) 14%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
    color: var(--p-primary-color);
    font-weight: 600;
}
.mpr-badge.is-locked {
    background: var(--m-bg-soft);
    color: var(--m-text-faint);
    opacity: 0.6;
}
.mpr-badge__icon { font-size: 0.85rem; line-height: 1; }
.mpr-badge__label { line-height: 1; }

.mpr-tips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 8px;
    border-top: 1px solid var(--m-border);
}
.mpr-tips__head {
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--m-text-muted);
}
.mpr-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--m-bg-soft);
    border: 1px solid var(--m-border);
    color: var(--m-text-muted);
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.mpr-tip:hover {
    background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
    border-color: color-mix(in srgb, var(--p-primary-color) 38%, transparent);
    color: var(--p-primary-color);
}
.mpr-tip > i { font-size: 0.7rem; color: var(--p-primary-color); }

/* ═══════ Avatar (sidebar) ═══════ */
.mpr-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 0 0;
}
.mpr-avatar__preview {
    width: 96px;
    height: 96px;
    border-radius: 18px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.mpr-avatar__preview > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mpr-avatar__initials {
    font-size: 2rem;
    font-weight: 800;
    color: var(--m-text);
}
.mpr-avatar__actions {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
}
.mpr-avatar__hint {
    font-size: 0.7rem;
    color: var(--m-text-muted);
    text-align: center;
}

/* ═══════ Buttons (sidebar utilitarios) ═══════ */
.mpr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--m-border);
    background: var(--m-bg-soft);
    color: var(--m-text);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background-color 120ms ease;
}
.mpr-btn:hover { background: var(--m-bg-soft-hover); }
.mpr-btn--primary {
    background: var(--p-primary-color);
    border-color: var(--p-primary-color);
    color: var(--p-primary-contrast-color, #fff);
}
.mpr-btn--primary:hover {
    background: color-mix(in srgb, var(--p-primary-color) 88%, black);
}
.mpr-btn--danger {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.40);
    color: rgb(220, 38, 38);
}
.mpr-btn--danger:hover {
    background: rgba(220, 38, 38, 0.22);
}
.mpr-btn--full { width: 100%; }
.mpr-btn--icon {
    padding: 7px 10px;
    flex-shrink: 0;
}

/* ═══════ Form grid (main) ═══════ */
.mpr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 12px;
    margin-top: 4px;
}
.mpr-field { min-width: 0; }
.mpr-field--full { grid-column: 1 / -1; }
.mpr-field--half { grid-column: span 1; }

.mpr-hint, .mpr-err {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    line-height: 1.3;
}
.mpr-hint { color: var(--m-text-muted); }
.mpr-err { color: rgb(220, 38, 38); font-weight: 500; }

/* ═══════ Custom socials ═══════ */
.mpr-customs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--m-border);
}
.mpr-custom {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.mpr-custom > .p-floatlabel,
.mpr-custom > div { min-width: 0; }

/* ═══════ Mobile drawer — agora hospeda o MENU GLOBAL DE CONFIGS
   no topo + a sidebar contextual (Sua evolucao + Avatar) abaixo via
   Teleport target. Em desktop o drawer fica oculto e o
   MelissaLayout renderiza o menu fixado na esquerda. */
.mpr-mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    height: 100dvh;
    width: min(360px, 88vw);
    z-index: 80;
    background: var(--m-bg-medium);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border-right: 1px solid var(--m-border);
    transform: translateX(-100%);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--m-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}
.mpr-mobile-drawer.is-open { transform: translateX(0); }
.mpr-mobile-drawer__scroll {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Aside teleportada pro drawer — perde adornos proprios */
.mpr-mobile-drawer__scroll .mpr-side {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    background: transparent;
    border-right: none;
    display: flex;
    flex-direction: column;
}
.mpr-mobile-drawer__scroll .mpr-cfg-btn {
    margin: 12px 12px 0;
    flex-shrink: 0;
}
.mpr-mobile-drawer__scroll .mpr-side__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--m-border-strong) transparent;
}
.mpr-mobile-drawer__scroll .mpr-side__scroll::-webkit-scrollbar { width: 5px; }
.mpr-mobile-drawer__scroll .mpr-side__scroll::-webkit-scrollbar-thumb {
    background: var(--m-border-strong);
    border-radius: 3px;
}
.mpr-mobile-drawer__scroll .mpr-w--side {
    margin: 0;
    flex-shrink: 0;
}
.mpr-mobile-drawer__scroll .mpr-side__footer {
    flex-shrink: 0;
    margin: 0;
    padding: 12px;
    background: var(--m-bg-medium);
    border-top: 1px solid var(--m-border);
}

.mpr-mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 79;
}
.mpr-drawer-fade-enter-active,
.mpr-drawer-fade-leave-active { transition: opacity 200ms ease; }
.mpr-drawer-fade-enter-from,
.mpr-drawer-fade-leave-to { opacity: 0; }

/* ═══════ Mobile (<1024px) ═══════ */
@media (max-width: 1023px) {
    .mpr-body {
        flex-direction: column;
        padding: 0;
    }
    /* .mpr-side foi Teleportada pro drawer — nao precisa de display: none
       (Teleport ja a removeu do .mpr-body). Aplicar display: none aqui
       escondia o elemento teleportado dentro do drawer. */
    .mpr-main {
        width: 100%;
        padding: 8px;
    }
    /* Cards em mobile: altura natural por conteudo (sem stretch
       vertical do flex column do .mpr-main, sem clip por overflow). */
    .mpr-main .mpr-w {
        height: auto;
        flex: 0 0 auto;
        align-self: stretch;
    }
    .mpr-grid {
        grid-template-columns: 1fr;
    }
    .mpr-field--half { grid-column: 1 / -1; }
    .mpr-page__title > span:first-of-type { display: none; }
    .mpr-page__title-icon { display: none; }
    .mpr-menu-btn--mobile-only { display: inline-flex; }
    /* Botao Salvar mostra o texto em mobile (acao primaria importante) */
    .mpr-custom { flex-direction: column; gap: 8px; }
    .mpr-custom .mpr-btn--icon { align-self: flex-end; }
}

/* ═══════ Layout variant cards ═══════ */
.mpr-lv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.mpr-lv-card {
    background: var(--m-surface-2, var(--surface-card));
    border: 1px solid var(--m-border, var(--surface-border));
    border-radius: 10px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
}
.mpr-lv-card:hover:not(:disabled) {
    border-color: var(--p-primary-500, #7c3aed);
    background: var(--m-surface-hover, var(--surface-hover));
}
.mpr-lv-card:disabled {
    cursor: default;
    opacity: 0.9;
}
.mpr-lv-card--current {
    border-color: var(--p-primary-500, #7c3aed);
    box-shadow: 0 0 0 1px var(--p-primary-500, #7c3aed) inset;
}
.mpr-lv-preview {
    height: 92px;
    border-radius: 6px;
    background: var(--m-surface-3, var(--surface-100));
    border: 1px solid var(--m-border, var(--surface-border));
    position: relative;
    overflow: hidden;
    display: flex;
}
.mpr-lv-preview--classic .mpr-lv-sidebar {
    width: 30%;
    background: var(--p-primary-500, #7c3aed);
    opacity: 0.85;
}
.mpr-lv-preview--rail .mpr-lv-rail {
    width: 12%;
    background: var(--p-primary-500, #7c3aed);
    opacity: 0.85;
}
.mpr-lv-preview--rail .mpr-lv-panel {
    width: 22%;
    background: var(--p-primary-500, #7c3aed);
    opacity: 0.35;
}
.mpr-lv-main {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mpr-lv-bar {
    height: 8px;
    background: var(--m-border-strong, var(--surface-300));
    border-radius: 2px;
    opacity: 0.6;
}
.mpr-lv-line {
    height: 5px;
    background: var(--m-border-strong, var(--surface-300));
    border-radius: 2px;
    opacity: 0.4;
}
.mpr-lv-line--sm { width: 65%; }
.mpr-lv-preview--melissa {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}
.mpr-lv-melissa-bg {
    position: absolute;
    inset: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
}
.mpr-lv-melissa-dock {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.25);
}
.mpr-lv-foot {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}
.mpr-lv-radio {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 1.5px solid var(--m-border-strong, var(--surface-400));
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 3px;
}
.mpr-lv-card--current .mpr-lv-radio {
    border-color: var(--p-primary-500, #7c3aed);
}
.mpr-lv-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--p-primary-500, #7c3aed);
}
.mpr-lv-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.2;
}
.mpr-lv-sub {
    font-size: 0.75rem;
    color: var(--text-color-secondary);
    line-height: 1.3;
    margin-top: 2px;
}

/* ═══════════ Registro Profissional — preview box ═══════════ */
.mpr-preview-box {
    background: color-mix(in srgb, var(--p-primary-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-primary-color) 22%, var(--surface-border));
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mpr-preview-label {
    color: var(--text-color-secondary);
}
.mpr-preview-value {
    color: var(--text-color);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ═══════════ Preferências — tema em 1 linha ═══════════ */
.mpr-theme-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mpr-theme-card {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-align: left;
}
.mpr-theme-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mpr-theme-text {
    flex: 1;
    min-width: 0;
}

/* ═══════════ Segurança — info row + action card ═══════════ */
.mpr-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface-ground, transparent);
}
.mpr-info-text {
    flex: 1;
    min-width: 0;
}
.mpr-info-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-color);
}
.mpr-info-value {
    color: var(--text-color-secondary);
    font-size: 0.9rem;
}
.mpr-info-hint {
    margin: 0;
    flex-shrink: 0;
}

.mpr-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.mpr-action-icon {
    font-size: 1.4rem;
    color: var(--text-color);
    flex-shrink: 0;
}
.mpr-action-text {
    flex: 1;
    min-width: 0;
}
.mpr-action-arrow {
    opacity: 0.5;
    flex-shrink: 0;
}
</style>
